修改

src/components/UcHeader/Index.vue

@@ -1,7 +1,58 @@
 <template>
   <div class="uc-header xcontent">
-    <div style="display: flex;justify-content: space-between;height: 100px;padding-top: 5px;">
+    <div class="header-box" >
-      <div style="display: flex;justify-content: flex-start;">
+      <div class="personalData">
+         <div class="uesr-avaer">
+           <img src="../../../public/images/Avatarwoman.png" alt="">
+         </div>
+         <div class="user-content">
+            <div class="content-top">
+              <h6>王明</h6>
+              <span>BOE/企划中心/数据资产部</span>
+              <el-button class="editbutt" icon="el-icon-edit" type="text">编辑资料</el-button>
+            </div>
+            <div class="content-bottom">
+               <div class="medal">
+                 <img src="../../../public/images/grade.png" alt="">
+                 <img src="../../../public/images/grade.png" alt="">
+                 <img src="../../../public/images/grade.png" alt="">
+               </div>
+              <el-button class="medalbutt" type="text">更多 <i class="el-icon-d-arrow-right"></i> </el-button>
+               <div class="grade">
+                 <div>LV.1</div>
+                 <span>经验值：367</span>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="learningData">
+        <div class="learning-info">
+           <div class="learning-qus">当月学习时长</div>
+           <div class="learning-an"><span>12.7</span>小时</div>
+        </div>
+         <div class="learning-info">
+           <div class="learning-qus">累计学习时长</div>
+           <div class="learning-an"><span>120.7.7</span>小时</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>12.7</span>小时</div>
+        </div>
+         <div class="learning-info">
+           <div class="learning-qus">累计学习时长</div>
+           <div class="learning-an"><span>120.7.7</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>120.7.7</span>小时</div>
+        </div>
+        <div class="list">
+          BOE 排行榜 >>
+        </div>
+      </div>
+      <!-- <div style="display: flex;justify-content: flex-start;">
         <div>
           <img style="width: 100px;height: 100px;border-radius: 50%;border: 1px solid #f9f9f9;" :src="userInfo.avatar" v-if="userInfo.avatar !== '' ">
           <div v-else class="uavatar">
@@ -19,7 +70,7 @@
           </div>
           <div style="height: 35px;padding-left: 5px;color:#7a7a7a;">
             <span style="color: #7a7a7a;padding-right: 15px;" v-if="orgInfo">{{orgInfo}}</span>
-            <!-- 目前海没有实时更新的策略，暂未处理 -->
+            目前海没有实时更新的策略，暂未处理
             <span>学习时长：{{userInfo.studyTotalH}}小时</span>
           </div>
           <div>
@@ -28,8 +79,8 @@
             <router-link to="/manager/index"><span v-if="identity == 3 || identity == 5" :class="{identity:true,active:curIdentity==3}" @click="setCurIdentity(3)">管理员</span></router-link>
           </div>
         </div>
-      </div>
+      </div> -->
-      <div style="display: flex;justify-content: flex-end;padding-top: 35px;">
+      <!-- <div style="display: flex;justify-content: flex-end;padding-top: 35px;"> -->
         <!-- q1没有课程表，所以这里先隐藏
           <div v-if="curIdentity==2" style="padding: 0px 40px 0px 0px;color: #1EA0FA;text-align: center;">
             <div><i style="font-size: 40px;" class="el-icon-date"></i> <br/>授课表</div>
@@ -54,7 +105,7 @@
               <div>我的收藏</div>
             </div>
           </div> -->
-      </div>
+      <!-- </div> -->
     </div>
   </div>
 </template>
@@ -100,14 +151,141 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
 </script>
 
 <style lang="scss" scoped>
+.list{
+  font-size: 16px;
+  font-weight: 600;
+  color: #333333;
+  margin-top: 20px;
+}
+.learningData{
+  flex: 1;
+  padding-top: 70px;
+  box-sizing: border-box;
+  margin-left: 15%;
+  .learning-info{
+    float: left;
+    margin-right: 22px;
+     .learning-qus{
+          font-size: 14px;
+          color: #666660;
+          margin-bottom: 24px;
+     }
+     .learning-an{
+          color: #999999;
+          font-size: 14px;
+          span{
+            font-weight: 600;
+            font-size: 22px;
+            color: #0060FF;
+          }
+     }
+  }
+  .learning-border{
+    width: 1px;
+    height: 49px;
+    opacity: 0.3;
+    border: 1px solid #AAA6A6;
+    float: left;
+    margin-top: 10px;
+  }
+}
+.content-bottom{
+  margin-top: 30px;
+   .medal{
+     float: left;
+     img{
+         width: 36px;
+         height: 40px;
+         margin-right: 10px;
+         vertical-align: top;
+     }
+   }
+  
+   .medalbutt{
+     color: #333333;
+     font-size: 14px;
+     float: left;
+     margin-top: 10px;
+   }
+   .grade{
+     float: left;
+     margin-top: 10px;
+     div{
+       margin-left: 22px;
+       font-weight: 600;
+        float: left;
+        width: 70px;
+        height: 30px;
+        text-align: center;
+        line-height: 30px;
+        color: #9D6110 ;
+        background: url('../../../public/images/lvbg.png') no-repeat;
+     }
+     span{
+       font-size: 14px;
+       color: #A3680A;
+       line-height: 32px;
+       margin-left: 13px;
+
+     }
+   }
+}
+.personalData{
+  width: 630px;
+  padding-top: 40px;
+  padding-left: 115px;
+  box-sizing: border-box;
+  display: flex;
+  .uesr-avaer{
+    width: 120px;
+    height: 120px;
+    margin-right: 20px;
+    img{
+      width: 100%;
+      height: 100%;
+      vertical-align: top;
+    }
+  }
+  .user-content{
+    flex: 1;
+    .content-top{
+      margin-top: 15px;
+      line-height: 25px;
+      h6{
+        color: #333333;
+        font-size: 26px;
+        margin:0;
+        float: left;
+      }
+      span{
+        color: #999999;
+        font-size: 14px;
+        margin-left: 5px;
+        margin-right: 24px;
+      }
+      .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: 120px;
+   height: 210px;
-   // min-width: 1366px;
-   // max-width: 1500px;
-   //width: 1500px;
-   //width: 1000px;
-   padding-top: 10px;
    margin: 0 auto;
+  //  background-color: #c9c2c2;
  }
  .upicon{
    text-align: center;