feat: 完成门禁控制UI
This commit is contained in:
魏少阳
parent
18b4e12ea7
commit
88c2d3bf9e
@ -286,6 +286,13 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/personnel-passage/access-control/access-control",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"subPackages": []
|
"subPackages": []
|
||||||
|
|||||||
@ -128,7 +128,8 @@
|
|||||||
{
|
{
|
||||||
id: 230,
|
id: 230,
|
||||||
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
|
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
|
||||||
name: '门禁控制'
|
name: '门禁控制',
|
||||||
|
url: '/pages/personnel-passage/access-control/access-control'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 302,
|
id: 302,
|
||||||
|
|||||||
352
src/pages/personnel-passage/access-control/access-control.vue
Normal file
352
src/pages/personnel-passage/access-control/access-control.vue
Normal file
@ -0,0 +1,352 @@
|
|||||||
|
<route lang="json5">
|
||||||
|
{
|
||||||
|
type: 'page',
|
||||||
|
style: {
|
||||||
|
navigationStyle: 'custom'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="control-container">
|
||||||
|
<TopNavigation title="门禁控制">
|
||||||
|
<view class="header-right mr-4">
|
||||||
|
<image class="icon" src="/static/images/icon_nav_more.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</TopNavigation>
|
||||||
|
|
||||||
|
<!-- 快捷功能区 -->
|
||||||
|
<view class="quick-actions">
|
||||||
|
<view class="quick-item" style="background-color: #fff7f2">
|
||||||
|
<view class="quick-content">
|
||||||
|
<text class="quick-title">门自动常开</text>
|
||||||
|
<text class="quick-desc">自动常开自由畅行</text>
|
||||||
|
<image class="quick-icon" src="/static/images/icon_door_auto.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="quick-item" style="background-color: #eef4ff">
|
||||||
|
<view class="quick-content">
|
||||||
|
<text class="quick-title">手机开门</text>
|
||||||
|
<text class="quick-desc">轻松解锁每一刻</text>
|
||||||
|
<image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<view class="search-box">
|
||||||
|
<image class="search-icon" src="/static/images/icon_search.png" mode="aspectFit" />
|
||||||
|
<input type="text" placeholder="输入门禁点名称搜索" placeholder-class="placeholder" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 标签切换 -->
|
||||||
|
<view class="tabs">
|
||||||
|
<view class="tab-wrapper" v-for="(tab, index) in tabs" :key="index" @click="switchTab(index)">
|
||||||
|
<text class="tab-item" :class="{ active: activeTab === index }">{{ tab }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="tab-line" :style="{ transform: `translateX(${activeTab * 56}px)` }"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 设备列表 -->
|
||||||
|
<view class="device-list">
|
||||||
|
<view class="device-item">
|
||||||
|
<text class="offline-tag">离线</text>
|
||||||
|
<view class="device-info">
|
||||||
|
<image
|
||||||
|
class="device-icon"
|
||||||
|
src="/static/images/icon_one_key_door_key.png"
|
||||||
|
mode="aspectFit"
|
||||||
|
/>
|
||||||
|
<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 class="device-item">
|
||||||
|
<text class="offline-tag">离线</text>
|
||||||
|
<view class="device-info">
|
||||||
|
<image
|
||||||
|
class="device-icon"
|
||||||
|
src="/static/images/icon_one_key_door_key.png"
|
||||||
|
mode="aspectFit"
|
||||||
|
/>
|
||||||
|
<text class="device-name">DS-K(L40959329)</text>
|
||||||
|
</view>
|
||||||
|
<view class="unlock-btn">
|
||||||
|
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部导航 -->
|
||||||
|
<view class="tab-bar">
|
||||||
|
<view class="tab-item">
|
||||||
|
<image class="tab-icon" src="/static/images/icon_passage.png" mode="aspectFit" />
|
||||||
|
<text>通行权限</text>
|
||||||
|
</view>
|
||||||
|
<view class="tab-item active">
|
||||||
|
<image class="tab-icon" src="/static/images/icon_control_active.png" mode="aspectFit" />
|
||||||
|
<text>门禁控制</text>
|
||||||
|
</view>
|
||||||
|
<view class="tab-item">
|
||||||
|
<image class="tab-icon" src="/static/images/icon_record.png" mode="aspectFit" />
|
||||||
|
<text>通行记录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const tabs = ['收藏', '全部']
|
||||||
|
const activeTab = ref(0)
|
||||||
|
|
||||||
|
const switchTab = (index: number) => {
|
||||||
|
activeTab.value = index
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.control-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0 16px;
|
||||||
|
background-color: #f5f6fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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); // 将图标改为白色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 16px 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 24px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
margin: 16px 0;
|
||||||
|
|
||||||
|
.tab-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 32px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
padding-bottom: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 32px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #2b5cff;
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.device-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 12px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.offline-tag {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 2px 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
background-color: #fff2f0;
|
||||||
|
border-radius: 0 10px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%; /* 改为50% */
|
||||||
|
right: 8px;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translateY(-50%); /* 添加这行来实现精确居中 */
|
||||||
|
|
||||||
|
.unlock-icon {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: start;
|
||||||
|
padding-top: 16px;
|
||||||
|
|
||||||
|
.device-icon {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
//background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-name {
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-bar {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 8px 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 1px solid #f5f5f5;
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tab-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #2b5cff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/static/images/icon_search.png
Normal file
BIN
src/static/images/icon_search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
3
src/types/uni-pages.d.ts
vendored
3
src/types/uni-pages.d.ts
vendored
@ -34,7 +34,8 @@ 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/access-authority/access-authority" |
|
||||||
|
"/pages/personnel-passage/access-control/access-control";
|
||||||
}
|
}
|
||||||
interface RedirectToOptions extends NavigateToOptions {}
|
interface RedirectToOptions extends NavigateToOptions {}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user