feat:模拟考试页面

src/pages.json

@@ -104,6 +104,16 @@
 						"enablePullDownRefresh": false,
 						"disableScroll": true
 					}
+				},
+				{
+					"path": "beginAnswer",
+					"name": "learnBeginAnswer",
+					"style": {
+						"navigationBarTitleText": "模拟考试-开始",
+						"navigationStyle": "custom",
+						"enablePullDownRefresh": false,
+						"disableScroll": true
+					}
 				}
 			]
 		},

src/pages/learn/beginAnswer.vue

+<template>
+  <view class="begin-answer">
+    <u-navbar
+      back-icon-color="#FFFFFF"
+      background="transparent"
+      title="模拟考试"
+      titleColor="#FFFFFF"
+      :border-bottom="false"
+      title-bold
+    ></u-navbar>
+    <view class="content">
+      <view class="head-view">
+        <view class="image-view">
+          <image class="image" :src="info.image || defaultImage"> </image
+        ></view>
+        <view>{{ info.name }}</view>
+      </view>
+      <view class="line-view"></view>
+      <view class="list-view">
+        <view v-for="(value, key) in labels" :key="key" class="item-view">
+          <view class="left-view">{{ value }}</view>
+          <view>{{ info[key] }}</view>
+        </view>
+      </view>
+      <view class="line-view"></view>
+      <view class="tip-view"
+        >温馨提示：模拟考试中不能修改答案，没做错1道题扣2分，合格标准为90分。</view
+      >
+      <view class="bottom-view">
+        <u-button
+          :customStyle="buttonStyle"
+          @click="handleClick"
+          type="primary"
+          shape="circle"
+        >
+          开始模拟
+        </u-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      info: {},
+    }
+  },
+
+  computed: {
+    labels() {
+      return {
+        kemu: '考试科目',
+        tishu: '考试题数',
+        biaozhun: '合格标准',
+        guize: '出题规则',
+      }
+    },
+    defaultImage() {
+      return process.uniEnv.qn_base_url + 'lianxiwancheng-f.png'
+    },
+    buttonStyle() {
+      return {
+        height: '104rpx',
+        width: '600rpx',
+        backgroundColor: '#2953FF',
+        color: '#FFFFFF',
+        fontSize: '32rpx',
+        fontWeight: 'bold',
+      }
+    },
+  },
+  onLoad() {
+    this.info = {
+      name: '我就是昵称',
+      image: '',
+    }
+  },
+  methods: {
+    handleClick() {},
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.begin-answer {
+  display: flex;
+  flex-direction: column;
+  background-image: linear-gradient(to top, #f7f9fc 0%, #2953ff 50%);
+  background-color: #f7f9fc;
+  background-size: 100% 920rpx;
+  background-repeat: no-repeat;
+  height: 100vh;
+  .content {
+    height: 100%;
+    margin: 70rpx 24rpx 24rpx 44rpx;
+    background-color: #ffffff;
+    border-radius: 12rpx 12rpx 0 0;
+    padding: 0 30rpx 60rpx 30rpx;
+    .head-view {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #191c27;
+      flex-direction: column;
+      margin-bottom: 40rpx;
+      .image-view {
+        margin-bottom: 20rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 4rpx;
+        width: 140rpx;
+        height: 140rpx;
+        background-color: #ffffff;
+        border-radius: 140rpx;
+        margin-top: -70rpx;
+        .image {
+          width: 136rpx;
+          height: 136rpx;
+          border-right: 136rpx;
+          border-radius: 136rpx;
+        }
+      }
+    }
+    .line-view {
+      background-color: #e8ebf3;
+      height: 2rpx;
+    }
+    .list-view {
+      padding: 20rpx 0;
+      .item-view {
+        margin: 30rpx 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #5a6073;
+        font-size: 28rpx;
+        text-align: right;
+        .left-view {
+          text-align: left;
+          color: #9ea5bb;
+        }
+      }
+    }
+    .tip-view {
+      font-size: 26rpx;
+      color: #9ea5bb;
+      margin: 50rpx 0 210rpx 0;
+    }
+    .bottom-btn {
+    }
+  }
+}
+</style>