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

<template>
  <swiper
    class="swiper-container"
    :indicator-dots="true"
    :autoplay="true"
    :interval="3000"
    :duration="500"
    indicator-active-color="#FFFFFF"
    indicator-color="rgba(255, 255, 255, 0.4)"
  >
    <!-- 访客通行卡片 -->
    <swiper-item>
      <view class="visitor-card">
        <view class="card-content">
          <view class="card-left">
            <text class="card-title">访客人员，临时通行</text>
            <text class="card-desc">使用访客管理，来访轻松搞定</text>
            <view class="card-btn">看详情 ></view>
          </view>
          <view class="card-right">
            <image src="/static/images/visitor-illustration.png" mode="aspectFit" />
          </view>
        </view>
      </view>
    </swiper-item>

    <swiper-item>
      <view class="visitor-card">
        <view class="card-content">
          <view class="card-left">
            <text class="card-title">通行权限使用说明</text>
            <text class="card-desc">区分长期通行与临时通行,对长期通信人员下发通行权限</text>
            <view class="card-btn">看详情 ></view>
          </view>
          <view class="card-right">
            <image src="/static/images/visitor-illustration.png" mode="aspectFit" />
          </view>
        </view>
      </view>
    </swiper-item>

    <!-- 提醒卡片 -->
    <swiper-item>
      <view class="remind-card">
        <view class="card-header">
          <text class="remind-tag">提醒</text>
          <text class="remind-text">您有11条信息未同步到设备</text>
          <image class="arrow-icon" src="/static/images/icon_white_right.png" mode="aspectFit" />
        </view>
        <view class="stats-container">
          <view class="stat-item">
            <text class="stat-num">2</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">2</text>
            <text class="stat-label">密码</text>
          </view>
        </view>
      </view>
    </swiper-item>
  </swiper>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
  .swiper-container {
    height: 140px;
    overflow: hidden;
    border-radius: 12px;
  }

  //   .swiper-card {
  //     height: 100%;
  //     padding: 24px 16px;
  //     border-radius: 12px;
  //   }

  .visitor-card {
    height: 100%;
    padding: 16px 16px;
    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;
        }

        .card-btn {
          width: fit-content;
          padding: 4px 8px;
          margin-top: 15px;
          font-size: 12px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 12px;
        }
      }

      .card-right {
        width: 120px;
        height: 120px;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

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

    .card-header {
      display: flex;
      gap: 6px;
      align-items: center;
      padding: 4px;
      margin-bottom: 10px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;

      .remind-tag {
        padding: 2px 6px;
        font-size: 11px;
        // background: rgba(255, 255, 255, 0.2);
        // border-radius: 4px;
      }

      .remind-text {
        flex: 1;
        font-size: 12px;
      }

      .arrow-icon {
        width: 12px;
        height: 12px;
      }
    }

    .stats-container {
      display: flex;
      justify-content: space-between;
      padding: 0 12px;
      padding-top: 12px;

      .stat-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-items: center;

        .stat-num {
          font-size: 18px;
          font-weight: 500;
        }

        .stat-label {
          font-size: 11px;
          opacity: 0.8;
        }
      }
    }
  }
</style>