67 lines
1.6 KiB
Vue
67 lines
1.6 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">
|
||
<Icon icon="ei:like" width="25" height="25" /> {{ store.currentPost.like }}
|
||
</div>
|
||
<div class="item-heat-comment">
|
||
<Icon icon="la:comment-dots" width="25" height="25" /> {{ store.currentPost.comment }}
|
||
</div>
|
||
<div class="item-heat-transmit">
|
||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{
|
||
store.currentPost.transmit
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from "vue";
|
||
import { useKeyNodeStore1 } from "@/store/keyNodeStore1";
|
||
import { Icon } from "@iconify/vue";
|
||
|
||
const store = useKeyNodeStore1();
|
||
|
||
const isVisible = computed({
|
||
get: () => store.isPostDetailDialogVisible,
|
||
set: (value) => {
|
||
if (!value) {
|
||
store.closePostDetail();
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.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;
|
||
}
|
||
.postTitleImage {
|
||
margin-top: -24px;
|
||
margin-left: -2px;
|
||
}
|
||
</style>
|