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 @@ -