From 2500fbb05a6d3487b81b6af3325516fffa4edeaa Mon Sep 17 00:00:00 2001
From: gongfuxiang <fuxiang.gong@qq.com>
Date: Thu, 26 Feb 2026 21:42:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9F=AD=E8=A7=86=E9=A2=91=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   4 +-
 pages/plugins/video/detail/detail.css         | 375 +++++++++++++++++
 pages/plugins/video/detail/detail.vue         | 387 +-----------------
 pages/plugins/video/index/index.css           | 118 ++++++
 pages/plugins/video/index/index.vue           | 129 +-----
 .../video/search-record/search-record.css     | 231 +++++++++++
 .../search-record.vue                         | 233 +----------
 pages/plugins/video/search/search.css         | 181 ++++++++
 pages/plugins/video/search/search.vue         | 182 +-------
 9 files changed, 918 insertions(+), 922 deletions(-)
 create mode 100644 pages/plugins/video/detail/detail.css
 create mode 100644 pages/plugins/video/index/index.css
 create mode 100644 pages/plugins/video/search-record/search-record.css
 rename pages/plugins/video/{search => search-record}/search-record.vue (70%)
 create mode 100644 pages/plugins/video/search/search.css

diff --git a/pages.json b/pages.json
index 7d86918f..c290fd1a 100644
--- a/pages.json
+++ b/pages.json
@@ -2079,7 +2079,7 @@
                     }
                 },
                 {
-                    "path": "search/search-record",
+                    "path": "search/search",
                     "style": {
                         // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
                         "navigationStyle": "custom",
@@ -2093,7 +2093,7 @@
                     }
                 },
                 {
-                    "path": "search/search",
+                    "path": "search-record/search-record",
                     "style": {
                         // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
                         "navigationStyle": "custom",
diff --git a/pages/plugins/video/detail/detail.css b/pages/plugins/video/detail/detail.css
new file mode 100644
index 00000000..3e02f7df
--- /dev/null
+++ b/pages/plugins/video/detail/detail.css
@@ -0,0 +1,375 @@
+.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-bg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: #fff;
+        width: 60rpx;
+        height: 60rpx;
+        z-index: 0;
+    }
+    .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-item {
+        background: #DDDDDD;
+        padding: 16rpx;
+        border-radius: 8rpx;
+    }
+    .product-image {
+        width: 100rpx;
+        height: 100rpx;
+    }
+    .product-name {
+        font-weight: 500;
+        font-size: 28rpx;
+        color: #333333;
+        line-height: 40rpx;
+    }
+    .product-price {
+        font-weight: 500;
+        font-size: 32rpx;
+        color: #FF1919;
+        line-height: 44rpx;
+    }
+    .product-close {
+        position: absolute;
+        right: -10rpx;
+        top: -14rpx;
+    }
+    .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-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;
+    // padding-right: 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;
+}
\ No newline at end of file
diff --git a/pages/plugins/video/detail/detail.vue b/pages/plugins/video/detail/detail.vue
index d78d0419..ee8f1c7a 100644
--- a/pages/plugins/video/detail/detail.vue
+++ b/pages/plugins/video/detail/detail.vue
@@ -1284,7 +1284,7 @@
             },
             handle_search() {
                 // 跳转到搜索记录页面
-                app.globalData.url_open(`/pages/plugins/video/search/search-record`, false);
+                app.globalData.url_open(`/pages/plugins/video/search-record/search-record`, false);
             },
             // 关闭推荐商品
             product_close_event(e) {
@@ -1579,387 +1579,6 @@
         }
     };
 </script>
-
-<style lang="scss" scoped>
-    .mt-10 {
-        margin-top: 20rpx;
-    }
-    .ml-10 {
-        margin-left: 20rpx;
-    }
-    .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-bg {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: #fff;
-            width: 60rpx;
-            height: 60rpx;
-            z-index: 0;
-        }
-        .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-item {
-            background: #DDDDDD;
-            padding: 16rpx;
-            border-radius: 8rpx;
-        }
-        .product-image {
-            width: 100rpx;
-            height: 100rpx;
-        }
-        .product-name {
-            font-weight: 500;
-            font-size: 28rpx;
-            color: #333333;
-            line-height: 40rpx;
-        }
-        .product-price {
-            font-weight: 500;
-            font-size: 32rpx;
-            color: #FF1919;
-            line-height: 44rpx;
-        }
-        .product-close {
-            position: absolute;
-            right: -10rpx;
-            top: -14rpx;
-        }
-        .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-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;
-        // padding-right: 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 lang="scss" scoped>
+    @import './detail.css';
 </style>
diff --git a/pages/plugins/video/index/index.css b/pages/plugins/video/index/index.css
new file mode 100644
index 00000000..e75a1a47
--- /dev/null
+++ b/pages/plugins/video/index/index.css
@@ -0,0 +1,118 @@
+.header-top {
+	position: sticky;
+	top: 0;
+	background: #fff;
+	z-index: 9;
+}
+/* 导航栏 */
+.nav-tabs {
+	position: sticky;
+	top: 110rpx;
+	width: 100%;
+	padding: 0 16rpx 20rpx 24rpx;
+	z-index: 9;
+	background: transparent; // 默认透明背景
+	transition: background-color 0.3s ease; // 添加背景色过渡动画
+	
+	&.nav-tabs-sticky {
+		background: #fff; // 粘性状态时背景变白
+	}
+	
+	.tabs-scroll-content {
+		display: flex;
+		align-items: center;
+		gap: 48rpx;
+	}
+	.tab-item {
+		position: relative;
+		white-space: nowrap;
+		padding-bottom: 16rpx;
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 40rpx;
+	}
+
+	.tab-item.active {
+		color: #333333;
+	}
+	
+	.tab-item::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 4px;
+		background-color: #333;
+		transition: width 0.6s ease;
+        border-radius: 8rpx;
+	}
+
+	.tab-item.active::after {
+		width: 64rpx;
+	}
+
+	.tab-item.active {
+		color: #333;
+	}
+}
+
+/* #ifdef MP-WEIXIN | APP-PLUS */
+.tabs-scroll {
+	::v-deep ::-webkit-scrollbar {
+		width: 0rpx!important;
+		height: 0rpx!important;
+		background-color: transparent;
+	}
+}
+/* #endif */
+/* 推荐视频列表 */
+.recommend-videos {
+	padding: 20rpx 16rpx;
+	.video-grid {
+		column-count: 2;
+		column-gap: 20rpx;
+	}
+
+	.video-card {
+		background-color: #fff;
+		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+		border-radius: 8rpx;
+		overflow: hidden;
+		break-inside: avoid;
+		margin-bottom: 20rpx;
+		width: 100%;
+	}
+
+	.video-thumbnail {
+		width: 100%;
+		object-fit: contain;
+	}
+
+	.video-info {
+		padding: 20rpx;
+		padding-top: 10rpx;
+		gap: 20rpx;
+	}
+
+	.video-title {
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #333333;
+		line-height: 40rpx;
+	}
+
+	.video-date,
+	.video-likes {
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+		line-height: 34rpx;
+	}
+}
+.tabs-scroll-image {
+	width: 40rpx;
+	height: 40rpx;
+}
\ No newline at end of file
diff --git a/pages/plugins/video/index/index.vue b/pages/plugins/video/index/index.vue
index 19f08d35..affe03ca 100644
--- a/pages/plugins/video/index/index.vue
+++ b/pages/plugins/video/index/index.vue
@@ -19,16 +19,16 @@
 					</view>
 					<!-- 轮播 -->
 					<view v-if="slider_list.length > 0" class="padding-horizontal-main">
-						<component-banner :propData="slider_list"></component-banner>
+						<component-banner :propData="slider_list" propBackgroundColor="#333" propSelectedBackgroundColor="#999"></component-banner>
 					</view>
 					<template v-if="tabs.length > 0">
 						<!-- 导航栏 -->
 						<view class="nav-tabs" :class="{ 'nav-tabs-sticky': is_nav_sticky }">
-							<scroll-view scroll-x :show-scrollbar="false" class="tabs-scroll" style="white-space: nowrap;">
+							<scroll-view scroll-x :show-scrollbar="false" class="tabs-scroll nowrap">
 								<view class="tabs-scroll-content">
 									<view v-for="(item, index) in tabs" :key="index" class="tab-item flex-row align-c gap-5" :class="{ active: current_tabs_index === index }" :data-index="index" :data-id="item.id" @tap="switch_tab">
-										<image v-if="!isEmpty(item.icon)" class="tabs-scroll-image" :src="item.icon" mode="aspectFit"></image>
-										{{ item.name }}
+										<image v-if="!isEmpty(item.icon)" class="tabs-scroll-image radius va-m" :src="item.icon" mode="aspectFill"></image>
+										<text class="va-m">{{ item.name }}</text>
 									</view>
 								</view>
 							</scroll-view>
@@ -216,7 +216,7 @@ export default {
 		},
 		handle_search() {
 			// 跳转到搜索记录页面
-			app.globalData.url_open(`/pages/plugins/video/search/search-record`, false);
+			app.globalData.url_open(`/pages/plugins/video/search-record/search-record`, false);
 		},
 		switch_tab(e) {
 			const id = e?.currentTarget?.dataset?.id || 0;
@@ -250,123 +250,6 @@ export default {
 	}
 };
 </script>
-
 <style lang="scss" scoped>
-.header-top {
-	position: sticky;
-	top: 0;
-	background: #fff;
-	z-index: 9;
-}
-/* 导航栏 */
-.nav-tabs {
-	position: sticky;
-	top: 110rpx;
-	width: 100%;
-	padding: 0 16rpx 20rpx 16rpx;
-	z-index: 9;
-	background: transparent; // 默认透明背景
-	transition: background-color 0.3s ease; // 添加背景色过渡动画
-	
-	&.nav-tabs-sticky {
-		background: #fff; // 粘性状态时背景变白
-	}
-	
-	.tabs-scroll-content {
-		display: flex;
-		align-items: center;
-		gap: 48rpx;
-	}
-	.tab-item {
-		position: relative;
-		white-space: nowrap;
-		padding-bottom: 8rpx;
-		font-weight: 500;
-		font-size: 28rpx;
-		color: #666666;
-		line-height: 40rpx;
-	}
-
-	.tab-item.active {
-		color: #333333;
-	}
-	
-	.tab-item::after {
-		content: '';
-		position: absolute;
-		bottom: 0;
-		left: 50%;
-		transform: translateX(-50%);
-		width: 0;
-		height: 4px;
-		background-color: #333;
-		transition: width 0.6s ease;
-	}
-
-	.tab-item.active::after {
-		width: 100%;
-	}
-
-	.tab-item.active {
-		color: #333;
-	}
-}
-
-/* #ifdef MP-WEIXIN | APP-PLUS */
-.tabs-scroll {
-	::v-deep ::-webkit-scrollbar {
-		width: 0rpx!important;
-		height: 0rpx!important;
-		background-color: transparent;
-	}
-}
-/* #endif */
-/* 推荐视频列表 */
-.recommend-videos {
-	padding: 20rpx 16rpx;
-	.video-grid {
-		column-count: 2;
-		column-gap: 10px;
-	}
-
-	.video-card {
-		background-color: #fff;
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-		border-radius: 4px;
-		overflow: hidden;
-		break-inside: avoid;
-		margin-bottom: 10px;
-		width: 100%;
-	}
-
-	.video-thumbnail {
-		width: 100%;
-		object-fit: contain;
-	}
-
-	.video-info {
-		padding: 20rpx;
-		padding-top: 10rpx;
-		gap: 20rpx;
-	}
-
-	.video-title {
-		font-weight: 500;
-		font-size: 28rpx;
-		color: #333333;
-		line-height: 40rpx;
-	}
-
-	.video-date,
-	.video-likes {
-		font-weight: 400;
-		font-size: 24rpx;
-		color: #999999;
-		line-height: 34rpx;
-	}
-}
-.tabs-scroll-image {
-	width: 40rpx;
-	height: 40rpx;
-}
+    @import './index.css';
 </style>
\ No newline at end of file
diff --git a/pages/plugins/video/search-record/search-record.css b/pages/plugins/video/search-record/search-record.css
new file mode 100644
index 00000000..3757a86c
--- /dev/null
+++ b/pages/plugins/video/search-record/search-record.css
@@ -0,0 +1,231 @@
+.search-record-container {
+    background: #fff;
+	height: 100vh;
+}
+
+.header-top {
+	position: sticky;
+	top: 0;
+	background: #fff;
+	z-index: 9;
+    padding-left: 24rpx;
+	box-sizing: border-box;
+}
+
+/* #ifdef MP-WEIXIN | APP-PLUS */
+.tabs-scroll {
+	::v-deep ::-webkit-scrollbar
+	{
+		width: 0rpx!important;
+		height: 0rpx!important;
+		background-color: transparent;
+	}
+}
+/* #endif */
+/* 推荐视频列表 */
+.recommend-videos {
+	padding: 0 16rpx 20rpx 16rpx;
+	.video-grid {
+		column-count: 2;
+		column-gap: 10px;
+	}
+
+	.video-card {
+		background-color: #fff;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+		overflow: hidden;
+		break-inside: avoid;
+		margin-bottom: 10px;
+		width: 100%;
+	}
+
+	.video-thumbnail {
+		width: 100%;
+		object-fit: contain;
+	}
+
+	.video-info {
+		padding: 20rpx;
+		padding-top: 10rpx;
+		gap: 20rpx;
+	}
+
+	.video-title {
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #333333;
+		line-height: 40rpx;
+	}
+
+	.video-date,
+	.video-likes {
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+		line-height: 34rpx;
+	}
+}
+
+.search-history {
+	padding: 20rpx 40rpx 24rpx 40rpx;
+    gap: 40rpx;
+    border-bottom: 2rpx solid #EDEDED;
+    .search-history-title {
+        font-weight: 500;
+        font-size: 28rpx;
+        color: #666666;
+        line-height: 40rpx;
+        gap: 20rpx;
+    }
+    .more-history-btn {
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #999999;
+        line-height: 40rpx;
+		margin-top: 20rpx;
+    }
+}
+
+/* 热门搜索 */
+.hot-search {
+	padding: 40rpx;
+	background: #fff;
+}
+
+.hot-tabs {
+	display: flex;
+	margin-bottom: 20rpx;
+    .tabs-scroll-content {
+        display: flex;
+        align-items: center;
+        gap: 40rpx;
+    }
+}
+
+.hot-tab-item {
+	flex: 1;
+    position: relative;
+	text-align: center;
+	font-size: 28rpx;
+	color: #666;
+	padding-bottom: 16rpx;
+}
+
+.hot-tab-item::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 4px;
+    background-color: #333;
+    transition: width 0.6s ease;
+    border-radius: 8rpx;
+}
+
+.hot-tab-item.active::after {
+    width: 64rpx;
+}
+
+.hot-tab-item.active {
+    color: #333;
+}
+
+.hot-item {
+	padding: 16rpx 0 16rpx 20rpx;
+	box-sizing: border-box;
+	background: linear-gradient( 90deg, #F4F4F4 0%, #FFFFFF 100%);
+	border-radius: 8px;
+}
+
+.hot-hotness {
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #999999;
+	line-height: 34rpx;
+}
+
+.hot-item-top {
+	background: linear-gradient( 90deg, #FFF5E9 0%, #FFFFFF 100%);
+	border-radius: 8px;
+}
+
+.hot-num {
+	width: 40rpx;
+	height: 40rpx;
+	font-weight: 500;
+	font-size: 28rpx;
+	color: #999999;
+	line-height: 40rpx;
+}
+
+
+/* 修改六边形样式 */
+.hexagon-top {
+    position: relative;
+    width: 40rpx;
+    height: 20rpx !important;
+    border-radius: 2rpx;
+}
+
+.hexagon-top::before,
+.hexagon-top::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-left: 20rpx solid transparent;
+    border-right: 20rpx solid transparent;
+}
+
+.hexagon-top::before {
+    bottom: 100%;
+    border-bottom: 10rpx solid #E93633;
+}
+
+.hexagon-top::after {
+    top: 100%;
+    border-top: 10rpx solid #E93633;
+}
+
+.hexagon-top span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+	font-weight: 500;
+	font-size: 20rpx;
+	line-height: 28rpx;
+}
+
+.hexagon-top-1 {
+    background: #E93633;
+}
+
+.hexagon-top-2 {
+    background: #F5C242;
+}
+
+.hexagon-top-2::before {
+    border-bottom: 10rpx solid #F5C242;
+}
+
+.hexagon-top-2::after {
+    border-top: 10rpx solid #F5C242;
+}
+
+.hexagon-top-3 {
+    background: #F19F58;
+}
+
+.hexagon-top-3::before {
+    border-bottom: 10rpx solid #F19F58;
+}
+
+.hexagon-top-3::after {
+    border-top: 10rpx solid #F19F58;
+}
\ No newline at end of file
diff --git a/pages/plugins/video/search/search-record.vue b/pages/plugins/video/search-record/search-record.vue
similarity index 70%
rename from pages/plugins/video/search/search-record.vue
rename to pages/plugins/video/search-record/search-record.vue
index ef290d48..4771e077 100644
--- a/pages/plugins/video/search/search-record.vue
+++ b/pages/plugins/video/search-record/search-record.vue
@@ -244,237 +244,6 @@ export default {
 	}
 };
 </script>
-
 <style lang="scss" scoped>
-.search-record-container {
-    background: #fff;
-	height: 100vh;
-}
-
-.header-top {
-	position: sticky;
-	top: 0;
-	background: #fff;
-	z-index: 9;
-    padding-left: 24rpx;
-	box-sizing: border-box;
-}
-
-/* #ifdef MP-WEIXIN | APP-PLUS */
-.tabs-scroll {
-	::v-deep ::-webkit-scrollbar
-	{
-		width: 0rpx!important;
-		height: 0rpx!important;
-		background-color: transparent;
-	}
-}
-/* #endif */
-/* 推荐视频列表 */
-.recommend-videos {
-	padding: 0 16rpx 20rpx 16rpx;
-	.video-grid {
-		column-count: 2;
-		column-gap: 10px;
-	}
-
-	.video-card {
-		background-color: #fff;
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-		border-radius: 4px;
-		overflow: hidden;
-		break-inside: avoid;
-		margin-bottom: 10px;
-		width: 100%;
-	}
-
-	.video-thumbnail {
-		width: 100%;
-		object-fit: contain;
-	}
-
-	.video-info {
-		padding: 20rpx;
-		padding-top: 10rpx;
-		gap: 20rpx;
-	}
-
-	.video-title {
-		font-weight: 500;
-		font-size: 28rpx;
-		color: #333333;
-		line-height: 40rpx;
-	}
-
-	.video-date,
-	.video-likes {
-		font-weight: 400;
-		font-size: 24rpx;
-		color: #999999;
-		line-height: 34rpx;
-	}
-}
-
-.search-history {
-	padding: 20rpx 40rpx 24rpx 40rpx;
-    gap: 40rpx;
-    border-bottom: 2rpx solid #EDEDED;
-    .search-history-title {
-        font-weight: 500;
-        font-size: 28rpx;
-        color: #666666;
-        line-height: 40rpx;
-        gap: 20rpx;
-    }
-    .more-history-btn {
-        font-weight: 400;
-        font-size: 28rpx;
-        color: #999999;
-        line-height: 40rpx;
-		margin-top: 20rpx;
-    }
-}
-
-/* 热门搜索 */
-.hot-search {
-	padding: 40rpx;
-	background: #fff;
-}
-
-.hot-tabs {
-	display: flex;
-	margin-bottom: 20rpx;
-    .tabs-scroll-content {
-        display: flex;
-        align-items: center;
-        gap: 40rpx;
-    }
-}
-
-.hot-tab-item {
-	flex: 1;
-    position: relative;
-	text-align: center;
-	font-size: 28rpx;
-	color: #666;
-	padding: 10rpx 0;
-}
-
-.hot-tab-item::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 4px;
-    background-color: #333;
-    transition: width 0.6s ease;
-}
-
-.hot-tab-item.active::after {
-    width: 100%;
-}
-
-.hot-tab-item.active {
-    color: #333;
-}
-
-.hot-item {
-	// height: 72rpx;
-	padding: 16rpx 0 16rpx 20rpx;
-	box-sizing: border-box;
-	background: linear-gradient( 90deg, #F4F4F4 0%, #FFFFFF 100%);
-	border-radius: 8px;
-}
-
-.hot-hotness {
-	font-weight: 400;
-	font-size: 24rpx;
-	color: #999999;
-	line-height: 34rpx;
-}
-
-.hot-item-top {
-	background: linear-gradient( 90deg, #FFF5E9 0%, #FFFFFF 100%);
-	border-radius: 8px;
-}
-
-.hot-num {
-	width: 40rpx;
-	height: 40rpx;
-	font-weight: 500;
-	font-size: 28rpx;
-	color: #999999;
-	line-height: 40rpx;
-}
-
-
-/* 修改六边形样式 */
-.hexagon-top {
-    position: relative;
-    width: 40rpx;
-    height: 20rpx !important;
-    border-radius: 2rpx;
-}
-
-.hexagon-top::before,
-.hexagon-top::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    width: 0;
-    height: 0;
-    border-left: 20rpx solid transparent;
-    border-right: 20rpx solid transparent;
-}
-
-.hexagon-top::before {
-    bottom: 100%;
-    border-bottom: 10rpx solid #E93633;
-}
-
-.hexagon-top::after {
-    top: 100%;
-    border-top: 10rpx solid #E93633;
-}
-
-.hexagon-top span {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-	font-weight: 500;
-	font-size: 20rpx;
-	line-height: 28rpx;
-}
-
-.hexagon-top-1 {
-    background: #E93633;
-}
-
-.hexagon-top-2 {
-    background: #F5C242;
-}
-
-.hexagon-top-2::before {
-    border-bottom: 10rpx solid #F5C242;
-}
-
-.hexagon-top-2::after {
-    border-top: 10rpx solid #F5C242;
-}
-
-.hexagon-top-3 {
-    background: #F19F58;
-}
-
-.hexagon-top-3::before {
-    border-bottom: 10rpx solid #F19F58;
-}
-
-.hexagon-top-3::after {
-    border-top: 10rpx solid #F19F58;
-}
+    @import './search-record.css';
 </style>
\ No newline at end of file
diff --git a/pages/plugins/video/search/search.css b/pages/plugins/video/search/search.css
new file mode 100644
index 00000000..34a64e68
--- /dev/null
+++ b/pages/plugins/video/search/search.css
@@ -0,0 +1,181 @@
+.header-top {
+	position: sticky;
+	top: 0;
+	background: #fff;
+	z-index: 9;
+}
+.header-search {
+	padding-left: 24rpx;
+	box-sizing: border-box;
+}
+/* 导航栏 */
+.nav-tabs {
+	position: relative;
+	width: 100%;
+	padding: 0 16rpx 20rpx 16rpx;
+	box-sizing: border-box;
+	.tabs-scroll-content {
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+		overflow-x: auto;
+		gap: 48rpx;
+	}
+	.nav-tabs-filter {
+		padding-top: 8rpx;
+		box-sizing: border-box;
+	}
+	.tab-item {
+		position: relative;
+		white-space: nowrap;
+		padding-bottom: 16rpx;
+		box-sizing: border-box;
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 40rpx;
+	}
+
+	.tab-item.active {
+		color: #333333;
+	}
+	
+	.tab-item::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 4px;
+		background-color: #333;
+		transition: width 0.6s ease;
+        border-radius: 8rpx;
+	}
+
+	.tab-item.active::after {
+		width: 64rpx;
+	}
+
+	.tab-item.active {
+		color: #333;
+	}
+}
+
+@media (max-width: 500px) { 
+	.nav-tabs {
+		align-items: center;
+		.nav-tabs-filter {
+			padding-top: 0;
+		}
+	}
+}
+
+/* #ifdef MP-WEIXIN | APP-PLUS */
+.tabs-scroll {
+	::v-deep ::-webkit-scrollbar
+	{
+		width: 0rpx!important;
+		height: 0rpx!important;
+		background-color: transparent;
+	}
+}
+/* #endif */
+/* 推荐视频列表 */
+.recommend-videos {
+	padding: 20rpx 0;
+	.video-grid {
+		padding: 0 16rpx;
+		column-count: 2;
+		column-gap: 10px;
+	}
+
+	.video-card {
+		background-color: #fff;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+		overflow: hidden;
+		break-inside: avoid;
+		margin-bottom: 10px;
+		width: 100%;
+	}
+
+	.video-thumbnail {
+		width: 100%;
+		object-fit: contain;
+	}
+
+	.video-info {
+		padding: 20rpx;
+		padding-top: 10rpx;
+		gap: 20rpx;
+	}
+
+	.video-title {
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #333333;
+		line-height: 40rpx;
+	}
+
+	.video-date,
+	.video-likes {
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+		line-height: 34rpx;
+	}
+}
+
+/* 筛选条件弹窗样式 */
+.filter-group {
+	margin-bottom: 40rpx;
+}
+
+.filter-title {
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #666666;
+	line-height: 34rpx;
+	margin-bottom: 24rpx;
+}
+
+.filter-options {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 20rpx;
+}
+
+.filter-option {
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #666666;
+	line-height: 34rpx;
+	padding: 10rpx 32rpx;
+	background-color: #e8e8e8;
+	border-radius: 4rpx;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+
+.filter-option:hover {
+	background-color: #e0e0e0;
+}
+.filter-option.active {
+	background-color: #333;
+    color: #fff;
+}
+.nav-list-more {
+	padding: 20rpx 40rpx;
+}
+::v-deep .popup {
+	.popup-mask { 
+		z-index: 8 !important;
+	}
+	.popup-content {
+		z-index: 8 !important;
+	}
+}
+.recommend-scroll {
+	height: calc(100vh - 223rpx);
+}
\ No newline at end of file
diff --git a/pages/plugins/video/search/search.vue b/pages/plugins/video/search/search.vue
index fb3e1e0b..5933c4be 100644
--- a/pages/plugins/video/search/search.vue
+++ b/pages/plugins/video/search/search.vue
@@ -1,6 +1,5 @@
 <template>
 	<view class="wh-auto ht-auto pr video-container">
-		
 		<view class="wh-auto ht-auto pr">
 			<template v-if="tabs.length > 0">
 				<!-- 搜索框 -->
@@ -398,185 +397,6 @@ export default {
 	}
 };
 </script>
-
 <style lang="scss" scoped>
-.header-top {
-	position: sticky;
-	top: 0;
-	background: #fff;
-	z-index: 9;
-}
-.header-search {
-	padding-left: 24rpx;
-	box-sizing: border-box;
-}
-/* 导航栏 */
-.nav-tabs {
-	position: relative;
-	width: 100%;
-	padding: 0 16rpx 20rpx 16rpx;
-	box-sizing: border-box;
-	.tabs-scroll-content {
-		display: flex;
-		align-items: center;
-		overflow: hidden;
-		overflow-x: auto;
-		gap: 48rpx;
-	}
-	.nav-tabs-filter {
-		padding-top: 8rpx;
-		box-sizing: border-box;
-	}
-	.tab-item {
-		position: relative;
-		white-space: nowrap;
-		padding-bottom: 8rpx;
-		box-sizing: border-box;
-		font-weight: 500;
-		font-size: 28rpx;
-		color: #666666;
-		line-height: 40rpx;
-	}
-
-	.tab-item.active {
-		color: #333333;
-	}
-	
-	.tab-item::after {
-		content: '';
-		position: absolute;
-		bottom: 0;
-		left: 50%;
-		transform: translateX(-50%);
-		width: 0;
-		height: 4px;
-		background-color: #333;
-		transition: width 0.6s ease;
-	}
-
-	.tab-item.active::after {
-		width: 100%;
-	}
-
-	.tab-item.active {
-		color: #333;
-	}
-}
-
-@media (max-width: 500px) { 
-	.nav-tabs {
-		align-items: center;
-		.nav-tabs-filter {
-			padding-top: 0;
-		}
-	}
-}
-
-/* #ifdef MP-WEIXIN | APP-PLUS */
-.tabs-scroll {
-	::v-deep ::-webkit-scrollbar
-	{
-		width: 0rpx!important;
-		height: 0rpx!important;
-		background-color: transparent;
-	}
-}
-/* #endif */
-/* 推荐视频列表 */
-.recommend-videos {
-	padding: 20rpx 0;
-	.video-grid {
-		padding: 0 16rpx;
-		column-count: 2;
-		column-gap: 10px;
-	}
-
-	.video-card {
-		background-color: #fff;
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-		border-radius: 4px;
-		overflow: hidden;
-		break-inside: avoid;
-		margin-bottom: 10px;
-		width: 100%;
-	}
-
-	.video-thumbnail {
-		width: 100%;
-		object-fit: contain;
-	}
-
-	.video-info {
-		padding: 20rpx;
-		padding-top: 10rpx;
-		gap: 20rpx;
-	}
-
-	.video-title {
-		font-weight: 500;
-		font-size: 28rpx;
-		color: #333333;
-		line-height: 40rpx;
-	}
-
-	.video-date,
-	.video-likes {
-		font-weight: 400;
-		font-size: 24rpx;
-		color: #999999;
-		line-height: 34rpx;
-	}
-}
-
-/* 筛选条件弹窗样式 */
-.filter-group {
-	margin-bottom: 40rpx;
-}
-
-.filter-title {
-	font-weight: 400;
-	font-size: 24rpx;
-	color: #666666;
-	line-height: 34rpx;
-	margin-bottom: 24rpx;
-}
-
-.filter-options {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 20rpx;
-}
-
-.filter-option {
-	font-weight: 400;
-	font-size: 24rpx;
-	color: #666666;
-	line-height: 34rpx;
-	padding: 10rpx 32rpx;
-	background-color: #e8e8e8;
-	border-radius: 4rpx;
-	cursor: pointer;
-	transition: background-color 0.3s ease;
-}
-
-.filter-option:hover {
-	background-color: #e0e0e0;
-}
-.filter-option.active {
-	color: #333;
-}
-.nav-list-more {
-	padding: 20rpx 40rpx;
-}
-::v-deep .popup {
-	.popup-mask { 
-		z-index: 8 !important;
-	}
-	.popup-content {
-		z-index: 8 !important;
-	}
-}
-.recommend-scroll {
-	height: calc(100vh - 223rpx);
-}
+    @import './search.css';
 </style>
\ No newline at end of file