pref: user page adjust mobile

src/views/kungalgamer/components/Avatar.vue

@@ -98,8 +98,12 @@ const handleChangeAvatar = () => {
 
       <!-- 帮助区域 -->
       <div class="help">
-        <p>拖拽图片到方框内或点击方框上传</p>
-        <div>支持 1007KB 以内的图片，支持 jpg 和 png 格式</div>
+        <p class="hint">拖拽图片到方框内或点击方框上传</p>
+        <div class="support">
+          <span>支持 1007KB 以内的图片</span>
+          <br />
+          <span>支持 jpg 和 png 格式</span>
+        </div>
         <button @click="handleChangeAvatar">确定更改</button>
       </div>
     </div>
@@ -202,4 +206,17 @@ const handleChangeAvatar = () => {
     }
   }
 }
+.support {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 700px) {
+  .help {
+    padding: 0 10px;
+  }
+  .hint {
+    display: none;
+  }
+}
 </style>

src/views/kungalgamer/components/NavBar.vue

@@ -89,4 +89,11 @@ onMounted(() => {
     color: var(--kungalgame-white);
   }
 }
+
+@media (max-width: 700px) {
+  .nav {
+    width: 60px;
+    font-size: small;
+  }
+}
 </style>

src/views/kungalgamer/content/Password.vue

@@ -141,16 +141,16 @@ onMounted(async () => {
     <div class="password">
       <div class="title">更改密码:</div>
       <div class="input">
-        <span>请输入您的旧密码: </span
-        ><input v-model="input.oldPassword" type="password" />
+        <span>请输入您的旧密码: </span>
+        <input v-model="input.oldPassword" type="password" />
       </div>
       <div class="input">
-        <span>请输入您的新密码: </span
-        ><input v-model="input.newPassword" type="password" />
+        <span>请输入您的新密码: </span>
+        <input v-model="input.newPassword" type="password" />
       </div>
       <div class="input">
-        <span>请再次输入新密码: </span
-        ><input v-model="input.repeatPassword" type="password" />
+        <span>请再次输入新密码: </span>
+        <input v-model="input.repeatPassword" type="password" />
       </div>
 
       <div class="btn">
@@ -222,4 +222,18 @@ onMounted(async () => {
     }
   }
 }
+
+@media (max-width: 700px) {
+  .article {
+    font-size: small;
+  }
+  .title {
+    font-size: medium;
+  }
+  .input {
+    span {
+      margin-right: 5px;
+    }
+  }
+}
 </style>