feat: 完成人员通行一级界面

src/pages.json

@@ -286,6 +286,14 @@
         "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",
       "type": "page",
@@ -310,6 +318,14 @@
         "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",
       "type": "page",

src/pages/home/home.vue

@@ -120,16 +120,16 @@
       name: '人员通行',
       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'
         },
         {
-          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,
@@ -164,7 +164,8 @@
         {
           id: 388,
           icon: 'https://file.hikmall.com/prod/image/624a69276df1480088661e20cbc0e189.png',
-          name: '访客邀约'
+          name: '访客邀约',
+          url: '/pages/personnel-passage/visitor-invitation/visitor-invitation'
         }
       ]
     },

src/pages/personnel-passage/AccessControl/AccessControl.vue

@@ -10,7 +10,7 @@
 <template>
   <view class="control-container">
     <!-- 快捷功能区 -->
-    <view class="quick-actions">
+    <!-- <view class="quick-actions">
       <view class="quick-item" style="background-color: #fff7f2">
         <view class="quick-content">
           <text class="quick-title">门自动常开</text>
@@ -25,7 +25,7 @@
           <image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
         </view>
       </view>
-    </view>
+    </view> -->
 
     <!-- 搜索框 -->
     <view class="search-box">
@@ -42,7 +42,7 @@
     </view>
 
     <!-- 设备列表 -->
-    <view class="device-list"></view>
+    <view class="device-list">
       <view class="device-item">
         <text class="offline-tag">离线</text>
         <view class="device-info">
@@ -73,6 +73,7 @@
         </view>
       </view>
     </view>
+  </view>
 </template>
 
 <script setup>
@@ -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 {
     display: flex;
     align-items: center;
     padding: 10px;
-    margin: 16px 0;
     background-color: #fff;
     border-radius: 8px;
 
@@ -237,6 +237,7 @@
       position: relative;
       display: flex;
       flex-direction: column;
+      height: 80px;
       padding: 12px;
       background-color: #fff;
       border-radius: 10px;
@@ -255,7 +256,7 @@
 
       .unlock-btn {
         position: absolute;
-        top: 50%; /* 改为50% */
+        top: 50%;
         right: 8px;
         z-index: 1;
         display: flex;
@@ -265,11 +266,11 @@
         height: 35px;
         background-color: #f5f5f5;
         border-radius: 50%;
-        transform: translateY(-50%); /* 添加这行来实现精确居中 */
+        transform: translateY(-50%);
 
         .unlock-icon {
-          width: 30px;
+          width: 20px;
-          height: 30px;
+          height: 20px;
         }
       }
 
@@ -281,13 +282,12 @@
         padding-top: 16px;
 
         .device-icon {
-          width: 50px;
+          width: 40px;
-          height: 50px;
+          height: 40px;
-          //background-color: red;
+          margin-right: 8px;
         }
 
         .device-name {
-          margin-top: 4px;
           font-size: 14px;
           color: #333;
         }

src/pages/personnel-passage/AccessManage/AccessManage.vue

@@ -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>

src/pages/personnel-passage/access-authority/access-authority.vue

@@ -9,8 +9,19 @@
 
 <template>
   <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">
@@ -30,6 +41,38 @@
       </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-left">
@@ -38,48 +81,28 @@
           src="https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png"
         />
         <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="access-authority-group">
     <view class="feature-item">
       <view class="feature-left">
         <image
           class="feature-icon"
-            src="https://file.hikmall.com/prod/image/cf46656ec73b404891e2b46b57ff5fc2.png"
+          src="https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png"
         />
         <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 class="feature-item">
       <view class="feature-left">
@@ -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%);
     border-radius: 12px;
 
-    .banner-content {
+    .card-content {
       display: flex;
-      align-items: center;
+      align-items: start;
       justify-content: space-between;
+      height: 100%;
       color: #fff;
 
-      .banner-text {
+      .card-left {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: 4px;
 
-        .banner-title {
+        .card-title {
           font-size: 18px;
-          font-weight: bold;
+          font-weight: 500;
         }
 
-        .banner-desc {
+        .card-desc {
-          font-size: 14px;
+          font-size: 10px;
           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 {
   //  padding: 4px 0;
   //  background-color: #fff;

src/pages/personnel-passage/traffic-correlation.vue

@@ -12,7 +12,7 @@
     <TopNavigation :title="titleTab[curIndex]"></TopNavigation>
     <scroll-view class="flex-1 box-border" scroll-y>
       <view v-if="curIndex == 0">
-        <AccessAuthority />
+        <AccessManage />
       </view>
       <view v-else-if="curIndex == 1">
         <AccessControl />
@@ -24,14 +24,15 @@
 
 <script lang="ts" setup>
   // 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 { TabBarItem } from '@/typings'
   // const pages = [AccessAuthority, AccessControl]
-  const titleTab = ['通行权限', '门禁控制']
+  const titleTab = ['门禁管理', '门禁控制']
   const list = ref<Array<TabBarItem>>([
     {
-      title: '通行权限',
+      title: '门禁管理',
       icon: 'home'
     },
     {

src/pages/personnel-passage/traffic-record/traffic-record.vue

@@ -11,7 +11,7 @@
   <TopNavigation title="通行记录"></TopNavigation>
   <view class="record-container">
     <!-- 快捷功能区 -->
-    <view class="quick-actions">
+    <!-- <view class="quick-actions">
       <view class="quick-item" style="background-color: #fff7f2">
         <view class="quick-content">
           <text class="quick-title">通行消息提醒</text>
@@ -26,7 +26,7 @@
           <image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
         </view>
       </view>
-    </view>
+    </view> -->
 
     <!-- 时间筛选 -->
     <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 {
     display: flex;

src/pages/personnel-passage/visitor-invitation/visitor-invitation.vue

@@ -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>

src/types/uni-pages.d.ts

@@ -35,9 +35,11 @@ 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/one-click-open-door/one-click-open-door" |
        "/pages/personnel-passage/password-open-door/password-open-door" |
        "/pages/personnel-passage/traffic-record/traffic-record" |
+       "/pages/personnel-passage/visitor-invitation/visitor-invitation" |
        "/pages/personnel-passage/visitor-manage/visitor-manage-tab";
 }
 interface RedirectToOptions extends NavigateToOptions {}