144 lines
2.8 KiB
Plaintext
144 lines
2.8 KiB
Plaintext
<template>
|
|
<view class="sports-admin-page">
|
|
<admin-layout>
|
|
<view class="container">
|
|
<view class="page-header">
|
|
<text class="page-title">运动管理</text>
|
|
</view>
|
|
|
|
<!-- Tabs -->
|
|
<view class="swiper-tabs">
|
|
<scroll-view direction="horizontal" :show-scrollbar="false">
|
|
<view class="flex-row">
|
|
<text v-for="(tab, idx) in tabList" :key="tab.key" class="swiper-tabs-item"
|
|
:class="swiperIndex == idx ? 'swiper-tabs-item-active' : ''" @click="onTabClick(idx)">
|
|
{{ tab.name }}
|
|
</text>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="swiper-tabs-indicator" :style="indicatorStyle ?? {}"></view>
|
|
</view>
|
|
|
|
<!-- Swiper Content -->
|
|
<swiper class="swiper-view" :current="swiperIndex" @change="onSwiperChange">
|
|
<swiper-item class="swiper-item">
|
|
<sports-stats />
|
|
</swiper-item>
|
|
<swiper-item class="swiper-item">
|
|
<sports-notifications />
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</admin-layout>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts">
|
|
import { ref, computed } from 'vue'
|
|
import SportsStats from './stats.uvue'
|
|
import SportsNotifications from './notifications.uvue'
|
|
|
|
export default {
|
|
components: {
|
|
SportsStats,
|
|
SportsNotifications
|
|
},
|
|
setup() {
|
|
const swiperIndex = ref(0)
|
|
const tabList = [
|
|
{ key: 'stats', name: '运动统计' },
|
|
{ key: 'notifications', name: '通知管理' }
|
|
]
|
|
|
|
const indicatorStyle = computed(() => {
|
|
const tabWidth = 100 / tabList.length
|
|
const left = swiperIndex.value * tabWidth
|
|
return {
|
|
width: `${tabWidth}%`,
|
|
left: `${left}%`
|
|
}
|
|
})
|
|
|
|
const onTabClick = (index: number) => {
|
|
swiperIndex.value = index
|
|
}
|
|
|
|
const onSwiperChange = (e: any) => {
|
|
swiperIndex.value = e.detail.current
|
|
}
|
|
|
|
return {
|
|
swiperIndex,
|
|
tabList,
|
|
indicatorStyle,
|
|
onTabClick,
|
|
onSwiperChange
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.sports-admin-page {
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
padding: 20px;
|
|
background-color: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
margin: 16px;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.swiper-tabs {
|
|
position: relative;
|
|
background-color: #FFF;
|
|
border-bottom: 1px solid #ddd;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.swiper-tabs-item {
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
color: #555;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
.swiper-tabs-item-active {
|
|
color: #007aff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.swiper-tabs-indicator {
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 3px;
|
|
background-color: #007aff;
|
|
transition: left 0.2s ease-in-out;
|
|
}
|
|
|
|
.swiper-view {
|
|
height: 600px; /* Adjust based on content */
|
|
}
|
|
|
|
.swiper-item {
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|