1
This commit is contained in:
ChuXun
283
pages/index/index.js
Normal file
283
pages/index/index.js
Normal file
@@ -0,0 +1,283 @@
|
||||
// pages/index/index.js
|
||||
|
||||
const app = getApp()
|
||||
const userManager = require('../../utils/userManager.js')
|
||||
const learningTracker = require('../../utils/learningTracker.js')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
userInfo: null,
|
||||
features: [
|
||||
{
|
||||
id: 1,
|
||||
name: '启思AI',
|
||||
icon: '🤖',
|
||||
desc: '启迪思维，智慧学习助手',
|
||||
path: '/pages/ai-assistant/ai-assistant',
|
||||
color: '#6C5CE7',
|
||||
badge: 'AI',
|
||||
badgeColor: '#A29BFE'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '学习数据',
|
||||
icon: '📊',
|
||||
desc: '可视化数据分析看板',
|
||||
path: '/pages/dashboard/dashboard',
|
||||
color: '#667eea',
|
||||
badge: 'NEW',
|
||||
badgeColor: '#4CAF50'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '课程中心',
|
||||
icon: '📚',
|
||||
desc: '海量课程资源，精准筛选',
|
||||
path: '/pages/courses/courses',
|
||||
color: '#4A90E2',
|
||||
badge: 'HOT',
|
||||
badgeColor: '#FF5252'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '学科论坛',
|
||||
icon: '💬',
|
||||
desc: '学术交流，思维碰撞',
|
||||
path: '/pages/forum/forum',
|
||||
color: '#50C878'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '学习工具',
|
||||
icon: '🛠️',
|
||||
desc: 'GPA计算、课表、倒计时',
|
||||
path: '/pages/tools/tools',
|
||||
color: '#9B59B6'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '个人中心',
|
||||
icon: '👤',
|
||||
desc: '个性设置，数据管理',
|
||||
path: '/pages/my/my',
|
||||
color: '#F39C12'
|
||||
}
|
||||
],
|
||||
notices: [
|
||||
'欢迎使用知芽小筑！',
|
||||
'新增课程筛选功能，快来体验吧',
|
||||
'学科论坛上线，与同学们一起交流学习'
|
||||
],
|
||||
currentNotice: 0
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// 获取用户信息
|
||||
this.getUserInfo()
|
||||
|
||||
// 启动公告轮播
|
||||
this.startNoticeCarousel()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 开始跟踪学习时间
|
||||
learningTracker.onPageShow('index')
|
||||
|
||||
// 每次显示时刷新用户信息
|
||||
this.getUserInfo()
|
||||
|
||||
// 更新自定义TabBar选中状态
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({
|
||||
selected: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onHide() {
|
||||
// 停止跟踪学习时间
|
||||
learningTracker.onPageHide()
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
// 记录学习时长
|
||||
learningTracker.onPageUnload()
|
||||
|
||||
// 清除定时器
|
||||
if (this.noticeTimer) {
|
||||
clearInterval(this.noticeTimer)
|
||||
}
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
getUserInfo() {
|
||||
const userInfo = userManager.getUserInfo()
|
||||
if (userInfo && userInfo.isLogin) {
|
||||
this.setData({ userInfo })
|
||||
} else {
|
||||
// 未登录状态
|
||||
this.setData({ userInfo: null })
|
||||
}
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
onLogout() {
|
||||
wx.showModal({
|
||||
title: '退出登录',
|
||||
content: '确定要退出登录吗？',
|
||||
confirmText: '退出',
|
||||
cancelText: '取消',
|
||||
confirmColor: '#FF5252',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 清除用户信息
|
||||
userManager.clearUserInfo()
|
||||
this.setData({ userInfo: null })
|
||||
|
||||
wx.showToast({
|
||||
title: '已退出登录',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 震动反馈
|
||||
wx.vibrateShort({
|
||||
type: 'light'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 微信授权登录
|
||||
onLogin() {
|
||||
const that = this
|
||||
|
||||
// 显示加载提示
|
||||
wx.showLoading({
|
||||
title: '正在登录...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
// 获取用户信息
|
||||
wx.getUserProfile({
|
||||
desc: '完善用户资料',
|
||||
lang: 'zh_CN',
|
||||
success: (res) => {
|
||||
console.log('获取用户信息成功', res)
|
||||
|
||||
// 使用 userManager 保存用户信息
|
||||
const userInfo = {
|
||||
nickname: res.userInfo.nickName,
|
||||
avatar: res.userInfo.avatarUrl,
|
||||
gender: res.userInfo.gender,
|
||||
country: res.userInfo.country,
|
||||
province: res.userInfo.province,
|
||||
city: res.userInfo.city,
|
||||
isLogin: true,
|
||||
loginTime: new Date().getTime()
|
||||
}
|
||||
|
||||
// 保存用户信息（会自动处理字段兼容性）
|
||||
userManager.saveUserInfo(userInfo)
|
||||
that.setData({ userInfo })
|
||||
|
||||
console.log('登录成功，保存的用户信息：', userInfo)
|
||||
|
||||
// 隐藏加载提示
|
||||
wx.hideLoading()
|
||||
|
||||
// 显示成功提示
|
||||
wx.showToast({
|
||||
title: `欢迎，${userInfo.nickname}`,
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
|
||||
// 震动反馈
|
||||
wx.vibrateShort({
|
||||
type: 'light'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取用户信息失败', err)
|
||||
|
||||
// 隐藏加载提示
|
||||
wx.hideLoading()
|
||||
|
||||
// 显示错误提示
|
||||
wx.showModal({
|
||||
title: '登录提示',
|
||||
content: '登录已取消，部分功能可能受限',
|
||||
showCancel: false,
|
||||
confirmText: '我知道了',
|
||||
confirmColor: '#667eea'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 公告轮播
|
||||
startNoticeCarousel() {
|
||||
this.noticeTimer = setInterval(() => {
|
||||
const { currentNotice, notices } = this.data
|
||||
this.setData({
|
||||
currentNotice: (currentNotice + 1) % notices.length
|
||||
})
|
||||
}, 3000)
|
||||
},
|
||||
|
||||
// 功能卡片点击
|
||||
onFeatureClick(e) {
|
||||
console.log('功能卡片被点击', e)
|
||||
const { path } = e.currentTarget.dataset
|
||||
console.log('跳转路径:', path)
|
||||
|
||||
if (!path) {
|
||||
wx.showToast({
|
||||
title: '路径配置错误',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// TabBar 页面列表
|
||||
const tabBarPages = [
|
||||
'/pages/index/index',
|
||||
'/pages/courses/courses',
|
||||
'/pages/tools/tools',
|
||||
'/pages/forum/forum',
|
||||
'/pages/my/my'
|
||||
]
|
||||
|
||||
// 判断是否为 TabBar 页面
|
||||
if (tabBarPages.includes(path)) {
|
||||
wx.switchTab({
|
||||
url: path,
|
||||
success: () => {
|
||||
console.log('切换TabBar成功:', path)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('TabBar切换失败:', err)
|
||||
wx.showToast({
|
||||
title: '页面切换失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
wx.navigateTo({
|
||||
url: path,
|
||||
success: () => {
|
||||
console.log('跳转成功:', path)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('页面跳转失败:', err)
|
||||
wx.showToast({
|
||||
title: '页面跳转失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
3
pages/index/index.json
Normal file
3
pages/index/index.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "知芽小筑"
|
||||
}
|
||||
119
pages/index/index.wxml
Normal file
119
pages/index/index.wxml
Normal file
@@ -0,0 +1,119 @@
|
||||
<!--pages/index/index.wxml-->
|
||||
<view class="container">
|
||||
<!-- 顶部欢迎区 -->
|
||||
<view class="header">
|
||||
<view class="welcome-section">
|
||||
<!-- 已登录状态 -->
|
||||
<view class="user-info" wx:if="{{userInfo && userInfo.isLogin}}">
|
||||
<image class="user-avatar" src="{{userInfo.avatar}}" mode="aspectFill" />
|
||||
<view class="user-content">
|
||||
<view class="greeting">
|
||||
<text class="greeting-text">你好！</text>
|
||||
<text class="greeting-name">{{userInfo.nickname}}</text>
|
||||
</view>
|
||||
<view class="slogan">知芽小筑，智启未来</view>
|
||||
</view>
|
||||
<view class="logout-btn" bindtap="onLogout">
|
||||
<text class="logout-icon">🚪</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 未登录状态 -->
|
||||
<view class="login-section" wx:else>
|
||||
<view class="login-card">
|
||||
<view class="login-header">
|
||||
<text class="header-icon">🎓</text>
|
||||
<text class="header-title">知芽小筑</text>
|
||||
<text class="header-subtitle">Your Smart Campus Companion</text>
|
||||
</view>
|
||||
|
||||
<view class="login-prompt">
|
||||
<text class="prompt-icon">👋</text>
|
||||
<view class="prompt-content">
|
||||
<text class="prompt-text">Hi，欢迎来到知芽小筑</text>
|
||||
<text class="prompt-desc">登录后解锁更多精彩功能</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="login-btn" bindtap="onLogin">
|
||||
<view class="btn-content">
|
||||
<text class="login-icon">🔐</text>
|
||||
<view class="btn-text-group">
|
||||
<text class="login-text">微信快捷登录</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="arrow-icon">→</text>
|
||||
</button>
|
||||
|
||||
<view class="login-features">
|
||||
<view class="feature-item">
|
||||
<text class="feature-icon">✨</text>
|
||||
<text class="feature-text">个性化推荐</text>
|
||||
</view>
|
||||
<view class="feature-item">
|
||||
<text class="feature-icon">🔒</text>
|
||||
<text class="feature-text">数据安全</text>
|
||||
</view>
|
||||
<view class="feature-item">
|
||||
<text class="feature-icon">⚡</text>
|
||||
<text class="feature-text">快速便捷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login-tip">
|
||||
<text class="tip-icon">ℹ️</text>
|
||||
<text class="tip-text">我们承诺保护您的隐私安全</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 公告栏 -->
|
||||
<view class="notice-bar">
|
||||
<view class="notice-icon">📢</view>
|
||||
<swiper class="notice-swiper" vertical="{{true}}" autoplay="{{true}}" circular="{{true}}" interval="3000">
|
||||
<swiper-item wx:for="{{notices}}" wx:key="index">
|
||||
<text class="notice-text">{{item}}</text>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<!-- 功能模块 -->
|
||||
<view class="features-section">
|
||||
<view class="section-title">
|
||||
<text class="title-text">功能中心</text>
|
||||
<view class="title-line"></view>
|
||||
</view>
|
||||
|
||||
<view class="features-grid">
|
||||
<view
|
||||
class="feature-card"
|
||||
wx:for="{{features}}"
|
||||
wx:key="id"
|
||||
data-path="{{item.path}}"
|
||||
bindtap="onFeatureClick"
|
||||
>
|
||||
<view class="card-bg" style="background: linear-gradient(135deg, {{item.color}}15 0%, {{item.color}}05 100%);"></view>
|
||||
|
||||
<view class="feature-header">
|
||||
<view class="feature-icon" style="background: linear-gradient(135deg, {{item.color}} 0%, {{item.color}}CC 100%);">
|
||||
<text class="icon-text">{{item.icon}}</text>
|
||||
</view>
|
||||
<view class="badge" wx:if="{{item.badge}}" style="background-color: {{item.badgeColor || '#FF5252'}};">{{item.badge}}</view>
|
||||
</view>
|
||||
|
||||
<view class="feature-info">
|
||||
<view class="feature-name">{{item.name}}</view>
|
||||
<view class="feature-desc">{{item.desc}}</view>
|
||||
</view>
|
||||
|
||||
<view class="card-footer">
|
||||
<text class="footer-text">立即使用</text>
|
||||
<text class="footer-arrow">→</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
643
pages/index/index.wxss
Normal file
643
pages/index/index.wxss
Normal file
@@ -0,0 +1,643 @@
|
||||
/* pages/index/index.wxss */
|
||||
.container {
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
animation: gradient-shift 15s ease infinite;
|
||||
/* 底部留出TabBar的空间 */
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
|
||||
}
|
||||
|
||||
@keyframes gradient-shift {
|
||||
0%, 100% {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
50% {
|
||||
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 头部区域 */
|
||||
.header {
|
||||
padding: 60rpx 30rpx 40rpx;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-20rpx, -20rpx) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 已登录状态 */
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
animation: slideInLeft 0.6s ease-out;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.user-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.logout-btn:active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.logout-icon {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
/* 未登录状态 */
|
||||
.login-section {
|
||||
padding: 20rpx 0;
|
||||
animation: slideInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
|
||||
backdrop-filter: blur(20rpx);
|
||||
border-radius: 30rpx;
|
||||
padding: 50rpx 40rpx;
|
||||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(102, 126, 234, 0.08) 0%, transparent 70%);
|
||||
animation: rotate-slow 30s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate-slow {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 80rpx;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
animation: bounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10rpx); }
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
margin-bottom: 10rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.login-prompt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 35rpx;
|
||||
padding: 25rpx;
|
||||
background: linear-gradient(135deg, #F0F4FF 0%, #E8EFFF 100%);
|
||||
border-radius: 20rpx;
|
||||
border-left: 6rpx solid #667eea;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.prompt-icon {
|
||||
font-size: 56rpx;
|
||||
animation: wave 2s ease-in-out infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(-20deg); }
|
||||
75% { transform: rotate(20deg); }
|
||||
}
|
||||
|
||||
.prompt-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.prompt-text {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.prompt-desc {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
border-radius: 25rpx;
|
||||
padding: 0;
|
||||
height: 130rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 35rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 15rpx 40rpx rgba(102, 126, 234, 0.35);
|
||||
border: none;
|
||||
margin-bottom: 35rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.login-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.login-btn:active::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.login-icon {
|
||||
font-size: 44rpx;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
.btn-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-subtext {
|
||||
font-size: 22rpx;
|
||||
opacity: 0.9;
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
animation: arrow-move 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes arrow-move {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
50% { transform: translateX(8rpx); }
|
||||
}
|
||||
|
||||
.login-features {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 30rpx;
|
||||
padding: 0 20rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 36rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
padding: 20rpx;
|
||||
background: rgba(102, 126, 234, 0.05);
|
||||
border-radius: 15rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
font-size: 28rpx;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.greeting-text {
|
||||
font-size: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.greeting-name {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.slogan {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.9;
|
||||
letter-spacing: 2rpx;
|
||||
animation: slideInLeft 0.6s ease-out 0.2s both;
|
||||
}
|
||||
|
||||
/* 公告栏 */
|
||||
.notice-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CD 100%);
|
||||
padding: 20rpx 30rpx;
|
||||
margin: 0 30rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 193, 7, 0.2);
|
||||
animation: slideInDown 0.6s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 15rpx;
|
||||
animation: bell-ring 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bell-ring {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
20%, 40% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-swiper {
|
||||
flex: 1;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.notice-text {
|
||||
font-size: 26rpx;
|
||||
color: #856404;
|
||||
line-height: 40rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 功能区 */
|
||||
.features-section {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding: 40rpx 30rpx;
|
||||
min-height: calc(100vh - 400rpx);
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.08);
|
||||
animation: slideInUp 0.6s ease-out 0.4s both;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
background: linear-gradient(to right, #667eea, #764ba2);
|
||||
border-radius: 3rpx;
|
||||
margin-top: 10rpx;
|
||||
animation: expand 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes expand {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 25rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: #ffffff;
|
||||
border-radius: 25rpx;
|
||||
padding: 0;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.08);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: fadeInScale 0.6s ease-out both;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:active .card-bg {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes fadeInScale {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(20rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.feature-card:nth-child(2) { animation-delay: 0.15s; }
|
||||
.feature-card:nth-child(3) { animation-delay: 0.2s; }
|
||||
.feature-card:nth-child(4) { animation-delay: 0.25s; }
|
||||
.feature-card:nth-child(5) { animation-delay: 0.3s; }
|
||||
.feature-card:nth-child(6) { animation-delay: 0.35s; }
|
||||
|
||||
.feature-card:active {
|
||||
transform: translateY(-8rpx) scale(1.02);
|
||||
box-shadow: 0 20rpx 50rpx rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
.feature-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 30rpx 25rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:active .feature-icon {
|
||||
transform: scale(1.1) rotate(-5deg);
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 50rpx;
|
||||
filter: drop-shadow(0 2rpx 4rpx rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 25rpx;
|
||||
right: 25rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
|
||||
animation: badge-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes badge-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.feature-info {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 25rpx 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.feature-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 20rpx 25rpx;
|
||||
border-top: 1rpx solid rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer-arrow {
|
||||
font-size: 28rpx;
|
||||
color: #667eea;
|
||||
font-weight: bold;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:active .footer-arrow {
|
||||
transform: translateX(6rpx);
|
||||
}
|
||||
Reference in New Issue
Block a user