sl-sfy-safety/src/views/dashboard/home/components/QuickAction.vue

<template>
  <div>
    <div class="quick-title">快捷操作</div>
    <!-- <el-divider /> -->
    <div class="quick-content">
      <div v-for="item in quickList" class="quick-go" @click="goPage(item.address)">
        <img :src="item.img" alt="" />
        <div class="quick-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import CameraConfig from '@/assets/camera/camera-config.png';
  import CameraPlayback from '@/assets/camera/camera-playback.png';
  import CameraPreview from '@/assets/camera/camera-preview.png';
  import AlgoManage from '@/assets/camera/algorithm-manage.png';
  import UserManage from '@/assets/camera/user-manage.png';
  import OrgaManage from '@/assets/camera/organization-manage.png';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';

  const router = useRouter();

  const quickList = ref([
    { name: '相机配置', img: CameraConfig, address: '/cameras/overview' },
    { name: '相机回放', img: CameraPlayback, address: '' },
    { name: '相机预览', img: CameraPreview, address: '/cameras/preview' },
    { name: '算法管理', img: AlgoManage, address: '/cameras/algo-manager' },
    { name: '用户管理', img: UserManage, address: '/auth/user' },
    { name: '组织管理', img: OrgaManage, address: '' },
  ]);

  const goPage = (address) => {
    if (!address) {
      ElMessage({
        message: '该通道暂未开放',
        type: 'warning',
      });
      return;
    }
    router.push(address);
  };
</script>

<style scoped>
  .quick-title {
    font-size: 16px;
    margin-top: 19px;
    margin-left: 24px;
    margin-bottom: 10px;
  }

  /* .el-divider--horizontal {
    margin: 0px;
  } */

  .quick-go {
    width: 139px;
    height: 149px;
    margin-top: 2px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
  }

  .quick-go:hover {
    box-shadow: 2px 1px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }

  .quick-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #f0f2f5;
  }

  .quick-name {
    margin-top: 19px;
    font-size: 16px;
  }
</style>