84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from "vue";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
import { contentTabs } from "./shared";
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
const activeTab = computed(() => (route.meta.contentTab as string) || "home");
|
||
|
||
function switchTab(routeName: string) {
|
||
router.push({ name: routeName });
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<el-card class="panel-card" shadow="never">
|
||
<div class="filters-row" style="justify-content: space-between;">
|
||
<div>
|
||
<div style="font-size: 18px; font-weight: 700;">内容中心</div>
|
||
<div style="color: var(--admin-text-subtle); margin-top: 6px;">
|
||
按模块拆分首页内容、协议、站内文案和帮助文章，避免单页堆叠导致维护效率下降。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card class="panel-card" shadow="never">
|
||
<div class="content-tabs">
|
||
<button
|
||
v-for="tab in contentTabs"
|
||
:key="tab.key"
|
||
type="button"
|
||
:class="['content-tabs__item', activeTab === tab.key ? 'content-tabs__item--active' : '']"
|
||
@click="switchTab(tab.routeName)"
|
||
>
|
||
<div class="content-tabs__label">{{ tab.label }}</div>
|
||
<div class="content-tabs__desc">{{ tab.desc }}</div>
|
||
</button>
|
||
</div>
|
||
</el-card>
|
||
|
||
<router-view />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.content-tabs {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.content-tabs__item {
|
||
border: 1px solid var(--admin-border);
|
||
border-radius: 16px;
|
||
background: linear-gradient(180deg, rgba(255, 251, 244, 0.78) 0%, rgba(255, 255, 255, 0.96) 100%);
|
||
padding: 16px 18px;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.content-tabs__item--active {
|
||
border-color: rgba(195, 149, 62, 0.42);
|
||
box-shadow: 0 10px 24px rgba(193, 140, 29, 0.12);
|
||
background: linear-gradient(180deg, rgba(255, 249, 237, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
|
||
}
|
||
|
||
.content-tabs__label {
|
||
color: var(--admin-text);
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.content-tabs__desc {
|
||
margin-top: 8px;
|
||
color: var(--admin-text-subtle);
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
</style>
|