短视频样式细节优化
gongfuxiang
parent
e005fa762b
commit
2500fbb05a
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue