sl-sfy-safety/src/views/traffic/overview/components/ViolationRecords.vue

<template>
  <div class="violation-records-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">本月车辆违规记录</span>
      <span class="more" @click="handleClickMore"
        >查看全部<el-icon><ArrowRight /></el-icon
      ></span>
    </div>
    <div class="table-container"></div>
  </div>
</template>

<script setup lang="ts">
  import { ElIcon } from 'element-plus';
  import { ArrowRight } from '@element-plus/icons-vue';

  const handleClickMore = () => {
    // TODO: 点击跳转“管理规定与通知”菜单
    console.log('1111111111111111111111');
  };
</script>

<style scoped lang="scss">
  .container-title {
    height: 24px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #000000;

    .line {
      width: 3px;
      height: 16px;
      background: #1777ff;
      margin-right: 10px;
    }

    .title {
      margin-right: 12px;
    }

    .more {
      margin-left: auto;
      margin-right: 17px;
      font-weight: 400;
      font-size: 16px;
      color: #1777ff;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .more:hover {
      background-color: #1777ff;
      color: #fff;
      border-radius: 4px;
      padding: 2px 4px 2px 6px;
    }
  }

  .violation-records-container {
    width: 100%;
    height: 100%;
    padding: 14px 0;

    .table-container {
      width: 100%;
      height: calc(100% - 24px - 18px);
      margin-top: 18px;
      padding: 0 16px;
      overflow: auto;
    }
  }
</style>