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

最新推荐文章于 2024-05-21 10:41:05 发布

米饭，℡

最新推荐文章于 2024-05-21 10:41:05 发布

阅读量77

点赞数

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

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

版权

页面案例专栏收录该内容

24 篇文章 0 订阅

订阅专栏

【页面案例汇总】微信小程序考试通知页面，包括了考试日期、时间、地点以及考试科目。

<template>
  <view class="container">
    <view class="title">考试通知</view>
    <view class="exam-info">
      <view class="exam-item">
        <view class="exam-label">考试日期：</view>
        <view class="exam-value">{{examDate}}</view>
      </view>
      <view class="exam-item">
        <view class="exam-label">考试时间：</view>
        <view class="exam-value">{{examTime}}</view>
      </view>
      <view class="exam-item">
        <view class="exam-label">考试地点：</view>
        <view class="exam-value">{{examLocation}}</view>
      </view>
      <view class="exam-item">
        <view class="exam-label">考试科目：</view>
        <view class="exam-value">{{examSubject}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      examDate: '2021年7月1日',
      examTime: '9:00-11:00',
      examLocation: '文科楼101',
      examSubject: '高等数学'
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}
.exam-info {
  width: 80%;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
}
.exam-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.exam-label {
  font-size: 20px;
  font-weight: bold;
}
.exam-value {
  font-size: 20px;
  margin-left: 10px;
}
</style>