dykj-football/pages/rankList/index.vue

126 lines
2.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">
2024-04-18 11:49:24 +08:00
<view class="Upicker" v-if='handColor'>
<u-picker :show="showHand" :columns="handColumns" @confirm="confirmHand" @cancel="cancelHand"></u-picker>
<u-button @click="showHand = true">{{ handText }}</u-button>
</view>
<view class="Upicker" v-else>
<u-picker :show="showSect" :columns="sectColumns" @confirm="confirmSect" @cancel="cancelSect"></u-picker>
<u-button @click="showSect = true">{{sectText }}</u-button>
</view>
<view class="box-top">
<view class="ball-box" @click="handBtn">
<span>高手</span>
<view :class="handColor ? 'round' : ''"></view>
<!-- <view class="round"></view> -->
</view>
<view class="ball-box" @click="sectBtn">
<span>门派</span>
<view :class="sectColor ? 'round' : ''"></view>
</view>
</view>
<view class="content-box">
<master-hand v-if="handColor"></master-hand>
<sect-school v-else></sect-school>
</view>
</view> <!-- 添加此结束标签 -->
</template>
<script setup>
import { ref } from 'vue'
import masterHand from './compontents/masterHand.vue';
import sectSchool from './compontents/sectSchool.vue';
const { safeAreaInsets } = uni.getSystemInfoSync();
const handColor = ref(true)
const sectColor = ref(false)
2024-04-18 11:49:24 +08:00
const showHand = ref(false);
const showSect = ref(false);
let handText = ref('状元榜')
let sectText = ref('门派得分排行榜')
const handColumns = ref([
['状元榜', '连中榜', '明灯黑仔榜']
]);
const sectColumns = ref([
['门派得分排行榜', '连中榜1', '明灯黑仔榜1']
]);
const handBtn = ()=>{
handColor.value = true
sectColor.value = false
}
const sectBtn = ()=>{
handColor.value = false
sectColor.value = true
}
2024-04-18 11:49:24 +08:00
const confirmHand = (e) => {
handText.value = e.value[0]
showHand.value = false;
};
const confirmSect = (e) => {
sectText.value = e.value[0]
showSect.value = false;
};
2024-04-18 11:49:24 +08:00
const cancelHand = ()=>{
show.value = false;
}
2024-04-18 11:49:24 +08:00
const cancelSect = ()=>{
show.value = false;
}
</script>
<style scoped lang="scss">
.box-y {
width: 100vw;
height: 30vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: #e13977;
.Upicker{
width: 90vw;
margin-top: 3%;
}
}
.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>