joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成 4 个TabBar 页面初版样式修改

Browse Source
This commit is contained in:
R524809
2026-04-02 17:05:55 +08:00
parent b18dbcb0d1
commit 206c44cf6d
61 changed files with 4670 additions and 996 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/profile/profile.json
+6 -2
View File
@@ -1,6 +1,10 @@
{
"navigationStyle": "custom",
"navigationBarTitleText": "我的",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#F6F6F6"
"navigationBarBackgroundColor": "#F8F0E0",
"backgroundColor": "#F8F0E0",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
}
}
miniprogram/pages/profile/profile.less
+317 -75
View File
@@ -1,115 +1,357 @@
@import '../../style/theme3.less';
@profile-premium-bg: #2d2a26;
/* 整页滚动：避免 scroll-view 在真机因未给出明确高度而高度为 0 */
page {
min-height: 100%;
background: @bg-header;
}
.profile-page {
min-height: 100vh;
background: #f6f6f6;
padding-bottom: 48rpx;
background: @bg-header;
box-sizing: border-box;
}
.profile-page__header {
/* 顶栏：固定于顶部，正文区独立滚动 */
.profile-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
flex-shrink: 0;
background: fade(@bg-header, 85%);
backdrop-filter: blur(40rpx);
-webkit-backdrop-filter: blur(40rpx);
box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.05);
}
.profile-nav__inner {
height: @nav-inner-height;
display: flex;
flex-direction: row;
align-items: center;
background: #f7ee47;
padding: 48rpx 32rpx;
justify-content: flex-start;
padding: 0 @page-padding-x;
box-sizing: border-box;
}
.profile-page__avatar {
width: 112rpx;
height: 112rpx;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 56rpx;
flex-shrink: 0;
.profile-nav__title {
font-size: @fs-nav-title;
font-weight: @fw-nav-title;
color: @color-nav-title;
letter-spacing: @ls-nav-title;
}
.profile-page__header-info {
margin-left: 28rpx;
.profile-nav__brand {
font-size: 40rpx;
font-weight: 800;
color: @brand;
letter-spacing: -0.04em;
}
.profile-body {
width: 100%;
box-sizing: border-box;
}
.profile-main {
padding: @section-gap-xs @page-padding-x;
padding-bottom: calc(32rpx + env(safe-area-inset-bottom) + 120rpx);
box-sizing: border-box;
}
/* 用户主卡 */
.profile-hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
.profile-page__name {
font-size: 36rpx;
font-weight: 700;
color: #333;
margin-bottom: 12rpx;
}
.profile-page__stat {
font-size: 26rpx;
color: #555;
}
.profile-page__group {
background: #fff;
border-radius: 32rpx;
margin: 24rpx 24rpx 0;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.profile-page__item {
display: flex;
flex-direction: row;
align-items: center;
padding: 28rpx 32rpx;
border-bottom: 1rpx solid #f0f0f0;
padding: 80rpx @page-padding-inner-x 64rpx;
background: @bg-white;
border-radius: @radius-xl;
border: 1rpx solid rgba(124, 118, 106, 0.12);
box-shadow: @shadow;
overflow: hidden;
margin-bottom: @section-gap-xs;
}
.profile-page__item--last {
border-bottom: none;
.profile-hero__tint {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 192rpx;
background: @brand;
opacity: 0.1;
pointer-events: none;
}
.profile-page__icon {
font-size: 36rpx;
margin-right: 20rpx;
width: 44rpx;
.profile-hero__avatar-wrap {
position: relative;
margin-top: 16rpx;
}
.profile-hero__avatar {
width: 256rpx;
height: 256rpx;
border-radius: 50%;
border: 8rpx solid @bg-white;
background: @bg-gray;
box-shadow: @shadow;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.profile-hero__avatar-emoji {
font-size: 112rpx;
line-height: 1;
}
.profile-hero__avatar-img {
width: 100%;
height: 100%;
}
.profile-hero__edit-badge {
position: absolute;
right: 8rpx;
bottom: 8rpx;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background: @brand;
border: 8rpx solid @bg-white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: @shadow;
box-sizing: border-box;
}
.profile-hero__name {
margin-top: 32rpx;
font-size: 40rpx;
font-weight: 700;
color: @text-title;
text-align: center;
}
.profile-page__label {
.profile-hero__stats {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 64rpx;
padding: 0 @page-padding-inner-x;
box-sizing: border-box;
}
.profile-hero__stat {
flex: 1;
font-size: 30rpx;
color: #333;
background: @bg-header;
border-radius: @radius;
border: 1rpx solid rgba(124, 118, 106, 0.12);
padding: 32rpx 24rpx;
text-align: center;
box-sizing: border-box;
}
.profile-page__badge {
font-size: 20rpx;
color: #fff;
background: #ff4757;
padding: 4rpx 12rpx;
border-radius: 8rpx;
margin-right: 12rpx;
.profile-hero__stat+.profile-hero__stat {
margin-left: 32rpx;
}
.profile-page__arrow {
.profile-hero__stat-num {
display: block;
font-size: 36rpx;
color: #ccc;
font-weight: 300;
font-weight: 800;
color: @text-title;
line-height: 1.2;
}
.profile-page__footer {
.profile-hero__stat-label {
display: block;
margin-top: 8rpx;
font-size: 20rpx;
font-weight: 600;
color: @text-secondary;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* 双格 */
.profile-grid {
display: flex;
flex-direction: row;
margin-bottom: @section-gap-xs;
}
.profile-grid__cell {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 64rpx 32rpx 32rpx;
padding: 48rpx 24rpx;
background: @bg-white;
border-radius: @radius-xl;
border: 1rpx solid rgba(124, 118, 106, 0.12);
box-sizing: border-box;
}
.profile-page__footer-emoji {
font-size: 72rpx;
margin-bottom: 16rpx;
.profile-grid__cell+.profile-grid__cell {
margin-left: 32rpx;
}
.profile-page__footer-slogan {
font-size: 26rpx;
color: #999;
margin-bottom: 12rpx;
.profile-grid__icon-wrap {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
background: @brand;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32rpx;
box-shadow: @shadow;
}
.profile-page__footer-version {
.profile-grid__title {
font-size: 30rpx;
font-weight: 700;
color: @text-title;
}
.profile-grid__sub {
margin-top: 8rpx;
font-size: 22rpx;
color: #ccc;
color: @text-secondary;
text-align: center;
line-height: 1.35;
}
/* 圆角列表 */
.profile-rows {
display: flex;
flex-direction: column;
margin-bottom: @section-gap-xs;
}
.profile-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 40rpx 40rpx;
background: @bg-white;
border-radius: 999rpx;
border: 1rpx solid rgba(124, 118, 106, 0.12);
box-sizing: border-box;
margin-bottom: 32rpx;
}
.profile-row--last {
margin-bottom: 0;
}
.profile-row__left {
display: flex;
flex-direction: row;
align-items: center;
min-width: 0;
}
.profile-row__icon-bg {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: fade(@brand, 18%);
display: flex;
align-items: center;
justify-content: center;
margin-right: 32rpx;
flex-shrink: 0;
}
.profile-row__label {
font-size: 30rpx;
font-weight: 600;
color: @text-title;
}
.profile-row__chevron {
font-size: 40rpx;
color: @text-gray;
font-weight: 300;
flex-shrink: 0;
margin-left: 16rpx;
}
/* 专业版卡 */
.profile-upsell {
position: relative;
overflow: hidden;
background: @profile-premium-bg;
border-radius: @radius-xl;
padding: 64rpx 48rpx;
box-shadow: @shadow-lg;
margin-bottom: @section-gap-sm;
}
.profile-upsell__deco {
position: absolute;
top: -24rpx;
right: -32rpx;
pointer-events: none;
opacity: 0.35;
}
.profile-upsell__body {
position: relative;
z-index: 1;
}
.profile-upsell__title {
display: block;
font-size: 36rpx;
font-weight: 800;
color: @text-white;
}
.profile-upsell__desc {
display: block;
margin-top: 16rpx;
font-size: 26rpx;
line-height: 1.45;
color: rgba(255, 255, 255, 0.7);
max-width: 400rpx;
}
.profile-upsell__btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 48rpx;
padding: 24rpx 64rpx;
border-radius: 999rpx;
background: @brand;
color: @text-selected-btn;
font-size: 28rpx;
font-weight: 700;
box-shadow: @shadow-lg;
}
.profile-version {
text-align: center;
padding: 24rpx 0 0;
}
.profile-version__text {
font-size: 20rpx;
font-weight: 600;
color: @text-secondary;
letter-spacing: 0.2em;
text-transform: uppercase;
}
miniprogram/pages/profile/profile.ts
+35 -10
View File
@@ -1,13 +1,38 @@
import { getTodayDownloadCount } from '../../utils/downloadPrint';
import { NAV_INNER_PX } from '../../utils/navMetrics';
Page({
data: {
generateCount: 0,
statusBarHeight: 0,
/** 状态栏 + 导航条高度，用于固定顶栏占位 */
navBlockHeight: 0,
userName: '微信用户',
avatarUrl: '',
printCount: 0,
favoriteCount: 0,
version: '',
},
onLoad() {
const win = wx.getWindowInfo();
const info = wx.getAccountInfoSync();
const version = info.miniProgram.version || '开发版';
this.setData({ version });
this.setData({
statusBarHeight: win.statusBarHeight,
navBlockHeight: win.statusBarHeight + NAV_INNER_PX,
version,
});
},
onShow() {
this.refreshStats();
},
refreshStats() {
const printCount = getTodayDownloadCount();
// 收藏数待与收藏页数据源打通后接入
const favoriteCount = 0;
this.setData({ printCount, favoriteCount });
},
onGoToDownloads() {
@@ -20,14 +45,6 @@ Page({
wx.switchTab({ url: '/pages/favorites/favorites' });
},
onGoToPrintPlan() {
wx.showToast({ title: '功能开发中', icon: 'none' });
},
onGoToStats() {
wx.showToast({ title: '功能开发中', icon: 'none' });
},
onGoToGuide() {
wx.navigateTo({ url: '/pages/guide/guide' });
},
@@ -36,6 +53,10 @@ Page({
wx.showToast({ title: '功能开发中', icon: 'none' });
},
onGoToSettings() {
wx.showToast({ title: '功能开发中', icon: 'none' });
},
onGoToFeedback() {
wx.showToast({ title: '功能开发中', icon: 'none' });
},
@@ -43,4 +64,8 @@ Page({
onGoToAbout() {
wx.showToast({ title: '涂鸦丫练习纸', icon: 'none' });
},
onGoToPremium() {
wx.showToast({ title: '功能开发中', icon: 'none' });
},
});
miniprogram/pages/profile/profile.wxml
+137 -54
View File
@@ -1,62 +1,145 @@
<view class="profile-page">
<view class="profile-page__header">
<view class="profile-page__avatar">🦆</view>
<view class="profile-page__header-info">
<text class="profile-page__name">微信用户</text>
<text class="profile-page__stat">已生成 {{generateCount}} 张练习纸</text>
<view class="profile-nav" style="padding-top: {{statusBarHeight}}px;">
<view class="profile-nav__inner">
<text class="profile-nav__title">个人中心</text>
</view>
</view>
<view class="profile-page__group">
<view class="profile-page__item" bindtap="onGoToDownloads">
<text class="profile-page__icon">📥</text>
<text class="profile-page__label">下载历史</text>
<text class="profile-page__arrow">›</text>
</view>
<view class="profile-page__item" bindtap="onGoToFavorites">
<text class="profile-page__icon">❤️</text>
<text class="profile-page__label">我的收藏</text>
<text class="profile-page__arrow">›</text>
</view>
<view class="profile-page__item" bindtap="onGoToPrintPlan">
<text class="profile-page__icon">📋</text>
<text class="profile-page__label">每日打印计划</text>
<view class="profile-page__badge">即将上线</view>
<text class="profile-page__arrow">›</text>
</view>
<view class="profile-page__item profile-page__item--last" bindtap="onGoToStats">
<text class="profile-page__icon">📊</text>
<text class="profile-page__label">学习统计</text>
<text class="profile-page__arrow">›</text>
</view>
</view>
<view class="profile-body" style="padding-top: {{navBlockHeight}}px;">
<view class="profile-main">
<!-- 用户卡（Stitch：白底大圆角 + 顶条淡黄） -->
<view class="profile-hero">
<view class="profile-hero__tint"></view>
<view class="profile-hero__avatar-wrap">
<view class="profile-hero__avatar">
<text
class="profile-hero__avatar-emoji"
wx:if="{{!avatarUrl}}"
>🦆</text
>
<image
wx:else
class="profile-hero__avatar-img"
src="{{avatarUrl}}"
mode="aspectFill" />
</view>
<view
class="profile-hero__edit-badge"
aria-role="button"
aria-label="编辑头像">
<van-icon name="edit" size="28rpx" color="#6c5a00" />
</view>
</view>
<text class="profile-hero__name">{{userName}}</text>
<view class="profile-hero__stats">
<view class="profile-hero__stat">
<text class="profile-hero__stat-num"
>{{printCount}}</text
>
<text class="profile-hero__stat-label">打印</text>
</view>
<view class="profile-hero__stat">
<text class="profile-hero__stat-num"
>{{favoriteCount}}</text
>
<text class="profile-hero__stat-label">收藏</text>
</view>
</view>
</view>
<view class="profile-page__group">
<view class="profile-page__item" bindtap="onGoToGuide">
<text class="profile-page__icon">🖨️</text>
<text class="profile-page__label">打印指南</text>
<text class="profile-page__arrow">›</text>
</view>
<view class="profile-page__item" bindtap="onGoToPrintSettings">
<text class="profile-page__icon">⚙️</text>
<text class="profile-page__label">打印设置</text>
<text class="profile-page__arrow">›</text>
</view>
<view class="profile-page__item" bindtap="onGoToFeedback">
<text class="profile-page__icon">💬</text>
<text class="profile-page__label">意见反馈</text>
<text class="profile-page__arrow">›</text>
</view>
<view class="profile-page__item profile-page__item--last" bindtap="onGoToAbout">
<text class="profile-page__icon">ℹ️</text>
<text class="profile-page__label">关于涂鸦丫</text>
<text class="profile-page__arrow">›</text>
</view>
</view>
<!-- 双格入口 -->
<view class="profile-grid">
<view class="profile-grid__cell" bindtap="onGoToFavorites">
<view class="profile-grid__icon-wrap">
<van-icon name="like" size="44rpx" color="#6c5a00" />
</view>
<text class="profile-grid__title">我的收藏</text>
<text class="profile-grid__sub">已保存的练习题</text>
</view>
<view class="profile-grid__cell" bindtap="onGoToDownloads">
<view class="profile-grid__icon-wrap">
<van-icon name="down" size="44rpx" color="#6c5a00" />
</view>
<text class="profile-grid__title">下载历史</text>
<text class="profile-grid__sub">查看历史文件</text>
</view>
</view>
<view class="profile-page__footer">
<text class="profile-page__footer-emoji">🦆</text>
<text class="profile-page__footer-slogan">陪孩子一起，把学习变成游戏</text>
<text class="profile-page__footer-version">v{{version}}</text>
<!-- 圆角列表行 -->
<view class="profile-rows">
<view class="profile-row" bindtap="onGoToGuide">
<view class="profile-row__left">
<view class="profile-row__icon-bg">
<van-icon
name="printer"
size="40rpx"
color="#322e25" />
</view>
<text class="profile-row__label">打印指南</text>
</view>
<text class="profile-row__chevron">›</text>
</view>
<view class="profile-row" bindtap="onGoToFeedback">
<view class="profile-row__left">
<view class="profile-row__icon-bg">
<van-icon
name="chat-o"
size="40rpx"
color="#322e25" />
</view>
<text class="profile-row__label">提交反馈</text>
</view>
<text class="profile-row__chevron">›</text>
</view>
<view class="profile-row" bindtap="onGoToSettings">
<view class="profile-row__left">
<view class="profile-row__icon-bg">
<van-icon
name="setting-o"
size="40rpx"
color="#322e25" />
</view>
<text class="profile-row__label">设置</text>
</view>
<text class="profile-row__chevron">›</text>
</view>
<view
class="profile-row profile-row--last"
bindtap="onGoToAbout">
<view class="profile-row__left">
<view class="profile-row__icon-bg">
<van-icon
name="info-o"
size="40rpx"
color="#322e25" />
</view>
<text class="profile-row__label">关于涂鸦丫</text>
</view>
<text class="profile-row__chevron">›</text>
</view>
</view>
<!-- 专业版推广（Stitch 深色卡） -->
<view class="profile-upsell" bindtap="onGoToPremium">
<van-icon
name="gem-o"
class="profile-upsell__deco"
size="200rpx"
color="rgba(255,255,255,0.12)" />
<view class="profile-upsell__body">
<text class="profile-upsell__title">升级专业版</text>
<text class="profile-upsell__desc"
>解锁 500+ 精选教育模板并获得优先体验。</text
>
<view class="profile-upsell__btn">立即升级</view>
</view>
</view>
<view class="profile-version">
<text class="profile-version__text"
>Doodle Mini v{{version}}</text
>
</view>
</view>
</view>
</view>