Initial commit of akmon project

pages/admins/sports/index.uvue

@@ -0,0 +1,143 @@
+<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>