Files
lingji-work-fe/src/views/property-marketing/media-account/node-detail/index.vue

321 lines
12 KiB
Vue
Raw Normal View History

<template>
<div class="note-detail-wrap h-full flex flex-col">
<div class="flex items-center mb-16px cursor-pointer" @click="handleBack">
<icon-left size="16" />
<span class="cts ml-8px bold">账号详情</span>
</div>
<!--作品详情-->
<div class="bg-#fff rounded-8px px-24px pb-20px flex-1 flex flex-col mb-16px">
<div class="title-row">
<div class="flex items-center">
<span class="cts !text-18px !lh-26px mr-4px bold">作品详情</span>
<Tooltip title="展示作品的标题、图文、视频等详细内容">
<icon-question-circle class="color-#737478" size="14" />
</Tooltip>
</div>
</div>
<p class="mt-16px cts bold !text-24px !lh-32px">挖到宝了这个平价好物让我素颜出门都自信</p>
<div class="mt-16px">
<ImagePreviewGroup>
<Image
:height="100"
:width="100"
class="rounded-8px mr-8px"
src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"
/>
<Image
:height="100"
:width="100"
class="rounded-8px mr-8px"
src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"
/>
</ImagePreviewGroup>
</div>
<p class="mt-16px cts">
谁懂啊作为混干皮每天素颜出门总被说 气色好差直到被闺蜜按头安利这个 30 块的素颜霜
质地像冰淇淋一样推开就化完全不卡粉带一点自然提亮黄黑皮涂完像天生好皮肤连遮瑕都省了
最绝的是它还带轻微防晒值早上洗完脸涂一层就能冲出门懒人狂喜我已经空罐 3
瓶了现在同事都以为我每天早起化妆其实我多睡了 20 分钟 hhh
PS油痘肌姐妹建议局部薄涂后续补妆更服帖谁懂啊作为混干皮每天素颜出门总被说
气色好差直到被闺蜜按头安利这个 30 块的素颜霜
质地像冰淇淋一样推开就化完全不卡粉带一点自然提亮黄黑皮涂完像天生好皮肤连遮瑕都省了
最绝的是它还带轻微防晒值早上洗完脸涂一层就能冲出门懒人狂喜我已经空罐 3
瓶了现在同事都以为我每天早起化妆其实我多睡了 20 分钟 hhh
PS油痘肌姐妹建议局部薄涂后续补妆更服帖谁懂啊作为混干皮每天素颜出门总被说
气色好差直到被闺蜜按头安利这个 30 块的素颜霜
质地像冰淇淋一样推开就化完全不卡粉带一点自然提亮黄黑皮涂完像天生好皮肤连遮瑕都省了
最绝的是它还带轻微防晒值早上洗完脸涂一层就能冲出门懒人狂喜我已经空罐 3
瓶了现在同事都以为我每天早起化妆其实我多睡了 20 分钟 hhh
PS油痘肌姐妹建议局部薄涂后续补妆更服帖谁懂啊作为混干皮每天素颜出门总被说
气色好差直到被闺蜜按头安利这个 30 块的素颜霜
质地像冰淇淋一样推开就化完全不卡粉带一点自然提亮黄黑皮涂完像天生好皮肤连遮瑕都省了
最绝的是它还带轻微防晒值早上洗完脸涂一层就能冲出门懒人狂喜我已经空罐 3
瓶了现在同事都以为我每天早起化妆其实我多睡了 20 分钟 hhh PS油痘肌姐妹建议局部薄涂后续补妆更服帖
#电影票 #电影分享 #省钱小妙招 #电影票 #电影分享 #省钱小妙招
</p>
</div>
<!--评论列表-->
<div class="bg-#fff rounded-8px pb-12px h-422px flex flex-col mb-16px">
<div class="title-row !px-24px">
<div class="flex items-center">
<span class="cts !text-18px !lh-26px mr-4px bold">评论列表</span>
<Tooltip title="展示用户对作品的评论">
<icon-question-circle class="color-#737478" size="14" />
</Tooltip>
</div>
</div>
<div class="flex-1 overflow-y-auto !px-24px">
<div v-for="(item, index) in comments" :key="index" class="flex items-start justify-between mb-8px">
<TextoverTips :context="item.user" class="cts !color-#737478 !w-120px mr-20px" />
<div class="flex-1 flex justify-between items-start">
<div class="flex-1 flex items-start">
<p class="mr-4px cts">{{ item.content }}</p>
<p class="cts !color-#737478 flex-shrink-0 num">{{ item.time }}</p>
</div>
<TextoverTips
:context="`${item.likes}点赞 ${item.replies}回复`"
class="cts !color-#737478 ml-20px !w-fit max-w-200px"
/>
</div>
</div>
</div>
</div>
<!--作品数据-->
<div class="bg-#fff rounded-8px px-24px pb-20px h-184px flex flex-col">
<div class="title-row">
<div class="flex items-center">
<span class="cts !text-18px !lh-26px mr-4px bold">作品数据</span>
<Tooltip title="展示作品的曝光量、点赞量等数据指标">
<icon-question-circle class="color-#737478" size="14" />
</Tooltip>
</div>
</div>
<div class="flex-1 grid grid-cols-4 gap-24px">
<div v-for="(item, index) in noteData" :key="index">
<div class="flex items-center mb-4px">
<span class="cts !color-#737478 mr-4px">{{ item.label }}</span>
<Tooltip :title="item.tooltip">
<icon-question-circle class="color-#737478" size="16" />
</Tooltip>
</div>
<span class="cts num">{{ formatNumberShow(data[item.prop]) }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { Tooltip, ImagePreviewGroup, Image } from 'ant-design-vue';
import TextoverTips from '@/components/text-over-tips/index.vue';
import ImgLazyLoad from '@/components/img-lazy-load';
import { exactFormatTime, formatNumberShow } from '@/utils/tools';
const router = useRouter();
const handleBack = () => {
router.go(-1);
};
const data = {
exposure_number: 424242,
view_number: 424242,
like_number: 424242,
collect_number: 424242,
comment_number: 424242,
share_number: 424242,
cover_click_rate: 424242,
};
const noteData = [
{ label: '曝光量', prop: 'exposure_number', tooltip: '内容被展示给用户的总次数,不代表用户实际观看。' },
{
label: '观看量',
prop: 'view_number',
tooltip: '用户点击内容并实际观看的次数,是内容实际触达的重要指标。',
},
{
label: '点赞量',
prop: 'like_number',
tooltip: '单篇笔记获得的点赞总数,反映用户喜好程度。',
},
{
label: '收藏量',
prop: 'collect_number',
tooltip: '用户将内容保存到收藏夹的次数,代表内容被认可为“值得保留”。',
},
{
label: '评论数',
prop: 'comment_number',
tooltip: '内容下方用户留言的总数,体现用户参与度与讨论热度。',
},
{
label: '分享量',
prop: 'share_number',
tooltip: '内容被转发或分享至其他平台或私信的次数,代表外扩传播意愿。',
},
{
label: '点击率',
prop: 'cover_click_rate',
tooltip: '内容在被曝光后,用户点击进入的比例,反映封面与标题吸引力。',
},
];
const comments = [
{
id: 1,
user: '小红薯650EC5A...',
content: '太麻烦了,有没有简单一点的方法',
likes: 628,
replies: 200,
time: '2024-08-13',
},
{ id: 2, user: '汪汪汪', content: '电影票太贵了,不去看电影了@小哥', likes: 329, replies: 132, time: '2024-08-13' },
{
id: 3,
user: '小情绪',
content:
'电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂',
likes: 217,
replies: 89,
time: '2024-08-13',
},
{
id: 4,
user: '鱼Sir爱生活',
content: '8.15开始两边券不通用了,大麦的订单也同步不到淘票票了',
likes: 183,
replies: 64,
time: '2024-08-13',
},
{
id: 5,
user: 'Duku',
content: '用大麦买就可以了,把淘票票账号绑进大麦是一样的',
likes: 128,
replies: 32,
time: '2024-08-13',
},
{
id: 6,
user: '小情绪',
content:
'电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂',
likes: 92,
replies: 73,
time: '2024-08-13',
},
{
id: 7,
user: '一鸣的歌单',
content: '今天问的KF直接答非所问很气人',
likes: 81,
replies: 63,
time: '2024-08-13',
},
{
id: 8,
user: '松果儿',
content:
'简单来说就是,主包从大麦网买了个电影券,因为一直用惯了淘票票平台,把券添加到了淘票票,最后才发现不能使用,所以最后只能找客服,问题没解决,遇到了个神人。。。',
likes: 72,
replies: 31,
time: '2024-08-13',
},
{
id: 9,
user: '小红薯650EC5A...',
content: '太麻烦了,有没有简单一点的方法',
likes: 628,
replies: 200,
time: '2024-08-13',
},
{ id: 10, user: '汪汪汪', content: '电影票太贵了,不去看电影了@小哥', likes: 329, replies: 132, time: '2024-08-13' },
{
id: 11,
user: '小情绪',
content:
'电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂',
likes: 217,
replies: 89,
time: '2024-08-13',
},
{
id: 12,
user: '鱼Sir爱生活',
content: '8.15开始两边券不通用了,大麦的订单也同步不到淘票票了',
likes: 183,
replies: 64,
time: '2024-08-13',
},
{
id: 13,
user: 'Duku',
content: '用大麦买就可以了,把淘票票账号绑进大麦是一样的',
likes: 128,
replies: 32,
time: '2024-08-13',
},
{
id: 14,
user: '小情绪',
content:
'电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂',
likes: 92,
replies: 73,
time: '2024-08-13',
},
{
id: 15,
user: '一鸣的歌单',
content: '今天问的KF直接答非所问很气人',
likes: 81,
replies: 63,
time: '2024-08-13',
},
{
id: 16,
user: '松果儿',
content:
'简单来说就是,主包从大麦网买了个电影券,因为一直用惯了淘票票平台,把券添加到了淘票票,最后才发现不能使用,所以最后只能找客服,问题没解决,遇到了个神人。。。',
likes: 72,
replies: 31,
time: '2024-08-13',
},
{
id: 17,
user: '小红薯650EC5A...',
content: '太麻烦了,有没有简单一点的方法',
likes: 628,
replies: 200,
time: '2024-08-13',
},
{ id: 18, user: '汪汪汪', content: '电影票太贵了,不去看电影了@小哥', likes: 329, replies: 132, time: '2024-08-13' },
{
id: 19,
user: '小情绪',
content:
'电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂电影票太贵了,不去看电影了😂',
likes: 217,
replies: 89,
time: '2024-08-13',
},
{
id: 20,
user: '鱼Sir爱生活',
content: '8.15开始两边券不通用了,大麦的订单也同步不到淘票票了',
likes: 183,
replies: 64,
time: '2024-08-13',
},
];
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>