123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <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>
|