feat:移动端适配style

JX3BOX · Nov 9, 2024 · 53a8e01 · 53a8e01
1 parent 8f4fad9
commit 53a8e01
Show file tree

Hide file tree

Showing 5 changed files with 337 additions and 19 deletions.
diff --git a/src/assets/css/wiki/index.less b/src/assets/css/wiki/index.less
@@ -4,9 +4,11 @@
     align-items: center;
     position: relative;
     width: 100%;
-    min-height: calc(100vh - 64px);
-    margin-top: 64px;
+    .h(100vh);
+    // min-height: calc(100vh - 64px);
+    // margin-top: 64px;
     padding-bottom: 64px;
+    box-sizing: border-box;
     background: url(~@/assets/img/wiki/overview/bg.png),
         linear-gradient(152.57deg, rgba(150, 128, 87, 1) 0%, rgba(87, 75, 65, 1) 27.78%, rgba(0, 0, 0, 1) 100%);
     background-size: cover;
@@ -21,8 +23,18 @@
         background: url(~@/assets/img/wiki/overview/bamboo.svg) no-repeat;
         background-size: cover;
     }
+    &.is_mobile {
+        .pb(0);
+        align-items: flex-start;
+        &::after {
+            display: none;
+        }
+    }
 }
 
 .m-achievement-content {
     margin-left: 64px;
+    &.is_mobile {
+        margin-left: 0;
+    }
 }
diff --git a/src/components/wiki/sidebar.vue b/src/components/wiki/sidebar.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="m-achievement-sidebar">
-        <img class="" src="@/assets/img/wiki/overview/title.svg" alt="" />
+    <div class="m-achievement-sidebar" :class="{ is_mobile: mobile }">
+        <img class="u-title_img" src="@/assets/img/wiki/overview/title.svg" alt="" />
         <ul class="m-sidebar-nav">
             <li class="active">
                 <router-link
@@ -11,13 +11,9 @@
                 >
                 <ul>
                     <li>
-                        <router-link
-                            class="is-child"
-                            :to="{
-                                name: 'overview',
-                            }"
-                            >总览</router-link
-                        >
+                        <router-link class="is-child" :to="{ name: 'overview' }">{{
+                            viewAchievementsName ? viewAchievementsName + "资历" : "总览"
+                        }}</router-link>
                     </li>
                 </ul>
             </li>
@@ -44,7 +40,7 @@
                 >
             </li>
         </ul>
-        <a class="u-wiki-btn" href="/cj">
+        <a class="u-wiki-btn" href="/cj" v-show="!mobile">
             <p class="u-text">
                 已收录资历点：<span>{{ count }}</span>
             </p>
@@ -62,6 +58,16 @@ export default {
             count: 0,
         };
     },
+    computed: {
+        mobile() {
+            const userAgent = navigator.userAgent.toLowerCase();
+            const mobileKeywords = ["android", "iphone", "ipad", "ipod", "windows phone"];
+            return mobileKeywords.some((keyword) => userAgent.includes(keyword));
+        },
+        viewAchievementsName() {
+            return this.$store.state.viewAchievementsName;
+        },
+    },
     created() {
         // 获取成就统计信息
         getAchievementsTotal().then((data) => {
@@ -134,5 +140,15 @@ export default {
             }
         }
     }
+    &.is_mobile {
+        .w(137px);
+        .h(calc(100vh - 120px));
+        .pl(20px);
+        .pt(52px);
+        box-sizing: border-box;
+        .u-title_img {
+            .w(50px);
+        }
+    }
 }
 </style>
diff --git a/src/router/wiki.js b/src/router/wiki.js
@@ -5,6 +5,12 @@ import VueRouter from "vue-router";
 Vue.use(VueRouter);
 
 const routes = [
+    {
+        name: "wiki",
+
+        path: "/",
+        redirect: "/achievement/overview",
+    },
     {
         name: "overview",
         path: "/achievement/overview",

diff --git a/src/views/wiki/index.vue b/src/views/wiki/index.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <Header></Header>
-        <div class="m-achievement-main">
+        <!-- <Header></Header> -->
+        <div class="m-achievement-main" :class="{ is_mobile: mobile }">
             <SideBar />
-            <div class="m-achievement-content">
+            <div class="m-achievement-content" :class="{ is_mobile: mobile }">
                 <router-view></router-view>
             </div>
         </div>
@@ -18,7 +18,13 @@ export default {
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        mobile() {
+            const userAgent = navigator.userAgent.toLowerCase();
+            const mobileKeywords = ["android", "iphone", "ipad", "ipod", "windows phone"];
+            return mobileKeywords.some((keyword) => userAgent.includes(keyword));
+        },
+    },
     watch: {},
     methods: {},
     mounted() {},