mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 11:56:44 +08:00
笔记
This commit is contained in:
lmj
@@ -1,14 +1,116 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="u-currency">
|
<div class="u-currency" style="padding:26px 40px;display:flex;">
|
||||||
我 的 u 币
|
<div class="myubi">
|
||||||
<el-row :gutter="20">
|
<div class="my-Recording">
|
||||||
<el-col :span="12">
|
<h3>5月31日</h3>
|
||||||
<h6>我的U币 <span>U币规则 ></span> </h6>
|
<div class="Recording-info">
|
||||||
</el-col>
|
<div>发布笔记</div>
|
||||||
<el-col :span="12">
|
<div><img src="" alt=""> +5</div>
|
||||||
|
</div>
|
||||||
</el-col>
|
</div>
|
||||||
</el-row>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -26,9 +128,191 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.u-currency{
|
.myubi{
|
||||||
padding: 30px 30px;
|
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>
|
</style>
|
||||||
|
|
||||||
@@ -9,7 +9,7 @@
|
|||||||
<div class="exp-hear-xiala">
|
<div class="exp-hear-xiala">
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
<span class="el-dropdown-link">
|
<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>
|
</span>
|
||||||
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-menu slot="dropdown">
|
||||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||||
@@ -111,7 +111,7 @@
|
|||||||
<div class="exp-hear-xiala">
|
<div class="exp-hear-xiala">
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
<span class="el-dropdown-link">
|
<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>
|
</span>
|
||||||
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-menu slot="dropdown">
|
||||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||||
|
|||||||
Reference in New Issue
Block a user