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="header-right mr-4">
        <image class="icon" src="/static/images/icon_nav_more.png" mode="aspectFit" />
      </view>
    </TopNavigation>

    <!-- 替换原来的 banner 部分为 AccessSwiper -->
    <AccessSwiper class="mt-4" />

    <!-- 权限组快捷入口 -->
    <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="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="access-authority-group">
      <view class="feature-item">
        <view class="feature-left">
          <image
            class="feature-icon"
            src="https://file.hikmall.com/prod/image/cf46656ec73b404891e2b46b57ff5fc2.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="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">
        <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>

  <!-- 底部导航 -->
  <view class="tab-bar">
    <view class="tab-item active">
      <image
        class="tab-icon"
        src="https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png"
      />
      <text>通行权限</text>
    </view>
    <view class="tab-item">
      <image
        class="tab-icon"
        src="https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png"
      />
      <text>门禁控制</text>
    </view>
    <view class="tab-item">
      <image
        class="tab-icon"
        src="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
      />
      <text>通行记录</text>
    </view>
  </view>
  <!--  </view>-->
</template>

<script setup>
  import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
  import AccessSwiper from './components/AccessSwiper.vue'
</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;
    }
  }

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

    .banner-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;

      .banner-text {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .banner-title {
          font-size: 18px;
          font-weight: bold;
        }

        .banner-desc {
          font-size: 14px;
          opacity: 0.8;
        }
      }

      .banner-btn {
        padding: 6px 12px;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
      }
    }
  }

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

  //.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;
      }
    }
  }

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