181 lines
4.0 KiB
Vue
181 lines
4.0 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:6%; padding-right: 6%; height: 34px;" @change="tabsChange">
|
|
|
|
</u-tabs>
|
|
</u-sticky>
|
|
<u-line></u-line>
|
|
<view class="status-line">
|
|
<view class="status-left">
|
|
<view class="border-left"></view>
|
|
{{status}}
|
|
</view>
|
|
<view class="textStyle">
|
|
<span>{{'04月17日'}}</span>
|
|
<span style="margin-left: 20rpx;">{{'星期三'}}</span>
|
|
</view>
|
|
</view>
|
|
<view v-for="(item,index) in contentList" :key="index">
|
|
<view class="content-box">
|
|
<view class="content-left">
|
|
<span style="font-weight: 600;">{{item.time}}</span>
|
|
<span style="font-size: 10px; color: #c6c6c6;">{{item.content}}</span>
|
|
</view>
|
|
<view class="content-right">
|
|
<view class="content-right-top">
|
|
<span style="width: 55%; font-style: italic; display: flex;">
|
|
<u-image :src="src" width="20px" height="20px" shape="circle"></u-image>
|
|
{{item.teamOne.name}}
|
|
</span>
|
|
<span>{{item.teamOne.num}}</span>
|
|
<span>{{item.teamOne.time}}</span>
|
|
</view>
|
|
<view class="content-right-center">
|
|
|
|
<span style="width: 53%; font-style: italic; display: flex;">
|
|
<u-image :src="src" width="20px" height="20px" shape="circle"></u-image>
|
|
{{item.teamTow.name}}
|
|
</span>
|
|
<span>{{item.teamTow.num}}</span>
|
|
<span>{{item.teamTow.time}}</span>
|
|
</view>
|
|
<view class="content-right-bottom">
|
|
<span style="width: 55%;"></span>
|
|
<span>{{`全:${item.whole}`}}</span>
|
|
<span>{{`半:${item.half}`}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref} from 'vue'
|
|
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
|
|
const list = [
|
|
{name: '全部'},
|
|
{name: '进行中'},
|
|
{name: '未开始'},
|
|
{name: '已结束'}
|
|
]
|
|
const contentList = [
|
|
{
|
|
time: '14:00',
|
|
content: '我是内容我是内容我是内容我是内容我是内容',
|
|
teamOne:{
|
|
name: '',
|
|
num: '0',
|
|
time: '未开赛'
|
|
},
|
|
teamTow:{
|
|
name: '',
|
|
num: '0',
|
|
time: '00:00'
|
|
},
|
|
whole: '0-0',
|
|
half: '0-0'
|
|
},
|
|
{
|
|
time: '14:00',
|
|
content: '我是内容我是内容我是内容我是内容我是内容',
|
|
teamOne:{
|
|
name: '廊坊荣耀之城',
|
|
num: '0',
|
|
time: '未开赛'
|
|
},
|
|
teamTow:{
|
|
name: '北京理工',
|
|
num: '0',
|
|
time: '00:00'
|
|
},
|
|
whole: '0-0',
|
|
half: '0-0'
|
|
},
|
|
]
|
|
let status = ref('全部')
|
|
const tabsChange = (tabItem)=>{
|
|
status.value = tabItem.name
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.football-box{
|
|
width: 100vw;
|
|
background-color: #fff;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
}
|
|
.status-line{
|
|
width: 100%;
|
|
height: 6vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.status-left{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.border-left{
|
|
width: 0.5vw;
|
|
height: 4vh;
|
|
margin-right: 20rpx;
|
|
background-color: #e1b89c;
|
|
}
|
|
.textStyle{
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #c6c6c6;
|
|
}
|
|
}
|
|
.content-box{
|
|
padding: 20rpx 20rpx;
|
|
width: 93.5%;
|
|
height: 15vh;
|
|
border: 1rpx solid #c6c6c6;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 5%;
|
|
.content-left{
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.content-right{
|
|
width: 75%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
font-weight: 600;
|
|
.content-right-top{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.content-right-center{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.content-right-bottom{
|
|
font-size: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.uni-scroll-view){
|
|
}
|
|
</style> |