hcj
4 months ago
parent
22784c38c7
commit
51fae596c6
@ -0,0 +1,105 @@ |
||||
<template> |
||||
<view class="courseInfo"> |
||||
<view>xxxxx</view> |
||||
<view @click="startLearn">开始学习</view> |
||||
<view @click="openInputCode">输入口令</view> |
||||
<view @click="pay">付费学习</view> |
||||
|
||||
<u-modal v-model="show"> |
||||
<view class="slot-content"> |
||||
<view v-if="toggleFlag === 'tolearn'"> |
||||
<label>www.baidu.com</label> |
||||
</view> |
||||
<view v-else class="input-list"> |
||||
<!-- input输入框 --> |
||||
<input class="input-item" v-if="focus" adjust-position="false" auto-blur="true" |
||||
@blur="inputCodeBlur" @input="inputCode" :focus="focus" v-model="code" @focus="inputFocus" |
||||
type="number" oneTimeCode maxlength="6" /> |
||||
<!-- 验证码输入框 --> |
||||
<view class="code-list" @click="focusClick"> |
||||
<view class="code-item" v-for="(item, index) in 6" :key="index" |
||||
:style="(index == code.length && focus ? 'border-color:#3c9cff;' : '')">{{ code[index] || '' |
||||
}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</u-modal> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
toggleFlag:'', |
||||
show: false, |
||||
focus: false, |
||||
code: '' |
||||
} |
||||
}, |
||||
methods: { |
||||
startLearn() { |
||||
this.show = true |
||||
this.toggleFlag = 'tolearn' |
||||
}, |
||||
focusClick() { |
||||
this.focus = true |
||||
}, |
||||
pay() { |
||||
console.log('pay for this'); |
||||
}, |
||||
openInputCode() { |
||||
this.show = true |
||||
}, |
||||
inputCode(e) { |
||||
let value = e.detail.value |
||||
this.code = value |
||||
}, |
||||
inputFocus(e) { |
||||
console.log(e); |
||||
}, |
||||
inputCodeBlur(e) { |
||||
let value = e.detail.value |
||||
this.focus = false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.courseInfo { |
||||
.slot-content { |
||||
font-size: 28rpx; |
||||
color: $u-content-color; |
||||
padding-left: 30rpx; |
||||
} |
||||
|
||||
.input-list { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.input-item { |
||||
width: 0rpx; |
||||
} |
||||
|
||||
.code-list { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.code-item { |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
text-align: center; |
||||
line-height: 80rpx; |
||||
border: 1rpx solid #eee; |
||||
border-radius: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,13 @@ |
||||
<template> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
|
After Width: | Height: | Size: 866 B |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,252 @@ |
||||
<template> |
||||
<view class="onLineCourseWrap"> |
||||
<view class="onLineTitle"> |
||||
<img src="./olCourse.png" alt=""> |
||||
<view>{{ '如何使用性能测试工具' }}</view> |
||||
</view> |
||||
<view class="onLineTime">时间: {{ '今日:20:00' }}</view> |
||||
<view class="onLineTeacher">讲师:{{ '独孤求败' }}</view> |
||||
<view class="onLine">职称:{{ '气宗大师' }}</view> |
||||
<view class="onLineContent">授课内容: {{ '教导令狐冲' }}</view> |
||||
<view class="onLineMask" v-show="maskShow"> |
||||
<img src="./arr.png" alt=""> |
||||
<view class="learnBtnWrap"> |
||||
<view class="learnBtn" @click="startLearn('pay')">付费学习</view> |
||||
<view class="learnBtn" @click="startLearn('code')">输入口令学习</view> |
||||
</view> |
||||
</view> |
||||
<view v-show="!maskShow" class="startLeranBtn">开始学习</view> |
||||
<u-modal v-model="show" title="请输入口令" :show-confirm-button="false"> |
||||
<view class="slot-content"> |
||||
<view v-if="toggleFlag === 'tolearn'"> |
||||
<label>www.baidu.com</label> |
||||
</view> |
||||
<view v-else class="input-list"> |
||||
<!-- input输入框 --> |
||||
<input class="input-item" v-if="focus" adjust-position="false" auto-blur="true" |
||||
@blur="inputCodeBlur" @input="inputCode" :focus="focus" v-model="code" @focus="inputFocus" |
||||
type="number" oneTimeCode maxlength="6" /> |
||||
<!-- 验证码输入框 --> |
||||
<view class="code-list" @click="focusClick"> |
||||
<view class="code-item" v-for="(item, index) in 4" :key="index" |
||||
:style="(index == code.length && focus ? 'border-color:#3c9cff;' : '')">{{ code[index] || '' |
||||
}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="codeBtnCoup"> |
||||
<view class="codeBtn canle" @click="show = false">取消</view> |
||||
<view class="codeBtn sure" @click="show = false">确定</view> |
||||
</view> |
||||
</view> |
||||
</u-modal> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
maskShow: true, |
||||
toggleFlag: '', |
||||
show: false, |
||||
focus: false, |
||||
code: '' |
||||
} |
||||
}, |
||||
methods: { |
||||
startLearn() { |
||||
this.maskShow = !this.maskShow |
||||
}, |
||||
startLearn(val) { |
||||
if (val == 'code') { |
||||
this.show = true |
||||
} |
||||
// this.toggleFlag = 'tolearn' |
||||
|
||||
}, |
||||
focusClick() { |
||||
this.focus = true |
||||
}, |
||||
pay() { |
||||
console.log('pay for this'); |
||||
}, |
||||
openInputCode() { |
||||
this.show = true |
||||
}, |
||||
inputCode(e) { |
||||
let value = e.detail.value |
||||
this.code = value |
||||
}, |
||||
inputFocus(e) { |
||||
console.log(e); |
||||
}, |
||||
inputCodeBlur(e) { |
||||
let value = e.detail.value |
||||
this.focus = false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.onLineCourseWrap { |
||||
margin: 25rpx; |
||||
height: calc(100% - 50rpx); |
||||
background: #FFFFFF; |
||||
border-radius: 10rpx; |
||||
padding: 24rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 24rpx; |
||||
color: #404040; |
||||
|
||||
.onLineTitle { |
||||
font-weight: bold; |
||||
font-size: 28rpx; |
||||
color: #000000; |
||||
line-height: 46rpx; |
||||
margin: 30rpx 0; |
||||
display: flex; |
||||
align-items: center; |
||||
img{ |
||||
width: 38rpx; |
||||
height: 38rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
} |
||||
|
||||
.onLineTime { |
||||
margin: 15rpx 0; |
||||
} |
||||
|
||||
.onLineTeacher { |
||||
margin: 15rpx 0; |
||||
} |
||||
|
||||
.onLine { |
||||
margin: 15rpx 0; |
||||
} |
||||
|
||||
.onLineContent { |
||||
margin: 15rpx 0; |
||||
} |
||||
|
||||
.onLineMask { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #1B81F9; |
||||
background: linear-gradient(180deg, #ffffff07, #1B81F9); |
||||
|
||||
img { |
||||
width: 46rpx; |
||||
height: 111rpx; |
||||
margin: 619rpx 0 0 50%; |
||||
} |
||||
|
||||
.learnBtnWrap { |
||||
width: 279rpx; |
||||
margin-top: 200rpx; |
||||
margin-left: 50%; |
||||
transform: translate(-50%); |
||||
|
||||
.learnBtn { |
||||
margin-bottom: 50rpx; |
||||
height: 67rpx; |
||||
background: linear-gradient(90deg, #5EA6FD, #1A81F9); |
||||
box-shadow: 0rpx 1rpx 20rpx 1rpx rgba(13, 92, 187, 0.53); |
||||
border-radius: 33rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 30rpx; |
||||
color: #FFFFFF; |
||||
line-height: 65rpx; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.startLeranBtn { |
||||
position: fixed; |
||||
bottom: 69rpx; |
||||
width: 646rpx; |
||||
height: 70rpx; |
||||
background: linear-gradient(90deg, #5EA6FD, #1A81F9); |
||||
box-shadow: 0rpx 1rpx 20rpx 1rpx rgba(13, 92, 187, 0.4); |
||||
border-radius: 35rpx; |
||||
|
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 30rpx; |
||||
color: #FFFFFF; |
||||
line-height: 65rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.slot-content { |
||||
font-size: 28rpx; |
||||
color: $u-content-color; |
||||
padding-left: 30rpx; |
||||
} |
||||
|
||||
.input-list { |
||||
padding-top: 20rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.input-item { |
||||
width: 0rpx; |
||||
} |
||||
|
||||
.code-list { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
|
||||
.code-item { |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
text-align: center; |
||||
line-height: 80rpx; |
||||
border: 1rpx solid #eee; |
||||
border-radius: 10rpx; |
||||
background: #EAEEF3; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
.codeBtnCoup { |
||||
padding: 20rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 40rpx; |
||||
.codeBtn { |
||||
width: 250rpx; |
||||
line-height: 70rpx; |
||||
border-radius: 35rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: #FFFFFF; |
||||
} |
||||
.sure{ |
||||
background: linear-gradient(90deg, #5EA6FD, #1A81F9); |
||||
} |
||||
.canle{ |
||||
color: #666666; |
||||
border: 1px solid #E0E0E0; |
||||
} |
||||
} |
||||
|
||||
// & >>>.u-model__title { |
||||
// font-weight: bold; |
||||
// } |
||||
|
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue