87 lines
1.8 KiB
Vue
87 lines
1.8 KiB
Vue
<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> |