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