搭建基于火灾风险预测与防范的消防安全科普小程序

mon_star°2025-04-27 19:38

基于微信小程序的消防安全科普互动平台的设计与实现，是关于微信小程序的，知识课程学习，包括学习后答题。

技术栈主要采用微信小程序云开发，有下面的模块：

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-bar
    text="欢迎使用"火灾风险防范知识科普"小程序！加强火灾风险防范意识！"
    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="分享你的想法吧..." autosize
            bind: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;
}
相关推荐
用户962377954488 小时前
DVWA 靶场实验报告 (High Level)
安全
数据智能老司机11 小时前
用于进攻性网络安全的智能体 AI——在 n8n 中构建你的第一个 AI 工作流
人工智能·安全·agent
数据智能老司机11 小时前
用于进攻性网络安全的智能体 AI——智能体 AI 入门
人工智能·安全·agent
WangHappy12 小时前
不写 Canvas 也能搞定！小程序图片导出的 WebView 通信方案
前端·微信小程序
用户9623779544813 小时前
DVWA 靶场实验报告 (Medium Level)
安全
red1giant_star13 小时前
S2-067 漏洞复现：Struts2 S2-067 文件上传路径穿越漏洞
安全
用户9623779544816 小时前
DVWA Weak Session IDs High 的 Cookie dvwaSession 为什么刷新不出来？
安全
小时前端17 小时前
微信小程序选不了本地文件？用 web-view + H5 一招搞定
前端·微信小程序·uni-app
icebreaker2 天前
Weapp-vite：原生模式之外，多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker2 天前
重走 Vue 长征路 Weapp-vite：编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书（Feishu）环境搭建指南04Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services05小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）06Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤07OpenClaw优化飞书API 额度已耗尽问题08Window 10部署openclaw报错node.exe : npm error code 12809【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆10OpenClaw大龙虾机器人完整安装教程