mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
115 lines
2.5 KiB
Vue
115 lines
2.5 KiB
Vue
<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>
|
||
</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>
|
||
<view class="table-cell-three">经验值</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// tabList
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabList:[
|
||
{ name: '经验值'},
|
||
{ name: '学习时长'},
|
||
{ name: '学习天数'},
|
||
]
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
|
||
},
|
||
onReachBottom() {
|
||
|
||
},
|
||
onLoad(options) {
|
||
|
||
},
|
||
methods:{
|
||
clickTabs(item) {
|
||
console.log(item,'item')
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.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;
|
||
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: 120upx;
|
||
}
|
||
.table-cell-tow{
|
||
flex: 100%;
|
||
}
|
||
.table-cell-three{
|
||
width: 188upx;
|
||
}
|
||
}
|
||
.ran-table-body{
|
||
display: flex;
|
||
.table-cell-one{
|
||
width: 76upx;
|
||
}
|
||
.table-cell-tow{
|
||
flex: 100%;
|
||
}
|
||
.table-cell-three{
|
||
width: 188upx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style>
|