dykj-football/pages/rankList/compontents/masterHand.vue
2024-04-18 11:49:24 +08:00

175 lines
3.7 KiB
Vue

<template>
<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 #icon>
<view class="table-left">
<span>{{`${index+1}`}}</span>
<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>
</u-list>
</view>
</view>
</template>
<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 lang="scss" scoped>
.football-box {
width: 100vw;
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>