dykj-football/pages/rankList/index.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">
		<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)
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
}



const confirmHand = (e) => {
	handText.value = e.value[0]
  showHand.value = false;
};
const confirmSect = (e) => {
	sectText.value = e.value[0]
  showSect.value = false;
};

const cancelHand = ()=>{
	show.value = false;
}

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>