hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-11 03:46:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

评论样式

Browse Source
This commit is contained in:
zhaofang
2022-11-14 16:03:45 +08:00
parent 2c6d13e0f9
commit e4a1862d6f
8 changed files with 92 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/comments/comments.vue
View File

@@ -4,8 +4,8 @@
<view class="comments">
<view v-if="showTop" class="comments-top">
<view>
<text style="font-size: 30upx;font-weight: 500;">评论 </text>
<text style="font-size: 30upx;padding-left: 6upx;color: #000000;"> ( {{total}} )</text></view>
<text style="font-size: 32upx;font-weight: 500;">评论 </text>
<text style="font-size: 28upx;padding-left: 20upx;color: #333;font-weight: 400;"> ({{total}})</text></view>
<view>
<!-- <view v-if="showShare" class="share-btn" @click="addShare">
<view class="share-btn-icon"><img src="/static/images/icon/share.png" alt=""></view>
@@ -17,23 +17,30 @@
<!--内容确定了，这部分样式要移到class中-->
<view v-for="(comm,commidx) in list" :key="commidx" class="comment">
<view class="comment-top">
<view style="display: flex;">
<author :showInfo="true" :data="comm"></author>
<!-- <author-info :avatar="comm.avatar" :name="comm.sysCreateBy"></author-info> -->
</view>
<view class="comment-time">
<time-show :time="comm.sysCreateTime"></time-show>
</view>
<author-img :avatar="comm.avatar" :sex="comm.sex" width="30px" height="30px" :size="30"></author-img>
<text style="font-size: 28upx;ont-weight: 500;color: #333333;margin-left: 22upx;">{{comm.sysCreateBy}}</text>
</view>
<view class="comment-body">
<view class="comment-content" v-html="comm.content"></view>
<view class="comment-btns">
<view>
<view class="comment-time">
<time-show :time="comm.sysCreateTime"></time-show>
</view>
<view class="" style="display: flex;">
<view style="font-size: 12px;color: #999999;line-height: 60upx;" @click="openInput(commidx)">
<image style="width: 36upx;height: 36upx;vertical-align: middle;margin-right: 10upx;" src="../../static/images/icon/bar-comment.png" size="24"></image>回复
<!-- <u-icon @click="openInput(commidx)" name="chat" color="#979797" size="18" label="回复"></u-icon> -->
</view>
<interact-bar :data="comm" :comments="false" :favorites="false"></interact-bar>
</view>
<!-- <view>
<u-icon @click="openInput(commidx)" name="chat" color="#979797" size="18" label="回复"></u-icon>
</view>
<view>
</view> -->
<!-- <view>
<u-icon @click="openBtns(commidx,-1,comm)" name="more-dot-fill" size="20"></u-icon>
</view>
</view> -->
</view>
<view v-if="comm.replyList && comm.replyList.length>0" class="comment-replys">
<view v-for="(reply,replyIdx) in comm.replyList" :key="replyIdx" class="comment">
@@ -43,23 +50,32 @@
<!-- <author-info :avatar="reply.avatar" :name="reply.sysCreateBy"></author-info> -->
<!-- <u-avatar shape="square" icon="account" :size="26" :src="reply.avatar"></u-avatar>
<text style="margin-left: 10upx;"> {{reply.sysCreateBy}}</text> -->
<text style="padding-left: 16upx;padding-top: 6upx;color: #979797;"> 回复 </text>
<text style="padding-left: 16upx;padding-top: 6upx;color: #979797;font-size: 20upx;"> 回复 </text>
<text style="padding-left: 16upx;padding-top: 6upx;font-size: 26upx;">{{reply.replyName}}</text>
</view>
<view class="comment-time">
<time-show :time="reply.sysCreateTime"></time-show>
</view>
</view>
<view class="comment-body">
<view class="comment-body" style="margin-left: 0;padding-left: 50upx;">
<view class="comment-content" v-html="reply.content"></view>
<view class="comment-btns">
<view>
<u-icon @click="openInput(commidx,replyIdx)" name="chat" color="#979797" size="18" label="回复"></u-icon>
<view class="" style="display: flex;justify-content: space-between;">
<view class="comment-time">
<time-show :time="reply.sysCreateTime"></time-show>
</view>
<view>
<u-icon @click="openBtns(commidx,replyIdx,reply)" name="more-dot-fill" size="20"></u-icon>
<view class="comment-btns" style="line-height: 60upx;">
<view style="font-size: 12px;color: #999999;" @click="openInput(commidx,replyIdx)">
<image style="width: 36upx;height: 36upx;vertical-align: middle;margin-right: 10upx;" src="../../static/images/icon/bar-comment.png" size="24"></image>回复
<!-- <u-icon @click="openInput(commidx)" name="chat" color="#979797" size="18" label="回复"></u-icon> -->
</view>
<interact-bar :data="reply" :comments="false" :favorites="false"></interact-bar>
<!-- <view>
<u-icon @click="openInput(commidx,replyIdx)" name="chat" color="#979797" size="18" label="回复"></u-icon>
</view>
<view>
<u-icon @click="openBtns(commidx,replyIdx,reply)" name="more-dot-fill" size="20"></u-icon>
</view> -->
</view>
</view>
</view>
</view>
</view>
@@ -544,7 +560,7 @@
padding-top: 20upx;
.comment-top{
display: flex;
justify-content: space-between;
// justify-content: space-between;
line-height: 50upx;
.comment-avatar{
height: 50upx;
@@ -557,13 +573,14 @@
}
}
.comment-body{
padding: 6upx 0upx 0upx 60upx;
margin-left: 22upx;
padding: 0 0upx 0upx 60upx;
color: #373737;
.comment-content{
word-break:break-all;
padding: 0upx 10upx 10upx 0upx;
font-size: 28upx;
color: #333333;
color: #666666;
}
.comment-btns{
display: flex;