技能推荐
This commit is contained in:
parent
14e47ccf0e
commit
c54fb1f2a9
|
|
@ -1,75 +1,55 @@
|
|||
<template>
|
||||
<view class="skill-detail-page">
|
||||
|
||||
<custom-navbar
|
||||
title="技能集市"
|
||||
backgroundColor="#ffffff"
|
||||
titleColor="#333"
|
||||
borderBottom="none">
|
||||
|
||||
<custom-navbar title="技能集市" backgroundColor="#ffffff" titleColor="#333" borderBottom="none">
|
||||
</custom-navbar>
|
||||
|
||||
<!-- <view class="mock-switch" @click="toggleMockData">
|
||||
<!-- <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>
|
||||
|
||||
<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-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-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>
|
||||
|
||||
<image v-else class="main-video fallback-poster" :src="article.poster || article.videoSrc" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -81,12 +61,9 @@
|
|||
<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"
|
||||
/>
|
||||
<image class="star-icon" :src="isFavorite ? filledStarUrl : emptyStarUrl" />
|
||||
<text :class="{ 'active-fav': isFavorite }">{{ isFavorite ? '已收藏' : '收藏' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -105,17 +82,15 @@
|
|||
<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>
|
||||
<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>
|
||||
<skill-card v-for="(item, index) in recommendList" :key="index" :item="item"></skill-card>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -129,7 +104,7 @@
|
|||
<script>
|
||||
import request from "@/utils/request";
|
||||
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 {
|
||||
components: {
|
||||
|
|
@ -139,7 +114,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
useMockData: false,
|
||||
|
||||
|
||||
articleId: null,
|
||||
isFavorite: false,
|
||||
emptyStarUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/53378402-5456-4a80-b2ec-7c18d43d970e.png',
|
||||
|
|
@ -154,19 +129,19 @@ export default {
|
|||
videoContext: null,
|
||||
isPlaying: false,
|
||||
isMuted: false,
|
||||
|
||||
showNativeControls: 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',
|
||||
|
||||
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: []
|
||||
}
|
||||
|
|
@ -190,7 +165,7 @@ export default {
|
|||
if (options && options.id) {
|
||||
this.articleId = parseInt(options.id, 10);
|
||||
} else {
|
||||
this.articleId = 1;
|
||||
this.articleId = 1;
|
||||
}
|
||||
this.getPageData();
|
||||
},
|
||||
|
|
@ -207,7 +182,7 @@ export default {
|
|||
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}`
|
||||
url: `/pages/jingxuan/selected-skills?showAuthor=1&isOfficial=${isOfficial}&linkId=${linkId}&authorName=${name}&authorAvatar=${avatar}&videoCount=${count}`
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -224,10 +199,10 @@ export default {
|
|||
okBtn() {
|
||||
if (this.tipType == "login") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/blogPopup/blogPopup",
|
||||
url: "/pages/blogPopup/blogPopup",
|
||||
});
|
||||
}
|
||||
this.tipShow = false;
|
||||
this.tipShow = false;
|
||||
},
|
||||
|
||||
formatTime(sec) {
|
||||
|
|
@ -260,7 +235,7 @@ export default {
|
|||
},
|
||||
onPlay() { this.isPlaying = true; },
|
||||
onPause() { this.isPlaying = false; },
|
||||
|
||||
|
||||
onFullScreenChange(e) {
|
||||
const isFull = e.detail.fullScreen;
|
||||
if (!isFull) {
|
||||
|
|
@ -269,7 +244,7 @@ export default {
|
|||
this.showNativeControls = true;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
togglePlay() {
|
||||
const ctx = this.getVideoContext();
|
||||
if (!ctx) return;
|
||||
|
|
@ -282,7 +257,7 @@ export default {
|
|||
toggleMute() {
|
||||
this.isMuted = !this.isMuted;
|
||||
},
|
||||
|
||||
|
||||
toggleFullScreen() {
|
||||
const ctx = this.getVideoContext();
|
||||
if (!ctx) return;
|
||||
|
|
@ -304,27 +279,38 @@ export default {
|
|||
return;
|
||||
}
|
||||
uni.showLoading({ title: '加载中...' });
|
||||
request.post("/sj/skill/details", {
|
||||
id: this.articleId
|
||||
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 || '暂无标题',
|
||||
title: data.name || '暂无标题',
|
||||
// 【预留接口字段解析】：这里需要后端配合返回以下字段，如果没有的话目前会使用默认值
|
||||
linkType: data.link_type || 1, // 1=官方 2=品牌
|
||||
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',
|
||||
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 || '',
|
||||
poster: data.cover_img || '',
|
||||
htmlContent: data.detail || ''
|
||||
};
|
||||
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 {
|
||||
uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' });
|
||||
}
|
||||
|
|
@ -337,13 +323,13 @@ export default {
|
|||
|
||||
toggleFavorite() {
|
||||
if (!this.isLogin) {
|
||||
if(this.isPlaying) {
|
||||
if (this.isPlaying) {
|
||||
this.getVideoContext().pause();
|
||||
}
|
||||
this.tipsText = "您现在还未登录，是否确定前往登录？";
|
||||
this.tipShow = true;
|
||||
this.tipType = "login";
|
||||
return;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.useMockData) {
|
||||
|
|
@ -351,15 +337,15 @@ export default {
|
|||
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
|
||||
|
||||
request.post("/sj/skill/collect", {
|
||||
id: this.articleId,
|
||||
state: targetState
|
||||
}).then(res => {
|
||||
if(res.code == 200) {
|
||||
if (res.code == 200) {
|
||||
this.isFavorite = !this.isFavorite;
|
||||
uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
|
||||
} else {
|
||||
|
|
@ -371,9 +357,9 @@ export default {
|
|||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
refreshList() {
|
||||
if(this.isRefreshing) return;
|
||||
if (this.isRefreshing) return;
|
||||
this.isRefreshing = true;
|
||||
uni.showLoading({ title: '加载中' });
|
||||
setTimeout(() => {
|
||||
|
|
@ -387,10 +373,10 @@ export default {
|
|||
this.isFavorite = false;
|
||||
this.article = {
|
||||
title: '穿戴甲的操作视频扫码验券操作',
|
||||
|
||||
|
||||
// Mock作者相关数据(测试品牌跳转，将linkType改为2)
|
||||
linkType: 2,
|
||||
linkId: 101,
|
||||
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,
|
||||
|
|
@ -457,12 +443,12 @@ export default {
|
|||
.video-section {
|
||||
width: 100%;
|
||||
height: 420rpx;
|
||||
|
||||
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
.main-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -490,7 +476,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 70rpx;
|
||||
z-index: 99;
|
||||
|
||||
|
||||
.bar-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -499,43 +485,45 @@ export default {
|
|||
height: 70rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
.bar-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
z-index: 101;
|
||||
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;
|
||||
|
|
@ -544,16 +532,16 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
.slider-bg {
|
||||
position: absolute;
|
||||
top: 33rpx;
|
||||
top: 33rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4rpx;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
|
||||
.slider-active {
|
||||
position: absolute;
|
||||
top: 33rpx;
|
||||
|
|
@ -561,11 +549,11 @@ export default {
|
|||
height: 4rpx;
|
||||
background-color: #FF4767;
|
||||
}
|
||||
|
||||
|
||||
.slider-thumb {
|
||||
position: absolute;
|
||||
top: 25rpx;
|
||||
margin-left: -10rpx;
|
||||
top: 25rpx;
|
||||
margin-left: -10rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
|
|
@ -579,7 +567,7 @@ export default {
|
|||
|
||||
.article-header {
|
||||
padding: 30rpx 30rpx 20rpx;
|
||||
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
|
|
@ -587,23 +575,23 @@ export default {
|
|||
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;
|
||||
|
|
@ -611,7 +599,7 @@ export default {
|
|||
line-height: 33rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
|
||||
.date {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
|
|
@ -619,25 +607,25 @@ export default {
|
|||
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 ;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -649,11 +637,12 @@ export default {
|
|||
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;
|
||||
|
|
@ -669,14 +658,14 @@ export default {
|
|||
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;
|
||||
|
|
@ -686,32 +675,32 @@ export default {
|
|||
|
||||
.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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue