keysass_app/pages/index/testtraining/onLineCourse.vue

<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>