排行榜

This commit is contained in:
18631081161 2024-07-26 11:06:34 +08:00
parent 669b0a9f07
commit b94f3f5f42
3 changed files with 60 additions and 36 deletions

View File

@ -23,7 +23,7 @@
</view>
<view
style="color: #fff;text-align: center;font-size:40rpx;padding-top:10rpx;padding-bottom: 10rpx;height:64rpx;">
恭喜抽中超神赏品赠送<text style="color: #A664FF;" v-if="ruleData!=null">{{ruleData.level_text}}</text>
恭喜抽中贵重赏品赠送<text style="color: #A664FF;" v-if="ruleData!=null">{{ruleData.level_text}}</text>
</view>
<view style="height:60rpx;">

View File

@ -195,15 +195,15 @@
id: 9,
title: '枫岚赏'
},
{
id: 12,
title: '连击赏'
},
{
id: 8,
title: '领主赏'
},
{
id: 12,
title: '冲冲赏'
},
// {
// id: 3,
// title: ''

View File

@ -1,43 +1,55 @@
<template>
<view style="width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center;">
<view class="navLeft" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
<uni-icons type="left" style="position: absolute; left: 30rpx;" color="#FFFFFF"></uni-icons>
<view class="">排行榜</view>
</view>
<view class="" style="margin-top: 90rpx; width: 683rpx; height: 286rpx;">
<swiper class="swiper-box" :autoplay="true" :indicator-dots="false" :circular="true" :interval="3000">
<swiper-item v-for="(v, i) in advert" :key="i" @click="$c.navTo(v)">
<image class="yh_bg" :src="v.imgurl" style="width: 100%;height: 100%;"></image>
</swiper-item>
</swiper>
<view class="" style="position: relative;width: 100%;">
<view class="" style=" width: 100%; height: 457.64rpx; position: absolute;">
<swiper class="" style="width: 100%; height: 100%;" :autoplay="true" :indicator-dots="false"
:circular="true" :interval="3000">
<swiper-item v-for="(v, i) in advert" :key="i" @click="$c.navTo(v)">
<image class="yh_bg" :src="v.imgurl" style="width: 100%;height: 100%;"></image>
</swiper-item>
</swiper>
</view>
<uni-icons type="left" style="position: absolute; left: 30rpx; size: 60rpx;"
:style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)" color="#FFFFFF"></uni-icons>
<view class="" :style="{top:$sys().statusBarHeight+'px'}"
style="position: absolute;width: 100%; position: absolute; font-weight: 400; text-align: center; font-size: 37rpx; color: #FFFFFF;">
30天流水消费排行</view>
</view>
<view class="" style="width: 683rpx; margin-top: 43rpx;">
<view class="" style="width: 683rpx; margin-top: 457.64rpx; display: flex; flex-direction: column;">
<view class="" v-for="(item,index) in list"
style="display: flex; flex-direction: row; align-items: center; margin-top: 22rpx;">
<view class="" v-if="index == 0 " style="width: 30rpx; height: 35rpx;color: #B8B8B8;text-align:center;">
<image :src="$img1('/image/1.png')" style="width: 30rpx; height: 35rpx;"></image>
style="display: flex; flex-direction: row; align-items: center; margin-top:30rpx; border-radius: 14rpx; padding-top: 15rpx; padding-bottom: 15rpx;"
:style="{backgroundColor: setBgColor(index)}">
<view class="" v-if="index == 0 "
style="width: 30rpx; height: 35rpx;color: #B8B8B8;text-align:center; margin-left: 32rpx;">
<image :src="$img1('/image/1.png')" style="width: 30rpx; height: 35rpx;"></image>
</view>
<view class="" v-if="index == 1 " style="width: 30rpx; height: 35rpx;color: #B8B8B8;text-align:center;">
<image :src="$img1('/image/2.png')" style="width: 30rpx; height: 35rpx;"></image>
<view class="" v-if="index == 1 "
style="width: 30rpx; height: 35rpx;color: #B8B8B8;text-align:center; margin-left: 32rpx;">
<image :src="$img1('/image/2.png')" style="width: 30rpx; height: 35rpx;"></image>
</view>
<view class="" v-if="index == 2 " style="width: 30rpx; height: 35rpx;color: #B8B8B8;text-align:center;">
<image :src="$img1('/image/3.png')" style="width: 30rpx; height: 35rpx;"></image>
<view class="" v-if="index == 2 "
style="width: 30rpx; height: 35rpx;color: #B8B8B8;text-align:center; margin-left: 32rpx;">
<image :src="$img1('/image/3.png')" style="width: 30rpx; height: 35rpx;"></image>
</view>
<view class="" v-if="index > 2 " style="width: 30rpx; height: 35rpx;color: #B8B8B8;text-align:center;">
{{index}}
<view class="" v-if="index > 2 "
style="width: 30rpx; height: 35rpx;color: #B8B8B8;text-align:center; margin-left: 32rpx;">
{{index+1}}
</view>
<view class="" style="width: 94rpx; height: 94rpx; background-color: azure; margin-left: 30rpx;">
<image :src="item.headimg" style="width: 94rpx; height: 94rpx;"></image>
<view class="" style="width: 94rpx; height: 94rpx; margin-left: 30rpx;">
<image :src="item.headimg" style="width: 94rpx; height: 94rpx; border-radius: 50%;"></image>
</view>
<view class="" style="display: flex; flex-direction: column; margin-left: 28rpx;">
<text style="font-size: 33rpx; color: white;">{{item.nickname}}</text>
<text style="font-size: 22rpx; color: #B8B8B8; margin-top: 15rpx;">ID{{item.user_id}}</text>
</view>
<view class="" style="position: absolute; right: 33rpx;">
<span style="color: white; font-size: 27rpx;"><span
style="font-size: 41rpx;">{{item.price}}</span></span>
<view class="" style="position: absolute; right: 70rpx;">
<span style="color: white; font-size: 33rpx;">{{item.price}}</span>
</view>
</view>
@ -53,6 +65,7 @@
return {
advert: [], //
list: [],
colors: ['#F8DE61', '#E0E0E0', '#E5967F', '#424145'],
}
},
onLoad() {
@ -78,14 +91,25 @@
}
}
})
}
},
setBgColor(index) {
if (index == 0) {
return this.colors[index];
} else if (index == 1) {
return this.colors[index];
} else if (index == 2) {
return this.colors[index];
} else {
return this.colors[3];
}
},
}
}
</script>
<style lang="scss">
.navLeft {
position: relative;
height: 44px;
z-index: 100;
@ -95,11 +119,11 @@
>view {
width: 100%;
font-family: YouSheBiaoTiHei;
// font-family: YouSheBiaoTiHei;
position: absolute;
font-weight: 400;
text-align: center;
font-size: 50rpx;
font-size: 37rpx;
color: #FFFFFF;
}
}