1059 lines
24 KiB
Vue
1059 lines
24 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- AI生成内容标识 -->
|
||
<view class="ai-notice">
|
||
<text class="ai-notice-icon">🤖</text>
|
||
<text class="ai-notice-text">作品由AI生成，结果仅供参考</text>
|
||
</view>
|
||
|
||
<!-- 页面头部 -->
|
||
<view class="header">
|
||
<text class="subtitle">管理你的AI数字资产</text>
|
||
</view>
|
||
|
||
<!-- 资产统计 -->
|
||
<view class="stats-section">
|
||
<view class="stats-card">
|
||
<text class="stats-number">{{totalAssets}}</text>
|
||
<text class="stats-label">总资产数</text>
|
||
</view>
|
||
<view class="stats-card">
|
||
<text class="stats-number">{{activeAssets}}</text>
|
||
<text class="stats-label">活跃资产</text>
|
||
</view>
|
||
<view class="stats-card">
|
||
<text class="stats-number">{{totalViews}}</text>
|
||
<text class="stats-label">总播放量</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 资产分类 -->
|
||
<view class="category-section">
|
||
<view class="category-tabs">
|
||
<view class="tab" :class="{active: currentTab === 'all'}" @tap="switchTab('all')">
|
||
全部
|
||
</view>
|
||
<view class="tab" :class="{active: currentTab === 'video'}" @tap="switchTab('video')">
|
||
装修实拍
|
||
</view>
|
||
<view class="tab" :class="{active: currentTab === 'image'}" @tap="switchTab('image')">
|
||
翻新前后
|
||
</view>
|
||
<view class="tab" :class="{active: currentTab === 'text'}" @tap="switchTab('text')">
|
||
设计案例
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 资产列表 -->
|
||
<view class="assets-list">
|
||
<!-- 加载状态 -->
|
||
<transition name="fade" mode="out-in">
|
||
<view class="loading-state" v-if="loading && assetList.length === 0" key="loading">
|
||
<!-- 主加载动画 -->
|
||
<view class="loading-container">
|
||
<view class="loading-spinner">
|
||
<view class="spinner-ring"></view>
|
||
<view class="spinner-ring"></view>
|
||
<view class="spinner-ring"></view>
|
||
</view>
|
||
<text class="loading-text">{{ loadingText }}</text>
|
||
<text class="loading-subtitle">{{ loadingSubtitle }}</text>
|
||
</view>
|
||
|
||
<!-- 骨架屏 -->
|
||
<view class="skeleton-container" v-if="showSkeleton">
|
||
<view class="skeleton-item" v-for="n in 3" :key="n">
|
||
<view class="skeleton-cover"></view>
|
||
<view class="skeleton-content">
|
||
<view class="skeleton-title"></view>
|
||
<view class="skeleton-desc"></view>
|
||
<view class="skeleton-meta">
|
||
<view class="skeleton-meta-item"></view>
|
||
<view class="skeleton-meta-item"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 超时提示 -->
|
||
<view class="timeout-state" v-else-if="showTimeout" key="timeout">
|
||
<view class="timeout-icon">⚠️</view>
|
||
<text class="timeout-text">加载时间较长</text>
|
||
<text class="timeout-desc">请检查网络连接或稍后重试</text>
|
||
<button class="retry-btn" @tap="retryLoad">重新加载</button>
|
||
</view>
|
||
</transition>
|
||
|
||
<view class="asset-item" v-for="item in assetList" :key="item.id" @tap="onAssetTap(item)">
|
||
<view class="asset-cover">
|
||
<image :src="item.coverUrl" mode="aspectFill" class="cover-image" lazy-load="true"></image>
|
||
<view class="asset-type">{{item.type}}</view>
|
||
<view class="asset-status" :class="'status-' + item.status">{{item.statusText}}</view>
|
||
</view>
|
||
<view class="asset-info">
|
||
<text class="asset-title">{{item.title}}</text>
|
||
<text class="asset-desc">{{item.description}}</text>
|
||
<view class="asset-meta">
|
||
<text class="meta-item">{{item.createTime}}</text>
|
||
<text class="meta-item">{{item.viewCount}}次播放</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载更多状态 -->
|
||
<view class="load-more" v-if="assetList.length > 0">
|
||
<text class="load-more-text" v-if="loading">加载中...</text>
|
||
<text class="load-more-text" v-else-if="!hasMore">没有更多了</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" v-if="assetList.length === 0 && !loading">
|
||
<image src="/static/images/empty-assets.png" class="empty-image"></image>
|
||
<text class="empty-text">暂无数字资产</text>
|
||
<text class="empty-desc">开始创建你的第一个AI数字分身吧</text>
|
||
<button class="create-btn" @tap="onCreate">立即创建</button>
|
||
</view>
|
||
|
||
<!-- 浮动创建按钮 -->
|
||
<view class="fab" @tap="onCreate">
|
||
<image src="/static/images/add.png" class="fab-icon"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import api from '@/api/models-api.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 统计数据
|
||
totalAssets: 0,
|
||
activeAssets: 0,
|
||
totalViews: '0',
|
||
|
||
// 当前选中的标签
|
||
currentTab: 'all',
|
||
|
||
// 资产列表
|
||
assetList: [],
|
||
|
||
// 原始完整列表（用于筛选）
|
||
fullAssetList: [],
|
||
|
||
// 分页参数
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
hasMore: true,
|
||
loading: false,
|
||
|
||
// 加载状态优化
|
||
loadingText: '加载中...',
|
||
loadingSubtitle: '正在获取您的数字资产',
|
||
showSkeleton: false,
|
||
showTimeout: false,
|
||
loadingTimer: null,
|
||
timeoutTimer: null
|
||
}
|
||
},
|
||
onLoad() {
|
||
console.log('数字资产页面加载')
|
||
this.loadArticleList()
|
||
},
|
||
onShow() {
|
||
// 页面显示时刷新数据
|
||
this.refreshData()
|
||
},
|
||
methods: {
|
||
// 加载文章列表
|
||
async loadArticleList(page = 1, isRefresh = false) {
|
||
if (this.loading) return
|
||
|
||
this.loading = true
|
||
this.showTimeout = false
|
||
|
||
// 设置加载文本动画
|
||
this.startLoadingAnimation()
|
||
|
||
// 延迟显示骨架屏
|
||
setTimeout(() => {
|
||
if (this.loading) {
|
||
this.showSkeleton = true
|
||
}
|
||
}, 800)
|
||
|
||
// 设置超时检测
|
||
this.timeoutTimer = setTimeout(() => {
|
||
if (this.loading) {
|
||
this.showTimeout = true
|
||
this.showSkeleton = false
|
||
}
|
||
}, 10000) // 10秒超时
|
||
|
||
try {
|
||
const response = await api.getArticleList({
|
||
page: page,
|
||
size: this.pageSize
|
||
})
|
||
|
||
if (response.code === 200 && response.data) {
|
||
const articles = response.data.records || []
|
||
|
||
// 转换文章数据为资产数据格式
|
||
const assetList = articles.map(article => ({
|
||
id: article.id,
|
||
title: article.title || '未命名作品',
|
||
description: article.prompt || article.synopsis || article.content || '暂无描述',
|
||
type: this.getAssetType(article),
|
||
coverUrl: article.imageInput || '/static/images/placeholder.png',
|
||
createTime: this.formatDate(article.createTime),
|
||
viewCount: parseInt(article.visit) || 0,
|
||
status: this.getAssetStatus(article.statusTask),
|
||
statusText: this.getStatusText(article.statusTask),
|
||
videoUrl: article.videoUrl,
|
||
taskId: article.taskId,
|
||
prompt: article.prompt,
|
||
aspectRatio: article.aspectRatio
|
||
}))
|
||
|
||
if (isRefresh || page === 1) {
|
||
// 刷新或首次加载
|
||
this.assetList = assetList
|
||
this.fullAssetList = assetList
|
||
this.currentPage = 1
|
||
this.hasMore = assetList.length >= this.pageSize
|
||
} else {
|
||
// 加载更多
|
||
this.assetList = [...this.assetList, ...assetList]
|
||
this.fullAssetList = [...this.fullAssetList, ...assetList]
|
||
this.hasMore = assetList.length >= this.pageSize
|
||
}
|
||
|
||
// 更新统计数据
|
||
this.updateStats()
|
||
}
|
||
} catch (error) {
|
||
console.error('加载文章列表失败:', error)
|
||
|
||
// 网络错误处理
|
||
if (!navigator.onLine) {
|
||
this.loadingText = '网络连接失败'
|
||
this.loadingSubtitle = '请检查网络设置后重试'
|
||
} else {
|
||
this.loadingText = '加载失败'
|
||
this.loadingSubtitle = '服务器暂时无法访问'
|
||
}
|
||
|
||
uni.showToast({
|
||
title: '加载失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
this.stopLoadingAnimation()
|
||
this.loading = false
|
||
this.showSkeleton = false
|
||
this.showTimeout = false
|
||
|
||
// 清除定时器
|
||
if (this.timeoutTimer) {
|
||
clearTimeout(this.timeoutTimer)
|
||
this.timeoutTimer = null
|
||
}
|
||
}
|
||
},
|
||
|
||
// 开始加载动画
|
||
startLoadingAnimation() {
|
||
const texts = [
|
||
{ main: '加载中...', sub: '正在获取您的数字资产' },
|
||
{ main: '努力加载中...', sub: '马上就好了' },
|
||
{ main: '即将完成...', sub: '感谢您的耐心等待' }
|
||
]
|
||
|
||
let index = 0
|
||
this.loadingTimer = setInterval(() => {
|
||
if (this.loading && !this.showTimeout) {
|
||
const text = texts[index % texts.length]
|
||
this.loadingText = text.main
|
||
this.loadingSubtitle = text.sub
|
||
index++
|
||
}
|
||
}, 2000)
|
||
},
|
||
|
||
// 停止加载动画
|
||
stopLoadingAnimation() {
|
||
if (this.loadingTimer) {
|
||
clearInterval(this.loadingTimer)
|
||
this.loadingTimer = null
|
||
}
|
||
|
||
// 重置加载文本
|
||
this.loadingText = '加载中...'
|
||
this.loadingSubtitle = '正在获取您的数字资产'
|
||
},
|
||
|
||
// 重试加载
|
||
retryLoad() {
|
||
this.showTimeout = false
|
||
this.loadArticleList(1, true)
|
||
},
|
||
|
||
// 获取资产类型
|
||
getAssetType(article) {
|
||
if (article.videoUrl) {
|
||
return '视频'
|
||
} else if (article.imageInput) {
|
||
return '图片'
|
||
} else {
|
||
return '文本'
|
||
}
|
||
},
|
||
|
||
// 获取资产状态
|
||
getAssetStatus(statusTask) {
|
||
switch (statusTask) {
|
||
case 0:
|
||
return 'pending'
|
||
case 1:
|
||
return 'processing'
|
||
case 2:
|
||
return 'active'
|
||
case 3:
|
||
return 'failed'
|
||
default:
|
||
return 'unknown'
|
||
}
|
||
},
|
||
|
||
// 获取状态文本
|
||
getStatusText(statusTask) {
|
||
switch (statusTask) {
|
||
case 0:
|
||
return '等待中'
|
||
case 1:
|
||
return '已完成'
|
||
case 2:
|
||
return '已完成'
|
||
case 3:
|
||
return '失败'
|
||
default:
|
||
return '未知'
|
||
}
|
||
},
|
||
|
||
// 格式化日期
|
||
formatDate(dateString) {
|
||
if (!dateString) return ''
|
||
const date = new Date(dateString)
|
||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
|
||
},
|
||
|
||
// 更新统计数据
|
||
updateStats() {
|
||
const totalAssets = this.fullAssetList.length
|
||
const activeAssets = this.fullAssetList.filter(item => item.status === 'active').length
|
||
const totalViews = this.fullAssetList.reduce((sum, item) => sum + item.viewCount, 0)
|
||
|
||
this.totalAssets = totalAssets
|
||
this.activeAssets = activeAssets
|
||
this.totalViews = totalViews > 1000 ? `${(totalViews / 1000).toFixed(1)}k` : totalViews.toString()
|
||
},
|
||
|
||
// 刷新数据
|
||
refreshData() {
|
||
this.loadArticleList(1, true)
|
||
},
|
||
|
||
// 切换标签
|
||
switchTab(tab) {
|
||
this.currentTab = tab
|
||
this.filterAssets(tab)
|
||
},
|
||
|
||
// 筛选资产
|
||
filterAssets(tab) {
|
||
let filteredList = this.fullAssetList
|
||
|
||
if (tab !== 'all') {
|
||
const typeMap = {
|
||
'video': '视频',
|
||
'image': '图片',
|
||
'text': '文本'
|
||
}
|
||
filteredList = this.fullAssetList.filter(item =>
|
||
item.type === typeMap[tab]
|
||
)
|
||
}
|
||
|
||
this.assetList = filteredList
|
||
},
|
||
|
||
// 点击资产项
|
||
onAssetTap(asset) {
|
||
console.log('查看资产详情:', asset)
|
||
|
||
// 根据资产类型跳转到不同页面
|
||
if (asset.type === '视频') {
|
||
uni.navigateTo({
|
||
url: `/pages/ai-generate/video?id=${asset.id}`
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: `查看${asset.title}`,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 创建新资产
|
||
onCreate() {
|
||
uni.showActionSheet({
|
||
itemList: ['一键创作', '上传模板'],
|
||
success: (res) => {
|
||
const actions = ['一键创作', '上传模板']
|
||
uni.showToast({
|
||
title: `已选择：${actions[res.tapIndex]}`,
|
||
icon: 'none'
|
||
})
|
||
|
||
// 根据选择跳转到不同的创建页面
|
||
if (res.tapIndex === 0) {
|
||
// 跳转到一键创作页面
|
||
uni.navigateTo({
|
||
url: '/pages/ai-generate/oneclick'
|
||
})
|
||
} else if (res.tapIndex === 1) {
|
||
// 保留原逻辑：跳转到视频创作页面
|
||
uni.switchTab({
|
||
url: '/pages/create/create'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.refreshData()
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh()
|
||
}, 1000)
|
||
},
|
||
|
||
// 上拉加载更多
|
||
onReachBottom() {
|
||
if (!this.hasMore || this.loading) {
|
||
return
|
||
}
|
||
|
||
console.log('加载更多资产')
|
||
const nextPage = this.currentPage + 1
|
||
this.currentPage = nextPage
|
||
this.loadArticleList(nextPage, false)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.container {
|
||
padding: 20rpx;
|
||
background: linear-gradient(135deg, #149e20 0%, #06430e 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* AI生成内容标识 */
|
||
.ai-notice {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
padding: 16rpx 32rpx;
|
||
margin: 20rpx 0;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 2rpx solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 24rpx;
|
||
backdrop-filter: blur(10rpx);
|
||
}
|
||
|
||
.ai-notice-icon {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.ai-notice-text {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 操作按钮与浮动按钮统一主色 */
|
||
.create-btn {
|
||
background: linear-gradient(45deg, #42ca4d, #2aa53a);
|
||
color: #ffffff;
|
||
border: none;
|
||
border-radius: 50rpx;
|
||
padding: 24rpx 48rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.fab {
|
||
position: fixed;
|
||
right: 40rpx;
|
||
bottom: 120rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background: linear-gradient(45deg, #42ca4d, #2aa53a);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(66, 202, 77, 0.4);
|
||
z-index: 999;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background: rgba(66, 202, 77, 0.1);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.action-btn:active {
|
||
background: rgba(66, 202, 77, 0.2);
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
/* 页面头部 */
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 20rpx; margin-top: 34px;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.title {
|
||
display: block;
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.subtitle {
|
||
display: block;
|
||
font-size: 34rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
/* 资产统计 */
|
||
.stats-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.stats-card {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx 20rpx;
|
||
text-align: center;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.stats-number {
|
||
display: block;
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.stats-label {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
/* 分类标签 */
|
||
.category-section {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.category-tabs {
|
||
display: flex;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 25rpx;
|
||
padding: 8rpx;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
border-radius: 20rpx;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab.active {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 资产列表 */
|
||
.assets-list {
|
||
margin-bottom: 120rpx;
|
||
}
|
||
|
||
.asset-item {
|
||
display: flex;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
padding: 20rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.2s ease;
|
||
min-height: 220rpx;
|
||
}
|
||
|
||
.asset-item:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.asset-cover {
|
||
position: relative;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.cover-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 15rpx;
|
||
}
|
||
|
||
.asset-type {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
right: 8rpx;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
padding: 4rpx 8rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.asset-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.asset-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 8rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 400rpx;
|
||
max-height: 44rpx;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
.asset-desc {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
margin-bottom: 12rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
white-space: normal;
|
||
max-width: 400rpx;
|
||
max-height: 68rpx;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
.asset-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.meta-item {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
.asset-status {
|
||
font-size: 20rpx;
|
||
}
|
||
.status-active {
|
||
color: #52c41a;
|
||
}
|
||
|
||
.status-processing {
|
||
color: #1890ff;
|
||
}
|
||
|
||
.status-failed {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.asset-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background: rgba(103, 126, 234, 0.1);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.action-btn:active {
|
||
background: rgba(103, 126, 234, 0.2);
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
.action-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
/* 加载状态优化 */
|
||
.loading-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 400rpx;
|
||
text-align: center;
|
||
padding: 60rpx 40rpx;
|
||
}
|
||
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
/* 加载动画 */
|
||
.loading-spinner {
|
||
position: relative;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.spinner-ring {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 4rpx solid transparent;
|
||
border-radius: 50%;
|
||
animation: spin 2s linear infinite;
|
||
}
|
||
|
||
.spinner-ring:nth-child(1) {
|
||
border-top-color: #42ca4d;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.spinner-ring:nth-child(2) {
|
||
border-right-color: #2aa53a;
|
||
animation-delay: 0.3s;
|
||
width: 80%;
|
||
height: 80%;
|
||
top: 10%;
|
||
left: 10%;
|
||
}
|
||
|
||
.spinner-ring:nth-child(3) {
|
||
border-bottom-color: #1e7e34;
|
||
animation-delay: 0.6s;
|
||
width: 60%;
|
||
height: 60%;
|
||
top: 20%;
|
||
left: 20%;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
margin-bottom: 16rpx;
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
.loading-subtitle {
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-weight: normal;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.6; }
|
||
}
|
||
|
||
/* Vue过渡动画 */
|
||
.fade-enter-active, .fade-leave-active {
|
||
transition: all 0.5s ease;
|
||
}
|
||
|
||
.fade-enter-from, .fade-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(20rpx);
|
||
}
|
||
|
||
/* 骨架屏 */
|
||
.skeleton-container {
|
||
width: 100%;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.skeleton-item {
|
||
display: flex;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
padding: 20rpx;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.skeleton-cover {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
|
||
background-size: 200% 100%;
|
||
border-radius: 15rpx;
|
||
margin-right: 20rpx;
|
||
animation: shimmer 1.5s infinite;
|
||
}
|
||
|
||
.skeleton-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.skeleton-title {
|
||
height: 44rpx;
|
||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
|
||
background-size: 200% 100%;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
animation: shimmer 1.5s infinite;
|
||
animation-delay: 0.1s;
|
||
}
|
||
|
||
.skeleton-desc {
|
||
height: 68rpx;
|
||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
|
||
background-size: 200% 100%;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
animation: shimmer 1.5s infinite;
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
.skeleton-meta {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.skeleton-meta-item {
|
||
height: 32rpx;
|
||
width: 120rpx;
|
||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
|
||
background-size: 200% 100%;
|
||
border-radius: 6rpx;
|
||
animation: shimmer 1.5s infinite;
|
||
animation-delay: 0.3s;
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { background-position: -200% 0; }
|
||
100% { background-position: 200% 0; }
|
||
}
|
||
|
||
/* 超时状态 */
|
||
.timeout-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 80rpx 40rpx;
|
||
}
|
||
|
||
.timeout-icon {
|
||
font-size: 80rpx;
|
||
margin-bottom: 30rpx;
|
||
animation: bounce 2s infinite;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||
40% { transform: translateY(-10rpx); }
|
||
60% { transform: translateY(-5rpx); }
|
||
}
|
||
|
||
.timeout-text {
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.timeout-desc {
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: 40rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.retry-btn {
|
||
background: linear-gradient(45deg, #42ca4d, #2aa53a);
|
||
color: #ffffff;
|
||
border: none;
|
||
border-radius: 50rpx;
|
||
padding: 24rpx 48rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
box-shadow: 0 8rpx 24rpx rgba(66, 202, 77, 0.3);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.retry-btn:active {
|
||
transform: translateY(2rpx);
|
||
box-shadow: 0 4rpx 12rpx rgba(66, 202, 77, 0.3);
|
||
}
|
||
|
||
/* 响应式优化 */
|
||
@media screen and (max-width: 750rpx) {
|
||
.loading-spinner {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.skeleton-item {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.skeleton-cover {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
margin-right: 0;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
/* 无障碍访问优化 */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.spinner-ring,
|
||
.loading-text,
|
||
.skeleton-cover,
|
||
.skeleton-title,
|
||
.skeleton-desc,
|
||
.skeleton-meta-item,
|
||
.timeout-icon {
|
||
animation: none;
|
||
}
|
||
|
||
.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 100rpx 40rpx;
|
||
}
|
||
|
||
.empty-image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.empty-text {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
margin-bottom: 16rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.empty-desc {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.create-btn {
|
||
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
|
||
color: #ffffff;
|
||
border: none;
|
||
border-radius: 50rpx;
|
||
padding: 24rpx 48rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 浮动按钮 */
|
||
.fab {
|
||
position: fixed;
|
||
right: 40rpx;
|
||
bottom: 120rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.4);
|
||
z-index: 999;
|
||
}
|
||
|
||
.fab-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
</style> |