Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(视频号组件): 更新视频号样式

Browse Source
This commit is contained in:
ZF Sun
2026-01-10 16:12:36 +08:00
parent 6f6899deaa
commit f87c7d963e
4 changed files with 190 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
components-diy/diy-channel-list.vue
View File

@@ -1,10 +1,15 @@
<template>
<view :style="componentStyle">
<view :style="[componentStyle, { '--row-count': value.rowCount }]">
<!-- 固定布局模式 -->
<view v-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]"
style="padding:20rpx;">
<view v-for="(item, index) in value.list" :key="index" class="channel-item">
<diy-channel-video :value="item" @video-play="playVideo(item)" />
<diy-channel-video
:value="item"
@video-play="playVideo(item)"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
/>
</view>
</view>
@@ -12,9 +17,13 @@
<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'">
<view class="uni-scroll-view-content">
<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]"
:style="{ width: (100 / value.rowCount + '%') + ';' }">
<diy-channel-video :value="item" @video-play="playVideo(item)" />
<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
<diy-channel-video
:value="item"
@video-play="playVideo(item)"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
/>
</view>
</view>
</scroll-view>
@@ -24,9 +33,7 @@
<script>
import DiyMinx from './minx.js'
// #ifdef MP-WEIXIN
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
// #endif
export default {
name: 'diy-channel-list',
props: {
@@ -54,17 +61,19 @@ export default {
computed: {
componentStyle() {
let style = '';
style += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
if (this.value?.componentBgColor) {
style += 'background-color:' + this.value?.componentBgColor + ';';
}
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
if (this.value?.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
style += 'border-bottom-left-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
}
style += 'box-shadow:' + (this.value?.ornament?.type == 'shadow' ? '0 0 10rpx ' + this.value?.ornament?.color : '') + ';';
style += 'border:' + (this.value?.ornament?.type == 'stroke' ? '2rpx solid ' + this.value?.ornament?.color : '') + ';';
return style;
},
@@ -72,20 +81,20 @@ export default {
swiperHeight() {
let height = 0;
if (this.value.mode == 'graphic') {
height = (49 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'img') {
height = (22 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'text') {
height = 43 * this.value.pageCount;
if (this.value?.mode == 'graphic') {
height = (49 + this.value?.imageSize) * this.value?.pageCount;
} else if (this.value?.mode == 'img') {
height = (22 + this.value?.imageSize) * this.value?.pageCount;
} else if (this.value?.mode == 'text') {
height = 43 * this.value?.pageCount;
}
return 'height:' + (2 * height) + 'rpx';
},
isIndicatorDots() {
return this.value.carousel.type != 'hide' &&
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
return this.value?.carousel?.type != 'hide' &&
1 != Math.ceil(this.value?.list?.length / (this.value?.pageCount * this.value?.rowCount));
}
},
methods: {
@@ -125,89 +134,27 @@ export default {
<style lang="scss" scoped>
@import './css/common-channel.scss';
// 优化列表布局样式
.channel-list {
&.row1-of3 {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
.channel-item {
position: relative;
display: flex;
flex-direction: column;
margin-top: 20rpx;
width: calc(33.3333333% - 14rpx);
flex: 0 0 calc(33.3333333% - 10rpx);
box-sizing: border-box;
&:nth-child(3n + 3) {
width: calc(33.33% - 15rpx);
}
&:nth-of-type(1),
&:nth-of-type(2),
&:nth-of-type(3) {
margin-top: 0;
}
&:nth-child(3n) {
width: calc(33.3333333% - 15rpx);
}
&:nth-child(3n-1) {
margin-left: 20rpx;
margin-right: 20rpx;
}
.channel-img-wrap {
position: relative;
overflow: hidden;
height: 220rpx;
border-radius: 10rpx;
}
.channel-img {
width: 100%;
height: 100%;
}
.channel-play-btn {
@extend .channel-play-btn.small;
}
}
}
&.row1-of2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16rpx;
.channel-item {
position: relative;
margin-top: 20rpx;
width: calc(50% - 10rpx);
display: flex;
flex-direction: column;
flex: 0 0 calc(50% - 8rpx);
box-sizing: border-box;
&:nth-child(2n) {
margin-right: 0 !important;
}
&:nth-of-type(1),
&:nth-of-type(2) {
margin-top: 0;
}
.channel-img-wrap {
position: relative;
overflow: hidden;
height: 340rpx;
border-radius: 10rpx;
}
.channel-img {
width: 100%;
height: 100%;
}
}
}
}
@@ -220,13 +167,14 @@ export default {
.uni-scroll-view-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16rpx;
}
}
&.singleSlide {
.uni-scroll-view-content {
display: flex;
gap: 16rpx;
}
.channel-nav-item {
@@ -237,38 +185,36 @@ export default {
.channel-nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 14rpx 0;
box-sizing: border-box;
width: calc(100% / var(--row-count, 3) - 12rpx);
}
}
.channel-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 200rpx;
border-radius: 10rpx;
overflow: hidden;
// 响应式调整
@media (max-width: 375px) {
.channel-list {
&.row1-of3 {
gap: 12rpx;
image {
width: 100%;
height: 100%;
}
.channel-play-btn {
@extend .channel-play-btn.small;
.channel-item {
flex: 0 0 calc(33.3333333% - 8rpx);
}
}
.channel-text {
padding-top: 12rpx;
line-height: 1.5;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
&.row1-of2 {
gap: 12rpx;
.channel-item {
flex: 0 0 calc(50% - 6rpx);
}
}
}
.channel-nav {
padding: 12rpx;
.channel-nav-item {
width: calc(100% / var(--row-count, 3) - 8rpx);
}
}
}