basket_traced_h5/src/view/explain.vue

<template>
  <div class="body-explain">
    <!-- <transition name="custom-classes-transition" enter-active-class="animated bounce" leave-active-class="animated bounceOut"> -->
    <main-title
      v-if="titleShow"
      class="animated fadeIn"
      style="animation-delay:1s; animation-duration: 1s;animation-fill-mode: both;"
    >产品介绍</main-title>
    <!-- </transition> -->
    <div
      class="b-1 animated bounceInRight"
      style="animation-delay:2s;animation-duration: 1s;animation-fill-mode: both;"
    >
      <img class="b-1-img" src="../assets/image/zp-bag.png" />
      <h2>防伪码：{{info.qrcodeToken}}</h2>
      <h4>扫码次数：{{info.scanCount}}次</h4>
      <h4>最后扫码时间：{{info.scanLastTimed}}</h4>
			<h4>注：采用区块链技术，确保溯源可信</h4>
      <!-- <h6>注：如扫码信息和实际不对应，核实是否为新品</h6> -->
      <div style="clear:both;"></div>
      <img class="b-1-areaimg" src="../assets/image/bg-prod-area-info-img.png" />
      <img class="b-1-repchainimg" src="../assets/image/bg-repchain-img.png" />
			
    </div>
    <div class="b-2">
      <preview
        class="img animated bounceInLeft"
        style="animation-delay:3s;animation-duration: 1s;animation-fill-mode: both;"
        :value="info.goodsBatchInfoForm.imagesList"
      ></preview>
      <!-- <el-image class="img" :src="src" :preview-src-list="[src]">
				<div slot="placeholder" class="img-loading"><i class="el-icon-loading"></i></div>
				<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
      </el-image>-->
      <ul
        class="b-2-info-list animated bounceInRight"
        style="animation-delay:4s;animation-duration: 1s;animation-fill-mode: both;"
      >
        <li>【商品名称】{{info.goodsBatchInfoForm.goodsName}}</li>
        <li>【商品规格】{{info.goodsBatchInfoForm.goodsUnit}}</li>
        <li>【生产日期】{{info.goodsBatchInfoForm.goodsProductDate | time}}</li>
        <li>【保质期】{{info.goodsBatchInfoForm.goodsExpired | time}}</li>
      </ul>
      <ul
        class="b-2-info-list2 animated bounceInRight"
        style="animation-delay:4s;animation-duration: 1s;animation-fill-mode: both;"
      >
        <li v-for="(aux,key) in info.goodsBatchInfoForm.auxList" :key="key">{{aux.auxItmeVal}}</li>
      </ul>
    </div>
    <bottom
      class="animated fadeIn"
      style="animation-delay:6s;animation-duration: 1s;animation-fill-mode: both;"
    >订购电话：{{info.tel || ''}}</bottom>
  </div>
</template>

<script>
import bottom from '../components/bottom.vue';
export default {
  components: {
    bottom
  },
  data() {
    return {
      titleShow: false,
      src: 'https://icweiliimg1.pstatp.com/weili/l/248333703461470365.webp'
    };
  },
  created() {
  },
  mounted() {
    this.titleShow = true;
  },
  methods: {
	},
  filters: {
    time(value) {
      return (value + "").split(" ")[0];
    }
  },
  computed: {
    info() {
      return this.$store.state.info;
    }
  }
};
</script>

<style lang="less">
.body-explain {
  .b-1,
  .b-2 {
    background: #fff;
    border-radius: 0.1rem;
    box-shadow: 0.03rem 0.05rem 0.1rem 0.01rem rgba(0, 0, 0, 0.05);
    margin-top: 0.4rem;
  }
  .b-1 {
    padding: 0.2rem;
    > h2 {
      color: #20374d;
      font-size: 0.22rem;
      border-bottom: 0.01rem dashed;
      line-height: 1em;
      padding-bottom: 0.2rem;
      width: 70%;
    }
    > h4 {
      color: #546475;
      font-size: 0.18rem;
      margin: 0.1rem 0;
    }
    > h6 {
      color: #7c8690;
      font-size: 0.14rem;
    }
    .b-1-img {
      float: right;
      height: 2rem;
      width: 2rem;
      transform: translateY(-0.3rem) translateX(0.4rem);
    }
    .b-1-areaimg {
      height: 0.8rem;
      width: 3.8rem;
      transform: translateY(0rem) translateX(0rem);
    }
    .b-1-repchainimg {
      height: 0.8rem;
      width: 1.8rem;
    }
  }
  .b-2 {
    padding: 0.15rem;
    > .img {
      border-radius: 0.1rem;
      overflow: hidden;
      display: block;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 4rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-info-list,
    &-info-list2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      color: #272c31;
      font-size: 0.2rem;
      font-weight: 700;
      > li {
        width: 46%;
        padding: 0.2rem 0;
        border-bottom: 0.01rem dashed;
      }
    }
    &-info-list2 {
      color: #397a52;
      padding: 0.3rem 0;
      > li {
        width: 31%;
        padding: 0.2rem 0;
        border: none;
        background: #e1f2e2;
        border-radius: 2rem;
        text-align: center;
        margin: 0.1rem 0;
      }
    }
  }
}
</style>