feat: initialize luobo printing WeChat mini program with full feature stack
- Add comprehensive project documentation (README.md) with tech stack, structure, and usage guide - Implement API layer with modular services (auth, file, order, printer, price, pay) - Add Redux Toolkit state management with slices for user, order, file, and printer - Create complete page structure: index, login, user center, file management, order management, print settings - Build reusable UI components (OrderCard, PriceTable) with consistent styling - Establish design system with CSS variables, animations, and common styles - Add TypeScript type definitions for all domain entities - Implement utility functions for formatting, HTTP requests, and local storage - Configure ESLint to use CommonJS format for compatibility - Update dependencies: add Redux Toolkit, React Redux, and related packages - Style pages with gradient backgrounds, card layouts, and smooth animations BREAKING CHANGE: This is an initial project setup that replaces the previous Taro Hooks demo template with a complete printing service mini program
This commit is contained in:
Mikuisnotavailable
265
BACKDROP_FILTER_ANALYSIS.md
Normal file
265
BACKDROP_FILTER_ANALYSIS.md
Normal file
@@ -0,0 +1,265 @@
|
||||
# 毛玻璃效果（backdrop-filter）渲染异常根本原因分析
|
||||
|
||||
## 问题现象
|
||||
|
||||
在微信小程序中，毛玻璃效果（`backdrop-filter: blur()`）可能出现渲染异常，表现为：
|
||||
|
||||
- 毛玻璃效果不显示或显示不完整
|
||||
- 背景模糊效果异常
|
||||
- 透明度过渡不自然
|
||||
|
||||
## 根本原因分析
|
||||
|
||||
### 1. 层级冲突（z-index 堆叠上下文）
|
||||
|
||||
**问题描述：**
|
||||
当使用 `backdrop-filter` 的元素与其父容器或其他兄弟元素存在 z-index 冲突时，毛玻璃效果可能无法正常渲染。
|
||||
|
||||
**技术原理：**
|
||||
|
||||
- `backdrop-filter` 需要作用于元素背后的内容
|
||||
- 如果元素没有创建独立的堆叠上下文，或者被其他元素遮挡，毛玻璃效果会失效
|
||||
- 在微信小程序中，堆叠上下文的创建规则与浏览器略有不同
|
||||
|
||||
**修复方案：**
|
||||
|
||||
```css
|
||||
/* 为使用毛玻璃效果的元素创建独立的堆叠上下文 */
|
||||
.glass-element {
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
z-index: 1; /* 创建独立堆叠上下文 */
|
||||
position: relative; /* 确保 z-index 生效 */
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 背景色透明度问题
|
||||
|
||||
**问题描述：**
|
||||
`backdrop-filter` 需要元素有足够的背景色（即使是半透明）才能正确工作。完全透明的背景会导致毛玻璃效果无法渲染。
|
||||
|
||||
**技术原理：**
|
||||
|
||||
- `backdrop-filter` 作用于元素背景层
|
||||
- 如果背景完全透明（`background: transparent`），没有像素可供处理
|
||||
- 必须设置半透明背景色，如 `rgba(255, 255, 255, 0.72)`
|
||||
|
||||
**修复方案：**
|
||||
|
||||
```css
|
||||
/* 确保有足够的背景色让毛玻璃效果正确渲染 */
|
||||
.glass-element {
|
||||
background: rgba(255, 255, 255, 0.72); /* 半透明背景 */
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 父容器定位问题
|
||||
|
||||
**问题描述：**
|
||||
使用 `position: fixed` 或 `position: absolute` 的装饰元素可能影响毛玻璃效果的渲染。
|
||||
|
||||
**技术原理：**
|
||||
|
||||
- 绝对定位元素可能创建新的堆叠上下文
|
||||
- 如果装饰元素（如光晕效果）位于毛玻璃元素上方，会遮挡毛玻璃效果
|
||||
- 需要将装饰元素置于毛玻璃元素下方
|
||||
|
||||
**修复方案：**
|
||||
|
||||
```css
|
||||
/* 装饰光晕元素应位于毛玻璃元素下方 */
|
||||
.ambient-light {
|
||||
position: absolute;
|
||||
z-index: 0; /* 确保在毛玻璃元素下方 */
|
||||
pointer-events: none; /* 不拦截鼠标事件 */
|
||||
}
|
||||
|
||||
.glass-element {
|
||||
position: relative;
|
||||
z-index: 1; /* 确保在装饰元素上方 */
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 微信小程序平台兼容性
|
||||
|
||||
**问题描述：**
|
||||
微信小程序对 `backdrop-filter` 的支持有限，需要特殊处理。
|
||||
|
||||
**技术原理：**
|
||||
|
||||
- 微信小程序基于 WebView，但有自己的渲染引擎
|
||||
- 需要同时使用标准属性和 `-webkit-` 前缀
|
||||
- 某些复杂效果可能需要降级处理
|
||||
|
||||
**修复方案：**
|
||||
|
||||
```css
|
||||
.glass-element {
|
||||
/* 标准属性 */
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
/* WebKit 前缀 - 微信小程序必需 */
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
/* 降级背景色 - 当毛玻璃不支持时使用 */
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
```
|
||||
|
||||
## 已实施的修复方案
|
||||
|
||||
### 修改的文件
|
||||
|
||||
#### 1. aiyintong/src/pages/index/index.css
|
||||
|
||||
**修复内容：**
|
||||
|
||||
- 为 `.index-page` 添加 `z-index: 0` 和 `background: transparent`
|
||||
- 为 `.ambient-light` 添加 `will-change: transform`
|
||||
- 为 `.user-card` 和 `.action-item` 添加 `z-index: 1`
|
||||
|
||||
```css
|
||||
.index-page {
|
||||
z-index: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ambient-light {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. aiyintong/src/pages/order/index.css
|
||||
|
||||
**修复内容：**
|
||||
|
||||
- 为 `.order-page` 添加 `z-index: 0` 和 `background: transparent`
|
||||
- 为 `.order-item` 添加 `z-index: 1`
|
||||
|
||||
```css
|
||||
.order-page {
|
||||
z-index: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
|
||||
## 验证方法
|
||||
|
||||
### 1. 开发者工具检查
|
||||
|
||||
在微信开发者工具中：
|
||||
|
||||
- 检查元素是否有正确的 `backdrop-filter` 和 `-webkit-backdrop-filter` 属性
|
||||
- 确认 z-index 层级关系正确
|
||||
- 验证背景色不是完全透明
|
||||
|
||||
### 2. 真机测试
|
||||
|
||||
在真实设备上测试：
|
||||
|
||||
- 不同 iOS/Android 版本的渲染效果
|
||||
- 滑动时的性能表现
|
||||
- 多个毛玻璃元素叠加时的效果
|
||||
|
||||
### 3. 性能监控
|
||||
|
||||
使用微信开发者工具的性能面板：
|
||||
|
||||
- 监控 GPU 使用情况
|
||||
- 检查是否有渲染卡顿
|
||||
- 确保 `will-change` 属性正确应用
|
||||
|
||||
## 最佳实践建议
|
||||
|
||||
### 1. 毛玻璃效果使用规范
|
||||
|
||||
```css
|
||||
/* 推荐的毛玻璃效果写法 */
|
||||
.glass-card {
|
||||
/* 必须有半透明背景 */
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
|
||||
/* 同时使用标准属性和前缀 */
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
|
||||
/* 创建独立堆叠上下文 */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
/* 可选：性能优化 */
|
||||
will-change: transform;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 层级管理规范
|
||||
|
||||
```css
|
||||
/* 页面容器 */
|
||||
.page {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background: transparent; /* 让页面背景透出 */
|
||||
}
|
||||
|
||||
/* 装饰层（最底层） */
|
||||
.decoration-layer {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 内容层（中间层） */
|
||||
.content-layer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 弹窗层（最顶层） */
|
||||
.modal-layer {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 性能优化建议
|
||||
|
||||
```css
|
||||
/* 使用 will-change 提示浏览器优化 */
|
||||
.glass-element {
|
||||
will-change: transform;
|
||||
transform: translateZ(0); /* 启用 GPU 加速 */
|
||||
}
|
||||
|
||||
/* 避免过度使用毛玻璃 */
|
||||
/* 在列表等滚动区域，考虑使用静态背景 */
|
||||
.scroll-list {
|
||||
background: rgba(255, 255, 255, 0.95); /* 更高不透明度 */
|
||||
backdrop-filter: blur(24rpx); /* 降低模糊度 */
|
||||
}
|
||||
```
|
||||
|
||||
## 总结
|
||||
|
||||
毛玻璃效果在微信小程序中渲染异常的根本原因主要包括：
|
||||
|
||||
1. **层级冲突** - 缺少独立的堆叠上下文
|
||||
2. **背景色问题** - 背景完全透明导致无法应用效果
|
||||
3. **定位问题** - 装饰元素遮挡毛玻璃效果
|
||||
4. **平台兼容性** - 缺少必要的浏览器前缀
|
||||
|
||||
通过为毛玻璃元素创建独立的堆叠上下文、确保半透明背景、正确管理 z-index 层级，以及添加必要的浏览器前缀，可以有效解决这些问题。
|
||||
|
||||
所有修复已在 `index.css` 和 `order/index.css` 中实施，确保毛玻璃效果在微信小程序中正确渲染。
|
||||
177
src/app.css
177
src/app.css
@@ -1,5 +1,6 @@
|
||||
/* ============================================
|
||||
全局样式入口 - 爱印通
|
||||
全局样式入口 - 爱印通 Apple Liquid Glass 设计系统
|
||||
半透明毛玻璃、圆润悬浮控件、动态光影折射
|
||||
============================================ */
|
||||
|
||||
/* 引入设计系统和动画 */
|
||||
@@ -7,20 +8,24 @@
|
||||
@import './styles/common.css';
|
||||
@import './styles/animations.css';
|
||||
|
||||
/* 全局页面样式 */
|
||||
/* ========== 全局页面样式 ========== */
|
||||
|
||||
page {
|
||||
background: var(--bg-page);
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
|
||||
'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', sans-serif;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: 1.5;
|
||||
font-size: var(--font-size-body);
|
||||
line-height: var(--line-height-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 全局滚动条样式 */
|
||||
/* ========== 全局滚动条样式 ========== */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
@@ -36,28 +41,31 @@ page {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-placeholder);
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 选中文本样式 */
|
||||
/* ========== 选中文本样式 ========== */
|
||||
|
||||
::selection {
|
||||
background: rgba(90, 147, 223, 0.2);
|
||||
background: var(--primary-opacity-30);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 焦点样式 */
|
||||
/* ========== 焦点样式 ========== */
|
||||
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
/* ========== 链接样式 ========== */
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
@@ -66,19 +74,33 @@ a:hover {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
a:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* ========== 图片样式 ========== */
|
||||
|
||||
image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 文本选择禁用 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ========== 文本选择禁用 ========== */
|
||||
|
||||
.no-select {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* 安全区域 */
|
||||
/* ========== 安全区域 ========== */
|
||||
|
||||
.safe-area-top {
|
||||
padding-top: constant(safe-area-inset-top);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
@@ -99,7 +121,8 @@ image {
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
|
||||
/* 隐藏滚动条但保持可滚动 */
|
||||
/* ========== 隐藏滚动条但保持可滚动 ========== */
|
||||
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
@@ -109,7 +132,8 @@ image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 文本截断 */
|
||||
/* ========== 文本截断 ========== */
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -121,7 +145,6 @@ image {
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.truncate-3 {
|
||||
@@ -129,15 +152,10 @@ image {
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 点击高亮移除 */
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
/* ========== 打印样式 ========== */
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
page {
|
||||
background: white;
|
||||
@@ -148,12 +166,15 @@ image {
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
/* ========== 深色模式 ========== */
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* 未来可扩展深色模式 */
|
||||
/* 深色模式变量已在 variables.css 中定义 */
|
||||
/* 页面会自动切换到深色模式 */
|
||||
}
|
||||
|
||||
/* 减少动画偏好 */
|
||||
/* ========== 减少动画偏好 ========== */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
@@ -161,5 +182,101 @@ image {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 高对比度模式 ========== */
|
||||
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 全局工具类 ========== */
|
||||
|
||||
/* 清除浮动 */
|
||||
.clearfix::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* 屏幕阅读器专用 */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* 禁用滚动 */
|
||||
.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 固定定位全屏遮罩 */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--bg-overlay);
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.2s ease forwards;
|
||||
}
|
||||
|
||||
/* 毛玻璃遮罩 */
|
||||
.overlay-glass {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.2s ease forwards;
|
||||
}
|
||||
|
||||
/* ========== 页面过渡动画 ========== */
|
||||
|
||||
.page-transition-enter {
|
||||
animation: fadeInRight 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
.page-transition-exit {
|
||||
animation: fadeInLeft 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) reverse forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,23 @@
|
||||
/* ============================================
|
||||
订单卡片组件样式 - 爱印通
|
||||
订单卡片组件样式 - 爱印通 Apple Liquid Glass 设计系统
|
||||
大字体大控件版本 - 微信小程序优化
|
||||
============================================ */
|
||||
|
||||
@import '../../styles/variables.css';
|
||||
|
||||
/* ========== 订单卡片 ========== */
|
||||
|
||||
.order-card {
|
||||
background: var(--bg-card);
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
padding: 36rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid var(--glass-border);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.order-card:active {
|
||||
@@ -19,114 +25,123 @@
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* 订单头部 */
|
||||
/* ========== 订单头部 ========== */
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
margin-bottom: 28rpx;
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid var(--border-separator);
|
||||
}
|
||||
|
||||
.order-id {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 26rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
color: var(--info-color);
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--primary-opacity-10);
|
||||
color: var(--primary);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.order-status.completed {
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
color: var(--success-color);
|
||||
background: rgba(52, 199, 89, 0.1);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.order-status.cancelled {
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
color: var(--error-color);
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.order-status.pending {
|
||||
background: rgba(250, 173, 20, 0.1);
|
||||
color: var(--warning-color);
|
||||
background: rgba(255, 149, 0, 0.1);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
/* 订单内容 */
|
||||
/* ========== 订单内容 ========== */
|
||||
|
||||
.order-body {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.order-detail {
|
||||
font-size: var(--font-size-sm);
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.printer-name {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 26rpx;
|
||||
color: var(--text-tertiary);
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 订单底部 */
|
||||
/* ========== 订单底部 ========== */
|
||||
|
||||
.order-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--border-light);
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-separator);
|
||||
padding-top: 28rpx;
|
||||
}
|
||||
|
||||
.order-price {
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--error-color);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 40rpx;
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.order-time {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 订单操作区 */
|
||||
/* ========== 订单操作区 ========== */
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-light);
|
||||
gap: 20rpx;
|
||||
margin-top: 28rpx;
|
||||
padding-top: 28rpx;
|
||||
border-top: 1px solid var(--border-separator);
|
||||
}
|
||||
|
||||
.order-action-btn {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
height: 80rpx;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-sm);
|
||||
border: none;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.order-action-btn::after {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
transition: all var(--transition-scale);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.order-action-btn:active {
|
||||
@@ -134,31 +149,49 @@
|
||||
}
|
||||
|
||||
.order-action-btn.primary {
|
||||
background: var(--primary-gradient);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 12px rgba(90, 147, 223, 0.2);
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.2);
|
||||
}
|
||||
|
||||
.order-action-btn.secondary {
|
||||
background: #f5f5f7;
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 卡片变体 */
|
||||
/* ========== 卡片变体 ========== */
|
||||
|
||||
.order-card.highlighted {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(90, 147, 223, 0.1), var(--shadow-md);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 4rpx var(--primary-opacity-20), var(--shadow-md);
|
||||
}
|
||||
|
||||
.order-card.compact {
|
||||
padding: 16px;
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.order-card.compact .order-header {
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.order-card.compact .order-body {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.order-card.compact .file-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.order-card.compact .order-detail {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/* ========== 悬浮效果 ========== */
|
||||
|
||||
@media (hover: hover) {
|
||||
.order-card:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-4rpx);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,114 +1,136 @@
|
||||
/* ============================================
|
||||
价目表组件样式 - 爱印通
|
||||
价目表组件样式 - 爱印通 Apple Liquid Glass 设计系统
|
||||
大字体大控件版本 - 微信小程序优化
|
||||
============================================ */
|
||||
|
||||
@import '../../styles/variables.css';
|
||||
|
||||
/* ========== 价目表容器 ========== */
|
||||
|
||||
.price-table {
|
||||
background: var(--bg-card);
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
padding: 40rpx;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid var(--glass-border);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
/* ========== 价目表标题 ========== */
|
||||
|
||||
.price-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 12px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
margin-bottom: 32rpx;
|
||||
padding-left: 24rpx;
|
||||
border-left: 6rpx solid var(--primary);
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
/* ========== 价目列表 ========== */
|
||||
|
||||
.price-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
/* ========== 价目项 ========== */
|
||||
|
||||
.price-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition-fast);
|
||||
padding: 28rpx 24rpx;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.price-item:nth-child(odd) {
|
||||
background: #fafbfc;
|
||||
background: rgba(0, 122, 255, 0.02);
|
||||
}
|
||||
|
||||
.price-item:nth-child(even) {
|
||||
background: var(--bg-card);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.price-item:active {
|
||||
transform: scale(0.98);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.price-item.selected {
|
||||
background: rgba(90, 147, 223, 0.1);
|
||||
border: 1px solid var(--primary-color);
|
||||
background: var(--primary-opacity-10);
|
||||
border: 3rpx solid var(--primary);
|
||||
}
|
||||
|
||||
.price-item.selected .price-name {
|
||||
color: var(--primary-color);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 价目名称 */
|
||||
.price-name {
|
||||
font-size: var(--font-size-base);
|
||||
font-size: 30rpx;
|
||||
color: var(--text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: 500;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
/* 价目值 */
|
||||
.price-value {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--error-color);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: 32rpx;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
/* 价目表变体 */
|
||||
/* ========== 紧凑变体 ========== */
|
||||
|
||||
.price-table.compact {
|
||||
padding: 16px;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.price-table.compact .price-title {
|
||||
font-size: var(--font-size-lg);
|
||||
margin-bottom: 16px;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.price-table.compact .price-item {
|
||||
padding: 12px 8px;
|
||||
padding: 24rpx 20rpx;
|
||||
}
|
||||
|
||||
.price-table.compact .price-name {
|
||||
font-size: var(--font-size-sm);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.price-table.compact .price-value {
|
||||
font-size: var(--font-size-base);
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
/* 带图标的价目项 */
|
||||
/* ========== 带图标的价目项 ========== */
|
||||
|
||||
.price-item-with-icon {
|
||||
padding-left: 16px;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.price-item-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-sm);
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
font-size: 20px;
|
||||
margin-right: 24rpx;
|
||||
font-size: 36rpx;
|
||||
background: linear-gradient(135deg, #e8f0fe 0%, #d0dcfa 100%);
|
||||
box-shadow: var(--shadow-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.price-item-content {
|
||||
@@ -116,25 +138,88 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 促销标签 */
|
||||
/* ========== 促销标签 ========== */
|
||||
|
||||
.price-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
border-radius: 8px;
|
||||
margin-left: 8px;
|
||||
transform: scale(0.8);
|
||||
padding: 4rpx 16rpx;
|
||||
background: linear-gradient(135deg, #FF3B30 0%, #FF453A 100%);
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-left: 16rpx;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.25);
|
||||
}
|
||||
|
||||
/* 原价显示 */
|
||||
/* ========== 原价显示 ========== */
|
||||
|
||||
.price-original {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-placeholder);
|
||||
font-size: 26rpx;
|
||||
color: var(--text-tertiary);
|
||||
text-decoration: line-through;
|
||||
margin-right: 4px;
|
||||
margin-right: 12rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ========== 价目表头部操作 ========== */
|
||||
|
||||
.price-table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.price-table-action {
|
||||
font-size: 28rpx;
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.price-table-action:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ========== 悬浮效果 ========== */
|
||||
|
||||
@media (hover: hover) {
|
||||
.price-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.price-item.selected:hover {
|
||||
background: var(--primary-opacity-10);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 响应式适配 ========== */
|
||||
|
||||
@media (max-width: 750rpx) {
|
||||
.price-table {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.price-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.price-item {
|
||||
padding: 24rpx 20rpx;
|
||||
}
|
||||
|
||||
.price-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
135
src/components/TabBar/TabBar.css
Normal file
135
src/components/TabBar/TabBar.css
Normal file
@@ -0,0 +1,135 @@
|
||||
/* ============================================
|
||||
底部导航栏样式 - 爱印通 Apple Liquid Glass 设计系统
|
||||
============================================ */
|
||||
|
||||
@import '../../styles/variables.css';
|
||||
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120rpx;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-item:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 44rpx;
|
||||
color: var(--text-tertiary);
|
||||
transition: all var(--transition-base);
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.tab-item.active .tab-icon {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-tertiary);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.tab-item.active .tab-label {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 选中指示器 */
|
||||
.tab-indicator {
|
||||
position: absolute;
|
||||
bottom: 8rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 6rpx;
|
||||
background: var(--primary);
|
||||
border-radius: 3rpx;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
.tab-item.active .tab-indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 中间大按钮 - 用于主要操作 */
|
||||
.tab-item.center-action {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-action-btn {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #5AC8FA 0%, #007AFF 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(90, 200, 250, 0.4);
|
||||
transition: all var(--transition-scale);
|
||||
}
|
||||
|
||||
.tab-action-btn:active {
|
||||
transform: scale(0.92);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.tab-action-icon {
|
||||
font-size: 48rpx;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
/* 徽章通知 */
|
||||
.tab-badge {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 20%;
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: var(--error);
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 59, 48, 0.3);
|
||||
}
|
||||
|
||||
.tab-badge:empty {
|
||||
display: none;
|
||||
}
|
||||
79
src/components/TabBar/TabBar.tsx
Normal file
79
src/components/TabBar/TabBar.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import './TabBar.css';
|
||||
|
||||
interface TabBarProps {
|
||||
current: number;
|
||||
onChange: (index: number) => void;
|
||||
}
|
||||
|
||||
interface TabItem {
|
||||
icon: string;
|
||||
label: string;
|
||||
path: string;
|
||||
badge?: string;
|
||||
}
|
||||
|
||||
const tabs: TabItem[] = [
|
||||
{ icon: '🏠', label: '首页', path: '/pages/index/index' },
|
||||
{ icon: '📋', label: '订单', path: '/pages/order/index' },
|
||||
{ icon: '', label: '', path: '/pages/file/upload/index' }, // 中间大按钮
|
||||
{ icon: '📁', label: '文件', path: '/pages/file/index' },
|
||||
{ icon: '👤', label: '我的', path: '/pages/user/index' },
|
||||
];
|
||||
|
||||
const TabBar: React.FC<TabBarProps> = ({ current, onChange }) => {
|
||||
const handleTabChange = (index: number) => {
|
||||
const tab = tabs[index];
|
||||
if (!tab) return;
|
||||
|
||||
// 如果点击当前已激活的标签，不执行任何操作
|
||||
if (index === current) return;
|
||||
|
||||
if (index === 2) {
|
||||
// 中间大按钮 - 上传/打印，使用 navigateTo
|
||||
Taro.navigateTo({ url: tab.path });
|
||||
return;
|
||||
}
|
||||
|
||||
// 优先尝试 switchTab（适用于 TabBar 页面）
|
||||
Taro.switchTab({
|
||||
url: tab.path,
|
||||
fail: () => {
|
||||
// 如果 switchTab 失败，使用 navigateTo 并关闭所有页面
|
||||
Taro.reLaunch({ url: tab.path });
|
||||
}
|
||||
});
|
||||
|
||||
// 更新当前选中的标签索引
|
||||
onChange(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="tab-bar">
|
||||
{tabs.map((tab, index) => (
|
||||
<View
|
||||
key={index}
|
||||
className={`tab-item ${index === current ? 'active' : ''} ${index === 2 ? 'center-action' : ''}`}
|
||||
onClick={() => handleTabChange(index)}
|
||||
>
|
||||
{index === 2 ? (
|
||||
<View className="tab-action-btn">
|
||||
<Text className="tab-action-icon">+</Text>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<View className="tab-icon">{tab.icon}</View>
|
||||
<Text className="tab-label">{tab.label}</Text>
|
||||
{tab.badge && <View className="tab-badge">{tab.badge}</View>}
|
||||
<View className="tab-indicator" />
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default TabBar;
|
||||
1
src/components/TabBar/index.ts
Normal file
1
src/components/TabBar/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './TabBar';
|
||||
@@ -1,88 +1,201 @@
|
||||
/* ============================================
|
||||
文件列表页面样式 - 爱印通
|
||||
文件列表页面样式 - 爱印通 Apple Liquid Glass 设计系统
|
||||
大字体大控件版本 - 微信小程序优化
|
||||
============================================ */
|
||||
|
||||
@import '../../styles/variables.css';
|
||||
|
||||
page {
|
||||
background: linear-gradient(180deg, #e8f0fe 0%, #f0f5ff 30%, #fafbfc 100%);
|
||||
background: var(--bg-page-gradient);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.file-page {
|
||||
min-height: 100vh;
|
||||
padding: 32px 24px 140px;
|
||||
padding: 48rpx 32rpx 280rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
/* ========== 页面头部 ========== */
|
||||
|
||||
.file-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 28px;
|
||||
animation: fadeInDown 0.4s ease forwards;
|
||||
margin-bottom: 48rpx;
|
||||
animation: fadeInDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
background: var(--primary-gradient);
|
||||
color: #fff;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding: 14px 24px;
|
||||
border-radius: 36px;
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(90, 147, 223, 0.2);
|
||||
transition: all var(--transition-base);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.2);
|
||||
transition: all var(--transition-scale);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.upload-btn::after {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-btn:active {
|
||||
transform: scale(0.96);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 文件列表 */
|
||||
/* ========== 统计栏 ========== */
|
||||
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 40rpx;
|
||||
background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 50%, #F5F3FF 100%);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 统计栏左侧装饰 */
|
||||
.stats-bar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 8rpx;
|
||||
background: var(--primary-gradient);
|
||||
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
display: block;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ========== 筛选栏 ========== */
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 40rpx;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 8rpx;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.filter-bar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
padding: 16rpx 36rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 28rpx;
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
border: 2rpx solid var(--border-primary);
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-chip.active {
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.filter-chip:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* ========== 文件列表 ========== */
|
||||
|
||||
.file-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
background: var(--bg-card);
|
||||
background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 100%);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--border-light);
|
||||
transition: all var(--transition-base);
|
||||
animation: slideUp 0.4s ease forwards;
|
||||
animation: fadeInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.file-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.file-item:nth-child(3) { animation-delay: 0.3s; }
|
||||
/* 文件项左侧强调线 */
|
||||
.file-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 24rpx;
|
||||
bottom: 24rpx;
|
||||
width: 6rpx;
|
||||
background: var(--primary);
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
.file-item:active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.file-item:nth-child(1) { animation-delay: 0.05s; }
|
||||
.file-item:nth-child(2) { animation-delay: 0.1s; }
|
||||
.file-item:nth-child(3) { animation-delay: 0.15s; }
|
||||
.file-item:nth-child(4) { animation-delay: 0.2s; }
|
||||
.file-item:nth-child(5) { animation-delay: 0.25s; }
|
||||
|
||||
.file-item:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transform: translateY(32rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -91,57 +204,59 @@ page {
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 44px;
|
||||
margin-right: 16px;
|
||||
font-size: 72rpx;
|
||||
margin-right: 28rpx;
|
||||
flex-shrink: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #e8f0fe 0%, #d0dcfa 100%);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: var(--font-size-base);
|
||||
font-size: 32rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 26rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.file-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 16rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: var(--font-size-xs);
|
||||
padding: 8px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 26rpx;
|
||||
padding: 16rpx 28rpx;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.action-btn::after {
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
@@ -149,129 +264,81 @@ page {
|
||||
}
|
||||
|
||||
.action-btn.print {
|
||||
color: var(--primary-color);
|
||||
background: rgba(90, 147, 223, 0.1);
|
||||
color: var(--primary);
|
||||
background: var(--primary-opacity-10);
|
||||
}
|
||||
|
||||
.action-btn.print:active {
|
||||
background: rgba(90, 147, 223, 0.2);
|
||||
background: var(--primary-opacity-20);
|
||||
}
|
||||
|
||||
.action-btn.delete {
|
||||
color: var(--error-color);
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
color: var(--error);
|
||||
background: rgba(255, 59, 48, 0.08);
|
||||
}
|
||||
|
||||
.action-btn.delete:active {
|
||||
background: rgba(255, 77, 79, 0.2);
|
||||
background: rgba(255, 59, 48, 0.15);
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
/* ========== 空状态 ========== */
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100px 0;
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
padding: 160rpx 48rpx;
|
||||
animation: fadeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 100px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.4;
|
||||
font-size: 160rpx;
|
||||
margin-bottom: 40rpx;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: var(--font-size-lg);
|
||||
font-size: 36rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: var(--font-size-sm);
|
||||
font-size: 28rpx;
|
||||
color: var(--text-placeholder);
|
||||
}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
/* ========== 动画 ========== */
|
||||
|
||||
.filter-chip {
|
||||
padding: 8px 20px;
|
||||
border-radius: 24px;
|
||||
font-size: var(--font-size-xs);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.filter-chip.active {
|
||||
background: var(--primary-gradient);
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 12px rgba(90, 147, 223, 0.2);
|
||||
}
|
||||
|
||||
.filter-chip:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 统计信息 */
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 20px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--primary-color);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transform: translateY(-20rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 装饰光晕 ========== */
|
||||
|
||||
.file-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -200rpx;
|
||||
right: -200rpx;
|
||||
width: 800rpx;
|
||||
height: 800rpx;
|
||||
background: radial-gradient(circle, rgba(0, 122, 255, 0.06) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, Button } from "@tarojs/components";
|
||||
import Taro from '@tarojs/taro';
|
||||
import TabBar from '../../components/TabBar/TabBar';
|
||||
import './index.css';
|
||||
|
||||
interface FileItem {
|
||||
@@ -12,6 +13,7 @@ interface FileItem {
|
||||
}
|
||||
|
||||
const FileIndex = () => {
|
||||
const [tabIndex, setTabIndex] = useState(3); // 文件是第4个标签（索引3）
|
||||
const [files] = useState<FileItem[]>([
|
||||
{ id: 1, name: '期末考试复习资料.docx', size: '2.5 MB', time: '2026-03-30 10:30', type: 'word' },
|
||||
{ id: 2, name: '毕业设计.pdf', size: '15.8 MB', time: '2026-03-29 15:20', type: 'pdf' },
|
||||
@@ -75,6 +77,8 @@ const FileIndex = () => {
|
||||
<Text className='empty-hint'>点击上方按钮上传文件</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TabBar current={tabIndex} onChange={setTabIndex} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,229 +1,329 @@
|
||||
/* ============================================
|
||||
文件上传页面样式 - 萝卜打印
|
||||
文件上传页面样式 - 爱印通 Apple Liquid Glass 设计系统
|
||||
大字体大控件版本 - 微信小程序优化
|
||||
============================================ */
|
||||
|
||||
@import '../../../styles/variables.css';
|
||||
|
||||
page {
|
||||
background: linear-gradient(180deg, #e8f0fe 0%, #f0f5ff 30%, #fafbfc 100%);
|
||||
background: var(--bg-page-gradient);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.upload-page {
|
||||
min-height: 100vh;
|
||||
padding: 32px 24px 140px;
|
||||
padding: 48rpx 32rpx 280rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
/* ========== 页面头部 ========== */
|
||||
|
||||
.upload-header {
|
||||
margin-bottom: 32px;
|
||||
animation: fadeInDown 0.4s ease forwards;
|
||||
margin-bottom: 56rpx;
|
||||
animation: fadeInDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.upload-subtitle {
|
||||
font-size: var(--font-size-sm);
|
||||
font-size: 28rpx;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 8px;
|
||||
margin-top: 12rpx;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 上传区域 */
|
||||
/* ========== 上传区域 ========== */
|
||||
|
||||
.upload-area {
|
||||
background: var(--bg-card);
|
||||
background: var(--bg-card-solid);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 60px 32px;
|
||||
padding: 96rpx 48rpx;
|
||||
box-shadow: var(--shadow-md);
|
||||
min-height: 280px;
|
||||
min-height: 480rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px dashed var(--border-primary);
|
||||
border: 4rpx dashed var(--border-primary);
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-area.dragging {
|
||||
border-color: var(--primary-color);
|
||||
background: rgba(90, 147, 223, 0.05);
|
||||
box-shadow: 0 0 0 4px rgba(90, 147, 223, 0.1);
|
||||
border-color: var(--primary);
|
||||
background: var(--primary-opacity-10);
|
||||
box-shadow: 0 0 0 8rpx var(--primary-opacity-20);
|
||||
}
|
||||
|
||||
.upload-area:active {
|
||||
transform: scale(0.995);
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
animation: pulse 2s ease infinite;
|
||||
animation: gentlePulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
@keyframes gentlePulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 100px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.6;
|
||||
font-size: 128rpx;
|
||||
margin-bottom: 32rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: var(--font-size-lg);
|
||||
font-size: 34rpx;
|
||||
color: var(--text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 26rpx;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 文件预览 */
|
||||
/* ========== 文件预览 ========== */
|
||||
|
||||
.file-preview {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #f8f9fb 0%, #f0f2f7 100%);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 32rpx;
|
||||
background: var(--bg-card-solid);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-light);
|
||||
animation: slideIn 0.3s ease forwards;
|
||||
box-shadow: var(--shadow-md);
|
||||
animation: springIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
@keyframes springIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
transform: scale(0.95) translateY(20rpx);
|
||||
}
|
||||
to {
|
||||
60% {
|
||||
transform: scale(1.02) translateY(-4rpx);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 48px;
|
||||
margin-right: 20px;
|
||||
font-size: 80rpx;
|
||||
margin-right: 32rpx;
|
||||
flex-shrink: 0;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #e8f0fe 0%, #d0dcfa 100%);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: var(--font-size-base);
|
||||
font-size: 32rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 26rpx;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.change-file {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--primary-color);
|
||||
padding: 8px 16px;
|
||||
background: rgba(90, 147, 223, 0.1);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 28rpx;
|
||||
color: var(--primary);
|
||||
padding: 16rpx 32rpx;
|
||||
background: var(--primary-opacity-10);
|
||||
border-radius: var(--radius-md);
|
||||
flex-shrink: 0;
|
||||
transition: all var(--transition-fast);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.change-file:active {
|
||||
background: rgba(90, 147, 223, 0.2);
|
||||
background: var(--primary-opacity-20);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
/* ========== 打印选项 ========== */
|
||||
|
||||
.print-options {
|
||||
margin-top: 56rpx;
|
||||
}
|
||||
|
||||
.option-card {
|
||||
background: var(--bg-card-solid);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 40rpx;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.option-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 32rpx;
|
||||
display: block;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.option-group {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.option-btn {
|
||||
flex: 1;
|
||||
min-width: 160rpx;
|
||||
height: 128rpx;
|
||||
background: var(--bg-card);
|
||||
border: 3rpx solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.option-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.option-btn.selected {
|
||||
background: var(--primary-opacity-10);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.option-label {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 8rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ========== 上传按钮 ========== */
|
||||
|
||||
.file-actions {
|
||||
margin-top: 32px;
|
||||
margin-top: 56rpx;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: var(--primary-gradient);
|
||||
color: #fff;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
border-radius: 48px;
|
||||
height: 100rpx;
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 24px rgba(90, 147, 223, 0.3);
|
||||
transition: all var(--transition-base);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.upload-btn::after {
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 122, 255, 0.25);
|
||||
transition: all var(--transition-scale);
|
||||
letter-spacing: 1rpx;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-btn:active {
|
||||
transform: scale(0.97);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.upload-btn[disabled] {
|
||||
background: linear-gradient(135deg, #c5cede 0%, #b0bccf 100%);
|
||||
background: var(--border-primary);
|
||||
color: var(--text-tertiary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 进度条 */
|
||||
/* ========== 进度条 ========== */
|
||||
|
||||
.progress-area {
|
||||
margin-top: 24px;
|
||||
margin-top: 48rpx;
|
||||
animation: fadeIn 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--primary-color);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: 26rpx;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
height: 12rpx;
|
||||
background: var(--border-light);
|
||||
border-radius: 4px;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--primary-gradient);
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 6rpx;
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill::after {
|
||||
@@ -233,46 +333,40 @@ page {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* 提示区域 */
|
||||
/* ========== 提示区域 ========== */
|
||||
|
||||
.tips-section {
|
||||
background: linear-gradient(135deg, #fefcf3 0%, #fdf9f0 100%);
|
||||
background: #FFF9E6;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
margin-top: 32px;
|
||||
border: 1px solid #f5e8c7;
|
||||
padding: 40rpx;
|
||||
margin-top: 56rpx;
|
||||
border: 2rpx solid rgba(255, 214, 102, 0.3);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #b08945;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 32rpx;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 24rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.tips-item:last-child {
|
||||
@@ -281,95 +375,47 @@ page {
|
||||
|
||||
.tips-dot {
|
||||
color: #d4a853;
|
||||
margin-right: 10px;
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.5;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-size: var(--font-size-sm);
|
||||
font-size: 28rpx;
|
||||
color: #8a7340;
|
||||
flex: 1;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 打印选项 */
|
||||
.print-options {
|
||||
margin-top: 32px;
|
||||
}
|
||||
/* ========== 动画 ========== */
|
||||
|
||||
.option-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--border-light);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.option-title {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.option-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.option-btn {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
height: 72px;
|
||||
background: #f8f9fb;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.option-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.option-btn.selected {
|
||||
background: rgba(90, 147, 223, 0.1);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.option-label {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transform: translateY(-20rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 装饰光晕 ========== */
|
||||
|
||||
.upload-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -200rpx;
|
||||
right: -200rpx;
|
||||
width: 800rpx;
|
||||
height: 800rpx;
|
||||
background: radial-gradient(circle, rgba(0, 122, 255, 0.06) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -1,58 +1,70 @@
|
||||
/* ============================================
|
||||
首页样式 - 爱印通
|
||||
首页样式 - 爱印通 Apple Liquid Glass 设计系统
|
||||
大字体大控件版本 - 微信小程序优化
|
||||
============================================ */
|
||||
|
||||
@import '../../styles/variables.css';
|
||||
|
||||
page {
|
||||
background: linear-gradient(180deg, #e8f0fe 0%, #f0f5ff 30%, #fafbfc 100%);
|
||||
background: var(--bg-page-gradient);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.index-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 140px;
|
||||
/* 增加底部填充，确保内容不被TabBar遮挡 */
|
||||
padding-bottom: 320rpx;
|
||||
position: relative;
|
||||
/* 创建独立的堆叠上下文，确保毛玻璃效果正确渲染 */
|
||||
z-index: 0;
|
||||
/* 确保背景正确传递，避免毛玻璃效果失效 */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 头部区域 */
|
||||
/* ========== 头部区域 ========== */
|
||||
|
||||
.header {
|
||||
background: var(--primary-gradient);
|
||||
padding: 100px 32px 80px;
|
||||
padding: 192rpx 48rpx 144rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 40px 40px;
|
||||
border-radius: 0 0 64rpx 64rpx;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -15%;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
top: -20%;
|
||||
right: -10%;
|
||||
width: 600rpx;
|
||||
height: 600rpx;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
animation: float 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
filter: blur(80rpx);
|
||||
}
|
||||
|
||||
.header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20%;
|
||||
left: -10%;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
bottom: -15%;
|
||||
left: -5%;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
animation: float 8s ease-in-out infinite reverse;
|
||||
animation: float 8s cubic-bezier(0.4, 0, 0.2, 1) infinite reverse;
|
||||
filter: blur(60rpx);
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) scale(1.05);
|
||||
transform: translateY(-30rpx) scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,101 +76,140 @@ page {
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 48px;
|
||||
font-size: 88rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 4px;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
color: #7279be;
|
||||
letter-spacing: 4rpx;
|
||||
text-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.15);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
font-size: 24px;
|
||||
font-size: 36rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-top: 8px;
|
||||
letter-spacing: 2px;
|
||||
margin-top: 16rpx;
|
||||
letter-spacing: 2rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 登录按钮区域 */
|
||||
/* ========== 登录按钮 ========== */
|
||||
|
||||
.login-section {
|
||||
padding: 0 32px;
|
||||
margin-top: -30px;
|
||||
padding: 0 48rpx;
|
||||
margin-top: -48rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
animation: slideUp 0.5s ease forwards;
|
||||
animation: fadeInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(90, 147, 223, 0.2);
|
||||
color: var(--primary-color);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
padding: 24px 0;
|
||||
border-radius: 50px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all var(--transition-base);
|
||||
letter-spacing: 2px;
|
||||
background: var(--bg-glass-heavy);
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
/* 增强的多层边框描边 */
|
||||
border: 3rpx solid rgba(0, 122, 255, 0.3);
|
||||
outline: 1rpx solid rgba(255, 255, 255, 0.8);
|
||||
outline-offset: -4rpx;
|
||||
color: var(--primary);
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
padding: 40rpx 0;
|
||||
border-radius: var(--radius-xl);
|
||||
/* 增强的阴影效果 */
|
||||
box-shadow:
|
||||
0 8rpx 32rpx rgba(0, 122, 255, 0.15),
|
||||
0 2rpx 8rpx rgba(0, 0, 0, 0.06),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.9),
|
||||
inset 0 -1rpx 0 rgba(0, 122, 255, 0.1);
|
||||
transition: all var(--transition-scale);
|
||||
letter-spacing: 2rpx;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
border: none;
|
||||
/* 按钮内部光泽效果 */
|
||||
.login-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2rpx;
|
||||
left: 2rpx;
|
||||
right: 2rpx;
|
||||
height: 50%;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
border-radius: var(--radius-lg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
transform: scale(0.97);
|
||||
transform: scale(0.98);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-color: rgba(0, 122, 255, 0.5);
|
||||
box-shadow:
|
||||
0 4rpx 16rpx rgba(0, 122, 255, 0.1),
|
||||
0 1rpx 4rpx rgba(0, 0, 0, 0.04),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* 用户卡片 */
|
||||
/* ========== 用户卡片 ========== */
|
||||
|
||||
.user-section {
|
||||
padding: 0 32px;
|
||||
margin-top: -30px;
|
||||
padding: 0 48rpx;
|
||||
margin-top: -48rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
animation: slideUp 0.5s ease forwards;
|
||||
animation: fadeInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
background: var(--bg-glass-heavy);
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 24px;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.user-card:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-right: 20px;
|
||||
margin-right: 32rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 6rpx solid var(--bg-card-solid);
|
||||
box-shadow: var(--shadow-md);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
background: var(--primary-gradient);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 4px 12px rgba(90, 147, 223, 0.3);
|
||||
border: 6rpx solid var(--bg-card-solid);
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 56rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.user-detail {
|
||||
@@ -166,191 +217,328 @@ page {
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: var(--font-size-xl);
|
||||
font-size: 36rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.user-balance {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.logout-btn-small {
|
||||
background: #f5f5f7;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--font-size-xs);
|
||||
padding: 10px 20px;
|
||||
border-radius: 24px;
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-secondary);
|
||||
font-size: 26rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: var(--radius-full);
|
||||
border: none;
|
||||
transition: all var(--transition-base);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.logout-btn-small:active {
|
||||
background: #e8e8ea;
|
||||
background: var(--border-primary);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 快捷操作 */
|
||||
/* ========== 快捷操作区域 ========== */
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
padding: 32px 24px 0;
|
||||
gap: 16px;
|
||||
justify-content: space-around;
|
||||
padding: 48rpx 32rpx;
|
||||
gap: 24rpx;
|
||||
animation: fadeInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
|
||||
opacity: 0;
|
||||
/* 启用GPU加速，确保滚动时毛玻璃效果正常 */
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
/* 快捷操作按钮 - 简化样式，避免与TabBar毛玻璃冲突 */
|
||||
.action-item {
|
||||
flex: 1;
|
||||
background: var(--bg-card);
|
||||
/* 使用实心背景色，避免与TabBar毛玻璃效果叠加 */
|
||||
background: var(--bg-card-solid);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 28px 12px;
|
||||
padding: 40rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 2rpx solid var(--border-light);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
min-height: 200rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 主操作按钮（上传文件）特殊样式 */
|
||||
.action-item.primary {
|
||||
background: var(--primary-gradient);
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 122, 255, 0.3);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.action-item:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 64rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-item.primary .action-text {
|
||||
color: var(--primary) !important;
|
||||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.business-card {
|
||||
background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 40rpx 28rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all var(--transition-base);
|
||||
border: 1px solid var(--border-light);
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-item::before {
|
||||
.business-card:nth-child(1) { animation-delay: 0.25s; }
|
||||
.business-card:nth-child(2) { animation-delay: 0.3s; }
|
||||
.business-card:nth-child(3) { animation-delay: 0.35s; }
|
||||
.business-card:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
/* 卡片顶部装饰色条 */
|
||||
.business-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--primary-gradient);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-base);
|
||||
height: 6rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action-item:active {
|
||||
.business-card.doc::before {
|
||||
background: linear-gradient(90deg, #007AFF, #5AC8FA);
|
||||
}
|
||||
|
||||
.business-card.image::before {
|
||||
background: linear-gradient(90deg, #5856D6, #AF52DE);
|
||||
}
|
||||
|
||||
.business-card.archive::before {
|
||||
background: linear-gradient(90deg, #FF9500, #FFCC00);
|
||||
}
|
||||
|
||||
.business-card.scan::before {
|
||||
background: linear-gradient(90deg, #34C759, #30D158);
|
||||
}
|
||||
|
||||
.business-card:active {
|
||||
transform: scale(0.96);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.action-item:active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.action-item.primary {
|
||||
background: var(--primary-gradient);
|
||||
box-shadow: 0 8px 24px rgba(90, 147, 223, 0.3);
|
||||
}
|
||||
|
||||
.action-item.primary .action-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-item.primary .action-icon {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #f0f5ff 0%, #e8eefa 100%);
|
||||
.business-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
transition: all var(--transition-base);
|
||||
font-size: 52rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
.business-card.doc .business-icon {
|
||||
background: linear-gradient(135deg, #E8F0FE 0%, #D0DCFA 100%);
|
||||
}
|
||||
|
||||
/* 价目表 */
|
||||
.business-card.image .business-icon {
|
||||
background: linear-gradient(135deg, #EDE8FD 0%, #D8D0F8 100%);
|
||||
}
|
||||
|
||||
.business-card.archive .business-icon {
|
||||
background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
|
||||
}
|
||||
|
||||
.business-card.scan .business-icon {
|
||||
background: linear-gradient(135deg, #E8F8EC 0%, #C8F5D0 100%);
|
||||
}
|
||||
|
||||
.business-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.business-desc {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 8rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ========== 价目表 ========== */
|
||||
|
||||
.price-section {
|
||||
padding: 28px 24px 0;
|
||||
padding: 48rpx 32rpx 0;
|
||||
animation: fadeInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.price-table {
|
||||
background: var(--bg-card);
|
||||
background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
padding: 40rpx;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--border-light);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 价目表顶部装饰线 */
|
||||
.price-table::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
background: var(--primary-gradient);
|
||||
}
|
||||
|
||||
/* 价目表底部装饰 */
|
||||
.price-table::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(0,122,255,0.06) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
.price-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 12px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
margin-bottom: 32rpx;
|
||||
padding-left: 24rpx;
|
||||
border-left: 6rpx solid var(--primary);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.price-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.price-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 24rpx;
|
||||
border-radius: var(--radius-md);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.price-item:nth-child(odd) {
|
||||
background: #fafbfc;
|
||||
background: rgba(0, 122, 255, 0.04);
|
||||
}
|
||||
|
||||
.price-item:nth-child(even) {
|
||||
background: var(--bg-card);
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
|
||||
.price-name {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: 30rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--error-color);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: 32rpx;
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 使用提示 */
|
||||
/* ========== 使用提示 ========== */
|
||||
|
||||
.tips-section {
|
||||
padding: 28px 24px;
|
||||
margin-top: 12px;
|
||||
padding: 48rpx 32rpx;
|
||||
margin-top: 24rpx;
|
||||
animation: fadeInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
background: linear-gradient(135deg, #fefcf3 0%, #fdf9f0 100%);
|
||||
background: linear-gradient(145deg, #FFF9E6 0%, #FFF8E1 50%, #FFFDE7 100%);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
border: 1px solid #f5e8c7;
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 40rpx;
|
||||
border: 2rpx solid rgba(255, 214, 102, 0.4);
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 214, 102, 0.15);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 提示卡片右上角装饰 */
|
||||
.tips-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: radial-gradient(circle, rgba(255, 214, 102, 0.15) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: #b08945;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #8B6914;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 32rpx;
|
||||
letter-spacing: -0.3px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
gap: 24rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tips-item:last-child {
|
||||
@@ -358,48 +546,65 @@ page {
|
||||
}
|
||||
|
||||
.tips-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: linear-gradient(135deg, #d4a853 0%, #c49a47 100%);
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: linear-gradient(135deg, #D4A853 0%, #C49A47 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-right: 12px;
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(196, 154, 71, 0.4);
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-size: var(--font-size-sm);
|
||||
color: #8a7340;
|
||||
line-height: 1.5;
|
||||
font-size: 28rpx;
|
||||
color: #6B5210;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes slideUp {
|
||||
/* ========== 装饰光晕 - 使用 absolute 确保毛玻璃效果正确 ========== */
|
||||
|
||||
.index-page::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -300rpx;
|
||||
right: -300rpx;
|
||||
width: 1000rpx;
|
||||
height: 1000rpx;
|
||||
background: radial-gradient(circle, rgba(0, 122, 255, 0.08) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.index-page::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -200rpx;
|
||||
left: -200rpx;
|
||||
width: 800rpx;
|
||||
height: 800rpx;
|
||||
background: radial-gradient(circle, rgba(90, 200, 250, 0.06) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* ========== 进入动画 ========== */
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transform: translateY(40rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 装饰光晕 */
|
||||
.index-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(125, 179, 245, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { View, Text, Button, Image } from "@tarojs/components";
|
||||
import Taro from '@tarojs/taro';
|
||||
import TabBar from '../../components/TabBar/TabBar';
|
||||
import './index.css';
|
||||
|
||||
interface UserInfo {
|
||||
@@ -9,20 +10,102 @@ interface UserInfo {
|
||||
balance: number;
|
||||
}
|
||||
|
||||
interface PriceItem {
|
||||
name: string;
|
||||
price: string;
|
||||
}
|
||||
|
||||
interface TipItem {
|
||||
text: string;
|
||||
}
|
||||
|
||||
// 常量数据移到组件外部，避免重复创建
|
||||
const PRICE_LIST: PriceItem[] = [
|
||||
{ name: 'A4黑白打印', price: '¥一万谷地券/页' },
|
||||
{ name: 'A4彩色打印', price: '¥一万武陵券/页' },
|
||||
{ name: 'A3黑白打印', price: '¥一万汤汤券/页' },
|
||||
{ name: 'A3彩色打印', price: '¥一万打湿的汤汤券/页' },
|
||||
{ name: '照片打印', price: '¥648/张' },
|
||||
];
|
||||
|
||||
const TIPS_LIST: TipItem[] = [
|
||||
{ text: '支持 Word、PDF、图片等格式' },
|
||||
{ text: '请选择合适的打印规格' },
|
||||
{ text: '打印完成后请及时取走文件' },
|
||||
];
|
||||
|
||||
// 提取公共导航逻辑（异步版本）
|
||||
const navigateWithAuth = async (targetUrl: string, loginUrl = '/pages/login/index') => {
|
||||
try {
|
||||
const { data: storedUser } = await Taro.getStorage({ key: 'userInfo' });
|
||||
if (!storedUser) {
|
||||
Taro.navigateTo({ url: loginUrl });
|
||||
return false;
|
||||
}
|
||||
Taro.navigateTo({ url: targetUrl });
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('检查登录状态失败:', error);
|
||||
Taro.navigateTo({ url: loginUrl });
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 用户卡片组件
|
||||
const UserCard: React.FC<{ userInfo: UserInfo; onLogout: () => void }> = ({ userInfo, onLogout }) => {
|
||||
const userInitials = userInfo.nickname[0]?.toUpperCase() || 'U';
|
||||
|
||||
return (
|
||||
<View className='user-section'>
|
||||
<View className='user-card'>
|
||||
<View className='avatar-wrapper'>
|
||||
{userInfo.avatar ? (
|
||||
<Image className='avatar-img' src={userInfo.avatar} mode='aspectFill' />
|
||||
) : (
|
||||
<View className='avatar-placeholder'>
|
||||
<Text className='avatar-text'>{userInitials}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View className='user-detail'>
|
||||
<Text className='user-name'>{userInfo.nickname}</Text>
|
||||
<Text className='user-balance'>余额: ¥{userInfo.balance.toFixed(2)}</Text>
|
||||
</View>
|
||||
<Button className='logout-btn-small' onClick={onLogout}>退出</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
// 登录区域组件
|
||||
const LoginSection: React.FC<{ onLogin: () => void }> = ({ onLogin }) => (
|
||||
<View className='login-section'>
|
||||
<Button className='login-btn' onClick={onLogin}>登录 / 注册</Button>
|
||||
</View>
|
||||
);
|
||||
|
||||
const Index = () => {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
|
||||
const [tabIndex, setTabIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
checkLoginStatus();
|
||||
}, []);
|
||||
|
||||
const checkLoginStatus = useCallback(() => {
|
||||
const storedUser = Taro.getStorageSync('userInfo');
|
||||
if (storedUser) {
|
||||
setIsLoggedIn(true);
|
||||
setUserInfo(storedUser);
|
||||
} else {
|
||||
// 使用异步存储操作
|
||||
const checkLoginStatus = useCallback(async () => {
|
||||
try {
|
||||
const { data: storedUser } = await Taro.getStorage({ key: 'userInfo' });
|
||||
if (storedUser) {
|
||||
setIsLoggedIn(true);
|
||||
setUserInfo(storedUser);
|
||||
} else {
|
||||
setIsLoggedIn(false);
|
||||
setUserInfo(null);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error);
|
||||
setIsLoggedIn(false);
|
||||
setUserInfo(null);
|
||||
}
|
||||
@@ -32,29 +115,18 @@ const Index = () => {
|
||||
Taro.navigateTo({ url: '/pages/login/index' });
|
||||
}, []);
|
||||
|
||||
// 使用公共导航函数
|
||||
const handleUpload = useCallback(() => {
|
||||
if (!isLoggedIn) {
|
||||
Taro.navigateTo({ url: '/pages/login/index' });
|
||||
return;
|
||||
}
|
||||
Taro.navigateTo({ url: '/pages/file/upload/index' });
|
||||
}, [isLoggedIn]);
|
||||
navigateWithAuth('/pages/file/upload/index');
|
||||
}, []);
|
||||
|
||||
const handleMyFiles = useCallback(() => {
|
||||
if (!isLoggedIn) {
|
||||
Taro.navigateTo({ url: '/pages/login/index' });
|
||||
return;
|
||||
}
|
||||
Taro.navigateTo({ url: '/pages/file/index' });
|
||||
}, [isLoggedIn]);
|
||||
navigateWithAuth('/pages/file/index');
|
||||
}, []);
|
||||
|
||||
const handleMyOrders = useCallback(() => {
|
||||
if (!isLoggedIn) {
|
||||
Taro.navigateTo({ url: '/pages/login/index' });
|
||||
return;
|
||||
}
|
||||
Taro.navigateTo({ url: '/pages/order/index' });
|
||||
}, [isLoggedIn]);
|
||||
navigateWithAuth('/pages/order/index');
|
||||
}, []);
|
||||
|
||||
const handleLogout = useCallback(() => {
|
||||
Taro.showModal({
|
||||
@@ -72,25 +144,6 @@ const Index = () => {
|
||||
});
|
||||
}, []);
|
||||
|
||||
const priceList = useMemo(() => [
|
||||
{ name: 'A4黑白打印', price: '¥0.10/页' },
|
||||
{ name: 'A4彩色打印', price: '¥0.30/页' },
|
||||
{ name: 'A3黑白打印', price: '¥0.20/页' },
|
||||
{ name: 'A3彩色打印', price: '¥0.60/页' },
|
||||
{ name: '照片打印', price: '¥2.00/张' },
|
||||
], []);
|
||||
|
||||
const tipsList = useMemo(() => [
|
||||
'支持 Word、PDF、图片等格式',
|
||||
'请选择合适的打印规格',
|
||||
'打印完成后请及时取走文件',
|
||||
], []);
|
||||
|
||||
const userInitials = useMemo(() => {
|
||||
if (!userInfo?.nickname) return 'U';
|
||||
return userInfo.nickname[0]?.toUpperCase() || 'U';
|
||||
}, [userInfo?.nickname]);
|
||||
|
||||
return (
|
||||
<View className='index-page'>
|
||||
<View className='header'>
|
||||
@@ -101,28 +154,9 @@ const Index = () => {
|
||||
</View>
|
||||
|
||||
{isLoggedIn && userInfo ? (
|
||||
<View className='user-section'>
|
||||
<View className='user-card'>
|
||||
<View className='avatar-wrapper'>
|
||||
{userInfo.avatar ? (
|
||||
<Image className='avatar-img' src={userInfo.avatar} mode='aspectFill' />
|
||||
) : (
|
||||
<View className='avatar-placeholder'>
|
||||
<Text className='avatar-text'>{userInitials}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View className='user-detail'>
|
||||
<Text className='user-name'>{userInfo.nickname}</Text>
|
||||
<Text className='user-balance'>余额: ¥{userInfo.balance.toFixed(2)}</Text>
|
||||
</View>
|
||||
<Button className='logout-btn-small' onClick={handleLogout}>退出</Button>
|
||||
</View>
|
||||
</View>
|
||||
<UserCard userInfo={userInfo} onLogout={handleLogout} />
|
||||
) : (
|
||||
<View className='login-section'>
|
||||
<Button className='login-btn' onClick={handleLogin}>登录 / 注册</Button>
|
||||
</View>
|
||||
<LoginSection onLogin={handleLogin} />
|
||||
)}
|
||||
|
||||
<View className='quick-actions'>
|
||||
@@ -144,7 +178,7 @@ const Index = () => {
|
||||
<View className='price-table'>
|
||||
<Text className='price-title'>价目表</Text>
|
||||
<View className='price-list'>
|
||||
{priceList.map((item, index) => (
|
||||
{PRICE_LIST.map((item, index) => (
|
||||
<View key={index} className='price-item'>
|
||||
<Text className='price-name'>{item.name}</Text>
|
||||
<Text className='price-value'>{item.price}</Text>
|
||||
@@ -157,14 +191,16 @@ const Index = () => {
|
||||
<View className='tips-section'>
|
||||
<View className='tips-card'>
|
||||
<Text className='tips-title'>使用提示</Text>
|
||||
{tipsList.map((tip, index) => (
|
||||
{TIPS_LIST.map((tip, index) => (
|
||||
<View key={index} className='tips-item'>
|
||||
<Text className='tips-number'>{index + 1}</Text>
|
||||
<Text className='tips-text'>{tip}</Text>
|
||||
<Text className='tips-text'>{tip.text}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<TabBar current={tabIndex} onChange={setTabIndex} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,97 +1,140 @@
|
||||
/* ============================================
|
||||
登录页面样式 - 爱印通
|
||||
登录页面样式 - 爱印通 Apple Liquid Glass 设计系统
|
||||
大字体大控件版本 - 微信小程序优化
|
||||
============================================ */
|
||||
|
||||
@import '../../styles/variables.css';
|
||||
|
||||
page {
|
||||
background: linear-gradient(180deg, #e8f0fe 0%, #f0f5ff 30%, #fafbfc 100%);
|
||||
background: var(--bg-page-gradient);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
padding: 100px 32px 60px;
|
||||
padding: 160rpx 48rpx 96rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 头部区域 */
|
||||
/* ========== 头部区域 ========== */
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
animation: fadeInDown 0.6s ease forwards;
|
||||
margin-bottom: 80rpx;
|
||||
animation: fadeInDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
background: var(--primary-gradient);
|
||||
border-radius: 24px;
|
||||
border-radius: var(--radius-xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 8px 24px rgba(90, 147, 223, 0.3);
|
||||
font-size: 40px;
|
||||
margin: 0 auto 40rpx;
|
||||
box-shadow: 0 16rpx 48rpx rgba(0, 122, 255, 0.25);
|
||||
font-size: 72rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-logo::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
|
||||
animation: logoShimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes logoShimmer {
|
||||
0%, 100% { left: -100%; }
|
||||
50% { left: 100%; }
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 40px;
|
||||
font-size: 64rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: -0.5px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 16rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 24px;
|
||||
font-size: 30rpx;
|
||||
color: var(--text-tertiary);
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 表单卡片 */
|
||||
/* ========== 表单卡片 ========== */
|
||||
|
||||
.login-form {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 36px 28px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
animation: slideUp 0.6s ease 0.2s forwards;
|
||||
background: var(--bg-glass-heavy);
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: 64rpx 48rpx;
|
||||
box-shadow: var(--shadow-xl);
|
||||
border: 1px solid var(--glass-border);
|
||||
animation: springUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes springUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(60rpx) scale(0.95);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10rpx) scale(1.01);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: var(--font-size-base);
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
padding-left: 4px;
|
||||
margin-bottom: 16rpx;
|
||||
padding-left: 8rpx;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
background: #f8f9fb;
|
||||
height: 96rpx;
|
||||
background: var(--glass-background);
|
||||
backdrop-filter: blur(32rpx);
|
||||
-webkit-backdrop-filter: blur(32rpx);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 24px;
|
||||
font-size: var(--font-size-base);
|
||||
padding: 0 32rpx;
|
||||
font-size: 32rpx;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border: 2rpx solid var(--border-primary);
|
||||
transition: all var(--transition-base);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(90, 147, 223, 0.1);
|
||||
border-color: var(--primary);
|
||||
background: var(--bg-card-solid);
|
||||
box-shadow: 0 0 0 6rpx var(--primary-opacity-20);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
@@ -99,17 +142,19 @@ page {
|
||||
}
|
||||
|
||||
.form-error {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--error-color);
|
||||
margin-top: 8px;
|
||||
font-size: 26rpx;
|
||||
color: var(--error);
|
||||
margin-top: 12rpx;
|
||||
display: block;
|
||||
padding-left: 4px;
|
||||
padding-left: 8rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 验证码输入区域 */
|
||||
/* ========== 验证码输入 ========== */
|
||||
|
||||
.code-input-wrapper {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.code-input {
|
||||
@@ -117,212 +162,337 @@ page {
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
width: 140px;
|
||||
height: 88px;
|
||||
background: var(--primary-gradient);
|
||||
color: #fff;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
width: 220rpx;
|
||||
height: 96rpx;
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all var(--transition-base);
|
||||
transition: all var(--transition-scale);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.code-btn::after {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.2);
|
||||
}
|
||||
|
||||
.code-btn:active {
|
||||
transform: scale(0.96);
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.code-btn[disabled],
|
||||
.code-btn.disabled {
|
||||
background: linear-gradient(135deg, #c5cede 0%, #b0bccf 100%);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
background: var(--border-primary);
|
||||
color: var(--text-tertiary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
/* ========== 登录按钮 ========== */
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: var(--primary-gradient);
|
||||
color: #fff;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
border-radius: 48px;
|
||||
height: 88rpx;
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 32px;
|
||||
box-shadow: 0 8px 24px rgba(90, 147, 223, 0.3);
|
||||
transition: all var(--transition-base);
|
||||
letter-spacing: 2px;
|
||||
margin-top: 48rpx;
|
||||
/* 增强的多层边框描边 */
|
||||
border: 3rpx solid rgba(0, 122, 255, 0.5);
|
||||
outline: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
outline-offset: -3rpx;
|
||||
/* 增强的阴影效果 */
|
||||
box-shadow:
|
||||
0 8rpx 32rpx rgba(0, 122, 255, 0.3),
|
||||
0 2rpx 8rpx rgba(0, 0, 0, 0.1),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.3),
|
||||
inset 0 -1rpx 0 rgba(0, 0, 0, 0.1);
|
||||
transition: all var(--transition-scale);
|
||||
letter-spacing: 1rpx;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
border: none;
|
||||
/* 按钮内部光泽效果 */
|
||||
.login-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.login-btn:active::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
transform: scale(0.97);
|
||||
box-shadow: 0 4px 12px rgba(90, 147, 223, 0.2);
|
||||
transform: scale(0.98);
|
||||
border-color: rgba(0, 122, 255, 0.7);
|
||||
box-shadow:
|
||||
0 4rpx 16rpx rgba(0, 122, 255, 0.2),
|
||||
0 1rpx 4rpx rgba(0, 0, 0, 0.08),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.login-btn[disabled],
|
||||
.login-btn.disabled {
|
||||
background: linear-gradient(135deg, #c5cede 0%, #b0bccf 100%);
|
||||
background: var(--border-primary);
|
||||
color: var(--text-tertiary);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
/* ========== 用户协议复选框 ========== */
|
||||
|
||||
.agreement-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-top: 40rpx;
|
||||
padding: 24rpx;
|
||||
background: rgba(0, 122, 255, 0.03);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(0, 122, 255, 0.08);
|
||||
}
|
||||
|
||||
.agreement-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checkbox-input {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 3rpx solid var(--border-primary);
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-base);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.checkbox-input.checked {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
color: #fff;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-input.checked .checkbox-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.agreement-text .link {
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ========== 分割线 ========== */
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 36px 0;
|
||||
margin: 48rpx 0;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border-primary);
|
||||
height: 2rpx;
|
||||
background: var(--border-separator);
|
||||
}
|
||||
|
||||
.divider-text {
|
||||
padding: 0 20px;
|
||||
font-size: var(--font-size-xs);
|
||||
padding: 0 32rpx;
|
||||
font-size: 26rpx;
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 微信登录按钮 */
|
||||
/* ========== 微信登录按钮 ========== */
|
||||
|
||||
.wechat-btn {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
|
||||
color: #fff;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-radius: 48px;
|
||||
height: 88rpx;
|
||||
background: #07C160;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 24px rgba(7, 193, 96, 0.3);
|
||||
transition: all var(--transition-base);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.wechat-btn::after {
|
||||
box-shadow: 0 8rpx 32rpx rgba(7, 193, 96, 0.25);
|
||||
transition: all var(--transition-scale);
|
||||
letter-spacing: 1rpx;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wechat-btn:active {
|
||||
transform: scale(0.97);
|
||||
transform: scale(0.98);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* 底部链接 */
|
||||
/* ========== 底部链接 ========== */
|
||||
|
||||
.login-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
margin-top: 64rpx;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 28rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--primary-color);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: 28rpx;
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
/* 昵称弹窗 */
|
||||
.link-text:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ========== 昵称弹窗 ========== */
|
||||
|
||||
.nickname-modal {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 48px 32px;
|
||||
margin-top: 100px;
|
||||
background: var(--bg-glass-heavy);
|
||||
backdrop-filter: blur(64rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(64rpx) saturate(180%);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: 72rpx 56rpx;
|
||||
margin-top: 160rpx;
|
||||
box-shadow: var(--shadow-xl);
|
||||
animation: modalIn 0.3s ease forwards;
|
||||
border: 1px solid var(--glass-border);
|
||||
animation: modalSpringIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes modalIn {
|
||||
from {
|
||||
@keyframes modalSpringIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(20px);
|
||||
transform: scale(0.9) translateY(40rpx);
|
||||
}
|
||||
to {
|
||||
60% {
|
||||
transform: scale(1.02) translateY(-10rpx);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
font-size: var(--font-size-base);
|
||||
font-size: 30rpx;
|
||||
color: var(--text-tertiary);
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 56rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
background: #f8f9fb;
|
||||
height: 96rpx;
|
||||
background: var(--glass-background);
|
||||
backdrop-filter: blur(32rpx);
|
||||
-webkit-backdrop-filter: blur(32rpx);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 24px;
|
||||
font-size: var(--font-size-base);
|
||||
padding: 0 32rpx;
|
||||
font-size: 32rpx;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
margin-bottom: 24px;
|
||||
border: 2rpx solid var(--border-primary);
|
||||
margin-bottom: 40rpx;
|
||||
transition: all var(--transition-base);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.nickname-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(90, 147, 223, 0.1);
|
||||
border-color: var(--primary);
|
||||
background: var(--bg-card-solid);
|
||||
box-shadow: 0 0 0 6rpx var(--primary-opacity-20);
|
||||
}
|
||||
|
||||
.nickname-input::placeholder {
|
||||
color: var(--text-placeholder);
|
||||
}
|
||||
|
||||
.submit-nickname-btn {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: var(--primary-gradient);
|
||||
color: #fff;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
border-radius: 48px;
|
||||
height: 88rpx;
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 24px rgba(90, 147, 223, 0.3);
|
||||
}
|
||||
|
||||
.submit-nickname-btn::after {
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 122, 255, 0.25);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-scale);
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
.submit-nickname-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* ========== 动画 ========== */
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
transform: translateY(-32rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -330,38 +500,30 @@ page {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/* ========== 装饰光晕 ========== */
|
||||
|
||||
/* 装饰元素 */
|
||||
.login-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: radial-gradient(circle, rgba(125, 179, 245, 0.15) 0%, transparent 70%);
|
||||
top: -300rpx;
|
||||
right: -300rpx;
|
||||
width: 800rpx;
|
||||
height: 800rpx;
|
||||
background: radial-gradient(circle, rgba(0, 122, 255, 0.08) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-page::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: -50px;
|
||||
left: -50px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: radial-gradient(circle, rgba(125, 179, 245, 0.1) 0%, transparent 70%);
|
||||
bottom: -200rpx;
|
||||
left: -200rpx;
|
||||
width: 700rpx;
|
||||
height: 700rpx;
|
||||
background: radial-gradient(circle, rgba(90, 200, 250, 0.06) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -1,51 +1,66 @@
|
||||
/* ============================================
|
||||
订单列表页面样式 - 爱印通
|
||||
订单列表页面样式 - 爱印通 Apple Liquid Glass 设计系统
|
||||
大字体大控件版本 - 微信小程序优化
|
||||
============================================ */
|
||||
|
||||
@import '../../styles/variables.css';
|
||||
|
||||
page {
|
||||
background: linear-gradient(180deg, #e8f0fe 0%, #f0f5ff 30%, #fafbfc 100%);
|
||||
background: var(--bg-page-gradient);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.order-page {
|
||||
min-height: 100vh;
|
||||
padding: 32px 24px 140px;
|
||||
padding: 48rpx 32rpx 280rpx;
|
||||
position: relative;
|
||||
/* 创建独立的堆叠上下文，确保毛玻璃效果正确渲染 */
|
||||
z-index: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
/* ========== 页面头部 ========== */
|
||||
|
||||
.order-header {
|
||||
margin-bottom: 24px;
|
||||
animation: fadeInDown 0.4s ease forwards;
|
||||
margin-bottom: 40rpx;
|
||||
animation: fadeInDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
/* 订单状态筛选 */
|
||||
/* ========== 状态筛选 ========== */
|
||||
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 48rpx;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
padding-bottom: 8rpx;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.status-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status-tab {
|
||||
padding: 10px 20px;
|
||||
border-radius: 24px;
|
||||
font-size: var(--font-size-sm);
|
||||
padding: 16rpx 36rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 28rpx;
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border: 2rpx solid var(--border-primary);
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition-fast);
|
||||
transition: all var(--transition-base);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-tab:active {
|
||||
@@ -53,48 +68,78 @@ page {
|
||||
}
|
||||
|
||||
.status-tab.active {
|
||||
background: var(--primary-gradient);
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 12px rgba(90, 147, 223, 0.2);
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
/* 订单列表 */
|
||||
/* ========== 订单列表 ========== */
|
||||
|
||||
.order-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
/* ========== 订单卡片 - 明显的分界设计 ========== */
|
||||
|
||||
.order-item {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--border-light);
|
||||
/* 确保有足够的背景色让毛玻璃效果正确渲染 */
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 0;
|
||||
box-shadow:
|
||||
0 8rpx 32rpx rgba(0, 0, 0, 0.08),
|
||||
0 2rpx 8rpx rgba(0, 0, 0, 0.04),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
|
||||
border: 2rpx solid var(--glass-border);
|
||||
transition: all var(--transition-base);
|
||||
animation: slideUp 0.4s ease forwards;
|
||||
animation: fadeInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
/* 创建独立的堆叠上下文，确保毛玻璃效果正确渲染 */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.order-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.order-item:nth-child(2) { animation-delay: 0.15s; }
|
||||
.order-item:nth-child(3) { animation-delay: 0.2s; }
|
||||
/* 订单间的分隔线效果 */
|
||||
.order-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -16rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60%;
|
||||
height: 2rpx;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
var(--border-separator) 20%,
|
||||
var(--border-separator) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.order-item:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.order-item:nth-child(1) { animation-delay: 0.05s; }
|
||||
.order-item:nth-child(2) { animation-delay: 0.1s; }
|
||||
.order-item:nth-child(3) { animation-delay: 0.15s; }
|
||||
.order-item:nth-child(4) { animation-delay: 0.2s; }
|
||||
.order-item:nth-child(5) { animation-delay: 0.25s; }
|
||||
|
||||
.order-item:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
box-shadow:
|
||||
0 4rpx 16rpx rgba(0, 0, 0, 0.06),
|
||||
0 1rpx 4rpx rgba(0, 0, 0, 0.03),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* 订单顶部 */
|
||||
@@ -102,72 +147,201 @@ page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
padding: 28rpx 32rpx;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.9) 0%,
|
||||
rgba(255, 255, 255, 0.7) 100%
|
||||
);
|
||||
border-bottom: 1rpx solid var(--border-separator);
|
||||
}
|
||||
|
||||
.order-id {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 26rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 500;
|
||||
font-family: 'SF Mono', monospace;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
}
|
||||
|
||||
.order-status.pending {
|
||||
background: rgba(250, 173, 20, 0.1);
|
||||
color: var(--warning-color);
|
||||
background: rgba(255, 149, 0, 0.1);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.order-status.processing {
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
color: var(--info-color);
|
||||
background: var(--primary-opacity-10);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.order-status.completed {
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
color: var(--success-color);
|
||||
background: rgba(52, 199, 89, 0.1);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.order-status.cancelled {
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
color: var(--error-color);
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
/* 订单中部 */
|
||||
.order-middle {
|
||||
margin-bottom: 16px;
|
||||
/* ========== 订单主体 - 左右分栏布局 ========== */
|
||||
|
||||
.order-main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
padding: 32rpx;
|
||||
gap: 24rpx;
|
||||
min-height: 180rpx;
|
||||
}
|
||||
|
||||
/* 左侧信息区域 */
|
||||
.order-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 40rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: var(--font-size-md);
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.order-detail {
|
||||
font-size: var(--font-size-sm);
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.order-detail::before {
|
||||
content: '📄';
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.printer-name {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 8rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ========== 右侧封面预览区域 ========== */
|
||||
|
||||
.order-cover {
|
||||
width: 140rpx;
|
||||
height: 180rpx;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(0, 122, 255, 0.05) 0%,
|
||||
rgba(0, 122, 255, 0.1) 100%
|
||||
);
|
||||
border: 2rpx solid var(--border-light);
|
||||
box-shadow:
|
||||
inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05),
|
||||
0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.8) 0%,
|
||||
rgba(240, 240, 240, 0.6) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.cover-icon {
|
||||
font-size: 48rpx;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cover-text {
|
||||
font-size: 20rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 封面预览悬停效果 */
|
||||
.order-cover::before {
|
||||
content: '👁️';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
font-size: 32rpx;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.order-cover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.order-item:active .order-cover::before {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.order-item:active .order-cover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 订单底部 */
|
||||
@@ -175,69 +349,61 @@ page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-light);
|
||||
padding: 24rpx 32rpx;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.6) 0%,
|
||||
rgba(255, 255, 255, 0.4) 100%
|
||||
);
|
||||
border-top: 1rpx solid var(--border-separator);
|
||||
}
|
||||
|
||||
.order-price {
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--error-color);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 40rpx;
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.order-price::before {
|
||||
content: '合计 ';
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.order-time {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100px 0;
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
}
|
||||
/* ========== 订单操作按钮 ========== */
|
||||
|
||||
.empty-icon {
|
||||
font-size: 100px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--text-tertiary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-placeholder);
|
||||
}
|
||||
|
||||
/* 订单操作按钮 */
|
||||
.order-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-light);
|
||||
gap: 20rpx;
|
||||
padding: 24rpx 32rpx 32rpx;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.4) 0%,
|
||||
rgba(255, 255, 255, 0.2) 100%
|
||||
);
|
||||
border-top: 1rpx dashed var(--border-light);
|
||||
}
|
||||
|
||||
.order-action-btn {
|
||||
flex: 1;
|
||||
height: 64px;
|
||||
height: 76rpx;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-sm);
|
||||
border: none;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.order-action-btn::after {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
transition: all var(--transition-scale);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.order-action-btn:active {
|
||||
@@ -245,85 +411,71 @@ page {
|
||||
}
|
||||
|
||||
.order-action-btn.primary {
|
||||
background: var(--primary-gradient);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 12px rgba(90, 147, 223, 0.2);
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.order-action-btn.secondary {
|
||||
background: #f5f5f7;
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-secondary);
|
||||
border: 2rpx solid var(--border-primary);
|
||||
}
|
||||
|
||||
/* 进度指示器 */
|
||||
.order-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 16px 0;
|
||||
}
|
||||
/* ========== 空状态 ========== */
|
||||
|
||||
.progress-step {
|
||||
flex: 1;
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-step::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--border-light);
|
||||
}
|
||||
|
||||
.progress-step:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-step.completed::before {
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
.progress-dot {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: var(--text-tertiary);
|
||||
z-index: 1;
|
||||
padding: 120rpx 40rpx;
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
}
|
||||
|
||||
.progress-step.completed .progress-dot {
|
||||
background: var(--success-color);
|
||||
color: #fff;
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.progress-step.current .progress-dot {
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
animation: pulse 2s ease infinite;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.progress-step.completed .progress-label,
|
||||
.progress-step.current .progress-label {
|
||||
.empty-text {
|
||||
font-size: 36rpx;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ========== 动画 ========== */
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(32rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -333,22 +485,55 @@ page {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
/* ========== 响应式适配 ========== */
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
.order-main {
|
||||
padding: 24rpx;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
||||
.order-cover {
|
||||
width: 120rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
/* ========== 深色模式适配 ========== */
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.order-top {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(50, 50, 50, 0.9) 0%,
|
||||
rgba(40, 40, 40, 0.7) 100%
|
||||
);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
|
||||
.order-bottom {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(50, 50, 50, 0.6) 0%,
|
||||
rgba(40, 40, 40, 0.4) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(60, 60, 60, 0.8) 0%,
|
||||
rgba(50, 50, 50, 0.6) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.order-cover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(0, 122, 255, 0.1) 0%,
|
||||
rgba(0, 122, 255, 0.15) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, Button } from "@tarojs/components";
|
||||
import { View, Text, Button, Image } from "@tarojs/components";
|
||||
import Taro from '@tarojs/taro';
|
||||
import TabBar from '../../components/TabBar/TabBar';
|
||||
import './index.css';
|
||||
|
||||
interface OrderItem {
|
||||
@@ -14,9 +15,12 @@ interface OrderItem {
|
||||
status: string;
|
||||
statusColor: string;
|
||||
time: string;
|
||||
coverImage?: string; // 封面预览图
|
||||
fileType?: string; // 文件类型
|
||||
}
|
||||
|
||||
const OrderIndex = () => {
|
||||
const [tabIndex, setTabIndex] = useState(1); // 订单页面使用订单标签（索引1）
|
||||
const [orders] = useState<OrderItem[]>([
|
||||
{
|
||||
id: 10001,
|
||||
@@ -28,7 +32,9 @@ const OrderIndex = () => {
|
||||
totalPrice: 0.10,
|
||||
status: '已完成',
|
||||
statusColor: '#52c41a',
|
||||
time: '2026-03-30 10:30'
|
||||
time: '2026-03-30 10:30',
|
||||
coverImage: '', // 可设置为实际封面图URL
|
||||
fileType: 'docx'
|
||||
},
|
||||
{
|
||||
id: 10002,
|
||||
@@ -40,7 +46,23 @@ const OrderIndex = () => {
|
||||
totalPrice: 1.20,
|
||||
status: '打印中',
|
||||
statusColor: '#1890ff',
|
||||
time: '2026-03-29 15:20'
|
||||
time: '2026-03-29 15:20',
|
||||
coverImage: '',
|
||||
fileType: 'pdf'
|
||||
},
|
||||
{
|
||||
id: 10003,
|
||||
fileName: '课程大纲.pptx',
|
||||
printerName: '教学楼C打印机',
|
||||
printType: 'A4',
|
||||
colorType: '彩色',
|
||||
copies: 1,
|
||||
totalPrice: 0.80,
|
||||
status: '待支付',
|
||||
statusColor: '#faad14',
|
||||
time: '2026-03-28 09:15',
|
||||
coverImage: '',
|
||||
fileType: 'pptx'
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -50,6 +72,23 @@ const OrderIndex = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// 获取文件类型图标
|
||||
const getFileIcon = (fileType?: string) => {
|
||||
const iconMap: Record<string, string> = {
|
||||
'pdf': '📄',
|
||||
'docx': '📝',
|
||||
'doc': '📝',
|
||||
'pptx': '📊',
|
||||
'ppt': '📊',
|
||||
'xlsx': '📈',
|
||||
'xls': '📈',
|
||||
'jpg': '🖼️',
|
||||
'jpeg': '🖼️',
|
||||
'png': '🖼️',
|
||||
};
|
||||
return iconMap[fileType || ''] || '📄';
|
||||
};
|
||||
|
||||
return (
|
||||
<View className='order-page'>
|
||||
<View className='order-header'>
|
||||
@@ -60,15 +99,41 @@ const OrderIndex = () => {
|
||||
<View className='order-list'>
|
||||
{orders.map(order => (
|
||||
<View key={order.id} className='order-item' onClick={() => handleViewDetail(order.id)}>
|
||||
{/* 订单头部：订单号和状态 */}
|
||||
<View className='order-top'>
|
||||
<Text className='order-id'>订单号: {order.id}</Text>
|
||||
<Text className='order-status' style={{ color: order.statusColor }}>{order.status}</Text>
|
||||
</View>
|
||||
<View className='order-middle'>
|
||||
<Text className='file-name'>{order.fileName}</Text>
|
||||
<Text className='order-detail'>{order.printType} {order.colorType} × {order.copies}份</Text>
|
||||
<Text className='printer-name'>📍 {order.printerName}</Text>
|
||||
|
||||
{/* 订单主体：左侧信息 + 右侧封面 */}
|
||||
<View className='order-main'>
|
||||
<View className='order-info'>
|
||||
<View className='file-info'>
|
||||
<Text className='file-icon'>{getFileIcon(order.fileType)}</Text>
|
||||
<Text className='file-name'>{order.fileName}</Text>
|
||||
</View>
|
||||
<Text className='order-detail'>{order.printType} {order.colorType} × {order.copies}份</Text>
|
||||
<Text className='printer-name'>📍 {order.printerName}</Text>
|
||||
</View>
|
||||
|
||||
{/* 右侧封面预览 */}
|
||||
<View className='order-cover'>
|
||||
{order.coverImage ? (
|
||||
<Image
|
||||
className='cover-image'
|
||||
src={order.coverImage}
|
||||
mode='aspectFill'
|
||||
/>
|
||||
) : (
|
||||
<View className='cover-placeholder'>
|
||||
<Text className='cover-icon'>{getFileIcon(order.fileType)}</Text>
|
||||
<Text className='cover-text'>预览</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 订单底部：价格和时间 */}
|
||||
<View className='order-bottom'>
|
||||
<Text className='order-price'>¥{order.totalPrice.toFixed(2)}</Text>
|
||||
<Text className='order-time'>{order.time}</Text>
|
||||
@@ -83,6 +148,8 @@ const OrderIndex = () => {
|
||||
<Text className='empty-hint'>上传文件即可创建订单</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TabBar current={tabIndex} onChange={setTabIndex} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,58 +1,65 @@
|
||||
/* ============================================
|
||||
用户中心页面样式 - 爱印通
|
||||
用户中心页面样式 - 爱印通 Apple Liquid Glass 设计系统
|
||||
大字体大控件版本 - 微信小程序优化
|
||||
============================================ */
|
||||
|
||||
@import '../../styles/variables.css';
|
||||
|
||||
page {
|
||||
background: linear-gradient(180deg, #e8f0fe 0%, #f0f5ff 30%, #fafbfc 100%);
|
||||
background: var(--bg-page-gradient);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.user-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 140px;
|
||||
padding-bottom: 280rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 用户头部 */
|
||||
/* ========== 用户头部 ========== */
|
||||
|
||||
.user-header {
|
||||
background: var(--primary-gradient);
|
||||
padding: 80px 32px 60px;
|
||||
padding: 160rpx 48rpx 128rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 40px 40px;
|
||||
border-radius: 0 0 64rpx 64rpx;
|
||||
}
|
||||
|
||||
.user-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -15%;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
top: -20%;
|
||||
right: -10%;
|
||||
width: 600rpx;
|
||||
height: 600rpx;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
animation: float 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
filter: blur(80rpx);
|
||||
}
|
||||
|
||||
.user-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20%;
|
||||
left: -10%;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
bottom: -15%;
|
||||
left: -5%;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
animation: float 8s ease-in-out infinite reverse;
|
||||
animation: float 8s cubic-bezier(0.4, 0, 0.2, 1) infinite reverse;
|
||||
filter: blur(60rpx);
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) scale(1.05);
|
||||
transform: translateY(-30rpx) scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,62 +72,76 @@ page {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
/* ========== 头像 ========== */
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(20rpx);
|
||||
-webkit-backdrop-filter: blur(20rpx);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
margin-bottom: 32rpx;
|
||||
border: 6rpx solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.avatar:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.avatar-default {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(20rpx);
|
||||
-webkit-backdrop-filter: blur(20rpx);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.4);
|
||||
margin-bottom: 32rpx;
|
||||
border: 6rpx solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 72rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
font-size: 48px;
|
||||
opacity: 0.8;
|
||||
font-size: 80rpx;
|
||||
opacity: 0.85;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 用户信息 */
|
||||
/* ========== 用户信息 ========== */
|
||||
|
||||
.nickname {
|
||||
font-size: var(--font-size-2xl);
|
||||
color: #fff;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
font-size: 44rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12rpx;
|
||||
text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.balance {
|
||||
font-size: var(--font-size-base);
|
||||
font-size: 30rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 登录提示 */
|
||||
.login-text {
|
||||
font-size: var(--font-size-lg);
|
||||
color: #fff;
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: 34rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@@ -128,22 +149,26 @@ page {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 菜单区域 */
|
||||
/* ========== 菜单区域 ========== */
|
||||
|
||||
.menu-section {
|
||||
margin: 24px;
|
||||
background: var(--bg-card);
|
||||
margin: 40rpx 32rpx;
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: blur(48rpx) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(48rpx) saturate(180%);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px 22px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
padding: 36rpx 40rpx;
|
||||
border-bottom: 1px solid var(--border-separator);
|
||||
transition: background var(--transition-fast);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
@@ -154,11 +179,42 @@ page {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.menu-icon-wrapper {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 28rpx;
|
||||
flex-shrink: 0;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.menu-icon-wrapper.primary {
|
||||
background: linear-gradient(135deg, #e8f0fe 0%, #d0dcfa 100%);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.menu-icon-wrapper.success {
|
||||
background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.menu-icon-wrapper.warning {
|
||||
background: linear-gradient(135deg, #fffbeb 0%, #fde68a 100%);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.menu-icon-wrapper.error {
|
||||
background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 32px;
|
||||
margin-right: 16px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 40rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -166,85 +222,87 @@ page {
|
||||
|
||||
.menu-title {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-base);
|
||||
font-size: 32rpx;
|
||||
color: var(--text-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-value {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--error-color);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-right: 8px;
|
||||
font-size: 32rpx;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 24px;
|
||||
color: var(--text-placeholder);
|
||||
font-size: 36rpx;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 退出登录 */
|
||||
/* ========== 退出登录 ========== */
|
||||
|
||||
.logout-section {
|
||||
padding: 0 24px;
|
||||
margin-top: 32px;
|
||||
padding: 0 32rpx;
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
height: 100rpx;
|
||||
background: var(--bg-card);
|
||||
color: var(--error-color);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-radius: 44px;
|
||||
color: var(--error);
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(255, 77, 79, 0.15);
|
||||
border: 2rpx solid rgba(255, 59, 48, 0.15);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.logout-btn::after {
|
||||
border: none;
|
||||
transition: all var(--transition-scale);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logout-btn:active {
|
||||
transform: scale(0.97);
|
||||
background: #fff5f5;
|
||||
transform: scale(0.98);
|
||||
background: #fef2f2;
|
||||
border-color: rgba(255, 59, 48, 0.25);
|
||||
}
|
||||
|
||||
/* 菜单项图标容器 */
|
||||
.menu-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
}
|
||||
/* ========== 余额高亮 ========== */
|
||||
|
||||
.menu-icon-wrapper.primary {
|
||||
background: linear-gradient(135deg, #e8f0fe 0%, #d0dcfa 100%);
|
||||
}
|
||||
|
||||
.menu-icon-wrapper.success {
|
||||
background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
|
||||
}
|
||||
|
||||
.menu-icon-wrapper.warning {
|
||||
background: linear-gradient(135deg, #fffbe6 0%, #ffe58f 100%);
|
||||
}
|
||||
|
||||
.menu-icon-wrapper.error {
|
||||
background: linear-gradient(135deg, #fff1f0 0%, #ffccc7 100%);
|
||||
}
|
||||
|
||||
/* 余额高亮 */
|
||||
.balance-highlight {
|
||||
background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
|
||||
background: linear-gradient(135deg, #FF3B30 0%, #FF453A 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ========== 装饰光晕 ========== */
|
||||
|
||||
.user-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -300rpx;
|
||||
right: -300rpx;
|
||||
width: 1000rpx;
|
||||
height: 1000rpx;
|
||||
background: radial-gradient(circle, rgba(0, 122, 255, 0.08) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.user-page::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: -200rpx;
|
||||
left: -200rpx;
|
||||
width: 800rpx;
|
||||
height: 800rpx;
|
||||
background: radial-gradient(circle, rgba(90, 200, 250, 0.06) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { View, Text, Button } from "@tarojs/components";
|
||||
import Taro from '@tarojs/taro';
|
||||
import TabBar from '../../components/TabBar/TabBar';
|
||||
import './index.css';
|
||||
|
||||
interface UserInfo {
|
||||
@@ -12,6 +13,7 @@ interface UserInfo {
|
||||
const UserIndex = () => {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
|
||||
const [tabIndex, setTabIndex] = useState(4); // 用户中心是第5个标签（索引4）
|
||||
|
||||
useEffect(() => {
|
||||
checkLoginStatus();
|
||||
@@ -109,6 +111,8 @@ const UserIndex = () => {
|
||||
<Button className='logout-btn' onClick={handleLogout}>退出登录</Button>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TabBar current={tabIndex} onChange={setTabIndex} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,28 +1,47 @@
|
||||
/* ============================================
|
||||
微交互和动画效果 - 爱印通
|
||||
微交互和动画效果 - 爱印通 Apple Liquid Glass 设计系统
|
||||
0.3s 缓动曲线、缩放效果、透明度变化
|
||||
============================================ */
|
||||
|
||||
@import './variables.css';
|
||||
|
||||
/* ============================================
|
||||
进入动画
|
||||
核心缓动曲线 - 苹果风格
|
||||
============================================ */
|
||||
|
||||
/* 淡入 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
/* 标准缓动 - 用于大多数过渡 */
|
||||
.ease-standard {
|
||||
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
/* 弹性缓动 - 用于悬浮/强调效果 */
|
||||
.ease-bounce {
|
||||
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
/* 缩放缓动 - 用于按钮点击 */
|
||||
.ease-scale {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 平滑缓动 - 用于页面切换 */
|
||||
.ease-smooth {
|
||||
transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
进入动画 - 淡入上浮系列
|
||||
============================================ */
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* 淡入上浮 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -30,11 +49,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 淡入下沉 */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -42,11 +60,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 从左淡入 */
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
transform: translateX(-16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -54,11 +71,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 从右淡入 */
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
transform: translateX(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -66,8 +82,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 缩放淡入 */
|
||||
@keyframes scaleIn {
|
||||
/* 缩放淡入 - 苹果风格弹窗 */
|
||||
@keyframes scaleFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
@@ -78,203 +94,447 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗动画 */
|
||||
@keyframes modalIn {
|
||||
/* 弹性缩放淡入 */
|
||||
@keyframes springScaleIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗动画 - 从底部弹出 */
|
||||
@keyframes sheetSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(20px);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗关闭 */
|
||||
@keyframes modalOut {
|
||||
@keyframes sheetSlideDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 模态框动画 */
|
||||
@keyframes modalEnter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modalExit {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(20px);
|
||||
transform: scale(0.95) translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
持续动画
|
||||
持续动画 - 微妙效果
|
||||
============================================ */
|
||||
|
||||
/* 脉冲 */
|
||||
/* 轻微脉冲 - 用于重要提示 */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 轻微脉冲 */
|
||||
@keyframes pulseSoft {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
opacity: 0.9;
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
|
||||
/* 闪烁 */
|
||||
@keyframes blink {
|
||||
/* 呼吸效果 - 用于光晕 */
|
||||
@keyframes breathe {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.2);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
box-shadow: 0 0 0 8px rgba(0, 122, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 旋转 */
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 摇摆 */
|
||||
@keyframes swing {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 浮动 */
|
||||
/* 悬浮效果 - 用于卡片 */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹跳 */
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 光泽扫过 */
|
||||
@keyframes shimmer {
|
||||
/* 光泽扫过 - 用于玻璃效果 */
|
||||
@keyframes glassShimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
background-position: -200% center;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 进度条动画 */
|
||||
@keyframes progressStripes {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
/* 液态波动 */
|
||||
@keyframes liquidWave {
|
||||
0% {
|
||||
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||||
}
|
||||
to {
|
||||
background-position: 40px 0;
|
||||
50% {
|
||||
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
|
||||
}
|
||||
100% {
|
||||
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 旋转 */
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 摇摆 - 用于错误提示 */
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
|
||||
20%, 40%, 60%, 80% { transform: translateX(4px); }
|
||||
}
|
||||
|
||||
/* 弹跳通知 */
|
||||
@keyframes notificationBounce {
|
||||
0% {
|
||||
transform: scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 进度条光泽 */
|
||||
@keyframes progressGlide {
|
||||
from { background-position: -40px 0; }
|
||||
to { background-position: 0 0; }
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
交互动画类
|
||||
交互动画 - 点击反馈
|
||||
============================================ */
|
||||
|
||||
/* 点击反馈 */
|
||||
.tap-feedback {
|
||||
transition: transform 0.15s ease, opacity 0.15s ease;
|
||||
/* 按钮点击缩放 - 0.98 缩放 */
|
||||
.btn-press {
|
||||
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.tap-feedback:active {
|
||||
transform: scale(0.96);
|
||||
.btn-press:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 悬停反馈（用于支持hover的设备） */
|
||||
/* 卡片点击反馈 */
|
||||
.card-press {
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-press:active {
|
||||
transform: scale(0.99);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* 悬浮抬升 - 支持 hover 的设备 */
|
||||
@media (hover: hover) {
|
||||
.hover-elevate {
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
.hover-lift {
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.hover-elevate:hover {
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.hover-lift-strong:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片进入动画 */
|
||||
.animate-card-enter {
|
||||
animation: fadeInUp 0.4s ease forwards;
|
||||
/* 玻璃态悬浮 */
|
||||
@media (hover: hover) {
|
||||
.glass-hover {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.glass-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(32px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(200%);
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表项动画延迟 */
|
||||
.animate-stagger-1 { animation-delay: 0.05s; }
|
||||
.animate-stagger-2 { animation-delay: 0.1s; }
|
||||
.animate-stagger-3 { animation-delay: 0.15s; }
|
||||
.animate-stagger-4 { animation-delay: 0.2s; }
|
||||
.animate-stagger-5 { animation-delay: 0.25s; }
|
||||
|
||||
/* ============================================
|
||||
加载状态动画
|
||||
滚动时工具栏透明度变化
|
||||
============================================ */
|
||||
|
||||
/* 加载旋转器 */
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid var(--border-light);
|
||||
border-top-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
/* 导航栏滚动效果 */
|
||||
.nav-scroll-aware {
|
||||
transition: background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
backdrop-filter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.nav-scroll-aware.scrolled {
|
||||
background: var(--bg-glass-heavy);
|
||||
backdrop-filter: blur(32px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(200%);
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.nav-scroll-aware.scrolled-dark {
|
||||
background: var(--bg-glass-heavy);
|
||||
backdrop-filter: blur(32px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(200%);
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
实用动画类
|
||||
============================================ */
|
||||
|
||||
/* 淡入 */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
/* 淡入上浮 */
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
/* 淡入下沉 */
|
||||
.animate-fade-in-down {
|
||||
animation: fadeInDown 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
/* 淡入左移 */
|
||||
.animate-fade-in-left {
|
||||
animation: fadeInLeft 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
/* 淡入右移 */
|
||||
.animate-fade-in-right {
|
||||
animation: fadeInRight 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
/* 缩放淡入 */
|
||||
.animate-scale-in {
|
||||
animation: scaleFadeIn 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
/* 弹性缩放 */
|
||||
.animate-spring-in {
|
||||
animation: springScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
/* 脉冲 */
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* 呼吸光晕 */
|
||||
.animate-breathe {
|
||||
animation: breathe 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* 悬浮 */
|
||||
.animate-float {
|
||||
animation: float 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
/* 旋转 */
|
||||
.animate-spin {
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.loading-spinner.small {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-width: 2px;
|
||||
/* 摇摆 */
|
||||
.animate-shake {
|
||||
animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.loading-spinner.large {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-width: 4px;
|
||||
/* 弹跳通知 */
|
||||
.animate-bounce-in {
|
||||
animation: notificationBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
/* 骨架屏动画 */
|
||||
/* 光泽扫过 */
|
||||
.animate-shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.6) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: glassShimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
延迟动画 - 错峰效果
|
||||
============================================ */
|
||||
|
||||
.delay-50 { animation-delay: 50ms; }
|
||||
.delay-100 { animation-delay: 100ms; }
|
||||
.delay-150 { animation-delay: 150ms; }
|
||||
.delay-200 { animation-delay: 200ms; }
|
||||
.delay-250 { animation-delay: 250ms; }
|
||||
.delay-300 { animation-delay: 300ms; }
|
||||
.delay-350 { animation-delay: 350ms; }
|
||||
.delay-400 { animation-delay: 400ms; }
|
||||
.delay-450 { animation-delay: 450ms; }
|
||||
.delay-500 { animation-delay: 500ms; }
|
||||
|
||||
/* 列表项错峰动画 */
|
||||
.stagger-1 { animation-delay: calc(var(--delay-base, 0ms) + 0ms); }
|
||||
.stagger-2 { animation-delay: calc(var(--delay-base, 0ms) + 50ms); }
|
||||
.stagger-3 { animation-delay: calc(var(--delay-base, 0ms) + 100ms); }
|
||||
.stagger-4 { animation-delay: calc(var(--delay-base, 0ms) + 150ms); }
|
||||
.stagger-5 { animation-delay: calc(var(--delay-base, 0ms) + 200ms); }
|
||||
.stagger-6 { animation-delay: calc(var(--delay-base, 0ms) + 250ms); }
|
||||
.stagger-7 { animation-delay: calc(var(--delay-base, 0ms) + 300ms); }
|
||||
.stagger-8 { animation-delay: calc(var(--delay-base, 0ms) + 350ms); }
|
||||
|
||||
/* ============================================
|
||||
过渡效果类
|
||||
============================================ */
|
||||
|
||||
.transition-all {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.transition-fast {
|
||||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.transition-slow {
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition: color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
border-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.transition-shadow {
|
||||
transition: box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.transition-background {
|
||||
transition: background 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
backdrop-filter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
页面切换动画
|
||||
============================================ */
|
||||
|
||||
.page-enter {
|
||||
animation: fadeInRight 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
.page-exit {
|
||||
animation: fadeInLeft 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) reverse forwards;
|
||||
}
|
||||
|
||||
/* 模态框 */
|
||||
.modal-overlay-enter {
|
||||
animation: fadeIn 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
.modal-content-enter {
|
||||
animation: modalEnter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
.modal-overlay-exit {
|
||||
animation: fadeIn 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) reverse forwards;
|
||||
}
|
||||
|
||||
.modal-content-exit {
|
||||
animation: modalExit 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
/* 底部弹 sheet */
|
||||
.sheet-enter {
|
||||
animation: sheetSlideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
|
||||
}
|
||||
|
||||
.sheet-exit {
|
||||
animation: sheetSlideDown 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
骨架屏动画
|
||||
============================================ */
|
||||
|
||||
.skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#f0f0f0 25%,
|
||||
#e8e8e8 50%,
|
||||
#f0f0f0 75%
|
||||
var(--border-light) 25%,
|
||||
var(--bg-hover) 50%,
|
||||
var(--border-light) 75%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
animation: glassShimmer 1.5s infinite;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
@@ -283,13 +543,13 @@
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.skeleton-text.short {
|
||||
width: 60%;
|
||||
}
|
||||
.skeleton-text.short { width: 40%; }
|
||||
.skeleton-text.medium { width: 60%; }
|
||||
.skeleton-text.long { width: 80%; }
|
||||
|
||||
.skeleton-title {
|
||||
height: 24px;
|
||||
width: 40%;
|
||||
width: 50%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@@ -299,172 +559,118 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.skeleton-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.skeleton-button {
|
||||
height: 44px;
|
||||
width: 120px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
状态指示器动画
|
||||
加载指示器
|
||||
============================================ */
|
||||
|
||||
/* 成功动画 */
|
||||
@keyframes successCheck {
|
||||
0% {
|
||||
stroke-dashoffset: 100;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2.5px solid var(--border-primary);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
/* 错误抖动 */
|
||||
@keyframes shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
.loading-spinner.sm {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
/* 通知弹跳 */
|
||||
@keyframes notificationBounce {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
.loading-spinner.lg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
/* 点加载器 */
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-dots span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: loadingDot 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
|
||||
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes loadingDot {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.6);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
实用动画类
|
||||
成功/错误状态动画
|
||||
============================================ */
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease forwards;
|
||||
/* 成功勾选 */
|
||||
@keyframes successCheck {
|
||||
0% { stroke-dashoffset: 100; }
|
||||
100% { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.4s ease forwards;
|
||||
.success-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: rgba(52, 199, 89, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: scaleFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fadeInDown 0.4s ease forwards;
|
||||
.success-icon svg {
|
||||
stroke: var(--success);
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scaleIn 0.3s ease forwards;
|
||||
.success-icon svg circle {
|
||||
stroke-dasharray: 166;
|
||||
stroke-dashoffset: 166;
|
||||
animation: successCheck 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s ease infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-soft {
|
||||
animation: pulseSoft 3s ease infinite;
|
||||
}
|
||||
|
||||
.animate-blink {
|
||||
animation: blink 1s ease infinite;
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.animate-swing {
|
||||
animation: swing 1s ease infinite;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: shake 0.5s ease;
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
.success-icon svg path {
|
||||
stroke-dasharray: 48;
|
||||
stroke-dashoffset: 48;
|
||||
animation: successCheck 0.3s 0.4s ease forwards;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
过渡效果
|
||||
可见性工具类
|
||||
============================================ */
|
||||
|
||||
.transition-all {
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.transition-fast {
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.transition-slow {
|
||||
transition: all var(--transition-slow);
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
页面切换动画
|
||||
============================================ */
|
||||
|
||||
.page-enter {
|
||||
animation: fadeInRight 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.page-leave {
|
||||
animation: fadeInLeft 0.3s ease reverse forwards;
|
||||
}
|
||||
|
||||
/* 模态框动画 */
|
||||
.modal-overlay-enter {
|
||||
animation: fadeIn 0.2s ease forwards;
|
||||
}
|
||||
|
||||
.modal-content-enter {
|
||||
animation: modalIn 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.modal-overlay-leave {
|
||||
animation: fadeIn 0.2s ease reverse forwards;
|
||||
}
|
||||
|
||||
.modal-content-leave {
|
||||
animation: modalOut 0.2s ease forwards;
|
||||
}
|
||||
.visible { visibility: visible; }
|
||||
.invisible { visibility: hidden; }
|
||||
.collapse { visibility: collapse; }
|
||||
|
||||
@@ -1,294 +1,574 @@
|
||||
/* ============================================
|
||||
全局通用样式 - 爱印通
|
||||
全局通用样式 - 爱印通 Apple Liquid Glass 设计系统
|
||||
针对微信小程序优化：大字体、大控件、rpx 单位
|
||||
============================================ */
|
||||
|
||||
@import './variables.css';
|
||||
|
||||
/* 重置样式 */
|
||||
/* ========== 基础重置 ========== */
|
||||
page {
|
||||
background: var(--bg-page);
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
|
||||
'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', sans-serif;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-body);
|
||||
line-height: var(--line-height-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 通用容器 */
|
||||
.container {
|
||||
/* ========== 容器系统 ========== */
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-page-gradient);
|
||||
}
|
||||
|
||||
.content-container {
|
||||
padding: 0 var(--spacing-lg);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 通用卡片 */
|
||||
.common-card {
|
||||
.scroll-container {
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* ========== 卡片系统 - 液态玻璃材质 ========== */
|
||||
|
||||
.glass-card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--border-glass);
|
||||
margin-bottom: var(--spacing-md);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
background: var(--bg-card-solid);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid var(--border-light);
|
||||
margin-bottom: var(--spacing-md);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
/* 通用按钮 */
|
||||
.common-btn {
|
||||
.floating-card:hover {
|
||||
box-shadow: var(--shadow-xl);
|
||||
transform: translateY(-4rpx);
|
||||
}
|
||||
|
||||
.compact-card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-glass);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-md);
|
||||
padding-bottom: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--border-separator);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: var(--font-size-title3);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: var(--font-size-subbody);
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
/* ========== 按钮系统 - 大尺寸，统一高度 ========== */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
height: 88rpx;
|
||||
padding: 0 var(--spacing-xl);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-body);
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-scale);
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.common-btn:active {
|
||||
transform: scale(0.97);
|
||||
.btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.common-btn.primary {
|
||||
background: var(--primary-gradient);
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.2);
|
||||
}
|
||||
|
||||
.common-btn.outline {
|
||||
.btn-primary:active {
|
||||
opacity: 0.9;
|
||||
box-shadow: var(--shadow-pressed);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
border: 1px solid var(--primary-color);
|
||||
color: var(--primary);
|
||||
border: 3rpx solid var(--primary);
|
||||
}
|
||||
|
||||
.common-btn.ghost {
|
||||
background: rgba(90, 147, 223, 0.1);
|
||||
color: var(--primary-color);
|
||||
.btn-secondary:active {
|
||||
background: var(--primary-opacity-10);
|
||||
}
|
||||
|
||||
.common-btn.danger {
|
||||
background: linear-gradient(135deg, #ff7875 0%, #ff4d4f 100%);
|
||||
.btn-ghost {
|
||||
background: var(--primary-opacity-10);
|
||||
color: var(--primary);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-ghost:active {
|
||||
background: var(--primary-opacity-20);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--error);
|
||||
color: var(--text-inverse);
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 59, 48, 0.2);
|
||||
}
|
||||
|
||||
.common-btn.disabled,
|
||||
.common-btn[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
.btn-danger:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 通用输入框 */
|
||||
.common-input {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
background: #f8f9fb;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
/* 按钮尺寸 */
|
||||
.btn-sm {
|
||||
height: 64rpx;
|
||||
padding: 0 var(--spacing-md);
|
||||
font-size: var(--font-size-base);
|
||||
font-size: var(--font-size-callout);
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
height: 100rpx;
|
||||
padding: 0 var(--spacing-2xl);
|
||||
font-size: var(--font-size-title3);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 88rpx;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-icon.btn-sm {
|
||||
width: 64rpx;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 输入框系统 - 大尺寸 ========== */
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: var(--glass-background);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 var(--spacing-md);
|
||||
font-size: var(--font-size-body);
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-base);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.common-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(90, 147, 223, 0.1);
|
||||
}
|
||||
|
||||
.common-input::placeholder {
|
||||
.input::placeholder {
|
||||
color: var(--text-placeholder);
|
||||
}
|
||||
|
||||
/* 通用标签 */
|
||||
.common-tag {
|
||||
.input:focus {
|
||||
border-color: var(--primary);
|
||||
background: var(--bg-card-solid);
|
||||
box-shadow: 0 0 0 6rpx var(--primary-opacity-20);
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
opacity: 0.5;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
padding-left: 80rpx;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: var(--spacing-md);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-tertiary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
background: var(--glass-background);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
font-size: var(--font-size-body);
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-base);
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
.textarea:focus {
|
||||
border-color: var(--primary);
|
||||
background: var(--bg-card-solid);
|
||||
box-shadow: 0 0 0 6rpx var(--primary-opacity-20);
|
||||
}
|
||||
|
||||
/* ========== 标签系统 ========== */
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-xs);
|
||||
font-size: var(--font-size-xs);
|
||||
gap: 8rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-footnote);
|
||||
font-weight: var(--font-weight-medium);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.common-tag.primary {
|
||||
background: rgba(90, 147, 223, 0.1);
|
||||
color: var(--primary-color);
|
||||
.tag-primary {
|
||||
background: var(--primary-opacity-10);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.common-tag.success {
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
color: var(--success-color);
|
||||
.tag-success {
|
||||
background: rgba(52, 199, 89, 0.1);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.common-tag.warning {
|
||||
background: rgba(250, 173, 20, 0.1);
|
||||
color: var(--warning-color);
|
||||
.tag-warning {
|
||||
background: rgba(255, 149, 0, 0.1);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.common-tag.error {
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
color: var(--error-color);
|
||||
.tag-error {
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.tag-neutral {
|
||||
background: rgba(120, 120, 128, 0.1);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ========== 空状态 ========== */
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-2xl) 0;
|
||||
padding: var(--spacing-4xl) var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state .empty-icon {
|
||||
font-size: 120px;
|
||||
.empty-state-icon {
|
||||
font-size: 128rpx;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
opacity: 0.5;
|
||||
opacity: 0.4;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.empty-state .empty-text {
|
||||
font-size: var(--font-size-lg);
|
||||
.empty-state-title {
|
||||
font-size: var(--font-size-title3);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.empty-state-desc {
|
||||
font-size: var(--font-size-subbody);
|
||||
color: var(--text-tertiary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
max-width: 560rpx;
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
.empty-state .empty-hint {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-placeholder);
|
||||
.empty-state-action {
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
/* ========== 加载状态 ========== */
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-2xl) 0;
|
||||
padding: var(--spacing-4xl) 0;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid var(--border-light);
|
||||
border-top-color: var(--primary-color);
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border: 5rpx solid var(--border-primary);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
.loading-text {
|
||||
margin-top: var(--spacing-md);
|
||||
font-size: var(--font-size-callout);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg,
|
||||
var(--border-light) 25%,
|
||||
var(--bg-hover) 50%,
|
||||
var(--border-light) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s infinite;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* ========== 分割线 ========== */
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: var(--spacing-lg) 0;
|
||||
margin: var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border-primary);
|
||||
background: var(--border-separator);
|
||||
}
|
||||
|
||||
.divider-text {
|
||||
padding: 0 var(--spacing-md);
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: var(--font-size-footnote);
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 文本样式 */
|
||||
.text-primary {
|
||||
color: var(--text-primary);
|
||||
.divider-simple {
|
||||
height: 1px;
|
||||
background: var(--border-separator);
|
||||
margin: var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
/* ========== 文本样式 - 大字体 ========== */
|
||||
|
||||
.text-tertiary {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.text-placeholder {
|
||||
color: var(--text-placeholder);
|
||||
}
|
||||
|
||||
.text-brand {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
/* 字体大小 */
|
||||
.text-xs {
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.text-md {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
/* 字体粗细 */
|
||||
.font-normal {
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
.text-display {
|
||||
font-size: var(--font-size-display);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: -0.5px;
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
/* 间距工具类 */
|
||||
.text-title1 {
|
||||
font-size: var(--font-size-title1);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: -0.3px;
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.text-title2 {
|
||||
font-size: var(--font-size-title2);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
.text-title3 {
|
||||
font-size: var(--font-size-title3);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
.text-body {
|
||||
font-size: var(--font-size-body);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
.text-callout {
|
||||
font-size: var(--font-size-callout);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
.text-subbody {
|
||||
font-size: var(--font-size-subbody);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
.text-footnote {
|
||||
font-size: var(--font-size-footnote);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
.text-caption {
|
||||
font-size: var(--font-size-caption1);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-normal);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.text-primary { color: var(--text-primary); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-tertiary { color: var(--text-tertiary); }
|
||||
.text-placeholder { color: var(--text-placeholder); }
|
||||
|
||||
.text-brand { color: var(--primary); }
|
||||
.text-success { color: var(--success); }
|
||||
.text-warning { color: var(--warning); }
|
||||
.text-error { color: var(--error); }
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.truncate-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ========== 间距工具类 ========== */
|
||||
|
||||
.m-0 { margin: 0; }
|
||||
.m-xs { margin: var(--spacing-xs); }
|
||||
.m-sm { margin: var(--spacing-sm); }
|
||||
.m-md { margin: var(--spacing-md); }
|
||||
.m-lg { margin: var(--spacing-lg); }
|
||||
.m-xl { margin: var(--spacing-xl); }
|
||||
|
||||
.mt-0 { margin-top: 0; }
|
||||
.mt-xs { margin-top: var(--spacing-xs); }
|
||||
.mt-sm { margin-top: var(--spacing-sm); }
|
||||
.mt-md { margin-top: var(--spacing-md); }
|
||||
.mt-lg { margin-top: var(--spacing-lg); }
|
||||
.mt-xl { margin-top: var(--spacing-xl); }
|
||||
|
||||
.mb-0 { margin-bottom: 0; }
|
||||
.mb-xs { margin-bottom: var(--spacing-xs); }
|
||||
.mb-sm { margin-bottom: var(--spacing-sm); }
|
||||
.mb-md { margin-bottom: var(--spacing-md); }
|
||||
.mb-lg { margin-bottom: var(--spacing-lg); }
|
||||
.mb-xl { margin-bottom: var(--spacing-xl); }
|
||||
|
||||
.ml-0 { margin-left: 0; }
|
||||
.ml-xs { margin-left: var(--spacing-xs); }
|
||||
.ml-sm { margin-left: var(--spacing-sm); }
|
||||
.ml-md { margin-left: var(--spacing-md); }
|
||||
.ml-lg { margin-left: var(--spacing-lg); }
|
||||
.ml-xl { margin-left: var(--spacing-xl); }
|
||||
|
||||
.mr-0 { margin-right: 0; }
|
||||
.mr-xs { margin-right: var(--spacing-xs); }
|
||||
.mr-sm { margin-right: var(--spacing-sm); }
|
||||
.mr-md { margin-right: var(--spacing-md); }
|
||||
.mr-lg { margin-right: var(--spacing-lg); }
|
||||
.mr-xl { margin-right: var(--spacing-xl); }
|
||||
|
||||
.p-0 { padding: 0; }
|
||||
.p-xs { padding: var(--spacing-xs); }
|
||||
.p-sm { padding: var(--spacing-sm); }
|
||||
.p-md { padding: var(--spacing-md); }
|
||||
.p-lg { padding: var(--spacing-lg); }
|
||||
.p-xl { padding: var(--spacing-xl); }
|
||||
|
||||
/* Flex布局 */
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.px-0 { padding-left: 0; padding-right: 0; }
|
||||
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
|
||||
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
|
||||
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
|
||||
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
|
||||
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
|
||||
|
||||
.py-0 { padding-top: 0; padding-bottom: 0; }
|
||||
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
|
||||
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
|
||||
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
|
||||
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
|
||||
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
|
||||
|
||||
/* ========== Flex 布局 ========== */
|
||||
|
||||
.flex { display: flex; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
.flex-col { flex-direction: column; }
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
@@ -302,24 +582,135 @@ page {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
.flex-around {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
.flex-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 截断文本 */
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-2 { flex: 2; }
|
||||
.flex-3 { flex: 3; }
|
||||
|
||||
.gap-xs { gap: var(--spacing-xs); }
|
||||
.gap-sm { gap: var(--spacing-sm); }
|
||||
.gap-md { gap: var(--spacing-md); }
|
||||
.gap-lg { gap: var(--spacing-lg); }
|
||||
.gap-xl { gap: var(--spacing-xl); }
|
||||
|
||||
/* ========== 显示控制 ========== */
|
||||
|
||||
.hidden { display: none !important; }
|
||||
.block { display: block; }
|
||||
.inline-block { display: inline-block; }
|
||||
.inline { display: inline; }
|
||||
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.fixed { position: fixed; }
|
||||
.sticky { position: sticky; }
|
||||
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
.overflow-auto { overflow: auto; }
|
||||
.overflow-scroll { overflow: scroll; }
|
||||
|
||||
.rounded-sm { border-radius: var(--radius-sm); }
|
||||
.rounded-md { border-radius: var(--radius-md); }
|
||||
.rounded-lg { border-radius: var(--radius-lg); }
|
||||
.rounded-xl { border-radius: var(--radius-xl); }
|
||||
.rounded-full { border-radius: var(--radius-full); }
|
||||
|
||||
.shadow-sm { box-shadow: var(--shadow-sm); }
|
||||
.shadow-md { box-shadow: var(--shadow-md); }
|
||||
.shadow-lg { box-shadow: var(--shadow-lg); }
|
||||
.shadow-xl { box-shadow: var(--shadow-xl); }
|
||||
|
||||
.cursor-pointer { cursor: pointer; }
|
||||
.cursor-default { cursor: default; }
|
||||
.cursor-not-allowed { cursor: not-allowed; }
|
||||
|
||||
.select-none {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* ========== 安全区域 ========== */
|
||||
|
||||
.safe-area-top {
|
||||
padding-top: constant(safe-area-inset-top);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
/* 安全区域 */
|
||||
.safe-area-bottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
.safe-area-left {
|
||||
padding-left: constant(safe-area-inset-left);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
.safe-area-right {
|
||||
padding-right: constant(safe-area-inset-right);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
|
||||
/* ========== 其他工具类 ========== */
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: var(--radius-full);
|
||||
object-fit: cover;
|
||||
border: 4rpx solid var(--bg-card);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.avatar-sm { width: 64rpx; height: 64rpx; }
|
||||
.avatar-lg { width: 112rpx; height: 112rpx; }
|
||||
.avatar-xl { width: 160rpx; height: 160rpx; }
|
||||
|
||||
/* ========== 滚动条美化 ========== */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-primary);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--primary-opacity-30);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
:focus { outline: none; }
|
||||
|
||||
:focus-visible {
|
||||
outline: 4rpx solid var(--primary);
|
||||
outline-offset: 4rpx;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,151 +1,310 @@
|
||||
/* ============================================
|
||||
全局主题变量 - 爱印通设计系统
|
||||
全局主题变量 - 爱印通 Apple Liquid Glass 设计系统
|
||||
采用苹果设计语言：半透明毛玻璃、圆润悬浮控件、动态光影折射
|
||||
针对微信小程序优化：使用 rpx 单位，大字体大控件
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* 主色调 - 科技蓝 */
|
||||
--primary-color: #5a93df;
|
||||
--primary-light: #7db3f5;
|
||||
--primary-dark: #4a7bc0;
|
||||
--primary-gradient: linear-gradient(135deg, #7db3f5 0%, #5a93df 50%, #4a7bc0 100%);
|
||||
--primary-gradient-light: linear-gradient(135deg, #8ec5f8 0%, #7db3f5 100%);
|
||||
/* ========== 苹果风格主色调 ========== */
|
||||
/* 主色 - 采用苹果系统蓝，更加清新通透 */
|
||||
--primary: #007AFF;
|
||||
--primary-light: #5AC8FA;
|
||||
--primary-dark: #0055D4;
|
||||
--primary-opacity-10: rgba(0, 122, 255, 0.1);
|
||||
--primary-opacity-20: rgba(0, 122, 255, 0.2);
|
||||
--primary-opacity-30: rgba(0, 122, 255, 0.3);
|
||||
|
||||
/* 辅助色 */
|
||||
--success-color: #52c41a;
|
||||
--success-light: #73d13d;
|
||||
--warning-color: #faad14;
|
||||
--warning-light: #ffc53d;
|
||||
--error-color: #ff4d4f;
|
||||
--error-light: #ff7875;
|
||||
--info-color: #1890ff;
|
||||
/* 主色渐变 - 液态玻璃质感 */
|
||||
--primary-gradient: linear-gradient(135deg, #5AC8FA 0%, #007AFF 50%, #0055D4 100%);
|
||||
--primary-gradient-subtle: linear-gradient(135deg, rgba(90, 200, 250, 0.15) 0%, rgba(0, 122, 255, 0.15) 100%);
|
||||
--primary-gradient-glass: linear-gradient(135deg, rgba(90, 200, 250, 0.4) 0%, rgba(0, 122, 255, 0.4) 100%);
|
||||
|
||||
/* 中性色 */
|
||||
--text-primary: #1a1a2e;
|
||||
--text-secondary: #555566;
|
||||
--text-tertiary: #888899;
|
||||
--text-placeholder: #b0b0c0;
|
||||
/* ========== 语义化辅助色 ========== */
|
||||
--success: #34C759;
|
||||
--success-light: #30D158;
|
||||
--warning: #FF9500;
|
||||
--warning-light: #FFB800;
|
||||
--error: #FF3B30;
|
||||
--error-light: #FF453A;
|
||||
--info: #5856D6;
|
||||
|
||||
/* ========== 中性色 - 苹果风格文本层级 ========== */
|
||||
--text-primary: rgba(0, 0, 0, 0.85);
|
||||
--text-secondary: rgba(0, 0, 0, 0.55);
|
||||
--text-tertiary: rgba(0, 0, 0, 0.35);
|
||||
--text-placeholder: rgba(0, 0, 0, 0.25);
|
||||
--text-inverse: #ffffff;
|
||||
--text-inverse-secondary: rgba(255, 255, 255, 0.7);
|
||||
|
||||
/* 背景色 */
|
||||
--bg-page: #f5f7fa;
|
||||
--bg-card: #ffffff;
|
||||
--bg-hover: #f0f4f8;
|
||||
--bg-overlay: rgba(0, 0, 0, 0.45);
|
||||
/* ========== 背景色系统 - 丰富渐变 ========== */
|
||||
--bg-page: #F2F2F7;
|
||||
--bg-page-gradient: linear-gradient(180deg, #E8F0FE 0%, #F2F2F7 40%, #E8E8ED 100%);
|
||||
--bg-card: rgba(255, 255, 255, 0.85);
|
||||
--bg-card-solid: #ffffff;
|
||||
--bg-hover: rgba(0, 122, 255, 0.05);
|
||||
--bg-overlay: rgba(0, 0, 0, 0.4);
|
||||
--bg-glass: rgba(255, 255, 255, 0.72);
|
||||
--bg-glass-heavy: rgba(255, 255, 255, 0.85);
|
||||
|
||||
/* 边框色 */
|
||||
--border-primary: #e5e8f0;
|
||||
--border-light: #f0f2f7;
|
||||
--border-focus: #7db3f5;
|
||||
/* ========== 边框色 - 极细致线 ========== */
|
||||
--border-primary: rgba(0, 0, 0, 0.1);
|
||||
--border-light: rgba(0, 0, 0, 0.05);
|
||||
--border-glass: rgba(255, 255, 255, 0.5);
|
||||
--border-focus: var(--primary);
|
||||
--border-separator: rgba(60, 60, 67, 0.12);
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 2px 8px rgba(90, 147, 223, 0.06);
|
||||
--shadow-md: 0 4px 16px rgba(90, 147, 223, 0.1);
|
||||
--shadow-lg: 0 8px 32px rgba(90, 147, 223, 0.15);
|
||||
--shadow-xl: 0 12px 48px rgba(90, 147, 223, 0.2);
|
||||
/* ========== 阴影系统 - 多层柔和阴影营造漂浮感 ========== */
|
||||
--shadow-ambient: 0 2rpx 6rpx rgba(0, 0, 0, 0.04);
|
||||
--shadow-sm: 0 4rpx 16rpx rgba(0, 0, 0, 0.06), 0 2rpx 4rpx rgba(0, 0, 0, 0.04);
|
||||
--shadow-md: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 4rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
--shadow-lg: 0 16rpx 64rpx rgba(0, 0, 0, 0.1), 0 8rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl: 0 24rpx 96rpx rgba(0, 0, 0, 0.12), 0 12rpx 32rpx rgba(0, 0, 0, 0.06);
|
||||
--shadow-glass: 0 16rpx 64rpx rgba(0, 122, 255, 0.08), 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
--shadow-pressed: 0 4rpx 8rpx rgba(0, 0, 0, 0.06), 0 2rpx 4rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* 圆角 */
|
||||
--radius-xs: 8px;
|
||||
--radius-sm: 12px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 20px;
|
||||
--radius-xl: 24px;
|
||||
--radius-full: 50%;
|
||||
/* ========== 圆角系统 - 大圆角，苹果风格 ========== */
|
||||
--radius-sm: 24rpx;
|
||||
--radius-md: 32rpx;
|
||||
--radius-lg: 40rpx;
|
||||
--radius-xl: 48rpx;
|
||||
--radius-2xl: 56rpx;
|
||||
--radius-full: 9999rpx;
|
||||
|
||||
/* 间距 */
|
||||
--spacing-xs: 8px;
|
||||
--spacing-sm: 12px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
--spacing-2xl: 48px;
|
||||
/* ========== 间距系统 - 基于 8px(16rpx) 栅格 ========== */
|
||||
--spacing-xs: 8rpx;
|
||||
--spacing-sm: 16rpx;
|
||||
--spacing-md: 24rpx;
|
||||
--spacing-lg: 32rpx;
|
||||
--spacing-xl: 40rpx;
|
||||
--spacing-2xl: 48rpx;
|
||||
--spacing-3xl: 64rpx;
|
||||
--spacing-4xl: 96rpx;
|
||||
|
||||
/* 字体 */
|
||||
--font-size-xs: 20px;
|
||||
--font-size-sm: 22px;
|
||||
--font-size-base: 24px;
|
||||
--font-size-md: 26px;
|
||||
--font-size-lg: 28px;
|
||||
--font-size-xl: 30px;
|
||||
--font-size-2xl: 34px;
|
||||
--font-size-3xl: 40px;
|
||||
--font-size-4xl: 48px;
|
||||
/* ========== 字体系统 - 微信小程序 rpx 单位，大字体 ========== */
|
||||
--font-size-display: 68rpx;
|
||||
--font-size-title1: 56rpx;
|
||||
--font-size-title2: 44rpx;
|
||||
--font-size-title3: 40rpx;
|
||||
--font-size-body: 34rpx;
|
||||
--font-size-callout: 32rpx;
|
||||
--font-size-subbody: 30rpx;
|
||||
--font-size-footnote: 26rpx;
|
||||
--font-size-caption1: 24rpx;
|
||||
--font-size-caption2: 22rpx;
|
||||
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* 动画 */
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-base: 0.25s ease;
|
||||
--transition-slow: 0.4s ease;
|
||||
--line-height-tight: 1.2;
|
||||
--line-height-normal: 1.4;
|
||||
--line-height-relaxed: 1.6;
|
||||
|
||||
/* 模糊 */
|
||||
/* ========== 动画系统 - 0.3s 缓动曲线 ========== */
|
||||
--transition-instant: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
--transition-fast: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
--transition-base: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
--transition-slow: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
|
||||
--transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
--transition-scale: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* ========== 模糊效果 - 毛玻璃核心 ========== */
|
||||
--blur-sm: 8px;
|
||||
--blur-md: 16px;
|
||||
--blur-lg: 24px;
|
||||
--blur-xl: 32px;
|
||||
--blur-2xl: 48px;
|
||||
|
||||
/* ========== 液态玻璃材质 ========== */
|
||||
--glass-background: rgba(255, 255, 255, 0.72);
|
||||
--glass-background-heavy: rgba(255, 255, 255, 0.85);
|
||||
--glass-background-light: rgba(255, 255, 255, 0.5);
|
||||
--glass-border: rgba(255, 255, 255, 0.5);
|
||||
--glass-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.08);
|
||||
--glass-blur: blur(24px);
|
||||
--glass-saturate: saturate(180%);
|
||||
}
|
||||
|
||||
/* 页面背景渐变 */
|
||||
.bg-gradient-page {
|
||||
background: linear-gradient(180deg, #eef5ff 0%, #f5f7fa 50%, #fafbfc 100%);
|
||||
/* ========== 深色模式 ========== */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--primary: #0A84FF;
|
||||
--primary-light: #409CFF;
|
||||
--primary-dark: #0065C8;
|
||||
|
||||
--text-primary: rgba(255, 255, 255, 0.9);
|
||||
--text-secondary: rgba(255, 255, 255, 0.6);
|
||||
--text-tertiary: rgba(255, 255, 255, 0.4);
|
||||
--text-placeholder: rgba(255, 255, 255, 0.3);
|
||||
--text-inverse: #000000;
|
||||
--text-inverse-secondary: rgba(0, 0, 0, 0.7);
|
||||
|
||||
--bg-page: #000000;
|
||||
--bg-page-gradient: linear-gradient(180deg, #1C1C1E 0%, #000000 100%);
|
||||
--bg-card: rgba(28, 28, 30, 0.85);
|
||||
--bg-card-solid: #1C1C1E;
|
||||
--bg-hover: rgba(255, 255, 255, 0.05);
|
||||
--bg-overlay: rgba(0, 0, 0, 0.6);
|
||||
--bg-glass: rgba(28, 28, 30, 0.72);
|
||||
--bg-glass-heavy: rgba(28, 28, 30, 0.85);
|
||||
|
||||
--border-primary: rgba(255, 255, 255, 0.1);
|
||||
--border-light: rgba(255, 255, 255, 0.05);
|
||||
--border-glass: rgba(255, 255, 255, 0.2);
|
||||
--border-separator: rgba(84, 84, 88, 0.65);
|
||||
|
||||
--shadow-sm: 0 4rpx 16rpx rgba(0, 0, 0, 0.3), 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0 8rpx 32rpx rgba(0, 0, 0, 0.35), 0 4rpx 8rpx rgba(0, 0, 0, 0.25);
|
||||
--shadow-lg: 0 16rpx 64rpx rgba(0, 0, 0, 0.4), 0 8rpx 16rpx rgba(0, 0, 0, 0.3);
|
||||
--shadow-xl: 0 24rpx 96rpx rgba(0, 0, 0, 0.45), 0 12rpx 32rpx rgba(0, 0, 0, 0.35);
|
||||
--shadow-glass: 0 16rpx 64rpx rgba(0, 132, 255, 0.1), 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
|
||||
|
||||
--glass-background: rgba(28, 28, 30, 0.72);
|
||||
--glass-background-heavy: rgba(28, 28, 30, 0.85);
|
||||
--glass-background-light: rgba(28, 28, 30, 0.5);
|
||||
--glass-border: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
/* 主色渐变背景 */
|
||||
.bg-gradient-primary {
|
||||
background: var(--primary-gradient);
|
||||
/* ========== 实用工具类 ========== */
|
||||
|
||||
/* 液态玻璃效果 - 核心材质 */
|
||||
.liquid-glass {
|
||||
background: var(--glass-background);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
backdrop-filter: var(--glass-blur) var(--glass-saturate);
|
||||
-webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--shadow-glass);
|
||||
}
|
||||
|
||||
/* 玻璃态效果 */
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
.liquid-glass-heavy {
|
||||
background: var(--glass-background-heavy);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
backdrop-filter: var(--glass-blur) var(--glass-saturate);
|
||||
-webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.liquid-glass-light {
|
||||
background: var(--glass-background-light);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.bg-page-gradient {
|
||||
background: var(--bg-page-gradient);
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-glass);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* 卡片基础样式 */
|
||||
.card-base {
|
||||
background: var(--bg-card);
|
||||
.floating-card {
|
||||
background: var(--bg-card-solid);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
/* 按钮基础样式 */
|
||||
/* 主按钮 - 填充样式 */
|
||||
.btn-primary {
|
||||
background: var(--primary-gradient);
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: all var(--transition-base);
|
||||
transition: all var(--transition-scale);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: scale(0.97);
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
box-shadow: var(--shadow-pressed);
|
||||
}
|
||||
|
||||
/* 输入框基础样式 */
|
||||
.input-base {
|
||||
background: #f8f9fb;
|
||||
/* 次要按钮 - 描边样式 */
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--primary);
|
||||
border: 3rpx solid var(--primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: all var(--transition-scale);
|
||||
}
|
||||
|
||||
.btn-secondary:active {
|
||||
transform: scale(0.98);
|
||||
background: var(--primary-opacity-10);
|
||||
}
|
||||
|
||||
/* 幽灵按钮 - 极简样式 */
|
||||
.btn-ghost {
|
||||
background: var(--primary-opacity-10);
|
||||
color: var(--primary);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: all var(--transition-scale);
|
||||
}
|
||||
|
||||
.btn-ghost:active {
|
||||
transform: scale(0.98);
|
||||
background: var(--primary-opacity-20);
|
||||
}
|
||||
|
||||
/* 输入框 - 液态玻璃风格 */
|
||||
.input-glass {
|
||||
background: var(--glass-background);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.input-base:focus {
|
||||
border-color: var(--border-focus);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(90, 147, 223, 0.1);
|
||||
.input-glass:focus {
|
||||
border-color: var(--primary);
|
||||
background: var(--bg-card-solid);
|
||||
box-shadow: 0 0 0 6rpx var(--primary-opacity-20);
|
||||
}
|
||||
|
||||
/* 动画关键帧 */
|
||||
@keyframes fadeIn {
|
||||
/* 导航栏 - 自适应液态玻璃 */
|
||||
.nav-glass {
|
||||
background: var(--glass-background-heavy);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
border-bottom: 1px solid var(--border-separator);
|
||||
transition: background var(--transition-base);
|
||||
}
|
||||
|
||||
/* 侧边栏 - 半透明毛玻璃 */
|
||||
.sidebar-glass {
|
||||
background: var(--glass-background);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border-right: 1px solid var(--border-separator);
|
||||
}
|
||||
|
||||
/* ========== 动画关键帧 ========== */
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transform: translateY(40rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -153,44 +312,64 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
@keyframes scaleFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
@keyframes glassShimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
background-position: -200% center;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画类 */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.4s ease forwards;
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-8rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.5s ease forwards;
|
||||
@keyframes pulseGlow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 16rpx rgba(0, 122, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s ease infinite;
|
||||
}
|
||||
/* ========== 动画工具类 ========== */
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
.animate-scale-fade-in {
|
||||
animation: scaleFadeIn 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-delay-100 { animation-delay: 0.1s; }
|
||||
.animate-delay-200 { animation-delay: 0.2s; }
|
||||
.animate-delay-300 { animation-delay: 0.3s; }
|
||||
.animate-delay-400 { animation-delay: 0.4s; }
|
||||
.animate-delay-500 { animation-delay: 0.5s; }
|
||||
|
||||
Reference in New Issue
Block a user