diff --git a/components-diy/diy-channel-list.vue b/components-diy/diy-channel-list.vue index da14a88..dc65bf7 100644 --- a/components-diy/diy-channel-list.vue +++ b/components-diy/diy-channel-list.vue @@ -10,7 +10,7 @@ :style="swiperHeight" class="channel-swiper"> - + - @@ -272,6 +272,7 @@ export default { box-sizing: border-box; .channel-item { + // 默认 3 列布局 flex: 0 0 calc(33.3333333% - 10rpx); box-sizing: border-box; @@ -294,6 +295,21 @@ export default { } } } + + // 4 列布局 + &.row1-of4 { + .channel-item { + flex: 0 0 calc(25% - 12rpx); + + &:nth-child(3n) { + margin-right: 16rpx; + } + + &:nth-child(4n) { + margin-right: 0; + } + } + } } /** @@ -326,6 +342,7 @@ export default { display: flex; flex-direction: column; box-sizing: border-box; + // 默认 3 列布局 flex: 0 0 calc(33.3333333% - 10rpx); &:nth-child(3n) { @@ -347,6 +364,21 @@ export default { } } } + + // 4 列布局 + &.row1-of4 { + .channel-nav-item { + flex: 0 0 calc(25% - 12rpx); + + &:nth-child(3n) { + margin-right: 16rpx; + } + + &:nth-child(4n) { + margin-right: 0; + } + } + } } /** @@ -373,6 +405,7 @@ export default { box-sizing: border-box; .channel-item { + // 默认 3 列布局 flex: 0 0 calc(33.3333333% - 10rpx); box-sizing: border-box; @@ -395,6 +428,21 @@ export default { } } } + + // 轮播模式下的 4 列布局 + &.row1-of4 { + .channel-item { + flex: 0 0 calc(25% - 12rpx); + + &:nth-child(3n) { + margin-right: 16rpx; + } + + &:nth-child(4n) { + margin-right: 0; + } + } + } } } @@ -411,6 +459,7 @@ export default { .channel-item, .channel-nav-item { + // 默认 3 列布局 flex: 0 0 calc(33.3333333% - 8rpx); &:nth-child(3n) { @@ -433,6 +482,22 @@ export default { } } } + + // 小屏幕上的 4 列布局 + &.row1-of4 { + .channel-item, + .channel-nav-item { + flex: 0 0 calc(25% - 9rpx); + + &:nth-child(3n) { + margin-right: 12rpx; + } + + &:nth-child(4n) { + margin-right: 0; + } + } + } } // 小屏幕上的单滑动模式