chore(视频号组件): 更新视频号样式，控制标题行数，播放按钮等样式
This commit is contained in:
@@ -14,17 +14,20 @@
|
||||
|
||||
<!-- 跳转式视频播放 -->
|
||||
<view v-else @tap="playVideo" class="video-container">
|
||||
<view class="video-cover-wrap">
|
||||
<view class="video-cover-wrap" :style="coverStyle">
|
||||
<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
|
||||
<view class="channel-play-btn">
|
||||
<view class="channel-play-btn" v-if="showPlayBtn" :style="playBtnStyle">
|
||||
<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
|
||||
<view class="play-icon-css" v-else></view>
|
||||
</view>
|
||||
<view class="video-stats-overlay" v-if="value.showViewCount">
|
||||
{{ value.viewCount }}次观看
|
||||
</view>
|
||||
</view>
|
||||
<view class="video-info">
|
||||
<view class="video-title">{{ value.videoTitle }}</view>
|
||||
<!-- 视频标题，支持多行显示控制 -->
|
||||
<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}</view>
|
||||
<!-- 视频统计信息，非列表模式下显示 -->
|
||||
<view class="video-stats" v-if="value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -35,35 +38,114 @@
|
||||
|
||||
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
|
||||
|
||||
/**
|
||||
* 微信视频号视频卡片组件
|
||||
* 支持嵌入式播放和跳转式播放两种模式
|
||||
* 可配置列表模式、视频高度、标题行数等属性
|
||||
*/
|
||||
export default {
|
||||
name: 'diy-channel-video',
|
||||
props: {
|
||||
/**
|
||||
* 视频数据对象
|
||||
* @type {Object}
|
||||
* @required
|
||||
* @property {string} feedId - 视频 feedId
|
||||
* @property {string} finderUserName - 视频号用户名
|
||||
* @property {string} feedToken - 视频 token
|
||||
* @property {string} coverUrl - 视频封面图
|
||||
* @property {string} videoTitle - 视频标题
|
||||
* @property {number} viewCount - 观看次数
|
||||
* @property {boolean} showViewCount - 是否显示观看次数
|
||||
* @property {boolean} embedMode - 是否启用嵌入式播放
|
||||
*/
|
||||
value: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
/**
|
||||
* 是否为列表模式
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
*/
|
||||
listMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 视频高度（仅适用于嵌入式播放）
|
||||
* @type {number}
|
||||
* @default 220
|
||||
*/
|
||||
videoHeight: {
|
||||
type: Number,
|
||||
default: 220
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 标题显示行数
|
||||
* @type {number}
|
||||
* @default 1
|
||||
*/
|
||||
titleLineClamp: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
/** 是否显示播放按钮 */
|
||||
showPlayBtn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 视频封面图样式
|
||||
* 采用 16:9 比例的响应式高度
|
||||
*/
|
||||
coverStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
width: '100%',
|
||||
height: '0',
|
||||
paddingTop: '56.25%' // 16:9 比例
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 播放按钮样式
|
||||
*/
|
||||
playBtnStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
width: '60rpx',
|
||||
height: '60rpx',
|
||||
borderRadius: '30rpx',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.6)'
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* 是否支持嵌入式播放
|
||||
* @returns {boolean}
|
||||
*/
|
||||
canUseEmbedMode() {
|
||||
// #ifdef MP-WEIXIN
|
||||
return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported();
|
||||
// #endif
|
||||
return false
|
||||
},
|
||||
/**
|
||||
* 播放按钮图标
|
||||
* @returns {string}
|
||||
*/
|
||||
playIcon() {
|
||||
// #ifdef MP-WEIXIN
|
||||
return wechatChannelConfig.icon.playIcon
|
||||
// #endif
|
||||
return ''
|
||||
},
|
||||
/**
|
||||
* 嵌入式视频样式
|
||||
* @returns {Object}
|
||||
*/
|
||||
embedVideoStyle() {
|
||||
return {
|
||||
width: '100%',
|
||||
@@ -72,6 +154,10 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 播放视频
|
||||
* 触发 video-play 事件，由父组件处理具体播放逻辑
|
||||
*/
|
||||
async playVideo() {
|
||||
this.$emit('video-play', this.value);
|
||||
}
|
||||
@@ -82,114 +168,292 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
@import './css/common-channel.scss';
|
||||
|
||||
/**
|
||||
* 视频卡片容器样式
|
||||
* 包含卡片基础样式、悬停效果和列表模式样式
|
||||
*/
|
||||
.channel-video {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
// 悬停效果
|
||||
&:hover {
|
||||
transform: translateY(-2rpx);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-4rpx);
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
// 列表模式样式调整
|
||||
&.list-mode {
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.video-info {
|
||||
padding: 12rpx;
|
||||
padding: 14rpx;
|
||||
|
||||
.video-title {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 4rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频容器样式
|
||||
* 用于跳转式播放模式
|
||||
*/
|
||||
.video-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频封面容器
|
||||
* 采用 16:9 比例的响应式高度
|
||||
*/
|
||||
.video-cover-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
padding-top: 56.25%; /* 16:9 比例 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
// 悬停时缩放效果
|
||||
.channel-video:hover & {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
// 列表模式下的边框圆角调整
|
||||
.channel-video.list-mode & {
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频封面图片
|
||||
* 绝对定位填充整个容器
|
||||
*/
|
||||
.video-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
|
||||
.channel-video.list-mode & {
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
}
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频统计信息遮罩
|
||||
* 显示在视频封面底部
|
||||
*/
|
||||
.video-stats-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
|
||||
padding: 8rpx 12rpx;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||||
padding: 12rpx 16rpx;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
// 悬停时的透明度变化
|
||||
.channel-video:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.channel-video:not(:hover) & {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频信息区域
|
||||
* 包含标题和统计信息
|
||||
*/
|
||||
.video-info {
|
||||
padding: 16rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
background-color: #fff;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
.video-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.channel-video.list-mode & {
|
||||
-webkit-line-clamp: 2;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 4rpx;
|
||||
// 悬停时的背景色变化
|
||||
.channel-video:hover & {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频标题
|
||||
* 支持多行显示控制和渐变遮罩效果
|
||||
*/
|
||||
.video-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: var(--title-line-clamp, 2);
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: color 0.3s ease;
|
||||
position: relative;
|
||||
word-break: break-word;
|
||||
|
||||
// 悬停时的颜色变化
|
||||
.channel-video:hover & {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
// 列表模式下的样式调整
|
||||
.channel-video.list-mode & {
|
||||
-webkit-line-clamp: var(--title-line-clamp, 1);
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 6rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
// 添加渐变遮罩效果，让过长的文字有柔和的结束
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 1.4em;
|
||||
background: linear-gradient(to right, transparent, #fff 90%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// 列表模式下的遮罩高度调整
|
||||
.channel-video.list-mode &::after {
|
||||
height: 1.3em;
|
||||
}
|
||||
|
||||
// 根据行数调整遮罩高度
|
||||
&[style*="--title-line-clamp: 1"]::after {
|
||||
height: 1.4em;
|
||||
}
|
||||
|
||||
&[style*="--title-line-clamp: 3"]::after {
|
||||
height: 4.2em;
|
||||
}
|
||||
|
||||
&[style*="--title-line-clamp: 4"]::after {
|
||||
height: 5.6em;
|
||||
}
|
||||
|
||||
// 列表模式下的多行遮罩高度调整
|
||||
.channel-video.list-mode &[style*="--title-line-clamp: 1"]::after {
|
||||
height: 1.3em;
|
||||
}
|
||||
|
||||
.channel-video.list-mode &[style*="--title-line-clamp: 3"]::after {
|
||||
height: 3.9em;
|
||||
}
|
||||
|
||||
.channel-video.list-mode &[style*="--title-line-clamp: 4"]::after {
|
||||
height: 5.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频统计信息
|
||||
* 显示观看次数等数据
|
||||
*/
|
||||
.video-stats {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 4rpx;
|
||||
margin-top: 6rpx;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
// 悬停时的颜色变化
|
||||
.channel-video:hover & {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
// 确保播放按钮在列表模式下更小
|
||||
/**
|
||||
* 列表模式下的播放按钮样式
|
||||
* 更小的尺寸和悬停效果
|
||||
*/
|
||||
.channel-video.list-mode .channel-play-btn {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 悬停效果
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// 播放图标尺寸
|
||||
.play-icon {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用播放按钮样式优化
|
||||
* 添加悬停效果
|
||||
*/
|
||||
.channel-play-btn {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 悬停效果
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 纯 CSS 播放按钮图标
|
||||
* 当没有 playIcon 时使用
|
||||
*/
|
||||
.play-icon-css {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 12rpx solid transparent;
|
||||
border-bottom: 12rpx solid transparent;
|
||||
border-left: 18rpx solid #fff;
|
||||
margin-left: 4rpx;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
// 悬停时的缩放效果
|
||||
.channel-play-btn:hover & {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// 列表模式下的尺寸调整
|
||||
.channel-video.list-mode & {
|
||||
border-top: 10rpx solid transparent;
|
||||
border-bottom: 10rpx solid transparent;
|
||||
border-left: 15rpx solid #fff;
|
||||
margin-left: 3rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user