搭建基于火灾风险预测与防范的消防安全科普小程序
基于微信小程序的消防安全科普互动平台的设计与实现,是关于微信小程序的,知识课程学习,包括学习后答题。
技术栈主要采用微信小程序云开发,有下面的模块:
1.课程学习模块
2.资讯模块
3.答题模块
4.我的模块
还需要有创新点,后面加了一个 火灾风险预测:根据用户输入的场所信息(面积、人员密度、消防设施配备等),运用算法计算火灾风险等级,并针对性地给出预防措施和应急预案建议。
然后我进行了梳理,并整理出两个版本,提供选择,并给出了我的个人建议。
需求梳理版本1:
1.学习模块:分为两大类,分别是:视频学习和图文学习。(学习完成后可以获得积分,可进行分享、收藏,评论)
2.资讯模块:分为政策法规,事故报道
3.答题模块:专项答题(可以获得积分)
4.我的模块:积分统计,我的错题集,我的收藏
5.关于各种灭火器的使用。
灭火器的图片上有1、2、3、4的数字按钮,代表灭火器的使用步骤。按到哪个按钮会有语言,告诉具体应该怎么做以及注意事项
火灾风险预测:根据用户输入的场所信息(面积、人员密度、消防设施配备等),运用算法计算火灾风险等级,并针对性地给出预防措施和应急预案建议。
需求梳理版本2:
1.学习模块:视频学习(学习完成后可以获得积分,可进行分享、收藏,评论)
2.答题模块:专项答题(可以获得积分)
3.我的模块:积分统计,我的错题集,我的收藏
4.关于各种灭火器的使用。
灭火器的图片上有1、2、3、4的数字按钮,代表灭火器的使用步骤。按到哪个按钮会有语言,告诉具体应该怎么做以及注意事项
火灾风险预测:根据用户输入的场所信息(面积、人员密度、消防设施配备等),运用算法计算火灾风险等级,并针对性地给出预防措施和应急预案建议。
然后,视频学习是分专题,专题里面分目录。
根据人员的学习情况,答题情况,和火灾情况,展示在一个统计图表上。
如果用统计图表分析往年的各类火灾发生情况可以怎么实现,效果是怎样的(火灾发生的月份、火灾原因占比以及不同区域的火灾发生次数)
画了个草图:
实现之后的界面效果
首页
轮播图,支持左右滑动切换,支持自动切换。
自动播报通告栏目的通知内容。
火灾风险预测和灭火器的使用要拆成两个模块。
课程专场以列表的形式展示。
页面布局
<view class="mw-page"><swiper class="screen-swiper" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500"><swiper-item wx:for="{{banner}}" wx:key="index"><image src="{{item}}" mode='aspectFill'></image></swiper-item></swiper><van-notice-bartext="欢迎使用“火灾风险防范知识科普”小程序!加强火灾风险防范意识!"backgroundColor="#FEFCED"color="#B77F49"/><view class="padding-top"><view class='nav-list'><view class="nav-li padding-sm bg-gradual-orange" catchtap="goToUsageGuide"><view class="nav-title">灭火器使用指引</view><view class="nav-name">fire extinguisher</view></view><view class="nav-li padding-sm bg-gradual-sky" catchtap="goToFireRiskPrediction"><view class="nav-title">火灾风险预测</view><view class="nav-name">risk prediction</view></view></view>
</view><view class="mw-content"><view class="cu-bar justify-center"><view class='action border-title'><text class='text-xl text-bold text-yellow'>课程专场</text><text class='bg-yellow' style='width:2rem'></text></view></view><view class="margin-top nav-list"><view class="radius shadow ke-cheng nav-li" wx:for="{{list}}" wx:key="index" catchtap="goToDetail" data-id="{{item._id}}"><view class="pic-box"><image src="{{item.thumb}}" mode="widthFix" class="thumb"></image></view><van-tag type="primary" color="#e4e8ff" text-color="#6676EF" class="tag"><text style="padding: 6rpx 4rpx;">{{item.mediatext}}</text></van-tag><view class="padding"><view class="text-bold padding-bottom-xs">{{item.menuname}}</view><view class="text-gray">共{{item.ksnum}}课时 | {{item.viewnum}}人已学</view></view></view></view></view>
</view>
层叠样式
page{background-color: #fff;
}
.mw-bg {position: absolute;top: 0;left: 0;width: 750rpx;height: 100vh;
}
.mw-btn {position: absolute;bottom: 10rpx;left: 0;width: 750rpx;z-index: 2;
}
.mw-answer {padding: 100rpx 150rpx 30rpx;
}
.mw-content {padding-bottom: 20rpx;
}
.mw-banner {width: 100%;
}
.thumb {width: 100%;
}
.ke-cheng {position: relative;overflow: hidden;
}
.tag {position: absolute;top: 0;right: 0;
}
.pic-box {height: 180rpx;overflow: hidden;
}.nav-list {display: flex;flex-wrap: wrap;justify-content: space-between;
}.nav-li {border-radius: 12rpx;width: 45%;margin: 0 2.5% 40rpx;position: relative;z-index: 1;
}.nav-li::after {content: "";position: absolute;z-index: -1;background-color: inherit;width: 100%;height: 100%;left: 0;bottom: -10%;border-radius: 10rpx;opacity: 0.2;transform: scale(0.9, 0.9);
}.nav-title {font-size: 32rpx;
}.nav-name {font-size: 22rpx;text-transform: Capitalize;margin-top: 20rpx;position: relative;opacity: .5;
}.nav-name::before {content: "";position: absolute;display: block;width: 40rpx;height: 6rpx;background: #fff;bottom: 0;right: 0;opacity: 0.5;
}.nav-name::after {content: "";position: absolute;display: block;width: 100rpx;height: 1px;background: #fff;bottom: 0;right: 40rpx;opacity: 0.3;
}.nav-name::first-letter {font-weight: bold;font-size: 26rpx;margin-right: 1px;
}
灭火器的使用指引
包括使用步骤,以及TTS语音播报功能。
页面布局
<view class="mw-page"> <view class="mw-content"><view class="cu-bar justify-center"><view class='action border-title'><text class='text-xl text-bold text-yellow'>手提式干粉灭火器</text><text class='bg-yellow' style='width:2rem'></text></view></view><view class="padding radius"><view>灭火器的使用步骤通常包括以下几个关键环节,以下是基于常见灭火器操作流程的说明:</view></view><view class="padding radius shadow margin" catchtap="playFunc" data-index="{{0}}"><view class="step1-box"><view class="text-bold padding-bottom-xs">{{list[0].name}}</view><van-button class="step1" round type="info" color="#6676EF" size="small"><text class="icon-notification lg"></text>步骤1</van-button></view></view><view class="pic-box"><image src="/image/f1.jpg" mode='widthFix' class="mw-banner"></image><van-button class="step2" round type="info" color="#6676EF" size="small" catchtap="playFunc" data-index="{{1}}"><text class="icon-notification lg"></text>步骤2</van-button><van-button class="step3" round type="info" color="#6676EF" size="small" catchtap="playFunc" data-index="{{2}}"><text class="icon-notification lg"></text>步骤3</van-button><van-button class="step4" round type="info" color="#6676EF" size="small" catchtap="playFunc" data-index="{{3}}"><text class="icon-notification lg"></text>步骤4</van-button></view></view>
</view>
层叠样式
page{background-color: #fff;
}
.mw-bg {position: absolute;top: 0;left: 0;width: 750rpx;height: 100vh;
}
.mw-btn {position: absolute;bottom: 10rpx;left: 0;width: 750rpx;z-index: 2;
}
.mw-answer {padding: 100rpx 150rpx 30rpx;
}
.mw-content {padding-bottom: 10rpx;
}
.mw-banner {width: 100%;
}
.pic-box {position: relative;
}
.step2 {position: absolute;top: 360rpx;right: 20rpx;z-index: 2;animation: scaleDrew 1s ease-in-out infinite;
}
.step3 {position: absolute;bottom: 430rpx;left: 230rpx;z-index: 2;animation: scaleDrew 1s ease-in-out infinite;
}
.step4 {position: absolute;top: 30rpx;right: 50rpx;z-index: 2;animation: scaleDrew 1s ease-in-out infinite;
}
.step1-box {position: relative;
}
.step1 {position: absolute;top: -6rpx;right: 0rpx;z-index: 2;animation: scaleDrew 1s ease-in-out infinite;
}
@keyframes scaleDrew {0% {transform: scale(1);}25% {transform: scale(1.05);}50% {transform: scale(1);}75% {transform: scale(1.05);}
}
火灾风险预测
页面布局
<view class="fire-risk-prediction-container"><view class="form-item"><text>场所面积(平方米):</text><input type="number" placeholder="请输入面积" bindinput="onAreaInput" /></view><view class="form-item"><text>人员密度(人/平方米):</text><input type="number" placeholder="请输入人员密度" bindinput="onDensityInput" /></view><view class="form-item"><text>消防设施配备(0-100分,越高越完善):</text><input type="number" placeholder="请输入消防设施评分" bindinput="onFireFacilitiesInput" /></view><view class="form-item"><text>建筑材料易燃性(0-100分,越高越易燃):</text><input type="number" placeholder="请输入建筑材料评分" bindinput="onMaterialsInput" /></view><view class="form-item"><text>电气设备老化程度(0-100分,越高越老化):</text><input type="number" placeholder="请输入电气设备评分" bindinput="onElectricalInput" /></view><view class="form-item"><text>易燃物存储情况(0-100分,越高越危险):</text><input type="number" placeholder="请输入易燃物存储评分" bindinput="onFlammableInput" /></view><view class="padding"><van-button round block type="info" color="#6676EF" bindtap="calculateRisk">计算风险等级</van-button></view>
</view>
层叠样式
page{background-color: #fff;
}
.fire-risk-prediction-container {padding: 20px;
}.form-item {margin-bottom: 15px;
}input {border: 1px solid #ddd;padding: 0 20rpx;height: 66rpx;width: 100%;border-radius: 10rpx;margin-top: 10rpx;
}button {margin-top: 20px;background-color: #007BFF;color: white;
}.result {margin-top: 20px;padding: 15px;background-color: #f9f9f9;border: 1px solid #ddd;
}
风险预测结果
页面布局
<view class="padding"><view class='grid col-2'><view class='padding-sm'><view class="bg-{{riskLevel == '高风险'?'red':riskLevel == '中风险'?'orange':'green'}} padding radius text-center shadow-blur"><view class="text-df">火灾风险等级:</view><view class='margin-top-sm text-xl text-bold'>{{riskLevel}}</view></view></view><view class='padding-sm'><view class="bg-{{riskLevel == '高风险'?'red':riskLevel == '中风险'?'orange':'green'}} padding radius text-center shadow-blur"><view class="text-df">风险评分:</view><view class='margin-top-sm text-xl text-bold'>{{riskScore}}</view></view></view></view><view class="result"><view class="cu-bar"><view class='action'><text class='icon-title text-blue'></text>预防措施:</view></view><view class="text-content">{{preventionMeasures}}</view><view class="solids-top margin-top"><view class="cu-bar"><view class='action'><text class='icon-title text-blue'></text>应急预案:</view></view><view class="text-content">{{emergencyPlan}}</view></view></view>
</view>
层叠样式
page{background-color: #f1f1f1;
}
.result {margin-top: 20rpx;padding: 6rpx 30rpx 30rpx;background-color: #f9f9f9;border: 2rpx solid #ddd;border-radius: 10rpx;
}
课程详情
支持目录分类
支持收藏、分享功能
看完视频得积分
支持评论功能
页面布局
<view class="mw-page"><video wx:if="{{ currentSectionurl }}" src="{{ currentSectionurl }}" autoplay="{{ true }}" class="video-self" bindended="onEnded" /><image wx:else src="{{detailInfo.thumb}}" mode='widthFix' class="mw-banner"></image><view class="padding"><view class="padding-bottom-xs"><text class="text-bold text-lg">{{detailInfo.menuname}}</text><button class="cu-btn sm round line-sky fr" open-type="share"> <text class="icon-share"></text> 分享</button><view class="collect-btn" bindtap="collectFunc" data-collect-id="{{detailInfo._id}}" data-index="{{index}}"><text class="icon-favorfill lg text-yellow" wx:if="{{detailInfo.isCollected}}"></text><text class="icon-favor lg text-yellow" wx:if="{{!detailInfo.isCollected}}"></text></view></view><view class="padding-bottom-xs">视频观看满1分钟得1积分,每天上限20积分。</view><view class="text-gray">共{{detailInfo.ksnum}}课时 | {{detailInfo.viewnum}}人已学</view></view><view class="mw-content"><van-tabs active="{{ active }}" color="#000"><van-tab title="目录"><view class="padding-tb-sm padding-lr-xs margin-lr solids-bottom" wx:for="{{detailInfo.directory}}" wx:key="index" catchtap="playFunc" data-sectionurl="{{item.sectionurl}}"><view class="padding-bottom-xs"><van-tag type="primary" color="#e4e8ff" text-color="#6676EF" class="tag margin-right-xs"><text class="icon-video lg"></text><text style="padding: 6rpx 4rpx;">{{detailInfo.mediatext}}</text></van-tag><text class="{{ currentSectionurl == item.sectionurl ? 'text-sky':'' }}">{{item.sectionname}}</text></view></view></van-tab><van-tab title="简介"><view class="padding text-black">视频观看满1分钟得1积分,每天上限20积分。</view></van-tab></van-tabs></view><view class="comments-box"><view class="comments"><view class="infoTitle">评论</view><view wx:if="{{comments.length == 0}}" class="noComment"> 暂无评论 快来抢沙发吧~</view><block wx:for="{{comments}}" wx:key="index"><view class="comment"><view class="comment_nickName">{{item.nickName}}</view><view class="comment_time">{{item.time}}</view><view class="comment_text">{{item.comment}}</view></view></block></view><view class="text-right padding"><van-button type="primary" square size="small" bind:click="onClickComment">去评论</van-button></view><van-dialog use-slot title="评论" show="{{ showCommentDialog }}" show-cancel-button bind:confirm="submitComment" bind:cancel="cancelComment"><view style="padding:20rpx !important"><van-cell-group><van-field input-class="commentContent" value="{{ comment_input }}" type="textarea" placeholder="分享你的想法吧..." autosizebind:change="onChangeComment" border="{{ false }}" /></van-cell-group></view></van-dialog></view>
</view>
层叠样式
page{background-color: #fff;
}
.mw-bg {position: absolute;top: 0;left: 0;width: 750rpx;height: 100vh;
}
.mw-btn {position: absolute;bottom: 10rpx;left: 0;width: 750rpx;z-index: 2;
}
.mw-answer {padding: 100rpx 150rpx 30rpx;
}
.mw-content {padding-bottom: 10rpx;border-top: 10rpx solid #eee;
}
.mw-banner {width: 100%;
}
.video-self {width: 100%;
}.comments-box {border-top: 10rpx solid #eee;padding: 30rpx 20rpx 10rpx;
}
.collect-btn {float:right;padding-right: 20rpx;
}.collect-btn .lg {font-size: 36rpx;
}/* 评论区 */
.infoTitle{font-size: var(--font-size-M);font-weight: 600;color: #000;margin-bottom: 20rpx;
}
.van-cell{padding: 10rpx 0 10rpx 0 !important;/* position: relative;left: -26rpx; *//* font-size: var(--font-size-S); */
}.noComment{/* text-align: center; */color: #868688;margin-top: 50rpx;margin-bottom: 50rpx;
}.comment{background-color: #F2F1F6;margin-top: var(--font-size-M);padding: var(--font-size-S);border-radius: var(--font-size-S);
}.comment_time{color: #868688;display: inline-block;float: right;
}.comment_nickName{display: inline-block;color: #868688;
}.comment_text{font-size: 25rpx;color: #454547;
}.commentShell {margin-top: 50rpx;height: var(--font-size-M);margin-bottom: 100rpx;
}.inputComment{border: var(--color-theme) 1px solid;border-radius: var(--font-size-S);overflow: hidden;width: 95%;
}/* 评论按钮 */
.submitComment{display: inline-block;
}
考试列表
消防知识科普,按照题型分类考试,支持单选、多选、判断和综合题型
页面布局
<view class="mw-page"><image src="/image/1.png" mode='widthFix' class="mw-banner"></image><view class="mw-content"><view class="cu-bar justify-center"><view class='action border-title'><text class='text-xl text-bold text-yellow'>在线考试</text><text class='bg-yellow' style='width:2rem'></text></view></view><view class="padding radius shadow margin" wx:for="{{list}}" wx:key="index" catchtap="goToAnswer" data-id="{{item._id}}" data-status="{{item.status}}"><van-row><van-col span="20"><view class="text-bold padding-bottom-xs">{{item.name}}</view><view class="text-gray">{{item.startDateStr}} - {{item.endDateStr}}</view></van-col><van-col span="4" class="text-right"><van-tag plain type="primary" color="#6676EF"><text class="icon-edit lg"></text><text style="padding: 6rpx 4rpx;">考试</text></van-tag></van-col></van-row><view class="padding-top-sm"><van-button round type="info" color="{{item.status == '已结束'?'#cccccc':'#6676EF'}}" size="small" plain="{{item.status == '未开始'?true:false}}">{{item.status === '进行中'? '开始考试':item.status}}</van-button><view class="fr text-sm">限时<text class="text-sky">{{item.time}}</text>分钟</view></view></view></view>
</view>
层叠样式
page{background-color: #fff;
}
.mw-bg {position: absolute;top: 0;left: 0;width: 750rpx;height: 100vh;
}
.mw-btn {position: absolute;bottom: 10rpx;left: 0;width: 750rpx;z-index: 2;
}
.mw-answer {padding: 100rpx 150rpx 30rpx;
}
.mw-content {padding-bottom: 10rpx;
}
.mw-banner {width: 100%;
}
考试规则
考题数量:共10题;考试时间:2分钟;
判分标准:满分100分,每题10分;组题方式:题库随机出题;
考试规则:
(1)答题时间内作答完毕可点击"提交并查看结果";
(2)答题时间到但未手动提交的,则系统强制结束答题;
(3)答题成绩90分及以上,可获得5积分;答题成绩80~89分,可获得3积分;答题成绩60~79分,可获得1积分;答题成绩59分及以下,不获得积分;
页面布局
<view class="mw-rules-page padding text-lg"><view class="padding-top text-black">考试名称:{{ detailInfo.name }};<view class="ranking-head" bindtap="showRanking"><view style="font-size: 22px;">5积分</view></view></view><view class="padding-top text-black">考题数量:共10题;</view><view class="padding-top text-black">考试时间:2分钟;</view><view class="padding-top text-black">判分标准:满分100分,每题10分;</view><view class="padding-top-sm text-black">组题方式:题库随机出题;</view><view class="padding-top text-black">考试规则:</view><view class="padding-top-sm text-black">(1)答题时间内作答完毕可点击“提交并查看结果”;</view><view class="padding-top-sm text-black padding-bottom">(2)答题时间到但未手动提交的,则系统强制结束答题;</view><view class="padding-top-sm text-black padding-bottom">(3)答题成绩90分及以上,可获得5积分;答题成绩80~89分,可获得3积分;答题成绩60~79分,可获得1积分;答题成绩59分及以下,不获得积分;</view><view class="text-center padding-top" wx:if="{{status === '进行中'}}"><view class="padding"><van-button round block type="info" color="#6676EF" bindtap="beginAnswer">立即开始</van-button></view></view>
</view>
层叠样式
page {background-color: #fff;}
.mw-rules-page {padding-left: 30rpx;
}
.ranking-head {float: right;text-align: center;color: #FFB900;font-size: 24rpx;
}
考试模式
答题倒计时,限时交卷
页面布局
<!--pages/test/test.wxml-->
<view class="page"><view class="flex justify-between padding radius shadow margin-bottom"><view class='text-grey'>答题倒计时:</view><view class='text-orange'><text class="icon-remind lg"></text><text class="text-xl margin-left-xs">{{seconds}}秒</text></view></view><view class="padding radius shadow"><view class="flex justify-between padding-bottom-sm solids-bottom"><view><text class="text-bold">{{questionList[index].type == 1?"单选题":questionList[index].type == 2?"多选题":"判断题"}}</text></view><view><text class="text-xl text-bold text-sky">{{index+1}}</text>/<text class="text-lg">{{questionList.length}}</text></view></view><view class='padding page-hd'><view class="page-title">{{questionList[index].question}}</view></view><view class="page-bd"><radio-group class="radio-group" bindchange="radioChange" wx:if="{{questionList[index].type == 1 || questionList[index].type == 3}}"><label class="radio my-choosebox {{chooseValue[index].indexOf(key) > -1?'checked':''}}" wx:for="{{currQuestionOp}}" wx:for-index="key" wx:for-item="value" wx:key="index"><radio value="{{key}}" checked="{{questionList[index].checked}}" /><text class="margin-left-xs">{{key}}、{{value}}</text></label></radio-group><checkbox-group class="checkbox-group" bindchange="checkboxChange" wx:elif="{{questionList[index].type == 2}}"><label class="checkbox my-choosebox {{chooseValue[index].indexOf(key) > -1?'checked':''}}" wx:for="{{questionList[index].option}}" wx:for-index="key" wx:for-item="value" wx:key="index"><checkbox value="{{key}}" checked="{{questionList[index].checked}}" /><text class="margin-left-xs">{{key}}、{{value}}</text></label></checkbox-group></view><view class='page-ft flex flex-direction padding padding-bottom-xl'><button bindtap='okFunc' class="cu-btn lg round bg-sky" wx:if="{{index == questionList.length-1}}">提交并查看结果</button><button bindtap='okFunc' class="cu-btn lg round bg-sky" wx:else>下一题</button></view></view></view>
层叠样式
/* pages/test/test.wxss */
page {background-color: #fff;
}
.page {padding: 20rpx;
}
.page-hd {padding: 20rpx 10rpx;
}
.page-bd {padding: 20rpx;
}
.page .radio-group, .page .checkbox-group {display: block;
}
.my-choosebox {display: block;margin-bottom: 20rpx;border: 2rpx solid #ddd;padding: 20rpx;border-radius: 10rpx;line-height: 1;
}
.my-choosebox.checked {border-color: #0760E3;background-color: #438FFF;color: #fff;
}
.toindex-btn {margin-top: 20rpx;display:inline-block;line-height:2.3;font-size:13px;padding:0 1.34em;color: red;float: right;
}.yi-zuo-da, .wei-zuo-da, .yi-da, .wei-da {display: inline-block;width: 26rpx;height: 26rpx;border-radius: 50%;margin-right: 6rpx;
}
.yi-zuo-da, .yi-da {background-color: #4685FF;color: #fff;
}
.wei-zuo-da, .wei-da {border: 1px solid #ddd;
}
.yi-da, .wei-da {width: 66rpx;height: 66rpx;line-height: 66rpx;
}.collect {float:right;padding-right: 20rpx;
}.collect .lg {font-size: 36rpx;
}/* 评论区 */
.infoTitle{font-size: var(--font-size-M);font-weight: 600;color: #000;margin-bottom: 20rpx;
}
.van-cell{padding: 10rpx 0 10rpx 0 !important;/* position: relative;left: -26rpx; *//* font-size: var(--font-size-S); */
}.noComment{/* text-align: center; */color: #868688;margin-top: 50rpx;margin-bottom: 50rpx;
}.comment{background-color: #F2F1F6;margin-top: var(--font-size-M);padding: var(--font-size-S);border-radius: var(--font-size-S);
}.comment_time{color: #868688;display: inline-block;float: right;
}.comment_nickName{display: inline-block;color: #868688;
}.comment_text{font-size: 25rpx;color: #454547;
}.commentShell {margin-top: 50rpx;height: var(--font-size-M);margin-bottom: 100rpx;
}.inputComment{/* display: inline-block; *//* background-color: aqua; */border: var(--color-theme) 1px solid;border-radius: var(--font-size-S);overflow: hidden;width: 95%;
}/* 评论按钮 */
.submitComment{display: inline-block;/* align-items : center; *//* display: flex; *//* float: right; */
}
考试结果页
页面布局
<view class="page"><view class="padding radius shadow"><view class="flex justify-between align-center padding-bottom-sm solids-bottom"><view><view class="text-bold text-lg text-black">{{examName}}</view></view><view><view class="ranking-head" bindtap="showRanking"><!-- <text class="icon-upstagefill lg" style="font-size: 22px;"></text> --><view style="font-size: 22px;">获得{{points}}积分</view></view></view></view><view class="flex justify-between align-center padding-top-xl"><view class="flex align-center"><view class="cu-avatar round lg"><image class="avatar" src="{{userInfo.avatarUrl}}" mode="widthFix"></image></view><view class="text-bold text-black padding-left-sm">{{userInfo.nickName}}</view></view><view class='page-head'><view class='page-score'><text class="score-num text-bold text-sky">{{totalScore}}分</text></view></view></view><view class='page-footer'><view class='flex text-grey text-center margin-bottom padding bg-white radius solids'><view class='solid-right flex flex-direction flex-sub'><view class="text-purple text-xxl">{{totalTime}}秒</view><view class="margin-top-sm">用时</view></view><view class='solid-right flex flex-direction flex-sub'><view class="text-orange text-xxl">{{wrong}}题</view><view class="margin-top-sm">错题</view></view><view class='flex flex-direction flex-sub'><view class="text-xxl text-green">{{zql}}%</view><view class="margin-top-sm">正确率</view></view></view></view></view><view class="padding"><view class="padding flex flex-direction"><button bindtap="toAnalysis" class="cu-btn lg round bg-sky"> 查看错题集 </button><button bindtap="toIndex" class="cu-btn lg round line-sky margin-top"> 返回考试列表页 </button></view></view>
</view>
层叠样式
/* pages/results/results.wxss */
page {background-color: #fff;
}
.page {padding: 30rpx;
}
.page-score {display: flex;justify-content: center;align-items: flex-end;padding-top:20rpx;
}
.mw-avatar {width: 128rpx;height: 128rpx;border-radius: 50%;overflow: hidden;
}
.page-footer {margin-top:30rpx;text-align: center;
}
.score-num {font-size:60rpx;
}
.ranking-head {text-align: center;color: #FFB900;font-size: 24rpx;
}
错题集
温故而知新
页面布局
<view class="page"><view class="padding radius shadow margin-bottom" wx:for="{{wrongQuestionList}}" wx:key="index"><view class='padding-bottom page-hd'><view class="page-title">{{index+1}}、<text class="text-bold">【{{item.type == 1?"单选题":item.type == 2?"多选题":"判断题"}}】</text>{{item.question}}</view></view><view class="page-bd"><view class="my-choosebox" wx:for="{{item.option}}" wx:for-index="key" wx:for-item="value" wx:key="index"><text class="margin-left-xs">{{key}}、{{value}}</text></view></view><view><view class='padding-bottom page-hd padding-top solids-top flex justify-between align-center'><view class="page-title"><text class="text-bold">【正确答案】</text>{{item['true']}}</view></view></view></view>
</view>
层叠样式
page {background-color: #fff;
}
.page {padding: 20rpx;
}
.page-bd {padding: 20rpx;
}
.page .radio-group, .page .checkbox-group {display: block;
}
.my-choosebox {display: block;margin-bottom: 20rpx;border: 2rpx solid #ddd;padding: 20rpx;border-radius: 10rpx;line-height: 1;
}
.my-choosebox.checked {border-color: #0760E3;background-color: #438FFF;color: #fff;
}
.toindex-btn {margin-top: 20rpx;display:inline-block;line-height:2.3;font-size:13px;padding:0 1.34em;color: red;float: right;
}.yi-zuo-da, .wei-zuo-da, .yi-da, .wei-da {display: inline-block;width: 26rpx;height: 26rpx;border-radius: 50%;margin-right: 6rpx;
}
.yi-zuo-da, .yi-da {background-color: #4685FF;color: #fff;
}
.wei-zuo-da, .wei-da {border: 1px solid #ddd;
}
.yi-da, .wei-da {width: 66rpx;height: 66rpx;line-height: 66rpx;
}.collect {float:right;padding-right: 20rpx;
}.collect .lg {font-size: 36rpx;
}/* 评论区 */
.infoTitle{font-size: var(--font-size-M);font-weight: 600;color: #000;margin-bottom: 20rpx;
}
.van-cell{padding: 10rpx 0 10rpx 0 !important;/* position: relative;left: -26rpx; *//* font-size: var(--font-size-S); */
}.noComment{/* text-align: center; */color: #868688;margin-top: 50rpx;margin-bottom: 50rpx;
}.comment{background-color: #F2F1F6;margin-top: var(--font-size-M);padding: var(--font-size-S);border-radius: var(--font-size-S);
}.comment_time{color: #868688;display: inline-block;float: right;
}.comment_nickName{display: inline-block;color: #868688;
}.comment_text{font-size: 25rpx;color: #454547;
}.commentShell {margin-top: 50rpx;height: var(--font-size-M);margin-bottom: 100rpx;
}.inputComment{/* display: inline-block; *//* background-color: aqua; */border: var(--color-theme) 1px solid;border-radius: var(--font-size-S);overflow: hidden;width: 95%;
}/* 评论按钮 */
.submitComment{display: inline-block;/* align-items : center; *//* display: flex; *//* float: right; */
}
个人中心页
页面布局
<view class='mw-page'><view class='UCenter-bg'><view class="margin-bottom"><view class="cu-avatar xl round"><image class="avatar" src="{{userInfo.avatarUrl}}" mode="widthFix"></image></view></view><view class='text-xl'>{{userInfo.nickName}}</view><view class='margin-top-sm'><text class="cu-tag bg-yellow">{{ totalPoints }}积分</text></view></view><view class="cu-list menu card-menu margin-top-xl"><view class="cu-item arrow"><navigator class='content' url='../rank/rank' hover-class='none'><text class='icon-rankfill text-sky'></text><text class='text-grey'>积分排名</text></navigator></view><view class="cu-item arrow"><navigator class='content' url='../history/history' hover-class='none'><text class='icon-formfill text-sky'></text><text class='text-grey'>考试记录</text></navigator></view><view class="cu-item arrow"><navigator class='content' url='../myCollection/myCollection' hover-class='none'><text class='icon-favorfill text-sky'></text><text class='text-grey'>我的收藏</text></navigator></view><view class="cu-item arrow"><button class='cu-btn content' open-type='share'><text class='icon-appreciatefill text-sky'></text><text class='text-grey'>推荐给好友</text></button></view></view>
</view>
层叠样式
page {background-color: #f1f1f1;
}
.UCenter-bg {background: url(https://a.jpg?) no-repeat center center;background-size: cover;height: 450rpx;display: flex;justify-content: center;padding-top: 40rpx;overflow: hidden;position: relative;flex-direction: column;align-items: center;color: #fff;font-weight: 300;text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}.UCenter-bg text {opacity: 0.8;
}.UCenter-bg image {width: 200rpx;height: 200rpx;
}.UCenter-bg .gif-wave{position: absolute;width: 100%;bottom: 0;left: 0;z-index: 99;mix-blend-mode: screen; height: 100rpx;
}map,.mapBox{left: 0;z-index: 99;mix-blend-mode: screen; height: 100rpx;
}map,.mapBox{width: 750rpx;height: 300rpx;
}.mw-weixin.text-center {color: rgb(230, 230, 230);padding: 30rpx 0 0;
}
积分排行榜
积分由高到低进行排名
页面布局
<view class="mw-page"><view><image class="rank-banner" src="/image/rank-banner.png" mode="widthFix"></image></view><view class="name">{{ name }}</view><view class="menu menu-avatar cu-list"><view class="cu-item" wx:for="{{rankList}}" wx:key="index" style="padding-left:30rpx;"><view class='text-gray'><text class="{{index+1 <= 3?'icon-upstagefill text-yellow':'icon-medalfill text-gray'}}"></text> No.<text class="{{index+1 <= 3?'text-yellow':'text-gray'}} text-xl">{{index+1}}</text></view><view class='content flex align-center'><view class="cu-avatar lg round"><image class="avatar" src="{{item.avatarUrl}}" mode="widthFix"></image></view><view class='text-df text-grey nick-name'>{{item.nickName}}</view></view><view class='action'><view class='text-xl text-sky'>{{item.totalPoints}}积分</view></view></view></view>
</view>
层叠样式
page{background-color: #fff;
}
.name {position: absolute;top: 150rpx;left: 50rpx;z-index: 1;color: #fff;
}
.rank-banner {width: 100%;
}
.nick-name {padding-left: 50rpx;
}
.text-xl {font-size: 50rpx;
}
考试记录页
页面布局
<view class="mw-history-page padding"><view class="padding radius shadow margin-bottom" wx:for="{{historyList}}" wx:key="index"><view class="flex justify-between align-center padding-bottom-sm solids-bottom"><view><view class="text-bold text-lg text-black">{{item.examName}}</view></view><view><view class="ranking-head"><view style="font-size: 22px;">获得{{item.points}}积分</view></view></view></view><view class='page-footer margin-top' data-id="{{item._id}}" bindtap="goToResult"><view class='flex text-grey text-center margin-bottom padding bg-white radius solids'><view class='solid-right flex flex-direction flex-sub'><view class="text-sky text-xxl">{{item.totalScore}}分</view><view class="margin-top-sm">得分</view></view><view class='solid-right flex flex-direction flex-sub'><view class="text-purple text-xxl">{{item.totalTime}}秒</view><view class="margin-top-sm">用时</view></view><view class='solid-right flex flex-direction flex-sub'><view class="text-orange text-xxl">{{item.wrong}}题</view><view class="margin-top-sm">错题</view></view><view class='flex flex-direction flex-sub'><view class="text-xxl text-green">{{item.zql}}%</view><view class="margin-top-sm">正确率</view></view></view></view><view class="text-gray">交卷时间:{{item.date}}</view></view>
</view>
层叠样式
page{background-color: #fff;
}
.ranking-head {text-align: center;color: #FFB900;font-size: 24rpx;
}
我的收藏
页面布局
<view class="page"><view class="nav-list"><view class="radius shadow ke-cheng nav-li margin-bottom-sm" wx:for="{{list}}" wx:key="index" catchtap="goToDetail" data-id="{{item.cid}}"><view class="pic-box"><image src="{{item.thumb}}" mode="widthFix" class="thumb"></image></view><van-tag type="primary" color="#ffe1e1" text-color="#ad0000" class="tag"><text style="padding: 6rpx 4rpx;">{{item.mediatext}}</text></van-tag><view class="padding"><view class="text-bold padding-bottom-xs">{{item.menuname}}</view><view class="text-gray">共{{item.ksnum}}课时</view></view></view></view>
</view>
层叠样式
page {background-color: #fff;
}
.page {padding: 20rpx;
}
.page-bd {padding: 20rpx;
}
.page .radio-group, .page .checkbox-group {display: block;
}
.my-choosebox {display: block;margin-bottom: 20rpx;border: 2rpx solid #ddd;padding: 20rpx;border-radius: 10rpx;line-height: 1;
}
.my-choosebox.checked {border-color: #0760E3;background-color: #438FFF;color: #fff;
}
.toindex-btn {margin-top: 20rpx;display:inline-block;line-height:2.3;font-size:13px;padding:0 1.34em;color: red;float: right;
}.yi-zuo-da, .wei-zuo-da, .yi-da, .wei-da {display: inline-block;width: 26rpx;height: 26rpx;border-radius: 50%;margin-right: 6rpx;
}
.yi-zuo-da, .yi-da {background-color: #4685FF;color: #fff;
}
.wei-zuo-da, .wei-da {border: 1px solid #ddd;
}
.yi-da, .wei-da {width: 66rpx;height: 66rpx;line-height: 66rpx;
}.collect {float:right;padding-right: 20rpx;
}.collect .lg {font-size: 36rpx;
}/* 评论区 */
.infoTitle{font-size: var(--font-size-M);font-weight: 600;color: #000;margin-bottom: 20rpx;
}
.van-cell{padding: 10rpx 0 10rpx 0 !important;/* position: relative;left: -26rpx; *//* font-size: var(--font-size-S); */
}.noComment{/* text-align: center; */color: #868688;margin-top: 50rpx;margin-bottom: 50rpx;
}.comment{background-color: #F2F1F6;margin-top: var(--font-size-M);padding: var(--font-size-S);border-radius: var(--font-size-S);
}.comment_time{color: #868688;display: inline-block;float: right;
}.comment_nickName{display: inline-block;color: #868688;
}.comment_text{font-size: 25rpx;color: #454547;
}.commentShell {margin-top: 50rpx;height: var(--font-size-M);margin-bottom: 100rpx;
}.inputComment{/* display: inline-block; *//* background-color: aqua; */border: var(--color-theme) 1px solid;border-radius: var(--font-size-S);overflow: hidden;width: 95%;
}/* 评论按钮 */
.submitComment{display: inline-block;/* align-items : center; *//* display: flex; *//* float: right; */
}.thumb {width: 100%;
}
.ke-cheng {position: relative;overflow: hidden;
}
.tag {position: absolute;top: 0;right: 0;
}
相关文章:

搭建基于火灾风险预测与防范的消防安全科普小程序
基于微信小程序的消防安全科普互动平台的设计与实现,是关于微信小程序的,知识课程学习,包括学习后答题。 技术栈主要采用微信小程序云开发,有下面的模块: 1.课程学习模块 2.资讯模块 3.答题模块 4.我的模块 还需…...

RAG技术与应用---0426
大语言模型>3.10 课程中会用到python 工具箱: faiss,modelscope,langchain,langchain_community,PyPDF2 1)大模型应用开发的三种模式 提示词没多少工作量,微调又花费时间费用,RAG是很多公司招聘用来对LLM进行应用…...

element-ui多个form同时验证,以及动态循环表单注意事项
多个form同时验证: validateForm(refs) {if (!refs) {return false}return new Promise((resolve, reject) > {refs.validate().then((valid) > {resolve(valid)}).catch((val) > {resolve(false)})}) }, async handleConfirm() {Promise.all([this.valid…...

k8s学习记录(四):节点亲和性
一、前言 在上一篇文章里,我们了解了 Pod 中的nodeName和nodeSelector这两个属性,通过它们能够指定 Pod 调度到哪个 Node 上。今天,我们将进一步深入探索 Pod 相关知识。这部分内容不仅信息量较大,理解起来也有一定难度࿰…...

文本预处理(NLTK)
1. 自然语言处理基础概念 1.1 什么是自然语言处理 自然语言处理( Natural Language Processing, NLP)是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。自然语言处理是一门融语言学、计算机科学、数学于…...
一些常见的资源池管理、分布式管理和负载均衡的监控工具
资源池管理监控工具 Prometheus 是一款开源的系统监控和警报工具。它可以通过收集各种指标数据,如CPU使用率、内存使用量、磁盘I/O等,来监控资源池中的服务器、容器等资源。Prometheus具有强大的查询语言和可视化功能,能够帮助管理员快速了解资源的使用情况,并及时发现潜在…...

Neo4j 可观测性最佳实践
Neo4j 介绍 Neo4j 是一款领先的图数据库管理系统,采用图数据模型来表示和存储数据。它以节点、关系和属性的形式组织数据,节点代表实体,关系表示节点间的连接,属性则为节点和关系附加信息。Neo4j 使用 Cypher 查询语言࿰…...
JAVA服务内存缓慢上涨,年轻代GC正常但Full GC频繁,如何定位?
1. 分析 : 年轻代GC正常,说明年轻代的对象回收没有问题,可能大部分对象都是朝生夕死的,所以Minor GC能有效清理。但Full GC频繁,通常意味着老年代空间不足,导致频繁进行Full GC来回收老年代。而内存缓慢上…...
C++入门(讲解1)
1. namespace的定义 1.1 定义命名空间,需要用到namespace关键字,后面跟命名空间的名字,然后接一对{}即可,{}中就是命名空间的成员。命名空间中可以定义变量/函数/类型等。 1.2 namespace的本质是定义出一个域,这个…...
react的ant-design-pro框架左侧菜单修改为动态路由
在使用 React 框架结合 Ant Design Pro 进行项目开发时,动态路由的修改是一项常见且重要的任务。动态路由能够根据用户的角色、权限或者其他运行时的条件来展示不同的页面内容,极大地提升了应用的灵活性和安全性。本文将结合一个完整的示例项目ÿ…...

【教程】Windows通过网线共享网络给其它设备
转载请注明出处:小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你,欢迎[点赞、收藏、关注]哦~ 1、打开“控制面板”。 2、点击“网络和共享中心”。 3、点击“更改适配器设置”。 4、选中要共享的网络适配器,右击选中“属性”。 5、勾选…...

百度AI开发者大会:连发多款AI应用,覆盖AI数字人等热门赛道
4月25日,Create2025百度AI开发者大会在武汉隆重举办。百度创始人李彦宏发表了题为《模型的世界 应用的天下》的演讲。60分钟的演讲中,李彦宏发布了两大模型,多款热门AI应用,并宣布将帮助开发者全面拥抱MCP。 当天发布的文心大模型…...

Java 线程的六种状态与完整生命周期详解
🚀 Java 线程的几种状态详解 在 Java 中,线程状态(Thread State)是由 Thread.State 枚举定义的,总共有六种: 状态含义典型场景示例NEW新建状态,线程对象刚创建,还未调用 start() 方…...

05--Altium Designer(AD)的详细安装
一、软件的下载 Altium Designer官网下载 1、临近五一的假期,想着搞个项目,且这个项目与PCB有关系,所以就下这个软件来玩玩。下面保姆级教大家安装。 2、选择适合自己的版本下载(我安装的是24的) 3、软件安装 1.下…...
2:QT联合HALCON编程—图像显示放大缩小
1.声明事件 #include <HalconCpp.h> using namespace HalconCpp;#include <QCloseEvent>//滚轮事件 2.在.h文件中声明和定义公共全局变量,以及图像缩放的函数 void wheelEvent(QWheelEvent *event);//定义函数HTuple wcRow0, wcRow1, wcCol0, wcCol1,m…...

Java 队列与阻塞队列全面解析:从 Queue 到 TransferQueue 的实现与应用
文章目录 Queue队列QueueDeque 阻塞队列BlockingQueueArrayBlockingQueueLinkedBlockingQueuePriorityBlockingQueueSynchronousQueueDelayQueue BlockingDequeLinkedBlockingDeque TransferQueueLinkedTransferQueue Queue Queue(队列)是一种特殊的线性…...
服务器虚拟化:技术解析与实践指南
在信息技术飞速发展的今天,企业对服务器资源的需求日益增长,传统物理服务器存在资源利用率低、部署周期长、管理成本高等问题。服务器虚拟化技术应运而生,它通过将物理服务器的计算、存储、网络等资源进行抽象和整合,划分成多个相互隔离的虚拟服务器,从而提高资源利用率、…...

【蓝桥杯省赛真题56】Scratch抓不住的蜜蜂 蓝桥杯scratch图形化编程 中小学生蓝桥杯省赛真题讲解
目录 scratch抓不住的蜜蜂 一、题目要求 1、准备工作 2、功能实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 四、程序编写 五、考点分析 六、推荐资料 1、scratch资料 2、python资料 3、C++资料 scratch抓不住的蜜蜂 第十五届青少年蓝桥…...
线程池(二):深入剖析synchronized关键字的底层原理
线程池(二):深入剖析synchronized关键字的底层原理 线程池(二):深入剖析synchronized关键字的底层原理一、基本使用1.1 修饰实例方法1.2 修饰静态方法1.3 修饰代码块 二、Monitor2.1 Monitor的概念2.2 Moni…...
【线段树】P8539 「Wdoi-2」来自地上的支援|普及+
P8539 「Wdoi-2」来自地上的支援 题目背景 波光粼粼的山顶湖与庄严神圣的神社之下,是一座复合型活火山。 沿幻想风穴而下,便能到达火山之下,废弃已久的地狱原址。 在旧地狱中,有一座大都市。那里是旧地狱还是地狱的时候在那工作…...

《TCP/IP详解 卷1:协议》之第七、八章:Ping Traceroute
目录 一、ICMP回显请求和回显应答 1、ICMP回显请求 2、ICMP回显应答 二、ARP高速缓存 三、IP记录路由选项(Record Route,RR) 1、记录路由选项的工作过程 2、RR 选项的 IP 头部格式 2.1、RR 请求 2.2、RR响应 四、ping 的去返路径 五…...
Leetcode:1. 两数之和
题目 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案,并且你不能使用两次相同的元素。 你可以按任意顺序返回答案。 示…...
【Java学习笔记】冒泡排序
冒泡排序 思想:经过一轮遍历比较,把最大的放在数组的末尾 int[] a {3, 2, 1}; for( int i 0; i < a.length-1; i){for( int j 0; j < a.length-1-i; j){if(a[j] > a[j1]){int temp a[j];a[j] a[j1];a[j1] temp;}} } for( int i 0; i &…...
【数字图像处理】立体视觉基础(2)
相机标定 【1】相机标定的概念 相机参数:相机成像的几何模型的参数 相机标定:求解参数的过程 【2】相机标定的作用 (1)求出相机的内、外参数,以及畸变参数 (2)校正镜头畸变影响,…...

NtripShare 2025第一季度主要技术进展
GNSS方面 1、开源GNSS接收机配置软件基础版本。 2、商业版本GNSS接收机配置软件,增加PPP、文件保存、前端解算(静态、RTK-Static),前端坐标转换。 3、GNSS接收机配置软件全面适配米尔T133i硬件方案。 视觉检测方面 1、做出第…...

头歌实训之存储过程、函数与触发器
🌟 各位看官好,我是maomi_9526! 🌍 种一棵树最好是十年前,其次是现在! 🚀 今天来学习C语言的相关知识。 👍 如果觉得这篇文章有帮助,欢迎您一键三连,分享给更…...

【华为】防火墙双击热备-之-主备模式-单外网线路-分享
FW1和FW2的业务接口都工作在三层,上行连接二层交换机。上行交换机连接运营商的接入点,运营商为企业分配的IP地址为100.100.100.2。现在希望FW1和FW2以主备备份方式工作。正常情况下,流量通过FW1转发;当FW1出现故障时,流…...
c++ package_task
int print_sum(int a, int b) {std::cout << a << " " << b << " " << (a b) << std::endl;return a b; }int main() {// 创建绑定后的可调用对象auto print_sum_5 std::bind(print_sum, 5, 6);// 包装为 packag…...
基于计算机视觉的行为检测:从原理到工业实践
一、行为检测的定义与核心价值 行为检测(Action Recognition)是计算机视觉领域的关键任务,旨在通过分析视频序列理解人类动作的时空特征。其核心价值体现在时序建模和多尺度分析能力上——系统需要捕捉动作的起始、发展和结束全过程,同时适应不同持续时间(0.1秒至数分钟)…...

川翔云电脑32G大显存集群机器上线!
川翔云电脑今日重磅推出32G 大显存机型,为游戏玩家、设计师、AI 开发者等提供极致云端算力体验! 一、两大核心配置,突破性能天花板 ✅ 32G 超大显存机型 行业领先:搭载 NVIDIA 专业显卡,单卡可分配 32G 独立显存&am…...