dykj-football/pages/intelLigence/compontents/footBall.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>