From afcd02f1cae8e92cd31474c7a0cdf65db832eff7 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 13 Mar 2024 09:29:42 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/shop/GoodsDetail.vue | 305 ++++++++++++++++++++++++++++++---
 1 file changed, 277 insertions(+), 28 deletions(-)

diff --git a/src/pages/shop/GoodsDetail.vue b/src/pages/shop/GoodsDetail.vue
index ae83660..5029d33 100644
--- a/src/pages/shop/GoodsDetail.vue
+++ b/src/pages/shop/GoodsDetail.vue
@@ -16,7 +16,7 @@
         </div>
       </div>
     </header>
-    <div class="imgs">
+    <div class="slide-imgs">
       <SlideHorizontal v-model:index="state.index">
         <SlideItem v-for="item in state.detail.imgs">
           <img :src="item" alt="">
@@ -24,7 +24,7 @@
       </SlideHorizontal>
       <div class="index">{{ state.index + 1 }}/{{ state.detail.imgs.length }}</div>
     </div>
-    <div class="content">
+    <div class="content p">
       <div class="info">
         <div class="price-wrap">
           <div class="price">
@@ -50,7 +50,7 @@
           <div class="label">保障</div>
           <div class="desc">
             假一赔四·运费险·极速退款
-            <Icon class="right-arrow" icon="mingcute:right-line"/>
+            <Icon class="arrow" icon="mingcute:right-line"/>
           </div>
         </div>
         <div class="item">
@@ -67,14 +67,14 @@
                 <div class="count">共3种规格可选</div>
               </div>
             </div>
-            <Icon class="right-arrow" icon="mingcute:right-line"/>
+            <Icon class="arrow" icon="mingcute:right-line"/>
           </div>
         </div>
         <div class="item">
           <div class="label">活动</div>
           <div class="desc">
             <div class="ellipsis">优惠新人券 立减4新人券立减4新人券立减4新人券 立减4新人券 立减4</div>
-            <Icon class="right-arrow" icon="mingcute:right-line"/>
+            <Icon class="arrow" icon="mingcute:right-line"/>
           </div>
         </div>
         <div class="item">
@@ -93,7 +93,7 @@
       <div class="card comments">
         <header>
           <span>商品评论(507)</span>
-          <Icon class="right-arrow" icon="mingcute:right-line"/>
+          <Icon class="arrow" icon="mingcute:right-line"/>
         </header>
         <div class="tags">
           <div class="tag">物美价廉 <span class="gray">29</span></div>
@@ -159,13 +159,13 @@
             <span class="left">店铺推荐</span>
             <div class="right">
               <span class="gray">查看全部</span>
-              <Icon class="right-arrow" icon="mingcute:right-line"/>
+              <Icon class="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="name">【热销中】袜子男潮流百搭中筒袜子袜子男潮流百搭中筒袜子</div>
               <div class="price">
                 <span class="symbol">￥</span>
                 <span class="int">8</span>
@@ -176,16 +176,83 @@
         </div>
       </div>
     </div>
+
+    <div class="img-list" v-if="false">
+      <header>
+        <div class="l"></div>
+        <span class="gray">商品详情</span>
+        <div class="r"></div>
+      </header>
+
+      <div class="imgs">
+        <img src="https://cdn.seovx.com/ha/?mom=302" alt="" class="avatar" v-for="i in 5">
+      </div>
+    </div>
+
+    <div class="p">
+      <div class="card other-desc">
+        <div class="item"
+             :class="activeIndexs.includes(i) && 'active'"
+             @click="toggle(i)"
+             v-for="(item,i) in 3">
+          <header>
+            <div class="l">价格说明</div>
+            <Icon class="arrow" icon="mingcute:right-line"/>
+          </header>
+          <div class="text">
+            价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明
+          </div>
+        </div>
+      </div>
+
+      <div class="other-recommend">
+        <header>
+          你可以还会喜欢
+        </header>
+
+        <div v-masonry class="goods-list"
+             :class="{fixed:state.fixed}"
+             transition-duration="0s"
+             item-selector=".goods">
+          <div v-masonry-tile class="goods"
+               @click="nav('/shop/detail')"
+               v-for="(item, index) in  state.list">
+            <div class="item">
+              <img class="poster" :src="Utils.$imgPreview(item.cover)"/>
+              <div class="bottom">
+                <div class="desc">
+                  {{ item.name }}
+                </div>
+                <div class="discounts" v-if="item.discount">{{ item.discount }}</div>
+                <div class="info">
+                  <div class="price">
+                    ￥
+                    <div class="big">{{ item.price }}</div>
+                  </div>
+                  <div class="num">已售{{ item.sold }}件</div>
+                </div>
+                <div class="low" v-if="item.isLowPrice">
+                  近30天低价
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import SlideItem from "@/components/slide/SlideItem.vue";
-import {reactive} from "vue";
+import {reactive, ref} from "vue";
 import goods from "@/assets/data/goods";
 import {useNav} from "@/utils/hooks/useNav";
+import Utils from "@/utils";
 
+let activeIndexs = ref([])
 const nav = useNav()
 const props = defineProps({
   id: {
@@ -196,16 +263,30 @@ const props = defineProps({
 
 const state = reactive({
   detail: goods.list[1],
-  index: 2
+  index: 2,
+  list: goods.list,
+  listEl: null,
+  fixed: false
 })
+
+function toggle(i) {
+  let rIndex = activeIndexs.value.findIndex(v => v === i)
+  if (rIndex > -1) {
+    activeIndexs.value.splice(rIndex, 1)
+  } else {
+    activeIndexs.value.push(i)
+  }
+}
 </script>
 
 <style scoped lang="less">
 @import "@/assets/less/index.less";
 
 .goods-detail {
+  background: #f5f5f5;
   color: black;
   font-size: 14rem;
+  @c: #a2a2a2;
 
   & > header {
     background: white;
@@ -253,7 +334,7 @@ const state = reactive({
     }
   }
 
-  .imgs {
+  .slide-imgs {
     position: relative;
     height: 30vh;
 
@@ -276,10 +357,27 @@ const state = reactive({
     }
   }
 
+  .p {
+    padding: 8rem;
+  }
+
+  .card {
+    margin: 5rem;
+    margin-bottom: 10rem;
+    background: white;
+    border-radius: 10rem;
+    padding: 10rem 15rem;
+  }
+
+  .arrow {
+    font-size: 18rem;
+    color: @c;
+  }
+
   .content {
     //background: rgb(247, 247, 249);
     background: #f5f5f5;
-    padding: 8rem;
+    padding-bottom: 0;
     border-radius: 16rem 16rem 0 0;
     transform: translateY(-20rem);
 
@@ -346,25 +444,10 @@ const state = reactive({
       }
     }
 
-    .card {
-      margin: 5rem;
-      margin-bottom: 10rem;
-      background: white;
-      border-radius: 10rem;
-      padding: 10rem 15rem;
-    }
-
-    @c: #a2a2a2;
-
     .gray {
       color: @c;
     }
 
-    .right-arrow {
-      font-size: 18rem;
-      color: @c;
-    }
-
     .desc-wrapper {
       .item {
         display: flex;
@@ -530,7 +613,8 @@ const state = reactive({
 
             .tags {
               display: flex;
-              font-size: 12rem;
+              font-size: 10rem;
+              font-weight: bold;
               gap: 10rem;
 
               .tag {
@@ -564,8 +648,11 @@ const state = reactive({
         .grid {
           width: 33%;
           text-align: center;
+          font-weight: bold;
+          font-size: 13rem;
 
           .gray {
+            font-weight: normal;
             font-size: 12rem;
             margin-bottom: 3rem;
           }
@@ -611,6 +698,14 @@ const state = reactive({
               width: 100%;
             }
 
+            .name {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box; //作为弹性伸缩盒子模型显示。
+              -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+              -webkit-line-clamp: 2; //显示的行
+            }
+
             .price {
               .symbol {
                 font-size: 14rem;
@@ -630,6 +725,160 @@ const state = reactive({
         }
       }
     }
+
+  }
+
+  .img-list {
+    background: #f5f5f5;
+
+    & > header {
+      font-size: 16rem;
+      padding-bottom: 20rem;
+      display: flex;
+      justify-content: center;
+      gap: 10rem;
+      align-items: center;
+
+      .l {
+        width: 0;
+        height: 0;
+        border-right: 40px solid black;
+        border-top: 1px solid transparent;
+        border-bottom: 1px solid transparent;
+      }
+
+      .r {
+        .l;
+        border-left: 40px solid black;
+        border-right: unset;
+      }
+    }
+
+    .imgs {
+      img {
+        width: 100%;
+        display: block;
+      }
+    }
+  }
+
+  .other-desc {
+    .item {
+      & > header {
+        padding: 15rem 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .text {
+        display: none;
+      }
+
+      &.active {
+        .text {
+          display: block;
+        }
+      }
+
+      &:last-child {
+        & > header {
+          padding-bottom: 10rem;
+        }
+      }
+
+      &:first-child {
+        & > header {
+          padding-top: 10rem;
+        }
+      }
+    }
+  }
+
+  .other-recommend {
+    & > header {
+      padding: 15rem;
+    }
+    @fColor: #f1f1f1;
+
+    .fixed {
+      background: @fColor;
+    }
+
+    @p: 5rem;
+
+    .goods-list {
+      padding-bottom: 20rem;
+    }
+
+    .goods {
+      width: 50%;
+      box-sizing: border-box;
+      padding: 5rem;
+
+      .item {
+        border-radius: 8rem;
+        overflow: hidden;
+        background: white;
+
+        img {
+          width: 100%;
+        }
+
+        .bottom {
+          padding: 10rem;
+
+          .desc {
+            color: black;
+            font-size: 16rem;
+            margin-bottom: 8rem;
+            @lh: 18rem;
+            line-height: @lh;
+            height: @lh * 2;
+            overflow: hidden;
+          }
+
+          .discounts {
+            display: inline-block;
+            @c: rgb(199, 89, 106);
+            border: 1rem solid @c;
+            padding: 0 4rem;
+            color: @c;
+            font-size: 12rem;
+            margin-bottom: 4rem;
+          }
+
+          .info {
+            display: flex;
+            align-items: flex-end;
+
+            .price {
+              color: rgb(248, 38, 74);
+              display: flex;
+              align-items: flex-end;
+              font-size: 14rem;
+              margin-right: 5rem;
+
+              .big {
+                font-size: 22rem;
+                font-weight: bold;
+                transform: translateY(2rem);
+              }
+            }
+
+            .num {
+              color: darkgray;
+              font-size: 12rem;
+            }
+          }
+
+          .low {
+            margin-top: 2rem;
+            color: rgb(230, 153, 92);
+          }
+        }
+      }
+    }
   }
 }
 

From 4d2b340a9f2e9a52895ecc9e335a4c4bac677e6f Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 14 Mar 2024 03:05:18 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/less/custom.less    |   9 +
 src/assets/less/index.less     |   1 -
 src/assets/less/utils.less     |   2 +-
 src/components/Footer.vue      |   9 +-
 src/pages/home/Attention.vue   |   4 +-
 src/pages/home/index.vue       |   2 +-
 src/pages/shop/GoodsDetail.vue | 373 ++++++++++++++++++++++++++-------
 7 files changed, 315 insertions(+), 85 deletions(-)

diff --git a/src/assets/less/custom.less b/src/assets/less/custom.less
index 528bdc8..938aade 100644
--- a/src/assets/less/custom.less
+++ b/src/assets/less/custom.less
@@ -247,3 +247,12 @@ p {
   font-size: 14rem;
 }
 
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
diff --git a/src/assets/less/index.less b/src/assets/less/index.less
index e508358..0b0ff68 100644
--- a/src/assets/less/index.less
+++ b/src/assets/less/index.less
@@ -8,7 +8,6 @@
 //颜色 
 @import "layout";
 //布局
-
 @import "anim";
 
 
diff --git a/src/assets/less/utils.less b/src/assets/less/utils.less
index 010c108..192a252 100644
--- a/src/assets/less/utils.less
+++ b/src/assets/less/utils.less
@@ -85,7 +85,7 @@ margin
 }
 
 .mb(7);
-.mb(@n, @i: 1) when (@i =< @n) {
+.mb(@n, @i: 0) when (@i =< @n) {
   .mb@{i}r {
     margin-bottom: (10rem * @i) !important;
   }
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 09bec13..44f72eb 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="visible" class="footer">
+  <div v-if="visible" class="footer" :class="{isWhite}">
     <div class="l-button" @click="refresh(1)">
       <span v-if="!isRefresh1" :class="{active:currentTab===1}">首页</span>
       <img v-if="isRefresh1 " src="../assets/img/icon/refresh1.png" alt="" class="refresh">
@@ -28,7 +28,7 @@ import bus, {EVENT_KEY} from "../utils/bus";
 
 export default {
   name: "Footer",
-  props: ['initTab'],
+  props: ['initTab', 'isWhite'],
   data() {
     return {
       isRefresh1: false,
@@ -99,6 +99,11 @@ export default {
   display: flex;
   //justify-content: space-between;
 
+  &.isWhite {
+    background: white!important;
+    color: #000!important;
+  }
+
   .l-button {
     width: 20%;
     display: flex;
diff --git a/src/pages/home/Attention.vue b/src/pages/home/Attention.vue
index 14982d3..6a5994f 100644
--- a/src/pages/home/Attention.vue
+++ b/src/pages/home/Attention.vue
@@ -113,7 +113,9 @@
         </div>
       </div>
     </Scroll>
-    <Footer v-bind:init-tab="2" style="position: fixed;left: 0;"/>
+    <Footer v-bind:init-tab="2"
+            :is-white="true"
+            style="position: fixed;left: 0;"/>
 
   </div>
 </template>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 56715c1..0299057 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -227,7 +227,7 @@ const bodyHeight = computed(() => store.state.bodyHeight)
 const bodyWidth = computed(() => store.state.bodyWidth)
 
 const state = reactive({
-  baseIndex: 0,
+  baseIndex: 1,
   navIndex: 4,
   test: '',
   recommendList: [
diff --git a/src/pages/shop/GoodsDetail.vue b/src/pages/shop/GoodsDetail.vue
index 5029d33..e418bb6 100644
--- a/src/pages/shop/GoodsDetail.vue
+++ b/src/pages/shop/GoodsDetail.vue
@@ -1,21 +1,58 @@
 <template>
-  <div class="goods-detail base-page">
-    <header>
-      <Icon
-          @click="$back()"
-          icon="material-symbols-light:arrow-back-ios-new"/>
-      <div class="right">
-        <div class="search">
-          <Icon icon="jam:search"/>
-          <div class="placeholder">多功能电源插座</div>
+  <div class="goods-detail base-page"
+       ref="page"
+       @scroll="scroll"
+  >
+    <header ref="header">
+      <div class="top">
+        <Icon
+            @click="$back()"
+            icon="material-symbols-light:arrow-back-ios-new"/>
+        <div class="right">
+          <div class="search">
+            <Icon icon="jam:search"/>
+            <div class="placeholder">多功能电源插座</div>
+          </div>
+          <div class="option">
+            <Icon icon="jam:search"/>
+            <Icon icon="mynaui:star"/>
+            <Icon icon="ph:share-fat"/>
+          </div>
         </div>
-        <div class="option">
-          <Icon icon="jam:search"/>
-          <Icon icon="mynaui:star"/>
-          <Icon icon="ph:share-fat"/>
+      </div>
+    </header>
+    <header class="shadow" ref="headerShadow">
+      <div class="top">
+        <Icon
+            @click="$back()"
+            icon="material-symbols-light:arrow-back-ios-new"/>
+        <div class="right">
+          <div class="search">
+            <Icon icon="jam:search"/>
+            <div class="placeholder">多功能电源插座</div>
+          </div>
+          <div class="option">
+            <Icon icon="mynaui:star"/>
+            <Icon icon="ph:share-fat"/>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="tab active">
+          <div class="text">商品</div>
+        </div>
+        <div class="tab">
+          <div class="text">评价</div>
+        </div>
+        <div class="tab">
+          <div class="text">详情</div>
+        </div>
+        <div class="tab">
+          <div class="text">推荐</div>
         </div>
       </div>
     </header>
+
     <div class="slide-imgs">
       <SlideHorizontal v-model:index="state.index">
         <SlideItem v-for="item in state.detail.imgs">
@@ -70,13 +107,6 @@
             <Icon class="arrow" icon="mingcute:right-line"/>
           </div>
         </div>
-        <div class="item">
-          <div class="label">活动</div>
-          <div class="desc">
-            <div class="ellipsis">优惠新人券 立减4新人券立减4新人券立减4新人券 立减4新人券 立减4</div>
-            <Icon class="arrow" icon="mingcute:right-line"/>
-          </div>
-        </div>
         <div class="item">
           <div class="label">物流</div>
           <div class="desc" style="display:block;">
@@ -85,7 +115,21 @@
               <span style="color: #dedede">|</span>
               <span>免运费</span>
             </div>
-            <div>48小时内发货</div>
+            <div class="flex space-between mb1r mt1r">
+              <div>48小时内发货</div>
+              <Icon class="arrow" icon="mingcute:right-line"/>
+            </div>
+            <div class="flex space-between mt1r">
+              <div class="gray">送至 四川省成都市</div>
+              <Icon class="arrow" icon="mingcute:right-line"/>
+            </div>
+          </div>
+        </div>
+        <div class="item mb0r">
+          <div class="label">参数</div>
+          <div class="desc">
+            <div class="ellipsis">优惠新人券 立减4新人券立减4新人券立减4新人券 立减4新人券 立减4</div>
+            <Icon class="arrow" icon="mingcute:right-line"/>
           </div>
         </div>
       </div>
@@ -111,7 +155,7 @@
               <div class="d">
                 东西不错质量也很好 性价比很高 良心商家就冲这图必须给好评
               </div>
-              <div class="gray">
+              <div class="c2">
                 china款/超值【买る双+送2双】共5双
               </div>
             </div>
@@ -131,7 +175,7 @@
                 <div class="tag">好评过千</div>
                 <div class="tag">销量超10万</div>
               </div>
-              <div class="gray">店铺口碑4.90分</div>
+              <div class="c2">店铺口碑4.90分</div>
             </div>
             <div class="r">进店</div>
           </div>
@@ -139,17 +183,17 @@
 
         <div class="desc">
           <div class="grid">
-            <div class="gray">商品质量</div>
+            <div class="c2">商品质量</div>
             <div>商品评价一般</div>
           </div>
           <div class="line"></div>
           <div class="grid">
-            <div class="gray">物流速度</div>
+            <div class="c2">物流速度</div>
             <div>平均24小时发货</div>
           </div>
           <div class="line"></div>
           <div class="grid">
-            <div class="gray">商品质量</div>
+            <div class="c2">商品质量</div>
             <div>商品评价一般</div>
           </div>
         </div>
@@ -177,7 +221,7 @@
       </div>
     </div>
 
-    <div class="img-list" v-if="false">
+    <div class="img-list" v-if="true">
       <header>
         <div class="l"></div>
         <span class="gray">商品详情</span>
@@ -185,7 +229,7 @@
       </header>
 
       <div class="imgs">
-        <img src="https://cdn.seovx.com/ha/?mom=302" alt="" class="avatar" v-for="i in 5">
+        <img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="avatar" v-for="i in 5">
       </div>
     </div>
 
@@ -218,7 +262,7 @@
                @click="nav('/shop/detail')"
                v-for="(item, index) in  state.list">
             <div class="item">
-              <img class="poster" :src="Utils.$imgPreview(item.cover)"/>
+              <img class="poster" v-lazy="Utils.$imgPreview(item.cover)"/>
               <div class="bottom">
                 <div class="desc">
                   {{ item.name }}
@@ -241,6 +285,27 @@
 
       </div>
     </div>
+
+    <div class="toolbar">
+      <div class="options">
+        <div class="option">
+          <Icon icon="iconoir:shop-window"/>
+          <div class="text">进店</div>
+        </div>
+        <div class="option">
+          <Icon icon="icon-park-outline:message-emoji"/>
+          <div class="text">客服</div>
+        </div>
+        <div class="option">
+          <Icon icon="icon-park-outline:shopping"/>
+          <div class="text">购物车</div>
+        </div>
+      </div>
+      <div class="btns">
+        <div class="btn">加入购物车</div>
+        <div class="btn">领券购买</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -260,6 +325,20 @@ const props = defineProps({
     default: () => ''
   }
 })
+let page = ref()
+let header = ref()
+let headerShadow = ref()
+
+function scroll() {
+  let d = page.value.scrollTop / 200
+  // console.log('s', d, header.value)
+  if (d > 0) {
+    header.value.style.opacity = 1 - d
+  } else {
+    header.value.style.opacity = 1 - d
+  }
+  headerShadow.value.style.opacity = d
+}
 
 const state = reactive({
   detail: goods.list[1],
@@ -287,56 +366,115 @@ function toggle(i) {
   color: black;
   font-size: 14rem;
   @c: #a2a2a2;
+  @c2: #c0c0c0;
+  @red: rgb(248, 38, 74);
 
   & > header {
-    background: white;
-    height: @header-height;
-    display: flex;
-    align-items: center;
-    padding: 0 10rem;
-
-    svg {
-      font-size: 22rem;
-      background: rgba(176, 176, 176, 0.5);
-      padding: 5rem;
-      border-radius: 50%;
-    }
-
-    .right {
-      margin-left: 10rem;
-      flex: 1;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    z-index: 9;
+
+    .top {
+      height: @header-height;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      padding: 0 10rem;
+
+      svg {
+        font-size: 22rem;
+        background: rgba(176, 176, 176, 0.4);
+        padding: 5rem;
+        color: white;
+        border-radius: 50%;
+      }
 
-      .search {
-        font-size: 12rem;
-        border-radius: 20rem;
-        padding: 5rem 10rem;
+      .right {
+        margin-left: 10rem;
         flex: 1;
-        background: rgb(243, 243, 243);
         display: flex;
         align-items: center;
-        color: gray;
+        justify-content: space-between;
 
-        svg {
-          padding: 0;
-          background: unset;
+        .search {
+          font-size: 12rem;
+          border-radius: 20rem;
+          padding: 5rem 10rem;
+          flex: 1;
+          background: rgb(243, 243, 243);
+          display: flex;
+          align-items: center;
+          color: gray;
+          visibility: hidden;
+
+          svg {
+            padding: 0;
+            background: unset;
+          }
+        }
+
+        .option {
+          margin-left: 15rem;
+          display: flex;
+          align-items: center;
+          gap: 8rem;
         }
       }
+    }
 
-      .option {
-        margin-left: 20rem;
+    .bottom {
+      display: flex;
+      display: none;
+
+      .tab {
+        flex: 1;
         display: flex;
+        justify-content: center;
         align-items: center;
-        gap: 20rem;
+        color: #646464;
+
+        .text {
+          padding: 10rem 0;
+          padding-bottom: 15rem;
+        }
+      }
+
+      .active {
+        color: black;
+
+        .text {
+          border-bottom: 2.5rem solid black;
+        }
       }
     }
   }
 
+  .shadow {
+    opacity: 0;
+    background: white;
+
+    svg {
+      background: unset !important;
+      color: black !important;
+    }
+
+    .search {
+      svg {
+        color: gray !important;
+      }
+
+      visibility: unset !important;
+    }
+
+    .bottom {
+      display: flex;
+    }
+  }
+
   .slide-imgs {
     position: relative;
-    height: 30vh;
+    height: 55vh;
 
     img {
       height: 100%;
@@ -361,6 +499,15 @@ function toggle(i) {
     padding: 8rem;
   }
 
+  .gray {
+    color: @c;
+  }
+
+  .c2 {
+    color: @c2;
+    font-size: 13rem;
+  }
+
   .card {
     margin: 5rem;
     margin-bottom: 10rem;
@@ -383,7 +530,7 @@ function toggle(i) {
 
     .price {
       color: red;
-      font-weight: bold;
+      font-weight: 900;
 
       .symbol {
         font-size: 16rem;
@@ -410,12 +557,14 @@ function toggle(i) {
 
         .discount {
           margin-left: 10rem;
-          color: rgb(248, 38, 74);
+          //color: rgb(248, 38, 74);
+          color: white !important;
           display: flex;
           align-items: flex-end;
           padding: 2rem 15rem;
           padding-bottom: 4rem;
-          background: rgb(255 167 183 / 25%);
+          //background: rgb(255 167 183 / 25%);
+          background: rgb(248, 38, 74);
           border-radius: 20rem;
 
           .text {
@@ -423,6 +572,7 @@ function toggle(i) {
           }
 
           .price {
+            color: white !important;
             margin-top: -6rem;
             transform: translateY(4rem);
           }
@@ -434,7 +584,7 @@ function toggle(i) {
         font-size: 16rem;
         margin-bottom: 8rem;
         overflow: hidden;
-        font-weight: bold;
+        font-weight: 900;
         letter-spacing: 1rem;
       }
 
@@ -444,9 +594,6 @@ function toggle(i) {
       }
     }
 
-    .gray {
-      color: @c;
-    }
 
     .desc-wrapper {
       .item {
@@ -529,8 +676,8 @@ function toggle(i) {
         align-items: center;
 
         span {
-          font-size: 18rem;
-          font-weight: bold;
+          font-size: 16rem;
+          font-weight: 900;
         }
       }
 
@@ -608,13 +755,13 @@ function toggle(i) {
 
             .name {
               font-size: 16rem;
-              font-weight: bold;
+              font-weight: 900;
             }
 
             .tags {
               display: flex;
               font-size: 10rem;
-              font-weight: bold;
+              font-weight: 900;
               gap: 10rem;
 
               .tag {
@@ -632,7 +779,7 @@ function toggle(i) {
           .r {
             border-radius: 4rem;
             padding: 5rem 14rem;
-            font-weight: bold;
+            font-weight: 900;
             background: @primary-btn-color;
             color: white;
           }
@@ -648,13 +795,13 @@ function toggle(i) {
         .grid {
           width: 33%;
           text-align: center;
-          font-weight: bold;
           font-size: 13rem;
+          font-weight: bold;
 
-          .gray {
+          .c2 {
             font-weight: normal;
             font-size: 12rem;
-            margin-bottom: 3rem;
+            margin-bottom: 6rem;
           }
         }
 
@@ -674,7 +821,7 @@ function toggle(i) {
           justify-content: space-between;
 
           .left {
-            font-weight: bold;
+            font-weight: 900;
           }
 
           .right {
@@ -725,7 +872,6 @@ function toggle(i) {
         }
       }
     }
-
   }
 
   .img-list {
@@ -742,14 +888,14 @@ function toggle(i) {
       .l {
         width: 0;
         height: 0;
-        border-right: 40px solid black;
+        border-right: 40px solid @c;
         border-top: 1px solid transparent;
         border-bottom: 1px solid transparent;
       }
 
       .r {
         .l;
-        border-left: 40px solid black;
+        border-left: 40px solid @c;
         border-right: unset;
       }
     }
@@ -796,9 +942,15 @@ function toggle(i) {
   }
 
   .other-recommend {
+    margin-bottom: 60rem;
+
     & > header {
       padding: 15rem;
+      padding-bottom: 5rem;
+      font-weight: 900;
+      font-size: 15rem;
     }
+
     @fColor: #f1f1f1;
 
     .fixed {
@@ -861,7 +1013,7 @@ function toggle(i) {
 
               .big {
                 font-size: 22rem;
-                font-weight: bold;
+                font-weight: 900;
                 transform: translateY(2rem);
               }
             }
@@ -880,6 +1032,69 @@ function toggle(i) {
       }
     }
   }
+
+  .toolbar {
+    position: fixed;
+    bottom: 0;
+    width: 100vw;
+    left: 0;
+    background: white;
+    display: flex;
+    padding: 10rem;
+    box-sizing: border-box;
+    gap: 6rem;
+
+    .options {
+      flex: 1;
+      display: flex;
+
+      .option {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        font-size: 11rem;
+        color: #646464;
+
+        svg {
+          font-size: 18rem;
+        }
+
+        &:first-child {
+          svg {
+            color: red;
+          }
+        }
+      }
+    }
+
+    .btns {
+      width: 60%;
+      display: flex;
+      font-size: 15rem;
+      font-weight: bold;
+      background: @red;
+      color: white;
+      border-radius: 12rem;
+      overflow: hidden;
+      height: 45rem;
+
+      .btn {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:first-child {
+          color: @red;
+          background: rgb(255, 233, 237);
+        }
+      }
+
+    }
+
+  }
 }
 
 </style>
\ No newline at end of file

From 8e5ec6a2d41bc2fd50f63ffc1e00d2e1f4a851b6 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 15 Mar 2024 02:19:27 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E9=95=BF=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/index.vue           |   3 +-
 src/pages/home/slide/LongVideo.vue | 143 +++++++++++++++++
 src/pages/shop/Shop.vue            | 238 ++++++++++++++++++-----------
 3 files changed, 294 insertions(+), 90 deletions(-)
 create mode 100644 src/pages/home/slide/LongVideo.vue

diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 0299057..af8ae0b 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -112,7 +112,7 @@
             </SlideItem>
             <Slide2 :active="state.navIndex === 2 && state.baseIndex === 1"/>
             <SlideItem>
-              <Shop/>
+              <LongVideo/>
             </SlideItem>
             <Slide4 :active="state.navIndex === 4 && state.baseIndex === 1"/>
           </SlideHorizontal>
@@ -218,6 +218,7 @@ import Slide2 from "@/pages/home/slide/Slide2.vue";
 import Slide4 from "@/pages/home/slide/Slide4.vue";
 import {DefaultUser} from "@/utils/const_var";
 import {$no} from "@/utils";
+import LongVideo from "@/pages/home/slide/LongVideo.vue";
 
 const nav = useNav()
 const store = useStore()
diff --git a/src/pages/home/slide/LongVideo.vue b/src/pages/home/slide/LongVideo.vue
new file mode 100644
index 0000000..325bcb8
--- /dev/null
+++ b/src/pages/home/slide/LongVideo.vue
@@ -0,0 +1,143 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="page">
+    <div class="item"
+         :class="[
+             i % 5 === 0 && 'big',
+              i % 5 === 0 ? '' : (i % 2 === 1 && 'l'),
+              i % 5 === 0 ? '' : (i % 2 === 0 && 'r'),
+         ]"
+         v-for="(item,i) in 100">
+      <video
+          controls
+          src="@/assets/video/0.mp4"></video>
+      <img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="poster">
+      <div class="title">
+        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
+      </div>
+      <div class="bottom">
+        <div class="l">
+          <img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="avatar">
+          <div class="name">哈哈哈哈</div>
+        </div>
+        <div class="r">
+          <Icon icon="icon-park-outline:like"/>
+          <div class="num">9.2万</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+.page {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 15rem;
+  height: calc(100vh - @header-height - @footer-height);
+  margin-top: @header-height;
+  overflow: auto;
+  box-sizing: border-box;
+
+  .item {
+    margin: 0 10rem;
+    display: flex;
+    flex-direction: column;
+    gap: 8rem;
+
+    .poster {
+      border-radius: 12rem;
+      width: 100%;
+      height: 140rem;
+      object-fit: cover;
+    }
+
+    video {
+      display: none;
+      height: 220rem;
+      object-fit: cover;
+    }
+
+    .title {
+      height: 36rem;
+      color: white;
+      font-size: 14rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 2; //显示的行
+    }
+
+    .f {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 5rem;
+    }
+
+    .bottom {
+      color: gray;
+      .f;
+      font-size: 13rem;
+
+      .l {
+        .f;
+
+        .avatar {
+          @w: 20rem;
+          width: @w;
+          height: @w;
+          object-fit: cover;
+          border-radius: 50%;
+        }
+      }
+
+      .r {
+        .f;
+
+        svg {
+          font-size: 16rem;
+        }
+
+      }
+    }
+
+    &.big {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      margin: 0;
+
+      .poster {
+        display: none;
+      }
+
+      video {
+        display: block;
+      }
+
+      .title {
+        height: unset;
+        -webkit-line-clamp: 1;
+      }
+
+      .title, .bottom {
+        padding: 0 10rem;
+      }
+    }
+
+    &.l {
+      margin-right: 5rem;
+    }
+
+    &.r {
+      margin-left: 5rem;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shop/Shop.vue b/src/pages/shop/Shop.vue
index e0dd35b..156bc45 100644
--- a/src/pages/shop/Shop.vue
+++ b/src/pages/shop/Shop.vue
@@ -1,40 +1,89 @@
 <template>
   <div id="Shop">
-    <div class="bg">
-      <div class="top"></div>
-      <div class="bottom"></div>
-    </div>
-    <div class="search">
-      <div class="search-input">
-        <img src="@/assets/img/icon/search-gray.png" alt="">
-        <div class="placeholder">50元话费充值</div>
-        <img src="@/assets/img/icon/scan-gray.png" alt="">
-        <div class="search-notice">搜索</div>
-      </div>
-      <div class="more">
-        <img src="@/assets/img/icon/category-gray.png" alt="">
-        <span>更多</span>
+    <div class="wrapper">
+      <div class="search">
+        <div class="search-input">
+          <Icon icon="tabler:search"/>
+          <div class="placeholder">50元话费充值</div>
+          <Icon color="gray" icon="lucide:camera"/>
+          <div class="search-notice">搜索</div>
+        </div>
+        <div class="more">
+          <Icon icon="ep:shopping-cart"/>
+        </div>
       </div>
     </div>
     <Scroll class="Scroll"
             fixedHeight="100"
             @fixed="e=>state.fixed = e"
             @pulldown="loadData">
-      <div class="options">
-        <div class="option">
-          <img src="@/assets/img/icon/scan-gray.png" alt="">
-          <span>我的订单 快捷查单</span>
-        </div>
-        <div class="option">
-          <img src="@/assets/img/icon/scan-gray.png" alt="">
-          <span>购物车 空空如也</span>
+      <div class="wrapper">
+        <div class="card">
+          <div class="options">
+            <div class="option" @click="$no">
+              <Icon icon="lets-icons:order-light"/>
+              <div>我的订单</div>
+            </div>
+            <div class="option" @click="$no">
+              <Icon icon="material-symbols-light:charging-station-outline"/>
+              <div>手机充值</div>
+            </div>
+            <div class="option" @click="$no">
+              <Icon icon="lucide:message-square-quote"/>
+              <div>购物消息</div>
+            </div>
+            <div class="option" @click="$no">
+              <Icon icon="fluent:location-16-regular"/>
+              <div>小时达</div>
+            </div>
+            <div class="option" @click="$no">
+              <Icon icon="ri:refund-2-fill"/>
+              <div>退款/售后</div>
+            </div>
+            <div class="option" @click="$no">
+              <Icon icon="icon-park-outline:clothes-turtleneck"/>
+              <div>潮流服饰</div>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="navs">
-        <div class="wrapper">
-          <div class="nav" v-for="i in 20">推荐</div>
+        <div class="card" style="margin-bottom: 5rem;">
+          <div class="baiyibutie">
+            <div class="item">
+              <img src="@/assets/img/icon/shop/baiyibutie.png" alt="">
+              <span>38节补贴</span>
+            </div>
+            <div class="item">
+              <img src="@/assets/img/icon/shop/1.webp" alt="">
+              <span class="price">
+              <span class="m">￥</span>
+              <span>470</span>
+            </span>
+            </div>
+            <div class="item">
+              <img src="@/assets/img/icon/shop/2.webp" alt="">
+              <span class="price">
+              <span class="m">￥</span>
+              <span>699</span>
+            </span>
+            </div>
+            <div class="item">
+              <img src="@/assets/img/icon/shop/3.png" alt="">
+              <span class="price">
+              <span class="m">￥</span>
+              <span>8.8</span>
+            </span>
+            </div>
+            <div class="item">
+              <img src="@/assets/img/icon/shop/4.jpg" alt="">
+              <span class="price">
+              <span class="m">￥</span>
+              <span>2.99</span>
+            </span>
+            </div>
+          </div>
         </div>
       </div>
+
       <div v-masonry class="goods-list"
            :class="{fixed:state.fixed}"
            transition-duration="0s"
@@ -42,7 +91,7 @@
         <div v-masonry-tile class="goods"
              @click="nav('/shop/detail')"
              v-for="(item, index) in  state.list">
-          <div class="card">
+          <div class="item">
             <img class="poster" :src="Utils.$imgPreview(item.cover)"/>
             <div class="bottom">
               <div class="desc">
@@ -67,12 +116,15 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="jsx">
+
 import {onMounted, reactive} from "vue";
-import Utils from "@/utils";
+import {useNav} from "@/utils/hooks/useNav";
+import api from "@/api";
+import SlideList from "@/pages/home/slide/SlideList.vue";
+import Utils, {$no} from "@/utils";
 import Scroll from "@/components/Scroll.vue";
 import goods from "@/assets/data/goods";
-import {useNav} from "@/utils/hooks/useNav";
 
 const nav = useNav()
 const state = reactive({
@@ -110,31 +162,14 @@ onMounted(() => {
 
 #Shop {
   font-size: 14rem;
-  color: white;
-  padding-top: @header-height;
   position: relative;
   background: @fColor;
+  background: #f1f1f1;
+  padding: 10rem 5rem;
+  color: black;
 
-  .bg {
-    top: 0;
-    position: absolute;
-    width: 100vw;
-    height: 30vh;
-    //background: red;
-
-    @th: 70%;
-    @eColor: rgb(32, 28, 58);
-
-    .top {
-      height: @th;
-      background: linear-gradient(to bottom, rgb(56, 30, 77), @eColor);
-    }
-
-    .bottom {
-      height: 100% - @th;
-      background: red;
-      background: linear-gradient(to bottom, @eColor, @fColor);
-    }
+  .wrapper {
+    padding: 0 5rem;
   }
 
   .search {
@@ -142,20 +177,22 @@ onMounted(() => {
     z-index: 2;
     display: flex;
     align-items: center;
-    height: @header-height;
-    padding: 9rem 20rem;
+    height: 36rem;
     box-sizing: border-box;
+    margin-bottom: 10rem;
 
-    img {
-      width: 20rem;
+    svg {
+      font-size: 22rem;
     }
 
     .search-input {
-      border: 3rem solid rgb(140, 48, 74);
+      border: 1rem solid rgb(140, 48, 74);
       border-radius: 8rem;
       height: 100%;
       padding: 0 10rem;
+      padding-right: 3rem;
       flex: 1;
+      gap: 10rem;
       display: flex;
       align-items: center;
 
@@ -168,12 +205,19 @@ onMounted(() => {
       }
 
       .search-notice {
-        color: rgb(242, 62, 92);
+        background: rgb(242, 62, 92);
+        padding: 0 10rem;
+        height: 85%;
+        border-radius: 6rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: white;
       }
     }
 
     .more {
-      margin-left: 20rem;
+      margin-left: 10rem;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -182,50 +226,66 @@ onMounted(() => {
     }
   }
 
+  .card {
+    background: white;
+    padding: 10rem 15rem;
+    margin-bottom: 10rem;
+    border-radius: 8rem;
+  }
+
   .options {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20rem;
-    height: 40rem;
-    padding: 4rem 20rem;
+    display: flex;
+    overflow-x: auto;
     box-sizing: border-box;
 
-    img {
-      width: 20rem;
-      margin-right: 10rem;
-    }
-
     .option {
+      width: 17vw;
+      flex-shrink: 0;
       font-size: 13rem;
-      flex: 1;
       display: flex;
-      background: rgb(63, 58, 78);
-      padding: 6rem 8rem;
-      border-radius: 6rem;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        font-size: 30rem;
+        margin-bottom: 3rem;
+      }
     }
   }
 
-  .navs {
-    overflow: auto;
-    padding: 0 10rem;
+  .baiyibutie {
+    display: flex;
 
-    .wrapper {
+    .item {
       display: flex;
-      //flex-wrap: wrap;
-    }
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 25%;
+      font-size: 12rem;
+      color: gray;
 
-    .nav {
-      margin: 10rem;
-      word-break: keep-all;
-      //border-bottom: 2rem solid white;
+      img {
+        width: 80%;
+      }
+
+      .price {
+        color: red;
+        font-size: 16rem;
+        font-weight: bold;
+
+        .m {
+          font-size: 10rem;
+        }
+      }
     }
   }
 
   .Scroll {
     position: relative;
     z-index: 2;
-    //height: calc(100vh - @header-height) !important;
-    height: calc(100vh - @header-height * 2 - @footer-height) !important;
+    height: calc(100vh - @footer-height * 2) !important;
   }
 
   .fixed {
@@ -235,15 +295,15 @@ onMounted(() => {
   @p: 5rem;
 
   .goods-list {
-    padding: @p;
+    padding-bottom: 20rem;
   }
 
   .goods {
-    width: calc(50% - @p);
+    width: 50%;
     box-sizing: border-box;
     padding: 5rem;
 
-    .card {
+    .item {
       border-radius: 8rem;
       overflow: hidden;
       background: white;
@@ -307,4 +367,4 @@ onMounted(() => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>