725 lines
21 KiB
Vue
725 lines
21 KiB
Vue
<template>
|
||
<view class="skill-detail-page">
|
||
|
||
<custom-navbar title="技能集市" backgroundColor="#ffffff" titleColor="#333" borderBottom="none">
|
||
</custom-navbar>
|
||
|
||
<!-- <view class="mock-switch" @click="toggleMockData">
|
||
<text>{{ useMockData ? '关闭模拟数据' : '开启模拟数据' }}</text>
|
||
</view> -->
|
||
|
||
<view class="video-section" v-if="article.videoSrc">
|
||
<view class="video-wrapper">
|
||
|
||
<video v-if="!tipShow" id="customVideo" class="main-video" :src="article.videoSrc" :poster="article.poster"
|
||
:controls="showNativeControls" :show-center-play-btn="false" :muted="isMuted" object-fit="cover"
|
||
@timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetaData" @ended="onEnded" @play="onPlay" @pause="onPause"
|
||
@fullscreenchange="onFullScreenChange">
|
||
<cover-image v-if="!isPlaying && !showNativeControls" class="center-play-icon"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bb720bb0-4ada-49f6-9ce5-38abfd613d5d.png"
|
||
@click.stop="togglePlay"></cover-image>
|
||
|
||
<cover-view class="custom-control-bar" v-if="!showNativeControls">
|
||
<cover-image class="bar-bg"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ce7f28f8-470d-4f5b-9c7e-ff2bf8635226.png"></cover-image>
|
||
|
||
<cover-view class="bar-content">
|
||
<cover-image v-if="isPlaying" class="ctrl-icon" :src="iconPause" @click.stop="togglePlay"></cover-image>
|
||
<cover-image v-if="!isPlaying" class="ctrl-icon" :src="iconPlay" @click.stop="togglePlay"></cover-image>
|
||
|
||
<cover-view class="time-text">{{ formatTime(currentTime) }}</cover-view>
|
||
|
||
<cover-view class="slider-track">
|
||
<cover-view class="slider-bg"></cover-view>
|
||
<cover-view class="slider-active" :style="activeStyle"></cover-view>
|
||
<cover-view class="slider-thumb" :style="thumbStyle"></cover-view>
|
||
</cover-view>
|
||
|
||
<cover-view class="time-text">{{ formatTime(duration) }}</cover-view>
|
||
|
||
<cover-image v-if="!isMuted" class="ctrl-icon mute-icon" :src="iconSoundOn"
|
||
@click.stop="toggleMute"></cover-image>
|
||
<cover-image v-if="isMuted" class="ctrl-icon mute-icon" :src="iconMute"
|
||
@click.stop="toggleMute"></cover-image>
|
||
|
||
<cover-image class="ctrl-icon fullscreen-icon" :src="iconFullscreen"
|
||
@click.stop="toggleFullScreen"></cover-image>
|
||
</cover-view>
|
||
</cover-view>
|
||
</video>
|
||
|
||
<image v-else class="main-video fallback-poster" :src="article.poster || article.videoSrc" mode="aspectFill">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="article-header" v-if="article.title">
|
||
<view class="title">{{ article.title }}</view>
|
||
<view class="meta-row">
|
||
<view class="author-info" @click="goToAuthorMarket">
|
||
<image class="avatar" :src="article.authorAvatar" mode="aspectFill"></image>
|
||
<text class="author-name">{{ article.authorName }}</text>
|
||
<text class="date">{{ article.date }}</text>
|
||
</view>
|
||
|
||
<view class="favorite-btn" @click="toggleFavorite">
|
||
<image class="star-icon" :src="isFavorite ? filledStarUrl : emptyStarUrl" />
|
||
<text :class="{ 'active-fav': isFavorite }">{{ isFavorite ? '已收藏' : '收藏' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="article-content-wrapper">
|
||
<view class="article-content" v-if="article.htmlContent">
|
||
<rich-text :nodes="formattedHtmlContent"></rich-text>
|
||
</view>
|
||
<view class="empty-content" v-else>
|
||
<text class="empty-text">暂无图文介绍</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="recommend-section" v-if="recommendList.length > 0">
|
||
<view class="section-header">
|
||
<text class="section-title">相关推荐</text>
|
||
<view class="refresh-btn" @click="refreshList">
|
||
<image class="refresh-icon" :class="{ 'is-rotating': isRefreshing }"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f2152145-df2a-49ab-87f5-f66b3207d0b0.png">
|
||
</image>
|
||
<text>换一批</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-container">
|
||
<skill-card v-for="(item, index) in recommendList" :key="index" :item="item"></skill-card>
|
||
</view>
|
||
</view>
|
||
|
||
<tipsPopup2 :show="tipShow" @closePopup="closePopup" sureText="确认" @okBtn="okBtn">
|
||
{{ tipsText }}
|
||
</tipsPopup2>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "@/utils/request";
|
||
import SkillCard from "@/pages/home/components/skill-card.vue";
|
||
import tipsPopup2 from "@/components/tips-popup/tips-popup2";
|
||
|
||
export default {
|
||
components: {
|
||
SkillCard,
|
||
tipsPopup2
|
||
},
|
||
data() {
|
||
return {
|
||
useMockData: false,
|
||
|
||
articleId: null,
|
||
isFavorite: false,
|
||
emptyStarUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/53378402-5456-4a80-b2ec-7c18d43d970e.png',
|
||
filledStarUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/10461305-6bf8-4016-ae76-3415e055ec63.png',
|
||
isRefreshing: false,
|
||
|
||
isLogin: false,
|
||
tipShow: false,
|
||
tipsText: "",
|
||
tipType: "",
|
||
|
||
videoContext: null,
|
||
isPlaying: false,
|
||
isMuted: false,
|
||
|
||
showNativeControls: false,
|
||
|
||
currentTime: 0,
|
||
duration: 0,
|
||
sliderValue: 0,
|
||
|
||
iconPlay: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/88ca4fe3-645c-48a9-abda-1f9b45714970.png',
|
||
iconPause: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cf9d6dd6-e9df-4c46-bafa-e1a72f7ddbcd.png',
|
||
iconSoundOn: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/9f13a630-7efd-4c61-b6fe-b6b282e28e42.png',
|
||
iconMute: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/80f856c1-3d66-4b11-b21a-8eb6a3272a3c.png',
|
||
iconFullscreen: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4286ef33-6849-4851-8866-4230d2523a33.png',
|
||
|
||
article: {},
|
||
recommendList: []
|
||
}
|
||
},
|
||
computed: {
|
||
formattedHtmlContent() {
|
||
if (!this.article.htmlContent) return '';
|
||
let html = this.article.htmlContent;
|
||
html = html.replace(/<img/gi, '<img style="max-width:100%; height:auto; display:block; border-radius:10px; margin: 20rpx 0;"');
|
||
html = html.replace(/<p/gi, '<p style="margin-bottom: 24rpx; line-height: 40rpx;"');
|
||
return html;
|
||
},
|
||
activeStyle() {
|
||
return `width: ${this.sliderValue}%;`;
|
||
},
|
||
thumbStyle() {
|
||
return `left: ${this.sliderValue}%;`;
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options && options.id) {
|
||
this.articleId = parseInt(options.id, 10);
|
||
} else {
|
||
this.articleId = 1;
|
||
}
|
||
this.getPageData();
|
||
},
|
||
onShow() {
|
||
this.isLogin = uni.getStorageSync("accessToken") ? true : false;
|
||
},
|
||
methods: {
|
||
// 点击跳回集市专属页面（兼容官方和品牌方）
|
||
goToAuthorMarket() {
|
||
const isOfficial = this.article.linkType === 1 ? '1' : '0';
|
||
const linkId = this.article.linkId || '';
|
||
const name = encodeURIComponent(this.article.authorName || '');
|
||
const avatar = encodeURIComponent(this.article.authorAvatar || '');
|
||
const count = this.article.authorVideoCount || 0;
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/jingxuan/selected-skills?showAuthor=1&isOfficial=${isOfficial}&linkId=${linkId}&authorName=${name}&authorAvatar=${avatar}&videoCount=${count}`
|
||
});
|
||
},
|
||
|
||
getVideoContext() {
|
||
if (!this.videoContext) {
|
||
this.videoContext = uni.createVideoContext('customVideo', this);
|
||
}
|
||
return this.videoContext;
|
||
},
|
||
|
||
closePopup() {
|
||
this.tipShow = false;
|
||
},
|
||
okBtn() {
|
||
if (this.tipType == "login") {
|
||
uni.navigateTo({
|
||
url: "/pages/blogPopup/blogPopup",
|
||
});
|
||
}
|
||
this.tipShow = false;
|
||
},
|
||
|
||
formatTime(sec) {
|
||
if (!sec) return '00:00';
|
||
sec = Math.round(sec);
|
||
let m = Math.floor(sec / 60);
|
||
let s = sec % 60;
|
||
return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
|
||
},
|
||
onLoadedMetaData(e) {
|
||
this.duration = e.detail.duration;
|
||
},
|
||
onTimeUpdate(e) {
|
||
if (e.detail.duration && this.duration === 0) {
|
||
this.duration = e.detail.duration;
|
||
}
|
||
this.currentTime = e.detail.currentTime;
|
||
if (this.duration > 0) {
|
||
this.sliderValue = Number(((this.currentTime / this.duration) * 100).toFixed(2));
|
||
}
|
||
},
|
||
onEnded() {
|
||
this.isPlaying = false;
|
||
this.currentTime = 0;
|
||
this.sliderValue = 0;
|
||
if (this.showNativeControls) {
|
||
const ctx = this.getVideoContext();
|
||
if (ctx) ctx.exitFullScreen();
|
||
}
|
||
},
|
||
onPlay() { this.isPlaying = true; },
|
||
onPause() { this.isPlaying = false; },
|
||
|
||
onFullScreenChange(e) {
|
||
const isFull = e.detail.fullScreen;
|
||
if (!isFull) {
|
||
this.showNativeControls = false;
|
||
} else {
|
||
this.showNativeControls = true;
|
||
}
|
||
},
|
||
|
||
togglePlay() {
|
||
const ctx = this.getVideoContext();
|
||
if (!ctx) return;
|
||
if (this.isPlaying) {
|
||
ctx.pause();
|
||
} else {
|
||
ctx.play();
|
||
}
|
||
},
|
||
toggleMute() {
|
||
this.isMuted = !this.isMuted;
|
||
},
|
||
|
||
toggleFullScreen() {
|
||
const ctx = this.getVideoContext();
|
||
if (!ctx) return;
|
||
this.showNativeControls = true;
|
||
this.$nextTick(() => {
|
||
ctx.requestFullScreen({ direction: 90 });
|
||
});
|
||
},
|
||
|
||
toggleMockData() {
|
||
this.useMockData = !this.useMockData;
|
||
uni.showToast({ title: this.useMockData ? 'Mock已开启' : 'Mock已关闭', icon: 'none' });
|
||
this.getPageData();
|
||
},
|
||
|
||
getPageData() {
|
||
if (this.useMockData) {
|
||
this.injectMockData();
|
||
return;
|
||
}
|
||
uni.showLoading({ title: '加载中...' });
|
||
request.post("/sj/skill/details", {
|
||
id: this.articleId
|
||
}).then((res) => {
|
||
if (res.code == 200 && res.data) {
|
||
const data = res.data;
|
||
this.article = {
|
||
title: data.name || '暂无标题',
|
||
// 【预留接口字段解析】：这里需要后端配合返回以下字段，如果没有的话目前会使用默认值
|
||
linkType: data.link_type || 1, // 1=官方 2=品牌
|
||
linkId: data.link_id || 0,
|
||
authorName: data.author_name || '美融融平台',
|
||
authorAvatar: data.author_avatar || 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bbe832bf-aae6-4579-b3cc-246d252488c3',
|
||
authorVideoCount: data.link_publish_num || 0, // 关联者发布数
|
||
|
||
date: data.create_time ? data.create_time.substring(0, 10).replace(/-/g, '.') : '',
|
||
videoSrc: data.video || '',
|
||
poster: data.cover_img || '',
|
||
htmlContent: data.detail || ''
|
||
};
|
||
this.isFavorite = data.collect_state === 1;
|
||
request.post("/sj/skill/list", {
|
||
page: 1,
|
||
limit: 10,
|
||
link_type: data.link_type,
|
||
link_id: data.link_id,
|
||
skill_id: data.id
|
||
}).then((listRes) => {
|
||
if (listRes.code == 200 && listRes.data && listRes.data.list) {
|
||
// 使用 map 遍历数组，将后端返回的字段一对一映射成组件需要的字段
|
||
this.recommendList = listRes.data.list.map(item => {
|
||
return {
|
||
id: item.id,
|
||
title: item.name || '暂无标题', // 映射标题
|
||
coverSrc: item.cover_img || '', // 映射封面图
|
||
type: item.link_name || '平台课程', // 映射来源（平台/品牌）
|
||
typeIcon: item.link_logo || '', // 映射来源图标
|
||
// 浏览量优先取总浏览量，如果没有则取实际/初始浏览量
|
||
views: item.total_browse_num || item.real_browse_num || item.browse_num || 0,
|
||
// 截取时间并格式化
|
||
time: item.create_time ? item.create_time.substring(0, 10).replace(/-/g, '-') : ''
|
||
};
|
||
});
|
||
}
|
||
}).catch((err) => {
|
||
console.error('获取推荐列表异常', err);
|
||
});
|
||
} else {
|
||
uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' });
|
||
}
|
||
}).catch((err) => {
|
||
console.error('获取技能集市详情异常', err);
|
||
}).finally(() => {
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
|
||
toggleFavorite() {
|
||
if (!this.isLogin) {
|
||
if (this.isPlaying) {
|
||
this.getVideoContext().pause();
|
||
}
|
||
this.tipsText = "您现在还未登录，是否确定前往登录？";
|
||
this.tipShow = true;
|
||
this.tipType = "login";
|
||
return;
|
||
}
|
||
|
||
if (this.useMockData) {
|
||
this.isFavorite = !this.isFavorite;
|
||
uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
uni.showLoading({ title: '处理中' });
|
||
const targetState = this.isFavorite ? 2 : 1;
|
||
|
||
request.post("/sj/skill/collect", {
|
||
id: this.articleId,
|
||
state: targetState
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.isFavorite = !this.isFavorite;
|
||
uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
|
||
} else {
|
||
uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({ title: '网络异常', icon: 'none' });
|
||
}).finally(() => {
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
|
||
refreshList() {
|
||
if (this.isRefreshing) return;
|
||
this.isRefreshing = true;
|
||
uni.showLoading({ title: '加载中' });
|
||
setTimeout(() => {
|
||
this.recommendList = this.recommendList.sort(() => Math.random() - 0.5);
|
||
this.isRefreshing = false;
|
||
uni.hideLoading();
|
||
}, 600);
|
||
},
|
||
|
||
injectMockData() {
|
||
this.isFavorite = false;
|
||
this.article = {
|
||
title: '穿戴甲的操作视频扫码验券操作',
|
||
|
||
// Mock作者相关数据(测试品牌跳转，将linkType改为2)
|
||
linkType: 2,
|
||
linkId: 101,
|
||
authorName: '蜜丝卡伦官方品牌',
|
||
authorAvatar: 'https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80',
|
||
authorVideoCount: 658,
|
||
|
||
date: '2026.03.03',
|
||
videoSrc: 'https://vjs.zencdn.net/v/oceans.mp4',
|
||
poster: 'https://images.unsplash.com/photo-1610992015732-2449b76344bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
|
||
htmlContent: `
|
||
<p>最近，一向以平价、良心、宠粉著称的胖东来，突然因为一条毛巾被推上风口浪尖。</p>
|
||
<p>4月下旬，抖音博主“惊梦人-”连续发布多条探店视频，称自己跑遍许昌5家胖东来门店，发现一边是几块钱的玻璃水、洗衣液等亲民好物，另一边却摆着标价249元的高端毛巾，价格形成反差。</p>
|
||
<img src="https://dummyimage.com/800x400/ff6b81/ffffff.png&text=占位图" alt="会员权益"/>
|
||
`
|
||
};
|
||
this.loadMockRecommend();
|
||
},
|
||
|
||
loadMockRecommend() {
|
||
this.recommendList = [
|
||
{
|
||
id: 1,
|
||
title: '穿戴甲的操作视频扫码验券操作教程...',
|
||
coverSrc: 'https://images.unsplash.com/photo-1604654894610-df63bc536371?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
|
||
type: '平台课程',
|
||
typeIcon: 'https://dummyimage.com/100x100/e6505f/fff.png&text=融',
|
||
views: 836000,
|
||
time: '7小时前'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '脸部按摩操作步骤详情',
|
||
coverSrc: 'https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
|
||
type: '脸缘品牌',
|
||
typeIcon: 'https://dummyimage.com/100x100/e6505f/fff.png&text=缘',
|
||
views: 8334,
|
||
time: '1天前'
|
||
}
|
||
];
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.skill-detail-page {
|
||
background-color: #ffffff;
|
||
min-height: 100vh;
|
||
padding-bottom: 60rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.mock-switch {
|
||
position: fixed;
|
||
right: 20rpx;
|
||
top: 200rpx;
|
||
background: #E5505F;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
z-index: 999;
|
||
box-shadow: 0 4rpx 10rpx rgba(229, 80, 95, 0.4);
|
||
}
|
||
|
||
.video-section {
|
||
width: 100%;
|
||
height: 420rpx;
|
||
|
||
.video-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.main-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.fallback-poster {
|
||
z-index: 1;
|
||
}
|
||
|
||
.center-play-icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
z-index: 99;
|
||
}
|
||
|
||
.custom-control-bar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 70rpx;
|
||
z-index: 99;
|
||
|
||
.bar-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 70rpx;
|
||
z-index: 100;
|
||
}
|
||
|
||
.bar-content {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 70rpx;
|
||
z-index: 101;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
|
||
.ctrl-icon {
|
||
width: 25rpx;
|
||
height: 30rpx;
|
||
margin: 0 10rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.mute-icon {
|
||
width: 38rpx;
|
||
height: 30rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.fullscreen-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.time-text {
|
||
font-size: 22rpx;
|
||
color: #ffffff;
|
||
line-height: 70rpx;
|
||
}
|
||
|
||
.slider-track {
|
||
flex: 1;
|
||
height: 70rpx;
|
||
margin: 0 20rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.slider-bg {
|
||
position: absolute;
|
||
top: 33rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 4rpx;
|
||
background-color: rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
.slider-active {
|
||
position: absolute;
|
||
top: 33rpx;
|
||
left: 0;
|
||
height: 4rpx;
|
||
background-color: #FF4767;
|
||
}
|
||
|
||
.slider-thumb {
|
||
position: absolute;
|
||
top: 25rpx;
|
||
margin-left: -10rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
background-color: #FF4767;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-header {
|
||
padding: 30rpx 30rpx 20rpx;
|
||
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.meta-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.author-info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
border-radius: 50%;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.author-name {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.date {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 33rpx;
|
||
}
|
||
}
|
||
|
||
.favorite-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 33rpx;
|
||
|
||
.star-icon {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-right: 6rpx;
|
||
margin-top: -2rpx;
|
||
}
|
||
|
||
.active-fav {
|
||
color: #FD5A8C;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-content-wrapper {
|
||
.article-content {
|
||
padding: 0 30rpx 40rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #2A2A2A;
|
||
line-height: 40rpx;
|
||
|
||
::v-deep p {
|
||
margin-bottom: 24rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
::v-deep img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
border-radius: 10rpx;
|
||
margin: 20rpx 0;
|
||
}
|
||
}
|
||
|
||
.empty-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 50rpx 0 80rpx;
|
||
|
||
.empty-icon {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
margin-bottom: 24rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 26rpx;
|
||
color: #A9A9A9;
|
||
}
|
||
}
|
||
}
|
||
|
||
.recommend-section {
|
||
padding: 0 30rpx;
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
.section-title {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 42rpx;
|
||
}
|
||
|
||
.refresh-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
|
||
.refresh-icon {
|
||
width: 24rpx;
|
||
height: 28rpx;
|
||
margin-right: 8rpx;
|
||
transition: transform 0.5s ease;
|
||
|
||
&.is-rotating {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |