a
This commit is contained in:
Ubuntu
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 状态栏占位 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="content">
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state">
|
||||
<view class="empty-icon" :style="{ color: '#FF4081' }">👤</view>
|
||||
<text class="empty-title">我的页面</text>
|
||||
<text class="empty-desc">Material Design风格的我的页面开发中</text>
|
||||
|
||||
<!-- 功能预览 -->
|
||||
<view class="feature-preview">
|
||||
<view class="feature-card elevation-1" @click="previewFeature(0)">
|
||||
<view class="feature-icon">🔐</view>
|
||||
<text class="feature-title">登录注册</text>
|
||||
<text class="feature-desc">用户认证和个人中心</text>
|
||||
</view>
|
||||
<view class="feature-card elevation-1" @click="previewFeature(1)">
|
||||
<view class="feature-icon">⭐</view>
|
||||
<text class="feature-title">我的收藏</text>
|
||||
<text class="feature-desc">收藏的文章和项目</text>
|
||||
</view>
|
||||
<view class="feature-card elevation-1" @click="previewFeature(2)">
|
||||
<view class="feature-icon">⚙️</view>
|
||||
<text class="feature-title">设置</text>
|
||||
<text class="feature-desc">应用设置和个性化</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 开发进度 -->
|
||||
<view class="progress-section">
|
||||
<text class="progress-title">开发进度</text>
|
||||
<view class="progress-bar">
|
||||
<view class="progress-fill" :style="{ width: '20%' }"></view>
|
||||
</view>
|
||||
<text class="progress-text">20% - 设计阶段</text>
|
||||
</view>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view class="btn btn-outline" @click="goBack">
|
||||
<text class="btn-text">返回首页</text>
|
||||
</view>
|
||||
<view class="btn btn-primary" @click="checkUpdate" :style="{ background: '#FF4081' }">
|
||||
<text class="btn-text">了解更多</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
features: [{'icon': '🔐', 'title': '登录注册', 'desc': '用户认证和个人中心'}, {'icon': '⭐', 'title': '我的收藏', 'desc': '收藏的文章和项目'}, {'icon': '⚙️', 'title': '设置', 'desc': '应用设置和个性化'}]
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
console.log('我的页面加载')
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 返回首页
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
|
||||
// 检查更新
|
||||
checkUpdate() {
|
||||
uni.showToast({
|
||||
title: '功能开发中，敬请期待',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
|
||||
// 预览功能
|
||||
previewFeature(index) {
|
||||
const feature = this.features[index]
|
||||
uni.showModal({
|
||||
title: feature.title,
|
||||
content: feature.desc,
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: var(--status-bar-height);
|
||||
background: #6200EE;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80px;
|
||||
margin-bottom: 24px;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 16px;
|
||||
color: #757575;
|
||||
margin-bottom: 40px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feature-preview {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:active {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 16px;
|
||||
color: #FF4081;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: #E0E0E0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #FF4081;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #6200EE;
|
||||
border: 2px solid #6200EE;
|
||||
}
|
||||
|
||||
.btn-outline:active {
|
||||
background: rgba(98, 0, 238, 0.08);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.page-container {
|
||||
background: #121212;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
color: #B0B0B0;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: #1E1E1E;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
color: #B0B0B0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
border-color: #BB86FC;
|
||||
color: #BB86FC;
|
||||
}
|
||||
|
||||
.btn-outline:active {
|
||||
background: rgba(187, 134, 252, 0.08);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view class="official-page">
|
||||
<!-- 状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 标题栏 -->
|
||||
<view class="title-bar">
|
||||
<text class="title">公众号</text>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="content">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-container">
|
||||
<view class="search-icon">🔍</view>
|
||||
<input class="search-input" placeholder="搜索公众号..." />
|
||||
</view>
|
||||
|
||||
<!-- 公众号列表 -->
|
||||
<view class="official-list">
|
||||
<view class="official-card" v-for="item in officialList" :key="item.id">
|
||||
<image class="official-avatar" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="official-info">
|
||||
<text class="official-name">{{ item.name }}</text>
|
||||
<text class="official-desc">{{ item.description }}</text>
|
||||
<view class="official-stats">
|
||||
<text class="stat-item">📰 {{ item.articleCount }}篇文章</text>
|
||||
<text class="stat-item">👥 {{ item.followerCount }}关注</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="follow-btn" :class="{ followed: item.followed }">
|
||||
{{ item.followed ? '已关注' : '关注' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view class="load-more" v-if="hasMore">
|
||||
<text>加载更多...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-if="officialList.length === 0">
|
||||
<view class="empty-icon">📱</view>
|
||||
<text class="empty-text">暂无公众号数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
officialList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '鸿洋',
|
||||
avatar: 'https://via.placeholder.com/60/6200EE/ffffff?text=H',
|
||||
description: '玩Android创始人，分享Android开发技术',
|
||||
articleCount: 128,
|
||||
followerCount: 12500,
|
||||
followed: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '郭霖',
|
||||
avatar: 'https://via.placeholder.com/60/03DAC6/ffffff?text=G',
|
||||
description: 'Android开发专家，《第一行代码》作者',
|
||||
articleCount: 96,
|
||||
followerCount: 9800,
|
||||
followed: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '扔物线',
|
||||
avatar: 'https://via.placeholder.com/60/FF9800/ffffff?text=R',
|
||||
description: 'HenCoder系列教程作者，UI绘制专家',
|
||||
articleCount: 72,
|
||||
followerCount: 8500,
|
||||
followed: true
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '代码家',
|
||||
avatar: 'https://via.placeholder.com/60/4CAF50/ffffff?text=D',
|
||||
description: '开源项目维护者，技术布道师',
|
||||
articleCount: 64,
|
||||
followerCount: 7200,
|
||||
followed: false
|
||||
}
|
||||
],
|
||||
hasMore: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
// 模拟加载更多数据
|
||||
setTimeout(() => {
|
||||
this.officialList = this.officialList.concat([
|
||||
{
|
||||
id: 5,
|
||||
name: '技术小黑屋',
|
||||
avatar: 'https://via.placeholder.com/60/9C27B0/ffffff?text=J',
|
||||
description: '分享Android性能优化经验',
|
||||
articleCount: 48,
|
||||
followerCount: 5600,
|
||||
followed: false
|
||||
}
|
||||
])
|
||||
this.hasMore = false
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
console.log('公众号页面加载')
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.loadMore()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.official-page {
|
||||
background: #F5F5F5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 40px;
|
||||
background: #6200EE;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
background: #6200EE;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
color: #6200EE;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.official-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.official-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.official-card:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.official-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.official-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.official-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.official-desc {
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.official-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
background: #6200EE;
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.follow-btn.followed {
|
||||
background: #E0E0E0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
margin-bottom: 16px;
|
||||
color: #6200EE;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #757575;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 状态栏占位 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="content">
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state">
|
||||
<view class="empty-icon">📦</view>
|
||||
<text class="empty-title">项目页面</text>
|
||||
<text class="empty-desc">Material Design风格的项目页面开发中</text>
|
||||
|
||||
<!-- 功能预览 -->
|
||||
<view class="feature-preview">
|
||||
<view class="feature-card elevation-1">
|
||||
<view class="feature-icon">🔍</view>
|
||||
<text class="feature-title">项目分类</text>
|
||||
<text class="feature-desc">按技术栈分类浏览开源项目</text>
|
||||
</view>
|
||||
|
||||
<view class="feature-card elevation-1">
|
||||
<view class="feature-icon">⭐</view>
|
||||
<text class="feature-title">热门项目</text>
|
||||
<text class="feature-desc">发现最受欢迎的开源项目</text>
|
||||
</view>
|
||||
|
||||
<view class="feature-card elevation-1">
|
||||
<view class="feature-icon">🔄</view>
|
||||
<text class="feature-title">最新项目</text>
|
||||
<text class="feature-desc">获取最新的开源项目更新</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 开发进度 -->
|
||||
<view class="progress-section">
|
||||
<text class="progress-title">开发进度</text>
|
||||
<view class="progress-bar">
|
||||
<view class="progress-fill" :style="{ width: '30%' }"></view>
|
||||
</view>
|
||||
<text class="progress-text">30% - 基础框架完成</text>
|
||||
</view>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view class="btn btn-outline" @click="goBack">
|
||||
<text class="btn-text">返回首页</text>
|
||||
</view>
|
||||
<view class="btn btn-primary" @click="checkUpdate">
|
||||
<text class="btn-text">检查更新</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
features: [
|
||||
{ icon: '🔍', title: '项目分类', desc: '按技术栈分类浏览开源项目' },
|
||||
{ icon: '⭐', title: '热门项目', desc: '发现最受欢迎的开源项目' },
|
||||
{ icon: '🔄', title: '最新项目', desc: '获取最新的开源项目更新' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
console.log('项目页面加载')
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 返回首页
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
|
||||
// 检查更新
|
||||
checkUpdate() {
|
||||
uni.showToast({
|
||||
title: '已是最新版本',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
|
||||
// 预览功能
|
||||
previewFeature(index) {
|
||||
const feature = this.features[index]
|
||||
uni.showModal({
|
||||
title: feature.title,
|
||||
content: feature.desc,
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: var(--status-bar-height);
|
||||
background: #6200EE;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80px;
|
||||
color: #6200EE;
|
||||
margin-bottom: 24px;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 16px;
|
||||
color: #757575;
|
||||
margin-bottom: 40px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feature-preview {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:active {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 16px;
|
||||
color: #6200EE;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: #E0E0E0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #6200EE;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #6200EE;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
background: #3700B3;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #6200EE;
|
||||
border: 2px solid #6200EE;
|
||||
}
|
||||
|
||||
.btn-outline:active {
|
||||
background: rgba(98, 0, 238, 0.08);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.page-container {
|
||||
background: #121212;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
color: #B0B0B0;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: #1E1E1E;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
color: #B0B0B0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
border-color: #BB86FC;
|
||||
color: #BB86FC;
|
||||
}
|
||||
|
||||
.btn-outline:active {
|
||||
background: rgba(187, 134, 252, 0.08);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<view class="system-page">
|
||||
<!-- 状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 标题栏 -->
|
||||
<view class="title-bar">
|
||||
<text class="title">知识体系</text>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="content">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-container">
|
||||
<view class="search-icon">🔍</view>
|
||||
<input class="search-input" placeholder="搜索技术分类..." />
|
||||
</view>
|
||||
|
||||
<!-- 体系分类 -->
|
||||
<view class="system-categories">
|
||||
<view class="category-card" v-for="category in categories" :key="category.id">
|
||||
<view class="category-header">
|
||||
<text class="category-name">{{ category.name }}</text>
|
||||
<text class="category-count">{{ category.count }}个分类</text>
|
||||
</view>
|
||||
|
||||
<view class="subcategory-list">
|
||||
<view class="subcategory-item" v-for="sub in category.children" :key="sub.id">
|
||||
<text class="subcategory-name">{{ sub.name }}</text>
|
||||
<text class="subcategory-article-count">{{ sub.articleCount }}篇文章</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="expand-btn" @click="toggleCategory(category.id)">
|
||||
{{ category.expanded ? '收起' : '展开全部' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-if="categories.length === 0">
|
||||
<view class="empty-icon">🌳</view>
|
||||
<text class="empty-text">暂无分类数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
categories: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Android',
|
||||
count: 8,
|
||||
expanded: true,
|
||||
children: [
|
||||
{ id: 101, name: '基础组件', articleCount: 256 },
|
||||
{ id: 102, name: '自定义View', articleCount: 128 },
|
||||
{ id: 103, name: '动画', articleCount: 96 },
|
||||
{ id: 104, name: '性能优化', articleCount: 72 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Java',
|
||||
count: 6,
|
||||
expanded: false,
|
||||
children: [
|
||||
{ id: 201, name: '基础语法', articleCount: 180 },
|
||||
{ id: 202, name: '集合框架', articleCount: 64 },
|
||||
{ id: 203, name: '多线程', articleCount: 48 },
|
||||
{ id: 204, name: 'JVM', articleCount: 32 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Kotlin',
|
||||
count: 5,
|
||||
expanded: false,
|
||||
children: [
|
||||
{ id: 301, name: '基础语法', articleCount: 120 },
|
||||
{ id: 302, name: '协程', articleCount: 56 },
|
||||
{ id: 303, name: 'DSL', articleCount: 24 },
|
||||
{ id: 304, name: '与Java互操作', articleCount: 18 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '前端',
|
||||
count: 7,
|
||||
expanded: false,
|
||||
children: [
|
||||
{ id: 401, name: 'JavaScript', articleCount: 96 },
|
||||
{ id: 402, name: 'Vue.js', articleCount: 64 },
|
||||
{ id: 403, name: 'React', articleCount: 48 },
|
||||
{ id: 404, name: 'CSS', articleCount: 32 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '后端',
|
||||
count: 6,
|
||||
expanded: false,
|
||||
children: [
|
||||
{ id: 501, name: 'Spring Boot', articleCount: 84 },
|
||||
{ id: 502, name: '数据库', articleCount: 72 },
|
||||
{ id: 503, name: '微服务', articleCount: 36 },
|
||||
{ id: 504, name: '分布式', articleCount: 24 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleCategory(categoryId) {
|
||||
const category = this.categories.find(c => c.id === categoryId)
|
||||
if (category) {
|
||||
category.expanded = !category.expanded
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
console.log('知识体系页面加载')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.system-page {
|
||||
background: #F5F5F5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 40px;
|
||||
background: #6200EE;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
background: #6200EE;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
color: #6200EE;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.system-categories {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.category-count {
|
||||
font-size: 14px;
|
||||
color: #6200EE;
|
||||
background: rgba(98, 0, 238, 0.1);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.subcategory-list {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.subcategory-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #F8F8F8;
|
||||
}
|
||||
|
||||
.subcategory-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.subcategory-name {
|
||||
font-size: 16px;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.subcategory-article-count {
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
text-align: center;
|
||||
color: #6200EE;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background: rgba(98, 0, 238, 0.05);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.expand-btn:active {
|
||||
background: rgba(98, 0, 238, 0.1);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
margin-bottom: 16px;
|
||||
color: #6200EE;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #757575;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 状态栏占位 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="content">
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state">
|
||||
<view class="empty-icon" :style="{ color: '#FF9800' }">🌳</view>
|
||||
<text class="empty-title">体系页面</text>
|
||||
<text class="empty-desc">Material Design风格的体系页面开发中</text>
|
||||
|
||||
<!-- 功能预览 -->
|
||||
<view class="feature-preview">
|
||||
<view class="feature-card elevation-1" @click="previewFeature(0)">
|
||||
<view class="feature-icon">📚</view>
|
||||
<text class="feature-title">知识体系</text>
|
||||
<text class="feature-desc">完整的技术知识结构</text>
|
||||
</view>
|
||||
<view class="feature-card elevation-1" @click="previewFeature(1)">
|
||||
<view class="feature-icon">🔗</view>
|
||||
<text class="feature-title">分类导航</text>
|
||||
<text class="feature-desc">按技术领域分类浏览</text>
|
||||
</view>
|
||||
<view class="feature-card elevation-1" @click="previewFeature(2)">
|
||||
<view class="feature-icon">🎯</view>
|
||||
<text class="feature-title">学习路径</text>
|
||||
<text class="feature-desc">系统化的学习路线图</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 开发进度 -->
|
||||
<view class="progress-section">
|
||||
<text class="progress-title">开发进度</text>
|
||||
<view class="progress-bar">
|
||||
<view class="progress-fill" :style="{ width: '20%' }"></view>
|
||||
</view>
|
||||
<text class="progress-text">20% - 设计阶段</text>
|
||||
</view>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view class="btn btn-outline" @click="goBack">
|
||||
<text class="btn-text">返回首页</text>
|
||||
</view>
|
||||
<view class="btn btn-primary" @click="checkUpdate" :style="{ background: '#FF9800' }">
|
||||
<text class="btn-text">了解更多</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
features: [{'icon': '📚', 'title': '知识体系', 'desc': '完整的技术知识结构'}, {'icon': '🔗', 'title': '分类导航', 'desc': '按技术领域分类浏览'}, {'icon': '🎯', 'title': '学习路径', 'desc': '系统化的学习路线图'}]
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
console.log('体系页面加载')
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 返回首页
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
|
||||
// 检查更新
|
||||
checkUpdate() {
|
||||
uni.showToast({
|
||||
title: '功能开发中，敬请期待',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
|
||||
// 预览功能
|
||||
previewFeature(index) {
|
||||
const feature = this.features[index]
|
||||
uni.showModal({
|
||||
title: feature.title,
|
||||
content: feature.desc,
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: var(--status-bar-height);
|
||||
background: #6200EE;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80px;
|
||||
margin-bottom: 24px;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 16px;
|
||||
color: #757575;
|
||||
margin-bottom: 40px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feature-preview {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:active {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 16px;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: #E0E0E0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #FF9800;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #6200EE;
|
||||
border: 2px solid #6200EE;
|
||||
}
|
||||
|
||||
.btn-outline:active {
|
||||
background: rgba(98, 0, 238, 0.08);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.page-container {
|
||||
background: #121212;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
color: #B0B0B0;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: #1E1E1E;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
color: #B0B0B0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
border-color: #BB86FC;
|
||||
color: #BB86FC;
|
||||
}
|
||||
|
||||
.btn-outline:active {
|
||||
background: rgba(187, 134, 252, 0.08);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 状态栏占位 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="content">
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state">
|
||||
<view class="empty-icon" :style="{ color: '#03DAC6' }">📱</view>
|
||||
<text class="empty-title">公众号页面</text>
|
||||
<text class="empty-desc">Material Design风格的公众号页面开发中</text>
|
||||
|
||||
<!-- 功能预览 -->
|
||||
<view class="feature-preview">
|
||||
<view class="feature-card elevation-1" @click="previewFeature(0)">
|
||||
<view class="feature-icon">📰</view>
|
||||
<text class="feature-title">公众号列表</text>
|
||||
<text class="feature-desc">订阅优质技术公众号</text>
|
||||
</view>
|
||||
<view class="feature-card elevation-1" @click="previewFeature(1)">
|
||||
<view class="feature-icon">🔍</view>
|
||||
<text class="feature-title">文章搜索</text>
|
||||
<text class="feature-desc">搜索公众号历史文章</text>
|
||||
</view>
|
||||
<view class="feature-card elevation-1" @click="previewFeature(2)">
|
||||
<view class="feature-icon">⭐</view>
|
||||
<text class="feature-title">热门文章</text>
|
||||
<text class="feature-desc">发现最受欢迎的技术文章</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 开发进度 -->
|
||||
<view class="progress-section">
|
||||
<text class="progress-title">开发进度</text>
|
||||
<view class="progress-bar">
|
||||
<view class="progress-fill" :style="{ width: '20%' }"></view>
|
||||
</view>
|
||||
<text class="progress-text">20% - 设计阶段</text>
|
||||
</view>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view class="btn btn-outline" @click="goBack">
|
||||
<text class="btn-text">返回首页</text>
|
||||
</view>
|
||||
<view class="btn btn-primary" @click="checkUpdate" :style="{ background: '#03DAC6' }">
|
||||
<text class="btn-text">了解更多</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
features: [{'icon': '📰', 'title': '公众号列表', 'desc': '订阅优质技术公众号'}, {'icon': '🔍', 'title': '文章搜索', 'desc': '搜索公众号历史文章'}, {'icon': '⭐', 'title': '热门文章', 'desc': '发现最受欢迎的技术文章'}]
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
console.log('公众号页面加载')
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 返回首页
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
|
||||
// 检查更新
|
||||
checkUpdate() {
|
||||
uni.showToast({
|
||||
title: '功能开发中，敬请期待',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
|
||||
// 预览功能
|
||||
previewFeature(index) {
|
||||
const feature = this.features[index]
|
||||
uni.showModal({
|
||||
title: feature.title,
|
||||
content: feature.desc,
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: var(--status-bar-height);
|
||||
background: #6200EE;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80px;
|
||||
margin-bottom: 24px;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 16px;
|
||||
color: #757575;
|
||||
margin-bottom: 40px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feature-preview {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:active {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 16px;
|
||||
color: #03DAC6;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
margin-bottom: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: #E0E0E0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #03DAC6;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #6200EE;
|
||||
border: 2px solid #6200EE;
|
||||
}
|
||||
|
||||
.btn-outline:active {
|
||||
background: rgba(98, 0, 238, 0.08);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.page-container {
|
||||
background: #121212;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
color: #B0B0B0;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: #1E1E1E;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
color: #B0B0B0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
border-color: #BB86FC;
|
||||
color: #BB86FC;
|
||||
}
|
||||
|
||||
.btn-outline:active {
|
||||
background: rgba(187, 134, 252, 0.08);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user