hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-09 10:56:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

笔记

Browse Source
This commit is contained in:
lmj
2022-09-16 18:42:01 +08:00
parent 6165979b6f
commit 507f3bf821
2 changed files with 298 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
src/views/ucurrency/Index.vue
View File

@@ -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>

4
src/views/user/ranking.vue
View File

@@ -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>