From a603080852a4d3fb7e15b13862b09fb09b4c18c9 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 12 Mar 2024 18:59:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/shop/GoodsDetail.vue | 229 ++++++++++++++++++++++++++++++---
 1 file changed, 209 insertions(+), 20 deletions(-)

diff --git a/src/pages/shop/GoodsDetail.vue b/src/pages/shop/GoodsDetail.vue
index 42eced8..ae83660 100644
--- a/src/pages/shop/GoodsDetail.vue
+++ b/src/pages/shop/GoodsDetail.vue
@@ -44,6 +44,7 @@
         <div class="name">{{ state.detail.name }}</div>
         <div class="num">已售20/100</div>
       </div>
+
       <div class="card desc-wrapper">
         <div class="item">
           <div class="label">保障</div>
@@ -118,6 +119,62 @@
           </div>
         </div>
       </div>
+
+      <div class="card shop">
+        <header>
+          <img src="https://cdn.seovx.com/ha/?mom=302" alt="" class="avatar">
+          <div class="right">
+            <div class="l">
+              <div class="name">店铺名</div>
+              <div class="tags">
+                <div class="tag">金牌店铺</div>
+                <div class="tag">好评过千</div>
+                <div class="tag">销量超10万</div>
+              </div>
+              <div class="gray">店铺口碑4.90分</div>
+            </div>
+            <div class="r">进店</div>
+          </div>
+        </header>
+
+        <div class="desc">
+          <div class="grid">
+            <div class="gray">商品质量</div>
+            <div>商品评价一般</div>
+          </div>
+          <div class="line"></div>
+          <div class="grid">
+            <div class="gray">物流速度</div>
+            <div>平均24小时发货</div>
+          </div>
+          <div class="line"></div>
+          <div class="grid">
+            <div class="gray">商品质量</div>
+            <div>商品评价一般</div>
+          </div>
+        </div>
+
+        <div class="recommend">
+          <header>
+            <span class="left">店铺推荐</span>
+            <div class="right">
+              <span class="gray">查看全部</span>
+              <Icon class="right-arrow" icon="mingcute:right-line"/>
+            </div>
+          </header>
+          <div class="wrap">
+            <div class="item" v-for="i in 4">
+              <img src="https://cdn.seovx.com/ha/?mom=302" alt="" class="avatar">
+              <div class="name"></div>
+              <div class="price">
+                <span class="symbol">￥</span>
+                <span class="int">8</span>
+                <span class="decimal">.8</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -226,6 +283,24 @@ const state = reactive({
     border-radius: 16rem 16rem 0 0;
     transform: translateY(-20rem);
 
+    .price {
+      color: red;
+      font-weight: bold;
+
+      .symbol {
+        font-size: 16rem;
+      }
+
+      .int {
+        font-size: 26rem;
+      }
+
+      .decimal {
+        letter-spacing: 2px;
+        font-size: 20rem;
+      }
+    }
+
     .info {
       padding: 0 8rem;
       margin-bottom: 20rem;
@@ -235,24 +310,6 @@ const state = reactive({
         display: flex;
         align-items: flex-end;
 
-        .price {
-          color: red;
-          font-weight: bold;
-
-          .symbol {
-            font-size: 16rem;
-          }
-
-          .int {
-            font-size: 26rem;
-          }
-
-          .decimal {
-            letter-spacing: 2px;
-            font-size: 20rem;
-          }
-        }
-
         .discount {
           margin-left: 10rem;
           color: rgb(248, 38, 74);
@@ -272,7 +329,6 @@ const state = reactive({
             transform: translateY(4rem);
           }
         }
-
       }
 
       .name {
@@ -412,6 +468,7 @@ const state = reactive({
 
       .comment {
         margin-bottom: 20rem;
+
         & > header {
           margin-bottom: 10rem;
           display: flex;
@@ -429,7 +486,7 @@ const state = reactive({
           display: flex;
           gap: 10rem;
 
-          .d{
+          .d {
             margin-bottom: 10rem;
           }
 
@@ -441,6 +498,138 @@ const state = reactive({
         }
       }
     }
+
+    .shop {
+      & > header {
+        display: flex;
+        align-items: center;
+        gap: 10rem;
+
+        img {
+          width: 60rem;
+          height: 60rem;
+          border-radius: 50%;
+        }
+
+        .right {
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .l {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            gap: 4rem;
+
+            .name {
+              font-size: 16rem;
+              font-weight: bold;
+            }
+
+            .tags {
+              display: flex;
+              font-size: 12rem;
+              gap: 10rem;
+
+              .tag {
+                padding: 2rem 3rem;
+                background: rgb(253, 245, 243);
+                color: rgb(217, 143, 80);
+              }
+            }
+
+            .gray {
+              font-size: 12rem;
+            }
+          }
+
+          .r {
+            border-radius: 4rem;
+            padding: 5rem 14rem;
+            font-weight: bold;
+            background: @primary-btn-color;
+            color: white;
+          }
+        }
+      }
+
+      .desc {
+        margin-top: 16rem;
+        display: flex;
+        align-items: center;
+        gap: 3rem;
+
+        .grid {
+          width: 33%;
+          text-align: center;
+
+          .gray {
+            font-size: 12rem;
+            margin-bottom: 3rem;
+          }
+        }
+
+        .line {
+          width: 1px;
+          height: 30rem;
+          background: lightgrey;
+        }
+      }
+
+      .recommend {
+        margin-top: 16rem;
+
+        & > header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .left {
+            font-weight: bold;
+          }
+
+          .right {
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        .wrap {
+          margin-top: 16rem;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          //grid-template-rows: repeat(3, 1fr);
+          gap: 10rem;
+
+          .item {
+            img {
+              border-radius: 12rem;
+              object-fit: cover;
+              height: 28vw;
+              width: 100%;
+            }
+
+            .price {
+              .symbol {
+                font-size: 14rem;
+              }
+
+              .int {
+                font-size: 18rem;
+              }
+
+              .decimal {
+                letter-spacing: 2px;
+                font-size: 14rem;
+              }
+            }
+          }
+
+        }
+      }
+    }
   }
 }