<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>