diff --git a/src/app/component/view/wechat_channel/css/design.css b/src/app/component/view/wechat_channel/css/design.css index d5b47f7b4..654f3e318 100644 --- a/src/app/component/view/wechat_channel/css/design.css +++ b/src/app/component/view/wechat_channel/css/design.css @@ -156,6 +156,72 @@ font-size: 14px; } +/* 轮播样式 */ +.wechat_channel-box .video-carousel-wrap { + position: relative; + width: 100%; + overflow: hidden; +} + +.wechat_channel-box .video-carousel { + position: relative; + width: 100%; + overflow: hidden; +} + +.wechat_channel-box .carousel-item { + position: absolute; + top: 0; + left: 0; + width: 100%; + opacity: 0; + transition: opacity 0.5s ease-in-out; + z-index: 1; +} + +.wechat_channel-box .carousel-item.active { + position: relative; + opacity: 1; + z-index: 2; +} + +.wechat_channel-box .carousel-indicators { + position: relative; + margin-top: 8px; + margin-bottom: 8px; + margin-left: auto; + margin-right: auto; + width: fit-content; + display: flex; + gap: 8px; + z-index: 10; +} + +.wechat_channel-box .carousel-indicators .indicator { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.5); + cursor: pointer; + transition: background-color 0.3s ease; +} + +.wechat_channel-box .carousel-indicators .indicator.active { + background-color: #000000; + transform: scale(1.2); +} + +/* 轮播模式下的视频项样式 */ +.wechat_channel-box .video-carousel-wrap .video-item { + width: 100%; + max-width: 100%; +} + +/* 轮播模式下的通道预览样式 */ +.wechat_channel-box .video-carousel-wrap .channel-preview { + width: 100%; +} + /* 16:9比例下的固定高度 */ /* 一行显示1个 */ .wechat_channel-box[data-ratio="16:9"] { diff --git a/src/app/component/view/wechat_channel/design.html b/src/app/component/view/wechat_channel/design.html index 1c0949c20..68c8e001f 100644 --- a/src/app/component/view/wechat_channel/design.html +++ b/src/app/component/view/wechat_channel/design.html @@ -2,7 +2,55 @@