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> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue