sl-sfy-safety/src/views/disaster/disaster-precaution/PageTaskTemplate.vue

<template>
  <div class="disaster-precaution-container">
    <header class="disaster-precaution-container__header">
      <span class="disaster-precaution-container__title">灾害预防检查任务模板</span>
    </header>
    <main class="disaster-precaution-container__main">
      <div class="template-card-list">
        <div
          class="template-card-item"
          v-for="item in TASK_TEMPLATE_LIST"
          :key="item.id"
          @click="toTemplateDetail(item.id)"
        >
          <div class="img-container" :style="{ backgroundImage: `url(${item.img})` }"></div>
          <footer class="footer">
            <span>{{ item.name }}</span>
          </footer>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  import { TASK_TEMPLATE_LIST } from './src/constants/template-detail';
  const router = useRouter();
  const toTemplateDetail = (id: number) => {
    router.push({
      name: 'disaster-precaution-template-detail',
      params: {
        id,
      },
    });
  };
</script>

<style lang="scss" scoped>
  @use '../style/disaster.scss' as *;
  .template-card-list {
    display: flex;
    gap: 32cpx;
  }
  .template-card-item {
    @include flex-center;
    flex-direction: column;
    width: 245cpx;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    &:hover {
      box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
    }
    .img-container,
    .footer {
      width: 100%;
    }
    .img-container {
      height: 147cpx;
      background-size: cover;
      background-position: center center;
    }
    .footer {
      height: 55cpx;
      line-height: 55cpx;
      text-align: center;
      font-size: 16cpx;
      color: rgba(0, 0, 0, 0.85);
      outline: 1px solid #e9e9e9;
    }
  }
</style>