dykj-football/pages/intelLigence/compontents/basketBall.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-top">
					<span style="font-size: 13px; color: #c6c6c6;padding-left: 3%;">{{`开场时间:${item.openTime}`}}</span>
					<view class="content-top-right">
						<span>Q1</span>
						<span>Q2</span>
						<span>Q3</span>
						<span>Q4</span>
						<span>QT</span>
						<span>{{'总分'}}</span>
					</view>
				</view>
				<u-line></u-line>
				<view class="content-bottom">
					<view class="content-left">
						<view class="content-left-left">
							<span style="font-weight: 600; padding: 10rpx;">{{item.time}}</span>
							<span style="font-size: 10px; color: #c6c6c6;padding: 10rpx">{{item.content}}</span>
							<span style="font-weight: 600; padding: 10rpx">{{item.status}}</span>
						</view>
						<view class="content-left-right">
							<span style="width: 100%; display: flex;">
								<u-image :src="src" width="20px" height="20px" shape="circle" style="margin-right: 10%;"></u-image>
								<span style="width: 20vw;">{{item.teamOne.name}}</span>
							</span>
							<span style="width: 100%; display: flex;">
								<u-image :src="src" width="20px" height="20px" shape="circle" style="margin-right: 10%;"></u-image>
								<span style="width: 20vw;">{{item.teamTow.name}}</span>
							</span>
						</view>
					</view>
					<view class="content-right">
						<view class="content-right-top">
							<span>1</span>
							<span>1</span>
							<span>1</span>
							<span>1</span>
							<span>1</span>
							<span>1</span>
						</view>
						<view class="content-right-bottom">
							<span>1</span>
							<span>1</span>
							<span>1</span>
							<span>1</span>
							<span>1</span>
							<span>1</span>
						</view>
					</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: '我是内容',
			status: '第一场',
			openTime: '21:00',
			teamOne: {
				name: '',
				num: '0',
				time: '未开赛'
			},
			teamTow: {
				name: '',
				num: '0',
				time: '00:00'
			},
			whole: '0-0',
			half: '0-0'
		},
		{
			time: '14:00',
			status: '完成',
			openTime: '23:30',
			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{
		display: flex;
		flex-direction: column;
		height: 20vh;
		width: 99.3%;
		border: 1rpx solid #c6c6c6;
		border-radius: 10rpx;
		margin-bottom: 20px;
		.content-top{
			height: 5vh;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.content-top-right{
				width: 55%;
				font-weight: 600;
				display: flex;
				justify-content: space-around;
			}
		}
		.content-bottom {
			padding: 20rpx 5rpx 0rpx ;
			height: 10vh;
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 5%;
		
			.content-left {
				width: 45%;
				display: flex;
	
				.content-left-left{
					width: 60%;
					display: flex;
					flex-direction: column;
				}
				.content-left-right{
					width: 60%;
					display: flex;
					font-size: 15px;
					font-weight: 600;
					justify-content: space-around;
					flex-direction: column;
				}
			}
		
			.content-right {
				width: 55%;
				font-weight: 600;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
		
				.content-right-top {
					display: flex;
					justify-content: space-around;
				}
		
				.content-right-bottom {
					display: flex;
					justify-content: space-around;
				}
			}
		}
		
	}

	:deep(.uni-scroll-view) {}
</style>