<template>
  <div class="induc_wrap">
    <!-- 施测说明 -->
    <div class="induc clearfix">
      <div class="induc_box clearfix">
        <!-- 施测说明标题 -->
        <div class="induc_title clearfix">
          <h1>施测说明</h1>
        </div>
        <!-- 提示 -->
        <div class="induc_tips">亲爱的同学</div>
        <div class="induc_tips">
          我们现在要做「多元性向潜能发展测验」，主要目的是帮助各位了解自己的能力，诸如语文推理、数字推理等等，帮助你增进对自我的了解。这是一个测验你潜在能力的测验，这份测验不是考试，尽力做就可以，不会也不会关系。</div>
        <div class="induc_tips">
         本测验共有六个大题，每一大题都会有「说明与例题」以及「作答限制时间」，时间结束便不能再进行填答，所以请把握时间尽量迅速且正确的作答。如果您需要做任何计算，请利用桌上的纸张。</div>
        

      
        
        <!-- 选项说明 -->
        <div class="induc_option clearfix">
          <!-- 左侧图片 -->
          <div class="induc_option_l">
            <img src="@/assets/img/11.png" alt />
          </div>

          
 <!-- 右侧说明 -->
          <div class="induc_option_r clearfix" >
            <h3>选项说明：</h3>
            <ul class="induc_ul">
              <li v-for="(item,index) in inducList" :key="index">{{item}}</li>
            </ul>


             <h3 style="margin-top:68px">测试规定</h3>
            <ul class="induc_ul">
              <li v-for="(item,index) in guidinglist" :key="index">{{item}}</li>
            </ul>
          </div>
        </div>
        <!-- 评测按钮 -->
        <div class="induc_btn currency_btn" @click="toInter">开始测评</div>
        <!-- 提示 -->
        <div class="induc_warn clearfix layout justify_center align_center">
          <div class="induc_pic">
            <img src="@/assets/img/12.png" alt />
          </div>

          <p class="induc_warn_content">本测评无标准答案，与学业成绩无关，请按个人真实感受客观选择，不建议短时间内多次重复测评</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {post} from '@/api/http';
export default {
  data() {
    return {
      active: 1,
      inducList: [
        "非常喜欢：有强烈（特别喜欢）的感觉",
        "喜欢：有（喜欢做）的快乐感觉，不会日久生厌",
        "不喜欢：有（不想做）的厌烦感觉",
        "非常不喜欢：有强烈（排斥）的感觉"
      ],
      guidinglist:[
          "施测时间：约45分钟，详细流程如下表《施测流程》",
          "施测地点：合适的作答环境，可正常书写、思考",
          "施测材料：电脑及基本设施、白纸1-2张/每人（计算用）"
      ]
    };
  },
  methods: {
    //   生涯兴趣测评
    toInter: function() {
      let url = "/api/primary_pluralistic/addTestPluralistic/";
      let params = {
        id:localStorage.getItem('evaluteId')
      }
      post(url,params)
      .then(res=>{
         this.$router.push({path: "/MulSchoolExample"});
      })
      
    }
  },
};
</script>
<style scoped>
.induc_wrap {
  width: 100%;
  background-color: #f2f5fa;
  padding: 36px 0 134px;
}
.induc {
  width: 1200px;
  /* height: 731px; */
  background-color: #fff;
  margin: 0 auto;
  padding-bottom: 32px;
  box-sizing: border-box;
}
.induc_box {
  width: 777px;
  margin: 0 auto;
  padding-top: 95px;
  text-align: center;
}
/* 施测说明标题 */
.induc_title h1 {
  font-size: 36px;
  color: #34485e;
  position: relative;
  width: 144px;
  margin: 0 auto;
  margin-bottom: 68px;
}
.induc_title h1:after {
  content: "";
  position: absolute;
  bottom: -31px;
  left: 29px;
  width: 87px;
  height: 1px;
  background-color: #34485e;
}
/* 提示 */
.induc_tips {
  font-size: 16px;
  color: #409eff;
  text-align: left;
  line-height: 22px;
}
/* 选项说明 */
.induc_option {
  margin: 41px 0 59px;
}
/* 左侧图片 */
.induc_option_l {
  float: left;
  width: 287px;
  height: 246px;
  margin-left: 22px;
}
.induc_option_l img {
  width: 100%;
  height: 100%;
}
/* 右侧说明 */
.induc_option_r {
  float: right;
  margin-top: 38px;
  text-align: left;
}
.induc_option_r h3 {
  font-size: 20px;
  color: #409eff;
}
.induc_ul {
  text-align: left;
  font-size: 14px;
  color: #8c9198;
  line-height: 19px;
  margin-top: 32px;
  margin-left: 18px;
}
.induc_ul li {
  list-style: disc;
  margin-bottom: 10px;
}

/* 警告 */
.induc_warn_content {
  color: #409eff;
  font-size: 16px;
}
</style>