feat: 优化

public/index.html

@@ -6,10 +6,7 @@
       http-equiv="X-UA-Compatible"
       content="IE=edge"
     />
-    <meta
-      name="viewport"
-      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
-    />
+    <meta name="viewport" />
     <link
       rel="icon"
       href="<%= BASE_URL %>favicon.ico"

src/assets/constant.scss

@@ -8,6 +8,7 @@
   --light-primary-color: blue; //CSS 自定义属性（变量）
 }
 
+$video-ratio: calc(16 / 9);
 $w-1500: 1500px;
 $w-1475: 1475px;
 $w-1450: 1450px;
@@ -22,6 +23,7 @@ $w-1150: 1150px;
 $w-1100: 1100px;
 $w-1000: 1000px;
 $w-960: 960px;
+$w-900: 900px;
 
 $w-350: 350px;
 $w-300: 300px;

src/layout/mobile/index.vue

@@ -9,6 +9,12 @@
 
 <script lang="ts" setup>
 import HeadCpt from './head/index.vue';
+
+const metaEl = document.querySelector('meta[name="viewport"]');
+metaEl?.setAttribute(
+  'content',
+  'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'
+);
 </script>
 
 <style lang="scss" scoped></style>

src/layout/pc/head/index.vue

@@ -89,7 +89,7 @@
               :key="index"
               :href="item.url"
               class="item"
-              @click="handleJump(item)"
+              @click.prevent="handleJump(item)"
             >
               <div class="txt">{{ item.label }}</div>
               <VPIconExternalLink
@@ -104,7 +104,7 @@
               :key="index"
               class="item"
               :href="item.url"
-              @click="handleJump(item)"
+              @click.prevent="handleJump(item)"
             >
               <div class="txt">{{ item.label }}</div>
               <VPIconExternalLink
@@ -375,15 +375,21 @@ function handleStartLive(key: liveTypeEnum) {
 
 <style lang="scss" scoped>
 .head-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  box-sizing: border-box;
   padding: 0 30px;
-  min-width: $w-1300;
+  min-width: $w-1100;
   height: 64px;
   background-color: #fff;
   box-shadow: inset 0 -1px #f1f2f3 !important;
   font-size: 14px;
+  width: 100%;
   .hr {
     width: 100%;
     height: 1px;

src/layout/pc/index.vue

@@ -13,10 +13,13 @@
 import HeadCpt from './head/index.vue';
 import ModalCpt from './modal/index.vue';
 import SidebarCpt from './sidebar/index.vue';
+
+document.body.style.minWidth = '1200px';
 </script>
 
 <style lang="scss" scoped>
 .layout {
   min-height: 100vh;
+  padding-top: 64px;
 }
 </style>

src/views/home/index.vue

@@ -122,7 +122,7 @@
         </div>
       </div>
     </div>
-    <div class="area-container">
+    <!-- <div class="area-container">
       <div class="area-item">
         <div class="title">推荐直播</div>
         <div class="live-room-list">
@@ -158,7 +158,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <div class="foot">*部分内容来源网络，如有侵权，请联系我删除~</div>
   </div>
@@ -355,17 +355,21 @@ function joinHlsRoom() {
     }
     .container {
       display: flex;
-      justify-content: space-between;
+      box-sizing: border-box;
       margin: 0 auto;
       padding: 15px 0;
-      width: $w-1350;
+      justify-content: center;
+      height: calc($w-1100 / $video-ratio);
+
       .left {
         position: relative;
         display: inline-block;
         overflow: hidden;
         box-sizing: border-box;
+        flex-shrink: 0;
+        margin-right: 20px;
         width: $w-1100;
-        height: 618px;
+        height: 100%;
         border-radius: 4px;
         background-color: rgba($color: #000000, $alpha: 0.3);
 
@@ -462,11 +466,12 @@ function joinHlsRoom() {
         }
       }
       .right {
+        flex-shrink: 0;
         display: inline-block;
         overflow: scroll;
         box-sizing: border-box;
-        padding: 12px;
-        height: 618px;
+        padding: 12px 10px;
+        height: 100%;
         border-radius: 4px;
         background-color: rgba($color: #000000, $alpha: 0.3);
 
@@ -560,6 +565,8 @@ function joinHlsRoom() {
   .area-container {
     margin: 10px auto;
     width: $w-1350;
+    box-sizing: border-box;
+
     .area-item {
       .title {
         padding: 10px 0;
@@ -633,23 +640,22 @@ function joinHlsRoom() {
   }
 }
 
-// 屏幕宽度大于1500的时候
-@media screen and (min-width: $w-1500) {
+// 屏幕宽度小于1330的时候
+@media screen and (max-width: 1330px) {
   .home-wrap {
     .play-container {
       .container {
-        width: $w-1350;
+        height: calc($w-900 / $video-ratio);
+
         .left {
-          width: $w-1100;
-          height: 618px;
+          width: $w-900;
         }
         .right {
-          height: 618px;
         }
       }
     }
     .area-container {
-      width: $w-1350;
+      width: $w-1200;
     }
   }
 }

src/views/support/index.vue

@@ -11,7 +11,7 @@ import router, { routerName } from '@/router';
 onMounted(() => {
   router.push({
     name: routerName.shop,
-    query: { goodsType: GoodsTypeEnum.sponsors },
+    query: { goodsType: GoodsTypeEnum.support },
   });
 });
 </script>