feat: 安全态势加宣传栏

src/views/institute-safety/components/CardMapAndAlert.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="map-alert">
     <CompanyHome />
-    <!-- <WorkshopList /> -->
+    <SafetyPropaganda />
   </div>
 </template>
 
 <script setup lang="ts">
   import CompanyHome from '@/views/institute-safety/modules/safety-company-home/CompanyHome.vue';
-  // import WorkshopList from '@/views/institute-safety/modules/safety-workshop-list/WorkshopList.vue';
+  import SafetyPropaganda from '@/views/institute-safety/modules/safety-propaganda/SafetyPropaganda.vue';
 </script>
 
 <style scoped>

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

@@ -0,0 +1,108 @@
+<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">
+        <img v-if="item.attachmentUrl" class="propaganda-img" :src="item.attachmentUrl" alt="" />
+        <img v-else class="propaganda-img" src="@/assets/images/institute-safety/default-propaganda.jpeg" alt="" />
+        <div class="category-name">{{ item.categoryName }}</div>
+        <div class="propaganda-time">{{ item.createdAt }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { querySafetyPublicityBoardPage, type safetyCultureFilePageQuery } from '@/api/safety-culture';
+
+  const queryParams: safetyCultureFilePageQuery = {
+    pageNumber: 1,
+    pageSize: 5,
+    queryParam: {},
+  };
+
+  const data = ref();
+
+  onMounted(() => {
+    querySafetyPublicityBoardPage(queryParams).then((res) => {
+      data.value = res.records || [];
+    });
+  });
+</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;
+  }
+  .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>

src/views/institute-safety/modules/safety-propaganda/apis/index.ts

@@ -1 +0,0 @@
-import { http } from '@/utils/http/axios';