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

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

<template>
  <view class="control-container">
    <!-- 快捷功能区 -->
    <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>
    <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>
</template>

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

  const tabs = ['收藏', '全部']
  const activeTab = ref(0)

  const switchTab = index => {
    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;
        }
      }
    }
  }
</style>