main page footer mobile compatible

src/store/modules/kungalgamer.ts

@@ -14,7 +14,7 @@ export const useKUNGalgamerStore = defineStore({
   persist: true,
   state: (): UserState => ({
     id: ref<number>(0),
-    token: ref<string>(''),
+    token: ref<string>('KUNGalgamer'),
     roles: ref<string>(''),
   }),
   getters: {},

src/views/Home/content/MainPageContent.vue

@@ -62,7 +62,7 @@ const width = computed(() => {
     display: none;
   }
   .content-container {
-    width: 70%;
+    width: 80%;
     border: none;
     background-color: var(--kungalgame-trans-white-9);
   }
@@ -73,7 +73,7 @@ const width = computed(() => {
     display: none;
   }
   .content-container {
-    width: 95%;
+    width: 100%;
     border: none;
     background-color: var(--kungalgame-trans-white-9);
   }

src/views/Home/footer/components/KUNGalgameInfo.vue

@@ -18,9 +18,9 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
         <!-- 左侧下方的信息 -->
         <div class="bottom">
           <!-- 联系方式 -->
-          <Contacts />
+          <Contacts class="contacts" />
           <!-- 版权描述,版本号 -->
-          <KUNGalgameFooter style="margin: 0 auto" />
+          <KUNGalgameFooter class="footer" />
         </div>
       </div>
 
@@ -58,9 +58,21 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   flex-direction: column;
 }
 
+.footer {
+  margin: 0 auto;
+}
+
 @media (max-width: 1000px) {
-  .top {
+  .contacts {
-    display: none;
+    margin: 20px 0;
+    width: 100%;
+    justify-content: center;
+  }
+  .footer {
+    margin: 20px 0;
+  }
+  .container {
+    flex-direction: column;
   }
 }
 </style>

src/views/Home/footer/components/List.vue

@@ -7,6 +7,7 @@ interface FooterInfoItem {
 
 interface FooterInfo {
   index: number
+  mobile?: string
   title: string
   list: FooterInfoItem[]
 }
@@ -15,6 +16,7 @@ const info: FooterInfo[] = [
   {
     index: 1,
     title: `communicate`,
+    mobile: 'mobile',
     list: [
       {
         index: 1,
@@ -94,7 +96,13 @@ const link: FooterInfoItem[] = [
 <template>
   <div class="info">
     <!-- 非 galgame 交流 -->
-    <div class="catalog" v-for="kun in info" :key="kun.index">
+    <!-- 这里为了适配手机端,带有 mobile 属性的节点将会媒体查询时被隐藏 -->
+    <div
+      class="catalog"
+      v-for="kun in info"
+      :key="kun.index"
+      :class="kun.mobile"
+    >
       <!-- 每个信息类别的标题 -->
       <h2>
         <span>{{ $t(`mainPage.footer.title['${kun.title}']`) }}</span>
@@ -148,4 +156,10 @@ const link: FooterInfoItem[] = [
     }
   }
 }
+
+@media (max-width: 1000px) {
+  .mobile {
+    display: none;
+  }
+}
 </style>

src/views/login/Login.vue

@@ -11,6 +11,7 @@ import { useKUNGalgameMessageStore } from '@/store/modules/message'
 const info = useKUNGalgameMessageStore()
 
 const isShowPanel = ref('')
+
 const loginForm = reactive({
   username: '',
   password: '',