chore(视频号组件): 更新视频号样式
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="channel-video">
|
||||
<view class="channel-video" :class="{ 'list-mode': listMode }">
|
||||
<!-- 嵌入式视频播放 -->
|
||||
<native-component v-if="canUseEmbedMode">
|
||||
// #ifdef MP-WEIXIN
|
||||
@@ -7,23 +7,25 @@
|
||||
:feed-id="value.feedId"
|
||||
:finder-user-name="value.finderUserName"
|
||||
:feed-token="value.feedToken"
|
||||
style="width: 100%; height: 320rpx;">
|
||||
:style="embedVideoStyle">
|
||||
</channel-video>
|
||||
// #endif
|
||||
</native-component>
|
||||
|
||||
<!-- 跳转式视频播放 -->
|
||||
<view v-else @tap="playVideo">
|
||||
<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
|
||||
<view class="channel-play-btn">
|
||||
<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="channel-stats">
|
||||
<text>{{ value.viewCount }}次观看</text>
|
||||
<view v-else @tap="playVideo" class="video-container">
|
||||
<view class="video-cover-wrap">
|
||||
<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
|
||||
<view class="channel-play-btn">
|
||||
<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
|
||||
</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-stats">{{ value.viewCount }}次观看</view>
|
||||
<view class="video-stats" v-if="value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -31,9 +33,7 @@
|
||||
|
||||
<script>
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
name: 'diy-channel-video',
|
||||
@@ -41,12 +41,20 @@ export default {
|
||||
value: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
listMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
videoHeight: {
|
||||
type: Number,
|
||||
default: 220
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canUseEmbedMode() {
|
||||
// #ifdef MP-WEIXIN
|
||||
return this.value.embedMode && wechatChannelUtil.isEmbedModeSupported();
|
||||
return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported();
|
||||
// #endif
|
||||
return false
|
||||
},
|
||||
@@ -55,6 +63,12 @@ export default {
|
||||
return wechatChannelConfig.icon.playIcon
|
||||
// #endif
|
||||
return ''
|
||||
},
|
||||
embedVideoStyle() {
|
||||
return {
|
||||
width: '100%',
|
||||
height: `${this.listMode ? 180 : 320}rpx`
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -70,15 +84,112 @@ export default {
|
||||
|
||||
.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;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2rpx);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&.list-mode {
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
|
||||
.video-info {
|
||||
padding: 12rpx;
|
||||
|
||||
.video-title {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-cover-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
|
||||
.channel-video.list-mode & {
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.video-cover {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
|
||||
.channel-video.list-mode & {
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.video-stats-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
|
||||
padding: 8rpx 12rpx;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.video-info {
|
||||
padding: 16rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.video-stats {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
// 确保播放按钮在列表模式下更小
|
||||
.channel-video.list-mode .channel-play-btn {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
|
||||
.play-icon {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user