sl-sfy-safety/src/views/institute-safety/modules/safety-propaganda/SafetyPropaganda.vue

<template>
  <div class="safety-propaganda-container">
    <div class="title">
      <span class="line"></span>
      <span class="text">安全宣传栏</span>
    </div>
    <div class="safety-propaganda">
      <div
        class="item"
        v-for="item in data"
        :key="item.id"
        @click="
          router.push({
            name: 'safetyPublicityBoardManagementItem',
            query: { id: item.id, operate: 'safety-publicity-board-view' },
          })
        "
      >
        <img v-if="item.imageUrls[0]?.url" class="propaganda-img" :src="item.imageUrls[0].url" alt="" />
        <img v-else class="propaganda-img" src="@/assets/images/institute-safety/default-propaganda.jpeg" alt="" />
        <div class="category-name">{{ item.materialName }}</div>
        <div class="propaganda-time">{{ item.createdAt }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { getPaprogandaData } from '../safety-company-home/apis';

  const router = useRouter();
  const data = ref();

  onMounted(() => {
    getPaprogandaData().then((res) => {
      data.value = res || [];
      data.value.forEach((item) => {
        item.imageUrls = JSON.parse(item.imageUrls || '[]');
      });
    });
  });
</script>

<style scoped>
  .safety-propaganda-container {
    font-family: PingFangSC, PingFang SC;

    margin-top: 20px;
  }

  .safety-propaganda {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  .item {
    /* width: 228px; */
    height: 224px;
    background: #f0f2f6;
    border-radius: 8px;
    cursor: pointer;
  }
  .propaganda-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
  }
  .category-name {
    margin-left: 12px;
    margin-top: 10px;
    font-weight: 500;
    font-size: 14px;
    color: #333333;

    /* 设置最大宽度（你可以随意改） */
    max-width: 204px;
    height: 40px;

    /* 核心：多行文本溢出省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示 2 行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 可选：文字换行 */
    word-break: break-all;
  }
  .propaganda-time {
    margin-left: 12px;
    margin-top: 5px;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
  }

  .title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }
  .line {
    width: 3px;
    height: 16px;
    background: #1777ff;
  }

  .text {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
    line-height: 22px;
  }
</style>