feat: 优化主题配色
This commit is contained in:
richarjiang
@@ -1,41 +1,147 @@
|
||||
<template>
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="管理中心" show-back />
|
||||
<!-- Stats row -->
|
||||
<view class="stats-row">
|
||||
<view v-if="statsLoading" class="stats-shimmer-wrap">
|
||||
<view v-for="i in 3" :key="i" class="stats-shimmer" />
|
||||
|
||||
<!-- Stats summary card -->
|
||||
<view class="stats-card-wrap">
|
||||
<view class="stats-card">
|
||||
<view v-if="statsLoading" class="stats-loading">
|
||||
<view v-for="i in 3" :key="i" class="stat-skeleton" />
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="stat-block">
|
||||
<text class="stat-num">{{ stats.todayBookings }}</text>
|
||||
<text class="stat-sub">今日预约</text>
|
||||
</view>
|
||||
<view class="stat-sep" />
|
||||
<view class="stat-block">
|
||||
<text class="stat-num">{{ stats.totalOrders }}</text>
|
||||
<text class="stat-sub">总订单</text>
|
||||
</view>
|
||||
<view class="stat-sep" />
|
||||
<view class="stat-block">
|
||||
<text class="stat-num">{{ stats.totalBookings }}</text>
|
||||
<text class="stat-sub">总预约</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ stats.todayBookings }}</text>
|
||||
<text class="stat-label">今日预约</text>
|
||||
</view>
|
||||
<view class="stat-divider" />
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ stats.totalOrders }}</text>
|
||||
<text class="stat-label">总订单</text>
|
||||
</view>
|
||||
<view class="stat-divider" />
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ stats.totalBookings }}</text>
|
||||
<text class="stat-label">总预约</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- Nav grid -->
|
||||
<view class="nav-grid">
|
||||
<view
|
||||
v-for="item in navItems"
|
||||
:key="item.path"
|
||||
class="nav-item"
|
||||
@tap="navigate(item.path)"
|
||||
>
|
||||
<text class="nav-icon">{{ item.icon }}</text>
|
||||
<text class="nav-label">{{ item.label }}</text>
|
||||
<!-- Section header: 课程管理 -->
|
||||
<view class="section-header">
|
||||
<text class="section-title">课程管理</text>
|
||||
</view>
|
||||
|
||||
<!-- List: schedule -->
|
||||
<view class="list">
|
||||
<view class="list-item" @tap="navigate('/pages/admin/schedule')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--schedule">
|
||||
<text class="item-icon-text">◇</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">排课管理</text>
|
||||
<text class="item-desc">管理每周课程时段</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" @tap="navigate('/pages/admin/week-template')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--template">
|
||||
<text class="item-icon-text">◈</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">排课模板</text>
|
||||
<text class="item-desc">设置每周课程模板</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Section header: 会员与订单 -->
|
||||
<view class="section-header">
|
||||
<text class="section-title">会员与订单</text>
|
||||
</view>
|
||||
|
||||
<!-- List: members & orders -->
|
||||
<view class="list">
|
||||
<view class="list-item" @tap="navigate('/pages/admin/members')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--members">
|
||||
<text class="item-icon-text">◎</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">会员管理</text>
|
||||
<text class="item-desc">查看所有会员信息</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" @tap="navigate('/pages/admin/orders')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--orders">
|
||||
<text class="item-icon-text">▣</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">订单管理</text>
|
||||
<text class="item-desc">查看所有订单记录</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" @tap="navigate('/pages/admin/card-types')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--card">
|
||||
<text class="item-icon-text">▤</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">卡种管理</text>
|
||||
<text class="item-desc">设置会员卡类型</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Section header: 系统 -->
|
||||
<view class="section-header">
|
||||
<text class="section-title">系统</text>
|
||||
</view>
|
||||
|
||||
<!-- List: settings -->
|
||||
<view class="list">
|
||||
<view class="list-item" @tap="navigate('/pages/admin/studio')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--studio">
|
||||
<text class="item-icon-text">◉</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">工作室设置</text>
|
||||
<text class="item-desc">工作室信息与配置</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 40rpx" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -53,15 +159,6 @@ const adminStore = useAdminStore()
|
||||
const statsLoading = ref(false)
|
||||
const stats = ref<AdminStats>({ todayBookings: 0, totalOrders: 0, totalBookings: 0 })
|
||||
|
||||
const navItems = [
|
||||
{ icon: '📅', label: '排课管理', path: '/pages/admin/schedule' },
|
||||
{ icon: '📋', label: '排课模板', path: '/pages/admin/week-template' },
|
||||
{ icon: '👥', label: '会员管理', path: '/pages/admin/members' },
|
||||
{ icon: '📋', label: '订单管理', path: '/pages/admin/orders' },
|
||||
{ icon: '💳', label: '卡种管理', path: '/pages/admin/card-types' },
|
||||
{ icon: '🏢', label: '工作室设置', path: '/pages/admin/studio' },
|
||||
]
|
||||
|
||||
function navigate(path: string) {
|
||||
uni.navigateTo({ url: path })
|
||||
}
|
||||
@@ -84,101 +181,168 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* ── Page ───────────────────────────────────── */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #1a1a2e;
|
||||
padding-bottom: 60rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* ── Stats row ───────────────────────────── */
|
||||
.stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
margin: 24rpx 24rpx 32rpx;
|
||||
/* ── Stats card ─────────────────────────────── */
|
||||
.stats-card-wrap {
|
||||
padding: 24rpx 24rpx 8rpx;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx 16rpx;
|
||||
}
|
||||
|
||||
.stats-shimmer-wrap {
|
||||
padding: 32rpx 24rpx;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.10);
|
||||
border: 1rpx solid rgba(180, 160, 130, 0.12);
|
||||
}
|
||||
|
||||
.stats-shimmer {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
.stats-loading {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.stat-skeleton {
|
||||
width: 100rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 75%);
|
||||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
animation: shimmer 1.6s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
.stat-block {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
.stat-num {
|
||||
font-size: 44rpx;
|
||||
font-weight: 800;
|
||||
color: #c9a87c;
|
||||
font-weight: 700;
|
||||
color: #4A4035;
|
||||
line-height: 1;
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
.stat-sub {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: #A09080;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
.stat-sep {
|
||||
width: 1rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
height: 56rpx;
|
||||
background: rgba(180, 160, 130, 0.2);
|
||||
}
|
||||
|
||||
/* ── Nav grid ────────────────────────────── */
|
||||
.nav-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
/* ── Section header ─────────────────────────── */
|
||||
.section-header {
|
||||
padding: 32rpx 24rpx 12rpx;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
.section-title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #A09080;
|
||||
letter-spacing: 2rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ── List ───────────────────────────────────── */
|
||||
.list {
|
||||
background: #FFFFFF;
|
||||
margin: 0 24rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.08);
|
||||
border: 1rpx solid rgba(180, 160, 130, 0.1);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
border: 1rpx solid rgba(201, 168, 124, 0.15);
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 24rpx;
|
||||
border-bottom: 1rpx solid rgba(180, 160, 130, 0.1);
|
||||
transition: background 0.15s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
background: rgba(180, 160, 130, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 56rpx;
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 28rpx;
|
||||
.item-icon-wrap {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-icon-text {
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Icon variants — warm muted tones */
|
||||
.icon--schedule { background: linear-gradient(135deg, #8B9E7E, #7A8E6E); }
|
||||
.icon--template { background: linear-gradient(135deg, #A090C0, #9080B0); }
|
||||
.icon--members { background: linear-gradient(135deg, $primary-color, $primary-dark); }
|
||||
.icon--orders { background: linear-gradient(135deg, #7E9EC4, #6E8EB4); }
|
||||
.icon--card { background: linear-gradient(135deg, #C48E7E, #B47E6E); }
|
||||
.icon--studio { background: linear-gradient(135deg, #9E9E7E, #8E8E6E); }
|
||||
|
||||
.item-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1rpx;
|
||||
color: #4A4035;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 24rpx;
|
||||
color: #A09080;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
flex-shrink: 0;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.arrow-text {
|
||||
font-size: 40rpx;
|
||||
color: rgba(180, 160, 130, 0.5);
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user