驾考app驾考理论速成技巧驾校源码小程序驾考理论驾考科目三3D仿真灯光模拟实现

在开发驾考科目一,科目四题库系统完成后，参考市面上已有的驾考系统，新开发驾考科目三3D仿真灯光模拟微信小程序端，整个系统预览图

系统前端UNIAPP开发,后端基于微擎核心开发，支持APP,公众号，微信小程序3端
灯光模拟部分代码前端实现
操作界面布局

 <view class="quanping"><view class="content"><view @click="go_back" class="back-home" v-if="1==2" :style="back_top"><image mode="aspectFit" src="/static/common/images/back.png"></image></view><view @click="show_help" class="show-help" :style="back_top"><image mode="aspectFit" src="/static/images/question.png"></image></view><view @click="time_pause" :class="{'show':timeout_text>0}"class="timer-view" :style="timeout_text_css">{{timeout_text}}</view><view class="test-btn-list" :style="test_btn_css"> <button @click="tap_practise" :class="[is_in_practise?'btn-active-md':'btn-default-md']" hover-class="btn-active-md1">{{is_in_practise?'练习中':'练习模式'}}</button><button @click="tap_exam" :class="[is_in_exam?'btn-active-md':'btn-default-md']" hover-class="btn-active-md1">{{is_in_exam?'考试中':'考试模式'}}</button><button @click="setquiz"  class="btn-default-md" hover-class="btn-active-md">设置题库</button><button class="btn-default-md" hover-class="btn-active-md" open-type="share">分享</button></view><view class="center-bg"><image class="center-wall" mode="widthFix" src="/static/common/images/center-wall.png"></image><image class="center-road" src="/static/common/images/center-road.png"></image><image class="center-road-side" src="/static/common/images/center-road-side.png"></image><image class="center-road-side" v-show="light_status.shikuandeng" src="/static/common/images/center-wall-shikuandeng.png"></image><image class="center-road-side" v-show="light_status.jinguangdeng" src="/static/common/images/center-wall-jinguangdeng.png"></image><image class="center-road-side" v-show="light_status.t_yuanguangdeng" src="/static/common/images/center-wall-yuanguangdeng.png"></image><image class="center-road-side" v-show="light_status.qianwudeng || light_status.houwudeng" src="/static/common/images/center-wall-wudeng.png"></image><image class="center-road-side" v-show="light_status.t_zuozhuandeng" src="/static/common/images/center-wall-zuozhuandeng.png"></image><image class="center-road-side" v-show="light_status.t_youzhuandeng" src="/static/common/images/center-wall-youzhuandeng.png"></image></view><view class="dz-yuanguananniu"><view><image @touchstart="ts_yuanguangdeng"@touchend="te_yuanguangdeng"class="dz-dadeng-up":src="dzdadengupimg">    </image><image @touchstart="ts_yuanguangdeng_mid"@touchend="te_yuanguangdeng_mid"class="dz-dadeng-mid" :src="dzdadengmidimg"> </image><view><image @touchstart="ts_yuanguangdeng_gt"@touchend="te_yuanguangdeng_gt"class="dz-dadeng-down" :src="dzdadengdownimg"> </image></view></view></view><view class="cockpit"><image class="dizuo" mode="scaleToFill" src="/static/images/dz-dizuo.png"></image><view class="ctr-list"><view :animation = "yaogan_animation" class="dz-yaogan-view"><view class="dz-yaogan-view1" :style="yaogan_width"><image @touchstart="yaogan_start"@touchmove="yaogan_move"@touchend="yaogan_end"class="dz-yaogan" mode="aspectFit" src="/static/images/dz-yaogan.png"></image></view></view><view class="dz-xuanzhuan"><view class="dz-xuanzhuan-bg"><image class="dz-anniudi" src="/static/images/dz-anniudi.png"></image><view :animation = "xuanzhuan_animation"  class="dz-xuanzhuanniu"><image @touchstart="xuanzhuan_start"@touchmove="xuanzhuan_move"@touchend="xuanzhuan_end"@click="xuanzhuan_click"class="dz-xuanzhuanniu-img" :src="xuanzhuanimg"></image></view></view></view><image class="yibiaopan" src="/static/images/dz-yibiaopan.png"></image><image class="yibiaopan" v-show="light_status.t_zuozhuandeng" src="/static/images/dz-zuozhuandeng.png"></image><image class="yibiaopan" v-show="light_status.t_youzhuandeng" src="/static/images/dz-youzhuandeng.png"></image><image class="yibiaopan" v-show="light_status.qianwudeng && light_status.houwudeng" src="/static/images/dz-houwudeng.png"></image><image class="yibiaopan" v-show="light_status.t_yuanguangdeng" src="/static/images/dz-yuanguangdeng.png"></image><image @click="weixiandeng_click"class="dz-weixiandeng" :src="weixiandengimg"></image></view></view></view><view @click="hide_error" class="toast-error" :style="toast_error_display"><view class="toast-content"><view class="flex-row header"><image mode="widthFix" src="/static/common/images/error-tips.png"></image><view>操作错误</view></view><view v-show="QA.finnaly"class="flex-row list-content"><view class="title">提醒:</view><view>{{QA.Q}}</view></view><view v-show="!QA.finnaly"class="flex-row list-content"><view class="title">题目:</view><view>{{QA.Q}}</view></view><view v-show="!QA.finnaly"class="flex-row list-content" ><view class="title">操作:</view><view class="info"><text>{{QA.A}}</text>{{QA.OP?"（"+QA.OP+"）":""}} </view></view><view class="flex-row btn-list"><button @click.stop="once_again_error" class="btn-active-lg" hover-class="btn-active-lg1" v-if="is_in_practise&&paid">重做此题</button><button @click.stop="play_yj_error" class="btn-active-lg" hover-class="btn-active-lg1" v-if="yuanguangdeng_gt_error">错误原因</button></view></view></view><view @click="hide_succ" class="toast-succ" :style="toast_succ_display"><view class="toast-content"><view class="flex-row header"><image mode="widthFix" src="/static/common/images/succ-tips.png"></image><view>顺利通过</view></view><view class="flex-row succ-content" v-if="is_in_exam"> 恭喜您通过了本次科目三灯光考试模式，您平时可以多加练习，确保对所有题目和考试流程能够熟练掌握，候考的时候还可以拿出手机再练习一下，很方便哦，祝您考试顺利！</view><view class="flex-row succ-content" v-else> 恭喜您已经一次性做对了所有的练习题目，现在您可以点击“考试模式”去检验一下自己对考题的掌握程度，系统每次会随机从考题中抽取{{question_config.randomQuestionNum}}道题目进行考试模式，快去试试吧！</view></view></view><view v-show = "showHelp"@click="show_help" class="help-image"><button @click.stop="show_help" class="back-home"><image mode="aspectFit" src="/static/common/images/back.png"></image></button><image @click.stop="show_help_video" class="video-btn" mode="widthFix" src="/static/help/video_hanyu.png"></image><image class="bg" mode="aspectFill" src="/static/help/dazhong_hanyu.jpg"></image><view v-show = "showHelpVideo"@click.stop="videowrapper" class="video-wrapper" ><view class="video-content"><video id="helpVideo":controls="true" :showCenterPlayBtn="false" :showFullscreenBtn="false" :showPlayBtn="true"src="http://www.ailaopo.top/dazhong.mp4"></video></view><image @click="show_help_video" class="close" mode="widthFix" src="/static/help/close_f.png"></image></view></view></view>
//部分功能函数实现
<script>tap_practise(){let i = this.is_in_practise;if(!this.is_in_practise){if(this.questionlistUser.length<5){//设置题库uni.navigateTo({url:"/pages/quiz/quiz"})}else{this.playButton();this.reset_page();this.reset_light_status();this.is_in_practise = true;this.is_in_exam = false;this.generate_quiz();this.execute_quiz();}}else{this.reset_page();this.reset_light_status();this.is_in_practise = false;this.is_in_exam = false;this.toast_error_display = "display:none";this.toast_succ_display = "display:none";this.yuanguangdeng_gt_error = false;this.test_btn_css = "width: 21.86667vmin";}},hide_error(){let t = this;//this.yj_error_audio.stop(), this.reset_page();this.reset_light_status();this.toast_error_display = "display:none";this.yuanguangdeng_gt_error = false;this.test_btn_css = "width: 21.86667vmin";},once_again_error(){this.toast_error_display = "display:none";this.toast_succ_display  = "display:none";this.yuanguangdeng_gt_error = false;this.stopAudio();this.execute_quiz(this.current_test);},play_yj_error(){this.stopAudio();this.playYjError();},hide_succ(){let t = this;this.reset_page();this.reset_light_status();this.is_in_practise = false;this.is_in_exam = false;this.toast_succ_display = "display:none";this.yuanguangdeng_gt_error = false;this.test_btn_css = "width: 21.86667vmin";}
</script>

驾考app驾考理论速成技巧驾校源码小程序驾考理论驾考科目三3D仿真灯光模拟实现相关推荐

Java开发多、单商户淘宝客+任务系统cps系统源码小程序app
Java开发的多商户淘宝客.任务cps系统源码淘宝客+美团外卖+饿了么外卖+多麦CPS+京东+拼多多+多商户自营+任务墙+本地生活模块+抖音+唯品会+文娱充值+话费充值小程序app主要包括用户端.商家 ...
Java开发陪玩系统源码小程序app详细介绍
Java开发的陪玩系统源码小程序app以下是它的功能介绍: 一.用户端: 1. 用户注册与登录:用户可以使用手机号或微信登录进行注册. 2. 服务列表:用户可以浏览选择陪玩师提供的服务类型和价格,包括 ...
Java开发上门洗车系统源码小程序app介绍
Java开发的上门洗车系统源码小程序app一般包含以下功能: 一.用户端: 1.用户注册与登录 2.车辆管理:用户可以添加和管理其拥有的车辆信息,包括车型.车牌号.车辆位置等信息. 3.订单管理:用户 ...
啦啦外卖公众号+小程序 V43.0开源至尊独立版+独家用户授权升级+小程序端+APP源码+小程序端VUE源码安装教程
啦啦外卖跑腿平台开源至尊独立稳定版公众号+小程序 V43.0版系统为独立开源版,最大优势全开源,使用的都知道该系统功能非常强大,是目前外卖平台功能最全的一套系统.拿来即用,也非常合适做二开的朋友,包括 ...
Java开发的汽车俱乐部系统源码小程序app
汽车俱乐部系统是一款基于Java语言开发的小程序app,主要面向汽车爱好者,提供汽车论坛.车友圈.车型资讯和汽车美图等多种服务,让用户可以方便地获取汽车相关的信息,并与其他车友互动交流. 该小程序ap ...
Java开发的校园外卖系统源码小程序app
校园外卖系统的基本流程和功能模块: 校园外卖系统一般包含用户端和商家端两个应用,它们可以联合起来实现校园餐饮的订餐和配送等服务.其中,用户端通常支持在线浏览餐厅信息.选择菜品.下单.支付.评价等功能, ...
java计算机毕业设计驾考服务系统MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计驾考服务系统MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计驾考服务系统MyBatis+系统+LW文档+源码+调试部署本源码技术栈: 项目架构:B/S架构 ...
2022-10-24 ClickHouse 源码解析-查询引擎经典理论
ClickHouse 源码解析: 综述 ClickHouse 源码解析: MergeTree Write-Path ClickHouse 源码解析: MergeTree Read-Path Click ...
科一科四题库技巧软件源码
科一科四题库技巧软件,科一科四题库技巧软件源码加我微信dddd0791

驾考app驾考理论速成技巧驾校源码小程序驾考理论驾考科目三3D仿真灯光模拟实现

驾考app驾考理论速成技巧驾校源码小程序驾考理论驾考科目三3D仿真灯光模拟实现相关推荐

最新文章

热门文章