iot-gateway_fontend/src/views/system/bulletin/components/detail.vue

<template>
  <div class="container">
    <Breadcrumb :items="['系统管理', '公告设置','公告详情']" />
    <a-card class="general-card" title=" ">
      <div class="announcement-detail">
        <div class="header">
          <h1>{{ renderData.title }}</h1>
          <div class="meta">
            <span>作者: {{ renderData.createBy }}</span>
            <span
            >时间: {{ dayjs(renderData.publishTime).format('YYYY-MM-DD') }}</span
            >
          </div>
        </div>
        <a-divider style="margin-top: 0" />
        <div v-html="renderData.content" class="content"></div>
        <div>
          <ul class="attachments">
            <li v-for="(item, index) in renderData.attachments" :key="index">
              <a
                :href="item.url"
                target="_blank"
                rel="noopener noreferrer"
              >
                <icon-download />
                {{ item.fileName }}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import dayjs from 'dayjs';
  import { useBulletinStore } from '@/store';
  import { useRoute } from 'vue-router';
  import { onMounted, ref } from 'vue';

  const bulletinStore = useBulletinStore();
  const route = useRoute();
  const id = Number(route.params.id);
  const renderData = ref<any>([]);
  // const attachmentList = ref<any>([]);
  const fetchData = async (Id: number) => {
    const res = await bulletinStore.queryBulletinListAll(Id);
    // attachmentList.value = await bulletinStore.queryAttachmentInfo(
    //   '28452d83420650425d45110c6417bf693b966b29'
    // );
    // eslint-disable-next-line prefer-destructuring
    renderData.value = res.data;
  };
  onMounted(() => {
    fetchData(id);
  });
</script>


<style scoped>
  .container {
    padding: 0 20px 20px 20px;
  }

  .announcement-detail {
    min-width: 800px;
    max-width: 800px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #fff; /* 白色背景，与淡蓝色背景区分开来 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .meta {
    margin-bottom: 20px;
    color: #777;
  }

  .meta span {
    margin-right: 20px;
  }

  .content {
    line-height: 1.6;
  }
  .attachments li {
    margin-bottom: 10px;
  }

  .attachments a {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #1890ff;
    text-decoration: none;
  }

  .attachments a:hover {
    text-decoration: underline;
  }

  .attachments .arco-icon {
    margin-right: 8px;
    color: #1890ff;
  }
  .layout-demo :deep(.arco-layout-header),
  .layout-demo :deep(.arco-layout-footer),
  .layout-demo :deep(.arco-layout-sider-children),
  .layout-demo :deep(.arco-layout-content) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-white);
    font-size: 16px;
    font-stretch: condensed;
    text-align: center;
  }

  .layout-demo :deep(.arco-layout-header),
  .layout-demo :deep(.arco-layout-footer) {
    height: 64px;
    background-color: var(--color-primary-light-4);
  }

  .layout-demo :deep(.arco-layout-sider) {
    width: 206px;
    background-color: var(--color-primary-light-3);
  }

  .layout-demo :deep(.arco-layout-content) {
    background-color: rgb(var(--arcoblue-6));
  }
</style>