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

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <view class="passage-container">
    <TopNavigation title="门禁授权" />

    <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">
      <view class="quick-item">
        <view class="quick-content">
          <text class="quick-title">添加权限组</text>
          <text class="quick-desc">门禁授权</text>
          <image class="quick-icon" src="/static/images/icon_add_group.png" mode="aspectFit" />
        </view>
      </view>
      <view class="quick-item">
        <view class="quick-content">
          <text class="quick-title">下发权限</text>
          <text class="quick-desc">同步权限到设备</text>
          <image class="quick-icon" src="/static/images/icon_publish.png" mode="aspectFit" />
        </view>
      </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">
        <image
          class="feature-icon"
          src="https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png"
        />
        <view class="feature-text">
          <text class="feature-title">人员信息录入</text>
          <text class="feature-desc">团队管理录入人员信息及通行凭证信息</text>
        </view>
      </view>
      <image class="arrow" src="/static/images/icon_black_right.png" />
    </view>

    <!-- 通行权限组 -->
    <view class="feature-item">
      <view class="feature-left">
        <image
          class="feature-icon"
          src="https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png"
        />
        <view class="feature-text">
          <text class="feature-title">门禁权限组管理</text>
          <text class="feature-desc">配置人员通行的门与时间规则</text>
        </view>
      </view>
      <image class="arrow" src="/static/images/icon_black_right.png" />
    </view>

    <!-- 权限查询 -->
    <view class="feature-item">
      <view class="feature-left">
        <image
          class="feature-icon"
          src="https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png"
        />
        <view class="feature-text">
          <text class="feature-title">权限查询</text>
          <text class="feature-desc">查询人员通行权限，与信息下发状态</text>
        </view>
      </view>
      <image class="arrow" src="/static/images/icon_black_right.png" />
    </view>

    <!-- 下发记录 -->
    <view class="feature-item">
      <view class="feature-left">
        <image
          class="feature-icon"
          src="https://file.hikmall.com/prod/image/e6860e8e5cc64369accadae5347fb0c1.png"
        />
        <view class="feature-text">
          <text class="feature-title">下发记录</text>
          <text class="feature-desc">查询下发状态与结果</text>
        </view>
      </view>
      <image class="arrow" src="/static/images/icon_black_right.png" />
    </view>
  </view>

  <!-- 根据当前组件加载 -->
  <component :is="currentComponent" />
</template>

<script setup>
  import { ref } from 'vue'
  import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
  import AccessSwiper from './components/AccessSwiper.vue'

  const currentComponent = ref('') // 用于跟踪当前加载的组件

  const navigateTo = page => {
    currentComponent.value = page // 设置当前组件
  }
</script>

<style scoped lang="scss">
  .passage-container {
    min-height: 100vh;
    padding: 0 16px;
    background-color: #f5f6fa;
  }

  .header-right {
    display: flex;
    gap: 8px; // 图标之间的间距
    align-items: end;

    .icon {
      width: 20px;
      height: 20px;
    }
  }

  .visitor-card {
    height: 100%;
    padding: 16px 16px;
    margin-top: 12px;
    background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
    border-radius: 12px;

    .card-content {
      display: flex;
      align-items: start;
      justify-content: space-between;
      height: 100%;
      color: #fff;

      .card-left {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .card-title {
          font-size: 18px;
          font-weight: 500;
        }

        .card-desc {
          font-size: 10px;
          opacity: 0.8;
        }
      }
    }
  }

  .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); // 将图标改为白色
          }
        }
      }
    }
  }

  .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;
  //border-radius: 12px;

  .access-authority-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: 12px;
  }

  .feature-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: 12px;
    //border-bottom: 1px solid #f5f5f5;

    .feature-left {
      display: flex;
      gap: 12px;
      align-items: center;

      .feature-icon {
        width: 24px;
        height: 24px;
      }

      .feature-text {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .feature-title {
          font-size: 16px;
          font-weight: 500;
        }

        .feature-desc {
          font-size: 12px;
          color: #666;
        }
      }
    }

    .arrow {
      width: 16px;
      height: 16px;
    }
  }
  //}

  .sub-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 16px 12px 16px;

    .sub-item {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 12px;
      background-color: #f5f6fa;
      border-radius: 8px;

      .sub-icon {
        width: 20px;
        height: 20px;
      }

      text {
        font-size: 14px;
      }
    }
  }
</style>