improve mobile user experience

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

Author: ZTL-UwU

src/components/user/content.vue

@@ -15,53 +15,85 @@
       <el-row :gutter="20">
         <el-col :span="18">
           <el-card shadow="never">
-            <div slot="header" class="clearfix"><i class="el-icon-user" /> User Name</div>
+            <div slot="header" class="clearfix">
+              <i class="el-icon-user" />
+              <div class="lable"> User</div>
+              Name
+            </div>
             {{username}}
           </el-card>
         </el-col>
         <el-col :span="6">
           <el-card shadow="never">
-            <div slot="header" class="clearfix"><i class="el-icon-warning-outline" /> User ID</div>
+            <div slot="header" class="clearfix"><i class="el-icon-warning-outline" />
+              <div class="lable"> User</div>
+              ID
+            </div>
             {{userid}}
           </el-card>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix"><i class="el-icon-message" /> Email</div>
+            <div slot="header" class="clearfix">
+              <i class="el-icon-message" />Email
+            </div>
             {{email}}
           </el-card>
         </el-col>
         <el-col :span="6">
           <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix"><i class="el-icon-date" /> Time Joined</div>
+            <div slot="header" class="clearfix">
+              <i class="el-icon-date" />
+              <div class="lable"> Time Joined</div>
+            </div>
             {{timeJoin}}
           </el-card>
         </el-col>
         <el-col :span="6">
           <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix"><i class="el-icon-time" /> Last Login</div>
+            <div slot="header" class="clearfix">
+              <i class="el-icon-time" />
+              <div class="lable"> Last Login</div>
+            </div>
             {{lastLogin}}
           </el-card>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="8">
           <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix"><i class="el-icon-check" /> Sloved</div>
-            {{solved}} Problems
+            <div slot="header" class="clearfix">
+              <i class="el-icon-check" />
+              <div class="lable"> Sloved</div>
+              <div class="small-lable"> AC</div>
+            </div>
+            <div class="clearfix">
+              {{solved}}
+              <div class="lable"> Problems</div>
+            </div>
           </el-card>
         </el-col>
         <el-col :span="8">
           <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix"><i class="el-icon-upload2" /> Submited</div>
-            {{submit}} Times
+            <div slot="header" class="clearfix"><i class="el-icon-upload2" />
+              <div class="lable"> Submited</div>
+              <div class="small-lable"> SU</div>
+            </div>
+            <div class="clearfix">
+              {{submit}}
+              <div class="lable"> Times</div>
+            </div>
           </el-card>
         </el-col>
         <el-col :span="8">
           <el-card shadow="never" class="item">
-            <div slot="header" class="clearfix"><i class="el-icon-finished" /> AC Rate</div>
+            <div slot="header" class="clearfix">
+              <i class="el-icon-finished" />
+              <div class="lable"> AC</div>
+              Rate
+            </div>
             <el-progress :text-inside="true" :stroke-width="24" :percentage="rate" status="success" :color="ACRateColorMode"></el-progress>
           </el-card>
         </el-col>
@@ -104,7 +136,7 @@ export default {
       isRoot: false,
       isStaff: false,
       isActive: true,
-      avatarWidth: 440 < screen.width ? 400 : screen.width - 40
+      avatarWidth: 800 < screen.width ? 300 : screen.width - 40
     };
   },
   methods: {
@@ -164,6 +196,14 @@ export default {
 </script>
 
 <style scoped>
+.small-lable {
+    display: none;
+}
+
+.clearfix {
+    display: block ruby;
+}
+
 .item {
     margin-top: 20px;
 }
@@ -187,5 +227,13 @@ export default {
         margin-top: 20px;
         max-width: 100vw;
     }
+
+    .lable {
+        display: none;
+    }
+
+    .small-lable {
+        display: unset;
+    }
 }
 </style>