improve mobile user experience

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>

Author: ZTL-UwU

src/components/page/navbar.vue

@@ -11,9 +11,17 @@
         text-color="#fff"
         active-text-color="rgb(233, 233, 235)"
       >
-        <el-menu-item index=""><img src="./../../assets/icon/SOJ-thick-white.png" style="height: 40px;" /></el-menu-item>
-        <el-menu-item index="/"><i class="el-icon-s-home" /> Home</el-menu-item>
-        <el-menu-item index="/problem/list"><i class="el-icon-s-order" />Problem List</el-menu-item>
+        <el-menu-item index="" @click="$router.push('/')">
+          <img src="./../../assets/icon/SOJ-thick-white.png" style="height: 40px;" />
+        </el-menu-item>
+        <el-menu-item index="/" class="webkit-box">
+          <i class="el-icon-s-home" />
+          <div class="lable"> Home</div>
+        </el-menu-item>
+        <el-menu-item index="/problem/list" class="webkit-box">
+          <i class="el-icon-s-order" /> 
+          <div class="lable"> Problem List</div>
+        </el-menu-item>
         <el-submenu index="2" id="user">
           <template slot="title">
               <el-avatar shape="square">
@@ -53,7 +61,13 @@ export default {
 };
 </script>
 
-<style lang="css" scoped>
+<style scoped>
+@media only screen and (max-width: 500px) {
+    .lable {
+        display: none;
+    }
+}
+
 #nav {
     z-index: 1000;
     background-color: #545c64;
@@ -81,4 +95,8 @@ export default {
 #user_icon {
     height: 50%;
 }
+
+.webkit-box {
+    display: -webkit-box;
+}
 </style>

src/components/problem/content.vue

@@ -43,7 +43,7 @@
                 <el-menu-item index="2-2">Settings</el-menu-item>
               </el-submenu>
             </el-menu>
-            <el-button @click="$router.push('/problem/list');" class="margin-top">Back</el-button>
+            <el-button @click="$router.push('/problem/list');" class="margin-top-small">Back</el-button>
           </el-card>
         </div>
         <div id="info">
@@ -197,10 +197,14 @@ export default {
         right: 30px;
     }
 
-    #pannel:hover {
+    #pannel:active {
         z-index: 1000;
         opacity: 1;
     }
+
+    #info {
+        display: none;
+    }
 }
 
 .el-menu {
@@ -255,7 +259,7 @@ export default {
     color: #606266;
 }
 
-.margin-top {
+.margin-top-small {
     margin-top: 10px;
 }
 </style>

src/components/user/content.vue

@@ -1,8 +1,10 @@
 <template>
   <div id="user-content">
-    <div>
+    <div id="tool">
       <el-card shadow="never">
-        <el-avatar shape="square" :size="400"><img src="./../../assets/icon/SOJ-thick-white-background.png" /></el-avatar>
+        <el-avatar shape="square" :size="this.avatarWidth">
+          <img src="./../../assets/icon/SOJ-thick-white-background.png" />
+        </el-avatar>
       </el-card>
       <el-card class="item">
         <el-button v-if="ismine" type="primary" @click="$router.push('/account/' + $route.params.id + '/edit');">Edit</el-button>
@@ -101,7 +103,8 @@ export default {
       userLoading: true,
       isRoot: false,
       isStaff: false,
-      isActive: true
+      isActive: true,
+      avatarWidth: 440 < screen.width ? 400 : screen.width - 40
     };
   },
   methods: {
@@ -173,4 +176,16 @@ export default {
 #user-content {
     display: flex;
 }
+
+@media only screen and (max-width: 800px) {
+    #user-content {
+        display: inline;
+    }
+
+    #info {
+        margin-left: 0px;
+        margin-top: 20px;
+        max-width: 100vw;
+    }
+}
 </style>

src/components/user/login.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
-    <el-dialog title="Login" :visible.sync="$store.state.user.showlogin" :destroy-on-close="true" :close-on-click-modal="false" width="500px">
+    <el-dialog
+      title="Login"
+      :visible.sync="$store.state.user.showlogin"
+      :destroy-on-close="true"
+      :close-on-click-modal="false"
+      width="500px"
+      class="max-screen"
+      >
       <el-form :model="ldata" ref="loginForm" :rules="rules">
         <div class="icon-lable"><i class="el-icon-user" /> Username</div>
         <el-form-item prop="username">