整理个人主页不对的，或未完善的地方

src/components/HomePage/homePage.vue

@@ -1,67 +1,67 @@
 <template>
     <div class="uc-header">
-      <div class="header-box" >
+      <div class="uc-header-box" >
         <div class="personalData">
            <!-- <div >
              <img src="../../../public/images/Avatarwoman.png" alt="">
            </div> -->
             <div class="uesr-avaer">
-            <img :src="fileBaseUrl+userData.data.avatar" v-if="userData.data.avatar !== '' ">
+            <img :src="fileBaseUrl+userData.avatar" v-if="userData.avatar !== '' ">
             <div v-else class="uavatar">
-                <div v-if="userData.data.sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
+                <div v-if="userData.sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
                 <div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
             </div>
              </div>
-  
+
            <div class="user-content">
               <div class="content-top">
-                <h6 content-bottom><router-link to="/home/index"> {{userData.data.name}}</router-link>
+                <h6 content-bottom><router-link to="/home/index"> {{userData.name}}</router-link>
                  </h6>
                  <div class="grade">
-                     <div>{{userData.level}}</div>
-                     <span style="color: #A3680A;margin-left:12px;line-height: 24px;">经验值：{{userData.evalue}}</span>
+                     <div>{{statData.level}}</div>
+                     <span style="color: #A3680A;margin-left:12px;line-height: 24px;">经验值：{{statData.evalue}}</span>
                  </div>
                  <el-button round plain class="btn-user" size="small" v-if="pageId != userInfo.aid && !isFollowHas" @click="toFollow()">关注TA</el-button>
                  <el-button round plain class="btn-user" size="small" v-if="isFollowHas">已关注</el-button>
                  <el-button round plain class="btn-user" size="small"><router-link :to="'/home/leaving?id='+pageId">去留言</router-link></el-button>
               </div>
               <div class="content-bottom">
-                <p class="portal-summary-text">{{userData.data.sign}}</p>
+                <p class="portal-summary-text">{{userData.sign}}</p>
               </div>
-              
+
            </div>
         </div>
         <div class="learningData">
           <div class="learning-info">
              <div class="learning-qus">当月学习时长</div>
-             <div class="learning-an"><span>{{uinfo.monthStudy}}</span>h</div>
+             <div class="learning-an"><span>{{statData.monthStudyHour}}</span>h</div>
           </div>
            <div class="learning-info">
              <div class="learning-qus">累计学习时长</div>
-             <div class="learning-an"><span>{{uinfo.monthTotal}}</span>h</div>
+             <div class="learning-an"><span>{{statData.totalStudyHour}}</span>h</div>
           </div>
           <div class="learning-border" ></div>
            <div class="learning-info" style="margin-left:22px">
              <div class="learning-qus">当月学习天数</div>
-             <div class="learning-an"><span>{{uinfo.monthDay}}</span>天</div>
+             <div class="learning-an"><span>{{statData.monthStudyDays}}</span>天</div>
           </div>
            <div class="learning-info">
              <div class="learning-qus">累计学习天数</div>
-             <div class="learning-an"><span>{{uinfo.monthTotalDay}}</span>天</div>
+             <div class="learning-an"><span>{{statData.totalStudyDays}}</span>天</div>
           </div>
            <div class="learning-border" ></div>
            <div class="learning-info" style="margin-left:22px">
              <div class="learning-qus">我的U币（累计）</div>
-             <div class="learning-an"><span>{{uinfo.uCurrency}}</span></div>
+             <div class="learning-an"><span>{{statData.uvalue}}</span></div>
           </div>
-          <div class="list">
-            BOE 排行榜 >>
+          <div class="learning-info">
+              <div @click="jumrank" style="cursor: pointer;" class="ranking-link"> BOE 排行榜 >></div>
           </div>
         </div>
       </div>
     </div>
   </template>
-  
+
   <script>
   import {userAvatarText,cutFullName} from "@/utils/tools.js";
     import { mapGetters } from 'vuex'
@@ -79,21 +79,20 @@
       data(){
         return {
           fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
-          uinfo:{
-            monthStudy:0,//当月学习时长
-            monthTotal: 0,
-            monthDay:0,
-            monthTotalDay:0,
-            uCurrency:0
+          statData:{
+            evalue: 0,//经验值
+            level: "LV1",//级别
+            monthStudyHour:0,//当月学习时长
+            totalStudyHour: 0, //累计学习时长
+            monthStudyDays:0, //当月学习天数
+            totalStudyDays:0, //累计学习天数
+            uvalue:0 //U币数量
           },
           orgInfo:'',
           sex:'',
           pageId:'',
           isFollowHas:false,
           userData:{
-            evalue: 0,
-            level: "",
-            data:{
               aid: "",
               avatar: "",
               code: "",
@@ -101,40 +100,44 @@
               orgInfo: "",
               sex: 2,
               sign: "",
-            }
-           
           }
         }
       },
       mounted() {
         this.pageId = this.$route.query.id;
-         this.sex = this.userInfo.sex;
+        this.sex = this.userInfo.sex;
         // 判断路由是进入的学员默认页面就重置setCurIdentity
         if(this.$route.path == '/uc/study/task' || this.$route.path == '/study/index'){
           this.setCurIdentity(1);
         }
         this.orgInfo=cutFullName(this.userInfo.departFullName,1);
-        this.getInfo();
-        this.getLevel();
+       
+        this.loadUserStat();
         if(this.pageId !== this.userInfo.aid) {
           this.followHas();
         }
       },
       methods:{
-        getLevel(){//获取经验值和等级
-          apiStart.getUserStatTotalInfo(this.pageId).then(res=>{
-            if(res.status == 200) {
-               this.userData.evalue = res.result.experienceValue;
-               this.userData.level = res.result.level;
-            }
-          });
-          apiUser.getByIds([this.pageId]).then(res => {
-              if (res.status == 200) {
-                 this.userData.data = res.result[0];
-              } else {
-                 this.$message.error(res.message);
+        loadUserStat(){//获取经验值和等级
+            apiUser.getByIds([this.pageId]).then(res => {
+                if (res.status == 200) {
+                   this.userData = res.result[0];
+                } else {
+                   this.$message.error(res.message);
+                }
+            });
+            apiStart.getUserStatTotalInfo(this.userInfo.aid).then(res=>{
+              if(res.status == 200) {
+                 this.statData.evalue = res.result.evalue;
+                 this.statData.level = res.result.level;
+                 this.statData.monthStudyHour = res.result.monthStudyHour;
+                 this.statData.totalStudyHour = res.result.totalStudyHour;
+                 this.statData.monthStudyDays = res.result.monthStudyDays;
+                 this.statData.totalStudyDays = res.result.totalStudyDays;
+                 this.statData.uvalue = res.result.uvalue;
+                 this.medalList=res.result.medalList;
               }
-          });
+            });
         },
         followHas() {//他人主页，判断关注状态
           apiFollow.has(this.pageId).then(res=>{
@@ -155,36 +158,42 @@
             }
           })
         },
-        getInfo(){
-          apiStart.userTotal(this.userInfo.aid,[10,11,30]).then(res=>{
-             if(res.status == 200 && res.result.length > 0) {
-              res.result.forEach(item => {
-                if(item.statType == 10) {
-                  this.uinfo.monthStudy = item.months;
-                  this.uinfo.monthTotal = item.total;
-                }
-                if(item.statType == 11) {
-                  this.uinfo.monthDay = item.months;
-                  this.uinfo.monthTotalDay = item.total;
-                }
-                if(item.statType == 30) {
-                  this.uinfo.uCurrency = item.todays;
-                }
-              });
-             } 
-          })
-        },
         setCurIdentity(iden){
           this.$store.dispatch('SetCurIdentity',iden);
         },
+        jumrank(){
+          this.$router.push('/user/ranking');
+        },
         toPage(url){
           this.$router.push({path:url})
         },
       }
     }
   </script>
-  
-  <style lang="scss" scoped>
+
+<style lang="scss" scoped>
+  .ranking-link{
+    font-size: 16px;
+    font-weight: 600;
+    color: #333333;
+    margin-top: 20px;
+  }
+  .uc-header{
+    display: flex;
+    justify-content: space-between;
+    height: 210px;
+    background-color: #ffffff;
+    background-image: url('../../../public/images/userbgimg.png');
+    background-repeat: no-repeat;
+    background-size:445px 210px;
+    background-position: right 0;
+  }
+  .uc-header-box{
+    display: flex;
+    justify-content: space-between;
+    height: 210px;
+    margin: 0 auto;
+  }
   .list{
     font-size: 16px;
     font-weight: 600;
@@ -192,7 +201,6 @@
     margin-top: 20px;
   }
   .learningData{
-     width: 50%;
     padding-top: 70px;
     box-sizing: border-box;
     margin-left:auto;
@@ -236,7 +244,7 @@
            vertical-align: top;
        }
      }
-    
+
      .medalbutt{
        color: #333333;
        font-size: 14px;
@@ -260,10 +268,8 @@
      }
 //   }
   .personalData{
-   
     flex: 1;
     padding-top: 40px;
-    padding-left: 115px;
     box-sizing: border-box;
     display: flex;
     .uesr-avaer{
@@ -305,29 +311,13 @@
         .editbutt{
           font-size: 14px;
           color: #333333;
-  
-          
+
+
         }
       }
     }
   }
-  
-  .header-box{
-    display: flex;
-    justify-content: space-between;
-    height: 210px;
-    background: url('../../../public/images/userbgimg.png') no-repeat;
-    background-size:445px 210px;
-    background-position: right 0;
-  }
-  
-   .uc-header{
-     height: 210px;
-     margin: 0 auto;
-  
-    background: #fff;
-    //  background-color: #c9c2c2;
-   }
+
    .upicon{
      text-align: center;
      cursor: pointer;
@@ -382,9 +372,135 @@
        border-radius: 50%;
           width: 100px;
           height: 100px;
-  
+
+    }
   }
+}
+
+@media screen and (max-width: 1366px){
+  .uc-header-box {
+    width: 1160px;
+  }
+  .learningData{
+    margin-left:auto;
+    .learning-info{
+      margin-left: 10px;
+      margin-right: 10px;
+      .learning-qus{
+        font-size: 12px;
+      }
+      .learning-an{
+        font-size: 12px;
       }
     }
+  }
+  .personalData{
+    .uesr-avaer{
+      margin-right: 10px;
+    }
+    .user-content{
+      .content-top{
+        .grade{
+          div{
+              width: 48px;
+          }
+          span{
+            font-size: 14px;
+          }
+        }
+        h6{
+          font-size: 26px;
+        }
+        span{
+          font-size: 14px;
+          margin-left: 5px;
+          margin-right: 10px;
+        }
+        .editbutt{
+          width: 80px;
+          height: 25px;
+          line-height: 5px;
+          text-align: center;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+  .content-bottom{
+     .medalbutt{
+       margin-right: 20px;
+     }
+
+  }
+}
+@media screen and (max-width: 1680px) and (min-width:1367px){
+  .uc-header-box {
+    width: 1300px;
+  }
+  .learningData{
+    margin-left:auto;
+    .learning-info{
+      margin-left: 10px;
+      margin-right: 12px;
+    }
+  }
+
+  .personalData{
+    .uesr-avaer{
+      margin-right: 10px;
+    }
+    .user-content{
+      .content-top{
+        .grade{
+          div{
+              width: 48px;
+          }
+          span{
+            font-size: 14px;
+          }
+        }
+        h6{
+          font-size: 26px;
+        }
+        span{
+          font-size: 14px;
+          margin-left: 5px;
+          margin-right: 15px;
+        }
+        .editbutt{
+          width: 80px;
+          height: 25px;
+          line-height: 5px;
+          text-align: center;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+@media screen and (max-width: 1920px) and (min-width: 1681px){
+  .uc-header-box {
+    width: 1600px;
+  }
+  .learningData{
+    margin-left:auto;
+    .learning-info{
+      margin-left: 20px;
+      margin-right: 22px;
+    }
+  }
+}
+
+@media screen and (min-width: 1921px){
+  .uc-header-box {
+    width: 1800px;
+  }
+  .learningData{
+    margin-left:auto;
+    .learning-info{
+      margin-left: 30px;
+      margin-right: 30px;
+    }
+  }
+}
   </style>
-