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

news2025/4/28 9:35:19

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2343897.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RAG技术与应用---0426

RAG技术与应用---0426

大语言模型>3.10 课程中会用到python 工具箱&#xff1a; faiss,modelscope,langchain,langchain_community&#xff0c;PyPDF2 1&#xff09;大模型应用开发的三种模式 提示词没多少工作量&#xff0c;微调又花费时间费用&#xff0c;RAG是很多公司招聘用来对LLM进行应用…
阅读更多...
element-ui多个form同时验证，以及动态循环表单注意事项

element-ui多个form同时验证，以及动态循环表单注意事项

多个form同时验证&#xff1a; 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学习记录（四）：节点亲和性

k8s学习记录（四）：节点亲和性

一、前言 在上一篇文章里&#xff0c;我们了解了 Pod 中的nodeName和nodeSelector这两个属性&#xff0c;通过它们能够指定 Pod 调度到哪个 Node 上。今天&#xff0c;我们将进一步深入探索 Pod 相关知识。这部分内容不仅信息量较大&#xff0c;理解起来也有一定难度&#xff0…
阅读更多...
文本预处理（NLTK）

文本预处理（NLTK）

1. 自然语言处理基础概念 1.1 什么是自然语言处理 自然语言处理( Natural Language Processing, NLP)是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。自然语言处理是一门融语言学、计算机科学、数学于…
阅读更多...
Neo4j 可观测性最佳实践

Neo4j 可观测性最佳实践

Neo4j 介绍 Neo4j 是一款领先的图数据库管理系统&#xff0c;采用图数据模型来表示和存储数据。它以节点、关系和属性的形式组织数据&#xff0c;节点代表实体&#xff0c;关系表示节点间的连接&#xff0c;属性则为节点和关系附加信息。Neo4j 使用 Cypher 查询语言&#xff0…
阅读更多...
【教程】Windows通过网线共享网络给其它设备

【教程】Windows通过网线共享网络给其它设备

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 1、打开“控制面板”。 2、点击“网络和共享中心”。 3、点击“更改适配器设置”。 4、选中要共享的网络适配器&#xff0c;右击选中“属性”。 5、勾选…
阅读更多...
百度AI开发者大会：连发多款AI应用，覆盖AI数字人等热门赛道

百度AI开发者大会：连发多款AI应用，覆盖AI数字人等热门赛道

4月25日&#xff0c;Create2025百度AI开发者大会在武汉隆重举办。百度创始人李彦宏发表了题为《模型的世界 应用的天下》的演讲。60分钟的演讲中&#xff0c;李彦宏发布了两大模型&#xff0c;多款热门AI应用&#xff0c;并宣布将帮助开发者全面拥抱MCP。 当天发布的文心大模型…
阅读更多...
Java 线程的六种状态与完整生命周期详解

Java 线程的六种状态与完整生命周期详解

&#x1f680; Java 线程的几种状态详解 在 Java 中&#xff0c;线程状态&#xff08;Thread State&#xff09;是由 Thread.State 枚举定义的&#xff0c;总共有六种&#xff1a; 状态含义典型场景示例NEW新建状态&#xff0c;线程对象刚创建&#xff0c;还未调用 start() 方…
阅读更多...
05--Altium Designer（AD）的详细安装

05--Altium Designer（AD）的详细安装

一、软件的下载 Altium Designer官网下载 1、临近五一的假期&#xff0c;想着搞个项目&#xff0c;且这个项目与PCB有关系&#xff0c;所以就下这个软件来玩玩。下面保姆级教大家安装。 2、选择适合自己的版本下载&#xff08;我安装的是24的&#xff09; 3、软件安装 1.下…
阅读更多...
Java 队列与阻塞队列全面解析：从 Queue 到 TransferQueue 的实现与应用

Java 队列与阻塞队列全面解析：从 Queue 到 TransferQueue 的实现与应用

文章目录 Queue队列QueueDeque 阻塞队列BlockingQueueArrayBlockingQueueLinkedBlockingQueuePriorityBlockingQueueSynchronousQueueDelayQueue BlockingDequeLinkedBlockingDeque TransferQueueLinkedTransferQueue Queue Queue&#xff08;队列&#xff09;是一种特殊的线性…
阅读更多...
【蓝桥杯省赛真题56】Scratch抓不住的蜜蜂 蓝桥杯scratch图形化编程 中小学生蓝桥杯省赛真题讲解

【蓝桥杯省赛真题56】Scratch抓不住的蜜蜂 蓝桥杯scratch图形化编程 中小学生蓝桥杯省赛真题讲解

目录 scratch抓不住的蜜蜂 一、题目要求 1、准备工作 2、功能实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 四、程序编写 五、考点分析 六、推荐资料 1、scratch资料 2、python资料 3、C++资料 scratch抓不住的蜜蜂 第十五届青少年蓝桥…
阅读更多...
《TCP/IP详解 卷1：协议》之第七、八章：Ping Traceroute

《TCP/IP详解 卷1：协议》之第七、八章：Ping Traceroute

目录 一、ICMP回显请求和回显应答 1、ICMP回显请求 2、ICMP回显应答 二、ARP高速缓存 三、IP记录路由选项&#xff08;Record Route&#xff0c;RR&#xff09; 1、记录路由选项的工作过程 2、RR 选项的 IP 头部格式 2.1、RR 请求 2.2、RR响应 四、ping 的去返路径 五…
阅读更多...
NtripShare 2025第一季度主要技术进展

NtripShare 2025第一季度主要技术进展

GNSS方面 1、开源GNSS接收机配置软件基础版本。 2、商业版本GNSS接收机配置软件&#xff0c;增加PPP、文件保存、前端解算&#xff08;静态、RTK-Static&#xff09;&#xff0c;前端坐标转换。 3、GNSS接收机配置软件全面适配米尔T133i硬件方案。 视觉检测方面 1、做出第…
阅读更多...
头歌实训之存储过程、函数与触发器

头歌实训之存储过程、函数与触发器

&#x1f31f; 各位看官好&#xff0c;我是maomi_9526&#xff01; &#x1f30d; 种一棵树最好是十年前&#xff0c;其次是现在&#xff01; &#x1f680; 今天来学习C语言的相关知识。 &#x1f44d; 如果觉得这篇文章有帮助&#xff0c;欢迎您一键三连&#xff0c;分享给更…
阅读更多...
【华为】防火墙双击热备-之-主备模式-单外网线路-分享

【华为】防火墙双击热备-之-主备模式-单外网线路-分享

FW1和FW2的业务接口都工作在三层&#xff0c;上行连接二层交换机。上行交换机连接运营商的接入点&#xff0c;运营商为企业分配的IP地址为100.100.100.2。现在希望FW1和FW2以主备备份方式工作。正常情况下&#xff0c;流量通过FW1转发&#xff1b;当FW1出现故障时&#xff0c;流…
阅读更多...
川翔云电脑32G大显存集群机器上线！

川翔云电脑32G大显存集群机器上线！

川翔云电脑今日重磅推出32G 大显存机型&#xff0c;为游戏玩家、设计师、AI 开发者等提供极致云端算力体验&#xff01; 一、两大核心配置&#xff0c;突破性能天花板 ✅ 32G 超大显存机型 行业领先&#xff1a;搭载 NVIDIA 专业显卡&#xff0c;单卡可分配 32G 独立显存&am…
阅读更多...
加里·基尔代尔：CP/M之父与个人计算时代的先驱

加里·基尔代尔：CP/M之父与个人计算时代的先驱

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 加里基尔代尔&#xff1a;CP/M之父与个人计算时代的先驱 一、早年生活与教育背景 1.…
阅读更多...
静态多态和动态多态的区别

静态多态和动态多态的区别

C多态机制深度解析 多态是面向对象编程的核心特性&#xff0c;允许通过统一接口执行不同实现。在C中&#xff0c;多态表现为基类指针或引用调用虚函数时&#xff0c;根据实际对象类型执行对应派生类的函数逻辑。 基础实现示例 定义基类与派生类&#xff0c;演示动态绑定…
阅读更多...
Burp靶场JWT学习笔记1

Burp靶场JWT学习笔记1

JWT(JSON Web Token) 从其名字就可以看出来&#xff0c;它具有表示身份的作用&#xff0c;其本质是将用户信息储存到一串json字符串中再将其编码得到一串token JWT由三部分组成&#xff0c;分别是 Header&#xff0c;Payload&#xff0c;Signatrue JWTBase64(Header).Base6…
阅读更多...
C++？类和对象（下）！！！

C++？类和对象（下）！！！

一、前言 在之前我们已经讨论过了有关类和对象的前置知识以及类中的六大默认成员函数&#xff0c;在本期我们继续再讨论类和对象中剩余的友元、初始化列表等相关知识&#xff0c;如果需要再了解之前的知识的话&#xff0c;链接奉上&#xff1a;C&#xff1f;类和对象&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023