This commit is contained in:
2026-02-16 13:32:32 +08:00
3 changed files with 369 additions and 301 deletions

View File

@@ -3,6 +3,23 @@ import { config } from '../../config';
const app = getApp<IAppOption>() const app = getApp<IAppOption>()
const MATH_QUOTES = [
"万物皆数 — 毕达哥拉斯",
"数学是科学的女皇 — 高斯",
"几何无王者之道 — 欧几里得",
"数统治着宇宙 — 毕达哥拉斯",
"上帝是一位算术家 — 雅可比"
];
const COMMON_FORMULAS = [
{ title: "圆周率", value: "π ≈ 3.14159", icon: "🔴", desc: "无限不循环小数" },
{ title: "黄金分割", value: "φ ≈ 0.618", icon: "✨", desc: "美的比例" },
{ title: "自然常数", value: "e ≈ 2.718", icon: "📈", desc: "成长的极限" },
{ title: "勾股定理", value: "a² + b² = c²", icon: "📐", desc: "直角三角形" },
{ title: "欧拉公式", value: "e^(iπ) + 1 = 0", icon: "💫", desc: "最美公式" },
{ title: "光速", value: "c ≈ 3×10⁸ m/s", icon: "⚡", desc: "宇宙速度极限" }
];
Component({ Component({
data: { data: {
userInfo: { userInfo: {
@@ -10,11 +27,14 @@ Component({
nickName: '未登录' nickName: '未登录'
}, },
hasUserInfo: false, hasUserInfo: false,
greeting: '' currentDate: '',
currentWeekday: '',
dailyQuote: '',
formulas: COMMON_FORMULAS
}, },
pageLifetimes: { pageLifetimes: {
show() { show() {
this.updateGreeting(); this.updateDateDisplay();
// 每次显示页面时,重新获取最新的用户信息 // 每次显示页面时,重新获取最新的用户信息
const session = wx.getStorageSync('USER_SESSION'); const session = wx.getStorageSync('USER_SESSION');
if (session && session.userInfo) { if (session && session.userInfo) {
@@ -26,7 +46,7 @@ Component({
this.setData({ this.setData({
userInfo: { userInfo: {
avatarUrl: config.defaultAvatarUrl, avatarUrl: config.defaultAvatarUrl,
nickName: '点击登录' nickName: '登录'
}, },
hasUserInfo: false hasUserInfo: false
}); });
@@ -39,6 +59,7 @@ Component({
withShareTicket: false, withShareTicket: false,
menus: ['shareAppMessage', 'shareTimeline'] // 需要在 Component 中定义 onShareAppMessage menus: ['shareAppMessage', 'shareTimeline'] // 需要在 Component 中定义 onShareAppMessage
}); });
this.selectDailyQuote();
}, },
onShareAppMessage() { onShareAppMessage() {
@@ -49,16 +70,23 @@ Component({
return config.share; return config.share;
}, },
updateGreeting() { updateDateDisplay() {
const hour = new Date().getHours(); const now = new Date();
let greeting = ''; const month = now.getMonth() + 1;
if (hour < 5) greeting = '夜深了,注意休息'; const day = now.getDate();
else if (hour < 9) greeting = '早上好,新的一天'; const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
else if (hour < 12) greeting = '上午好'; const weekday = weekdays[now.getDay()];
else if (hour < 14) greeting = '中午好';
else if (hour < 19) greeting = '下午好'; this.setData({
else greeting = '晚上好'; currentDate: `${month}${day}`,
this.setData({ greeting }); currentWeekday: weekday
});
},
selectDailyQuote() {
// 简单的随机选择
const idx = Math.floor(Math.random() * MATH_QUOTES.length);
this.setData({ dailyQuote: MATH_QUOTES[idx] });
}, },
goToProfile() { goToProfile() {

View File

@@ -2,89 +2,98 @@
<scroll-view class="scrollarea" scroll-y type="list"> <scroll-view class="scrollarea" scroll-y type="list">
<view class="container"> <view class="container">
<!-- 顶部背景区 --> <!-- 顶部仪表盘背景区 -->
<view class="header-bg"> <view class="dashboard-header">
<view class="header-content" bindtap="goToProfile"> <view class="header-status-bar">
<view class="text-area"> <view class="date-group">
<text class="greeting">{{greeting}}</text> <text class="date-text">{{currentDate}}</text>
<text class="nickname">{{userInfo.nickName}}</text> <text class="weekday-text">{{currentWeekday}}</text>
</view> </view>
<view class="avatar-wrapper"> <view class="user-entry" bindtap="goToProfile">
<image class="avatar" src="{{userInfo.avatarUrl}}"></image> <image class="mini-avatar" src="{{userInfo.avatarUrl}}"></image>
</view> </view>
</view>
<view class="daily-quote">
<text class="quote-text">“{{dailyQuote}}”</text>
</view> </view>
</view> </view>
<!-- 主要内容区(向上浮动覆盖背景) --> <!-- 主要内容区 -->
<view class="main-content"> <view class="main-content">
<view class="section-title">工具箱</view>
<!-- 新增内容:常用公式速查 -->
<view class="section-header">
<text class="section-title">常用公式</text>
<text class="section-more"></text>
</view>
<scroll-view class="formula-scroll" scroll-x enable-flex>
<view class="formula-card" wx:for="{{formulas}}" wx:key="title">
<view class="formula-icon">{{item.icon}}</view>
<view class="formula-info">
<text class="formula-title">{{item.title}}</text>
<text class="formula-value">{{item.value}}</text>
</view>
</view>
</scroll-view>
<!-- 工具箱 -->
<view class="section-header" style="margin-top: 40rpx;">
<text class="section-title">实用工具</text>
</view>
<!-- 功能网格 --> <!-- 功能网格 -->
<view class="grid-container"> <view class="grid-container">
<!-- 计算器 --> <!-- 计算器 (大卡片) -->
<view class="grid-item" bindtap="goToCalculator" hover-class="grid-item-hover"> <view class="grid-item item-large" bindtap="goToCalculator" hover-class="grid-item-hover">
<view class="icon-box bg-gradient-blue"> <view class="grid-bg bg-blue"></view>
<text class="icon">🧮</text> <view class="grid-content">
<view class="icon-box">
<text class="icon">🧮</text>
</view>
<view class="text-box">
<text class="label">科学计算器</text>
<text class="sub-label">支持三角函数、对数及历史记录</text>
</view>
<view class="arrow-btn">GO</view>
</view> </view>
<view class="text-box">
<text class="label">科学计算器</text>
<text class="sub-label">支持基础运算与科学函数</text>
</view>
<view class="arrow-icon"></view>
</view> </view>
<!-- 单位换算 --> <view class="grid-row">
<view class="grid-item" bindtap="goToUnitConverter" hover-class="grid-item-hover"> <!-- 单位换算 -->
<view class="icon-box bg-gradient-green"> <view class="grid-item item-half" bindtap="goToUnitConverter" hover-class="grid-item-hover">
<text class="icon">📏</text> <view class="grid-bg bg-green"></view>
<view class="grid-content vertical">
<view class="icon-box-small">📏</view>
<text class="label">单位换算</text>
<text class="sub-label-small">多单位互转</text>
</view>
</view> </view>
<view class="text-box">
<text class="label">单位换算</text>
<text class="sub-label">长度 · 重量 · 面积 · 温度</text>
</view>
<view class="arrow-icon"></view>
</view>
<!-- 折扣计算 --> <!-- 折扣计算 -->
<view class="grid-item" bindtap="goToDiscount" hover-class="grid-item-hover"> <view class="grid-item item-half" bindtap="goToDiscount" hover-class="grid-item-hover">
<view class="icon-box bg-gradient-orange"> <view class="grid-bg bg-orange"></view>
<text class="icon">🏷️</text> <view class="grid-content vertical">
<view class="icon-box-small">🏷️</view>
<text class="label">折扣计算</text>
<text class="sub-label-small">计算折后价</text>
</view>
</view> </view>
<view class="text-box">
<text class="label">折扣计算</text>
<text class="sub-label">快速计算折后价与节省金额</text>
</view>
<view class="arrow-icon"></view>
</view> </view>
</view> </view>
<!-- 更多设置 --> <!-- 系统入口 -->
<view class="section-title" style="margin-top: 40rpx; display: block;">系统</view> <view class="system-entry-row" bindtap="goToAbout" hover-class="list-item-hover">
<view class="list-container"> <text class="sys-label">关于与帮助</text>
<!-- 关于与帮助 --> <view class="sys-right">
<view class="list-item" bindtap="goToAbout" hover-class="list-item-hover"> <text class="sys-icon"></text>
<view class="list-icon-box"> <text class="arrow">></text>
<text class="icon-small"></text>
</view>
<text class="list-label">关于与帮助</text>
<view class="arrow-icon"></view>
</view> </view>
</view> </view>
<!-- 隐私政策 --> <view class="privacy-link" bindtap="goToPrivacy" style="text-align: center; margin-top: 60rpx; padding-bottom: 40rpx;">
<view class="privacy-link" bindtap="goToPrivacy" style="text-align: center; margin-top: 40rpx; padding-bottom: 20rpx;"> <text style="font-size: 24rpx; color: #ccc;">隐私政策</text>
<text style="font-size: 24rpx; color: #999;">隐私政策</text>
</view> </view>
<!-- 推广/banner区域 -->
<view class="banner" bindtap="goToProfile" wx:if="{{false}}">
<view class="banner-text">
<text class="banner-title">点击登录 / 完善信息</text>
<text class="banner-desc">绑定手机号,体验更多云端功能</text>
</view>
<view class="banner-icon">📝</view>
</view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>

View File

@@ -15,298 +15,329 @@ page {
flex-direction: column; flex-direction: column;
} }
/* 顶部背景区 */ /* --- Dashboard Header --- */
.header-bg { .dashboard-header {
width: 100%; width: 100%;
height: 340rpx; /* Adjusted height */ height: auto;
background: #11616B; /* Color 01 - Solid Color */ min-height: 280rpx;
border-bottom-left-radius: 0; /* Removed radius as requested */ background: linear-gradient(135deg, #11616B 0%, #0D4E56 100%);
border-bottom-right-radius: 0; /* Removed radius as requested */
padding: 40rpx; padding: 40rpx;
padding-top: 100rpx; padding-top: 100rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex-start;
box-shadow: 0 4rpx 12rpx rgba(17, 97, 107, 0.15);
position: relative;
overflow: hidden;
}
/* Removed ::after pseudo-element to remove the large transparent circle */
.header-content {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0;
height: auto;
position: relative;
z-index: 2;
}
.text-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
gap: 8rpx; color: #fff;
position: relative;
z-index: 1;
} }
.greeting { .header-status-bar {
color: rgba(255, 255, 255, 0.9); display: flex;
font-size: 28rpx; justify-content: space-between;
font-weight: 500; align-items: flex-start;
width: 100%;
margin-bottom: 30rpx;
} }
.nickname { .date-group {
color: #ffffff; display: flex;
font-size: 48rpx; flex-direction: column;
font-weight: 700;
letter-spacing: 2rpx;
} }
.avatar-wrapper { .date-text {
padding: 6rpx; font-size: 56rpx;
background: rgba(255, 255, 255, 0.2); font-weight: bold;
border-radius: 50%; line-height: 1.2;
backdrop-filter: blur(4rpx);
display: flex; /* Flex to center content */
align-items: center;
justify-content: center;
} }
.avatar { .weekday-text {
width: 120rpx; font-size: 28rpx;
height: 120rpx; opacity: 0.8;
border-radius: 50%; margin-top: 4rpx;
background-color: #fff;
border: 4rpx solid #ffffff;
display: block; /* Remove inline spacing */
} }
/* 主要内容区 */ .user-entry {
background: rgba(255,255,255,0.2);
padding: 4rpx;
border-radius: 50%;
backdrop-filter: blur(4px);
}
.mini-avatar {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
display: block;
background: #fff;
}
.daily-quote {
background: rgba(0,0,0,0.1);
padding: 16rpx 24rpx;
border-radius: 12rpx;
margin-top: 10rpx;
align-self: flex-start;
max-width: 90%;
}
.quote-text {
font-size: 26rpx;
font-style: italic;
opacity: 0.95;
line-height: 1.4;
}
/* --- Main Content --- */
.main-content { .main-content {
flex: 1; flex: 1;
width: 100%; width: 100%;
padding: 0 28rpx; padding: 32rpx;
box-sizing: border-box; box-sizing: border-box;
margin-top: 20rpx; /* Separated layout */ margin-top: -30rpx;
z-index: 10; z-index: 10;
padding-bottom: 60rpx; background: #f6f8fa;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
} }
.section-title { .section-title {
font-size: 32rpx; display: block !important;
font-weight: 700; font-size: 34rpx;
color: #2d3436; font-weight: bold;
margin-left: 10rpx; color: #333;
margin-bottom: 20rpx; position: relative;
display: none; padding-left: 16rpx;
margin: 0;
} }
/* 卡片列表 */ .section-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 32rpx;
background: #11616B;
border-radius: 4rpx;
}
/* Formula Scroll */
.formula-scroll {
display: flex;
white-space: nowrap;
height: 160rpx;
width: 100%;
}
.formula-card {
display: inline-flex;
flex-direction: row;
align-items: center;
background: #fff;
width: 380rpx; /* Increased from 320rpx */
height: 140rpx;
margin-right: 20rpx;
border-radius: 20rpx;
padding: 24rpx;
box-sizing: border-box;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
}
.formula-icon {
font-size: 48rpx;
margin-right: 20rpx;
width: 60rpx;
text-align: center;
flex-shrink: 0; /* Prevent icon shrinking */
}
.formula-info {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden; /* Prevent text overflow */
}
.formula-title {
font-size: 26rpx; /* Slightly smaller title */
color: #666;
margin-bottom: 6rpx;
}
.formula-value {
font-size: 28rpx; /* Adjusted from 30rpx */
font-weight: bold;
color: #333;
font-family: serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Grid Layout --- */
.grid-container { .grid-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20rpx; gap: 24rpx;
} }
/* 单个卡片 */ /* Large Item (Calculator) */
.grid-item { .grid-item {
background-color: #ffffff; position: relative;
border-radius: 28rpx; border-radius: 24rpx;
padding: 32rpx; overflow: hidden;
display: flex; background: #fff;
align-items: center; box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
box-shadow: 0 12rpx 36rpx rgba(17, 97, 107, 0.20); /* Increased shadow opacity and size for better contrast */ transition: transform 0.1s;
/* Reset old styles */
padding: 0;
align-items: normal;
} }
.grid-item-hover { .grid-item-hover {
transform: scale(0.97); transform: scale(0.98);
background-color: #EBF4F8; /* Color 03 hover */ }
.item-large {
height: 200rpx;
width: 100%;
}
.grid-bg {
position: absolute;
top: 0;
right: 0;
width: 200rpx;
height: 100%;
opacity: 0.1;
transform: skewX(-20deg) translateX(40rpx);
z-index: 0;
}
.bg-blue { background: #007AFF; }
.bg-green { background: #34C759; }
.bg-orange { background: #FF9500; }
.grid-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
padding: 40rpx;
height: 100%;
box-sizing: border-box;
} }
.icon-box { .icon-box {
width: 96rpx; width: 88rpx;
height: 96rpx; height: 88rpx;
border-radius: 24rpx; background: rgba(17, 97, 107, 0.1);
display: flex; border-radius: 20rpx;
align-items: center; display: flex;
justify-content: center; align-items: center;
margin-right: 28rpx; justify-content: center;
flex-shrink: 0; margin-right: 30rpx;
flex-shrink: 0;
} }
.icon { .icon {
font-size: 46rpx; font-size: 44rpx;
color: #11616B; /* Icon color dark teal */ color: #11616B;
}
.bg-gradient-blue {
background: #EBF4F8; /* Color 03 */
}
.bg-gradient-pink {
background: #FED9CD; /* Color 04 */
}
.bg-gradient-green {
background: #7BBDB6; /* Color 02 */
}
.bg-gradient-orange {
background: #FED9CD; /* Color 04 */
}
.bg-gradient-purple {
background: #DC8B70; /* Color 05 */
} }
.text-box { .text-box {
display: flex; flex: 1;
flex-direction: column; display: flex;
flex: 1; flex-direction: column;
min-width: 0;
} }
.label { .label {
font-size: 32rpx; font-size: 34rpx;
color: #2d3436; font-weight: bold;
font-weight: 700; color: #333;
margin-bottom: 6rpx; margin-bottom: 8rpx;
} }
.sub-label { .sub-label {
font-size: 23rpx; font-size: 24rpx;
color: #b2bec3; color: #999;
font-weight: 500;
} }
/* Banner */ .arrow-btn {
.banner { padding: 8rpx 24rpx;
margin-top: 30rpx; background: #F0F0F0;
background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%); border-radius: 30rpx;
border-radius: 28rpx; font-size: 24rpx;
padding: 28rpx 36rpx; font-weight: bold;
display: flex; color: #666;
justify-content: space-between;
align-items: center;
box-shadow: 0 12rpx 32rpx rgba(108, 92, 231, 0.3);
} }
.banner-text { /* Half Items Row */
display: flex; .grid-row {
flex-direction: column; display: flex;
justify-content: space-between;
gap: 24rpx;
} }
.banner-title { .item-half {
color: #fff; flex: 1;
font-weight: 700; height: 240rpx;
font-size: 30rpx;
margin-bottom: 8rpx;
} }
.banner-desc { .grid-content.vertical {
color: rgba(255,255,255,0.8); flex-direction: column;
font-size: 24rpx; align-items: flex-start;
justify-content: center;
padding: 30rpx;
} }
.banner-icon { .icon-box-small {
font-size: 40rpx; font-size: 56rpx;
margin-bottom: 20rpx;
} }
/* 箭头 */ .sub-label-small {
.arrow-icon { font-size: 22rpx;
margin-left: auto; color: #999;
font-size: 40rpx; margin-top: 6rpx;
color: #ddd;
font-weight: 300;
flex-shrink: 0;
padding-left: 12rpx;
} }
/* 功能亮点区 */ /* System Entry */
.feature-highlights { .system-entry-row {
margin-top: 24rpx; margin-top: 40rpx;
background: #ffffff; background: #fff;
border-radius: 28rpx; padding: 30rpx 40rpx;
padding: 32rpx 36rpx; border-radius: 16rpx;
box-shadow: 0 8rpx 32rpx rgba(108, 92, 231, 0.08); display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
} }
.highlight-title { .sys-label {
font-size: 28rpx; font-size: 30rpx;
font-weight: 700; color: #333;
color: #2d3436;
margin-bottom: 20rpx;
letter-spacing: 1rpx;
} }
.highlight-list { .sys-right {
display: flex; display: flex;
flex-direction: column; align-items: center;
gap: 18rpx; color: #999;
} font-size: 28rpx;
gap: 10rpx;
.highlight-item {
display: flex;
align-items: center;
gap: 14rpx;
font-size: 25rpx;
color: #636e72;
font-weight: 500;
}
.highlight-dot {
font-size: 14rpx;
color: #6c5ce7;
}
/* 列表容器 */
.list-container {
background-color: #ffffff;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(17, 97, 107, 0.08);
}
.list-item {
display: flex;
align-items: center;
padding: 30rpx;
background-color: #ffffff;
transition: background-color 0.1s;
} }
.list-item-hover { .list-item-hover {
background-color: #f9f9f9; background: #f9f9f9;
}
.list-icon-box {
width: 56rpx;
height: 56rpx;
background-color: #EBF4F8;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24rpx;
}
.icon-small {
font-size: 32rpx;
}
.list-label {
flex: 1;
font-size: 30rpx;
color: #333;
font-weight: 500;
}
.section-title {
display: block !important; /* Ensure visibility */
font-size: 28rpx;
color: #999;
margin-bottom: 20rpx;
margin-left: 10rpx;
font-weight: 500;
} }