商品详情頁

src/assets/less/custom.less

@@ -74,7 +74,6 @@
   }
 }
 
-
 .not-read {
   @width: 7rem;
   width: @width;
@@ -237,3 +236,14 @@ p {
   }
 }
 
+.base-page {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 14rem;
+}
+

src/pages/shop/GoodsDetail.vue

@@ -1,15 +1,18 @@
 <template>
-  <div class="goods-detail">
+  <div class="goods-detail base-page">
     <header>
-      <dy-back @click="history.back()"/>
+      <Icon
+          @click="$back()"
+          icon="material-symbols-light:arrow-back-ios-new"/>
       <div class="right">
         <div class="search">
-          <img src="@/assets/img/icon/share-white-full.png" alt="">
+          <Icon icon="jam:search"/>
           <div class="placeholder">多功能电源插座</div>
         </div>
         <div class="option">
-          <img src="@/assets/img/icon/components/dark-close.png" alt="">
-          <img src="@/assets/img/icon/components/dark-close.png" alt="">
+          <Icon icon="jam:search"/>
+          <Icon icon="mynaui:star"/>
+          <Icon icon="ph:share-fat"/>
         </div>
       </div>
     </header>
@@ -29,32 +32,24 @@
             <span class="int">8</span>
             <span class="decimal">.8</span>
           </div>
-        </div>
-        <div class="name">{{ state.detail.name }}</div>
-        <div class="num">已售20/100</div>
-      </div>
-      <div class="card">
-        <div class="price-item">
-          <div class="price">
-            ￥
-            <div class="big">{{ state.detail.price }}</div>
-          </div>
-          <div class="right">
-            <div class="discount">券后￥
-              <div class="big">0.01</div>
-              起
+          <div class="discount">
+            <span class="text">热销款券后</span>
+            <div class="price">
+              <span class="symbol">￥</span>
+              <span class="int">5</span>
+              <span class="decimal">.9</span>
             </div>
-            <div class="num">已售{{ state.detail.sold }}</div>
           </div>
         </div>
-        <div class="title">{{ state.detail.name }}</div>
+        <div class="name">{{ state.detail.name }}</div>
+        <div class="num">已售20/100</div>
       </div>
-      <div class="card">
+      <div class="card desc-wrapper">
         <div class="item">
           <div class="label">保障</div>
           <div class="desc">
             假一赔四·运费险·极速退款
-            <dy-back direction="right" scale=".8"/>
+            <Icon class="right-arrow" icon="mingcute:right-line"/>
           </div>
         </div>
         <div class="item">
@@ -71,21 +66,55 @@
                 <div class="count">共3种规格可选</div>
               </div>
             </div>
-            <dy-back direction="right" scale=".8"/>
+            <Icon class="right-arrow" icon="mingcute:right-line"/>
           </div>
         </div>
         <div class="item">
           <div class="label">活动</div>
           <div class="desc">
-            <span>优惠</span>
-            <span>新人券 立减4</span>
-            <dy-back direction="right" scale=".8"/>
+            <div class="ellipsis">优惠新人券 立减4新人券立减4新人券立减4新人券 立减4新人券 立减4</div>
+            <Icon class="right-arrow" icon="mingcute:right-line"/>
           </div>
         </div>
         <div class="item">
           <div class="label">物流</div>
-          <div class="desc">
-            48小时内从浙江省发货，包邮
+          <div class="desc" style="display:block;">
+            <div style="display:flex;gap: 5rem">
+              <span>发货 四川成都</span>
+              <span style="color: #dedede">|</span>
+              <span>免运费</span>
+            </div>
+            <div>48小时内发货</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card comments">
+        <header>
+          <span>商品评论(507)</span>
+          <Icon class="right-arrow" icon="mingcute:right-line"/>
+        </header>
+        <div class="tags">
+          <div class="tag">物美价廉 <span class="gray">29</span></div>
+          <div class="tag">物流很好 <span class="gray">26</span></div>
+          <div class="tag">推荐 <span class="gray">18</span></div>
+          <div class="tag">商用服务好 <span class="gray">15</span></div>
+        </div>
+        <div class="comment" v-for="i in 2">
+          <header>
+            <img src="https://cdn.seovx.com/ha/?mom=302" alt="" class="avatar">
+            <span class="gray">花***栽</span>
+          </header>
+          <div class="w">
+            <div class="left">
+              <div class="d">
+                东西不错质量也很好 性价比很高 良心商家就冲这图必须给好评
+              </div>
+              <div class="gray">
+                china款/超值【买る双+送2双】共5双
+              </div>
+            </div>
+            <img src="https://cdn.seovx.com/ha/?mom=302" alt="" class="avatar">
           </div>
         </div>
       </div>
@@ -118,14 +147,22 @@ const state = reactive({
 @import "@/assets/less/index.less";
 
 .goods-detail {
+  color: black;
   font-size: 14rem;
 
-  header {
+  & > header {
     background: white;
     height: @header-height;
     display: flex;
     align-items: center;
-    padding: 0 20rem;
+    padding: 0 10rem;
+
+    svg {
+      font-size: 22rem;
+      background: rgba(176, 176, 176, 0.5);
+      padding: 5rem;
+      border-radius: 50%;
+    }
 
     .right {
       margin-left: 10rem;
@@ -144,27 +181,19 @@ const state = reactive({
         align-items: center;
         color: gray;
 
-        img {
-          margin-right: 10rem;
-          height: 15rem;
+        svg {
+          padding: 0;
+          background: unset;
         }
       }
 
       .option {
-        margin-left: 10rem;
+        margin-left: 20rem;
         display: flex;
         align-items: center;
-
-        img {
-          margin-left: 15rem;
-        }
-      }
-
-      img {
-        width: 20rem;
+        gap: 20rem;
       }
     }
-
   }
 
   .imgs {
@@ -185,23 +214,27 @@ const state = reactive({
       border-radius: 15rem;
       background: rgba(91, 89, 89, 0.5);
       right: 10rem;
-      bottom: 10rem;
+      bottom: 30rem;
       color: white;
     }
   }
 
   .content {
     //background: rgb(247, 247, 249);
-    background: #f1f1f1;
+    background: #f5f5f5;
     padding: 8rem;
     border-radius: 16rem 16rem 0 0;
     transform: translateY(-20rem);
 
     .info {
       padding: 0 8rem;
+      margin-bottom: 20rem;
 
       .price-wrap {
-        margin-bottom: 10rem;
+        margin-bottom: 20rem;
+        display: flex;
+        align-items: flex-end;
+
         .price {
           color: red;
           font-weight: bold;
@@ -219,15 +252,33 @@ const state = reactive({
             font-size: 20rem;
           }
         }
+
+        .discount {
+          margin-left: 10rem;
+          color: rgb(248, 38, 74);
+          display: flex;
+          align-items: flex-end;
+          padding: 2rem 15rem;
+          padding-bottom: 4rem;
+          background: rgb(255 167 183 / 25%);
+          border-radius: 20rem;
+
+          .text {
+            font-size: 13rem;
+          }
+
+          .price {
+            margin-top: -6rem;
+            transform: translateY(4rem);
+          }
+        }
+
       }
 
       .name {
         color: black;
         font-size: 16rem;
         margin-bottom: 8rem;
-        @lh: 18rem;
-        line-height: @lh;
-        height: @lh * 2;
         overflow: hidden;
         font-weight: bold;
         letter-spacing: 1rem;
@@ -243,16 +294,30 @@ const state = reactive({
       margin: 5rem;
       margin-bottom: 10rem;
       background: white;
-      border-radius: 6rem;
+      border-radius: 10rem;
       padding: 10rem 15rem;
+    }
 
+    @c: #a2a2a2;
+
+    .gray {
+      color: @c;
+    }
+
+    .right-arrow {
+      font-size: 18rem;
+      color: @c;
+    }
+
+    .desc-wrapper {
       .item {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         padding: 5rem 0;
+        margin-bottom: 22rem;
 
         .label {
-          color: gray;
+          color: @c;
         }
 
         .desc {
@@ -272,6 +337,13 @@ const state = reactive({
           }
         }
 
+        .ellipsis {
+          max-width: 70vw;
+          overflow: hidden; //超出的文本隐藏
+          text-overflow: ellipsis; //溢出用省略号显示
+          white-space: nowrap; //溢出不换行
+        }
+
         .options {
           display: flex;
           overflow: hidden;
@@ -291,6 +363,7 @@ const state = reactive({
           display: flex;
           align-items: center;
           position: absolute;
+          color: @c;
 
           .bg {
             width: 60rem;
@@ -307,60 +380,68 @@ const state = reactive({
           }
         }
       }
+    }
 
-      .price-item {
+    .comments {
+      & > header {
+        margin-bottom: 20rem;
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        margin-bottom: 10rem;
 
-        .big {
-          font-size: 20rem;
+        span {
+          font-size: 18rem;
           font-weight: bold;
-          transform: translateY(2rem);
         }
+      }
 
-        .price {
-          color: rgb(248, 38, 74);
+      .tags {
+        display: flex;
+        gap: 10rem;
+        margin-bottom: 20rem;
+
+        .tag {
           display: flex;
-          align-items: flex-end;
-          font-size: 14rem;
-          margin-right: 5rem;
+          gap: 5rem;
+          background: rgb(255 167 183 / 15%);
+          padding: 6rem 8rem;
+          border-radius: 8rem;
+          font-size: 11rem;
         }
+      }
 
-        .right {
-          flex: 1;
+      .comment {
+        margin-bottom: 20rem;
+        & > header {
+          margin-bottom: 10rem;
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          margin-top: 2rem;
+          gap: 5rem;
 
-          .discount {
-            font-size: 10rem;
-            color: rgb(248, 38, 74);
-            display: flex;
-            align-items: flex-end;
-            padding: 2rem 15rem;
-            padding-bottom: 4rem;
-            background: rgb(255 167 183 / 25%);
-            border-radius: 20rem;
-
-            .big {
-              line-height: 20rem;
-              font-size: 18rem;
-            }
+          img {
+            border-radius: 50%;
+            width: 25rem;
+            height: 25rem;
+          }
+        }
+
+        .w {
+          display: flex;
+          gap: 10rem;
+
+          .d{
+            margin-bottom: 10rem;
           }
 
-          .num {
-            font-size: 12rem;
-            color: darkgray;
+          img {
+            border-radius: 8rem;
+            height: 50rem;
+            width: 50rem;
           }
         }
       }
-
-
     }
   }
-
 }
 
 </style>