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

排行榜

Browse Source
This commit is contained in:
lmj
2022-09-16 17:37:33 +08:00
parent 018a54cd1e
commit ff41161347
8 changed files with 435 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/Durbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/images/expbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/images/rank1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/images/rank2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/images/rank3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

6
src/components/UcHeader/Index.vue
View File

@@ -57,7 +57,7 @@
<div class="learning-qus">我的U币（累计）</div>
<div class="learning-an"><span>{{uinfo.uCurrency}}</span></div>
</div>
<div class="list">
<div @click="jumrank" class="list">
BOE 排行榜 >>
</div>
</div>
@@ -172,6 +172,10 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
},
setCurIdentity(iden){
this.$store.dispatch('SetCurIdentity',iden);
},
jumrank(){
this.$router.push({ path: '/user/ranking' });
},
toPage(url){
this.$router.push({path:url})

3
src/data/pages.js
View File

@@ -83,7 +83,8 @@ export const pages=[
{title:'开发工具下载',path:'tools',component:'tools/Index',hidden:false},
{title:'课程开发教程',path:'developtoolsdown',component:'tools/DeveloptoolsDown',hidden:true},
{title:'我的U币',path:'ucurrency',component:'ucurrency/Index',hidden:true},
{title:'我的勋章',path:'medal',component:'medal/Index',hidden:true}
{title:'我的勋章',path:'medal',component:'medal/Index',hidden:true},
{title:'排行榜',path:'ranking',component:'user/ranking',hidden:true}
]},
{title:'消息中心',path:'/message/center',hidden:false,children:[
{title:'消息中心',path:'index',component:'portal/user/Message',hidden:false}

428
src/views/user/ranking.vue Normal file
View File

@@ -0,0 +1,428 @@
<template>
<div style="padding:26px 40px;display:flex;">
<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>
<di class="Duration">
<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-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:500px;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>
</di>
</div>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
<style lang="scss" scoped>
.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;
}
}
}
}
.Duration{
margin-right: 118px;
flex: 1;
.exp-hear{
width: 100%;
height: 65px;
background: url('../../../public/images/Durbg.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: 130px;
height: 10px;
background: #FDAFB3 ;
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;
}
}
}
</style>