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

1. 在pages文件夹下创建exam文件夹，并在其中添加exam.vue组件。

2. 在exam.vue组件中添加以下代码：

3. HTML部分

<template>
  <view class="container">
    <view class="header">
      <text class="title">考试信息</text>
    </view>
    <view class="card" v-for="(item, index) in examList" :key="index">
      <view class="card-content">
        <text class="card-title">{{ item.name }}</text>
        <text class="card-description">{{ item.description }}</text>
        <text class="card-time">{{ item.time }}</text>
      </view>
    </view>
  </view>
</template>

2. CSS部分

.container{
  padding:20rpx;
  background-color:#f2f2f2;
}
.header{
  padding:20rpx;
  justify-content:center;
  align-items:center;
  background-color:#fff;
  border-radius:10rpx;
  margin-bottom:20rpx;
}
.title{
  font-size:36rpx;
  font-weight:bold;
}
.card{
  margin-bottom:20rpx;
  background-color:#fff;
  border-radius:10rpx;
  box-shadow: 0 2rpx 5rpx rgba(0,0,0,.1);
}
.card-content{
  padding:20rpx;
}
.card-title{
  font-size:28rpx;
  font-weight:bold;
  margin-bottom:10rpx;
}
.card-description{
  font-size:24rpx;
  margin-bottom:10rpx;
}
.card-time{
  font-size:24rpx;
  color:#888;
}

3. JavaScript部分

<script>
  export default {
    data() {
      return {
        examList: [
          {
            name: '英语等级考试',
            description: '考试内容包括听说读写四项能力',
            time: '2021年5月24日 09:00-12:00',
          },
          {
            name: '会计师资格考试',
            description: '考试内容包括财经法律、会计实务、经济和财务管理',
            time: '2021年7月10日 13:00-16:00',
          },
          {
            name: '软件工程师考试',
            description: '考试内容包括软件工程基础、需求分析与设计、软件构造与测试等',
            time: '2021年8月15日 09:00-12:00',
          },
        ],
      };
    },
  };
</script>

以上代码主要实现了以下功能：

• 页面显示了一个标题为“考试信息”的页面；
• 页面展示了三个考试信息卡片，分别包含考试名称、考试描述和考试时间；
• 页面使用了简单的样式美化。