【页面案例汇总】微信小程序考试规则页面

最新推荐文章于 2024-10-17 15:30:09 发布

米饭，℡

最新推荐文章于 2024-10-17 15:30:09 发布

阅读量82

点赞数

分类专栏：页面案例文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_42317757/article/details/134256490

版权

页面案例专栏收录该内容

24 篇文章 0 订阅

订阅专栏

微信小程序考试规则页面

<template>
  <view class="container">
    <view class="title">考试规则</view>
    <view class="content">
      <view class="item">
        <view class="item-title">时间规定</view>
        <view class="item-content">
          <p>1. 考试时间为120分钟</p>
          <p>2. 开始时间和结束时间由考试管理员宣布</p>
        </view>
      </view>
      <view class="item">
        <view class="item-title">考试规定</view>
        <view class="item-content">
          <p>1. 考试中不得交流，不得与他人交换试卷</p>
          <p>2. 不得使用任何电子设备，如手机、平板电脑等</p>
          <p>3. 禁止打开任何未经授权的网站或应用程序</p>
          <p>4. 不能离开考场，除非经考试管理员允许</p>
          <p>5. 考试期间，不得离开座位，使用卫生间需经考试管理员同意</p>
          <p>6. 考试过程中，违反考试规则者，将取消成绩或者取消本学期的考试资格</p>
        </view>
      </view>
      <view class="item">
        <view class="item-title">考试安排</view>
        <view class="item-content">
          <p>1. 考试内容为选择题和简答题</p>
          <p>2. 可在规定时间内无限次数提交，以最后一次提交为准</p>
          <p>3. 考试结束后，将立刻公布分数和答案</p>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 30px;
  }

  .content {
    width: 80%;
  }

  .item {
    margin-bottom: 30px;
  }

  .item-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .item-content {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
  }
</style>

<script>
  export default {
    data() {
      return {

      }
    }
  }
</script>

这个页面使用了基本的 uniapp 模板语法进行编写，使用了 view 和 template 标签的嵌套，以及 CSS 样式进行美化。

页面分为三个部分，分别是标题部分、内容部分和规则条目。在规则条目中列出了考试时间、考试规定和考试安排等内容。