feat: 完成人员通行一级界面
This commit is contained in:
魏少阳
parent
347181ed31
commit
ba168f84fa
@ -286,6 +286,14 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/personnel-passage/access-authority/access-authority",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/personnel-passage/one-click-open-door/one-click-open-door",
|
"path": "pages/personnel-passage/one-click-open-door/one-click-open-door",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
@ -310,6 +318,14 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/personnel-passage/visitor-invitation/visitor-invitation",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/personnel-passage/visitor-manage/visitor-manage-tab",
|
"path": "pages/personnel-passage/visitor-manage/visitor-manage-tab",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
|
|||||||
@ -120,16 +120,16 @@
|
|||||||
name: '人员通行',
|
name: '人员通行',
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
id: 106,
|
id: 230,
|
||||||
icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png',
|
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
|
||||||
name: '通行权限',
|
name: '门禁管理',
|
||||||
url: '/pages/personnel-passage/traffic-correlation'
|
url: '/pages/personnel-passage/traffic-correlation'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 230,
|
id: 106,
|
||||||
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
|
icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png',
|
||||||
name: '门禁控制',
|
name: '门禁授权',
|
||||||
url: '/pages/personnel-passage/traffic-correlation'
|
url: '/pages/personnel-passage/access-authority/access-authority'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 302,
|
id: 302,
|
||||||
@ -164,7 +164,8 @@
|
|||||||
{
|
{
|
||||||
id: 388,
|
id: 388,
|
||||||
icon: 'https://file.hikmall.com/prod/image/624a69276df1480088661e20cbc0e189.png',
|
icon: 'https://file.hikmall.com/prod/image/624a69276df1480088661e20cbc0e189.png',
|
||||||
name: '访客邀约'
|
name: '访客邀约',
|
||||||
|
url: '/pages/personnel-passage/visitor-invitation/visitor-invitation'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="control-container">
|
<view class="control-container">
|
||||||
<!-- 快捷功能区 -->
|
<!-- 快捷功能区 -->
|
||||||
<view class="quick-actions">
|
<!-- <view class="quick-actions">
|
||||||
<view class="quick-item" style="background-color: #fff7f2">
|
<view class="quick-item" style="background-color: #fff7f2">
|
||||||
<view class="quick-content">
|
<view class="quick-content">
|
||||||
<text class="quick-title">门自动常开</text>
|
<text class="quick-title">门自动常开</text>
|
||||||
@ -25,7 +25,7 @@
|
|||||||
<image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
|
<image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
|
|
||||||
<!-- 搜索框 -->
|
<!-- 搜索框 -->
|
||||||
<view class="search-box">
|
<view class="search-box">
|
||||||
@ -42,34 +42,35 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 设备列表 -->
|
<!-- 设备列表 -->
|
||||||
<view class="device-list"></view>
|
<view class="device-list">
|
||||||
<view class="device-item">
|
<view class="device-item">
|
||||||
<text class="offline-tag">离线</text>
|
<text class="offline-tag">离线</text>
|
||||||
<view class="device-info">
|
<view class="device-info">
|
||||||
<image
|
<image
|
||||||
class="device-icon"
|
class="device-icon"
|
||||||
src="/static/images/icon_one_key_door_key.png"
|
src="/static/images/icon_one_key_door_key.png"
|
||||||
mode="aspectFit"
|
mode="aspectFit"
|
||||||
/>
|
/>
|
||||||
<text class="device-name">DS-K(FU6004429)</text>
|
<text class="device-name">DS-K(FU6004429)</text>
|
||||||
|
</view>
|
||||||
|
<view class="unlock-btn">
|
||||||
|
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="unlock-btn">
|
|
||||||
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="device-item">
|
<view class="device-item">
|
||||||
<text class="offline-tag">离线</text>
|
<text class="offline-tag">离线</text>
|
||||||
<view class="device-info">
|
<view class="device-info">
|
||||||
<image
|
<image
|
||||||
class="device-icon"
|
class="device-icon"
|
||||||
src="/static/images/icon_one_key_door_key.png"
|
src="/static/images/icon_one_key_door_key.png"
|
||||||
mode="aspectFit"
|
mode="aspectFit"
|
||||||
/>
|
/>
|
||||||
<text class="device-name">DS-K(L40959329)</text>
|
<text class="device-name">DS-K(L40959329)</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="unlock-btn">
|
<view class="unlock-btn">
|
||||||
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
|
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -105,75 +106,74 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.quick-actions {
|
// .quick-actions {
|
||||||
display: grid;
|
// display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
// grid-template-columns: 1fr 1fr;
|
||||||
gap: 12px;
|
// gap: 12px;
|
||||||
margin: 12px 0;
|
// margin: 12px 0;
|
||||||
|
|
||||||
.quick-item {
|
// .quick-item {
|
||||||
position: relative;
|
// position: relative;
|
||||||
height: 50px;
|
// height: 50px;
|
||||||
padding: 12px;
|
// padding: 12px;
|
||||||
border-radius: 8px;
|
// border-radius: 8px;
|
||||||
|
|
||||||
&:first-child {
|
// &:first-child {
|
||||||
background-color: #eef4ff;
|
// background-color: #eef4ff;
|
||||||
// background: red;
|
// // background: red;
|
||||||
.quick-icon {
|
// .quick-icon {
|
||||||
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
// background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&:last-child {
|
// &:last-child {
|
||||||
background-color: #fff7f2;
|
// background-color: #fff7f2;
|
||||||
.quick-icon {
|
// .quick-icon {
|
||||||
background: linear-gradient(135deg, #ff9853 0%, #ff7b30 100%);
|
// background: linear-gradient(135deg, #ff9853 0%, #ff7b30 100%);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.quick-content {
|
// .quick-content {
|
||||||
position: relative;
|
// position: relative;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
|
|
||||||
.quick-title {
|
// .quick-title {
|
||||||
font-size: 15px;
|
// font-size: 15px;
|
||||||
font-weight: 500;
|
// font-weight: 500;
|
||||||
color: #333;
|
// color: #333;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.quick-desc {
|
// .quick-desc {
|
||||||
display: block;
|
// display: block;
|
||||||
margin-top: 8px;
|
// margin-top: 8px;
|
||||||
font-size: 11px;
|
// font-size: 11px;
|
||||||
color: #666;
|
// color: #666;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.quick-icon {
|
// .quick-icon {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
right: 0;
|
// right: 0;
|
||||||
width: 45px;
|
// width: 45px;
|
||||||
height: 45px;
|
// height: 45px;
|
||||||
// padding: 8px;
|
// // padding: 8px;
|
||||||
border-radius: 50%;
|
// border-radius: 50%;
|
||||||
transform: translateY(-50%);
|
// transform: translateY(-50%);
|
||||||
|
|
||||||
image {
|
// image {
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
filter: brightness(0) invert(1); // 将图标改为白色
|
// filter: brightness(0) invert(1); // 将图标改为白色
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.search-box {
|
.search-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 16px 0;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
||||||
@ -237,6 +237,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
height: 80px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@ -255,7 +256,7 @@
|
|||||||
|
|
||||||
.unlock-btn {
|
.unlock-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%; /* 改为50% */
|
top: 50%;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -265,11 +266,11 @@
|
|||||||
height: 35px;
|
height: 35px;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transform: translateY(-50%); /* 添加这行来实现精确居中 */
|
transform: translateY(-50%);
|
||||||
|
|
||||||
.unlock-icon {
|
.unlock-icon {
|
||||||
width: 30px;
|
width: 20px;
|
||||||
height: 30px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -281,13 +282,12 @@
|
|||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
|
|
||||||
.device-icon {
|
.device-icon {
|
||||||
width: 50px;
|
width: 40px;
|
||||||
height: 50px;
|
height: 40px;
|
||||||
//background-color: red;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.device-name {
|
.device-name {
|
||||||
margin-top: 4px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|||||||
288
src/pages/personnel-passage/AccessManage/AccessManage.vue
Normal file
288
src/pages/personnel-passage/AccessManage/AccessManage.vue
Normal file
@ -0,0 +1,288 @@
|
|||||||
|
<route lang="json5">
|
||||||
|
{
|
||||||
|
layout: 'default',
|
||||||
|
style: {
|
||||||
|
navigationStyle: 'custom'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 开局引导 -->
|
||||||
|
<view class="guide-section">
|
||||||
|
<view class="guide-title">门禁开局引导</view>
|
||||||
|
<view class="guide-link">点击查看→</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 数据统计 -->
|
||||||
|
<view class="stats-section">
|
||||||
|
<view class="stats-item">
|
||||||
|
<text class="number">0</text>
|
||||||
|
<text class="label">团队人员</text>
|
||||||
|
</view>
|
||||||
|
<view class="stats-item">
|
||||||
|
<text class="number">0</text>
|
||||||
|
<text class="label">陌生人</text>
|
||||||
|
</view>
|
||||||
|
<view class="stats-item">
|
||||||
|
<text class="number">0</text>
|
||||||
|
<text class="label">访客</text>
|
||||||
|
<text class="sub-label">今日开门次数统计</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 同步提示 -->
|
||||||
|
<view class="sync-tip">
|
||||||
|
<view class="dot"></view>
|
||||||
|
<text class="text">您有6个人员、15条信息未同步到设备</text>
|
||||||
|
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 功能列表 -->
|
||||||
|
<view class="feature-grid">
|
||||||
|
<view class="feature-item" v-for="item in features" :key="item.name">
|
||||||
|
<image class="icon" :src="item.icon" mode="aspectFit" />
|
||||||
|
<text class="name">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 更多应用 -->
|
||||||
|
<view class="more-section">
|
||||||
|
<text class="section-title">更多应用</text>
|
||||||
|
<view class="more-grid">
|
||||||
|
<view class="more-item" v-for="item in moreApps" :key="item.name">
|
||||||
|
<view class="content">
|
||||||
|
<view class="name">
|
||||||
|
<text>{{ item.name }}</text>
|
||||||
|
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
<text class="desc">{{ item.desc }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: 'https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png',
|
||||||
|
name: '人员管理'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'https://file.hikmall.com/prod/image/cf46656ec73b404891e2b46b57ff5fc2.png',
|
||||||
|
name: '门禁授权'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'https://file.hikmall.com/prod/image/0526d084da4a49579f832dd4588dcb16.png',
|
||||||
|
name: '通行记录'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'https://file.hikmall.com/prod/image/7ea5f88d404442eeb958fbe0904777d1.png',
|
||||||
|
name: '消息订阅'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png',
|
||||||
|
name: '门自动常开'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const moreApps = [
|
||||||
|
{
|
||||||
|
name: '访客',
|
||||||
|
desc: '访客人员，临时通行'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '信息发布',
|
||||||
|
desc: '广告、欢迎词发布到屏幕'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background-color: #f5f6fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px;
|
||||||
|
margin-right: 32px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.guide-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-link {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2b5cff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px;
|
||||||
|
margin-right: 32px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.stats-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.number {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-label {
|
||||||
|
position: absolute;
|
||||||
|
right: -15px;
|
||||||
|
bottom: -20px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-tip {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px;
|
||||||
|
margin-right: 32px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
.dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
margin-right: 8px;
|
||||||
|
background: #ff4d4f;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-right: 32px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.feature-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-section {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
margin-right: 32px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: block;
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
.more-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 10px;
|
||||||
|
background: #f8f9fc;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -9,8 +9,19 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="passage-container">
|
<view class="passage-container">
|
||||||
<!-- 替换原来的 banner 部分为 AccessSwiper -->
|
<TopNavigation title="门禁授权" />
|
||||||
<AccessSwiper class="mt-4" />
|
|
||||||
|
<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-actions">
|
||||||
@ -30,6 +41,38 @@
|
|||||||
</view>
|
</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-item">
|
||||||
<view class="feature-left">
|
<view class="feature-left">
|
||||||
@ -38,46 +81,26 @@
|
|||||||
src="https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png"
|
src="https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png"
|
||||||
/>
|
/>
|
||||||
<view class="feature-text">
|
<view class="feature-text">
|
||||||
<text class="feature-title">人员管理</text>
|
<text class="feature-title">人员信息录入</text>
|
||||||
<text class="feature-desc">团队管理内录入人员信息/人脸/指纹/卡</text>
|
<text class="feature-desc">团队管理录入人员信息及通行凭证信息</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<image class="arrow" src="/static/images/icon_black_right.png" />
|
<image class="arrow" src="/static/images/icon_black_right.png" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 通行权限组 -->
|
<!-- 通行权限组 -->
|
||||||
<view class="access-authority-group">
|
<view class="feature-item">
|
||||||
<view class="feature-item">
|
<view class="feature-left">
|
||||||
<view class="feature-left">
|
<image
|
||||||
<image
|
class="feature-icon"
|
||||||
class="feature-icon"
|
src="https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png"
|
||||||
src="https://file.hikmall.com/prod/image/cf46656ec73b404891e2b46b57ff5fc2.png"
|
/>
|
||||||
/>
|
<view class="feature-text">
|
||||||
<view class="feature-text">
|
<text class="feature-title">门禁权限组管理</text>
|
||||||
<text class="feature-title">通行权限组</text>
|
<text class="feature-desc">配置人员通行的门与时间规则</text>
|
||||||
<text class="feature-desc">配置人员在某段时间能开某个门</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<image class="arrow" src="/static/images/icon_black_right.png" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 时间计划和门禁点分组 -->
|
|
||||||
<view class="sub-features">
|
|
||||||
<view class="sub-item">
|
|
||||||
<image
|
|
||||||
class="sub-icon"
|
|
||||||
src="https://file.hikmall.com/prod/image/0526d084da4a49579f832dd4588dcb16.png"
|
|
||||||
/>
|
|
||||||
<text>通行时间计划</text>
|
|
||||||
</view>
|
|
||||||
<view class="sub-item">
|
|
||||||
<image
|
|
||||||
class="sub-icon"
|
|
||||||
src="https://file.hikmall.com/prod/image/7ea5f88d404442eeb958fbe0904777d1.png"
|
|
||||||
/>
|
|
||||||
<text>门禁点分组</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<image class="arrow" src="/static/images/icon_black_right.png" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 权限查询 -->
|
<!-- 权限查询 -->
|
||||||
@ -145,40 +168,35 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner {
|
.visitor-card {
|
||||||
padding: 20px;
|
height: 100%;
|
||||||
margin-bottom: 16px;
|
padding: 16px 16px;
|
||||||
|
margin-top: 12px;
|
||||||
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
|
||||||
.banner-content {
|
.card-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
.banner-text {
|
.card-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 4px;
|
||||||
|
|
||||||
.banner-title {
|
.card-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-desc {
|
.card-desc {
|
||||||
font-size: 14px;
|
font-size: 10px;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-btn {
|
|
||||||
padding: 6px 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -246,6 +264,73 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
//.feature-list {
|
||||||
// padding: 4px 0;
|
// padding: 4px 0;
|
||||||
// background-color: #fff;
|
// background-color: #fff;
|
||||||
@ -12,7 +12,7 @@
|
|||||||
<TopNavigation :title="titleTab[curIndex]"></TopNavigation>
|
<TopNavigation :title="titleTab[curIndex]"></TopNavigation>
|
||||||
<scroll-view class="flex-1 box-border" scroll-y>
|
<scroll-view class="flex-1 box-border" scroll-y>
|
||||||
<view v-if="curIndex == 0">
|
<view v-if="curIndex == 0">
|
||||||
<AccessAuthority />
|
<AccessManage />
|
||||||
</view>
|
</view>
|
||||||
<view v-else-if="curIndex == 1">
|
<view v-else-if="curIndex == 1">
|
||||||
<AccessControl />
|
<AccessControl />
|
||||||
@ -24,14 +24,15 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
// import { onLoad } from '@dcloudio/uni-app'
|
// import { onLoad } from '@dcloudio/uni-app'
|
||||||
import AccessAuthority from './AccessAuthority/AccessAuthority.vue'
|
// import AccessAuthority from './AccessAuthority/AccessAuthority.vue'
|
||||||
|
import AccessManage from './AccessManage/AccessManage.vue'
|
||||||
import AccessControl from './AccessControl/AccessControl.vue'
|
import AccessControl from './AccessControl/AccessControl.vue'
|
||||||
import { TabBarItem } from '@/typings'
|
import { TabBarItem } from '@/typings'
|
||||||
// const pages = [AccessAuthority, AccessControl]
|
// const pages = [AccessAuthority, AccessControl]
|
||||||
const titleTab = ['通行权限', '门禁控制']
|
const titleTab = ['门禁管理', '门禁控制']
|
||||||
const list = ref<Array<TabBarItem>>([
|
const list = ref<Array<TabBarItem>>([
|
||||||
{
|
{
|
||||||
title: '通行权限',
|
title: '门禁管理',
|
||||||
icon: 'home'
|
icon: 'home'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
<TopNavigation title="通行记录"></TopNavigation>
|
<TopNavigation title="通行记录"></TopNavigation>
|
||||||
<view class="record-container">
|
<view class="record-container">
|
||||||
<!-- 快捷功能区 -->
|
<!-- 快捷功能区 -->
|
||||||
<view class="quick-actions">
|
<!-- <view class="quick-actions">
|
||||||
<view class="quick-item" style="background-color: #fff7f2">
|
<view class="quick-item" style="background-color: #fff7f2">
|
||||||
<view class="quick-content">
|
<view class="quick-content">
|
||||||
<text class="quick-title">通行消息提醒</text>
|
<text class="quick-title">通行消息提醒</text>
|
||||||
@ -26,7 +26,7 @@
|
|||||||
<image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
|
<image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
|
|
||||||
<!-- 时间筛选 -->
|
<!-- 时间筛选 -->
|
||||||
<view class="time-filter">
|
<view class="time-filter">
|
||||||
@ -118,74 +118,74 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.quick-actions {
|
// .quick-actions {
|
||||||
display: grid;
|
// display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
// grid-template-columns: 1fr 1fr;
|
||||||
gap: 12px;
|
// gap: 12px;
|
||||||
margin: 12px 0;
|
// margin: 12px 0;
|
||||||
|
|
||||||
.quick-item {
|
// .quick-item {
|
||||||
position: relative;
|
// position: relative;
|
||||||
height: 60px;
|
// height: 60px;
|
||||||
padding: 12px;
|
// padding: 12px;
|
||||||
border-radius: 8px;
|
// border-radius: 8px;
|
||||||
|
|
||||||
&:first-child {
|
// &:first-child {
|
||||||
background-color: #eef4ff;
|
// background-color: #eef4ff;
|
||||||
// background: red;
|
// // background: red;
|
||||||
.quick-icon {
|
// .quick-icon {
|
||||||
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
// background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&:last-child {
|
// &:last-child {
|
||||||
background-color: #fff7f2;
|
// background-color: #fff7f2;
|
||||||
.quick-icon {
|
// .quick-icon {
|
||||||
background: linear-gradient(135deg, #ff9853 0%, #ff7b30 100%);
|
// background: linear-gradient(135deg, #ff9853 0%, #ff7b30 100%);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.quick-content {
|
// .quick-content {
|
||||||
position: relative;
|
// position: relative;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
|
|
||||||
.quick-title {
|
// .quick-title {
|
||||||
position: relative;
|
// position: relative;
|
||||||
z-index: 2;
|
// z-index: 2;
|
||||||
font-size: 15px;
|
// font-size: 15px;
|
||||||
font-weight: 500;
|
// font-weight: 500;
|
||||||
color: #333;
|
// color: #333;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.quick-desc {
|
// .quick-desc {
|
||||||
position: relative;
|
// position: relative;
|
||||||
z-index: 2;
|
// z-index: 2;
|
||||||
display: block;
|
// display: block;
|
||||||
margin-top: 8px;
|
// margin-top: 8px;
|
||||||
margin-right: 20px;
|
// margin-right: 20px;
|
||||||
font-size: 11px;
|
// font-size: 11px;
|
||||||
color: #666;
|
// color: #666;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.quick-icon {
|
// .quick-icon {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
right: 0;
|
// right: 0;
|
||||||
z-index: 1;
|
// z-index: 1;
|
||||||
width: 45px;
|
// width: 45px;
|
||||||
height: 45px;
|
// height: 45px;
|
||||||
border-radius: 50%;
|
// border-radius: 50%;
|
||||||
transform: translateY(-50%);
|
// transform: translateY(-50%);
|
||||||
|
|
||||||
image {
|
// image {
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
filter: brightness(0) invert(1);
|
// filter: brightness(0) invert(1);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.time-filter {
|
.time-filter {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -0,0 +1,259 @@
|
|||||||
|
<route lang="json5">
|
||||||
|
{
|
||||||
|
layout: 'default',
|
||||||
|
style: {
|
||||||
|
navigationStyle: 'custom'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<TopNavigation title="访客邀约">
|
||||||
|
<text class="nav-right-text">生成记录</text>
|
||||||
|
</TopNavigation>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 功能区域 -->
|
||||||
|
<view class="function-area">
|
||||||
|
<view class="function-item">
|
||||||
|
<text class="title">访客码</text>
|
||||||
|
<text class="desc">一键生成，分享权限，扫码通行</text>
|
||||||
|
</view>
|
||||||
|
<view class="function-item">
|
||||||
|
<text class="title">新建邀约</text>
|
||||||
|
<text class="desc">填写表单，短信邀约，灵活通行</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 访客通行凭证 -->
|
||||||
|
<view class="visitor-pass">
|
||||||
|
<view class="pass-header">
|
||||||
|
<image class="pass-icon" src="/static/images/visitor/icon_pass.png" mode="aspectFit" />
|
||||||
|
<text class="title">访客通行凭证</text>
|
||||||
|
<text class="help" @click="showHelp">如何生成访客密码？</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 表单内容 -->
|
||||||
|
<view class="form-content">
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">到访地址</text>
|
||||||
|
<view class="value">
|
||||||
|
<text>19104656的互联</text>
|
||||||
|
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">通行方式</text>
|
||||||
|
<view class="value">
|
||||||
|
<text>二维码</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item required">
|
||||||
|
<text class="label">通行有效时段</text>
|
||||||
|
<view class="value">
|
||||||
|
<text>24小时内</text>
|
||||||
|
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item required">
|
||||||
|
<text class="label">通行次数</text>
|
||||||
|
<view class="value">
|
||||||
|
<text>不限制</text>
|
||||||
|
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<text class="tip-text">限制访客在每个门禁点的通行次数</text>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">访客姓名</text>
|
||||||
|
<input class="input" type="text" placeholder="请输入" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">访客手机号</text>
|
||||||
|
<input class="input" type="number" placeholder="请输入" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="bottom-bar">
|
||||||
|
<button class="submit-btn" @click="handleSubmit">新建邀约</button>
|
||||||
|
<button class="submit-btn" @click="handleSubmit">立即生成</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const showHelp = () => {
|
||||||
|
// 显示帮助信息
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
// 处理提交
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background-color: #f5f6fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.function-area {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin: 0 32px 12px 0;
|
||||||
|
|
||||||
|
.function-item {
|
||||||
|
flex: 1;
|
||||||
|
padding: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.visitor-pass {
|
||||||
|
margin: 0 32px 0 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.pass-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
|
||||||
|
.pass-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2b5cff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-content {
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
|
||||||
|
&.required .label::before {
|
||||||
|
margin-right: 4px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
content: '*';
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 12px;
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-text {
|
||||||
|
display: block;
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-bar {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 16px;
|
||||||
|
padding-bottom: calc(8px + constant(safe-area-inset-bottom));
|
||||||
|
padding-bottom: calc(8px + env(safe-area-inset-bottom));
|
||||||
|
background: #fff;
|
||||||
|
border-top: 1px solid #f5f5f5;
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 44px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 44px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
background: #2b5cff;
|
||||||
|
border-radius: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-right-text {
|
||||||
|
padding: 4px 16px 4px 0;
|
||||||
|
margin-right: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
2
src/types/uni-pages.d.ts
vendored
2
src/types/uni-pages.d.ts
vendored
@ -35,9 +35,11 @@ interface NavigateToOptions {
|
|||||||
"/pages/attendance/attendance-add-group/attendance-time" |
|
"/pages/attendance/attendance-add-group/attendance-time" |
|
||||||
"/pages/attendance/attendance-add-group/outside-rules" |
|
"/pages/attendance/attendance-add-group/outside-rules" |
|
||||||
"/pages/attendance/attendance-add-group/special-date-set" |
|
"/pages/attendance/attendance-add-group/special-date-set" |
|
||||||
|
"/pages/personnel-passage/access-authority/access-authority" |
|
||||||
"/pages/personnel-passage/one-click-open-door/one-click-open-door" |
|
"/pages/personnel-passage/one-click-open-door/one-click-open-door" |
|
||||||
"/pages/personnel-passage/password-open-door/password-open-door" |
|
"/pages/personnel-passage/password-open-door/password-open-door" |
|
||||||
"/pages/personnel-passage/traffic-record/traffic-record" |
|
"/pages/personnel-passage/traffic-record/traffic-record" |
|
||||||
|
"/pages/personnel-passage/visitor-invitation/visitor-invitation" |
|
||||||
"/pages/personnel-passage/visitor-manage/visitor-manage-tab";
|
"/pages/personnel-passage/visitor-manage/visitor-manage-tab";
|
||||||
}
|
}
|
||||||
interface RedirectToOptions extends NavigateToOptions {}
|
interface RedirectToOptions extends NavigateToOptions {}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user