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

排行榜页面

Browse Source
This commit is contained in:
zhaofang
2022-11-01 16:10:01 +08:00
parent 4c22eeffe3
commit 8a6507e0fa
2 changed files with 190 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
pages/my/rankingList.vue
View File

@@ -1,25 +1,145 @@
<template>
<view class="ranking-list-info">
<view class="ranking-list-box">
<u-tabs :list="tabList" @click="clickTabs"></u-tabs>
<view class="box-info-top">
<text class="top-text">我的排名：<text class="text-num">128</text></text>
<text class="top-text" style="margin-left: 30upx;">我的经验值：<text class="text-num">367</text></text>
</view>
<view class="ran-table">
<view class="ran-table-haeder">
<view class="table-cell-one">排名</view>
<view class="table-cell-tow">姓名</view>
<view class="table-cell-three">经验值</view>
<u-tabs :list="tabList" @click="clickTabs"
lineColor="#007DFF"
lineWidth="40"
lineHeight="4"
:activeStyle="{
color: '#333333',
fontWeight: '600',
transform: 'scale(1.04)',
}"></u-tabs>
<view v-show="activeTab == 0">
<view class="box-info-top">
<text class="top-text">我的排名：<text class="text-num">128</text></text>
<text class="top-text" style="margin-left: 30upx;">我的经验值：<text class="text-num">367</text></text>
</view>
<view class="ran-table-body">
<view class="table-cell-one"><image style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image></view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx" src="../../static/images/woman.png" mode=""></image>
<view class="ran-table">
<view class="ran-table-haeder">
<view class="table-cell-one">排名</view>
<view class="table-cell-tow">姓名</view>
<view class="table-cell-three">经验值</view>
</view>
<view class="ran-table-body" v-for="(item, index) in 5">
<view class="table-cell-one">
<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
<image v-if="index == 2" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-three.png" mode=""></image>
<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name">小张</text>
<text class="table-cell-tow-org">(数据资产部)</text>
</view>
<view class="table-cell-three">1073</view>
</view>
<view class="ranking-dote">
<view>.</view>
<view>.</view>
<view>.</view>
</view>
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;">
<view class="table-cell-one">
<text class="cell-one-index" style="color:#326DFF">128</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name" style="color:#326DFF">小张</text>
<text class="table-cell-tow-org" style="color:#326DFF">(数据资产部)</text>
</view>
<view class="table-cell-three" style="color:#326DFF">1073</view>
</view>
<view class="table-cell-three">经验值</view>
</view>
</view>
</view>
<view v-show="activeTab == 1">
<view class="box-info-top">
<text class="top-text">我的排名：<text class="text-num">128</text></text>
<text class="top-text" style="margin-left: 30upx;">我的学习时长：<text class="text-num">367</text>h</text>
</view>
<view class="ran-table">
<view class="ran-table-haeder">
<view class="table-cell-one">排名</view>
<view class="table-cell-tow">姓名</view>
<view class="table-cell-three">学习时长(h)</view>
</view>
<view class="ran-table-body" v-for="(item, index) in 5">
<view class="table-cell-one">
<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
<image v-if="index == 2" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-three.png" mode=""></image>
<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name">小张</text>
<text class="table-cell-tow-org">(数据资产部)</text>
</view>
<view class="table-cell-three">1073</view>
</view>
<view class="ranking-dote">
<view>.</view>
<view>.</view>
<view>.</view>
</view>
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;">
<view class="table-cell-one">
<text class="cell-one-index" style="color:#326DFF">128</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name" style="color:#326DFF">小张</text>
<text class="table-cell-tow-org" style="color:#326DFF">(数据资产部)</text>
</view>
<view class="table-cell-three" style="color:#326DFF">1073</view>
</view>
</view>
</view>
<view v-show="activeTab == 2">
<view class="box-info-top">
<text class="top-text">我的排名：<text class="text-num">128</text></text>
<text class="top-text" style="margin-left: 30upx;">我的学习天数：<text class="text-num">367</text></text>
</view>
<view class="ran-table">
<view class="ran-table-haeder">
<view class="table-cell-one">排名</view>
<view class="table-cell-tow">姓名</view>
<view class="table-cell-three">学习天数</view>
</view>
<view class="ran-table-body" v-for="(item, index) in 5">
<view class="table-cell-one">
<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
<image v-if="index == 2" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-three.png" mode=""></image>
<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name">小张</text>
<text class="table-cell-tow-org">(数据资产部)</text>
</view>
<view class="table-cell-three">1073</view>
</view>
<view class="ranking-dote">
<view>.</view>
<view>.</view>
<view>.</view>
</view>
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;">
<view class="table-cell-one">
<text class="cell-one-index" style="color:#326DFF">128</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name" style="color:#326DFF">小张</text>
<text class="table-cell-tow-org" style="color:#326DFF">(数据资产部)</text>
</view>
<view class="table-cell-three" style="color:#326DFF">1073</view>
</view>
</view>
</view>
</view>
</view>
</template>
@@ -33,7 +153,11 @@
{ name: '经验值'},
{ name: '学习时长'},
{ name: '学习天数'},
]
],
activeTab:0,
rankingList:{
}
}
},
onPullDownRefresh() {
@@ -47,7 +171,7 @@
},
methods:{
clickTabs(item) {
console.log(item,'item')
this.activeTab = item.index;
}
}
@@ -55,12 +179,16 @@
</script>
<style scoped lang="scss">
::v-deep .u-tabs__wrapper__nav__item__text{
font-size: 32upx;
color: #666666 !important;
}
.ranking-list-info{
padding-top: 376upx;
background: url(../../static/images/ranking-list.png) no-repeat 100% / 100%;
background-position: 0 0;
.ranking-list-box{
padding: 34upx 20upx;
padding: 34upx 40upx;
border-radius: 40upx 40upx 0 0;
background-color: #fff;
.box-info-top{
@@ -86,28 +214,64 @@
color: #999999;
display: flex;
.table-cell-one{
width: 120upx;
width: 200upx;
padding-left: 8upx;
}
.table-cell-tow{
flex: 100%;
// flex: 100%;
width: 100%;
padding-left: 8upx;
}
.table-cell-three{
width: 188upx;
width: 260upx;
text-align: right;
}
}
.ran-table-body{
display: flex;
padding: 46upx 0 38upx 0;
border-bottom: 2upx solid rgba($color: #979797, $alpha: 0.1);
// margin-top: 30upx;
.table-cell-one{
width: 76upx;
width: 200upx;
padding-top: 10upx;
.cell-one-index{
font-size: 32upx;
color: #333333;
margin-left: 16upx;
}
}
.table-cell-tow{
flex: 100%;
// flex: 100%;
width: 100%;
.table-cell-tow-name{
font-size: 28upx;
font-weight: 600;
color: #333333;
margin-left: 28upx;
}
.table-cell-tow-org{
font-size: 24upx;
color: #999999;
margin-left: 16upx;
}
}
.table-cell-three{
width: 188upx;
padding-top: 10upx;
width: 260upx;
font-size: 36upx;
font-weight: 600;
color: #333333;
text-align: right;
}
}
.ranking-dote{
margin-left: 20upx;
margin-top: 10upx;
color: #D8D8D8;
font-size: 36upx;
line-height: 16upx;
}
}
}
}

BIN
static/images/ranking-list.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 97 KiB