SocialNetworks_duan/src/views/KeyNodeDiscern/opinionLeader/components/PostDetailDialog.vue

<template>
  <el-dialog v-model="isVisible" width="640" align-center class="custom-leader-post-dialog">
    <template v-if="store.currentPost">
      <img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
      <div class="dialog-content">
        <div class="content">{{ store.currentPost.content }}</div>
        <div class="heat">
          <div class="item-heat-detail">
            <div class="item-heat-like">
             <img src="@/assets/images/icon/like_icon.png" alt=""> {{ store.currentPost.like }}
            </div>
            <div class="item-heat-comment">
              <img src="@/assets/images/icon/commit_icon.png" alt=""> {{ store.currentPost.comment }}
            </div>
            <div class="item-heat-transmit">
              <img src="@/assets/images/icon/transmit_icon.png" alt=""> {{
                store.currentPost.transmit
              }}
            </div>
          </div>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from "vue";
import { useKeyNodeStore1 } from "@/store/keyNodeStore1";

const store = useKeyNodeStore1();

const isVisible = computed({
  get: () => store.isPostDetailDialogVisible,
  set: (value) => {
    if (!value) {
      store.closePostDetail();
    }
  }
});
</script>

<style>

/* 修改对话框内容字体颜色 */
.el-dialog__body {
  background: linear-gradient(90deg, rgba(6, 61, 113, 0.46) 0%, #081E38 100%);
  color: white;
}

.content {
  color: #fff;
  opacity: 0.7;
}
.heat {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.heat .item-heat-detail {
  display: flex;
}
.heat .item-heat-detail div {
  width: 70px;
  color: #fff;
  opacity: 0.7;
  display: flex; /* 使图标和文字水平排列 */
  align-items: center; /* 垂直居中对齐 */
}
.heat .item-heat-detail img {
  width: 14px;
  height: 14px;
  margin-right: 8px;
}
.postTitleImage {
  margin-top: -24px;
  margin-left: -2px;
}
</style>