diff --git a/pages/plugins/video/detail/detail.css b/pages/plugins/video/detail/detail.css
index 3e02f7df..257bcab6 100644
--- a/pages/plugins/video/detail/detail.css
+++ b/pages/plugins/video/detail/detail.css
@@ -21,22 +21,24 @@
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%);
- }
+}
+
+.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 {
@@ -81,44 +83,46 @@
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;
- }
+}
+
+.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 {
@@ -202,6 +206,7 @@
.comment-content {
width: 100%;
height: 70%;
+ transition: all 0.35s linear;
background-color: #fff;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
@@ -232,12 +237,13 @@
.comment-list {
flex: 1;
overflow: hidden;
- .comment-scroll {
- width: 100%;
- height: 100%;
- padding: 30rpx;
- box-sizing: border-box;
- }
+}
+
+.comment-list .comment-scroll {
+ width: 100%;
+ height: 100%;
+ padding: 30rpx;
+ box-sizing: border-box;
}
.comment-item {
@@ -269,9 +275,9 @@
flex: 1;
border: 2rpx solid #eee;
border-radius: 16rpx;
- // padding-right: 16rpx;
font-size: 28rpx;
}
+
.pr-16 {
padding-right: 16rpx;
}
@@ -335,7 +341,7 @@
font-size: 30rpx;
vertical-align: middle;
}
-// 搜索
+/* 搜索 */
.header-top {
padding-left: 12px;
box-sizing: border-box;
@@ -345,13 +351,12 @@
z-index: 9;
width: 100%;
}
-.header-top {
- ::v-deep .search-bar {
- background:#D8D8D8;
- opacity: 0.27;
- border-color: transparent;
- }
+.header-top ::v-deep .search-bar {
+ background:#D8D8D8;
+ opacity: 0.27;
+ border-color: transparent;
}
+
.keyboard-input {
position: fixed;
left: 0;
diff --git a/pages/plugins/video/detail/detail.vue b/pages/plugins/video/detail/detail.vue
index 6e13dd7f..90f99907 100644
--- a/pages/plugins/video/detail/detail.vue
+++ b/pages/plugins/video/detail/detail.vue
@@ -324,12 +324,15 @@
};
},
computed: {
+ // 视频列表高度
swiperStyle() {
return this.show_comment_modal ? (this.move_distance > 0 ? `height: calc(30% + ${this.move_distance}px);` : 'height: 30%;') : 'height: 100%;';
},
+ // 评论内容区域高度
commentContentStyle() {
return this.show_comment_modal && this.move_distance > 0 ? `transform: translateY(3px); height: calc(70% + 20rpx - ${this.move_distance}px);` : `transform: translateY(0); height: calc(70% + 20rpx);`;
},
+ // 当前播放视频的索引
current_video_index() {
return this.video_data_list.findIndex(item => item.id == this.current_video_id);
},
@@ -431,7 +434,10 @@
this.get_video_detail(this.current_video_id);
},
- // 获取视频详情
+ /*
+ * 获取视频详情
+ * @param {*} id 视频id
+ */
get_video_detail(id) {
// 获取数据
uni.request({
@@ -468,7 +474,12 @@
}
});
},
- // 获取视频列表
+ /*
+ * 获取视频列表
+ * @param {*} id 视频id
+ * @param {*} is_last 是否获取上一批数据
+ * @param {*} is_next 是否获取下一批数据
+ */
get_last_or_next_data_list(id, is_last = 0, is_next = 0) {
// 获取数据
uni.request({
@@ -532,13 +543,14 @@
}
}
});
+ // 更新所有视频信息
this.setData({
video_data_list: this.video_data_list,
current_index: is_last == 1 && is_next == 1 ? (new_index == this.video_data_list.length - 1 ? 2 : (new_index == this.video_data_list.length - 2 ? 1 : 0)) : this.current_index,
});
if (is_last == 1 && is_next == 1) {
- // 更新数据信息
+ // 更新显示数据数据信息
this.update_display_data();
setTimeout(() => {
@@ -723,7 +735,7 @@
this.video_play_event(videoContext);
}
},
-
+
// 更新分享信息
update_share_info(data) {
const info = {
@@ -737,11 +749,11 @@
share_info: info,
});
// 分享菜单处理
- app.globalData.page_share_handle(info);
-
- // 更新页面标题
+ app.globalData.page_share_handle(info);
+
+ // 更新页面标题
uni.setNavigationBarTitle({title: data.title});
- },
+ },
// 安全的视频播放事件处理
video_play_event(videoContext, is_first_play = false) {
@@ -788,7 +800,9 @@
return this.video_data_list[index];
},
- // 更新显示数据
+ /*
+ * 更新显示的视频数据
+ */
update_display_data() {
let list = [];
// 如果当前索引为0,只显示当前元素和下一个元素
@@ -815,12 +829,12 @@
this.setData({
display_video_list: list
})
- },
+ },
// 评论输入框事件
comment_input_event(e) {
this.comment_input_value = e.detail.value;
- },
+ },
// 图片上传回调
upload_images_event(res) {
@@ -832,7 +846,7 @@
size: res.size,
});
}
- },
+ },
// 上传图片预览
upload_show_event(e) {
@@ -840,7 +854,7 @@
current: this.form_images_list[e.currentTarget.dataset.index].url,
urls: this.form_images_list.map(item => item.url),
});
- },
+ },
// 评论输入图片删除
comment_input_img_close(e) {
@@ -850,8 +864,8 @@
this.setData({
form_images_list: list,
});
- },
-
+ },
+
// swiper-item 的位置发生改变时
on_transition(e) {
const dy = e.detail.dy;
@@ -867,12 +881,12 @@
direction: status,
})
}
- },
-
+ },
+
// 播放
handle_play() {
this.setData({ paused: false, is_manual_pause: false });
- },
+ },
// 收藏
handle_like(e) {
@@ -997,7 +1011,7 @@
}
}
},
-
+
// 评论
send_comment() {
let comment_text = this.comment_input_value;
@@ -1074,7 +1088,7 @@
}
}
});
- },
+ },
// 展开子评论
open_sub_comment(id, is_level) {
@@ -1115,7 +1129,7 @@
}
});
}
- },
+ },
// 收起子评论
close_sub_comment(id) {
@@ -1123,8 +1137,8 @@
if (comment) {
comment.show_sub_comment = false;
}
- },
-
+ },
+
// 分享事件
handle_share() {
if ((this.$refs.share || null) != null) {
@@ -1133,7 +1147,7 @@
share_info: this.share_info,
});
}
- },
+ },
// 更新视频数据信息
get_video_data_detail(id) {
@@ -1160,7 +1174,7 @@
}
}
});
- },
+ },
// 更新点赞数量
set_givethumbs_num(id, comments_id) {
@@ -1228,8 +1242,22 @@
}
}
});
- },
-
+ },
+ // 主评论回复
+ comment_reply(comments) {
+ this.active_dropdown_id = null;
+ if (!isEmpty(comments)) {
+ this.setData({
+ comments_data: comments,
+ });
+ }
+ },
+ // 删除评论数据
+ comment_data_delete() {
+ this.setData({
+ comments_data: {},
+ });
+ },
// 播放进度变化时触发
handle_time_update(e) {
if (this.is_seeking) return;
@@ -1249,29 +1277,16 @@
current_video_progress: e.detail.currentTime,
});
},
-
+ // 视频进度条拖动时触发事件
handle_slider_changing() {
this.is_seeking = true;
},
- // 主评论回复
- comment_reply(comments) {
- this.active_dropdown_id = null;
- if (!isEmpty(comments)) {
- this.setData({
- comments_data: comments,
- });
- }
- },
- comment_data_delete() {
- this.setData({
- comments_data: {},
- });
- },
// 评论点赞
comment_like(id) {
this.active_dropdown_id = null;
this.set_givethumbs_num(this.current_video_id, id);
},
+ // 视频进度条拖动完成触发事件
handle_slider_change(e) {
const seek_time = e.detail.value;
if (this.create_video_contexts[this.current_index]) {
@@ -1284,7 +1299,7 @@
this.is_seeking = false;
}, 100);
},
-
+ // 视频进度条时间显示
format_time(seconds) {
if (isNaN(seconds) || seconds < 0) {
return '00:00';
@@ -1293,9 +1308,11 @@
const sec = Math.floor(seconds % 60);
return `${min < 10 ? '0' : ''}${min}:${sec < 10 ? '0' : ''}${sec}`;
},
+ // 返回上一页
handle_back() {
app.globalData.page_back_prev_event();
},
+ // 跳转搜索记录页面
handle_search() {
// 跳转到搜索记录页面
app.globalData.url_open(`/pages/plugins/video/search-record/search-record`, false);
@@ -1312,6 +1329,7 @@
video_data_list: this.video_data_list
})
},
+ // 点击商品卡片触发事件
handle_product_card_item(e) {
const id = e?.currentTarget?.dataset?.id || '';
const data = this.video_data_list.find(item => item.id == id);
@@ -1319,6 +1337,7 @@
app.globalData.url_open(data.goods.goods_url);
}
},
+ // 点击购买商品按钮触发事件
handle_product_button(e) {
const id = e.currentTarget.dataset.id;
this.video_data_list.forEach((item, index) => {
@@ -1407,6 +1426,7 @@
}
});
},
+ // 删除评论数据处理
delete_comment_handle(comment_id) {
// 删除成功,从active_comments中移除对应数据
if (this.active_comments && Array.isArray(this.active_comments)) {
@@ -1489,23 +1509,6 @@
current_sub_index: 0,
});
},
- // 新的举报弹窗相关方法
- onMain_reasonChange(e) {
- const value = parseInt(e.detail.value);
- this.setData({
- current_main_index: value,
- current_sub_index: -1,
- });
- },
-
- onSub_reasonChange(e) {
- const value = parseInt(e.detail.value);
- if (this.current_main_index >= 0) {
- this.setData({
- current_sub_index: value,
- });
- }
- },
// 直接选择主原因(用于一行显示的点击)
select_main_reason(e) {
@@ -1529,6 +1532,9 @@
});
}
},
+ /*
+ * 提交举报
+ */
submit_report() {
// 获取选中的举报原因和具体类型
const main_reason = this.report_type_list[this.current_main_index];
@@ -1560,6 +1566,7 @@
}
});
},
+ // 键盘显示时,切换输入框
add_comment() {
//#ifndef H5
this.is_add_comment = true;
@@ -1593,6 +1600,6 @@
}
};
-
diff --git a/pages/plugins/video/index/index.css b/pages/plugins/video/index/index.css
index dd0f223f..e837d2dc 100644
--- a/pages/plugins/video/index/index.css
+++ b/pages/plugins/video/index/index.css
@@ -7,111 +7,111 @@
/* 导航栏 */
.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;
- }
+ background: transparent; /* 默认透明背景 */
+ transition: background-color 0.3s ease; /* 添加背景色过渡动画 */
+}
- .tab-item.active {
- color: #333333;
- }
+.nav-tabs.nav-tabs-sticky {
+ background: #fff; /* 粘性状态时背景变白 */
+}
- .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;
- }
+.nav-tabs .tabs-scroll-content {
+ display: flex;
+ align-items: center;
+ gap: 48rpx;
+}
+.nav-tabs .tab-item {
+ position: relative;
+ white-space: nowrap;
+ padding-bottom: 16rpx;
+ font-weight: 500;
+ font-size: 28rpx;
+ color: #666666;
+ line-height: 40rpx;
+}
- .tab-item.active::after {
- width: 52rpx;
- }
+.nav-tabs .tab-item.active {
+ color: #333333;
+}
+
+.nav-tabs .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 {
- color: #333;
- }
+.nav-tabs .tab-item.active::after {
+ width: 52rpx;
+}
+
+.nav-tabs .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;
- }
+.tabs-scroll ::v-deep ::-webkit-scrollbar {
+ width: 0rpx!important;
+ height: 0rpx!important;
+ background-color: transparent;
}
+
/* #endif */
/* 推荐视频列表 */
.recommend-videos {
padding: 10rpx 24rpx 24rpx 24rpx;
- .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;
- }
}
+
+.recommend-videos .video-grid {
+ column-count: 2;
+ column-gap: 20rpx;
+}
+
+.recommend-videos .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%;
+}
+
+.recommend-videos .video-thumbnail {
+ width: 100%;
+ object-fit: contain;
+}
+
+.recommend-videos .video-info {
+ padding: 20rpx;
+ padding-top: 10rpx;
+ gap: 20rpx;
+}
+
+.recommend-videos .video-title {
+ font-weight: 500;
+ font-size: 28rpx;
+ color: #333333;
+ line-height: 40rpx;
+}
+
+.recommend-videos .video-date,
+.recommend-videos .video-likes {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #999999;
+ line-height: 34rpx;
+}
+
.tabs-scroll-image {
width: 40rpx;
height: 40rpx;
diff --git a/pages/plugins/video/index/index.vue b/pages/plugins/video/index/index.vue
index affe03ca..65bacf06 100644
--- a/pages/plugins/video/index/index.vue
+++ b/pages/plugins/video/index/index.vue
@@ -23,7 +23,7 @@
-
+
@@ -110,7 +110,13 @@ export default {
header_padding_left: '',
slider_list: [],
is_nav_sticky: false, // 控制nav-tabs是否处于粘性状态
- nav_sticky_threshold: 50 // 粘性阈值,与CSS中的top值对应
+ // #ifdef H5 || MP-TOUTIAO
+ nav_sticky_threshold: 55, // 粘性阈值,与CSS中的top值对应
+ // #endif
+ // #ifdef MP || APP
+ nav_sticky_threshold: bar_height + 53, // 粘性阈值,与CSS中的top值对应
+ // #endif
+ nav_sticky_style: '',
};
},
onShow() {
@@ -242,9 +248,12 @@ export default {
// 滚动事件处理
on_scroll_event(e) {
const scrollTop = e.detail.scrollTop;
+ console.log(this.nav_sticky_threshold);
+
// 当滚动距离大于等于阈值时,设置nav-tabs为粘性状态(背景变白)
this.setData({
- is_nav_sticky: scrollTop >= this.nav_sticky_threshold
+ is_nav_sticky: scrollTop >= this.nav_sticky_threshold,
+ nav_sticky_style: 'top:' + this.nav_sticky_threshold * 2 + 'rpx;',
});
}
}
diff --git a/pages/plugins/video/search-record/search-record.css b/pages/plugins/video/search-record/search-record.css
index 53c59d7a..247b4d5c 100644
--- a/pages/plugins/video/search-record/search-record.css
+++ b/pages/plugins/video/search-record/search-record.css
@@ -13,78 +13,32 @@
}
/* #ifdef MP-WEIXIN | APP-PLUS */
-.tabs-scroll {
- ::v-deep ::-webkit-scrollbar
- {
+.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;
- }
+}
+
+.search-history .search-history-title {
+ font-weight: 500;
+ font-size: 28rpx;
+ color: #666666;
+ line-height: 40rpx;
+ gap: 20rpx;
+}
+.search-history .more-history-btn {
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #999999;
+ line-height: 40rpx;
+ margin-top: 20rpx;
}
/* 热门搜索 */
@@ -96,11 +50,12 @@
.hot-tabs {
display: flex;
margin-bottom: 20rpx;
- .tabs-scroll-content {
- display: flex;
- align-items: center;
- gap: 40rpx;
- }
+}
+
+.hot-tabs .tabs-scroll-content {
+ display: flex;
+ align-items: center;
+ gap: 40rpx;
}
.hot-tab-item {
diff --git a/pages/plugins/video/search/search.css b/pages/plugins/video/search/search.css
index 745f4e5a..fefa1beb 100644
--- a/pages/plugins/video/search/search.css
+++ b/pages/plugins/video/search/search.css
@@ -14,117 +14,120 @@
width: 100%;
padding: 0 24rpx 20rpx 24rpx;
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;
- }
+.nav-tabs .tabs-scroll-content {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ overflow-x: auto;
+ gap: 48rpx;
+}
+.nav-tabs .nav-tabs-filter {
+ padding-top: 8rpx;
+ box-sizing: border-box;
+}
+.nav-tabs .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;
+}
+
+.nav-tabs .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;
- }
+.nav-tabs .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: 52rpx;
- }
+.nav-tabs .tab-item.active::after {
+ width: 52rpx;
+}
- .tab-item.active {
- color: #333;
- }
+.nav-tabs .tab-item.active {
+ color: #333;
}
@media (max-width: 500px) {
.nav-tabs {
align-items: center;
- .nav-tabs-filter {
- padding-top: 0;
- }
+ }
+ .nav-tabs .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;
- }
+.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 24rpx;
- 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%;
- }
+.recommend-videos .video-grid {
+ padding: 0 24rpx;
+ column-count: 2;
+ column-gap: 10px;
+ /* 添加这些样式确保滚动事件能正常触发 */
+ min-height: 100%;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+}
- .video-thumbnail {
- width: 100%;
- object-fit: contain;
- }
+.recommend-videos .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-info {
- padding: 20rpx;
- padding-top: 10rpx;
- gap: 20rpx;
- }
+.recommend-videos .video-thumbnail {
+ width: 100%;
+ object-fit: contain;
+}
- .video-title {
- font-weight: 500;
- font-size: 28rpx;
- color: #333333;
- line-height: 40rpx;
- }
+.recommend-videos .video-info {
+ padding: 20rpx;
+ padding-top: 10rpx;
+ gap: 20rpx;
+}
- .video-date,
- .video-likes {
- font-weight: 400;
- font-size: 24rpx;
- color: #999999;
- line-height: 34rpx;
- }
+.recommend-videos .video-title {
+ font-weight: 500;
+ font-size: 28rpx;
+ color: #333333;
+ line-height: 40rpx;
+}
+
+.recommend-videos .video-date,
+.recommend-videos .video-likes {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #999999;
+ line-height: 34rpx;
}
/* 筛选条件弹窗样式 */
@@ -168,14 +171,14 @@
.nav-list-more {
padding: 20rpx 40rpx;
}
-::v-deep .popup {
- .popup-mask {
- z-index: 8 !important;
- }
- .popup-content {
- z-index: 8 !important;
- }
+::v-deep .popup .popup-content {
+ z-index: 8 !important;
+}
+::v-deep .popup .popup-mask {
+ z-index: 8 !important;
}
.recommend-scroll {
- height: calc(100vh - 223rpx);
+ /* 使用更精确的高度计算 */
+ height: calc(100vh - 240rpx); /* 增加一些高度确保滚动空间 */
+ min-height: 500px; /* 设置最小高度 */
}
\ No newline at end of file
diff --git a/pages/plugins/video/search/search.vue b/pages/plugins/video/search/search.vue
index 5933c4be..23196e98 100644
--- a/pages/plugins/video/search/search.vue
+++ b/pages/plugins/video/search/search.vue
@@ -1,7 +1,7 @@
-
+