80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
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>
|