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

feat: 英文字母描红开发

Browse Source
This commit is contained in:
R524809
2026-04-03 15:21:04 +08:00
parent 206c44cf6d
commit 1ef6770810
37 changed files with 1812 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/supportPages/guide/guide.json
+6
View File
@@ -0,0 +1,6 @@
{
"navigationBarTitleText": "打印指南",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#f7ee47",
"backgroundColor": "#F6F6F6"
}
miniprogram/supportPages/guide/guide.less
+150
View File
@@ -0,0 +1,150 @@
.guide-page {
min-height: 100vh;
background: #f6f6f6;
padding-bottom: 48rpx;
}
.guide-page__hero {
background: linear-gradient(180deg, #f7ee47 0%, #e6d520 100%);
padding: 60rpx 40rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.guide-page__hero-icon {
font-size: 80rpx;
margin-bottom: 24rpx;
}
.guide-page__hero-title {
font-size: 40rpx;
font-weight: 700;
color: #333;
}
.guide-page__steps {
position: relative;
padding: 40rpx 32rpx 24rpx 32rpx;
margin: 0 24rpx;
margin-top: -24rpx;
background: #fff;
border-radius: 24rpx;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
}
.guide-page__timeline-line {
position: absolute;
left: 62rpx;
top: 100rpx;
bottom: 100rpx;
width: 4rpx;
background: #eee;
z-index: 0;
}
.guide-page__step {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
margin-bottom: 48rpx;
}
.guide-page__step--last {
margin-bottom: 0;
}
.guide-page__step-num-wrap {
flex-shrink: 0;
width: 64rpx;
margin-right: 24rpx;
display: flex;
justify-content: center;
}
.guide-page__step-num {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: #f7ee47;
font-size: 28rpx;
font-weight: 700;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.guide-page__step-body {
flex: 1;
padding-top: 4rpx;
}
.guide-page__step-title {
display: block;
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 12rpx;
}
.guide-page__step-desc {
display: block;
font-size: 28rpx;
color: #666;
line-height: 1.55;
margin-bottom: 16rpx;
}
.guide-page__tip {
background: #fff8e1;
border-radius: 16rpx;
padding: 20rpx 24rpx;
font-size: 26rpx;
color: #666;
line-height: 1.5;
}
.guide-page__tip-line {
display: block;
margin-bottom: 8rpx;
}
.guide-page__tip-line:last-child {
margin-bottom: 0;
}
.guide-page__faq-title {
font-size: 32rpx;
font-weight: 700;
color: #333;
padding: 40rpx 32rpx 16rpx;
}
.guide-page__faq {
padding: 0 24rpx;
}
.guide-page__faq-item {
background: #fff;
border-radius: 16rpx;
padding: 28rpx 32rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.guide-page__faq-q {
display: block;
font-size: 28rpx;
font-weight: 700;
color: #333;
margin-bottom: 12rpx;
}
.guide-page__faq-a {
display: block;
font-size: 26rpx;
color: #999;
line-height: 1.55;
}
miniprogram/supportPages/guide/guide.ts
+7
View File
@@ -0,0 +1,7 @@
Page({
data: {},
onLoad() {
// 静态说明页，无额外逻辑
},
});
miniprogram/supportPages/guide/guide.wxml
+63
View File
@@ -0,0 +1,63 @@
<view class="guide-page">
<view class="guide-page__hero">
<text class="guide-page__hero-icon">🖨️</text>
<text class="guide-page__hero-title">3 步完成打印</text>
</view>
<view class="guide-page__steps">
<view class="guide-page__timeline-line" />
<view class="guide-page__step">
<view class="guide-page__step-num-wrap">
<view class="guide-page__step-num">1</view>
</view>
<view class="guide-page__step-body">
<text class="guide-page__step-title">保存到相册</text>
<text class="guide-page__step-desc">在练习纸预览页点击「保存」或「保存到相册」，授权后即可保存图片。</text>
<view class="guide-page__tip">提示：建议先关闭深色模式截图，打印对比度更好。</view>
</view>
</view>
<view class="guide-page__step">
<view class="guide-page__step-num-wrap">
<view class="guide-page__step-num">2</view>
</view>
<view class="guide-page__step-body">
<text class="guide-page__step-title">连接打印机</text>
<text class="guide-page__step-desc">确保打印机与手机处于同一 Wi-Fi，或按打印机说明完成蓝牙配对。</text>
<view class="guide-page__tip">家用喷墨 / 激光打印机均可；A4 纸竖向打印即可。</view>
</view>
</view>
<view class="guide-page__step guide-page__step--last">
<view class="guide-page__step-num-wrap">
<view class="guide-page__step-num">3</view>
</view>
<view class="guide-page__step-body">
<text class="guide-page__step-title">从相册打印</text>
<text class="guide-page__step-desc">打开手机相册，选中刚保存的练习纸图片，点击分享或打印。</text>
<view class="guide-page__tip">
<text class="guide-page__tip-line">iPhone：分享 → 打印 → 选择打印机。</text>
<text class="guide-page__tip-line">Android：更多 → 打印 或 使用系统相册自带的打印入口。</text>
</view>
</view>
</view>
</view>
<view class="guide-page__faq-title">常见问题</view>
<view class="guide-page__faq">
<view class="guide-page__faq-item">
<text class="guide-page__faq-q">保存失败怎么办？</text>
<text class="guide-page__faq-a">请在小程序设置中开启相册写入权限，并检查手机存储空间是否充足。</text>
</view>
<view class="guide-page__faq-item">
<text class="guide-page__faq-q">打印出来太小/太大？</text>
<text class="guide-page__faq-a">在打印预览中选择「适应页面」或调整缩放比例，通常 100% 即可。</text>
</view>
<view class="guide-page__faq-item">
<text class="guide-page__faq-q">没有打印机？</text>
<text class="guide-page__faq-a">可将图片发到电脑或拷贝至 U 盘，在打印店完成打印。</text>
</view>
</view>
</view>