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 0000000..9b29f78
Binary files /dev/null and b/src/static/images/icon_search.png differ
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 {}