From 507f3bf8215e560c08a0ab325264c0d59c422e75 Mon Sep 17 00:00:00 2001
From: lmj <3407000732@qq.com>
Date: Fri, 16 Sep 2022 18:42:01 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ucurrency/Index.vue | 308 ++++++++++++++++++++++++++++++++--
 src/views/user/ranking.vue    |   4 +-
 2 files changed, 298 insertions(+), 14 deletions(-)

diff --git a/src/views/ucurrency/Index.vue b/src/views/ucurrency/Index.vue
index d107f4d4..84cb9cad 100644
--- a/src/views/ucurrency/Index.vue
+++ b/src/views/ucurrency/Index.vue
@@ -1,14 +1,116 @@
 <template>
-    <div class="u-currency">
-      我 的  u 币
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <h6>我的U币 <span>U币规则 ></span> </h6>
-        </el-col>
-        <el-col :span="12">
-        
-        </el-col>
-        </el-row>
+    <div class="u-currency" style="padding:26px 40px;display:flex;">
+       <div class="myubi">
+          <div class="my-Recording">
+            <h3>5月31日</h3>
+            <div class="Recording-info">
+              <div>发布笔记</div>
+              <div><img src="" alt=""> +5</div>
+            </div>
+          </div>
+       </div>
+        <div class="experience">
+          <div class="exp-hear">
+              <div class="exp-hear-text">
+                  经验值排行榜
+                  <span class="exp-hear-textbor"></span>
+             </div>
+              <div class="exp-hear-xiala">
+                 <el-dropdown trigger="click">
+                <span class="el-dropdown-link">
+                    累计<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item>黄金糕</el-dropdown-item>
+                    <el-dropdown-item>狮子头</el-dropdown-item>
+                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
+                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+                </el-dropdown-menu>
+                </el-dropdown> 
+              </div>
+          </div>
+          <div class="myselftext">
+             <div class="myranking">
+                 我的排名 :  <span> 128</span>
+             </div>
+             <div class="myexperience">
+                 我的经验值 :  <span> 367</span>
+             </div>
+          </div>
+          <div class="exp-bar">
+           <h6> 300/600</h6>
+            <div class="exp-barbox">
+                <div class="exp-bar-cont"></div>
+            </div>
+            <div class="exp-barname">
+                <span>LV1</span>
+                <span>LV2</span>
+            </div>
+          </div>
+          <div class="exp-table">
+             <div class="table-hear">
+                <div style="margin-left:5px">排名</div>
+                <div style="margin-left:5px">姓名</div>
+                <div class="bm">部门</div>
+                <div class="jy">经验值</div>
+             </div>
+             <div style="height:450px;overflow-y:auto">
+            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank1.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank2.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank3.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">4</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">5</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+             </div>
+             <div class="omit">
+                 <div>.</div> <div>.</div> <div>.</div>
+             </div>
+             <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">1093</div>
+                 </div>
+             </div>
+            
+          </div>
+      </div>
     </div>
   </template>
   
@@ -26,9 +128,191 @@
   </script>
   
   <style lang="scss" scoped>
-     .u-currency{
-        padding: 30px 30px;
+    .myubi{
+      flex: 1;
+    }
+    .omit{
+  padding-left: 20px;
+  div{
+      font-size: 30px;
+      line-height: 10px;
+      color: #D8D8D8;
+  }
+}
+    .exp-table{
+      width: 100%;
+      padding-left: 25px;
+      .table-hear{
+         display: flex;
+        div{
+        //  margin-right: 13%;
+         min-width: 90px;
+         font-size: 14px;
+         font-weight: 400;
+         color: #999999;
+       }
+      .bm{
+          flex: 1;
+          margin-left: 20px;
+      }
+      .jy{
+          margin-left: auto;
+          text-align: right;
+          margin-right: 0;
+          text-align: center;
+      }
+      }
+     
+     
+  }
+    .myselftext{
+      height: 75px;
+      padding: 0 25px;
+      width: 100%;
+      display: flex;
+      .myranking{
+          flex: 1;
+          line-height: 75px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #666666;
+          span{
+              color: #333;
+              font-weight: 600;
+              font-size: 18px;
+          }
+      }
+      .myexperience{
+          text-align: right;
+          line-height: 75px;
+          margin-left: auto;
+          font-size: 14px;
+          font-weight: 400;
+          color: #666666;
+          span{
+              color: #333;
+              font-weight: 600;
+              font-size: 18px;
+          }
+      }
+  }
+    .tab-jy{
+    padding-top: 10px;
+    div{
+        line-height: 28px;
+        width: 70px;
+        text-align: center;
+        font-size: 18px;
+        color: #333333;
+        font-weight: 600;
+        height: 28px;
+        background: #F7F8FA;
+        border-radius: 14px;
+    }
+}
+.tab-bm{
+    line-height: 40px;
+}
+.tab-name{
+    img{
+        width: 40px;
+        height: 40px;
+        vertical-align: middle;
+    }
+    span{
+        color: #333333;
+        font-size: 14px;
+        font-weight: 600;
+    }
+    
+}
+.tab-rank{
+   
+    // text-align: center;
+    img{
+         width: 40px;
+         height: 40px;
         
+    }
+}
+ .experience{
+  flex: 1;
+  margin-right: 118px;
+  
+  .exp-hear{
+      width: 100%;
+      height: 65px;
+      background: url('../../../public/images/expbg.png') no-repeat 100% / 100%;
+      .exp-hear-text{
+          float: left;
+          line-height: 65px;
+          margin-left: 25px;
+          font-size: 18px;
+          font-weight: 600;
+          color: #333333;
+          position: relative;
+          z-index: 888;
+          .exp-hear-textbor{
+            width: 108px;
+            height: 10px;
+            background: #9CC7FC;
+            border-radius: 9px;
+            display: inline-block;
+            position: absolute;
+            left: 0;
+            z-index: -1;
+            top: 60%;
+          }
+      }
+      .exp-hear-xiala{
+          line-height: 65px;
+          float: right;
+          margin-right: 15px;
+      }
+
+  }
+ 
+  .exp-bar{
+      width: 100%;
+      h6{
+           font-size: 14px;
+            color: #666666;
+            font-weight: 600;
+            margin: 0;
+            margin-left: 50px;
      }
+     .exp-barname{
+         width: 100%;
+         padding: 20px 35px;
+         display: flex;
+         span{
+             flex: 1;
+         }
+     }
+     .exp-barbox{
+         width: 100%;
+         height: 8px;
+         background: #ECF1FE;
+         border-radius: 6px;
+         margin-left: 25px;
+         margin-top: 3px;
+         position: relative;
+         z-index: 1;
+         .exp-bar-cont{
+             width: 230px;
+             height: 6px;
+             background: #0059FF;
+             border-radius: 6px;
+             opacity: 0.56;
+             position: absolute;
+             left: 0;
+             z-index: 999;
+         }
+     }
+     
+
+  }
+}
+    
   </style>
   
\ No newline at end of file
diff --git a/src/views/user/ranking.vue b/src/views/user/ranking.vue
index d73383a5..baea86c6 100644
--- a/src/views/user/ranking.vue
+++ b/src/views/user/ranking.vue
@@ -9,7 +9,7 @@
               <div class="exp-hear-xiala">
                  <el-dropdown trigger="click">
                 <span class="el-dropdown-link">
-                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+                    累计<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -111,7 +111,7 @@
               <div class="exp-hear-xiala">
                  <el-dropdown trigger="click">
                 <span class="el-dropdown-link">
-                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+                    累计<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item>黄金糕</el-dropdown-item>