feat: 完成门禁控制UI
This commit is contained in:
魏少阳
parent
18b4e12ea7
commit
88c2d3bf9e
@ -286,6 +286,13 @@
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/personnel-passage/access-control/access-control",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": []
|
||||
|
||||
@ -128,7 +128,8 @@
|
||||
{
|
||||
id: 230,
|
||||
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
|
||||
name: '门禁控制'
|
||||
name: '门禁控制',
|
||||
url: '/pages/personnel-passage/access-control/access-control'
|
||||
},
|
||||
{
|
||||
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/outside-rules" |
|
||||
"/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 {}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user