Skip to content

C
cust-app
Commit d31815b6 authored by liwei's avatar liwei
Browse files
Options

修改了排行榜页面

parent 04df1766
Expand all Show whitespace changes
Inline Side-by-side
Showing with 668 additions and 155 deletions
pages/tab/index.vue
View file @ d31815b6
...@@ -140,17 +140,6 @@ ...@@ -140,17 +140,6 @@
</view> </view>
</view> </view>
</view> </view>
<!-- <view class="footer-fixed" :class="{ 'safe-bottom': !showTabbar }"> -->
<view class="footer-fixed">
<view class="left" @click="logion(userData.id, false, '../../static/images/clo.png')">
<image src="../../static/images/clo.png" style="width: 100%;height: 100%;;" mode="aspectFill">
</image>
</view>
<view class="right" @click="logion(userData.id, true, '../../static/images/con1.png')">
<image src="../../static/images/con1.png" style="width: 100%;height: 100%;;" mode="aspectFill">
</image>
</view>
</view>
<!-- v-show="showAnima" --> <!-- v-show="showAnima" -->
<image v-if="showAnima" :src="animUrl" mode="aspectFill" class="animate-middel-top"></image> <image v-if="showAnima" :src="animUrl" mode="aspectFill" class="animate-middel-top"></image>
<image v-show="showArrowDown" src="../../static/images/home/arrow_down_sm.png" mode="aspectFill" <image v-show="showArrowDown" src="../../static/images/home/arrow_down_sm.png" mode="aspectFill"
......
pages/tab/rank.vue
View file @ d31815b6
This diff is collapsed.
pagesRank/index/index.vue 0 → 100644
View file @ d31815b6
<template>
<view>
<view class="box">
<u-navbar :bgColor="bgColor" :placeholder="true">
<view class="u-nav-slot" slot="left">
<view class="text">排行榜</view>
</view>
</u-navbar>
</view>
<scroll-view scroll-y="true" :style="{height: viewHeight +'rpx'}">
<view style="background-image: linear-gradient(to right, rgb(183, 195, 255) 0%, rgb(189, 231, 255) 100%);position: relative;">
<view class="container">
<view style="margin: auto 180rpx;padding-top: 50rpx;">
<u-subsection bgColor="#ffffff80" :list="list" :current="current" fontSize="15"
@change="sectionChange"></u-subsection>
</view>
<view style="margin-top: 20rpx;">
<u--text :bold="false" size="15" color="#ffffff" align="center" text="排行榜更新延迟在24小时之内" />
</view>
</view>
<view class="top">
<!-- 第二名 -->
<view class="two">
<view style="padding: 0;margin-left: 95rpx;margin-bottom: -10rpx;">
<u-icon name="/static/images/rank/two.png" size="50rpx"></u-icon>
</view>
<view
style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[1].user.avatarUrl" size="100rpx"></u-avatar>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="false" size="15" color="#070707" align="center"
:text="rankList[1].user.nickname" />
</view>
</view>
<view
style="position:absolute;bottom: 20rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view
style="display: flex; justify-content: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="#4facfe" align="right"
:text="rankList[1].hours" />
<u--text :bold="false" size="15" color="#4facfe" align="" text="小时" />
</view>
</view>
</view>
<!-- 第一名 -->
<view class="one">
<view style="padding: 0;margin-left: 95rpx;margin-bottom: -10rpx;">
<u-icon name="/static/images/rank/one.png" size="50rpx"></u-icon>
</view>
<view
style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[0].user.avatarUrl" size="100rpx"></u-avatar>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="false" size="15" color="#070707" align="center"
:text="rankList[0].user.nickname" />
</view>
</view>
<view
style="position:absolute;bottom: 60rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view
style="display: flex; justify-content: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="#4facfe" align="right"
:text="rankList[0].hours" />
<u--text :bold="false" size="15" color="#4facfe" align="" text="小时" />
</view>
</view>
</view>
<!-- 第三名 -->
<view class="three">
<view style="padding: 0;margin-left: 95rpx;margin-bottom: -10rpx;">
<u-icon name="/static/images/rank/three.png" size="50rpx"></u-icon>
</view>
<view
style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[2].user.avatarUrl" size="100rpx"></u-avatar>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="false" size="15" color="#070707" align="center"
:text="rankList[2].user.nickname" />
</view>
</view>
<view
style="position:absolute;bottom: 20rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view
style="display: flex; justify-content: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="#4facfe" align="right"
:text="rankList[2].hours" />
<u--text :bold="false" size="15" color="#4facfe" align="" text="小时" />
</view>
</view>
</view>
</view>
</view>
<view>
<view class="container-list">
<view class="list-item" :class="{activeItem:index%2==0}" v-for="(item,index) in rankList.slice(3)" :key="index">
<view>
<u-row>
<u-col span="2">
<view style="">
<u--text :bold="true" size="15" align="center" color="#000000" :text="index+4"/>
</view>
</u-col>
<u-col span="2">
<view style="margin-left: -10rpx;">
<u-avatar :src="item.user.avatarUrl" size="80rpx"/>
</view>
</u-col>
<u-col span="5">
<u--text :bold="true" size="15" align="left" color="#000000" :text="item.user.nickname"/>
</u-col>
<u-col span="3">
<view style="display: flex; justify-content: flex-start;">
<u--text :bold="true" size="20" color="#4facfe" align="right" :text="item.hours" />
<u--text :bold="false" size="15" color="#4facfe" align="left" text="小时" />
</view>
</u-col>
</u-row>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import ELM from '@/components/elm-toast/index.vue';
import empty from '@/components/empty.vue'
import {
WS
} from '@/util/wsConfig.js'
export default {
components: {
empty,
ELM
},
data() {
return {
current: 0,
viewHeight: 1400,
list: ['全国排名'],
key:1,
bgColor: '#F4F5F9',
option: [{
text: '删除',
style: {
backgroundColor: '#FF8080'
}
}],
total: 0,
params: {
pageIndex: 1,
pageSize: 10
},
count: 0,
isShow: false,
ownerId: null,
timeoutObj: null,
reConnect: true,
socketTask: null,
nologin: '',
tipMsg: '',
isConfirm: false,
rankList: [
{
hours:10,
user: { nickname: '测试用户1', avatarUrl: '',}
},
{
hours:11,
user: { nickname: '测试用户2', avatarUrl: '',}
},
{
hours:12,
user: { nickname: '测试用户3', avatarUrl: '',}
},
{
hours:13,
user: { nickname: '测试用户4', avatarUrl: '',}
},
{
hours:14,
user: { nickname: '测试用户5', avatarUrl: '',}
},
{
hours:15,
user: { nickname: '测试用户6', avatarUrl: '',}
},
],
}
},
onShow() {
},
methods: {
sectionChange(index) {
this.current = index
},
actionClick(i) {
this.tipMsg = "开源版暂未开放，敬请期待！如需旗舰版，可联系作者微信（MMRWXM）咨询";
this.$refs.elm.showDialog();
},
}
}
</script>
<style lang="less" scoped>
.container {
// background-color: #4CD964;
margin: auto 20rpx;
height: 440rpx;
}
.u-nav-slot {
display: flex;
align-items: center;
.text {
height: 44rpx;
text-align: center;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
margin-left: 315rpx;
line-height: 44rpx;
}
}
.top {
display: flex;
justify-content: space-around;
margin: auto 20rpx;
position: absolute;
bottom: -80rpx;
// background-color: #005500;
.two {
position: absolute;
bottom: 0rpx;
left: 0rpx;
border-radius: 20rpx 0rpx 0rpx 20rpx;
// box-shadow:0px -10rpx 20rpx 0rpx #a8aaab;
background-color: #ffffff;
width: 236rpx;
height: 280rpx;
z-index: 1;
// text-align: center;
// align-items: center;
}
.one {
position: absolute;
bottom: 0rpx;
left: 236rpx;
border-radius: 20rpx 20rpx 0rpx 0rpx;
box-shadow: 0px -6px 10px -1px darkgrey;
background-color: #ffffff;
width: 236rpx;
height: 320rpx;
z-index: 2;
}
.three {
position: absolute;
bottom: 0rpx;
left: 470rpx;
border-radius: 0rpx 20rpx 20rpx 0rpx;
// box-shadow:0px 0px 10px #ccced0;
background-color: #ffffff;
width: 240rpx;
height: 280rpx;
z-index: 1;
}
}
.container-list {
border-radius: 20rpx;
margin: auto 20rpx;
padding: auto 20rpx;
margin-top: 100rpx;
background-color: #ffffff;
// height: 400rpx;
// margin-bottom: 100rpx;
}
.activeItem {
background-color: #f1f1f1;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment