优化

src/assets/less/variables.less

@@ -1,5 +1,5 @@
 @footer-height: 50rem;
-@header-height: 60rem;
+@header-height: 50rem;
 @indicator-height: 50rem;
 
 @padding-page: 15rem;

src/components/Scroll.vue

@@ -97,7 +97,7 @@ export default {
       }
     },
     scrollBottom() {
-      nextTick(()=>{
+      nextTick(() => {
         this.wrapper.scrollTo({top: this.wrapper.scrollHeight - this.wrapper.clientHeight})
       })
     }

src/components/slide/BVideo.vue

@@ -245,11 +245,13 @@ export default {
     bus.off(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType)
   },
   methods: {
-    onOpenSubType({index, height}) {
+    onOpenSubType({id, height}) {
+      if (id !== this.item.id) return
       this.isMarginTop = true
       Utils.$setCss(this.$refs.video, 'margin-top', `${height}px`)
     },
-    onCloseSubType({index}) {
+    onCloseSubType({id}) {
+      if (id !== this.item.id) return
       this.isMarginTop = false
       Utils.$setCss(this.$refs.video, 'margin-top', `0px`)
     },
@@ -370,7 +372,7 @@ export default {
     width: 100%;
     height: 100%;
     transition: height, margin-top .3s;
-    background: black;
+    //background: black;
     /*position: absolute;*/
   }
 

src/pages/slideHooks/Community.vue

@@ -70,19 +70,21 @@ onMounted(() => {
   font-size: 14rem;
   color: white;
   padding-top: @header-height;
+  background: rgb(21, 23, 36);
 
   .Scroll {
-    background: black;
-    //height: calc(100vh - @header-height) !important;
     height: calc(100vh - @header-height - @footer-height) !important;
   }
 
-  .goods-list {
+  @p: 1rem;
 
+  .goods-list {
+    padding: @p;
+    box-sizing: border-box;
   }
 
   .goods {
-    width: 50%;
+    width: calc(50% - @p);
     padding: 3rem;
     box-sizing: border-box;
 

src/pages/slideHooks/IndicatorHome.vue

@@ -188,8 +188,6 @@ export default {
 <style scoped lang="less">
 @import "@/assets/less/index";
 
-@height: 60rem;
-
 .indicator-home {
   position: fixed;
   font-size: 16rem;
@@ -198,7 +196,7 @@ export default {
   z-index: 2;
   width: 100%;
   color: white;
-  height: @height;
+  height: @header-height;
   transition: all .3s;
 
   .notice {

src/pages/slideHooks/Shop.vue

@@ -1,5 +1,9 @@
 <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="">
@@ -13,6 +17,8 @@
       </div>
     </div>
     <Scroll class="Scroll"
+            fixedHeight="100"
+            @fixed="e=>state.fixed = e"
             @pulldown="loadData">
       <div class="options">
         <div class="option">
@@ -30,6 +36,7 @@
         </div>
       </div>
       <div v-masonry class="goods-list"
+           :class="{fixed:state.fixed}"
            transition-duration="0s"
            item-selector=".goods">
         <div v-masonry-tile class="goods" v-for="(item, index) in  state.list">
@@ -66,7 +73,8 @@ import Scroll from "@/components/Scroll.vue";
 
 const state = reactive({
   list: [],
-  listEl: null
+  listEl: null,
+  fixed: false
 })
 
 function loadData() {
@@ -98,12 +106,39 @@ onMounted(() => {
   font-size: 14rem;
   color: white;
   padding-top: @header-height;
+  position: relative;
+  background: white;
+
+  .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, white);
+    }
+  }
 
   .search {
+    position: relative;
+    z-index: 2;
     display: flex;
     align-items: center;
     height: @header-height;
-    padding: 0 20rem;
+    padding: 9rem 20rem;
+    box-sizing: border-box;
 
     img {
       width: 20rem;
@@ -112,9 +147,11 @@ onMounted(() => {
     .search-input {
       border: 3rem solid rgb(140, 48, 74);
       border-radius: 8rem;
-      padding: 10rem 20rem;
+      height: 100%;
+      padding: 0 10rem;
       flex: 1;
       display: flex;
+      align-items: center;
 
       .placeholder {
         flex: 1;
@@ -143,7 +180,9 @@ onMounted(() => {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20rem;
-    padding: 0 20rem;
+    height: 40rem;
+    padding: 4rem 20rem;
+    box-sizing: border-box;
 
     img {
       width: 20rem;
@@ -151,11 +190,12 @@ onMounted(() => {
     }
 
     .option {
+      font-size: 13rem;
       flex: 1;
       display: flex;
       background: rgb(63, 58, 78);
-      padding: 8rem;
-      border-radius: 8rem;
+      padding: 6rem 8rem;
+      border-radius: 6rem;
     }
   }
 
@@ -170,22 +210,26 @@ onMounted(() => {
 
     .nav {
       margin: 10rem;
-      padding-bottom: 10rem;
       word-break: keep-all;
       //border-bottom: 2rem solid white;
     }
   }
 
   .Scroll {
+    position: relative;
+    z-index: 2;
     //height: calc(100vh - @header-height) !important;
-    height: calc(100vh - @header-height - @footer-height) !important;
+    height: calc(100vh - @header-height * 2 - @footer-height) !important;
+  }
+
+  .fixed {
+    background: white;
   }
 
   @p: 5rem;
 
   .goods-list {
     padding: @p;
-    background: white;
   }
 
   .goods {

src/pages/slideHooks/index.vue

@@ -50,7 +50,7 @@
           </div>
         </div>
         <div class="sub-type-notice"
-             v-if="state.subType===-1"
+             v-if="state.subType===-1 && state.navIndex === 0"
              @click="showSubType">附近吃喝玩乐
         </div>
         <div class="slide-content"
@@ -74,6 +74,7 @@
             </SlideItem>
             <SlideItem>
               <VInfinite
+                  :style="{background: 'black'}"
                   name="main"
                   v-model:index="state.itemIndex"
                   :render="render"
@@ -89,16 +90,6 @@
             </SlideItem>
           </H>
         </div>
-        <div>
-          <span>{{ state.baseIndex }}</span>
-          <button @click="state.baseIndex++">加</button>
-          <button @click="state.baseIndex--">减</button>
-        </div>
-        <div>
-          <span>{{ state.navIndex }}</span>
-          <button @click="state.navIndex++">加</button>
-          <button @click="state.navIndex--">减</button>
-        </div>
         <Footer v-bind:init-tab="1"/>
       </SlideItem>
       <SlideItem class=" gray">
@@ -301,8 +292,9 @@ function showSubType(e) {
   setTimeout(() => {
     state.subTypeIsTop = true
   }, 300)
+  let id = state.recommendVideos[state.itemIndex].id
   bus.emit(EVENT_KEY.OPEN_SUB_TYPE, {
-    index: 0,
+    id,
     height: subTypeRef.value.getBoundingClientRect().height
   })
 }
@@ -312,7 +304,8 @@ function pageClick(e) {
   if (state.subType !== -1) {
     state.subType = -1
     state.subTypeIsTop = false
-    bus.emit(EVENT_KEY.CLOSE_SUB_TYPE, {index: 0,})
+    let id = state.recommendVideos[state.itemIndex].id
+    bus.emit(EVENT_KEY.CLOSE_SUB_TYPE, {id})
     Utils.$stopPropagation(e)
   }
 }