<template>
|
<view class="page-shell">
|
<view class="bg-glow"></view>
|
|
<view class="header-bar">
|
<view class="title-zone">
|
<image :src="titleIcon" class="title-icon" mode="aspectFit"></image>
|
<text class="page-title">{{ title }}</text>
|
</view>
|
|
<view class="back-btn" @click="goHome">
|
<image :src="backArrowIcon" class="back-arrow" mode="aspectFit"></image>
|
<text class="back-btn-text">返回预约端</text>
|
</view>
|
</view>
|
|
<view class="content-wrap">
|
<slot />
|
</view>
|
|
<view class="footer-info-wrap">
|
<slot name="footer-info" />
|
</view>
|
|
<view v-if="showBottomNav" class="bottom-nav">
|
<view class="nav-item" :class="{ active: activeTab === 'home' }" @click="goAdminHome">
|
<view class="nav-icon-box" :class="{ active: activeTab === 'home' }">
|
<image :src="homeNavIcon" class="nav-icon" mode="aspectFit"></image>
|
</view>
|
<text class="nav-text">首页</text>
|
</view>
|
|
<view class="nav-item" :class="{ active: activeTab === 'records' }" @click="goRecords">
|
<view class="nav-icon-box" :class="{ active: activeTab === 'records' }">
|
<image :src="recordsNavIcon" class="nav-icon" mode="aspectFit"></image>
|
</view>
|
<text class="nav-text">历史记录</text>
|
</view>
|
|
<view class="nav-item" :class="{ active: activeTab === 'config' }" @click="goConfig">
|
<view class="nav-icon-box" :class="{ active: activeTab === 'config' }">
|
<image :src="configNavIcon" class="nav-icon" mode="aspectFit"></image>
|
</view>
|
<text class="nav-text">配置管理</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import titleIcon from '../../static/admin-home/PpVQg.png';
|
import backArrowIcon from '../../static/admin-home/Dgd7x.png';
|
import homeNavIcon from '../../static/admin-home/myhDj3.png';
|
import recordsNavIcon from '../../static/admin-home/v4oODO.png';
|
import configNavIcon from '../../static/admin-home/iRGV0L.png';
|
|
const props = defineProps({
|
title: {
|
type: String,
|
default: '自主访客登记管理端',
|
},
|
activeTab: {
|
type: String,
|
default: 'home',
|
},
|
showBottomNav: {
|
type: Boolean,
|
default: true,
|
},
|
});
|
|
const goHome = () => {
|
uni.reLaunch({
|
url: '/pages/home/index',
|
});
|
};
|
|
const goAdminHome = () => {
|
if (props.activeTab === 'home') return;
|
uni.reLaunch({
|
url: '/pages/admin-home/index',
|
});
|
};
|
|
const goRecords = () => {
|
if (props.activeTab === 'records') return;
|
uni.reLaunch({
|
url: '/pages/admin-records/index',
|
});
|
};
|
|
const goConfig = () => {
|
if (props.activeTab === 'config') return;
|
uni.reLaunch({
|
url: '/pages/admin-config/index',
|
});
|
};
|
</script>
|
|
<style scoped>
|
.page-shell {
|
position: relative;
|
width: 1080px;
|
min-height: 1920px;
|
box-sizing: border-box;
|
padding: 30px 36px 40px;
|
background: linear-gradient(180deg, #3B78FF 0%, #2860E8 50%, #163EBC 100%);
|
overflow: hidden;
|
}
|
|
.bg-glow {
|
position: absolute;
|
left: -128px;
|
top: 412px;
|
width: 300px;
|
height: 300px;
|
border-radius: 50%;
|
background: rgba(127, 177, 255, 0.1);
|
filter: blur(50px);
|
pointer-events: none;
|
}
|
|
.header-bar {
|
position: relative;
|
z-index: 1;
|
width: 100%;
|
height: 88px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 24px;
|
}
|
|
.title-zone {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.title-icon {
|
width: 22px;
|
height: 22px;
|
}
|
|
.page-title {
|
font-family: Inter, sans-serif;
|
font-size: 30px;
|
font-weight: 700;
|
line-height: 1.2;
|
color: #FFFFFF;
|
}
|
|
.back-btn {
|
height: 46px;
|
padding: 0 20px;
|
border-radius: 23px;
|
background: rgba(255, 255, 255, 0.14);
|
border: 1px solid rgba(255, 255, 255, 0.26);
|
box-shadow: 0 10px 22px rgba(15, 46, 133, 0.14);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 8px;
|
}
|
|
.back-arrow {
|
width: 20px;
|
height: 20px;
|
}
|
|
.back-btn-text {
|
font-family: Inter, sans-serif;
|
font-size: 16px;
|
font-weight: 600;
|
color: #FFFFFF;
|
}
|
|
.content-wrap {
|
position: relative;
|
z-index: 1;
|
min-height: 1536px;
|
display: flex;
|
flex-direction: column;
|
gap: 24px;
|
}
|
|
.footer-info-wrap {
|
position: relative;
|
z-index: 1;
|
min-height: 22px;
|
margin-top: 24px;
|
}
|
|
.bottom-nav {
|
position: relative;
|
z-index: 1;
|
width: 100%;
|
height: 132px;
|
margin-top: 24px;
|
border-radius: 30px;
|
background: #FFFFFF;
|
border: 1px solid #E7EDF8;
|
box-shadow: 0 12px 28px rgba(11, 23, 48, 0.08);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 18px 22px;
|
box-sizing: border-box;
|
}
|
|
.nav-item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
gap: 8px;
|
}
|
|
.nav-icon-box {
|
width: 46px;
|
height: 46px;
|
border-radius: 16px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.nav-icon-box.active {
|
background: #2F6BFF;
|
box-shadow: 0 8px 18px rgba(47, 107, 255, 0.15);
|
}
|
|
.nav-icon {
|
width: 26px;
|
height: 26px;
|
display: block;
|
filter: brightness(0) saturate(100%) invert(58%) sepia(12%) saturate(514%) hue-rotate(184deg) brightness(91%) contrast(88%);
|
}
|
|
.nav-text {
|
font-family: Inter, sans-serif;
|
font-size: 14px;
|
font-weight: 600;
|
color: #8A97B2;
|
}
|
|
.nav-item.active .nav-text {
|
color: #2F6BFF;
|
font-weight: 700;
|
}
|
|
.nav-item.active .nav-icon {
|
filter: brightness(0) saturate(100%) invert(100%);
|
}
|
</style>
|
