商品详情页：样式

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

@@ -48,12 +48,12 @@ export default {
   .banner {
     display: block;
     width: 100%;
-    // height: 357px;
+    height: 367px;
   }
 
   ::v-deep .sw-pagination {
     position: absolute;
-    bottom: 20px;
+    bottom: 0;
     z-index: 1;
     text-align: center;
 
@@ -62,8 +62,8 @@ export default {
     }
 
     .swiper-pagination-bullet {
-      width: 12px;
-      height: 12px;
+      width: 6px;
+      height: 6px;
       opacity: 1;
       background: #fff;
     }

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

@@ -2,6 +2,22 @@
   <div>
     <!--轮播图-->
     <Banner/>
+    <!--价格信息-->
+    <div class="main">
+      <div class="header">
+        <div class="price-wrap">
+          <p class="price">
+            <span>￥</span>
+            <span>129</span>
+          </p>
+          <p class="origin">券后价</p>
+        </div>
+        <div class="income">
+          <span>预估收益 ¥</span>
+          <span>44.77</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -17,5 +33,71 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.main {
+  width: 365px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12px;
+}
+
+.price-wrap {
+  display: flex;
+  align-items: center;
+}
+
+.price {
+  margin-right: 15px;
+  font-size: 0;
+
+  span {
+    &:nth-of-type(1) {
+      margin-right: 3px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #EA483F;
+      line-height: 24px;
+    }
+
+    &:nth-of-type(2) {
+      font-size: 21px;
+      font-weight: 800;
+      color: #EA483F;
+      line-height: 24px;
+    }
+  }
+}
+
+.origin {
+  font-size: 11px;
+  font-weight: 500;
+  color: #EA483F;
+  line-height: 18px;
+}
 
+.income {
+  display: flex;
+  align-items: center;
+
+  span {
+    &:nth-of-type(1) {
+      font-size: 11px;
+      font-weight: bold;
+      color: #EA483F;
+      line-height: 18px;
+    }
+
+    &:nth-of-type(2) {
+      padding-top: 2px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #EA483F;
+      line-height: 24px;
+    }
+  }
+}
 </style>

htmldev/cps/src/views/category/index/child/main.vue

@@ -377,8 +377,7 @@ export default {
   align-items: center;
   min-width: 57px;
   height: 18px;
-  background: linear-gradient(90deg, #D33D34, #EB6347);
-  border-radius: 3px;
+  background: url("../image/ic_coupon.png") center center/100% 100% no-repeat;
   margin-right: 11px;
 
   span {