416 lines
9.7 KiB
Vue
416 lines
9.7 KiB
Vue
<route lang="json5" type="page">
|
||
{
|
||
layout: 'default',
|
||
style: {
|
||
navigationStyle: 'custom'
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view class="passage-container">
|
||
<TopNavigation title="门禁授权" />
|
||
|
||
<view class="visitor-card">
|
||
<view class="card-content">
|
||
<view class="card-left">
|
||
<text class="card-title">访客人员，临时通行</text>
|
||
<text class="card-desc">使用访客管理，来访轻松搞定</text>
|
||
</view>
|
||
<!-- <view class="card-right">
|
||
<image src="/static/images/visitor-illustration.png" mode="aspectFit" />
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 权限组快捷入口 -->
|
||
<view class="quick-actions">
|
||
<view class="quick-item">
|
||
<view class="quick-content">
|
||
<text class="quick-title">添加权限组</text>
|
||
<text class="quick-desc">门禁授权</text>
|
||
<image class="quick-icon" src="/static/images/icon_add_group.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<view class="quick-item">
|
||
<view class="quick-content">
|
||
<text class="quick-title">下发权限</text>
|
||
<text class="quick-desc">同步权限到设备</text>
|
||
<image class="quick-icon" src="/static/images/icon_publish.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="remind-card">
|
||
<view class="card-header">
|
||
<view class="header-left">
|
||
<image class="user-icon" src="/static/images/icon_user.png" mode="aspectFit" />
|
||
<text class="user-count">6</text>
|
||
</view>
|
||
<text class="check-text">查看未同步信息 ></text>
|
||
</view>
|
||
<view class="stats-container">
|
||
<view class="stat-item">
|
||
<text class="stat-num">4</text>
|
||
<text class="stat-label">人员/通行规则</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-num">0</text>
|
||
<text class="stat-label">人脸</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-num">7</text>
|
||
<text class="stat-label">指纹</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-num">0</text>
|
||
<text class="stat-label">卡片</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-num">4</text>
|
||
<text class="stat-label">密码</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 人员管理 -->
|
||
<view class="feature-item">
|
||
<view class="feature-left">
|
||
<image
|
||
class="feature-icon"
|
||
src="https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png"
|
||
/>
|
||
<view class="feature-text">
|
||
<text class="feature-title">人员信息录入</text>
|
||
<text class="feature-desc">团队管理录入人员信息及通行凭证信息</text>
|
||
</view>
|
||
</view>
|
||
<image class="arrow" src="/static/images/icon_black_right.png" />
|
||
</view>
|
||
|
||
<!-- 通行权限组 -->
|
||
<view class="feature-item">
|
||
<view class="feature-left">
|
||
<image
|
||
class="feature-icon"
|
||
src="https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png"
|
||
/>
|
||
<view class="feature-text">
|
||
<text class="feature-title">门禁权限组管理</text>
|
||
<text class="feature-desc">配置人员通行的门与时间规则</text>
|
||
</view>
|
||
</view>
|
||
<image class="arrow" src="/static/images/icon_black_right.png" />
|
||
</view>
|
||
|
||
<!-- 权限查询 -->
|
||
<view class="feature-item">
|
||
<view class="feature-left">
|
||
<image
|
||
class="feature-icon"
|
||
src="https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png"
|
||
/>
|
||
<view class="feature-text">
|
||
<text class="feature-title">权限查询</text>
|
||
<text class="feature-desc">查询人员通行权限，与信息下发状态</text>
|
||
</view>
|
||
</view>
|
||
<image class="arrow" src="/static/images/icon_black_right.png" />
|
||
</view>
|
||
|
||
<!-- 下发记录 -->
|
||
<view class="feature-item">
|
||
<view class="feature-left">
|
||
<image
|
||
class="feature-icon"
|
||
src="https://file.hikmall.com/prod/image/e6860e8e5cc64369accadae5347fb0c1.png"
|
||
/>
|
||
<view class="feature-text">
|
||
<text class="feature-title">下发记录</text>
|
||
<text class="feature-desc">查询下发状态与结果</text>
|
||
</view>
|
||
</view>
|
||
<image class="arrow" src="/static/images/icon_black_right.png" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 根据当前组件加载 -->
|
||
<component :is="currentComponent" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
|
||
import AccessSwiper from './components/AccessSwiper.vue'
|
||
|
||
const currentComponent = ref('') // 用于跟踪当前加载的组件
|
||
|
||
const navigateTo = page => {
|
||
currentComponent.value = page // 设置当前组件
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.passage-container {
|
||
min-height: 100vh;
|
||
padding: 0 16px;
|
||
background-color: #f5f6fa;
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
gap: 8px; // 图标之间的间距
|
||
align-items: end;
|
||
|
||
.icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
|
||
.visitor-card {
|
||
height: 100%;
|
||
padding: 16px 16px;
|
||
margin-top: 12px;
|
||
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
||
border-radius: 12px;
|
||
|
||
.card-content {
|
||
display: flex;
|
||
align-items: start;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
color: #fff;
|
||
|
||
.card-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
|
||
.card-title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 10px;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.quick-actions {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
margin: 12px 0;
|
||
|
||
.quick-item {
|
||
position: relative;
|
||
height: 50px;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
|
||
&:first-child {
|
||
background-color: #eef4ff;
|
||
// background: red;
|
||
.quick-icon {
|
||
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
||
}
|
||
}
|
||
|
||
&:last-child {
|
||
background-color: #fff7f2;
|
||
.quick-icon {
|
||
background: linear-gradient(135deg, #ff9853 0%, #ff7b30 100%);
|
||
}
|
||
}
|
||
|
||
.quick-content {
|
||
position: relative;
|
||
height: 100%;
|
||
|
||
.quick-title {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.quick-desc {
|
||
display: block;
|
||
margin-top: 8px;
|
||
font-size: 11px;
|
||
color: #666;
|
||
}
|
||
|
||
.quick-icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
width: 45px;
|
||
height: 45px;
|
||
// padding: 8px;
|
||
border-radius: 50%;
|
||
transform: translateY(-50%);
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
filter: brightness(0) invert(1); // 将图标改为白色
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.remind-card {
|
||
height: 100%;
|
||
padding: 12px 16px;
|
||
margin-bottom: 12px;
|
||
color: #fff;
|
||
background-color: white;
|
||
border-radius: 12px;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
|
||
.header-left {
|
||
display: flex;
|
||
gap: 4px;
|
||
align-items: center;
|
||
padding: 4px 8px;
|
||
background-color: #f5f6fa;
|
||
border-radius: 5px;
|
||
|
||
.user-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.user-count {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.check-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.stats-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.stat-num {
|
||
margin-bottom: 4px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 11px;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//.feature-list {
|
||
// padding: 4px 0;
|
||
// background-color: #fff;
|
||
//border-radius: 12px;
|
||
|
||
.access-authority-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 12px;
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.feature-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px;
|
||
margin-bottom: 12px;
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
//border-bottom: 1px solid #f5f5f5;
|
||
|
||
.feature-left {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
|
||
.feature-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.feature-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
|
||
.feature-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.feature-desc {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.arrow {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
//}
|
||
|
||
.sub-features {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
padding: 0 16px 12px 16px;
|
||
|
||
.sub-item {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
padding: 12px;
|
||
background-color: #f5f6fa;
|
||
border-radius: 8px;
|
||
|
||
.sub-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
text {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|