排行榜页面完成
This commit is contained in:
ycy
parent
615a67d306
commit
745d67166c
|
|
@ -14,14 +14,28 @@
|
|||
<view class="u-page">
|
||||
<u-list @scrolltolower="scrolltolower" style="height: 560px;">
|
||||
<u-list-item v-for="(item, index) in indexList" :key="index">
|
||||
<!-- <u-cell :title="`${index + 1}`">
|
||||
<u-list-cell>1111</u-list-cell>
|
||||
<u-list-cell>2222</u-list-cell>
|
||||
</u-cell> -->
|
||||
<u-cell>
|
||||
<template #title>
|
||||
<template #icon>
|
||||
<view class="table-left">
|
||||
<span>{{`${index+1}`}}</span>
|
||||
<!-- <u-avatar shape="square" size="35" :src="item.url"></u-avatar> -->
|
||||
<u-avatar shape="circle" size="35" :src="item.url" customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
</view>
|
||||
</template>
|
||||
<template #title>
|
||||
<view class="table-right">
|
||||
<view class="right-name">
|
||||
<span>{{item.name}}</span>
|
||||
</view>
|
||||
<view class="right-content">
|
||||
<span style="font-size: 10px; color: #c6c6c6;">{{'排位分: 30'}}</span>
|
||||
<view class="content-left">
|
||||
<span class="content-text">{{'二连胜'}}</span>
|
||||
</view>
|
||||
<view class="content-right">
|
||||
<span class="content-text">{{'100%'}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
|
|
@ -78,6 +92,11 @@
|
|||
console.log(indexList.value);
|
||||
};
|
||||
|
||||
const tabsChange = () => {
|
||||
console.log('切换了');
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
onLoad()
|
||||
})
|
||||
|
|
@ -89,4 +108,68 @@
|
|||
background-color: #fff;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.table-left {
|
||||
width: 17vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.table-right {
|
||||
width: 66vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.right-name {
|
||||
width: 20vw;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
width: 50vw;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-left {
|
||||
width: 14vw;
|
||||
height: 2.2vh;
|
||||
background-color: #e7b696;
|
||||
position: relative;
|
||||
transform: skewX(-25deg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.content-text {
|
||||
position: absolute;
|
||||
transform: skewX(25deg);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.content-right{
|
||||
width: 10vw;
|
||||
height: 2.2vh;
|
||||
background-color: #e7b696;
|
||||
position: relative;
|
||||
transform: skewX(-25deg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.content-text {
|
||||
position: absolute;
|
||||
transform: skewX(25deg);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.u-cell__body){
|
||||
padding: 13px 0 13px 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,161 @@
|
|||
<template>
|
||||
22222222
|
||||
<view class="football-box" style="margin-top: 5%;">
|
||||
<u-sticky>
|
||||
<u-tabs :list="list" lineColor="#e1b89c" :activeStyle="{
|
||||
color: '#e1b89c',
|
||||
transform: 'scale(1.05)'
|
||||
}" :inactiveStyle="{
|
||||
color: '#606266',
|
||||
transform: 'scale(1)'
|
||||
}" itemStyle="padding-left:20%; padding-right: 20%; height: 34px;" @change="tabsChange">
|
||||
</u-tabs>
|
||||
</u-sticky>
|
||||
<u-line></u-line>
|
||||
<view class="u-page">
|
||||
<u-list @scrolltolower="scrolltolower" style="height: 560px;">
|
||||
<u-list-item v-for="(item, index) in indexList" :key="index">
|
||||
<u-cell>
|
||||
|
||||
<template #title>
|
||||
<view class="tableList">
|
||||
<view class="table-left">
|
||||
<span style="margin-right: 20%;">{{`${index+1}`}}</span>
|
||||
<span style="font-size: 20px; font-weight: 600;">{{item.name}}</span>
|
||||
</view>
|
||||
<view class="table-right">
|
||||
<view class="market" style="margin-right: 2%;">
|
||||
<span class="market-text">{{'净胜120场'}}</span>
|
||||
</view>
|
||||
<view class="grade">
|
||||
<span class="grade-text">{{'得分:150分'}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted
|
||||
} from 'vue'
|
||||
|
||||
|
||||
const list = ref([{
|
||||
name: '本月'
|
||||
},
|
||||
{
|
||||
name: '上月'
|
||||
}
|
||||
])
|
||||
const indexList = ref([]);
|
||||
const urls = [
|
||||
'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/2.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/3.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/4.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/5.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/6.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/7.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/8.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/9.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/10.jpg',
|
||||
];
|
||||
|
||||
const onLoad = () => {
|
||||
loadmore();
|
||||
};
|
||||
|
||||
const scrolltolower = () => {
|
||||
loadmore();
|
||||
};
|
||||
|
||||
const name = ref('大侠')
|
||||
|
||||
const loadmore = () => {
|
||||
for (let i = 0; i < 30; i++) {
|
||||
indexList.value.push({
|
||||
url: urls[uni.$u.random(0, urls.length - 1)],
|
||||
name: `${name.value}${i}`
|
||||
});
|
||||
}
|
||||
console.log(indexList.value);
|
||||
};
|
||||
|
||||
const tabsChange = () => {
|
||||
console.log('切换了');
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
onLoad()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.football-box {
|
||||
width: 100vw;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.tableList {
|
||||
width: 83vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.table-left {
|
||||
width: 30vw;
|
||||
}
|
||||
|
||||
.table-right {
|
||||
width: 70vw;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.market{
|
||||
width: 20vw;
|
||||
height: 2.2vh;
|
||||
background-color: #e7b696;
|
||||
position: relative;
|
||||
transform: skewX(-25deg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.market-text {
|
||||
position: absolute;
|
||||
transform: skewX(25deg);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.grade{
|
||||
width: 20vw;
|
||||
height: 2.2vh;
|
||||
background-color: #e7b696;
|
||||
position: relative;
|
||||
transform: skewX(-25deg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.grade-text {
|
||||
position: absolute;
|
||||
transform: skewX(25deg);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.u-cell__body) {
|
||||
padding: 13px 0 13px 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,9 +4,13 @@
|
|||
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
|
||||
</view>
|
||||
<view class="box-y">
|
||||
<view class="Upicker">
|
||||
<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
|
||||
<u-button @click="show = true">{{ textBtn }}</u-button>
|
||||
<view class="Upicker" v-if='handColor'>
|
||||
<u-picker :show="showHand" :columns="handColumns" @confirm="confirmHand" @cancel="cancelHand"></u-picker>
|
||||
<u-button @click="showHand = true">{{ handText }}</u-button>
|
||||
</view>
|
||||
<view class="Upicker" v-else>
|
||||
<u-picker :show="showSect" :columns="sectColumns" @confirm="confirmSect" @cancel="cancelSect"></u-picker>
|
||||
<u-button @click="showSect = true">{{sectText }}</u-button>
|
||||
</view>
|
||||
<view class="box-top">
|
||||
<view class="ball-box" @click="handBtn">
|
||||
|
|
@ -37,9 +41,15 @@ const { safeAreaInsets } = uni.getSystemInfoSync();
|
|||
|
||||
const handColor = ref(true)
|
||||
const sectColor = ref(false)
|
||||
const show = ref(false);
|
||||
const columns = ref([
|
||||
['总分榜', '总分榜1', '总分榜2']
|
||||
const showHand = ref(false);
|
||||
const showSect = ref(false);
|
||||
let handText = ref('状元榜')
|
||||
let sectText = ref('门派得分排行榜')
|
||||
const handColumns = ref([
|
||||
['状元榜', '连中榜', '明灯黑仔榜']
|
||||
]);
|
||||
const sectColumns = ref([
|
||||
['门派得分排行榜', '连中榜1', '明灯黑仔榜1']
|
||||
]);
|
||||
const handBtn = ()=>{
|
||||
handColor.value = true
|
||||
|
|
@ -51,18 +61,23 @@ const sectBtn = ()=>{
|
|||
sectColor.value = true
|
||||
}
|
||||
|
||||
let textBtn = ref('总分榜')
|
||||
|
||||
const confirm = (e) => {
|
||||
textBtn.value = e.value[0]
|
||||
show.value = false;
|
||||
|
||||
const confirmHand = (e) => {
|
||||
handText.value = e.value[0]
|
||||
showHand.value = false;
|
||||
};
|
||||
const confirmSect = (e) => {
|
||||
sectText.value = e.value[0]
|
||||
showSect.value = false;
|
||||
};
|
||||
|
||||
const cancel = ()=>{
|
||||
const cancelHand = ()=>{
|
||||
show.value = false;
|
||||
}
|
||||
const tabsChange = (tabItem)=>{
|
||||
// status.value = tabItem.name
|
||||
|
||||
const cancelSect = ()=>{
|
||||
show.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user