mall-web-ssr/pages/mobile/product/_batchCode.vue

<template>
  <div class="mobile-content commodity-detail">
    <div class="logo-wrap">
      <img :src="commodity.img || '/images/store/common/default.png'" alt="">
    </div>
    <div class="content-wrap">
      <div class="content-line cl-title">
        <span class="code text-ellipse inline-block">sddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>
        <div class="focus-wrap inline-block">
          <i class="iconfont icon-shoucang"></i>
          <span>店铺关注</span>
        </div>
      </div>
      <div class="content-line cl-price1">
        <div class="fl">
          <p class="price-tag">价格:</p>
          <span>数量:</span>
        </div>
        <ul>
          <li class="text-ellipse inline-block price-level">
            <p><span>$</span>159.00</p>
            <span>1+</span>
          </li>
          <li class="text-ellipse inline-block price-level">
            <p><span>$</span>159.00</p>
            <span>1+</span>
          </li>
          <li class="text-ellipse inline-block price-level">
            <p><span>$</span>159.00</p>
            <span>1+</span>
          </li>
        </ul>
        <i class="iconfont icon-arrow-down"></i>
      </div>
      <div class="content-line cl-price2">
        <ul>
          <li class="text-ellipse inline-block price-level">
            <p><span>$</span>159.00</p>
            <span>1+</span>
          </li>
          <li class="text-ellipse inline-block price-level">
            <p><span>$</span>159.00</p>
            <span>1+</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'mobile',
    fetch({ store, route }) {
      return Promise.all([
        store.dispatch('shop/findCommodityOnBatchInfo', route.params)
      ])
    },
    computed: {
      commodity () {
        return this.$store.state.shop.storeInfo.commodity.data
      }
    }
  }
</script>
<style lang="scss" scoped>
  .commodity-detail {
    .logo-wrap {
      height: 5.18rem;
      line-height: 5.18rem;
      background: #fff;
      text-align: center;
      img {
        border: .01rem solid #ccc;
        max-width: 4.06rem;
        max-height: 3.27rem;
      }
    }
    .content-wrap {
      -webkit-box-shadow: 0 -3px 7px 0px rgba(143, 141, 141, 0.25);
      -moz-box-shadow: 0 -3px 7px 0px rgba(143, 141, 141, 0.25);
      box-shadow: 0 -3px 7px 0px rgba(143, 141, 141, 0.25);
      height: 3rem;
      .content-line {
        height: 1.04rem;
        border-bottom: .01rem solid #d9d9d9;
        &.cl-title {
          padding: .14rem 0 .14rem .2rem;
          .code {
            font-size: .3rem;
            font-weight: bold;
            max-width: 6.22rem;
            padding-right: .3rem;
            border-right: .01rem solid #e1e1e1;
            line-height: .76rem;
          }
          .focus-wrap {
            width: .8rem;
            text-align: center;
            margin-left: .15rem;
            i {
              font-size: .4rem;
              display: block;
              color: #dddddd;
            }
            span {
              font-size: .2rem;
            }
            &.active {
              i {
                color: #ff7803;
              }
            }
          }
        }
        .price-level {
          text-align: center;
          font-size: .24rem;
          border-right: .01rem solid #b0b0b0;
          &:last-child {
            border-right: none;
          }
          p {
            font-size: .44rem;
            color: #f42d29;
            span {
              font-size: .22rem;
            }
          }
        }
        &.cl-price1 {
          padding: .18rem .18rem .2rem;
          .fl {
            font-size: .24rem;
            text-align: center;
            .price-tag {
              width: .69rem;
              height: .34rem;
              line-height: .34rem;
              text-align: center;
              background: #f42d29;
              border-radius: .1rem;
              color: #fff;
              margin: .02rem 0 .06rem;
            }
          }
          ul {
            display: inline-block;
            li {
              width: 2.04rem;
            }
          }
          i {
            font-size: .32rem;
          }
        }
        &.cl-price2 {
          ul {
            text-align: center;
            li {
              width: 2.3rem;
            }
          }
        }
      }
    }
  }
</style>