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>
|