搭建基于火災風險預測與防范的消防安全科普小程序

基于微信小程序的消防安全科普互動平臺的設計與實現，是關于微信小程序的，知識課程學習，包括學習后答題。

技術棧主要采用微信小程序云開發，有下面的模塊：

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