首页

src/assets/styles/portal-index.scss

@@ -440,6 +440,17 @@
 @media screen and (max-width: 1366px){
   .xindex-content{
     width: 1100px;
+  }
+  .personal-panel{
+    width: 300px;
+    height: 320px;
+    padding: 25px 40px;
+    .personal-box {
+      margin-left: 0px;
+      margin-top: 0px;
+      margin-bottom: 0px;
+  }
+  
   }
   //课程卡片样式
   .xindex-course{
@@ -668,6 +679,16 @@
 @media screen and (max-width: 1680px) and (min-width:1367px){
   .xindex-content{
     width: 1366px;
+  }
+   .personal-panel{
+    width: 356px; 
+    height: 370px;
+    padding: 30px 45px;
+    .personal-box{
+        margin-left: 16px;
+        margin-top: 20px;
+        margin-bottom: 28px;
+    }
   }
   .xindex-course{
     width: 320px;
@@ -879,6 +900,15 @@
   .xindex-content{
       width: 1690px;
   }
+  .personal-panel{
+    width: 356px; 
+    height: 370px;
+    padding: 30px 45px;
+    .personal-box{
+        margin-top: 20px;
+        margin-bottom: 28px;
+    }
+  }
   .xindex-course{
       width: 400px;
       padding: 30px;

src/views/Index.vue

@@ -23,12 +23,12 @@
         <ul class="personal-ul">
           <li>
             <span class="label">累计学习</span>
-            <p><span>{{userData.studyHourValue}}</span>小时</p>
+            <p><span>{{userData.studyHourValue}}</span>h</p>
           </li>
-          <li>
+          <!-- <li>
             <span class="label">经验值等级</span>
             <p><span>{{userData.level}}</span></p>
-          </li>
+          </li> -->
           <li>
             <span class="label">我的U币</span>
             <p><span>{{userData.coinValue}}</span>个</p>
@@ -935,13 +935,10 @@
     position: absolute;
     right: 172px;
     top: 105px;
-    width: 356px;
+    background: url('/images/homeWu/personal-bgimg.png');
-    height: 370px;
-    background: rgba(0, 0, 0, 0.39);
     border-radius: 8px;
     z-index: 999;
     backdrop-filter: blur(10px);
-    padding: 38px 47px 31px 32px;
     text-align: center;
     color: #fff;
 
@@ -960,27 +957,25 @@
       font-weight: 600;
       font-size: 18px;
       margin-top: 12px;
+      color: #333333;
     }
 
     .personal-info {
       font-size: 14px;
-      color: #C1C1C1;
+      color: #000000;
       margin-top: 10px;
     }
 
     .personal-box {
-      width: 240px;
+      width: 100%;
-      height: 60px;
+      height: 47px;
-      background: rgba(0, 0, 0, 0.39);
+      background: #387DF7;
-      border-radius: 8px;
+      border-radius: 4px;
-      margin-left: 16px;
+      padding: 15px ;
-      margin-top: 20px;
-      margin-bottom: 28px;
-      padding: 19px 14px 19px 22px;
       display: flex;
+      margin-top: 20px;
       justify-content: space-between;
       position: relative;
-
       .personal-box-img {
         position: absolute;
         width: 24px;
@@ -992,21 +987,25 @@
     }
 
     .personal-ul {
-
       display: flex;
-      justify-content: space-between;
+      li{
-
+        flex: 1;
+        text-align: center;
+      }
       .label {
-        color: #fff;
+        color: #333;
         font-size: 12px;
+        text-align: center;
       }
 
       p {
-        margin-top: 10px;
+        margin-top: 5px;
-
+        text-align: center;
+        color: #000;
         span {
           font-size: 22px;
-          color: #ffffff;
+          text-align: center;
+          color: #333;
         }
       }
     }