|
|
@@ -1,209 +1,464 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view class="video_play" v-if="videoInfo.video_src">
|
|
|
- <video id="myVideo" class="video_control" :src="videoInfo.video_src" @timeupdate="timeUpdate" :enable-progress-gesture="false" :enable-play-gesture="true"></video>
|
|
|
- </view>
|
|
|
- <view class="video_title">{{videoInfo.name}}</view>
|
|
|
- <view class="rich_text">
|
|
|
- <rich-text :nodes="videoInfo.content"></rich-text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view>
|
|
|
+ <view class="video_play" v-if="videoInfo.video_src">
|
|
|
+ <video
|
|
|
+ id="myVideo"
|
|
|
+ class="video_control"
|
|
|
+ @play="_videoPlay"
|
|
|
+ :src="videoInfo.video_src"
|
|
|
+ @timeupdate="timeUpdate"
|
|
|
+ :enable-progress-gesture="false"
|
|
|
+ :enable-play-gesture="true"
|
|
|
+ :enable-auto-rotation="true"
|
|
|
+ :initial-time="videoInfo.inittime || 0"
|
|
|
+ :show-bottom-progress="videoInfo.learn_status == 1"
|
|
|
+ @ended="_videoEnd"
|
|
|
+ @fullscreenchange="screenChange"
|
|
|
+ ></video>
|
|
|
+ <cover-view v-if="videoInfo.learn_status == 0" :class="bigsScreen ? 'bigScreen' : 'cover'"></cover-view>
|
|
|
+ </view>
|
|
|
+ <view class="video_title">{{ videoInfo.name }}</view>
|
|
|
+ <view class="rich_text">
|
|
|
+ <rich-text :nodes="videoInfo.content"></rich-text>
|
|
|
+ </view>
|
|
|
+ <uni-popup ref="questionRef" type="center" :is-mask-click="false">
|
|
|
+ <view class="popup_content">
|
|
|
+ <!-- 答题区域 -->
|
|
|
+ <view class="content" v-if="!show_answer">
|
|
|
+ <!-- 问题内容 -->
|
|
|
+ <view class="question_content">{{ questinInfo.question_title }}</view>
|
|
|
+ <!-- 问题选项 -->
|
|
|
+ <view class="question_options">
|
|
|
+ <view v-for="(option, index) in questinInfo.answer_list" :key="index" :class="['question_answer', { active: answer_id == option.id }]" @click="_selectAnswer(option.id)">
|
|
|
+ {{ option.value }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view :class="['submit_btn', { active: answer_id }]" @click="_submitAnswer">提交</view>
|
|
|
+ </view>
|
|
|
+ <!-- 结果区域 -->
|
|
|
+ <view class="content" v-else>
|
|
|
+ <icon :type="answerInfo.is_answer == 1 ? 'success' : 'cancel'" size="64" />
|
|
|
+ <view class="title">{{ answerInfo.is_answer == 1 ? "恭喜您，答对啦!" : "很遗憾，答错了" }}</view>
|
|
|
+ <view class="tip">{{ answerInfo.is_answer == 1 ? "继续保持，你正在进步!" : "别灰心，再接再厉！" }}</view>
|
|
|
+ <view class="score_content">
|
|
|
+ <view>得分</view>
|
|
|
+ <view :style="answerInfo.get_score == 0 ? 'color:red' : 'color:green'">+{{ answerInfo.get_score }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="submit_btn active" @click="_goPlayVedio">继续学习视频</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- videoInfo:{
|
|
|
- id:0,
|
|
|
- name:"",
|
|
|
- content:"",
|
|
|
- video_src:""
|
|
|
- },
|
|
|
- // 请求参数
|
|
|
- requestParam: {
|
|
|
- id: 0
|
|
|
- },
|
|
|
- isReqing:false,
|
|
|
- videoContext:null,
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(param) {
|
|
|
- // 参数接收
|
|
|
- this.requestParam.id = param.id;
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- //分享按钮
|
|
|
- uni.showShareMenu({
|
|
|
- withShareTicket: true,
|
|
|
- menus: ["shareAppMessage", "shareTimeline"],
|
|
|
- });
|
|
|
- // #endif
|
|
|
- },
|
|
|
- onShareAppMessage(obj) {
|
|
|
- return {
|
|
|
- title: `999智控终端平台\n${this.videoInfo.title}`,
|
|
|
- path: "/pages/video/detail?id=" + this.videoInfo.id,
|
|
|
- promise: new Promise((resolve, reject) => {
|
|
|
- this.$http.request("api/share_message/get_item", { item_id: this.videoInfo.id, pages: "/pages/video/detail" }).then((callback) => {
|
|
|
- console.log(callback, "api/share_message/get_item");
|
|
|
- let obj = {
|
|
|
- title: callback.data?.title == "" ? `999智控终端平台\n${this.videoInfo.title}` : callback.data.title,
|
|
|
- path: "/pages/video/detail?id=" + this.videoInfo.id,
|
|
|
- };
|
|
|
- if (callback.data?.image_url !== "") {
|
|
|
- obj.imageUrl = callback.data.image_url;
|
|
|
- }
|
|
|
- resolve(obj);
|
|
|
- });
|
|
|
- }),
|
|
|
- };
|
|
|
- },
|
|
|
- onReady: function (res) {
|
|
|
-
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- // 如果存在产品ID的话
|
|
|
- if (this.requestParam.id > 0) {
|
|
|
- // 请求详情
|
|
|
- this.$http.request("api/video_course/get_detail", this.requestParam).then((re) => {
|
|
|
- // 成功渲染数据
|
|
|
- if (re.code == "success") {
|
|
|
- // 刷新数据
|
|
|
- this.videoInfo = re.data;
|
|
|
- // 获取视频容器的上下文
|
|
|
- this.videoContext = uni.createVideoContext('myVideo');
|
|
|
- // 暂停播放
|
|
|
- this.videoContext.stop();
|
|
|
- } else {
|
|
|
- if (re.code != "no_login") {
|
|
|
- uni.showModal({
|
|
|
- content: re.msg,
|
|
|
- showCancel: false,
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- timeUpdate(event){
|
|
|
- // 播放到对应的
|
|
|
- if( event.detail.currentTime ){
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ videoInfo: {
|
|
|
+ id: 0,
|
|
|
+ name: "",
|
|
|
+ content: "",
|
|
|
+ video_src: "",
|
|
|
+ },
|
|
|
+ // 请求参数
|
|
|
+ requestParam: {
|
|
|
+ id: 0,
|
|
|
+ },
|
|
|
+ isReqing: false,
|
|
|
+ videoContext: null,
|
|
|
+ isAnswerQuestion: false,
|
|
|
+ timer: null,
|
|
|
+ currentTime: 0, // 新增变量用于存储当前播放时间
|
|
|
+ questionTime_list: [],
|
|
|
+ questinInfo: {},
|
|
|
+ answer_id: null,
|
|
|
+ is_correct: false,
|
|
|
+ show_answer: false,
|
|
|
+ answeredQuestions: new Set(), // 新增变量用于存储已回答的问题
|
|
|
+ countdown: 0, // 新增变量用于存储倒计时时间
|
|
|
+ bigsScreen: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(param) {
|
|
|
+ // 参数接收
|
|
|
+ this.requestParam.id = param.id;
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ //分享按钮
|
|
|
+ uni.showShareMenu({
|
|
|
+ withShareTicket: true,
|
|
|
+ menus: ["shareAppMessage", "shareTimeline"],
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ uni.enableAlertBeforeUnload({
|
|
|
+ message: "您确定要退出学习吗?",
|
|
|
+ success: function (res) {
|
|
|
+ console.log("方法注册成功：", res);
|
|
|
+ },
|
|
|
+ fail: function (errMsg) {
|
|
|
+ console.log("方法注册失败：", errMsg);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ console.log("页面卸载");
|
|
|
+ clearInterval(this.timer);
|
|
|
+ },
|
|
|
+ onShareAppMessage(obj) {
|
|
|
+ return {
|
|
|
+ title: `999智控终端平台\n${this.videoInfo.title}`,
|
|
|
+ path: "/pages/video/detail?id=" + this.videoInfo.id,
|
|
|
+ promise: new Promise((resolve, reject) => {
|
|
|
+ this.$http.request("api/share_message/get_item", { item_id: this.videoInfo.id, pages: "/pages/video/detail" }).then((callback) => {
|
|
|
+ console.log(callback, "api/share_message/get_item");
|
|
|
+ let obj = {
|
|
|
+ title: callback.data?.title == "" ? `999智控终端平台\n${this.videoInfo.title}` : callback.data.title,
|
|
|
+ path: "/pages/video/detail?id=" + this.videoInfo.id,
|
|
|
+ };
|
|
|
+ if (callback.data?.image_url !== "") {
|
|
|
+ obj.imageUrl = callback.data.image_url;
|
|
|
+ }
|
|
|
+ resolve(obj);
|
|
|
+ });
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onReady: function (res) {},
|
|
|
+ onShow() {
|
|
|
+ // 如果存在产品ID的话
|
|
|
+ if (this.requestParam.id > 0) {
|
|
|
+ // 请求详情
|
|
|
+ this.$http.request("api/video_course/get_detail", this.requestParam).then((re) => {
|
|
|
+ // 成功渲染数据
|
|
|
+ if (re.code == "success") {
|
|
|
+ // 刷新数据
|
|
|
+ this.videoInfo = re.data;
|
|
|
+ if (re.data.question_list) {
|
|
|
+ this.questionTime_list = re.data?.question_list.map((item) => item.play_time);
|
|
|
+ }
|
|
|
+ // 获取视频容器的上下文
|
|
|
+ this.videoContext = uni.createVideoContext("myVideo");
|
|
|
+ // 暂停播放
|
|
|
+ this.videoContext.stop();
|
|
|
+ } else {
|
|
|
+ if (re.code != "no_login") {
|
|
|
+ uni.showModal({
|
|
|
+ content: re.msg,
|
|
|
+ showCancel: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ timeUpdate(event) {
|
|
|
+ this.currentTime = event.detail.currentTime; // 更新当前播放时间
|
|
|
+
|
|
|
+ // 播放到对应的
|
|
|
+ if (this.currentTime) {
|
|
|
+ if (!this.timer) {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this._postVideoDuration(this.currentTime, 0);
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
+ if (this.currentTime == event.detail.duration) {
|
|
|
+ this._postVideoDuration(this.currentTime, 1);
|
|
|
+ }
|
|
|
+ // 判断当前时间是否接近答题时间，并且该问题尚未回答
|
|
|
+ if (this.questionTime_list.includes(parseInt(this.currentTime) + 3) && !this.answeredQuestions.has(parseInt(this.currentTime) + 3)) {
|
|
|
+ this.countdown = 3;
|
|
|
+ this._startCountdown();
|
|
|
+ }
|
|
|
+ if (this.questionTime_list.includes(parseInt(this.currentTime)) && !this.answeredQuestions.has(parseInt(this.currentTime))) {
|
|
|
+ this.questinInfo = this.videoInfo.question_list.find((item) => item.play_time == parseInt(this.currentTime));
|
|
|
+ this.videoContext.pause();
|
|
|
+ this.videoContext.exitFullScreen();
|
|
|
+ this.$refs.questionRef.open("center");
|
|
|
+ //答题时间停止上报
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ _videoPlay() {
|
|
|
+ console.log("开始播放");
|
|
|
+ this.videoContext.requestFullScreen();
|
|
|
+ },
|
|
|
+ //上报视频播放时间
|
|
|
+ _postVideoDuration(video_playtime, status) {
|
|
|
+ if (status == 1) clearInterval(this.timer);
|
|
|
+ this.$http.request("api/video_learn_record/update_playtime", { record_id: this.videoInfo.record_id, video_playtime, status }).then((re) => {
|
|
|
+ if (re.code == "success") {
|
|
|
+ console.log("上报成功");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _selectAnswer(answer_id) {
|
|
|
+ this.answer_id = answer_id;
|
|
|
+ },
|
|
|
+ _submitAnswer() {
|
|
|
+ this.$http
|
|
|
+ .request("api/video_learn_answer/play_exam", {
|
|
|
+ record_id: this.videoInfo.record_id,
|
|
|
+ course_id: this.questinInfo.course_id,
|
|
|
+ question_id: this.questinInfo.question_id,
|
|
|
+ answer_id: this.answer_id,
|
|
|
+ })
|
|
|
+ .then((re) => {
|
|
|
+ if (re.code == "success") {
|
|
|
+ this.show_answer = true;
|
|
|
+ this.answerInfo = re.data;
|
|
|
+ // 将当前问题标记为已回答
|
|
|
+ this.answeredQuestions.add(this.questinInfo.play_time);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _goPlayVedio() {
|
|
|
+ this.questinInfo.isAnswer = true;
|
|
|
+ this.show_answer = false;
|
|
|
+ this.$refs.questionRef.close();
|
|
|
+ uni.showToast({
|
|
|
+ title: "2秒后切换横屏",
|
|
|
+ icon: "none",
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.videoContext.play();
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+ _startCountdown() {
|
|
|
+ const countdownInterval = setInterval(() => {
|
|
|
+ if (this.countdown > 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: `${this.countdown}秒后进入答题`,
|
|
|
+ icon: "none",
|
|
|
+ duration: 1000,
|
|
|
+ });
|
|
|
+ this.countdown--;
|
|
|
+ } else {
|
|
|
+ clearInterval(countdownInterval);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ _videoEnd() {
|
|
|
+ this.videoContext.pause();
|
|
|
+ this.videoContext.exitFullScreen();
|
|
|
+ uni.showModal({
|
|
|
+ title: "学习结束",
|
|
|
+ content: "恭喜您学习结束，是否查看报告?",
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/pages/video/record?type=learn&record_id=${this.videoInfo.record_id}`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ screenChange(event) {
|
|
|
+ let fullScreen = event.detail.fullScreen;
|
|
|
+ console.log("fullScreen", fullScreen);
|
|
|
+ this.bigsScreen = fullScreen;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .video_play{
|
|
|
- width: 750rpx;
|
|
|
- display: block;
|
|
|
- font-size: 36rpx;
|
|
|
- overflow: hidden;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 60rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- .video_control{
|
|
|
- width: 750rpx;
|
|
|
- display: block;
|
|
|
- font-size: 36rpx;
|
|
|
- overflow: hidden;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 60rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- .video_title{
|
|
|
- width: 700rpx;
|
|
|
- display: block;
|
|
|
- font-size: 36rpx;
|
|
|
- overflow: hidden;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 60rpx;
|
|
|
- padding: 0rpx 25rpx;
|
|
|
- padding-top: 60rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
- .video_time{
|
|
|
- width: 700rpx;
|
|
|
- color: #999999;
|
|
|
- display: block;
|
|
|
- font-size: 26rpx;
|
|
|
- overflow: hidden;
|
|
|
- line-height: 40rpx;
|
|
|
- padding: 0rpx 25rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
- .rich_text{
|
|
|
- width: 700rpx;
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 26rpx;
|
|
|
- margin: 0rpx auto;
|
|
|
- min-height: 800rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- padding: 10rpx 25rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- [alt] {
|
|
|
- //web_view图片
|
|
|
- max-width: 100%; // 避免图片超宽
|
|
|
- vertical-align: bottom; // 避免图片之间间隙
|
|
|
- }
|
|
|
- }
|
|
|
- .video_poster{
|
|
|
- width: 700rpx;
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
- margin: 6rpx auto;
|
|
|
- padding: 10rpx 25rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- .poster_img{
|
|
|
- width: 700rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- .read_total{
|
|
|
- width: 700rpx;
|
|
|
- color: #999999;
|
|
|
- display: block;
|
|
|
- font-size: 26rpx;
|
|
|
- overflow: hidden;
|
|
|
- line-height: 60rpx;
|
|
|
- padding: 0rpx 25rpx;
|
|
|
- margin-bottom: 122rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
- .handle_box {
|
|
|
- left: 0rpx;
|
|
|
- width: 700rpx;
|
|
|
- height: 120rpx;
|
|
|
- display: block;
|
|
|
- position: fixed;
|
|
|
- overflow: hidden;
|
|
|
- padding: 20rpx 25rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- bottom: var(--window-bottom);
|
|
|
- border-top: 2rpx solid #DDDDDD;
|
|
|
- .click_box{
|
|
|
- border: none;
|
|
|
- float: right;
|
|
|
- display: block;
|
|
|
- height: 120rpx;
|
|
|
- padding: 0rpx 0rpx;
|
|
|
- line-height: 120rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- font-size: 24rpx !important;
|
|
|
- background-color: transparent;
|
|
|
- .uni-icons{
|
|
|
- font-size: 36rpx !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .click_box::after{
|
|
|
- border: none;
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
+.video_play {
|
|
|
+ width: 750rpx;
|
|
|
+ display: block;
|
|
|
+ font-size: 36rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 60rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ .video_control {
|
|
|
+ width: 750rpx;
|
|
|
+ display: block;
|
|
|
+ font-size: 36rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 60rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ .cover {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 998;
|
|
|
+ height: 20%;
|
|
|
+ /* background-color: red; */
|
|
|
+ background-color: rgba(255, 255, 255, 0.007);
|
|
|
+ margin-left: 60px;
|
|
|
+ width: 70%;
|
|
|
+ }
|
|
|
+ .bigScreen {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -60%;
|
|
|
+ z-index: 998;
|
|
|
+ height: 20%;
|
|
|
+ /* background-color: red; */
|
|
|
+ background-color: rgba(255, 255, 255, 0.007);
|
|
|
+ margin-left: 70px;
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.video_title {
|
|
|
+ width: 700rpx;
|
|
|
+ display: block;
|
|
|
+ font-size: 36rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 60rpx;
|
|
|
+ padding: 0rpx 25rpx;
|
|
|
+ padding-top: 60rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.video_time {
|
|
|
+ width: 700rpx;
|
|
|
+ color: #999999;
|
|
|
+ display: block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 40rpx;
|
|
|
+ padding: 0rpx 25rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.rich_text {
|
|
|
+ width: 700rpx;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin: 0rpx auto;
|
|
|
+ min-height: 800rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ padding: 10rpx 25rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ [alt] {
|
|
|
+ //web_view图片
|
|
|
+ max-width: 100%; // 避免图片超宽
|
|
|
+ vertical-align: bottom; // 避免图片之间间隙
|
|
|
+ }
|
|
|
+}
|
|
|
+.video_poster {
|
|
|
+ width: 700rpx;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 6rpx auto;
|
|
|
+ padding: 10rpx 25rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ .poster_img {
|
|
|
+ width: 700rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+}
|
|
|
+.read_total {
|
|
|
+ width: 700rpx;
|
|
|
+ color: #999999;
|
|
|
+ display: block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 60rpx;
|
|
|
+ padding: 0rpx 25rpx;
|
|
|
+ margin-bottom: 122rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.handle_box {
|
|
|
+ left: 0rpx;
|
|
|
+ width: 700rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ display: block;
|
|
|
+ position: fixed;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 20rpx 25rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ bottom: var(--window-bottom);
|
|
|
+ border-top: 2rpx solid #dddddd;
|
|
|
+ .click_box {
|
|
|
+ border: none;
|
|
|
+ float: right;
|
|
|
+ display: block;
|
|
|
+ height: 120rpx;
|
|
|
+ padding: 0rpx 0rpx;
|
|
|
+ line-height: 120rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ font-size: 24rpx !important;
|
|
|
+ background-color: transparent;
|
|
|
+ .uni-icons {
|
|
|
+ font-size: 36rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .click_box::after {
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+.popup_content {
|
|
|
+ width: 600rpx;
|
|
|
+ height: 800rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 40rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ overflow: auto;
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20rpx;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ .question_content {
|
|
|
+ overflow-y: auto;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .question_options {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ .question_answer {
|
|
|
+ height: 80rpx;
|
|
|
+ width: 100%;
|
|
|
+ border: 4rpx solid #e3e3e3;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &.active {
|
|
|
+ border-color: #3c7aff;
|
|
|
+ background-color: #dbeafe;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .submit_btn {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ height: 100rpx;
|
|
|
+ background-color: #dddddd;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ &.active {
|
|
|
+ background-color: #5045e6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 64rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .score_content {
|
|
|
+ background-color: #f3f5f7;
|
|
|
+ padding: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
qianxinyu