商品详情页：样式

htmldev/cps/src/api/request.js

@@ -55,7 +55,7 @@ request.interceptors.request.use(request => {
 
   // 因为微信开发者工具重复授权，本地开发时写死
   if (/^(0|192|10|localhost)/.test(domain)) {
-    request.headers.wechatToken = '9ab28e0d6212ae6da60d7034cbc4fee2'
+    request.headers.wechatToken = 'e9a85a94839cb6f8c1aed06625f6f6a4'
   } else {
     request.headers.wechatToken = getCookieValue('fanbutingwechatToken')
   }

htmldev/cps/src/views/category/detail/index.vue

@@ -17,17 +17,32 @@
           <span>44.77</span>
         </div>
       </div>
+      <p class="origin-price">原价¥ 599</p>
+      <div
+        class="name-wrap">
+        <img src="" alt="">
+        <p>这是名字这是名字这是名字这是名字这是名字这是名这是名字这是名字这是名字这是名字这是名字这是名</p>
+      </div>
+      <div class="coupon-wrap">
+        <div>
+          <p class="amount">333元优惠券</p>
+          <p class="expires">10月20日-11月11日</p>
+        </div>
+        <van-button type="default">立即领券</van-button>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import Banner from './child/banner'
+import { Button } from 'vant'
 
 export default {
   name: 'index',
   components: {
-    Banner
+    Banner,
+    'van-button': Button
   }
 }
 </script>
@@ -100,4 +115,73 @@ export default {
     }
   }
 }
+
+.origin-price {
+  margin-top: 6px;
+  font-size: 13px;
+  text-decoration: line-through;
+  color: #999999;
+  line-height: 18px;
+}
+
+.name-wrap {
+  margin-top: 10px;
+  overflow: hidden;
+
+  img {
+    width: 30px;
+    height: 16px;
+    margin-right: 4px;
+    float: left;
+  }
+
+  p {
+    font-size: 14px;
+    font-weight: bold;
+    color: #333333;
+    line-height: 20px;
+  }
+}
+
+.coupon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 359px;
+  height: 84px;
+  margin-top: 14px;
+  background: url("./image/ic_coupon_big.png") center center/100% 100% no-repeat;
+
+  & > div {
+    width: 227px;
+    text-align: center;
+  }
+
+  .amount {
+    font-size: 19px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 31px;
+  }
+
+  .expires {
+    font-size: 11px;
+    font-weight: bold;
+    color: #BCA763;
+    line-height: 18px;
+  }
+
+  ::v-deep .van-button--default {
+    width: 86px;
+    padding: 0;
+    border: none;
+    background: transparent;
+
+    .van-button__text {
+      font-size: 18px;
+      font-weight: bold;
+      color: #FFFFFF;
+    }
+  }
+}
 </style>