160 lines
3.4 KiB
Vue
160 lines
3.4 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 #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 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;
|
|
}
|
|
|
|
.tableList {
|
|
width: 83vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.table-left {
|
|
width: 35vw;
|
|
}
|
|
|
|
.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> |