赛事页面完成排行榜页面未完成
This commit is contained in:
ycy
parent
5536a33dbd
commit
615a67d306
18
App.vue
18
App.vue
|
|
@ -15,4 +15,22 @@ export default {
|
|||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import '@/uni_modules/uview-plus/index.scss';
|
||||
.index-page {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
/* #ifdef H5 */
|
||||
padding-top: 20rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.page-navbar {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
padding: 0 30rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
30
pages.json
30
pages.json
|
|
@ -6,7 +6,21 @@
|
|||
"navigationBarTitleText": "uni-app",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/intelLigence/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/rankList/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
|
|
@ -16,9 +30,19 @@
|
|||
},
|
||||
"uniIdRouter": {},
|
||||
"tabBar": {
|
||||
"list": [{
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/intelLigence/index",
|
||||
"text": "赛事"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/rankList/index",
|
||||
"text": "排行榜"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
243
pages/intelLigence/compontents/basketBall.vue
Normal file
243
pages/intelLigence/compontents/basketBall.vue
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
<template>
|
||||
<view class="football-box" style="margin-top: 5%;">
|
||||
<u-sticky>
|
||||
<u-tabs :list="list" lineColor="#e1b89c" :activeStyle="{
|
||||
color: '#e1b89c',
|
||||
transform: 'scale(1.05)'
|
||||
}" :inactiveStyle="{
|
||||
color: '#606266',
|
||||
transform: 'scale(1)'
|
||||
}" itemStyle="padding-left:6%; padding-right: 6%; height: 34px;" @change="tabsChange">
|
||||
|
||||
</u-tabs>
|
||||
</u-sticky>
|
||||
<u-line></u-line>
|
||||
<view class="status-line">
|
||||
<view class="status-left">
|
||||
<view class="border-left"></view>
|
||||
{{status}}
|
||||
</view>
|
||||
<view class="textStyle">
|
||||
<span>{{'04月17日'}}</span>
|
||||
<span style="margin-left: 20rpx;">{{'星期三'}}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view v-for="(item,index) in contentList" :key="index">
|
||||
<view class="content-box">
|
||||
<view class="content-top">
|
||||
<span style="font-size: 13px; color: #c6c6c6;padding-left: 3%;">{{`开场时间:${item.openTime}`}}</span>
|
||||
<view class="content-top-right">
|
||||
<span>Q1</span>
|
||||
<span>Q2</span>
|
||||
<span>Q3</span>
|
||||
<span>Q4</span>
|
||||
<span>QT</span>
|
||||
<span>{{'总分'}}</span>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="content-bottom">
|
||||
<view class="content-left">
|
||||
<view class="content-left-left">
|
||||
<span style="font-weight: 600; padding: 10rpx;">{{item.time}}</span>
|
||||
<span style="font-size: 10px; color: #c6c6c6;padding: 10rpx">{{item.content}}</span>
|
||||
<span style="font-weight: 600; padding: 10rpx">{{item.status}}</span>
|
||||
</view>
|
||||
<view class="content-left-right">
|
||||
<span style="width: 100%; display: flex;">
|
||||
<u-image :src="src" width="20px" height="20px" shape="circle" style="margin-right: 10%;"></u-image>
|
||||
<span style="width: 20vw;">{{item.teamOne.name}}</span>
|
||||
</span>
|
||||
<span style="width: 100%; display: flex;">
|
||||
<u-image :src="src" width="20px" height="20px" shape="circle" style="margin-right: 10%;"></u-image>
|
||||
<span style="width: 20vw;">{{item.teamTow.name}}</span>
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-right">
|
||||
<view class="content-right-top">
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
</view>
|
||||
<view class="content-right-bottom">
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
|
||||
const list = [{
|
||||
name: '全部'
|
||||
},
|
||||
{
|
||||
name: '进行中'
|
||||
},
|
||||
{
|
||||
name: '未开始'
|
||||
},
|
||||
{
|
||||
name: '已结束'
|
||||
}
|
||||
]
|
||||
const contentList = [{
|
||||
time: '14:00',
|
||||
content: '我是内容',
|
||||
status: '第一场',
|
||||
openTime: '21:00',
|
||||
teamOne: {
|
||||
name: '',
|
||||
num: '0',
|
||||
time: '未开赛'
|
||||
},
|
||||
teamTow: {
|
||||
name: '',
|
||||
num: '0',
|
||||
time: '00:00'
|
||||
},
|
||||
whole: '0-0',
|
||||
half: '0-0'
|
||||
},
|
||||
{
|
||||
time: '14:00',
|
||||
status: '完成',
|
||||
openTime: '23:30',
|
||||
teamOne: {
|
||||
name: '帕伦西亚',
|
||||
num: '0',
|
||||
time: '未开赛'
|
||||
},
|
||||
teamTow: {
|
||||
name: '西篮乙',
|
||||
num: '0',
|
||||
time: '00:00'
|
||||
},
|
||||
whole: '0-0',
|
||||
half: '0-0'
|
||||
},
|
||||
]
|
||||
let status = ref('全部')
|
||||
const tabsChange = (tabItem) => {
|
||||
status.value = tabItem.name
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.football-box {
|
||||
width: 100vw;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.status-line {
|
||||
width: 100%;
|
||||
height: 6vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.status-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
width: 0.5vw;
|
||||
height: 4vh;
|
||||
margin-right: 20rpx;
|
||||
background-color: #e1b89c;
|
||||
}
|
||||
|
||||
.textStyle {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #c6c6c6;
|
||||
}
|
||||
}
|
||||
|
||||
.content-box{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 20vh;
|
||||
width: 99.3%;
|
||||
border: 1rpx solid #c6c6c6;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20px;
|
||||
.content-top{
|
||||
height: 5vh;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.content-top-right{
|
||||
width: 55%;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
.content-bottom {
|
||||
padding: 20rpx 5rpx 0rpx ;
|
||||
height: 10vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5%;
|
||||
|
||||
.content-left {
|
||||
width: 45%;
|
||||
display: flex;
|
||||
|
||||
.content-left-left{
|
||||
width: 60%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content-left-right{
|
||||
width: 60%;
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.content-right {
|
||||
width: 55%;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.content-right-top {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.content-right-bottom {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:deep(.uni-scroll-view) {}
|
||||
</style>
|
||||
181
pages/intelLigence/compontents/footBall.vue
Normal file
181
pages/intelLigence/compontents/footBall.vue
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<view class="football-box" style="margin-top: 5%;">
|
||||
<u-sticky >
|
||||
<u-tabs :list="list"
|
||||
lineColor="#e1b89c"
|
||||
:activeStyle="{
|
||||
color: '#e1b89c',
|
||||
transform: 'scale(1.05)'
|
||||
}"
|
||||
:inactiveStyle="{
|
||||
color: '#606266',
|
||||
transform: 'scale(1)'
|
||||
}"
|
||||
itemStyle="padding-left:6%; padding-right: 6%; height: 34px;" @change="tabsChange">
|
||||
|
||||
</u-tabs>
|
||||
</u-sticky>
|
||||
<u-line></u-line>
|
||||
<view class="status-line">
|
||||
<view class="status-left">
|
||||
<view class="border-left"></view>
|
||||
{{status}}
|
||||
</view>
|
||||
<view class="textStyle">
|
||||
<span>{{'04月17日'}}</span>
|
||||
<span style="margin-left: 20rpx;">{{'星期三'}}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view v-for="(item,index) in contentList" :key="index">
|
||||
<view class="content-box">
|
||||
<view class="content-left">
|
||||
<span style="font-weight: 600;">{{item.time}}</span>
|
||||
<span style="font-size: 10px; color: #c6c6c6;">{{item.content}}</span>
|
||||
</view>
|
||||
<view class="content-right">
|
||||
<view class="content-right-top">
|
||||
<span style="width: 55%; font-style: italic; display: flex;">
|
||||
<u-image :src="src" width="20px" height="20px" shape="circle"></u-image>
|
||||
{{item.teamOne.name}}
|
||||
</span>
|
||||
<span>{{item.teamOne.num}}</span>
|
||||
<span>{{item.teamOne.time}}</span>
|
||||
</view>
|
||||
<view class="content-right-center">
|
||||
|
||||
<span style="width: 53%; font-style: italic; display: flex;">
|
||||
<u-image :src="src" width="20px" height="20px" shape="circle"></u-image>
|
||||
{{item.teamTow.name}}
|
||||
</span>
|
||||
<span>{{item.teamTow.num}}</span>
|
||||
<span>{{item.teamTow.time}}</span>
|
||||
</view>
|
||||
<view class="content-right-bottom">
|
||||
<span style="width: 55%;"></span>
|
||||
<span>{{`全:${item.whole}`}}</span>
|
||||
<span>{{`半:${item.half}`}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
|
||||
const list = [
|
||||
{name: '全部'},
|
||||
{name: '进行中'},
|
||||
{name: '未开始'},
|
||||
{name: '已结束'}
|
||||
]
|
||||
const contentList = [
|
||||
{
|
||||
time: '14:00',
|
||||
content: '我是内容我是内容我是内容我是内容我是内容',
|
||||
teamOne:{
|
||||
name: '',
|
||||
num: '0',
|
||||
time: '未开赛'
|
||||
},
|
||||
teamTow:{
|
||||
name: '',
|
||||
num: '0',
|
||||
time: '00:00'
|
||||
},
|
||||
whole: '0-0',
|
||||
half: '0-0'
|
||||
},
|
||||
{
|
||||
time: '14:00',
|
||||
content: '我是内容我是内容我是内容我是内容我是内容',
|
||||
teamOne:{
|
||||
name: '廊坊荣耀之城',
|
||||
num: '0',
|
||||
time: '未开赛'
|
||||
},
|
||||
teamTow:{
|
||||
name: '北京理工',
|
||||
num: '0',
|
||||
time: '00:00'
|
||||
},
|
||||
whole: '0-0',
|
||||
half: '0-0'
|
||||
},
|
||||
]
|
||||
let status = ref('全部')
|
||||
const tabsChange = (tabItem)=>{
|
||||
status.value = tabItem.name
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.football-box{
|
||||
width: 100vw;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
.status-line{
|
||||
width: 100%;
|
||||
height: 6vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.status-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.border-left{
|
||||
width: 0.5vw;
|
||||
height: 4vh;
|
||||
margin-right: 20rpx;
|
||||
background-color: #e1b89c;
|
||||
}
|
||||
.textStyle{
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #c6c6c6;
|
||||
}
|
||||
}
|
||||
.content-box{
|
||||
padding: 20rpx 20rpx;
|
||||
width: 93.5%;
|
||||
height: 15vh;
|
||||
border: 1rpx solid #c6c6c6;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5%;
|
||||
.content-left{
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content-right{
|
||||
width: 75%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
.content-right-top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.content-right-center{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.content-right-bottom{
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.uni-scroll-view){
|
||||
}
|
||||
</style>
|
||||
87
pages/intelLigence/index.vue
Normal file
87
pages/intelLigence/index.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<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>
|
||||
92
pages/rankList/compontents/masterHand.vue
Normal file
92
pages/rankList/compontents/masterHand.vue
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<view class="football-box" style="margin-top: 5%;">
|
||||
<u-sticky>
|
||||
<u-tabs :list="list" lineColor="#e1b89c" :activeStyle="{
|
||||
color: '#e1b89c',
|
||||
transform: 'scale(1.05)'
|
||||
}" :inactiveStyle="{
|
||||
color: '#606266',
|
||||
transform: 'scale(1)'
|
||||
}" itemStyle="padding-left:20%; padding-right: 20%; height: 34px;" @change="tabsChange">
|
||||
</u-tabs>
|
||||
</u-sticky>
|
||||
<u-line></u-line>
|
||||
<view class="u-page">
|
||||
<u-list @scrolltolower="scrolltolower" style="height: 560px;">
|
||||
<u-list-item v-for="(item, index) in indexList" :key="index">
|
||||
<!-- <u-cell :title="`${index + 1}`">
|
||||
<u-list-cell>1111</u-list-cell>
|
||||
<u-list-cell>2222</u-list-cell>
|
||||
</u-cell> -->
|
||||
<u-cell>
|
||||
<template #title>
|
||||
<span>{{`${index+1}`}}</span>
|
||||
<!-- <u-avatar shape="square" size="35" :src="item.url"></u-avatar> -->
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted
|
||||
} from 'vue'
|
||||
|
||||
|
||||
const list = ref([{
|
||||
name: '周榜'
|
||||
},
|
||||
{
|
||||
name: '月榜'
|
||||
}
|
||||
])
|
||||
const indexList = ref([]);
|
||||
const urls = [
|
||||
'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/2.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/3.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/4.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/5.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/6.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/7.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/8.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/9.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/10.jpg',
|
||||
];
|
||||
|
||||
const onLoad = () => {
|
||||
loadmore();
|
||||
};
|
||||
|
||||
const scrolltolower = () => {
|
||||
loadmore();
|
||||
};
|
||||
|
||||
const name = ref('大侠')
|
||||
|
||||
const loadmore = () => {
|
||||
for (let i = 0; i < 30; i++) {
|
||||
indexList.value.push({
|
||||
url: urls[uni.$u.random(0, urls.length - 1)],
|
||||
name: `${name.value}${i}`
|
||||
});
|
||||
}
|
||||
console.log(indexList.value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onLoad()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.football-box {
|
||||
width: 100vw;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
</style>
|
||||
9
pages/rankList/compontents/sectSchool.vue
Normal file
9
pages/rankList/compontents/sectSchool.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
22222222
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
111
pages/rankList/index.vue
Normal file
111
pages/rankList/index.vue
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<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">
|
||||
<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
|
||||
<u-button @click="show = true">{{ textBtn }}</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 show = ref(false);
|
||||
const columns = ref([
|
||||
['总分榜', '总分榜1', '总分榜2']
|
||||
]);
|
||||
const handBtn = ()=>{
|
||||
handColor.value = true
|
||||
sectColor.value = false
|
||||
}
|
||||
|
||||
const sectBtn = ()=>{
|
||||
handColor.value = false
|
||||
sectColor.value = true
|
||||
}
|
||||
|
||||
let textBtn = ref('总分榜')
|
||||
|
||||
const confirm = (e) => {
|
||||
textBtn.value = e.value[0]
|
||||
show.value = false;
|
||||
};
|
||||
|
||||
const cancel = ()=>{
|
||||
show.value = false;
|
||||
}
|
||||
const tabsChange = (tabItem)=>{
|
||||
// status.value = tabItem.name
|
||||
}
|
||||
</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>
|
||||
Loading…
Reference in New Issue
Block a user