723 lines
18 KiB
Vue
723 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<!-- 视频、图片 动态卡片 -->
|
|||
|
|
<view class="content-card">
|
|||
|
|
<!-- 用户信息 -->
|
|||
|
|
<view class="user-info">
|
|||
|
|
<image
|
|||
|
|
class="avatar"
|
|||
|
|
:src="cardData.user.avatar"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
></image>
|
|||
|
|
<view class="user-detail">
|
|||
|
|
<text class="username">{{ cardData.user.name }}</text>
|
|||
|
|
<text class="user-meta">{{ cardData.user.meta }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="follow-btn" @click="onFollow">
|
|||
|
|
<u-icon name="plus" color="#666" size="14"></u-icon>
|
|||
|
|
<text>关注</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 内容文本 -->
|
|||
|
|
<view class="content-text" @click="goContentDetail">
|
|||
|
|
{{ cardData.content }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 媒体内容 - 内部处理交互 -->
|
|||
|
|
<view class="media-content">
|
|||
|
|
<!-- 视频内容 -->
|
|||
|
|
<view v-if="isVideo" class="video-container" @click="handleVideoPlay">
|
|||
|
|
<image
|
|||
|
|
class="video-cover"
|
|||
|
|
:src="cardData.cover"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
></image>
|
|||
|
|
<view class="video-overlay">
|
|||
|
|
<u-icon name="play-right" color="#fff" size="40"></u-icon>
|
|||
|
|
<text v-if="cardData.duration" class="video-duration">{{
|
|||
|
|
formatDuration(cardData.duration)
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 图片内容 -->
|
|||
|
|
<view v-else class="image-grid" :class="getImageLayoutClass()">
|
|||
|
|
<image
|
|||
|
|
v-for="(img, index) in cardData.images"
|
|||
|
|
:key="index"
|
|||
|
|
class="grid-image"
|
|||
|
|
:src="img"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
@click="handleImagePreview(index)"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 互动栏 - 内部处理交互 -->
|
|||
|
|
<view class="interaction-bar">
|
|||
|
|
<view
|
|||
|
|
class="action-item"
|
|||
|
|
v-for="(item, index) in actionButtons"
|
|||
|
|
:key="index"
|
|||
|
|
@click="handleAction(item.action)"
|
|||
|
|
>
|
|||
|
|
<image
|
|||
|
|
:src="item.icon"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
style="width: 40rpx; height: 40rpx"
|
|||
|
|
></image>
|
|||
|
|
<text>{{ cardData.stats[item.stat] }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "ContentCard",
|
|||
|
|
props: {
|
|||
|
|
cardData: {
|
|||
|
|
type: Object,
|
|||
|
|
required: true,
|
|||
|
|
default: () => ({
|
|||
|
|
user: {
|
|||
|
|
avatar: "",
|
|||
|
|
name: "",
|
|||
|
|
meta: "",
|
|||
|
|
},
|
|||
|
|
content: "",
|
|||
|
|
// 可以是视频或图片
|
|||
|
|
type: "image", // 'image' 或 'video'
|
|||
|
|
images: [], // 图片数组
|
|||
|
|
cover: "", // 视频封面
|
|||
|
|
videoUrl: "", // 视频地址
|
|||
|
|
duration: 0, // 视频时长(秒)
|
|||
|
|
stats: {
|
|||
|
|
forward: 0,
|
|||
|
|
comment: 0,
|
|||
|
|
like: 0,
|
|||
|
|
favorite: 0,
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 添加内部状态跟踪互动状态
|
|||
|
|
isLiked: false,
|
|||
|
|
isFavorited: false,
|
|||
|
|
isForwarded: false,
|
|||
|
|
videoContext: null,
|
|||
|
|
// 添加操作按钮配置
|
|||
|
|
actionButtons: [
|
|||
|
|
{
|
|||
|
|
icon: "/static/common/img/homepage/reply.png",
|
|||
|
|
action: "forward",
|
|||
|
|
stat: "forward"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: "/static/common/img/homepage/comment.png",
|
|||
|
|
action: "comment",
|
|||
|
|
stat: "comment"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: "/static/common/img/homepage/like.png",
|
|||
|
|
action: "like",
|
|||
|
|
stat: "like"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: "/static/common/img/homepage/star.png",
|
|||
|
|
action: "favorite",
|
|||
|
|
stat: "favorite"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
isVideo() {
|
|||
|
|
return this.cardData.type === "video";
|
|||
|
|
},
|
|||
|
|
// 根据状态动态改变图标和颜色
|
|||
|
|
likeIcon() {
|
|||
|
|
return this.isLiked ? "heart-fill" : "heart";
|
|||
|
|
},
|
|||
|
|
likeColor() {
|
|||
|
|
return this.isLiked ? "#ff5252" : "#999";
|
|||
|
|
},
|
|||
|
|
favoriteIcon() {
|
|||
|
|
return this.isFavorited ? "star-fill" : "star";
|
|||
|
|
},
|
|||
|
|
favoriteColor() {
|
|||
|
|
return this.isFavorited ? "#ffb700" : "#999";
|
|||
|
|
},
|
|||
|
|
forwardIcon() {
|
|||
|
|
return this.isForwarded ? "arrow-right-fill" : "arrow-right";
|
|||
|
|
},
|
|||
|
|
forwardColor() {
|
|||
|
|
return this.isForwarded ? "#2979ff" : "#999";
|
|||
|
|
},
|
|||
|
|
commentColor() {
|
|||
|
|
return "#999"; // 评论按钮颜色无变化
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 处理关注点击
|
|||
|
|
onFollow() {
|
|||
|
|
this.$emit("follow", this.cardData.user);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 跳转详情页
|
|||
|
|
goContentDetail() {
|
|||
|
|
console.log("this.cardData", this.cardData);
|
|||
|
|
this.$u.route({
|
|||
|
|
url: "/pages/home/home/components/contentDetail/index",
|
|||
|
|
// params: {
|
|||
|
|
// card,
|
|||
|
|
// },
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化视频时长
|
|||
|
|
formatDuration(seconds) {
|
|||
|
|
const minutes = Math.floor(seconds / 60);
|
|||
|
|
const remainingSeconds = Math.floor(seconds % 60);
|
|||
|
|
return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
|
|||
|
|
.toString()
|
|||
|
|
.padStart(2, "0")}`;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理视频播放
|
|||
|
|
handleVideoPlay() {
|
|||
|
|
if (this.cardData.videoUrl) {
|
|||
|
|
// 记录播放历史
|
|||
|
|
this.savePlayHistory();
|
|||
|
|
|
|||
|
|
// 使用内置视频播放器播放
|
|||
|
|
try {
|
|||
|
|
// 先尝试使用内部视频播放器
|
|||
|
|
if (this.useInternalPlayer) {
|
|||
|
|
this.showVideoPlayer = true;
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.videoContext = uni.createVideoContext("video-player", this);
|
|||
|
|
this.videoContext.requestFullScreen();
|
|||
|
|
this.videoContext.play();
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 否则跳转到专门的播放页面
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/video/player?videoUrl=${encodeURIComponent(
|
|||
|
|
this.cardData.videoUrl
|
|||
|
|
)}&title=${encodeURIComponent(this.cardData.content)}`,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 触发播放事件，让父组件可以进行额外处理
|
|||
|
|
this.$emit("video-play", {
|
|||
|
|
videoUrl: this.cardData.videoUrl,
|
|||
|
|
title: this.cardData.content,
|
|||
|
|
cover: this.cardData.cover,
|
|||
|
|
cardId: this.cardData.id,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 更新播放统计
|
|||
|
|
this.updateVideoStats();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("视频播放失败:", error);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "视频播放失败，请稍后再试",
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理图片预览
|
|||
|
|
handleImagePreview(index) {
|
|||
|
|
try {
|
|||
|
|
// 使用uni-app的图片预览API
|
|||
|
|
uni.previewImage({
|
|||
|
|
current: index,
|
|||
|
|
urls: this.cardData.images,
|
|||
|
|
longPressActions: {
|
|||
|
|
itemList: ["保存图片", "分享图片"],
|
|||
|
|
success: (res) => {
|
|||
|
|
const { tapIndex } = res;
|
|||
|
|
if (tapIndex === 0) {
|
|||
|
|
// 保存图片
|
|||
|
|
this.saveImage(this.cardData.images[index]);
|
|||
|
|
} else if (tapIndex === 1) {
|
|||
|
|
// 分享图片
|
|||
|
|
this.shareImage(this.cardData.images[index]);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 触发图片预览事件
|
|||
|
|
this.$emit("image-preview", {
|
|||
|
|
index,
|
|||
|
|
images: this.cardData.images,
|
|||
|
|
cardId: this.cardData.id,
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("图片预览失败:", error);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 保存图片
|
|||
|
|
saveImage(url) {
|
|||
|
|
uni.showLoading({ title: "正在保存..." });
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url,
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.statusCode === 200) {
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath: res.tempFilePath,
|
|||
|
|
success: () => {
|
|||
|
|
uni.showToast({ title: "保存成功" });
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error("保存失败:", err);
|
|||
|
|
uni.showToast({ title: "保存失败", icon: "none" });
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: () => {
|
|||
|
|
uni.showToast({ title: "下载图片失败", icon: "none" });
|
|||
|
|
},
|
|||
|
|
complete: () => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 分享图片
|
|||
|
|
shareImage(url) {
|
|||
|
|
// 根据平台实现不同的分享逻辑
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
plus.share.sendWithSystem({
|
|||
|
|
type: "image",
|
|||
|
|
pictures: [url],
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef H5
|
|||
|
|
// H5环境可能需要调用其他API
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef MP
|
|||
|
|
// 小程序环境使用小程序分享API
|
|||
|
|
uni.showToast({ title: "请使用右上角分享", icon: "none" });
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 根据图片数量确定布局样式
|
|||
|
|
getImageLayoutClass() {
|
|||
|
|
const count = this.cardData.images.length;
|
|||
|
|
if (count === 1) return "single-image";
|
|||
|
|
if (count === 2) return "double-image";
|
|||
|
|
if (count === 3) return "triple-image";
|
|||
|
|
if (count === 4) return "four-image";
|
|||
|
|
if (count > 4) return "multi-image";
|
|||
|
|
return "";
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理转发
|
|||
|
|
handleForward() {
|
|||
|
|
this.isForwarded = !this.isForwarded;
|
|||
|
|
|
|||
|
|
// 显示分享菜单
|
|||
|
|
uni.showShareMenu({
|
|||
|
|
withShareTicket: true,
|
|||
|
|
menus: ["shareAppMessage", "shareTimeline"],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 触发转发事件
|
|||
|
|
this.$emit("forward", {
|
|||
|
|
cardData: this.cardData,
|
|||
|
|
isForwarded: this.isForwarded,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 如果在APP中，可以调用原生分享
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
uni.share({
|
|||
|
|
provider: "weixin",
|
|||
|
|
scene: "WXSceneSession",
|
|||
|
|
type: 0,
|
|||
|
|
title: this.cardData.content,
|
|||
|
|
summary: this.cardData.content,
|
|||
|
|
imageUrl: this.isVideo ? this.cardData.cover : this.cardData.images[0],
|
|||
|
|
success: function (res) {
|
|||
|
|
console.log("分享成功：" + JSON.stringify(res));
|
|||
|
|
},
|
|||
|
|
fail: function (err) {
|
|||
|
|
console.log("分享失败：" + JSON.stringify(err));
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理评论
|
|||
|
|
handleComment() {
|
|||
|
|
// 跳转到评论页面或打开评论弹窗
|
|||
|
|
this.$emit("comment", {
|
|||
|
|
cardData: this.cardData,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 这里可以实现自定义的评论交互
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/comment/index?id=${this.cardData.id}&type=${this.cardData.type}`,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理点赞
|
|||
|
|
handleLike() {
|
|||
|
|
// 切换点赞状态
|
|||
|
|
this.isLiked = !this.isLiked;
|
|||
|
|
|
|||
|
|
// 更新点赞数据
|
|||
|
|
const newStats = { ...this.cardData.stats };
|
|||
|
|
if (this.isLiked) {
|
|||
|
|
newStats.like += 1;
|
|||
|
|
} else {
|
|||
|
|
newStats.like = Math.max(0, newStats.like - 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新数据并触发事件
|
|||
|
|
this.$emit("like", {
|
|||
|
|
cardData: this.cardData,
|
|||
|
|
isLiked: this.isLiked,
|
|||
|
|
newStats,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 发送点赞请求到服务器
|
|||
|
|
this.updateLikeStatus();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理收藏
|
|||
|
|
handleFavorite() {
|
|||
|
|
// 切换收藏状态
|
|||
|
|
this.isFavorited = !this.isFavorited;
|
|||
|
|
|
|||
|
|
// 更新收藏数据
|
|||
|
|
const newStats = { ...this.cardData.stats };
|
|||
|
|
if (this.isFavorited) {
|
|||
|
|
newStats.favorite += 1;
|
|||
|
|
} else {
|
|||
|
|
newStats.favorite = Math.max(0, newStats.favorite - 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新数据并触发事件
|
|||
|
|
this.$emit("favorite", {
|
|||
|
|
cardData: this.cardData,
|
|||
|
|
isFavorited: this.isFavorited,
|
|||
|
|
newStats,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 发送收藏请求到服务器
|
|||
|
|
this.updateFavoriteStatus();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 更新点赞状态到服务器
|
|||
|
|
updateLikeStatus() {
|
|||
|
|
// 调用API更新点赞状态
|
|||
|
|
// 示例代码，根据实际API调整
|
|||
|
|
const url = this.isLiked ? "/api/like/add" : "/api/like/cancel";
|
|||
|
|
uni.request({
|
|||
|
|
url,
|
|||
|
|
method: "POST",
|
|||
|
|
data: {
|
|||
|
|
contentId: this.cardData.id,
|
|||
|
|
contentType: this.cardData.type,
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log("点赞状态更新成功", res);
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error("点赞状态更新失败", err);
|
|||
|
|
// 恢复原状态
|
|||
|
|
this.isLiked = !this.isLiked;
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 更新收藏状态到服务器
|
|||
|
|
updateFavoriteStatus() {
|
|||
|
|
// 调用API更新收藏状态
|
|||
|
|
// 示例代码，根据实际API调整
|
|||
|
|
const url = this.isFavorited
|
|||
|
|
? "/api/favorite/add"
|
|||
|
|
: "/api/favorite/cancel";
|
|||
|
|
uni.request({
|
|||
|
|
url,
|
|||
|
|
method: "POST",
|
|||
|
|
data: {
|
|||
|
|
contentId: this.cardData.id,
|
|||
|
|
contentType: this.cardData.type,
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log("收藏状态更新成功", res);
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error("收藏状态更新失败", err);
|
|||
|
|
// 恢复原状态
|
|||
|
|
this.isFavorited = !this.isFavorited;
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 记录视频播放历史
|
|||
|
|
savePlayHistory() {
|
|||
|
|
// 保存播放历史到本地存储或服务器
|
|||
|
|
try {
|
|||
|
|
const historyList = uni.getStorageSync("videoPlayHistory") || [];
|
|||
|
|
const now = new Date().getTime();
|
|||
|
|
|
|||
|
|
// 查找是否已有该视频记录
|
|||
|
|
const index = historyList.findIndex(
|
|||
|
|
(item) => item.id === this.cardData.id
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (index > -1) {
|
|||
|
|
// 更新已有记录
|
|||
|
|
historyList[index].lastPlayTime = now;
|
|||
|
|
historyList[index].playCount += 1;
|
|||
|
|
} else {
|
|||
|
|
// 添加新记录
|
|||
|
|
historyList.push({
|
|||
|
|
id: this.cardData.id,
|
|||
|
|
title: this.cardData.content,
|
|||
|
|
cover: this.cardData.cover,
|
|||
|
|
lastPlayTime: now,
|
|||
|
|
playCount: 1,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存回本地存储
|
|||
|
|
uni.setStorageSync("videoPlayHistory", historyList);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error("保存播放历史失败", e);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 更新视频播放统计
|
|||
|
|
updateVideoStats() {
|
|||
|
|
// 调用API更新视频播放次数
|
|||
|
|
uni.request({
|
|||
|
|
url: "/api/video/view",
|
|||
|
|
method: "POST",
|
|||
|
|
data: {
|
|||
|
|
videoId: this.cardData.id,
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log("视频播放统计更新成功", res);
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error("视频播放统计更新失败", err);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 添加统一的操作处理方法
|
|||
|
|
handleAction(action) {
|
|||
|
|
switch(action) {
|
|||
|
|
case "forward":
|
|||
|
|
this.handleForward();
|
|||
|
|
break;
|
|||
|
|
case "comment":
|
|||
|
|
this.handleComment();
|
|||
|
|
break;
|
|||
|
|
case "like":
|
|||
|
|
this.handleLike();
|
|||
|
|
break;
|
|||
|
|
case "favorite":
|
|||
|
|
this.handleFavorite();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.content-card {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|||
|
|
|
|||
|
|
.user-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
|
|||
|
|
.avatar {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-detail {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.username {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
display: block;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-meta {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
display: block;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
margin-top: 6rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.follow-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
padding: 8rpx 16rpx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-left: 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.media-content {
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
// 视频容器样式
|
|||
|
|
.video-container {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.video-cover {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 400rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|||
|
|
|
|||
|
|
.video-duration {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 16rpx;
|
|||
|
|
bottom: 16rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
padding: 4rpx 8rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 图片网格样式
|
|||
|
|
.image-grid {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.grid-image {
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.single-image {
|
|||
|
|
.grid-image {
|
|||
|
|
width: 100%;
|
|||
|
|
max-height: 400rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.double-image {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.grid-image {
|
|||
|
|
width: 49%;
|
|||
|
|
height: 240rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.triple-image {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.grid-image {
|
|||
|
|
width: 31%;
|
|||
|
|
height: 180rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.four-image {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.grid-image {
|
|||
|
|
width: 49%;
|
|||
|
|
height: 180rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.multi-image {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.grid-image {
|
|||
|
|
width: 31%;
|
|||
|
|
height: 180rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.interaction-bar {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
|
|||
|
|
.action-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|