nbjk-xcx/src/otherPages/beforeMockExam/index.vue

<template>
  <view class="bg">
    <m-nav-bar  title="模拟考试" :transparent="true" />
    <view class="user">
      <image class="userImage" :src="headImage"></image>
      <view class="name">
        {{nickName}}
      </view>
    </view>
    <div class="content">
      <div class="title"></div>
      <div class="class">
        <span>考试科目</span>
        <span>{{ query.subject==1?'科目一':'科目四' }}</span>
      </div>
      <div class="class">
        <span>考试题库</span>
        <span>{{ query.vehicle }}{{ query.cert }}</span>
      </div>
      <div class="class">
        <span>考试时间</span>
        <span>{{ query.subject == "1" ? 100 : 50 }}题,45分钟</span>
      </div>
      <div class="class">
        <span>合格标准</span>
        <span>90分及格</span>
      </div>
      <div class="class">
        <span>出题规则</span>
        <span>交管局出题规则</span>
      </div>
      <!-- #ifdef MP-WEIXIN-->
      <!-- <div class="class">
        <span>学员姓名</span>
        <span>
          <input
            v-model="realName"
            class="class-input"
            placeholder="选填"
            confirm-type="send"
            type="text"
          />
        </span>
      </div> -->
      <!-- #endif -->
      <div class="remind">
        答题后不可修改，累计错题扣分导致分数不及格时，系统自动交卷，考试不通过。
      </div>
      <view class="start" @click="gotoNextPage">
        <m-button class="start" width="532rpx" height="80rpx" text="开始考试" />
      </view>
    </div>
  </view>
</template>

<script>
import api from "@/api/index";
import utils from "@/utils/index";
export default {
  data() {
    return {
      query: {},
    };
  },
  onLoad(query) {
    this.query = query;
  },
  computed: {
    headImage() {
      return this.$store.state.user.userInfo.headImage;
    },
    nickName(){
      return this.$store.state.user.userInfo.nickName;
    }
  },
  methods: {
    goMockExam(e) {},
    gotoNextPage(e) {
      let query = Object.assign({}, this.query);
      query.title = "模拟考试";
      uni.navigateTo({
        url: "/otherPages/mockExam/index?" + utils.mapToUrlQuery(query),
      });
      //  #ifdef MP-WEIXIN
      //  #endif
    },
  },
};
</script>

<style scoped lang="scss">
.bg{
  width: 100%;
  background-image: url('https://ct.zzxcx.net/ctjk/mp-wx/beforeMockExam/bg.png');
  height: 100vh;
}
.header-back {
  width: 750rpx;
  padding-bottom: 82px;
  background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
  border-radius: 0px 0px 82px 82px;
  .header {
    position: relative;
    font-size: 15px;
    padding: 15px;
    color: #ffffff;
    .title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .user-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    justify-content: space-between;
    height: 80px;
    color: #ffffff;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
  }
}
.class-input {
  width: 200rpx;
  border: none;
  background: #e2e2e2;
  border-radius: 30rpx;
  padding-left: 16rpx;
}
.user{
  padding-top: 40rpx;
  padding-left: 60rpx;
  height: 152rpx;
  display: flex;
  .userImage{
    width: 112rpx;
    height: 112rpx;
  }
  .name{
    height: 112rpx;
    line-height: 112rpx;
    font-size: 30rpx;
    padding-left: 12rpx;
    color: #fff;
  }


}
.content {
  width: 690rpx;
  background: #ffffff;
  box-shadow: 0px 0px 8rpx rgba(124, 129, 136, 0.2);
  border-radius: 20rpx;
  position: relative;
  left: 50%;
  top: 80rpx;
  transform: translateX(-50%);
  padding: 0rpx 0rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 80rpx;
  .title {
    background-image: url('https://ct.zzxcx.net/ctjk/mp-wx/beforeMockExam/header.png');
    background-size:100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 116rpx;
  }
  .class {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    width: 340rpx;
    margin-top: 26rpx;

    span {
      &:nth-of-type(1) {
        color: #8a9099;
      }
      &:nth-of-type(2) {
        color: #5c6066;
      }
    }
  }
  .remind {
    width: 630rpx;
    background: rgba(255, 77, 83, 0.1);
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 38rpx;
    color: #ff4d53;
    padding: 16rpx 24rpx;
    box-sizing: border-box;
    margin-top: 48rpx;
  }
  .start {
    color: #ffffff;
    margin-top: 30px;
    background: #498ef5;
    border-radius: 40rpx;
    overflow: hidden;
  }
}
</style>