优化

src/pages/home/components/Shop.vue

@@ -127,7 +127,7 @@ onMounted(() => {
     .bottom {
       height: 100% - @th;
       background: red;
-      background: linear-gradient(to bottom, @eColor, white);
+      background: linear-gradient(to bottom, @eColor, #e1e1e1);
     }
   }
 
@@ -223,7 +223,7 @@ onMounted(() => {
   }
 
   .fixed {
-    background: white;
+    background: #e1e1e1;
   }
 
   @p: 5rem;

src/pages/home/slide/Slide3.vue

@@ -1,208 +0,0 @@
-<template>
-  <SlideItem id="slide0">
-    <div class="sub-type"
-         :class="state.subTypeIsTop?'top':''"
-         ref="subTypeRef">
-      <div class="local">
-        <div class="card" @touchmove.capture="stop">
-          <div class="nav-item">
-            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
-            <span>美食</span>
-          </div>
-          <div class="nav-item">
-            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
-            <span>休闲娱乐</span>
-          </div>
-          <div class="nav-item">
-            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
-            <span>游玩</span>
-          </div>
-          <div class="nav-item">
-            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
-            <span>丽人/美发</span>
-          </div>
-          <div class="nav-item">
-            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
-            <span>住宿</span>
-          </div>
-          <div class="nav-item">
-            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
-            <span>游玩</span>
-          </div>
-          <div class="nav-item">
-            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
-            <span>丽人/美发</span>
-          </div>
-          <div class="nav-item">
-            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
-            <span>住宿</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="sub-type-notice"
-         v-if="state.subType===-1 && !state.subTypeVisible"
-         @click="showSubType">附近吃喝玩乐
-    </div>
-    <SlideList
-        :active="props.active"
-        :style="{background: 'black',marginTop:state.subTypeVisible?state.subTypeHeight:0}"
-        :api="api.videos.recommended"
-        @touchstart="pageClick"
-        html-id="slide0-list"
-    />
-  </SlideItem>
-</template>
-
-<script setup lang="jsx">
-import SlideItem from '@/components/slide/SlideItem.vue'
-import {onMounted, onUnmounted, reactive, ref, watch} from "vue";
-import bus, {EVENT_KEY} from "@/utils/bus";
-import Utils from "@/utils";
-import api from "@/api";
-import Loading from "@/components/Loading.vue";
-import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender";
-import SlideList from './SlideList.vue';
-
-const props = defineProps({
-  cbs: {
-    type: Object,
-    default() {
-      return {}
-    }
-  },
-  active: {
-    type: Boolean,
-    default: false
-  }
-})
-const emit = defineEmits([
-  'update:item',
-  'goUserInfo',
-  'showComments',
-  'showShare',
-  'goMusic',
-])
-
-function stop(e) {
-  e.stopPropagation()
-}
-
-const p = {
-  onShowComments() {
-    console.log('onShowComments')
-  }
-}
-
-const subTypeRef = ref(null)
-const state = reactive({
-  index: 0,
-  subType: -1,
-  subTypeVisible: false,
-  subTypeHeight: '0',
-  //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
-  subTypeIsTop: false,
-})
-
-
-function showSubType(e) {
-  Utils.$stopPropagation(e)
-  console.log('subTypeRef',)
-  state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
-  state.subTypeVisible = true
-  setTimeout(() => state.subTypeIsTop = true, 300)
-  bus.emit(EVENT_KEY.OPEN_SUB_TYPE,)
-}
-
-function pageClick(e) {
-  // console.log('pageClick')
-  if (state.subTypeVisible) {
-    state.subTypeIsTop = state.subTypeVisible = false
-    bus.emit(EVENT_KEY.CLOSE_SUB_TYPE,)
-    Utils.$stopPropagation(e)
-  }
-}
-
-onMounted(() => {
-  // getData()
-})
-onUnmounted(() => {
-})
-
-</script>
-
-<style scoped lang="less">
-@import "@/assets/less/index";
-
-#slide0 {
-  position: relative;
-
-  .sub-type {
-    width: 100%;
-    position: fixed;
-    top: 0;
-
-    &.top {
-      z-index: 2;
-    }
-
-    .local {
-      transition: all .3s;
-      font-size: 14rem;
-      color: gray;
-      background: #f9f9f9;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .card {
-        margin: 20rem;
-        margin-top: @header-height;
-        padding: 20rem;
-        border-radius: 8rem;
-        width: 100%;
-        background: white;
-        box-sizing: border-box;
-        display: flex;
-        align-items: flex-end;
-        justify-content: space-between;
-        overflow: auto;
-      }
-
-      .nav-item {
-        @width: 35rem;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        flex-shrink: 0;
-        width: 17vw;
-
-        img {
-          width: @width;
-          height: @width;
-          margin-bottom: 5rem;
-        }
-      }
-    }
-  }
-
-  .sub-type-notice {
-    position: fixed;
-    background: rgba(black, .4);
-    top: 100rem;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 3rem 12rem;
-    border-radius: 10rem;
-    z-index: 3;
-    font-size: 12rem;
-    color: white;
-  }
-
-  #slide0-infinite {
-    z-index: 1;
-    margin-top: 0;
-    transition: all .3s;
-  }
-}
-</style>