技能集市跳转逻辑
This commit is contained in:
BAKEYi
parent
87fae84240
commit
e94a376395
|
|
@ -160,8 +160,8 @@ export default {
|
|||
}
|
||||
|
||||
&.brand-course .type-text {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
background: #f9d3d760;
|
||||
color: #E55463;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,48 +13,58 @@
|
|||
|
||||
<view class="nav-placeholder" :style="{ height: navHeight + 'px' }"></view>
|
||||
|
||||
<view class="official-author-block" v-if="linkType === 1">
|
||||
<image class="author-avatar" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bbe832bf-aae6-4579-b3cc-246d252488c3" mode="aspectFill"></image>
|
||||
<view class="author-info">
|
||||
<text class="author-name">美融融官方</text>
|
||||
<text class="author-desc">发布了658视频</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sticky-header-container" :style="{ top: navHeight + 'px' }">
|
||||
|
||||
<view class="sort-bar-wrap" :style="{ top: navHeight + 'px' }">
|
||||
<view class="sort-bar">
|
||||
<view class="left-sorts">
|
||||
<view class="sort-item" @tap="toggleSort('time')">
|
||||
<text class="sort-text" :class="{ active: orderType === 1 || orderType === 2 }">发布时间</text>
|
||||
<view class="arrows">
|
||||
<image class="arrow-icon" :src="orderType === 1 ? iconPinkUp : iconGreyUp"></image>
|
||||
<image class="arrow-icon" :src="orderType === 2 ? iconPinkDown : iconGreyDown"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sort-item" @tap="toggleSort('view')">
|
||||
<text class="sort-text" :class="{ active: orderType === 3 || orderType === 4 }">浏览量</text>
|
||||
<view class="arrows">
|
||||
<image class="arrow-icon" :src="orderType === 3 ? iconPinkUp : iconGreyUp"></image>
|
||||
<image class="arrow-icon" :src="orderType === 4 ? iconPinkDown : iconGreyDown"></image>
|
||||
</view>
|
||||
<view class="official-author-block" v-if="authorInfo.show">
|
||||
<view class="author-left">
|
||||
<image class="author-avatar" :src="authorInfo.avatar" mode="aspectFill"></image>
|
||||
<view class="author-info">
|
||||
<text class="author-name">{{ authorInfo.name }}</text>
|
||||
<text class="author-desc">发布了{{ authorInfo.videoCount }}条技能</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="right-filter" @tap="toggleFilterPanel">
|
||||
<text class="filter-text">筛选</text>
|
||||
<image class="filter-icon" :src="filterIcon" :class="{ 'rotate': filterVisible }"></image>
|
||||
<view class="view-more-btn" v-if="!authorInfo.isOfficial" @click="goToBrandDetail">
|
||||
<text>查看更多</text>
|
||||
<view class="arrow-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-panel" :class="{ 'show': filterVisible }" catchtouchmove="true">
|
||||
<view class="filter-mask" @tap="closeFilterPanel"></view>
|
||||
<view class="filter-container">
|
||||
<text class="group-title">课程类型</text>
|
||||
<view class="course-filter">
|
||||
<view class="course-type-item" :class="{ active: linkType === '' }" @tap="selectAndApply('')">全部</view>
|
||||
<view class="course-type-item" :class="{ active: linkType === 1 }" @tap="selectAndApply(1)">平台课程</view>
|
||||
<view class="course-type-item" :class="{ active: linkType === 2 }" @tap="selectAndApply(2)">品牌课程</view>
|
||||
<view class="sort-bar-wrap">
|
||||
<view class="sort-bar">
|
||||
<view class="left-sorts">
|
||||
<view class="sort-item" @tap="toggleSort('time')">
|
||||
<text class="sort-text" :class="{ active: orderType === 1 || orderType === 2 }">发布时间</text>
|
||||
<view class="arrows">
|
||||
<image class="arrow-icon" :src="orderType === 1 ? iconPinkUp : iconGreyUp"></image>
|
||||
<image class="arrow-icon" :src="orderType === 2 ? iconPinkDown : iconGreyDown"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sort-item" @tap="toggleSort('view')">
|
||||
<text class="sort-text" :class="{ active: orderType === 3 || orderType === 4 }">浏览量</text>
|
||||
<view class="arrows">
|
||||
<image class="arrow-icon" :src="orderType === 3 ? iconPinkUp : iconGreyUp"></image>
|
||||
<image class="arrow-icon" :src="orderType === 4 ? iconPinkDown : iconGreyDown"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="right-filter" @tap="toggleFilterPanel">
|
||||
<text class="filter-text">筛选</text>
|
||||
<image class="filter-icon" :src="filterIcon" :class="{ 'rotate': filterVisible }"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-panel" :class="{ 'show': filterVisible }" catchtouchmove="true">
|
||||
<view class="filter-mask" @tap="closeFilterPanel"></view>
|
||||
<view class="filter-container">
|
||||
<text class="group-title">课程类型</text>
|
||||
<view class="course-filter">
|
||||
<view class="course-type-item" :class="{ active: linkType === '' }" @tap="selectAndApply('')">全部</view>
|
||||
<view class="course-type-item" :class="{ active: linkType === 1 }" @tap="selectAndApply(1)">平台课程</view>
|
||||
<view class="course-type-item" :class="{ active: linkType === 2 }" @tap="selectAndApply(2)">品牌课程</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -83,7 +93,6 @@ import request from "@/utils/request"
|
|||
import SkillCard from "@/pages/home/components/skill-card.vue"
|
||||
import noData from "@/components/noData/noData.vue";
|
||||
|
||||
// 数据模式开关：true=调用真实接口，false=使用模拟数据
|
||||
const USE_REAL_API = true
|
||||
|
||||
export default {
|
||||
|
|
@ -92,46 +101,64 @@ export default {
|
|||
return {
|
||||
navHeight: 0,
|
||||
|
||||
// 排序与筛选参数
|
||||
orderType: 0, // 1:时间降序, 2:时间升序, 3:浏览量降序, 4:浏览量升序 (默认0)
|
||||
linkType: '', // '':全部, 1:平台课程, 2:品牌课程
|
||||
orderType: 0,
|
||||
linkType: '',
|
||||
|
||||
// 【新增】：统一管理作者/官方/品牌信息
|
||||
authorInfo: {
|
||||
show: false, // 控制是否显示作者头部
|
||||
isOfficial: false, // 区分是官方还是普通品牌
|
||||
brandId: null, // 品牌ID
|
||||
name: '', // 作者/品牌名称
|
||||
avatar: '', // 头像
|
||||
videoCount: 0 // 视频数量
|
||||
},
|
||||
|
||||
filterVisible: false,
|
||||
|
||||
// 列表数据与分页
|
||||
skillList: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
isFinished: false,
|
||||
|
||||
// 排序图标资源
|
||||
iconGreyUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png',
|
||||
iconGreyDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dfffb601-6877-4608-a3eb-88695b05c6c2.png',
|
||||
iconPinkUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5bc84dff-e120-4d4b-a33e-25d68e065654.png',
|
||||
iconPinkDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ff2c2c9d-694a-4adf-b737-66b07f4a63ae.png',
|
||||
|
||||
// 模拟的本地全量数据（仅在 USE_REAL_API=false 时使用）
|
||||
mockDatabase: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filterIcon() {
|
||||
// 漏斗图标，默认灰色
|
||||
return 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 动态计算导航栏与下拉起点
|
||||
// 接收页面跳转传过来的作者参数
|
||||
onLoad(options) {
|
||||
if (options && options.showAuthor === '1') {
|
||||
this.authorInfo.show = true;
|
||||
this.authorInfo.isOfficial = options.isOfficial === '1';
|
||||
this.authorInfo.brandId = options.linkId || null;
|
||||
|
||||
// 用 decodeURIComponent 把转义的字符解析回正常的中文和链接
|
||||
this.authorInfo.name = options.authorName ? decodeURIComponent(options.authorName) : '未知作者';
|
||||
this.authorInfo.avatar = options.authorAvatar ? decodeURIComponent(options.authorAvatar) : 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bbe832bf-aae6-4579-b3cc-246d252488c3';
|
||||
this.authorInfo.videoCount = options.videoCount || 0;
|
||||
|
||||
// 强制设置筛选类型
|
||||
this.linkType = this.authorInfo.isOfficial ? 1 : 2;
|
||||
} else if (options && options.linkType !== undefined) {
|
||||
this.linkType = Number(options.linkType);
|
||||
}
|
||||
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
const sbh = sysInfo.statusBarHeight || 0
|
||||
this.navHeight = sbh
|
||||
// Navbar(44px) + SortBar(大概88rpx -> 44px) = 88px 左右
|
||||
this.filterTop = this.navHeight + uni.upx2px(106)
|
||||
|
||||
this.initMockData()
|
||||
this.fetchData(true)
|
||||
},
|
||||
// 触底加载更多
|
||||
onReachBottom() {
|
||||
if (!this.isFinished) {
|
||||
this.fetchData(false)
|
||||
|
|
@ -140,11 +167,22 @@ export default {
|
|||
methods: {
|
||||
goToSearch() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/search_common/search?type=skill' // 告诉搜索页，我要搜技能
|
||||
});
|
||||
url: '/pages/search_common/search?type=skill'
|
||||
});
|
||||
},
|
||||
|
||||
// 【新增】：跳转到品牌详情页面
|
||||
goToBrandDetail() {
|
||||
if (this.authorInfo.brandId) {
|
||||
// 注：请核对这里的路径是否与你项目中的品牌详情页路径一致
|
||||
uni.navigateTo({
|
||||
url: `/pages/brand/detail?id=${this.authorInfo.brandId}`
|
||||
});
|
||||
} else {
|
||||
uni.showToast({ title: '缺少品牌信息', icon: 'none' });
|
||||
}
|
||||
},
|
||||
|
||||
// 点击排序
|
||||
toggleSort(type) {
|
||||
if (type === 'time') {
|
||||
if (this.orderType === 1) this.orderType = 2
|
||||
|
|
@ -153,11 +191,9 @@ export default {
|
|||
if (this.orderType === 3) this.orderType = 4
|
||||
else this.orderType = 3
|
||||
}
|
||||
|
||||
this.fetchData(true)
|
||||
},
|
||||
|
||||
// 筛选面板控制
|
||||
toggleFilterPanel() {
|
||||
this.filterVisible = !this.filterVisible
|
||||
},
|
||||
|
|
@ -165,14 +201,14 @@ export default {
|
|||
this.filterVisible = false
|
||||
},
|
||||
|
||||
// 💡 匹配设计图交互：选择选项后立刻应用并收起下拉框
|
||||
selectAndApply(typeVal) {
|
||||
this.linkType = typeVal;
|
||||
// 当通过本地筛选器切换时，关闭“专属展示区”，确保纯净筛选
|
||||
this.authorInfo.show = false;
|
||||
this.closeFilterPanel();
|
||||
this.fetchData(true);
|
||||
},
|
||||
|
||||
// 获取列表数据 (统一入口)
|
||||
async fetchData(isReset = false) {
|
||||
if (isReset) {
|
||||
this.page = 1
|
||||
|
|
@ -183,26 +219,21 @@ export default {
|
|||
if (USE_REAL_API) {
|
||||
uni.showLoading({ title: '加载中...' })
|
||||
try {
|
||||
// 1. 初始化基础参数
|
||||
const params = {
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
}
|
||||
if (this.orderType !== 0) params.order_type = this.orderType;
|
||||
if (this.linkType !== '') params.link_type = this.linkType;
|
||||
|
||||
// 2. 仅当 orderType 不为 0 时，才将 order_type 传给后端，避免 500 报错
|
||||
if (this.orderType !== 0) {
|
||||
params.order_type = this.orderType
|
||||
}
|
||||
|
||||
// 3. 课程类型筛选
|
||||
if (this.linkType !== '') {
|
||||
params.link_type = this.linkType
|
||||
// 【核心接口预留】：如果当前在看某个品牌的专属页，需要传link_id给后端过滤
|
||||
if (this.authorInfo.show && !this.authorInfo.isOfficial && this.authorInfo.brandId) {
|
||||
params.link_id = this.authorInfo.brandId;
|
||||
}
|
||||
|
||||
const res = await request.post('/sj/skill/list', params)
|
||||
if ((res.code === 200 || res.state === 1) && res.data && res.data.list) {
|
||||
const list = res.data.list.map(item => this.formatApiData(item))
|
||||
|
||||
if (list.length < this.limit) this.isFinished = true
|
||||
this.skillList = isReset ? list : this.skillList.concat(list)
|
||||
this.page++
|
||||
|
|
@ -215,28 +246,29 @@ export default {
|
|||
uni.hideLoading()
|
||||
}
|
||||
} else {
|
||||
// ========== 模拟数据请求环境 ==========
|
||||
uni.showLoading({ title: '模拟加载中...' })
|
||||
setTimeout(() => {
|
||||
let list = [...this.mockDatabase]
|
||||
|
||||
// 1. 模拟筛选
|
||||
if (this.linkType !== '') {
|
||||
list = list.filter(item => item.link_type === this.linkType)
|
||||
}
|
||||
|
||||
// 2. 模拟排序 (仅当 orderType 不为 0 时才进行排序操作)
|
||||
// 模拟品牌过滤
|
||||
if (this.authorInfo.show && !this.authorInfo.isOfficial && this.authorInfo.brandId) {
|
||||
list = list.filter(item => item.brand_id == this.authorInfo.brandId)
|
||||
}
|
||||
|
||||
if (this.orderType !== 0) {
|
||||
list.sort((a, b) => {
|
||||
if (this.orderType === 1) return b.timestamp - a.timestamp // 时间降序
|
||||
if (this.orderType === 2) return a.timestamp - b.timestamp // 时间升序
|
||||
if (this.orderType === 3) return b.views - a.views // 浏览量降序
|
||||
if (this.orderType === 4) return a.views - b.views // 浏览量升序
|
||||
if (this.orderType === 1) return b.timestamp - a.timestamp
|
||||
if (this.orderType === 2) return a.timestamp - b.timestamp
|
||||
if (this.orderType === 3) return b.views - a.views
|
||||
if (this.orderType === 4) return a.views - b.views
|
||||
return 0
|
||||
})
|
||||
}
|
||||
|
||||
// 3. 模拟分页
|
||||
const start = (this.page - 1) * this.limit
|
||||
const end = start + this.limit
|
||||
const pageData = list.slice(start, end)
|
||||
|
|
@ -249,7 +281,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 格式化接口数据
|
||||
formatApiData(item) {
|
||||
return {
|
||||
id: item.id,
|
||||
|
|
@ -281,14 +312,13 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 初始化模拟数据
|
||||
initMockData() {
|
||||
this.mockDatabase = [
|
||||
{ id: 1, title: '穿戴甲的操作视频扫码验券操作教程', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 836000, time: '7小时前', timestamp: Date.now() - 7*3600000 },
|
||||
{ id: 2, title: '脸部按摩操作步骤详情', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, views: 8334, time: '1天前', timestamp: Date.now() - 24*3600000 },
|
||||
{ id: 2, title: '脸部按摩操作步骤详情', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, brand_id: 101, views: 8334, time: '1天前', timestamp: Date.now() - 24*3600000 },
|
||||
{ id: 3, title: '全身SPA的操作视频操作教程', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 2344, time: '3天前', timestamp: Date.now() - 3*24*3600000 },
|
||||
{ id: 4, title: '高级面部护理手法详解最新版', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 836, time: '4月26日', timestamp: Date.now() - 30*24*3600000 },
|
||||
{ id: 5, title: '光疗美甲进阶全方位解析', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, views: 12000, time: '2小时前', timestamp: Date.now() - 2*3600000 }
|
||||
{ id: 5, title: '光疗美甲进阶全方位解析', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, brand_id: 101, views: 12000, time: '2小时前', timestamp: Date.now() - 2*3600000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -301,48 +331,77 @@ export default {
|
|||
background: #fff;
|
||||
}
|
||||
|
||||
/* 官方作者展示块 */
|
||||
/* 统一吸顶容器 */
|
||||
.sticky-header-container {
|
||||
position: sticky;
|
||||
background: #fff;
|
||||
z-index: 101;
|
||||
/* 确保整体吸顶时下方有稍微一点阴影或边框分割更好看，可根据 UI 需求开启 */
|
||||
// border-bottom: 1rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
/* 官方/品牌 作者展示块样式 */
|
||||
.official-author-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 30rpx;
|
||||
background: #fff;
|
||||
border-bottom: 10rpx solid #F5F5F5;
|
||||
|
||||
.author-avatar {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
// border: 2rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.author-info {
|
||||
.author-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.author-name {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 4rpx;
|
||||
.author-avatar {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.author-desc {
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
line-height: 28rpx;
|
||||
.author-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.author-name {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.author-desc {
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-more-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
|
||||
.arrow-right {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-top: 2rpx solid #666666;
|
||||
border-right: 2rpx solid #666666;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sort-bar-wrap {
|
||||
position: sticky;
|
||||
/* 移除单独的 sticky，由外层 container 统一控制 */
|
||||
background: #fff;
|
||||
z-index: 101;
|
||||
// border-bottom: 1rpx solid #F5F5F5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sort-bar {
|
||||
|
|
@ -412,10 +471,9 @@ export default {
|
|||
padding: 30rpx 24rpx;
|
||||
}
|
||||
|
||||
/* 抽屉筛选面板：使用 absolute 脱离计算 */
|
||||
.filter-panel {
|
||||
position: absolute;
|
||||
top: 100%; /* 从 sort-bar-wrap 底部开始向下延伸 */
|
||||
top: 100%;
|
||||
left: 0; right: 0;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
|
|
@ -444,7 +502,6 @@ export default {
|
|||
padding: 30rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,722 @@
|
|||
<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;
|
||||
this.loadMockRecommend();
|
||||
} 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>
|
||||
Loading…
Reference in New Issue