From 6f6899deaa537cd942928f6d8e629dfef7a434e7 Mon Sep 17 00:00:00 2001 From: ZF sun <34314687@qq.com> Date: Sat, 10 Jan 2026 15:05:08 +0800 Subject: [PATCH] =?UTF-8?q?chore(=E8=A7=86=E9=A2=91=E5=8F=B7=E7=BB=84?= =?UTF-8?q?=E4=BB=B6):=20=E9=87=8D=E6=9E=84=E8=A7=86=E9=A2=91=E5=8F=B7?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=B8=8D=E5=8D=95=E5=8D=95=E6=98=AF?= =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E8=A7=86=E9=A2=91=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components-diy/css/common-channel.scss | 190 +++++++++ components-diy/diy-channel-header.vue | 45 ++ components-diy/diy-channel-list.vue | 275 +++++++++++++ components-diy/diy-channel-video.vue | 84 ++++ components-diy/diy-channel.vue | 95 +++++ components-diy/diy-group.vue | 12 +- components-diy/diy-wechat-channel-list.vue | 458 --------------------- components-diy/diy-wechat-channel.vue | 232 ----------- components-diy/js/wechat-channel.js | 179 ++++++++ 9 files changed, 874 insertions(+), 696 deletions(-) create mode 100644 components-diy/css/common-channel.scss create mode 100644 components-diy/diy-channel-header.vue create mode 100644 components-diy/diy-channel-list.vue create mode 100644 components-diy/diy-channel-video.vue create mode 100644 components-diy/diy-channel.vue delete mode 100644 components-diy/diy-wechat-channel-list.vue delete mode 100644 components-diy/diy-wechat-channel.vue create mode 100644 components-diy/js/wechat-channel.js diff --git a/components-diy/css/common-channel.scss b/components-diy/css/common-channel.scss new file mode 100644 index 0000000..d9b9a85 --- /dev/null +++ b/components-diy/css/common-channel.scss @@ -0,0 +1,190 @@ +// 公共微信视频号样式 + +// CSS 变量 +:root { + // 尺寸变量 + --channel-play-btn-size: 80rpx; + --channel-play-btn-small-size: 60rpx; + --channel-play-btn-icon-size: 40rpx; + --channel-play-btn-icon-small-size: 30rpx; + --channel-avatar-size: 60rpx; + --channel-arrow-size: 24rpx; + --channel-border-radius: 12rpx; + --channel-stats-padding: 10rpx; + --channel-info-wrap-padding: 10rpx 0; + + // 字体变量 + --channel-name-font-size: 28rpx; + --channel-follow-font-size: 24rpx; + --video-title-font-size: 28rpx; + --video-title-small-font-size: 24rpx; + --video-stats-font-size: 24rpx; + --channel-stats-font-size: 20rpx; + + // 颜色变量 + --channel-name-color: #333; + --channel-follow-color: #07c160; + --video-title-color: #333; + --video-title-small-color: #666; + --video-stats-color: #999; + --channel-stats-color: #fff; + --channel-border-color: #f0f0f0; + --channel-play-btn-bg: rgba(0, 0, 0, 0.4); + --channel-stats-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); + + // 间距变量 + --channel-header-padding: 16rpx; + --channel-avatar-margin-right: 12rpx; + --channel-arrow-margin-left: 8rpx; + --channel-name-margin-bottom: 4rpx; + --video-title-margin-bottom: 8rpx; +} + +// 响应式设计 +@media (max-width: 375px) { + :root { + --channel-play-btn-size: 70rpx; + --channel-play-btn-small-size: 50rpx; + --channel-play-btn-icon-size: 35rpx; + --channel-play-btn-icon-small-size: 25rpx; + --channel-avatar-size: 50rpx; + --channel-name-font-size: 24rpx; + --video-title-font-size: 24rpx; + } +} + +@media (min-width: 750px) { + :root { + --channel-play-btn-size: 90rpx; + --channel-play-btn-small-size: 70rpx; + --channel-play-btn-icon-size: 45rpx; + --channel-play-btn-icon-small-size: 35rpx; + --channel-avatar-size: 70rpx; + --channel-name-font-size: 32rpx; + --video-title-font-size: 32rpx; + } +} + +// 播放按钮样式 +.channel-play-btn { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: var(--channel-play-btn-size); + height: var(--channel-play-btn-size); + background-color: var(--channel-play-btn-bg); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + + .play-icon { + width: var(--channel-play-btn-icon-size); + height: var(--channel-play-btn-icon-size); + } +} + +// 小尺寸播放按钮(用于列表) +.channel-play-btn.small { + width: var(--channel-play-btn-small-size); + height: var(--channel-play-btn-small-size); + + .play-icon { + width: var(--channel-play-btn-icon-small-size); + height: var(--channel-play-btn-icon-small-size); + } +} + +// 视频统计信息 +.channel-stats { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: var(--channel-stats-bg); + padding: var(--channel-stats-padding); + color: var(--channel-stats-color); + font-size: var(--channel-stats-font-size); +} + +// 视频信息容器 +.channel-info-wrap { + display: flex; + flex-direction: column; + flex: 1; + padding: var(--channel-info-wrap-padding); + + .channel-name { + margin-bottom: var(--channel-name-margin-bottom); + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-size: var(--channel-name-font-size); + font-weight: 500; + color: var(--channel-name-color); + } + + .video-title { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-size: var(--video-title-small-font-size); + color: var(--video-title-small-color); + } +} + +// 视频标题 +.video-title { + font-size: var(--video-title-font-size); + font-weight: 500; + color: var(--video-title-color); + margin-bottom: var(--video-title-margin-bottom); + line-height: 1.4; +} + +// 视频统计信息(非绝对定位版本) +.video-stats { + font-size: var(--video-stats-font-size); + color: var(--video-stats-color); +} + +// 频道头部 +.channel-header { + display: flex; + align-items: center; + padding: var(--channel-header-padding); + border-bottom: 1rpx solid var(--channel-border-color); + + .channel-avatar { + width: var(--channel-avatar-size); + height: var(--channel-avatar-size); + border-radius: 50%; + margin-right: var(--channel-avatar-margin-right); + } + + .channel-info { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + + .channel-name { + font-size: var(--channel-name-font-size); + font-weight: 500; + color: var(--channel-name-color); + margin-bottom: var(--channel-name-margin-bottom); + } + + .channel-follow { + font-size: var(--channel-follow-font-size); + color: var(--channel-follow-color); + } + } + + .channel-arrow { + width: var(--channel-arrow-size); + height: var(--channel-arrow-size); + margin-left: var(--channel-arrow-margin-left); + } +} diff --git a/components-diy/diy-channel-header.vue b/components-diy/diy-channel-header.vue new file mode 100644 index 0000000..d2c2c66 --- /dev/null +++ b/components-diy/diy-channel-header.vue @@ -0,0 +1,45 @@ + + + + + \ No newline at end of file diff --git a/components-diy/diy-channel-list.vue b/components-diy/diy-channel-list.vue new file mode 100644 index 0000000..f4b2498 --- /dev/null +++ b/components-diy/diy-channel-list.vue @@ -0,0 +1,275 @@ + + + + + \ No newline at end of file diff --git a/components-diy/diy-channel-video.vue b/components-diy/diy-channel-video.vue new file mode 100644 index 0000000..a482149 --- /dev/null +++ b/components-diy/diy-channel-video.vue @@ -0,0 +1,84 @@ + + + + + \ No newline at end of file diff --git a/components-diy/diy-channel.vue b/components-diy/diy-channel.vue new file mode 100644 index 0000000..1f0bfe6 --- /dev/null +++ b/components-diy/diy-channel.vue @@ -0,0 +1,95 @@ + + + + + + \ No newline at end of file diff --git a/components-diy/diy-group.vue b/components-diy/diy-group.vue index 16eebc3..dd88285 100644 --- a/components-diy/diy-group.vue +++ b/components-diy/diy-group.vue @@ -251,14 +251,14 @@ -