<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">面对未来，许多人会想选择有兴趣的专业或工作，
          因为兴趣让人有热情、活力与成就感。这份测验能帮助你了解自己的兴趣，
          进而探索适当的专业及工作。 测验中列举了一些活动和职业名称，
          回答时只需要考虑「喜欢」或者「不喜欢」的程度，
          不必在意是否有机会去做这件事。作答时，有的根据您从小到大的生活经验；
          至于有些没有经历过的事，
          就请你以直觉来回答。作答时间大约15分钟。</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>
          </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>
export default {
  data() {
    return {
      active: 1,
      inducList: [
        "非常喜欢：有强烈（特别喜欢）的感觉",
        "喜欢：有（喜欢做）的快乐感觉，不会日久生厌",
        "不喜欢：有（不想做）的厌烦感觉",
        "非常不喜欢：有强烈（排斥）的感觉"
      ],
    };
  },
  methods: {
    //   生涯兴趣测评
    toInter: function() {
      localStorage.removeItem("interAnswer2");
      this.$router.push({ path: "/JuniorIntrestTest"});
    }
  },
};
</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: 713px;
  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>