wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update styles and routing in components

Browse Source
This commit is contained in:
wangqiao
2025-08-28 22:11:31 +08:00
parent 6074bf9c8d
commit 6b8e6918aa
6 changed files with 52 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pages/chat-detail/[channelId]-[pageNo].vue
View File

@ -1,50 +1,50 @@
<template>
<KlNavTab />
<div class="ml-auto mr-auto mt-20px w-1440px flex">
<div class="left box-border w-1019px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-42px py-30px">
<div class="title text-24px text-[#333333] font-bold">{{ channelDetail?.postsTitle }}</div>
<div class="mt-20px flex items-center justify-between border-b-1px border-b-[#eee] border-b-solid pb-14px">
<div class="ml-auto mr-auto mt-[20px] w-[1440px] flex">
<div class="left box-border w-[100%] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[42px] py-[30px]">
<div class="title text-[20px] text-[#333333] font-bold">{{ channelDetail?.postsTitle }}</div>
<div class="mt-[20px] flex items-center justify-between border-b-[1px] border-b-[#eee] border-b-solid pb-[14px]">
<div class="flex items-center">
<img :src="channelDetail?.creatorAvatar" alt="" srcset="" class="h-50px w-49px rounded-full" />
<div class="ml-10px">
<div class="text-16px text-[#333333] font-normal">{{ channelDetail?.creatorName }}</div>
<div class="text-12px text-[#999999] font-normal">发表时间：{{ dayjs(channelDetail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
<img :src="channelDetail?.creatorAvatar" alt="" srcset="" class="h-[50px] w-[49px] rounded-full" />
<div class="ml-[10px]">
<div class="text-[16px] text-[#333333] font-normal">{{ channelDetail?.creatorName }}</div>
<div class="text-[12px] text-[#999999] font-normal">发表时间：{{ dayjs(channelDetail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
</div>
</div>
<div class="mt-19px flex items-center justify-between">
<div class="mt-[19px] flex items-center justify-between">
<div class="flex items-center">
<img src="~/assets/images/look.png" alt="" srcset="" class="mr-4px h-17px" />
<img src="~/assets/images/look.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
<span class="text-[#666666]">{{ channelDetail?.likeNum || 0 }}人赞过</span>
<div class="ml-16px flex items-center">
<img src="~/assets/images/add.png" alt="" class="mr-4px h-23px" />
<div class="ml-[16px] flex items-center">
<img src="~/assets/images/add.png" alt="" class="mr-[4px] h-[23px]" />
<span class="text-[#666666]">{{ channelDetail?.commentNum || 0 }}评论</span>
</div>
</div>
<div class="ml-16px flex items-center">
<img src="~/assets/images/chat.png" alt="" srcset="" class="mr-4px h-17px" />
<div class="ml-[16px] flex items-center">
<img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
<span class="text-[#666666]">{{ channelDetail?.browseNum || 0 }}人看过</span>
</div>
</div>
</div>
<div>
<img :src="channelDetail?.postsCover" alt="" srcset="" class="h-396px w-auto" />
<div class="mt-20px text-14px text-[#333333] font-normal" v-html="channelDetail?.postsContent"></div>
<img :src="channelDetail?.postsCover" alt="" srcset="" class="h-[396px] w-auto" />
<div class="mt-[20px] text-[14px] text-[#333333] font-normal" v-html="channelDetail?.postsContent"></div>
</div>
<div class="mt-30px">
<div class="h-48px w-938px rounded-1px bg-[#F8F8F8] pl-10px text-16px text-[#333333] font-normal line-height-50px"
<div class="mt-[30px]">
<div class="h-[48px] w-[100%] rounded-[1px] bg-[#F8F8F8] pl-[10px] text-[16px] text-[#333333] font-normal line-height-[50px]"
>共有{{ commentList?.total || 0 }}条评论</div
>
<div v-for="item in commentList?.list" :key="item.commentId" class="mt-10px border-b-1px border-b-[#eee] border-b-solid pb-14px">
<div v-for="item in commentList?.list" :key="item.commentId" class="mt-[10px] border-b-[1px] border-b-[#eee] border-b-solid pb-[14px]">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img :src="item.creatorAvatar" alt="" srcset="" class="relative top-12px h-50px w-49px rounded-full" />
<div class="ml-10px">
<img :src="item.creatorAvatar" alt="" srcset="" class="relative top-[12px] h-[50px] w-[49px] rounded-full" />
<div class="ml-[10px]">
<span>{{ item.creatorName }}</span>
</div>
</div>
<div class="text-12px text-[#999999] font-normal">发表时间：{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
<div class="text-[12px] text-[#999999] font-normal">发表时间：{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
</div>
<div class="ml-60px mt--10px box-border rd-4px bg-[#F8F8F8] pa-6px px-8px text-14px text-[#999999] font-normal">{{ item.content }}</div>
<div class="ml-[60px] mt-[-10px] box-border rd-[4px] bg-[#F8F8F8] pa-[6px] px-[8px] text-[14px] text-[#999999] font-normal">{{ item.content }}</div>
</div>
<!-- 添加element-plus分页 -->
<el-pagination
@ -52,19 +52,19 @@
:page-size="query.pageSize"
layout="prev, pager, next"
:total="commentList?.total"
class="mt-10px"
class="mt-[10px]"
@current-change="handleCurrentChange"
/>
<el-input v-model="commentContent" type="textarea" :rows="6" placeholder="请输入内容" class="mt-20px w-100%"></el-input>
<el-input v-model="commentContent" type="textarea" :rows="6" placeholder="请输入内容" class="mt-[20px] w-[100%]"></el-input>
</div>
<div>
<el-button type="primary" class="mt-10px h-40px w-101px rounded-4px text-16px text-[#FFFFFF] font-bold" @click="handleCreateComment"
<el-button type="primary" class="mt-[10px] h-[40px] w-[101px] rounded-[4px] text-[16px] text-[#FFFFFF] font-bold" @click="handleCreateComment"
>发表评论</el-button
>
</div>
</div>
<div class="right ml-23px w-100%">
<!-- <div class="right ml-23px w-100%">
<div class="mt-20px w-398px border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid bg-[#FFFFFF]">
<img src="~/assets/images/sign.png" alt="" srcset="" class="h-206px w-100%" />
<div class="box-border border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid border-t-none bg-[#FFFFFF] pa-18px">
@ -89,7 +89,7 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
</template>