mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-10 03:16:45 +08:00
Merge branch 'stat' of https://codeup.aliyun.com/6265f483e4166464dc2f9c14/boeu/mobile into stat
This commit is contained in:
lmj
277
pages/my/rankingList.vue
Normal file
277
pages/my/rankingList.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<view class="ranking-list-info">
|
||||
<view class="ranking-list-box">
|
||||
<u-tabs :list="tabList" @click="clickTabs"
|
||||
lineColor="#007DFF"
|
||||
lineWidth="40"
|
||||
lineHeight="4"
|
||||
:activeStyle="{
|
||||
color: '#333333',
|
||||
fontWeight: '600',
|
||||
}"></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">
|
||||
<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 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>
|
||||
|
||||
<script>
|
||||
// tabList
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabList:[
|
||||
{ name: '经验值'},
|
||||
{ name: '学习时长'},
|
||||
{ name: '学习天数'},
|
||||
],
|
||||
activeTab:0,
|
||||
rankingList:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
methods:{
|
||||
clickTabs(item) {
|
||||
this.activeTab = item.index;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</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 40upx;
|
||||
border-radius: 40upx 40upx 0 0;
|
||||
background-color: #fff;
|
||||
.box-info-top{
|
||||
margin-top: 20upx;
|
||||
padding: 10upx 35upx 12upx 38upx;
|
||||
height: 100upx;
|
||||
line-height: 100upx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0upx 4upx 10upx 2upx rgba(0,0,0,0.05);
|
||||
border-radius: 8upx;
|
||||
color: #333333;
|
||||
font-size: 26upx;
|
||||
.text-num{
|
||||
font-size: 30upx;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.ran-table{
|
||||
margin-top: 62upx;
|
||||
.ran-table-haeder{
|
||||
font-size: 28upx;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
.table-cell-one{
|
||||
width: 200upx;
|
||||
padding-left: 8upx;
|
||||
}
|
||||
.table-cell-tow{
|
||||
// flex: 100%;
|
||||
width: 100%;
|
||||
padding-left: 8upx;
|
||||
}
|
||||
.table-cell-three{
|
||||
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: 200upx;
|
||||
padding-top: 10upx;
|
||||
.cell-one-index{
|
||||
font-size: 32upx;
|
||||
color: #333333;
|
||||
margin-left: 16upx;
|
||||
}
|
||||
}
|
||||
.table-cell-tow{
|
||||
// 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{
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
15
pages/my/uCurrencyRules.vue
Normal file
15
pages/my/uCurrencyRules.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<view class="u-rules-info">
|
||||
pages/my/uCurrencyRules
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-rules-info{
|
||||
padding-top: 432upx;
|
||||
background: #F0D8B0 url(../../static/images/rules.png) no-repeat 100% / 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user