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:
joey
2025-06-19 17:07:10 +08:00
parent 145ca0bf62
commit 56e8e15620
7 changed files with 354 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/components/introduction-popup/introduction-popup.less
+240 -27
View File
@@ -22,25 +22,55 @@
}
.tip-box {
height: 48px;
border-radius: 24px;
height: 96rpx;
border-radius: 50rpx;
background: rgba(255, 255, 255, 0.2);
border: 4rpx solid rgba(147, 211, 51, 1);
transition: all 0.4s;
position: absolute;
&--first {
position: absolute;
top: 66px;
top: 122rpx;
left: 50%;
transform: translateX(-50%);
width: 340px;
width: 680rpx;
height: 96rpx;
&.android {
top: 128rpx;
}
}
&--second {
position: absolute;
top: 127px;
left: 28px;
width: 48px;
top: 248rpx;
left: 50rpx;
width: 96rpx;
height: 96rpx;
&.android {
top: 256rpx;
left: 54rpx;
}
}
&--third {
top: 248rpx;
left: 232rpx;
width: 96rpx;
height: 96rpx;
&.android {
top: 254rpx;
left: 236rpx;
}
}
&--fourth {
top: 682rpx;
left: 50%;
transform: translateX(-50%);
width: 712rpx;
height: 710rpx;
}
}
@@ -50,23 +80,145 @@
font-size: 32rpx;
}
.first-step {
.btn-area {
position: absolute;
top: 50%;
left: 0;
width: 100%;
display: flex;
justify-content: center;
transition: all 0.4s;
&.fourth {
top: 420rpx;
}
.btn-next-step {
border-radius: 28rpx;
}
}
.step-box {
transition: all 0.4s;
&.first-step {
position: absolute;
top: 130rpx;
left: 0;
width: 100%;
&.android {
top: 138rpx;
}
.guide-icon {
position: absolute;
top: 48rpx;
left: 106rpx;
width: 22px;
height: 39px;
opacity: 1;
}
.tip-text {
position: absolute;
top: 138rpx;
left: 110rpx;
width: 550rpx;
height: 94rpx;
line-height: 46rpx;
}
}
&.second-step {
position: absolute;
top: 290rpx;
left: 164rpx;
width: 100%;
&.android {
top: 294rpx;
left: 164rpx;
}
.guide-icon {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 39px;
transform: rotate(-64.28deg);
}
.tip-text {
position: absolute;
top: 46rpx;
left: 44rpx;
line-height: 46rpx;
}
}
&.third-step {
position: absolute;
top: 290rpx;
left: 342rpx;
width: 100%;
&.android {
top: 294rpx;
left: 342rpx;
}
.guide-icon {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 39px;
transform: rotate(-64.28deg);
}
.tip-text {
position: absolute;
top: 46rpx;
left: 44rpx;
line-height: 46rpx;
}
}
&.fourth-step {
position: absolute;
top: 550rpx;
left: 40rpx;
width: 100%;
.guide-icon {
position: absolute;
top: 60rpx;
left: 26rpx;
width: 44rpx;
height: 78rpx;
transform: rotate(180deg);
}
.tip-text {
position: absolute;
top: 0;
left: 0rpx;
line-height: 46rpx;
}
}
}
/* .first-step {
position: absolute;
top: 128rpx;
left: 0;
width: 100%;
// .tip-box {
// position: absolute;
// top: 0;
// left: 50%;
// transform: translateX(-50%);
// width: 342px;
// height: 46px;
// border-radius: 21px;
// background: rgba(255, 255, 255, 0.2);
// }
.guide-icon {
position: absolute;
top: 48rpx;
@@ -86,12 +238,73 @@
}
}
.btn-next-step {
color: rgba(255, 235, 59, 0.95);
border-radius: 28rpx;
.second-step {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
top: 288rpx;
left: 164rpx;
width: 100%;
.guide-icon {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 39px;
transform: rotate(-64.28deg);
}
.tip-text {
position: absolute;
top: 46rpx;
left: 44rpx;
line-height: 46rpx;
}
}
.third-step {
position: absolute;
top: 288rpx;
left: 342rpx;
width: 100%;
.guide-icon {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 39px;
transform: rotate(-64.28deg);
}
.tip-text {
position: absolute;
top: 46rpx;
left: 44rpx;
line-height: 46rpx;
}
}
.fourth-step {
position: absolute;
top: 550rpx;
left: 76rpx;
width: 100%;
.guide-icon {
position: absolute;
top: 60rpx;
left: 20rpx;
width: 44rpx;
height: 78rpx;
transform: rotate(180deg);
}
.tip-text {
position: absolute;
top: 0;
left: 0rpx;
line-height: 46rpx;
}
} */
}