<template>
  <div class="newsDetail">
    <!-- 图片区域 -->
    <div class="detail_img">
      <el-image
        class="img"
        fit="contain"
        :src="detailObj.image"
        :preview-src-list="[detailObj.image]"
        hide-on-click-modal
      ></el-image>
    </div>
    <!-- 标题区域 -->
    <div class="detail_title">{{ detailObj.title }}</div>
    <!-- 发布时间区域 -->
    <div class="detail_time">靖安发布 {{ detailObj.publishTime }}</div>
    <!-- 边框线区域 -->
    <div class="detail_line"></div>
    <!-- 信息区域 -->
    <div class="detail_msg" v-html="detailObj.content"></div>
    <!-- 关闭按钮图标区域 -->
    <div class="detail_close" @click="handleCloseDetail"></div>
  </div>
</template>

<script setup lang="ts">
defineProps(["detailObj"]);
const $emit = defineEmits(["closeDetail"]);

// 点击关闭按钮图标回调
const handleCloseDetail = () => {
  $emit("closeDetail", false);
};
</script>

<style lang="scss" scoped>
.newsDetail {
  position: absolute;
  top: 0;
  left: 1800px;
  width: 1016px;
  height: 1301px;
  background-image: url(@/assets/images/news-detail-background.png);
  background-size: 100% 100%;

  .detail_img {
    margin-top: 180px;
    margin-left: 18px;
    width: 874px;
    height: 414px;
    border-radius: 0 80px 0 0;
    overflow: hidden;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .detail_title {
    margin-top: 63px;
    margin-left: 63px;
    font-size: 24px;
    font-weight: bold;
  }
  .detail_time {
    margin-top: 24px;
    margin-left: 63px;
    font-size: 18px;
  }

  .detail_line {
    margin-top: 30px;
    margin-left: 63px;
    width: 772px;
    height: 6px;
    background-image: url(@/assets/images/news-list-bottomLine.png);
    background-size: 100% 100%;
  }
  .detail_msg {
    margin-top: 24px;
    margin-left: 63px;
    width: 760px;
    height: 480px;
    line-height: 35px;
    font-size: 18px;
    overflow-y: auto;
  }
  .detail_close {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 85px;
    height: 85px;
    cursor: pointer;
  }
}
</style>
