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] =?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>