lsq-book/packages/pc/src/views/Home2/components/NewsDialog.vue

<template>
  <el-dialog v-model="show" top="10vh" class="news-dialog" width="1174px">
    <template #header>
      <div class="news-dialog-header">
        <h3>{{ item?.name }}</h3>
        <div class="news-dialog-header-info">
          <p>
            <svg-icon
              name="icon_time"
              width="23px"
              height="23px"
              color="var(--el-color-primary)"
            />{{ date }}
          </p>
          <p>
            <svg-icon
              name="icon_eyes"
              width="23px"
              height="23px"
              color="var(--el-color-primary)"
            />{{ item.pcsVisit }}次阅读
          </p>
        </div>
      </div>
    </template>

    <el-scrollbar max-height="600px">
      <div v-for="c in content" class="news-dialog-inner" v-html="c.txt" />
    </el-scrollbar>
  </el-dialog>
</template>

<script setup>
import { computed, watch } from "vue";
import { formatDate } from "@dage/utils";
import { addNoticeVisitApi } from "@/api";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  item: {
    type: Object,
    required: false,
  },
});
const emits = defineEmits(["update:visible"]);

const show = computed({
  get() {
    return props.visible;
  },
  set(v) {
    emits("update:visible", v);
  },
});

const date = computed(() =>
  formatDate(props.item?.createTime, "YYYY年MM月DD日 HH:MM")
);

const content = computed(() => {
  if (!props.item || !props.item.description) return [];

  const res = JSON.parse(props.item.description);
  return res.txtArr;
});

watch(show, (v) => {
  if (v && props.item) {
    addNoticeVisitApi(props.item.id);
  }
});
</script>

<style lang="scss">
.news-dialog {
  --el-message-close-size: 30px;

  padding: 28px 45px;

  &-header {
    text-align: center;
    border-bottom: 1px solid var(--el-color-primary);

    h3 {
      font-size: 24px;
      line-height: 42px;
      font-family: "Source Han Serif CN-Bold";
    }
    &-info {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5px 0 25px;
      gap: 100px;
      color: #a99271;
      font-size: 16px;

      p {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }
  }
  &-inner {
    padding: 0 25px;
    font-size: 18px;
  }
  .el-dialog__headerbtn {
    top: 30px;
    right: 30px;
  }
}
</style>