From 88c2d3bf9ecf64a9c9de357c7831c29565ccf23a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AD=8F=E5=B0=91=E9=98=B3?= <786612630@qq.com>
Date: Wed, 15 Jan 2025 18:57:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E9=97=A8=E7=A6=81?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                                |   7 +
 src/pages/home/home.vue                       |   3 +-
 .../access-control/access-control.vue         | 352 ++++++++++++++++++
 src/static/images/icon_search.png             | Bin 0 -> 3291 bytes
 src/types/uni-pages.d.ts                      |   3 +-
 5 files changed, 363 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/personnel-passage/access-control/access-control.vue
 create mode 100644 src/static/images/icon_search.png

diff --git a/src/pages.json b/src/pages.json
index 4d87d2c..bd3cafa 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -286,6 +286,13 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/personnel-passage/access-control/access-control",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "subPackages": []
diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue
index 6957f21..0bcc274 100644
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@@ -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,
diff --git a/src/pages/personnel-passage/access-control/access-control.vue b/src/pages/personnel-passage/access-control/access-control.vue
new file mode 100644
index 0000000..49ad7b4
--- /dev/null
+++ b/src/pages/personnel-passage/access-control/access-control.vue
@@ -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>
diff --git a/src/static/images/icon_search.png b/src/static/images/icon_search.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b29f78a892be83d9b8740129bfa0374f00d32f7
GIT binary patch
literal 3291
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

literal 0
HcmV?d00001

diff --git a/src/types/uni-pages.d.ts b/src/types/uni-pages.d.ts
index 7101b3f..7b6105e 100644
--- a/src/types/uni-pages.d.ts
+++ b/src/types/uni-pages.d.ts
@@ -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 {}