wk450097098
/
mrr.sj.front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

技能推荐

This commit is contained in:
丁杰 2026-06-03 11:40:40 +08:00
parent 14e47ccf0e
commit c54fb1f2a9
1 changed files with 129 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
pages/jingxuan/skill-detail.vue
View File

@ -1,75 +1,55 @@
<template> <template>
<view class="skill-detail-page"> <view class="skill-detail-page">
<custom-navbar <custom-navbar title="技能集市" backgroundColor="#ffffff" titleColor="#333" borderBottom="none">
title="技能集市"
backgroundColor="#ffffff"
titleColor="#333"
borderBottom="none">
</custom-navbar> </custom-navbar>
<!-- <view class="mock-switch" @click="toggleMockData"> <!-- <view class="mock-switch" @click="toggleMockData">
<text>{{ useMockData ? '关闭模拟数据' : '开启模拟数据' }}</text> <text>{{ useMockData ? '关闭模拟数据' : '开启模拟数据' }}</text>
</view> --> </view> -->
<view class="video-section" v-if="article.videoSrc"> <view class="video-section" v-if="article.videoSrc">
<view class="video-wrapper"> <view class="video-wrapper">
<video <video v-if="!tipShow" id="customVideo" class="main-video" :src="article.videoSrc" :poster="article.poster"
v-if="!tipShow" :controls="showNativeControls" :show-center-play-btn="false" :muted="isMuted" object-fit="cover"
id="customVideo" @timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetaData" @ended="onEnded" @play="onPlay" @pause="onPause"
class="main-video" @fullscreenchange="onFullScreenChange">
:src="article.videoSrc" <cover-image v-if="!isPlaying && !showNativeControls" class="center-play-icon"
:poster="article.poster" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bb720bb0-4ada-49f6-9ce5-38abfd613d5d.png"
:controls="showNativeControls" @click.stop="togglePlay"></cover-image>
: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-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-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-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="iconPause" @click.stop="togglePlay"></cover-image>
<cover-image v-if="!isPlaying" class="ctrl-icon" :src="iconPlay" @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="time-text">{{ formatTime(currentTime) }}</cover-view>
<cover-view class="slider-track"> <cover-view class="slider-track">
<cover-view class="slider-bg"></cover-view> <cover-view class="slider-bg"></cover-view>
<cover-view class="slider-active" :style="activeStyle"></cover-view> <cover-view class="slider-active" :style="activeStyle"></cover-view>
<cover-view class="slider-thumb" :style="thumbStyle"></cover-view> <cover-view class="slider-thumb" :style="thumbStyle"></cover-view>
</cover-view> </cover-view>
<cover-view class="time-text">{{ formatTime(duration) }}</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="iconSoundOn"
<cover-image v-if="isMuted" class="ctrl-icon mute-icon" :src="iconMute" @click.stop="toggleMute"></cover-image> @click.stop="toggleMute"></cover-image>
<cover-image v-if="isMuted" class="ctrl-icon mute-icon" :src="iconMute"
<cover-image class="ctrl-icon fullscreen-icon" :src="iconFullscreen" @click.stop="toggleFullScreen"></cover-image> @click.stop="toggleMute"></cover-image>
<cover-image class="ctrl-icon fullscreen-icon" :src="iconFullscreen"
@click.stop="toggleFullScreen"></cover-image>
</cover-view> </cover-view>
</cover-view> </cover-view>
</video> </video>
<image <image v-else class="main-video fallback-poster" :src="article.poster || article.videoSrc" mode="aspectFill">
v-else </image>
class="main-video fallback-poster"
:src="article.poster || article.videoSrc"
mode="aspectFill"
></image>
</view> </view>
</view> </view>
@ -81,12 +61,9 @@
<text class="author-name">{{ article.authorName }}</text> <text class="author-name">{{ article.authorName }}</text>
<text class="date">{{ article.date }}</text> <text class="date">{{ article.date }}</text>
</view> </view>
<view class="favorite-btn" @click="toggleFavorite"> <view class="favorite-btn" @click="toggleFavorite">
<image <image class="star-icon" :src="isFavorite ? filledStarUrl : emptyStarUrl" />
class="star-icon"
:src="isFavorite ? filledStarUrl : emptyStarUrl"
/>
<text :class="{ 'active-fav': isFavorite }">{{ isFavorite ? '已收藏' : '收藏' }}</text> <text :class="{ 'active-fav': isFavorite }">{{ isFavorite ? '已收藏' : '收藏' }}</text>
</view> </view>
</view> </view>
@ -105,17 +82,15 @@
<view class="section-header"> <view class="section-header">
<text class="section-title">相关推荐</text> <text class="section-title">相关推荐</text>
<view class="refresh-btn" @click="refreshList"> <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> <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> <text>换一批</text>
</view> </view>
</view> </view>
<view class="list-container"> <view class="list-container">
<skill-card <skill-card v-for="(item, index) in recommendList" :key="index" :item="item"></skill-card>
v-for="(item, index) in recommendList"
:key="index"
:item="item"
></skill-card>
</view> </view>
</view> </view>
@ -129,7 +104,7 @@
<script> <script>
import request from "@/utils/request"; import request from "@/utils/request";
import SkillCard from "@/pages/home/components/skill-card.vue"; import SkillCard from "@/pages/home/components/skill-card.vue";
import tipsPopup2 from "@/components/tips-popup/tips-popup2"; import tipsPopup2 from "@/components/tips-popup/tips-popup2";
export default { export default {
components: { components: {
@ -139,7 +114,7 @@ export default {
data() { data() {
return { return {
useMockData: false, useMockData: false,
articleId: null, articleId: null,
isFavorite: false, isFavorite: false,
emptyStarUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/53378402-5456-4a80-b2ec-7c18d43d970e.png', emptyStarUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/53378402-5456-4a80-b2ec-7c18d43d970e.png',
@ -154,19 +129,19 @@ export default {
videoContext: null, videoContext: null,
isPlaying: false, isPlaying: false,
isMuted: false, isMuted: false,
showNativeControls: false, showNativeControls: false,
currentTime: 0, currentTime: 0,
duration: 0, duration: 0,
sliderValue: 0, sliderValue: 0,
iconPlay: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/88ca4fe3-645c-48a9-abda-1f9b45714970.png', 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', 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', 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', 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', iconFullscreen: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4286ef33-6849-4851-8866-4230d2523a33.png',
article: {}, article: {},
recommendList: [] recommendList: []
} }
@ -190,7 +165,7 @@ export default {
if (options && options.id) { if (options && options.id) {
this.articleId = parseInt(options.id, 10); this.articleId = parseInt(options.id, 10);
} else { } else {
this.articleId = 1; this.articleId = 1;
} }
this.getPageData(); this.getPageData();
}, },
@ -207,7 +182,7 @@ export default {
const count = this.article.authorVideoCount || 0; const count = this.article.authorVideoCount || 0;
uni.navigateTo({ uni.navigateTo({
url: `/pages/jingxuan/selected-skills?showAuthor=1&isOfficial=${isOfficial}&linkId=${linkId}&authorName=${name}&authorAvatar=${avatar}&videoCount=${count}` url: `/pages/jingxuan/selected-skills?showAuthor=1&isOfficial=${isOfficial}&linkId=${linkId}&authorName=${name}&authorAvatar=${avatar}&videoCount=${count}`
}); });
}, },
@ -224,10 +199,10 @@ export default {
okBtn() { okBtn() {
if (this.tipType == "login") { if (this.tipType == "login") {
uni.navigateTo({ uni.navigateTo({
url: "/pages/blogPopup/blogPopup", url: "/pages/blogPopup/blogPopup",
}); });
} }
this.tipShow = false; this.tipShow = false;
}, },
formatTime(sec) { formatTime(sec) {
@ -260,7 +235,7 @@ export default {
}, },
onPlay() { this.isPlaying = true; }, onPlay() { this.isPlaying = true; },
onPause() { this.isPlaying = false; }, onPause() { this.isPlaying = false; },
onFullScreenChange(e) { onFullScreenChange(e) {
const isFull = e.detail.fullScreen; const isFull = e.detail.fullScreen;
if (!isFull) { if (!isFull) {
@ -269,7 +244,7 @@ export default {
this.showNativeControls = true; this.showNativeControls = true;
} }
}, },
togglePlay() { togglePlay() {
const ctx = this.getVideoContext(); const ctx = this.getVideoContext();
if (!ctx) return; if (!ctx) return;
@ -282,7 +257,7 @@ export default {
toggleMute() { toggleMute() {
this.isMuted = !this.isMuted; this.isMuted = !this.isMuted;
}, },
toggleFullScreen() { toggleFullScreen() {
const ctx = this.getVideoContext(); const ctx = this.getVideoContext();
if (!ctx) return; if (!ctx) return;
@ -304,27 +279,38 @@ export default {
return; return;
} }
uni.showLoading({ title: '加载中...' }); uni.showLoading({ title: '加载中...' });
request.post("/sj/skill/details", { request.post("/sj/skill/details", {
id: this.articleId id: this.articleId
}).then((res) => { }).then((res) => {
if (res.code == 200 && res.data) { if (res.code == 200 && res.data) {
const data = res.data; const data = res.data;
this.article = { this.article = {
title: data.name || '暂无标题', title: data.name || '暂无标题',
// 【预留接口字段解析】：这里需要后端配合返回以下字段，如果没有的话目前会使用默认值 // 【预留接口字段解析】：这里需要后端配合返回以下字段，如果没有的话目前会使用默认值
linkType: data.link_type || 1, // 1=官方 2=品牌 linkType: data.link_type || 1, // 1=官方 2=品牌
linkId: data.link_id || 0, linkId: data.link_id || 0,
authorName: data.author_name || '美融融平台', authorName: data.author_name || '美融融平台',
authorAvatar: data.author_avatar || 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bbe832bf-aae6-4579-b3cc-246d252488c3', authorAvatar: data.author_avatar || 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bbe832bf-aae6-4579-b3cc-246d252488c3',
authorVideoCount: data.link_publish_num || 0, // 关联者发布数 authorVideoCount: data.link_publish_num || 0, // 关联者发布数
date: data.create_time ? data.create_time.substring(0, 10).replace(/-/g, '.') : '', date: data.create_time ? data.create_time.substring(0, 10).replace(/-/g, '.') : '',
videoSrc: data.video || '', videoSrc: data.video || '',
poster: data.cover_img || '', poster: data.cover_img || '',
htmlContent: data.detail || '' htmlContent: data.detail || ''
}; };
this.isFavorite = data.collect_state === 1; this.isFavorite = data.collect_state === 1;
this.loadMockRecommend(); request.post("/sj/skill/list", {
page: 1,
limit: 10,
link_type: data.link_type,
link_id: data.link_id
}).then((listRes) => {
if (listRes.code == 200 && listRes.data && listRes.data.list) {
this.recommendList = listRes.data.list;
}
}).catch((err) => {
console.error('获取推荐列表异常', err);
});
} else { } else {
uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' }); uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' });
} }
@ -337,13 +323,13 @@ export default {
toggleFavorite() { toggleFavorite() {
if (!this.isLogin) { if (!this.isLogin) {
if(this.isPlaying) { if (this.isPlaying) {
this.getVideoContext().pause(); this.getVideoContext().pause();
} }
this.tipsText = "您现在还未登录，是否确定前往登录？"; this.tipsText = "您现在还未登录，是否确定前往登录？";
this.tipShow = true; this.tipShow = true;
this.tipType = "login"; this.tipType = "login";
return; return;
} }
if (this.useMockData) { if (this.useMockData) {
@ -351,15 +337,15 @@ export default {
uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' }); uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
return; return;
} }
uni.showLoading({ title: '处理中' }); uni.showLoading({ title: '处理中' });
const targetState = this.isFavorite ? 2 : 1; const targetState = this.isFavorite ? 2 : 1;
request.post("/sj/skill/collect", { request.post("/sj/skill/collect", {
id: this.articleId, id: this.articleId,
state: targetState state: targetState
}).then(res => { }).then(res => {
if(res.code == 200) { if (res.code == 200) {
this.isFavorite = !this.isFavorite; this.isFavorite = !this.isFavorite;
uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' }); uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
} else { } else {
@ -371,9 +357,9 @@ export default {
uni.hideLoading(); uni.hideLoading();
}); });
}, },
refreshList() { refreshList() {
if(this.isRefreshing) return; if (this.isRefreshing) return;
this.isRefreshing = true; this.isRefreshing = true;
uni.showLoading({ title: '加载中' }); uni.showLoading({ title: '加载中' });
setTimeout(() => { setTimeout(() => {
@ -387,10 +373,10 @@ export default {
this.isFavorite = false; this.isFavorite = false;
this.article = { this.article = {
title: '穿戴甲的操作视频扫码验券操作', title: '穿戴甲的操作视频扫码验券操作',
// Mock作者相关数据(测试品牌跳转，将linkType改为2) // Mock作者相关数据(测试品牌跳转，将linkType改为2)
linkType: 2, linkType: 2,
linkId: 101, linkId: 101,
authorName: '蜜丝卡伦官方品牌', authorName: '蜜丝卡伦官方品牌',
authorAvatar: 'https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80', authorAvatar: 'https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80',
authorVideoCount: 658, authorVideoCount: 658,
@ -457,12 +443,12 @@ export default {
.video-section { .video-section {
width: 100%; width: 100%;
height: 420rpx; height: 420rpx;
.video-wrapper { .video-wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
.main-video { .main-video {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -490,7 +476,7 @@ export default {
width: 100%; width: 100%;
height: 70rpx; height: 70rpx;
z-index: 99; z-index: 99;
.bar-bg { .bar-bg {
position: absolute; position: absolute;
top: 0; top: 0;
@ -499,43 +485,45 @@ export default {
height: 70rpx; height: 70rpx;
z-index: 100; z-index: 100;
} }
.bar-content { .bar-content {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 70rpx; height: 70rpx;
z-index: 101; z-index: 101;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 0 10rpx; padding: 0 10rpx;
box-sizing: border-box; box-sizing: border-box;
.ctrl-icon { .ctrl-icon {
width: 25rpx; width: 25rpx;
height: 30rpx; height: 30rpx;
margin: 0 10rpx; margin: 0 10rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.mute-icon { .mute-icon {
width: 38rpx; width: 38rpx;
height: 30rpx; height: 30rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.fullscreen-icon { .fullscreen-icon {
width: 30rpx; width: 30rpx;
height: 30rpx; height: 30rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.time-text { .time-text {
font-size: 22rpx; font-size: 22rpx;
color: #ffffff; color: #ffffff;
line-height: 70rpx; line-height: 70rpx;
} }
.slider-track { .slider-track {
flex: 1; flex: 1;
height: 70rpx; height: 70rpx;
@ -544,16 +532,16 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
.slider-bg { .slider-bg {
position: absolute; position: absolute;
top: 33rpx; top: 33rpx;
left: 0; left: 0;
width: 100%; width: 100%;
height: 4rpx; height: 4rpx;
background-color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.4);
} }
.slider-active { .slider-active {
position: absolute; position: absolute;
top: 33rpx; top: 33rpx;
@ -561,11 +549,11 @@ export default {
height: 4rpx; height: 4rpx;
background-color: #FF4767; background-color: #FF4767;
} }
.slider-thumb { .slider-thumb {
position: absolute; position: absolute;
top: 25rpx; top: 25rpx;
margin-left: -10rpx; margin-left: -10rpx;
width: 20rpx; width: 20rpx;
height: 20rpx; height: 20rpx;
border-radius: 50%; border-radius: 50%;
@ -579,7 +567,7 @@ export default {
.article-header { .article-header {
padding: 30rpx 30rpx 20rpx; padding: 30rpx 30rpx 20rpx;
.title { .title {
font-weight: 500; font-weight: 500;
font-size: 32rpx; font-size: 32rpx;
@ -587,23 +575,23 @@ export default {
line-height: 45rpx; line-height: 45rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
} }
.meta-row { .meta-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.author-info { .author-info {
display: flex; display: flex;
align-items: center; align-items: center;
.avatar { .avatar {
width: 28rpx; width: 28rpx;
height: 28rpx; height: 28rpx;
border-radius: 50%; border-radius: 50%;
margin-right: 12rpx; margin-right: 12rpx;
} }
.author-name { .author-name {
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
@ -611,7 +599,7 @@ export default {
line-height: 33rpx; line-height: 33rpx;
margin-right: 16rpx; margin-right: 16rpx;
} }
.date { .date {
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
@ -619,25 +607,25 @@ export default {
line-height: 33rpx; line-height: 33rpx;
} }
} }
.favorite-btn { .favorite-btn {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
color: #999999; color: #999999;
line-height: 33rpx; line-height: 33rpx;
.star-icon { .star-icon {
width: 26rpx; width: 26rpx;
height: 26rpx; height: 26rpx;
margin-right: 6rpx; margin-right: 6rpx;
margin-top: -2rpx; margin-top: -2rpx;
} }
.active-fav { .active-fav {
color: #FD5A8C ; color: #FD5A8C;
} }
} }
} }
} }
@ -649,11 +637,12 @@ export default {
font-size: 28rpx; font-size: 28rpx;
color: #2A2A2A; color: #2A2A2A;
line-height: 40rpx; line-height: 40rpx;
::v-deep p { ::v-deep p {
margin-bottom: 24rpx; margin-bottom: 24rpx;
line-height: 40rpx; line-height: 40rpx;
} }
::v-deep img { ::v-deep img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
@ -669,14 +658,14 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 50rpx 0 80rpx; padding: 50rpx 0 80rpx;
.empty-icon { .empty-icon {
width: 140rpx; width: 140rpx;
height: 140rpx; height: 140rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
opacity: 0.8; opacity: 0.8;
} }
.empty-text { .empty-text {
font-size: 26rpx; font-size: 26rpx;
color: #A9A9A9; color: #A9A9A9;
@ -686,32 +675,32 @@ export default {
.recommend-section { .recommend-section {
padding: 0 30rpx; padding: 0 30rpx;
.section-header { .section-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 30rpx; margin-bottom: 30rpx;
.section-title { .section-title {
font-weight: 500; font-weight: 500;
font-size: 30rpx; font-size: 30rpx;
color: #333333; color: #333333;
line-height: 42rpx; line-height: 42rpx;
} }
.refresh-btn { .refresh-btn {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 26rpx; font-size: 26rpx;
color: #999999; color: #999999;
.refresh-icon { .refresh-icon {
width: 24rpx; width: 24rpx;
height: 28rpx; height: 28rpx;
margin-right: 8rpx; margin-right: 8rpx;
transition: transform 0.5s ease; transition: transform 0.5s ease;
&.is-rotating { &.is-rotating {
transform: rotate(360deg); transform: rotate(360deg);
} }