mall-web-ssr/components/product/component/ComponentDetail.vue

<template>
  <div class="componentDetail">
    <div class="container">
      <div class="menu">
        <component-menu/>
      </div>
      <div class="detail">
        <div class="component-img">
          <img :src="list.img || '/images/component/default.png'"/>
        </div>
        <div class="component-message">
          <div class="message-code">
            <span>{{list.code}}</span>
          </div>
          <div class="hr-grey"></div>
          <div class="row">
            <div class="form-group row" v-if="list.brand">
              <div class="message-item">类目</div>
              <div class="colon">:</div>
              <div><a class="message-body blue" target="_blank" :href="`/product/kind/${list.brand.id}`">{{list.brand.nameCn}}</a></div>
            </div>
            <div class="form-group row" v-if="list.kind">
              <div class="message-item">品牌</div>
              <div class="colon">:</div>
              <div><a class="message-body blue" target="_blank" :href="`/product/brand/${list.brand.uuid}`">{{list.kind.nameCn}}</a></div>
            </div>
            <div class="form-group row">
              <div class="message-item">总库存量</div>
              <div class="colon">:</div>
              <div class="message-body">{{list.reserve || '暂无库存'}}</div>
            </div>
            <div class="form-group row">
              <div class="message-item">封装</div>
              <div class="colon">:</div>
              <div class="message-body">{{list.encapsulation || '暂无信息'}}</div>
            </div>
            <div class="form-group row">
              <div class="message-item">下载</div>
              <div class="colon">:</div>
              <div class="message-body"><a :href="list.attach" v-if="list.attach">规格书</a><span v-if="!list.attach">暂无规格书</span></div>
            </div>
            <div class="form-group">
              <button class="btn btn-default btn-stroe">加入收藏</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { ComponentMenu } from '~components/product'
  export default {
    name: 'ComponentDetail',
    computed: {
      lists () {
        return this.$store.state.componentDetail.detail
      },
      list () {
        return this.lists.data
      }
    },
    components: {
      ComponentMenu
    }
  }
</script>
<style scoped>
  .componentDetail .container {
    width: 1190px;
    padding: 0;
  }
  .detail{
    margin-bottom: 20px;
  }
  .componentDetail .container .component-img {
    width: 260px;
    height: 260px;
    display: table-cell;
    border:1px solid #ccc;
    text-align: center;
    vertical-align: middle;
  }
  .componentDetail .container .component-img a {
    display: table-cell;
    width: 258px;
    height: 258px;
    text-align: center;
    vertical-align: middle;
  }
  .componentDetail .container .component-img img {
    max-width: 258px;
    max-height: 258px;
  }
  .componentDetail .blue {
    color: #214797;
  }
  .componentDetail .container .component-message {
    width: 910px;
    display: table-cell;
    padding-left: 20px;
    margin-left: 10px;
  }
  .componentDetail .container .component-message .message-code {
    font-size: 24px;
    color: rgb(50,50,50);
    font-weight: 700;
    line-height: 40px;
  }
  .componentDetail .container .component-message .hr-grey {
    height: 1px;
    width: 100%;
    background-color: #ccc;
  }
  .componentDetail .container .component-message .row {
    margin: 12px 0;
    width: 890px;
    height: 16px;
  }
  .componentDetail .container .component-message .message-item {
    float:left;
    width:60px;
    text-align: justify;
    text-align-last: justify;
    font-size: 14px;
  }
  .componentDetail .container .component-message .colon {
    float:left;
    margin: 0 10px;
  }
  .componentDetail .container .component-message .message-body {
    float: left;
    font-size: 14px;
  }
  .componentDetail .message-item:first-child {
    padding-left: 0;
  }
  .componentDetail .container .storeIns{
    margin-top: 20px;
    width: 1190px;
    height: 48px;
    line-height: 48px;
  }
  .componentDetail .container .storeIns .sign {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
  }
  .componentDetail .container .storeIns .storeInList {
    display: table-cell;
  }
  .componentDetail .container .storeIn {
    width: 98px;
    height: 49px;
    line-height: 30px;
    float: left;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    margin-right: 15px;
    cursor: pointer;
  }
  .componentDetail .container .storeIn-active {
    width: 98px;
    float: left;
    border: 1px solid #5078cb;
    text-align: center;
    vertical-align: middle;
    margin-right: 15px;
    cursor: pointer;
  }
  .componentDetail .container .storeIn a,.componentDetail .storeIn-active a {
    display: table-cell;
    height: 46px;
    width: 98px;
    text-align: center;
    vertical-align: middle;
  }
  .componentDetail .storeIn a>img,.componentDetail .storeIn-active a>img {
    max-width: 95px;
    max-height: 46px;
  }
</style>