126 lines
2.8 KiB
Vue
126 lines
2.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">
|
|
<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> |