dykj-football/pages/intelLigence/compontents/basketBall.vue

243 lines
5.1 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-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>