视频评论样式优化

xiangpei

2025-05-29 bd2a40affe42ddf4d78553d315cf7a4936dc0223

视频评论样式优化

 App.vue

@@ -255,9 +255,9 @@
    @font-face {
      font-family: 'iconfont';  /* Project id 4921691 */
      src: 
           url('//at.alicdn.com/t/c/font_4921691_egp12flgzc7.woff2?t=1748508836450') format('woff2'),
           url('//at.alicdn.com/t/c/font_4921691_egp12flgzc7.woff?t=1748508836450') format('woff'),
           url('//at.alicdn.com/t/c/font_4921691_egp12flgzc7.ttf?t=1748508836450') format('truetype');
           url('//at.alicdn.com/t/c/font_4921691_s75bca4srg.woff2?t=1748511781888') format('woff2'),
           url('//at.alicdn.com/t/c/font_4921691_s75bca4srg.woff?t=1748511781888') format('woff'),
           url('//at.alicdn.com/t/c/font_4921691_s75bca4srg.ttf?t=1748511781888') format('truetype');
    }
    .iconfont {
          /* font-family需要和自定义的相同 */

 pages/tabbar/index/home.vue

@@ -145,14 +145,14 @@
                </view>
              </view>
              <view class="view-more-replies" v-if="comment.replyTotalCount > 0 && !comment.expandReply" @click="loadRepliesPage(comment, index)">
                展开{{comment.replyTotalCount}}条回复 ↓
                <text class="line">——</text>展开{{comment.replyTotalCount}}条回复 ↓
              </view>
              <view class="reply-op" v-if="comment.replyTotalCount > replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
                  <view @click="loadNextPageReply(index)" class="reply-op-item">展开更多<text class="iconfont textSideIcon">&#xeb8d;</text></view>
                  <view @click="loadNextPageReply(index)" class="reply-op-item"><text class="line">——</text>展开更多<text class="iconfont textSideIcon">&#xeb8d;</text></view>
                  <view @click="retractReplyComment(index)" class="reply-op-item" style="margin-left: 50rpx;">收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
              </view>
              <view class="reply-op" v-else-if="comment.replyTotalCount <= replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
                  <view @click="retractReplyComment(index)" class="reply-op-item">收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
                  <view @click="retractReplyComment(index)" class="reply-op-item"><text class="line">——</text>收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
              </view>
          </view>
        </scroll-view>
@@ -804,7 +804,7 @@
    .comment-item {
      display: flex;
      flex-direction: column;
      padding: 10rpx 0;
      padding: 10rpx 0 20rpx 0;
    }

    .comment-avatar {
@@ -887,6 +887,7 @@
    .reply-op-item {
        display: flex;
        align-items: center;
        height: 40rpx;
    }
    
    .reply-item {
@@ -942,4 +943,8 @@
        font-size: 36rpx;
        margin-left: 5rpx;
    }
    .line {
        margin-right: 10rpx;
        color: #cccccc;
    }
</style>