单屏与自适应

src/router/index.ts

@@ -2,8 +2,16 @@ import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
 const routes = [
     {
         path: '/',
+        component: () => import('@/views/auto/index.vue'),
+    },
+    {
+        path: '/pc',
+        component: () => import('@/views/pc/index.vue'),
+    },
+    {
+        path: '/screen',
         component: () => import('@/views/screen/index.vue'),
-    }
+    },
 ]
 
 const router = createRouter({

src/views/auto/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="auto-main">
+    <Component :is="comIs"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  nextTick,
+  onMounted,
+  watch,
+  computed,
+  ComponentInternalInstance,
+  reactive,
+  toRefs,
+  getCurrentInstance
+} from 'vue'
+import PcCom from '../pc/index.vue'
+import ScreenCom from '../screen/index.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {},
+  setup() {
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      comIs: PcCom
+    });
+    onMounted(() => {
+      console.log(document.body.clientWidth)
+      if (document.body.clientWidth <= 2000) {
+        state.comIs = PcCom
+      } else {
+        state.comIs = ScreenCom
+      }
+      window.onresize = (e) => {
+        if (e?.target?.innerWidth <= 2000) {
+          state.comIs = PcCom
+        } else {
+          state.comIs = ScreenCom
+        }
+      }
+    })
+    return {
+      ...toRefs(state),
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/common/static.ts

@@ -9,9 +9,9 @@ import InfoSub5 from './img/info-sub-5.png'
 import InfoSub6 from './img/info-sub-6.png'
 import InfoMain1 from './img/info-main-1.jpg'
 import InfoMain2 from './img/info-main-2.jpg'
-import InfoMain3 from './img/info-main-3.jpg'
+import InfoMain3 from './img/info-main-3.png'
 import InfoMain4 from './img/info-main-4.jpg'
-import InfoMain5 from './img/info-main-5.jpg'
+import InfoMain5 from './img/info-main-5.png'
 
 export const bgImgMapper = [BgImg1, BgImg2, BgImg3]
 

src/views/pc/index.vue

@@ -48,6 +48,7 @@
           </div>
         </div>
       </template>
+      <div class="pc-href-after-block"/>
     </div>
     <div v-show="showInfo" class="info-dialog animate__animated animate__fadeInRight" ref="ref_infoDialog">
       <img :src="infoCurrent"/>
@@ -257,31 +258,37 @@ export default defineComponent({
         margin: 0 22px 0 10px;
       }
     }
+    $pcHrefRight: 100px;
+    $pcHrefItemWidth: 264px;
     .pc-href {
       //opacity: 0.8;
       z-index: 2;
       position: absolute;
       bottom: 0;
-      right: 110px;
+      right: $pcHrefRight;
       box-sizing: border-box;
       display: grid;
-      grid-template-columns: repeat(5, calc((100% - 22px * 4) / 5));
-      column-gap: 22px;
+      grid-template-columns: repeat(5, $pcHrefItemWidth);
+      column-gap: 2px;
       $skewXDeg: -30deg;
       transform: skewX($skewXDeg);
+      background-color: #234382;
       .pc-href-before-block {
         position: absolute;
-        background-color: #395587;
+        background-color: rgba(57, 85, 135, 0.8);
         width: 80px;
-        height: 280px;
+        height: 255px;
         left: -80px;
         bottom: 0;
       }
       .pc-href-block {
         width: 100%;
+        height: 332px;
+        $pcHrefBlockHeadHeight: 45px;
         .pc-href-block-head {
           position: relative;
           transform: skewX(-$skewXDeg);
+          white-space: nowrap;
           &:after {
             content: '';
             position: absolute;
@@ -293,27 +300,30 @@ export default defineComponent({
             z-index: -1;
             transform: skewX($skewXDeg);
           }
-          height: 45px;
-          font-size: 16px;
+          height: $pcHrefBlockHeadHeight;
+          font-size: 24px;
           font-weight: 400;
           color: #82D6FF;
           display: flex;
           align-items: center;
-          margin-bottom: 10px;
           >img {
             &:first-child {
               margin: 0 11px 0 17px;
             }
             &:last-child {
-              margin: 0 1px 0 auto;
+              position: absolute;
+              right: -100px;
             }
           }
         }
         .pc-href-block-content {
+          height: calc(100% - #{$pcHrefBlockHeadHeight});
+          box-sizing: border-box;
           background-color: #031336;
-          padding: 20px;
+          padding: 10px 16px;
           display: grid;
           grid-template-columns: repeat(1, 100%);
+          grid-template-rows: repeat(5, calc((100% - (10px * 4)) / 5));
           row-gap: 10px;
           .phbc-item {
             position: relative;
@@ -329,10 +339,9 @@ export default defineComponent({
               z-index: -1;
               transform: skewX($skewXDeg);
             }
-            font-size: 16px;
+            font-size: 20px;
             font-weight: normal;
             color: #FFFFFF;
-            height: 48px;
             display: flex;
             align-items: center;
             >img {
@@ -346,12 +355,22 @@ export default defineComponent({
           }
         }
       }
+      .pc-href-after-block {
+        z-index: -1;
+        transform: skewX(-$skewXDeg);
+        position: absolute;
+        background-color: rgba(3, 19, 54, 0.7);
+        width: $pcHrefItemWidth;
+        height: 100%;
+        right: -$pcHrefRight;
+        bottom: 0;
+      }
     }
     $infoItemActiveWidth: 1425px;
     .info-dialog {
       z-index: 2;
       position: absolute;
-      top: 172px;
+      top: 160px;
       height: 674px;
       display: flex;
       left: calc((100% - #{$infoItemActiveWidth}) / 2);

src/views/screen/index.vue

@@ -370,6 +370,9 @@ export default defineComponent({
       .info-item-active {
         width: 1425px;
         height: 100%;
+        >img {
+          width: 100%;
+        }
       }
       .info-item {
         width: 350px;