explain.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <div class="body-explain">
  3. <!-- <transition name="custom-classes-transition" enter-active-class="animated bounce" leave-active-class="animated bounceOut"> -->
  4. <main-title
  5. v-if="titleShow"
  6. class="animated fadeIn"
  7. style="animation-delay:1s; animation-duration: 1s;animation-fill-mode: both;"
  8. >产品介绍</main-title>
  9. <!-- </transition> -->
  10. <div
  11. class="b-1 animated bounceInRight"
  12. style="animation-delay:2s;animation-duration: 1s;animation-fill-mode: both;"
  13. >
  14. <img class="b-1-img" src="../assets/image/zp-bag.png" />
  15. <h2>防伪码:{{info.qrcodeToken}}</h2>
  16. <h4>扫码次数:{{info.scanCount}}次</h4>
  17. <h4>最后扫码时间:{{info.scanLastTimed}}</h4>
  18. <h4>注:采用区块链技术,确保溯源可信</h4>
  19. <!-- <h6>注:如扫码信息和实际不对应,核实是否为新品</h6> -->
  20. <div style="clear:both;"></div>
  21. <img class="b-1-areaimg" src="../assets/image/bg-prod-area-info-img.png" />
  22. <img class="b-1-repchainimg" src="../assets/image/bg-repchain-img.png" />
  23. </div>
  24. <div class="b-2">
  25. <preview
  26. class="img animated bounceInLeft"
  27. style="animation-delay:3s;animation-duration: 1s;animation-fill-mode: both;"
  28. :value="info.goodsBatchInfoForm.imagesList"
  29. ></preview>
  30. <!-- <el-image class="img" :src="src" :preview-src-list="[src]">
  31. <div slot="placeholder" class="img-loading"><i class="el-icon-loading"></i></div>
  32. <div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
  33. </el-image>-->
  34. <ul
  35. class="b-2-info-list animated bounceInRight"
  36. style="animation-delay:4s;animation-duration: 1s;animation-fill-mode: both;"
  37. >
  38. <li>【商品名称】{{info.goodsBatchInfoForm.goodsName}}</li>
  39. <li>【商品规格】{{info.goodsBatchInfoForm.goodsUnit}}</li>
  40. <li>【生产日期】{{info.goodsBatchInfoForm.goodsProductDate | time}}</li>
  41. <li>【保质期】{{info.goodsBatchInfoForm.goodsExpired | time}}</li>
  42. </ul>
  43. <ul
  44. class="b-2-info-list2 animated bounceInRight"
  45. style="animation-delay:4s;animation-duration: 1s;animation-fill-mode: both;"
  46. >
  47. <li v-for="(aux,key) in info.goodsBatchInfoForm.auxList" :key="key">{{aux.auxItmeVal}}</li>
  48. </ul>
  49. </div>
  50. <bottom
  51. class="animated fadeIn"
  52. style="animation-delay:6s;animation-duration: 1s;animation-fill-mode: both;"
  53. >订购电话:{{info.tel || ''}}</bottom>
  54. </div>
  55. </template>
  56. <script>
  57. import bottom from '../components/bottom.vue';
  58. export default {
  59. components: {
  60. bottom
  61. },
  62. data() {
  63. return {
  64. titleShow: false,
  65. src: 'https://icweiliimg1.pstatp.com/weili/l/248333703461470365.webp'
  66. };
  67. },
  68. created() {
  69. },
  70. mounted() {
  71. this.titleShow = true;
  72. },
  73. methods: {
  74. },
  75. filters: {
  76. time(value) {
  77. return (value + "").split(" ")[0];
  78. }
  79. },
  80. computed: {
  81. info() {
  82. return this.$store.state.info;
  83. }
  84. }
  85. };
  86. </script>
  87. <style lang="less">
  88. .body-explain {
  89. .b-1,
  90. .b-2 {
  91. background: #fff;
  92. border-radius: 0.1rem;
  93. box-shadow: 0.03rem 0.05rem 0.1rem 0.01rem rgba(0, 0, 0, 0.05);
  94. margin-top: 0.4rem;
  95. }
  96. .b-1 {
  97. padding: 0.2rem;
  98. > h2 {
  99. color: #20374d;
  100. font-size: 0.22rem;
  101. border-bottom: 0.01rem dashed;
  102. line-height: 1em;
  103. padding-bottom: 0.2rem;
  104. width: 70%;
  105. }
  106. > h4 {
  107. color: #546475;
  108. font-size: 0.18rem;
  109. margin: 0.1rem 0;
  110. }
  111. > h6 {
  112. color: #7c8690;
  113. font-size: 0.14rem;
  114. }
  115. .b-1-img {
  116. float: right;
  117. height: 2rem;
  118. width: 2rem;
  119. transform: translateY(-0.3rem) translateX(0.4rem);
  120. }
  121. .b-1-areaimg {
  122. height: 0.8rem;
  123. width: 3.8rem;
  124. transform: translateY(0rem) translateX(0rem);
  125. }
  126. .b-1-repchainimg {
  127. height: 0.8rem;
  128. width: 1.8rem;
  129. }
  130. }
  131. .b-2 {
  132. padding: 0.15rem;
  133. > .img {
  134. border-radius: 0.1rem;
  135. overflow: hidden;
  136. display: block;
  137. display: flex;
  138. flex-direction: column;
  139. justify-content: center;
  140. align-items: center;
  141. height: 4rem;
  142. img {
  143. width: 100%;
  144. height: 100%;
  145. }
  146. }
  147. &-info-list,
  148. &-info-list2 {
  149. display: flex;
  150. flex-wrap: wrap;
  151. justify-content: space-between;
  152. color: #272c31;
  153. font-size: 0.2rem;
  154. font-weight: 700;
  155. > li {
  156. width: 46%;
  157. padding: 0.2rem 0;
  158. border-bottom: 0.01rem dashed;
  159. }
  160. }
  161. &-info-list2 {
  162. color: #397a52;
  163. padding: 0.3rem 0;
  164. > li {
  165. width: 31%;
  166. padding: 0.2rem 0;
  167. border: none;
  168. background: #e1f2e2;
  169. border-radius: 2rem;
  170. text-align: center;
  171. margin: 0.1rem 0;
  172. }
  173. }
  174. }
  175. }
  176. </style>