feat: 完成引导页
This commit is contained in:
@@ -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;
|
||||
}
|
||||
} */
|
||||
|
||||
}
|
||||
@@ -14,9 +14,23 @@ Component({
|
||||
*/
|
||||
data: {
|
||||
currentStep: 'first',
|
||||
currentStepIndex: 0,
|
||||
stepTexts: [
|
||||
'这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定”',
|
||||
'点击这里修改颜色',
|
||||
'点击这里删除',
|
||||
'这里会生成图片，点击下载后可打印、涂色、识字',
|
||||
],
|
||||
platform: '',
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {},
|
||||
attached() {
|
||||
const { platform } = wx.getDeviceInfo();
|
||||
console.log('platform:', platform);
|
||||
this.setData({
|
||||
platform,
|
||||
});
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
@@ -27,15 +41,18 @@ Component({
|
||||
},
|
||||
|
||||
toNextStep() {
|
||||
const stepArr = ['first', 'second', 'third', 'fourth', 'fifth'];
|
||||
const { currentStep } = this.data;
|
||||
const currentStepIndex = currentStep
|
||||
? stepArr.indexOf(currentStep)
|
||||
: 0;
|
||||
console.log('next', stepArr[currentStepIndex + 1]);
|
||||
const stepArr = ['first', 'second', 'third', 'fourth'];
|
||||
const { currentStepIndex: preStepIndex } = this.data;
|
||||
|
||||
if (preStepIndex === 3) return this.triggerEvent('onClose');
|
||||
const currentStepIndex = preStepIndex + 1;
|
||||
|
||||
this.setData({
|
||||
currentStep: stepArr[currentStepIndex + 1],
|
||||
currentStepIndex,
|
||||
currentStep: stepArr[currentStepIndex],
|
||||
});
|
||||
},
|
||||
|
||||
preventScroll() {},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,14 +1,25 @@
|
||||
<view class="introduction-popup">
|
||||
<view class="introduction-popup" catchtouchmove="preventScroll">
|
||||
<view class="introduction-popup-title">跟我一起来涂色、识字吧！</view>
|
||||
<view class="tip-box tip-box--{{currentStep}}"></view>
|
||||
<toy-button
|
||||
type="white"
|
||||
plain
|
||||
bind:click="toNextStep"
|
||||
custom-class="btn-next-step">
|
||||
下一步
|
||||
</toy-button>
|
||||
<view class="first-step">
|
||||
<view class="tip-box tip-box--{{currentStep}} {{platform}}"></view>
|
||||
<view class="btn-area {{currentStep}}">
|
||||
<toy-button
|
||||
type="white"
|
||||
plain
|
||||
bind:click="toNextStep"
|
||||
custom-class="btn-next-step">
|
||||
{{currentStep === 'fourth' ? '去体验' : '下一步'}}
|
||||
</toy-button>
|
||||
</view>
|
||||
<view class="step-box {{currentStep}}-step {{platform}}">
|
||||
<van-icon
|
||||
class-prefix="toy-icon"
|
||||
name="guide"
|
||||
color="#FFEB3B"
|
||||
custom-class="guide-icon"
|
||||
size="100rpx" />
|
||||
<view class="tip-text"> {{stepTexts[currentStepIndex]}} </view>
|
||||
</view>
|
||||
<!-- <view class="first-step" wx:if="{{currentStep === 'first'}}">
|
||||
<van-icon
|
||||
class-prefix="toy-icon"
|
||||
name="guide"
|
||||
@@ -19,5 +30,31 @@
|
||||
这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定”
|
||||
</view>
|
||||
</view>
|
||||
<view class="second-step"> </view>
|
||||
<view class="second-step" wx:elif="{{currentStep === 'second'}}">
|
||||
<van-icon
|
||||
class-prefix="toy-icon"
|
||||
name="guide"
|
||||
color="#FFEB3B"
|
||||
custom-class="guide-icon"
|
||||
size="100rpx" />
|
||||
<view class="tip-text"> 点击这里修改颜色 </view>
|
||||
</view>
|
||||
<view class="third-step" wx:elif="{{currentStep === 'third'}}">
|
||||
<van-icon
|
||||
class-prefix="toy-icon"
|
||||
name="guide"
|
||||
color="#FFEB3B"
|
||||
custom-class="guide-icon"
|
||||
size="100rpx" />
|
||||
<view class="tip-text"> 点击这里删除 </view>
|
||||
</view>
|
||||
<view class="fourth-step" wx:else>
|
||||
<van-icon
|
||||
class-prefix="toy-icon"
|
||||
name="guide"
|
||||
color="#FFEB3B"
|
||||
custom-class="guide-icon"
|
||||
size="100rpx" />
|
||||
<view class="tip-text"> 这里会生成图片，下载后可打印、涂色、识字 </view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user