调整UI

src/views/pc/index.vue

@@ -1,58 +1,15 @@
 <template>
   <div id="home">
     <div class="header-wrap-box">
-      <div class="adv-wrap" v-if="showHeaderAdv && getAdItem(1).length > 0">
-        <swiper loop :autoplay="{ delay: 5000, disableOnInteraction: false, pauseOnMouseEnter: true, }" :modules="[Autoplay]">
-          <swiper-slide class="adv" v-for="(item, index) in getAdItem(1)" :key="index" @click="jumpAdv(item)">
-            <DecryptImg class="banner-img" :src="item.cover" />
-          </swiper-slide>
-        </swiper>
-        <img @click="closeHeaderAdv" class="close-adv" src="@/assets/images/pc/adv_close.png" />
-      </div>
       <div class="header-wrap">
         <div class="flex-vcenter left-wrap">
           <img  @click="jumpPage('/home')" class="logo" src="@/assets/images/pc/logo.png" />
-          <div class="tab-list">
-            <span
-              class="item"
-              :class="{ active: activeIndex === index }"
-              @click="changeTab(item, index)"
-              v-for="(item, index) in homeStore.homeData"
-              :key="index">
-              {{ item.subModuleName }}
-              <span v-show="activeIndex === index">✨</span>
-            </span>
-          </div>
         </div>
         <div class="right-list">
-          <div class="search-box">
-            <input type="text" v-model="searchText" @keydown.enter="tosearch" placeholder="输入你搜索的关键字">
-            <div class="search-btn" @click="tosearch">
-              <img class="search" src="@/assets/images/pc/search.png" />
-            </div>
-          </div>
-          <div class="item history-box">
-            <div @click="toHistory" @mouseover="getHistoryList">
-              <img class="search" src="@/assets/images/pc/history.png" />
-              <p>观看历史</p>
-            </div>
-            <div class="history-list-box-wrap" v-if="historyList.length > 0">
-              <div class="history-list-box">
-                <img class="top-tip" src="@/assets/images/pc/history_bg.png" />
-                <div class="movie-list" @click="toMoivePlay(item.id)" v-for="(item, index) in historyList" :key="index">
-                  <DecryptImg class="cover" :src="item.cover" :key="item.cover + Math.random()" />
-                  <div class="described ellipsis2">{{ item.title }}</div>
-                </div>
-                <div class="more-btn" @click="toHistory">更多 <img src="@/assets/images/pc/left_arrow.png" alt=""></div>
-              </div>
-            </div>
-          </div>
           <div class="item" @click="jumpPage('/business')">
             <img class="search" src="@/assets/images/pc/business.png" />
             <p>商务合作</p>
           </div>
-          <DecryptImg @click="userHandle" class="avatar" v-if="userInfo?.portrait" :src="userInfo.portrait" :key="userInfo?.portrait" />
-          <img v-else @click="userHandle" class="avatar" src="@/assets/images/pc/avatar.png" />
           <div class="official" @click="jumpPage('/contact')">联系官方</div>
         </div>
       </div>
@@ -66,33 +23,14 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watchEffect, computed, watch, onMounted } from 'vue'
-import { jumpAdv } from '@/utils/index';
+import { computed } from 'vue'
 import { getAdItem } from '@/utils/getConfig'
-import { Autoplay } from 'swiper'
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import 'swiper/swiper.min.css';
-import { useHomeStore } from '@/stores/home'
-import { HistoryVideoType } from '@/enums/app';
-import { queryHistoryVideo } from '@/utils';
 import Mask from './mask.vue';
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useGlobalStore } from '@/stores/global';
-import { eventBus } from "@/utils/eventBus";
 
 const globalStore = useGlobalStore();
 const router = useRouter();
-const route = useRoute()
-const homeStore = useHomeStore()
-const userInfo = computed(() => {
-  const data = localStorage.getItem('userInfo') || '{}'
-  if (data) {
-    return JSON.parse(data)
-  }
-  return data
-})
-const searchText = ref('')
-const activeIndex = ref(0)
 
 // const isShowAdvPopup = ref(false)
 
@@ -106,102 +44,10 @@ const isShowAdvPopup = computed(() => {
 const closeHomePopupAdv = () => {
   globalStore.setHomeAdvFirst();
 };
-watchEffect(() => {
-  if (['/home','/welfare', '/classification', '/pageList'].includes(route.path)) {
-    activeIndex.value = Number(route.query.index || 0)
-  } else {
-    activeIndex.value = -1
-  }
-})
-watch(() => route.path, (path) => {
-  if (path !== '/search') {
-    searchText.value = ''
-  }
-})
-const changeTab = (item: any, index: number) => {
-  activeIndex.value = index
-  if (item.showType === 2) {
-    router.push({
-      path: '/pageList',
-      query: {
-        index,
-        id: item.id,
-        name: item.subModuleName,
-        page: 1
-      }
-    })
-  }
-  if (item.showType === 1) {
-    router.push({
-      path: '/home',
-      query: {
-        index,
-        id: item.id,
-      }
-    })
-  }
-  if (item.showType === 4) {
-    router.push('/welfare?index=' + index)
-  }
-  if (item.showType === 5) {
-    router.push('/classification?index=' + index)
-  }
-}
-
-
-
-const tosearch = () => {
-  router.push({
-    path: '/search',
-    query: {
-      id: searchText.value,
-      page: 1
-    }
-  })
-}
 const jumpPage = (path: string) => {
   router.push(path)
 }
 
-const showHeaderAdv = ref(true)
-showHeaderAdv.value = !sessionStorage.getItem('HeaderAdv')
-const closeHeaderAdv = () => {
-  sessionStorage.setItem('HeaderAdv', 'true')
-  showHeaderAdv.value = false
-}
-
-const userHandle = () => {
-  if (userInfo.value.account) {
-    router.push('/mine')
-  } else {
-    eventBus.emit('SHOW_LOGIN')
-  }
-}
-
-const historyList = ref([])
-const getHistoryList = async () => {
-  const list: any = await queryHistoryVideo(1, 3, HistoryVideoType.VIDEO)
-  historyList.value = list
-};
-const toMoivePlay = (id: string) => {
-  router.push({
-    path: '/moviePlay',
-    query: {
-      vid: id,
-      page: 1
-    }
-  })
-}
-getHistoryList()
-
-const toHistory = () => {
-  if (userInfo.value.account) {
-    router.push('/mine/history')
-  } else {
-    eventBus.emit('SHOW_LOGIN')
-  }
-}
-
 </script>
 <style lang="scss" scoped>
 @media (min-width: 768px) {
@@ -215,29 +61,6 @@ const toHistory = () => {
     position: sticky;
     top: 0;
     z-index: 100;
-    .adv-wrap {
-      border: 1px solid #34363B;
-      background: #1A1C22;
-      width: 100%;
-      height: 100px;
-      position: relative;
-      .adv {
-        height: 100%;
-        width: max-content;
-      }
-      .banner-img {
-        width: 100%;
-        height: 100px;
-      }
-      .close-adv {
-        width: 50px;
-        height: 20px;
-        position: absolute;
-        top: 20px;
-        right: 200px;
-        z-index: 1;
-      }
-    }
   }
   .header-wrap {
     width: 100%;
@@ -256,55 +79,6 @@ const toHistory = () => {
     .logo:hover {
       transform: scale(1.02);
     }
-    .tab-list {
-      display: flex;
-      align-items: center;
-      color: #A3A4A7;
-      font-size: 16px;
-      font-weight: 400;
-
-      .item {
-        padding: 14px;
-        cursor: pointer;
-        white-space: nowrap;
-      }
-
-      .active {
-        color: #FFF;
-        font-size: 18px;
-      }
-      .item:hover {
-        color: #FFF;
-      }
-    }
-
-    .search-box {
-      width: 240px;
-      height: 36px;
-      padding: 10px 0 10px 12px;
-      box-sizing: border-box;
-      border-radius: 4px;
-      background: rgba(255, 255, 255, 0.20);
-      display: flex;
-      align-items: center;
-
-      input {
-        all: unset;
-        color: #fff;
-        flex: 1;
-      }
-
-      .search-btn {
-        cursor: pointer;
-      }
-
-      .search {
-        width: 24px;
-        height: 24px;
-        margin: 0 11px;
-      }
-    }
-
     .right-list {
       display: flex;
       align-items: center;
@@ -326,19 +100,6 @@ const toHistory = () => {
         color: #fff;
       }
 
-      .avatar {
-        width: 38px;
-        height: 38px;
-        border-radius: 50%;
-        overflow: hidden;
-        margin: 30px;
-        cursor: pointer;
-        transition: all 0.2s;
-      }
-      .avatar:hover {
-        transform: scale(1.1);
-        transition: all 0.2s;
-      }
       .official {
         width: 87px;
         height: 36px;
@@ -356,75 +117,6 @@ const toHistory = () => {
     }
   }
 
-  .history-box {
-    position: relative;
-    .history-list-box-wrap {
-      width: 282px;
-      min-height: 100px;
-      position: absolute;
-      top: 45px;
-      transform: translateX(-50%);
-      left: 50%;
-      display: none;
-    }
-    .history-list-box {
-      width: 282px;
-      padding: 16px;
-      position: absolute;
-      left: 50%;
-      top: 60px;
-      transform: translateX(-50%);
-      border-radius: 4px;
-      border: 1px solid rgba(255, 255, 255, 0.25);
-      background: #1A1C22;
-      .top-tip {
-        position: absolute;
-        top: -18px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 12px;
-        height: 12px;
-      }
-      .movie-list {
-        display: flex;
-        align-items: center;
-        margin-bottom: 16px;
-      }
-      .cover {
-        width: 110px;
-        height: 62px;
-        border-radius: 4px;
-        overflow: hidden;
-        margin-right: 8px;
-      }
-      .described {
-        width: 130px;
-        height: 44px;
-        text-align: left;
-        color: #A9A9AC;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-        border-bottom: 2px solid rgba(255, 255, 255, 0.12);
-      }
-      .more-btn {
-        @include flexCenter;
-        height: 44px;
-        color: #A9A9AC;
-        font-size: 14px;
-        font-weight: 400;
-        img {
-          width: 16px;
-          height: 16px;
-        }
-      }
-    }
-  }
-  .history-box:hover {
-    .history-list-box-wrap {
-      display: block;
-    }
-  }
   :deep() {
     .imgBox {
       width: 474px !important;