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