feat: mobile layout v0

open-isle-cli/src/assets/global.css

@@ -19,6 +19,7 @@
   --text-color: black;
   --menu-width: 200px;
   --page-max-width: 1200px;
+  --page-max-width-mobile: 768px;
   --article-info-background-color: #f0f0f0;
 }
 

open-isle-cli/src/components/HeaderComponent.vue

@@ -227,4 +227,22 @@ export default {
   background-color: var(--menu-selected-background-color);
 }
 
+@media (max-width: 1200px) {
+  .header-content {
+    padding-left: 15px;
+    padding-right: 15px;
+    width: calc(100% - 30px);
+  }
+}
+
+@media (max-width: 768px) {
+  .header-content-item-secondary {
+    display: none;
+  }
+
+  .logo-text {
+    display: none;
+  }
+}
+
 </style>

open-isle-cli/src/components/MenuComponent.vue

@@ -17,12 +17,7 @@
           <i class="menu-item-icon fas fa-info-circle"></i>
           <span class="menu-item-text">关于</span>
         </router-link>
-        <router-link
-          v-if="shouldShowStats"
-          class="menu-item"
-          exact-active-class="selected"
-          to="/about/stats"
-        >
+        <router-link v-if="shouldShowStats" class="menu-item" exact-active-class="selected" to="/about/stats">
           <i class="menu-item-icon fas fa-chart-line"></i>
           <span class="menu-item-text">站点统计</span>
         </router-link>
@@ -63,7 +58,8 @@
           <div v-else v-for="t in tags" :key="t.id" class="section-item" @click="gotoTag(t)">
             <img v-if="isImageIcon(t.smallIcon || t.icon)" :src="t.smallIcon || t.icon" class="section-item-icon" />
             <i v-else class="section-item-icon fas fa-hashtag"></i>
-            <span class="section-item-text">{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span>
+            <span class="section-item-text">{{ t.name }} <span class="section-item-text-count">x {{ t.count
+                }}</span></span>
           </div>
         </div>
       </div>
@@ -327,20 +323,32 @@ export default {
   padding: 10px;
 }
 
-/*
-.slide-enter-active, .slide-leave-active {
-  transition: 
-    transform 0.3s ease,
-    opacity 0.3s ease,
-    width 0.3s ease;
+
+@media (max-width: 768px) {
+  .menu {
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+  }
+
+  .slide-enter-active,
+  .slide-leave-active {
+    transition:
+      transform 0.3s ease,
+      opacity 0.3s ease,
+      width 0.3s ease;
+  }
+
+  .slide-enter-from,
+  .slide-leave-to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  .slide-enter-to,
+  .slide-leave-from {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
-.slide-enter-from, .slide-leave-to {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-.slide-enter-to, .slide-leave-from {
-  transform: translateX(0);
-  opacity: 1;
-}
-  */
 </style>

open-isle-cli/src/views/HomePageView.vue

@@ -527,4 +527,12 @@ export default {
   font-size: 14px;
   opacity: 0.7;
 }
+
+@media (max-width: var(--page-max-width)) {
+
+}
+
+@media (max-width: var(--page-max-width-mobile)) {
+
+}
 </style>