feat: 完成 4 个TabBar 页面初版样式修改
This commit is contained in:
R524809
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user