From 5a527ee296b6b4d53f775db7bb902fe8b8a9cb39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 6 Mar 2026 11:16:01 +0800
Subject: [PATCH] =?UTF-8?q?nvue=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/upload/upload.vue                  |   2 +-
 .../plugins/video/components/comment-info.vue |  11 +-
 .../plugins/video/components/comment-more.vue |  13 +-
 pages/plugins/video/detail/detail.nvue        | 598 +++++++++++++++---
 4 files changed, 524 insertions(+), 100 deletions(-)

diff --git a/components/upload/upload.vue b/components/upload/upload.vue
index b966d20c..046eb966 100644
--- a/components/upload/upload.vue
+++ b/components/upload/upload.vue
@@ -4,7 +4,7 @@
             <slot></slot>
         </view>
         <view v-else class="flex-row flex-wrap">
-            <block v-if="form_images_list.length > 0">
+            <block v-if="form_images_list && form_images_list.length > 0">
                 <view v-for="(item, index) in form_images_list" :key="index" class="item margin-right-lg pr">
                     <view v-if="propDelete" class="delete-icon pa z-i" @tap="upload_delete_event" :data-index="index">
                         <iconfont name="icon-close-fillup" size="36rpx" color="rgba(87,91,102,0.65)"></iconfont>
diff --git a/pages/plugins/video/components/comment-info.vue b/pages/plugins/video/components/comment-info.vue
index 8c9939cf..0fb167d8 100644
--- a/pages/plugins/video/components/comment-info.vue
+++ b/pages/plugins/video/components/comment-info.vue
@@ -27,7 +27,7 @@
             <view class="comment-operation flex-row align-c jc-sb gap-10">
                 <view class="comment-operation-left flex-row align-c gap-10">
                     <view class="comment-time">{{ propComment.add_time }}</view>
-                    <view class="comment-reply flex-row align-c gap-5">{{ propReplyContent || $t('common.reply') }}({{ propComment.comments_count }})</view>
+                    <view class="comment-reply flex-row align-c gap-5">{{ propReplyContent || reply_html }}({{ propComment.comments_count }})</view>
                 </view>
                 <view class="comment-operation-right flex-row align-c gap-5" @tap.stop="comment_like">
                     <iconfont name="icon-givealike-o-fine" :color="propComment.is_give_thumbs == 0 ? '#000' : '#F4B73F'" size="28rpx" />
@@ -41,6 +41,12 @@
 
 <script>
     const app = getApp();
+    //#ifdef APP-NVUE
+        import { initVueI18n } from '@dcloudio/uni-i18n'
+        import i18nMessages from '@/locale/index-nvue.js'
+        const { t } = initVueI18n(i18nMessages)
+        const $t = t;
+    //#endif
     import { isEmpty } from '@/common/js/common/common.js';
     export default {
         props: {
@@ -70,7 +76,8 @@
                 dropdownOptions: [
                     { label: this.$t('common.del'), type: 'delete' },
                     { label: this.$t('common.complaint'), type: 'report' }
-                ]
+                ],
+                reply_html: $t('common.reply'),
             };
         },
         computed: {
diff --git a/pages/plugins/video/components/comment-more.vue b/pages/plugins/video/components/comment-more.vue
index 1a6e5ae9..e6a9d7b8 100644
--- a/pages/plugins/video/components/comment-more.vue
+++ b/pages/plugins/video/components/comment-more.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="more-title flex-row align-c" @tap="comment_more_event">
-        <text>{{ propText || $t('common.expand') }}</text>
+        <text>{{ propText || expand_html }}</text>
         <view class="ml-5">
             <iconfont :name="propIconName" color="#999" size="20rpx" />
         </view>
@@ -8,6 +8,12 @@
 </template>
 
 <script> 
+//#ifdef APP-NVUE
+    import { initVueI18n } from '@dcloudio/uni-i18n'
+    import i18nMessages from '@/locale/index-nvue.js'
+    const { t } = initVueI18n(i18nMessages)
+    const $t = t;
+//#endif
 export default {
     props: {
         propId: {
@@ -27,6 +33,11 @@ export default {
             default: 'icon-arrow-down'
         },
     },
+    data() {
+        return {
+            expand_html: $t('common.expand'),
+        };
+    },
     methods: {
         comment_more_event() {
             this.$emit('comment_more_event', this.propId, this.propIsLevel);
diff --git a/pages/plugins/video/detail/detail.nvue b/pages/plugins/video/detail/detail.nvue
index cc35964a..29e6f9a3 100644
--- a/pages/plugins/video/detail/detail.nvue
+++ b/pages/plugins/video/detail/detail.nvue
@@ -142,7 +142,7 @@
                 <view v-if="base_config_data && base_config_data.is_video_comments_add && base_config_data.is_video_comments_add == 1" class="comment-input-container">
                     <view class="comment-input-content flex-col jc-c">
                         <view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10">
-                            <text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
+                            <text class="size-12 cr-f text-line-1">@{{ isEmpty(comments_reply_data.user) ? '' : comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
                             <view data-type="image" @tap="comment_data_delete">
                                 <iconfont name="icon-close-line" size="24rpx" color="#fff"></iconfont>
                             </view>
@@ -248,8 +248,9 @@
     import componentUpload from '@/components/upload/upload';
     import componentCommon from '@/components/common/common';
     // 多语言
-    import { initVueI18n } from '@dcloudio/uni-i18n';
-    const { t } = initVueI18n()
+    import { initVueI18n } from '@dcloudio/uni-i18n'
+    import i18nMessages from '@/locale/index-nvue.js'
+    const { t } = initVueI18n(i18nMessages)
     // 状态栏高度
     var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
     // #ifdef MP-TOUTIAO || H5
@@ -289,11 +290,11 @@
                 comment_start_y: 0, // 评论开始拖拽位置
                 comment_current_y: 0, // 评论当前拖拽位置
                 move_distance: 0, // 评论拖拽距离
-                current_video_id: '', // 当前播放视频的ID
+                current_video_id: 1, // 当前播放视频的ID
                 is_slide_start: false,
                 swiper_key: get_math(),
                 comment_scroll_top: 0, // 评论滚动距离顶部的距离
-                input_placeholder: this.$t('video-detail.video-detail.98yyuf'),
+                input_placeholder: t('video-detail.video-detail.98yyuf'),
                 comment_input_value: '',
                 propMaxNum: 1,
                 form_images_list: [],
@@ -321,7 +322,8 @@
                 editor_path_type: 'video',
                 is_manual_pause: false, // 是否手动暂停
                 windowWidth: 0,
-                windowHeight: 0
+                windowHeight: 0,
+                
             };
         },
         components: {
@@ -354,44 +356,56 @@
                 }
             },
             // 如果是第一个或者最后一个的情况下，取消无限轮播
-            close_circular() {
-                if (this.video_data_list && this.video_data_list.length > 0) {
-                    return this.video_data_list[0].id == this.current_video_id  || this.video_data_list[this.video_data_list.length - 1].id == this.current_video_id;
-                } else {
-                    return true
+            close_circular() {
+                try {
+                    if (this.video_data_list && this.video_data_list.length > 0) {
+                        return this.video_data_list[0].id == this.current_video_id  || this.video_data_list[this.video_data_list.length - 1].id == this.current_video_id;
+                    } else {
+                        return true
+                    }
+                } catch {
+                    console.log('close_circular');
                 }
             },
             width_height_style() {
                 return `width: ${ this.windowWidth }px;height: ${ this.windowHeight }px;`;
             }
         },
-        onLoad(params) {
-            // 调用公共事件方法
-            app.globalData.page_event_onload_handle(params);
+        onLoad(params) {
+            try {
+                // 调用公共事件方法
+                app.globalData.page_event_onload_handle(params);
 
-            // 设置参数
-            this.params = app.globalData.launch_params_handle(params);
+                // 设置参数
+                this.params = app.globalData.launch_params_handle(params);
+            } catch {
+                console.log('close_circular');
+            }
         },
 
-        onShow() {
-            const data = uni.getWindowInfo();
-            this.windowWidth = data.windowWidth > 800 ? 800 : data.windowWidth;
-            this.windowHeight = data.windowHeight;
-            // 调用公共事件方法
-            app.globalData.page_event_onshow_handle();
+        onShow() {
+            try {
+                const data = uni.getWindowInfo();
+                this.windowWidth = data.windowWidth > 800 ? 800 : data.windowWidth;
+                this.windowHeight = data.windowHeight;
+                // 调用公共事件方法
+                app.globalData.page_event_onshow_handle();
 
-            // 视频播放
-            if (!this.is_manual_pause && this.create_video_contexts && this.create_video_contexts[this.current_index]) {
-                this.video_play_event(this.create_video_contexts[this.current_index]);
+                // 视频播放
+                if (!this.is_manual_pause && this.create_video_contexts && this.create_video_contexts[this.current_index]) {
+                    this.video_play_event(this.create_video_contexts[this.current_index]);
+                }
+
+                // 公共onshow事件
+                if ((this.$refs.common || null) != null) {
+                    this.$refs.common.on_show();
+                }
+
+                // 分享菜单处理
+                app.globalData.page_share_handle();
+            } catch {
+                console.log('close_circular');
             }
-
-            // 公共onshow事件
-            if ((this.$refs.common || null) != null) {
-                this.$refs.common.on_show();
-            }
-
-            // 分享菜单处理
-            app.globalData.page_share_handle();
         },
 
         onHide() {
@@ -405,19 +419,23 @@
             // 清理所有视频资源
             this.cleanup_all_videos();
         },
-        mounted() {
-            // 初始化
-            this.init();
+        mounted() {
+            try {
+                // 初始化
+                this.init();
 
-            // #ifdef H5
-            // 添加全局点击事件监听
-            document.addEventListener('click', this.handle_global_click);
-            // 添加触摸事件监听（移动端兼容）
-            document.addEventListener('touchstart', this.handle_global_click);
-            //#endif
+                // #ifdef H5
+                // 添加全局点击事件监听
+                document.addEventListener('click', this.handle_global_click);
+                // 添加触摸事件监听（移动端兼容）
+                document.addEventListener('touchstart', this.handle_global_click);
+                //#endif
 
-            // 创建监听事件
-            this.bind_keyboard_listener();
+                // 创建监听事件
+                this.bind_keyboard_listener();
+            } catch {
+                console.log('close_circular');
+            }
         },
         beforeDestroy() {
             // 清理定时器
@@ -490,21 +508,25 @@
                             id: id
                         },
                         dataType: 'json',
-                        success: res => {
-                            const data = res.data;
-                            if (data.code == 0) {
-                                const new_data = data.data;
-                                // 数据更新
-                                this.data_list_loding_status = 3;
-                                this.video_data_list = [new_data.data];
-                                this.report_type_list = new_data.report_type_list;
-                                this.base_config_data = new_data.base_config_data;
-                                this.editor_path_type = new_data.editor_path_type;
-
-                                this.get_last_or_next_data_list(this.params.id, 1, 1);
-                            } else {
-                                this.data_list_loding_status =  0;
-                                this.data_tabs_loding_msg = data.msg;
+                        success: res => {
+                            try { 
+                                const data = res.data;
+                                if (data.code == 0) {
+                                    const new_data = data.data;
+                                    // 数据更新
+                                    this.data_list_loding_status = 3;
+                                    this.video_data_list = [new_data.data];
+                                    this.report_type_list = new_data.report_type_list;
+                                    this.base_config_data = new_data.base_config_data;
+                                    this.editor_path_type = new_data.editor_path_type;
+                                
+                                    this.get_last_or_next_data_list(this.params.id, 1, 1);
+                                } else {
+                                    this.data_list_loding_status =  0;
+                                    this.data_tabs_loding_msg = data.msg;
+                                }
+                            } catch {
+                                console.error('get_video_detail error:', error);
                             }
                         },
                         fail: (err) => {
@@ -548,7 +570,7 @@
                                 
                                 if (is_last == 1 && is_next == 1) {
                                     // 上一批数据 - 去重处理
-                                    if (new_data.last.length > 0) {
+                                    if (new_data.last && new_data.last.length > 0) {
                                         const unique_last = new_data.last.filter(item => !existing_ids.has(item.id));
                                         if (unique_last.length > 0) {
                                             this.video_data_list.unshift(...unique_last);
@@ -557,18 +579,18 @@
                                         }
                                     }
                                     // 下一批数据 - 去重处理
-                                    if (new_data.next.length > 0) {
+                                    if (new_data.next && new_data.next.length > 0) {
                                         const unique_next = new_data.next.filter(item => !existing_ids.has(item.id));
                                         if (unique_next.length > 0) {
                                             this.video_data_list.push(...unique_next);
                                         }
                                     }
-                                } else if (is_last == 1 && new_data.last.length > 0) { // 上一页数据 - 去重处理
+                                } else if (is_last == 1 && new_data.last && new_data.last.length > 0) { // 上一页数据 - 去重处理
                                     const unique_last = new_data.last.filter(item => !existing_ids.has(item.id));
                                     if (unique_last.length > 0) {
                                         this.video_data_list.unshift(...unique_last);
                                     }
-                                } else if (is_next == 1 && new_data.next.length > 0) { // 下一页数据 - 去重处理
+                                } else if (is_next == 1 && new_data.next && new_data.next.length > 0) { // 下一页数据 - 去重处理
                                     const unique_next = new_data.next.filter(item => !existing_ids.has(item.id));
                                     if (unique_next.length > 0) {
                                         this.video_data_list.push(...unique_next);
@@ -595,20 +617,24 @@
                                     this.update_display_data();
 
                                     setTimeout(() => { 
-                                        // 更新分享信息
-                                        this.update_share_info(this.display_video_list[this.current_index]);
-
-                                        this.display_video_list.forEach((item, index) => {
-                                            // this.create_video_contexts[index] = uni.createVideoContext(`video_${index}`, this);
-                                            this.$set(this.create_video_contexts, index, uni.createVideoContext(`video_${index}`, this));  
-                                            //#ifdef H5
-                                            if (document.getElementById(`video_${index}`) != null) { 
-                                                // this.video_contexts[index] = document.getElementById(`video_${index}`).querySelector('video');
-                                                this.$set(this.video_contexts, index, document.getElementById(`video_${index}`).querySelector('video'));  
-                                            }
-                                            //#endif
-                                        });
-
+                                        if (this.display_video_list && this.display_video_list.length > 0) {
+                                            // 更新分享信息
+                                            this.update_share_info(this.display_video_list[this.current_index]);
+                                            
+                                            this.display_video_list.forEach((item, index) => {
+                                                // this.create_video_contexts[index] = uni.createVideoContext(`video_${index}`, this);
+                                                if (this.create_video_contexts) {
+                                                    this.$set(this.create_video_contexts, index, uni.createVideoContext(`video_${index}`, this));  
+                                                }
+                                                //#ifdef H5
+                                                if (document.getElementById(`video_${index}`) != null && this.video_contexts) { 
+                                                    // this.video_contexts[index] = document.getElementById(`video_${index}`).querySelector('video');
+                                                    this.$set(this.video_contexts, index, document.getElementById(`video_${index}`).querySelector('video'));  
+                                                }
+                                                //#endif
+                                            });
+                                        }
+                                        
                                         setTimeout(() => {
                                             //#ifdef H5
                                             if (this.video_contexts && this.video_contexts[this.current_index]) { // 当前播放的视频索引为 0
@@ -722,17 +748,19 @@
 
             // 批量暂停除指定索引外的所有视频
             pause_all_videos_except(exceptIndex) {
-                try {
-                    // 暂停 uni.createVideoContext 创建的视频
-                    this.create_video_contexts.forEach((context, index) => {
-                        if (index !== exceptIndex && context) {
-                            try {
-                                context.pause();
-                            } catch (error) {
-                                console.warn(`暂停视频 ${index} 失败:`, error);
-                            }
-                        }
-                    });
+                try {
+                    if (this.create_video_contexts && this.create_video_contexts.length > 0) {
+                        // 暂停 uni.createVideoContext 创建的视频
+                        this.create_video_contexts.forEach((context, index) => {
+                            if (index !== exceptIndex && context) {
+                                try {
+                                    context.pause();
+                                } catch (error) {
+                                    console.warn(`暂停视频 ${index} 失败:`, error);
+                                }
+                            }
+                        });
+                    }
                 } catch (error) {
                     console.error('pause_all_videos_except error:', error);
                 }
@@ -841,14 +869,14 @@
                     if (index < 0) {
                         // 循环到数组末尾
                         const actualIndex = this.video_data_list.length + (index % this.video_data_list.length);
-                        return this.video_data_list[actualIndex];
+                        return this.video_data_list[actualIndex] || {};
                     }
                     
                     // 处理超出数组长度的索引
                     if (index >= this.video_data_list.length) {
                         // 循环到数组开头
                         const actualIndex = index % this.video_data_list.length;
-                        return this.video_data_list[actualIndex];
+                        return this.video_data_list[actualIndex] || {};
                     }
                     
                     // 正常情况直接返回
@@ -1378,7 +1406,7 @@
                                 if (app.globalData.is_login_check(res.data)) {
                                     app.globalData.showToast(res.data.msg);
                                 } else {
-                                    app.globalData.showToast(this.$t('common.sub_error_retry_tips'));
+                                    app.globalData.showToast(t('common.sub_error_retry_tips'));
                                 }
                             }
                         }
@@ -1567,8 +1595,8 @@
                     if (obj.type == 'delete') {
                         // 确认删除
                         uni.showModal({
-                            title: this.$t('common.warm_tips'),
-                            content: this.$t('common.delete_confirm_tips'),
+                            title: t('common.warm_tips'),
+                            content: t('common.delete_confirm_tips'),
                             success: (res) => {
                                 if (res.confirm) {
                                     // 调用删除接口
@@ -1605,7 +1633,7 @@
                                 if (app.globalData.is_login_check(res.data)) {
                                     app.globalData.showToast(res.data.msg);
                                 } else {
-                                    app.globalData.showToast(this.$t('common.sub_error_retry_tips'));
+                                    app.globalData.showToast(t('common.sub_error_retry_tips'));
                                 }
                             }
                         }
@@ -1762,7 +1790,7 @@
                                 if (app.globalData.is_login_check(res.data)) {
                                     app.globalData.showToast(res.data.msg);
                                 } else {
-                                    app.globalData.showToast(this.$t('common.sub_error_retry_tips'));
+                                    app.globalData.showToast(t('common.sub_error_retry_tips'));
                                 }
                             }
                         }
@@ -1819,5 +1847,383 @@
     };
 </script>
 <style lang="scss" scoped>
-    @import './detail.css';
+    .content,
+    .swiper-container {
+        width: 100%;
+        height: 100vh;
+    }
+    
+    .video {
+        width: 100%;
+        height: 100%;
+    }
+    
+    .video-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .play-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        pointer-events: none;
+    }
+    
+    .play-icon .play-icon-bg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: #fff;
+        width: 60rpx;
+        height: 60rpx;
+        z-index: 0;
+    }
+    
+    .play-icon .play-icon-iconfont {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    
+    .right-actions {
+        position: absolute;
+        right: 20rpx;
+        bottom: 200rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: #fff;
+        z-index: 10;
+    }
+    
+    .action-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 40rpx;
+    }
+    
+    .user-avatar {
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 50%;
+        border: 4rpx solid #fff;
+    }
+    
+    .icon {
+        width: 70rpx;
+        height: 70rpx;
+    }
+    
+    .action-text {
+        font-size: 28rpx;
+        margin-top: 10rpx;
+    }
+    
+    .product-card {
+        position: absolute;
+        width: 440rpx;
+        bottom: 180rpx;
+        left: 30rpx;
+        color: #fff;
+        z-index: 99;
+    }
+    
+    .product-card .product-card-item {
+        background: #DDDDDD;
+        padding: 16rpx;
+        border-radius: 8rpx;
+    }
+    .product-card .product-image {
+        width: 100rpx;
+        height: 100rpx;
+    }
+    .product-card .product-name {
+        font-weight: 500;
+        font-size: 28rpx;
+        color: #333333;
+        line-height: 40rpx;
+    }
+    .product-card .product-price {
+        font-weight: 500;
+        font-size: 32rpx;
+        color: #FF1919;
+        line-height: 44rpx;
+    }
+    .product-card .product-close {
+        position: absolute;
+        right: -10rpx;
+        top: -14rpx;
+    }
+    
+    .product-card .product-button {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 300rpx;
+        height: 88rpx;
+        padding: 0 20rpx;
+        background: rgba(40, 40, 40, 0.45);
+        border-radius: 88rpx;
+        border: 2rpx solid rgba(151, 151, 151, 0.53);
+        cursor: pointer;
+    }
+    
+    .author {
+        font-size: 36rpx;
+        font-weight: bold;
+    }
+    ::v-deep .uni-video-container {
+        background: transparent;
+    }
+    .video-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        background: #000;
+        background-size: cover;
+        background-position: center;
+        transform: scale(3);
+        filter: blur(100rpx);
+        opacity: 0.7;
+    }
+    
+    .video-mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: transparent;
+    }
+    
+    .video-content {
+        display: block;
+        font-size: 30rpx;
+        margin-top: 16rpx;
+        max-width: 70%;
+    }
+    
+    .progress-bar-container {
+        position: absolute;
+        bottom: 60rpx;
+        left: 20rpx;
+        right: 20rpx;
+        display: flex;
+        align-items: center;
+        z-index: 11;
+    }
+    
+    .progress-slider {
+        flex: 1;
+        margin: 0 20rpx;
+    }
+    
+    .time-display {
+        color: #fff;
+        font-size: 24rpx;
+        text-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.6);
+        width: 180rpx;
+        text-align: right;
+    }
+    
+    /* 评论弹窗样式 */
+    .comment-modal {
+        position: fixed;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        height: 100%;
+        max-width: 1600rpx;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 99;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+    }
+    
+    .comment-content {
+        width: 100%;
+        height: 70%;
+        background-color: #fff;
+        border-top-left-radius: 30rpx;
+        border-top-right-radius: 30rpx;
+        display: flex;
+        flex-direction: column;
+        transition: transform 0.3s ease;
+    }
+    
+    .comment-header {
+        padding: 30rpx;
+        box-sizing: border-box;
+        border-bottom: 2rpx solid #eee;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    
+    .comment-count {
+        font-weight: bold;
+        font-size: 32rpx;
+    }
+    
+    .close-btn {
+        font-size: 40rpx;
+        color: #999;
+    }
+    
+    .comment-list {
+        flex: 1;
+        overflow: hidden;
+    }
+    
+    .comment-list .comment-scroll {
+        width: 100%;
+        height: 100%;
+        padding: 30rpx;
+        box-sizing: border-box;
+    }
+    
+    .comment-item {
+        margin-bottom: 30rpx;
+    }
+    
+    .sub-comment {
+        margin-left: 100rpx;
+    }
+    
+    .sub-comment-list {
+        gap: 40rpx;
+    }
+    .comment-input-container {
+        display: flex;
+        padding: 20rpx;
+        border-top: 2rpx solid #eee;
+    }
+    
+    .comment-input {
+        flex: 1;
+        font-size: 28rpx;
+        height: 50rpx;
+        padding: 16rpx;
+        box-sizing: content-box;
+    }
+    
+    .comment-input-content {
+        flex: 1;
+        border: 2rpx solid #eee;
+        border-radius: 16rpx;
+        font-size: 28rpx;
+    }
+    
+    .pr-16 {
+        padding-right: 16rpx;
+    }
+    .comment-input-img-container {
+        padding: 10rpx 16rpx 16rpx 16rpx;
+    }
+    .comment-input-img-close {
+        position: absolute;
+        right: -15rpx;
+        top: -15rpx;
+        z-index: 2;
+    }
+    .comment-input-img {
+        width: 50rpx;
+        height: 50rpx;
+    }
+    
+    /* 新的举报弹窗样式 */
+    .report-content {
+        width: 100%;
+        max-width: 750rpx;
+        background-color: #fff;
+        border-radius: 20rpx;
+    }
+    
+    .report-header {
+        padding: 30rpx 40rpx;
+        border-bottom: 1rpx solid #ddd;
+        background-color: #fff;
+    }
+    
+    .report-btn {
+        font-size: 32rpx;
+        color: #333;
+    }
+    
+    .report-title {
+        font-size: 36rpx;
+        font-weight: bold;
+        text-align: center;
+        color: #333;
+    }
+    
+    .report-body {
+        padding: 30rpx 40rpx;
+    }
+    
+    .report-section {
+        margin-bottom: 30rpx;
+    }
+    
+    .report-label {
+        font-size: 32rpx;
+        font-weight: bold;
+        margin-bottom: 20rpx;
+        color: #333;
+    }
+    
+    .report-label text {
+        color: #e74c3c;
+        font-size: 30rpx;
+        vertical-align: middle;
+    }
+    /* 搜索 */
+    .header-top {
+        padding-left: 12px;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 9;
+        width: 100%;
+    }
+    .header-top ::v-deep .search-bar {
+        background:#D8D8D8;
+        opacity: 0.27;
+        border-color: transparent;
+    }
+    
+    .keyboard-input {
+        position: fixed;
+        left: 0;
+        z-index: 99;
+        background: #fff;
+        padding: 20rpx;
+        box-sizing: border-box;
+    }
+    .keyboard-input-border {
+        border: 2rpx solid #ddd;
+        border-radius: 16rpx;
+    }
+    .keyboard-input-content {
+        padding: 16rpx 22rpx;
+    }
+    .comment-reply-content {
+        background-color: rgba(0, 0, 0, 0.6);
+        padding: 10rpx;
+        border-radius: 16rpx;
+        color: #fff;
+    }
 </style>
\ No newline at end of file