dykj-football/pages/intelLigence/index.vue

87 lines
1.8 KiB
Vue
Raw Normal View History

<template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view>
<view class="box-y">
<!-- <u-tabs :list="list1" @click="click"></u-tabs> -->
<view class="box-top">
<view class="ball-box" @click="footBtn">
<span>足球</span>
<view :class="footColor ? 'round' : ''"></view>
<!-- <view class="round"></view> -->
</view>
<view class="ball-box" @click="basketBtn">
<span>篮球</span>
<view :class="basketColor ? 'round' : ''"></view>
</view>
</view>
<view class="content-box">
<basket-ball v-if="basketColor"></basket-ball>
<foot-ball v-else></foot-ball>
</view>
</view> <!-- 添加此结束标签 -->
</template>
<script setup>
import basketBall from './compontents/basketBall.vue'
import footBall from './compontents/footBall.vue'
import { ref } from 'vue'
const { safeAreaInsets } = uni.getSystemInfoSync();
const footColor = ref(true)
const basketColor = ref(false)
const footBtn = ()=>{
footColor.value = true
basketColor.value = false
}
const basketBtn = ()=>{
footColor.value = false
basketColor.value = true
}
</script>
<style scoped>
.box-y {
width: 100vw;
height: 30vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: blue;
/* background: url('../../static/logo.png'); */
}
.box-top{
width: 90vw;
margin-top: 3vh;
height: 5vh;
display: flex;
justify-content: space-around;
}
.ball-box{
height: 5vh;
width: 10vw;
display: flex;
color: #ddd;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.round{
width: 2vw;
height: 1vh;
background-color: #ddd;
border-radius: 50%;
}
.content-box{
width: 90%;
display: flex;
}
</style>