<template>
  <div>
    <div
      v-for="(oneLevel, oneLevelIndex) in jsonData"
      :key="oneLevelIndex"
      class="flex-box"
    >
      <div class="one-level-title">
        <m-icon type="biaotizhuangshi3" />
        {{ oneLevel.title }}
        <m-icon class="icon-right" type="biaotizhuangshi3" />
      </div>
      <div v-if="oneLevel.explain" class="one-level-explain box-set">
        {{ oneLevel.explain }}
      </div>
      <div
        class="two-flex-box"
        :key="twoLevelIndex"
        v-for="(twoLevel, twoLevelIndex) in oneLevel.twoLevel"
      >
        <div class="two-level-title">
          <m-icon type="biaotizhuangshi1" />
          {{ twoLevel.title }}
          <m-icon class="icon-right" type="biaotizhuangshi1" />
        </div>
        <div v-if="twoLevel.explain" class="box-set">
          {{ twoLevel.explain }}
        </div>
        <div
          class="box-set three-level-explain"
          v-for="(threeLevel, threeLevelIndex) in twoLevel.threeLevel"
          :key="threeLevelIndex"
        >
          <div class="three-level-title">{{ threeLevel.title }}</div>
          <div
            class="four-level-explain"
            v-for="(item, index) in threeLevel.list"
            :key="item"
          >
            <span class="four-level-title">{{ Number(index) + 1 }}</span>
            <div>
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/'
export default {
  data() {
    return {
      jsonData: [
        {
          title: "报名",
          explain:
            "首先第一步，带齐身份证等材料到驾校报名学车，本地学员准备身份证原件和复印件和一寸免冠照片。需要注意：报名后十天才可以预约科目一。",
        },
        {
          title: "科目一",
          explain:
            "待科目一学的差不多了，学时也满了，学员就可以在车管所网站上预约科目一考试，考场和考试时间都可以自主选择，科目一考试是电脑无纸化考试形式，主要考核交通法律、法规的基本知识。考试当天必须携带身份证原件。考试当天共有2次考试机会，2次都没有通过则必须重新预约考试。科目一考试时长45分钟，每题1分，90-100分为合格。成绩合格的考生，须持本人身份证在考场内出口位置刷身份证，用签名笔签名，并点击确认签名（考生无须取纸质成绩单）",
        },
        {
          title: "科目二",
          explain:
            "科目二的具体考试项目包括：直角转弯、曲线行驶、坡道定点停车、侧方停车、倒车入库(部分地区有增加项目)。总分为100分，考试大型客车、牵引车、城市公交车、中型客车、大型货车准驾车型的，成绩达到90分的为合格，其他准驾车型的成绩达到80分的为合格。学员学车时必须严格记录学时，学时满后才有资格预约考科目二，考试当天共有2次考试机会，2次都没有通过则必须重新预约考试。",
          twoLevel: [
            {
              title: "科目二扣分标准",
              explain: "不同地方评判标准和扣分标准不同,仅供参考",
              threeLevel: [
                {
                  title: "通用扣分标准",
                  list: [
                    "未系安全带：扣100分",
                    "未关好车门：扣100分",
                    "启动发动机时档位未在空档：扣100分",
                    "未打转向灯(包括起步、变道、超车、转弯、靠边停车);转向灯打开未超三秒;忘记关转向灯或转向灯使用错误：扣10分",
                    "熄火一次：扣10分",
                  ],
                },
                {
                  title: "侧方位停车扣分标准",
                  list: [
                    "车辆入库停止后车身出线：扣100分",
                    "出库时不使用或错误使用转向灯：扣10分",
                    "项目完成时间超过90秒：扣100分",
                    "行驶中车身触碰库位边线：扣10分/次",
                    "行驶中车轮触轧车道边线：扣10分/次",
                    "中途停车超过2秒：扣5分/次",
                  ],
                },
                {
                  title: "侧方停车扣分标准",
                  list: [
                    "项目完成时间超过210秒：扣100分(扣分重点)",
                    "不按规定路线、顺序行驶：扣100分",
                    "倒车前未将前轮均触点均驶过控制线：100分",
                    "中途停车超2秒：扣5分/次",
                    "倒库不入：扣100分",
                    "车身出线：扣100分",
                  ],
                },
                {
                  title: "曲线行驶扣分标准",
                  list: [
                    "车轮压到边缘线：扣100分(原先为扣20分,新标准调整)",
                    "中途停车超2秒：扣100分",
                  ],
                },
                {
                  title: "直角转弯扣分标准",
                  list: [
                    "车轮压到边缘线：扣100分(原先为扣20分,新标准调整)",
                    "中途停车超2s：扣5分/次",
                  ],
                },
                {
                  title: "坡道定点停车扣分标准",
                  list: [
                    "起步未开左转向灯：扣10分",
                    "起步时间超30秒：扣100分(扣分重点)",
                    "行驶过程中车轮轧到边线：扣100分",
                    "车辆停止后，车辆前保险杠或摩托车前轴未定于桩杆线上，前后未超过50cm：扣10分",
                    "车辆停止后，车辆前保险杠或摩托车前轴未定于桩杆线上，前后超过50cm：扣100分",
                    "车辆停止后，车身至车道边缘线超过30cm未超50cm：扣10分",
                    "车辆停止后，车身至车道边缘线超过50cm：扣100分",
                    "起步时，溜车距离未超30cm：扣10分",
                    "起步时，溜车距离超过50cm：扣100分",
                  ],
                },
              ],
            },
          ],
        },
        {
          title: "科目三",
          explain:
            "科目二考试合格后，学员就便可进行科目三路考的训练啦，科目三训练里程最低不得少于300公里，科目三考试项目至少包含：夜间灯光模拟操作、上车准备、直线行驶、百米加减档等16个考试。总分为100分，成绩达到90分的为合格，当天共有2次考试机会，2次都没有通过则必须重新预约考试。",
          twoLevel: [
            {
              title: "科目三扣分标准",
              explain: "不同地方评判标准和扣分标准不同,仅供参考",
              threeLevel: [
                {
                  title: "直接判定为不合格情况",
                  list: [
                    "不按规定使用安全带",
                    "遮挡、关闭车内音视频监控设备",
                    "不按考试员指令驾驶",
                    "起步时车辆后溜距离大于30cm",
                    "使用挡位与车速长时间不匹配，造成车辆发动机转速过高或过低",
                    "车辆在行驶中连续2次挂挡不进",
                    "行驶中空挡滑行",
                    "不按交通信号灯、标志、标线行驶",
                    "不按规定速度行驶",
                    "车辆行驶中骑轧道路中心实线或者车道边缘实线",
                    "长时间骑轧车道分界线行驶（时间大于15秒）",
                    "连续变更两条或两条以上车道",
                    "将车辆停在人行横道、网状线内等禁止停车区域",
                    "考生未按照预约时间参加考试",
                  ],
                },
                {
                  title: "出现以下情况扣10分",
                  list: [
                    "起步时车辆后溜，但后溜距离小于30cm",
                    "起步或行驶中挂错挡",
                    "起步、转向、变更车道、超车、停车前不使用或错误使用转向灯",
                    "起步、转向、变更车道、超车、停车前，开转向灯少于3秒即转向",
                    "因操作不当造成发动机熄火一次",
                  ],
                },
                {
                  title: "上车准备扣分标准",
                  list: [
                    "未按逆时针方向绕车一圈检查车辆外观及周围环境，不合格。",
                  ],
                },
                {
                  title: "起步扣分标准",
                  list: [
                    "制动气压不足起步,不合格",
                    "车门未完全关闭起步，不合格",
                    "启动发动机时，变速器操纵杆未置于空挡，不合格",
                    "不松驻车制动器起步，未及时纠正，不合格",
                    "不松驻车制动器起步，但及时纠正，扣10分",
                    "发动机启动后，不及时松开启动开关，扣10分",
                  ],
                },
                {
                  title: "加减档扣分标准",
                  list: [
                    "未按指令平稳加、减挡，不合格",
                    "车辆运行速度与挡位不匹配，扣10分",
                  ],
                },
                {
                  title: "靠边停车扣分标准",
                  list: [
                    "停车后，车身超过道路右侧边缘线或者人行横道线，不合格",
                    "下车后不关闭车门，不合格",
                    "停车后，车身距离道路右侧边缘线或者人行道边缘大于30cm，扣10分",
                    "停车后，未拉紧驻车制动器，扣10分",
                    "拉紧驻车制动器前放松行车制动踏板，扣10分",
                    "下车前不将发动机熄火，扣5分",
                  ],
                },
                {
                  title: "其他扣分标准",
                  list: [
                    "直行通过路口、路口左转弯、路口右转弯，不按规定减速或停车瞭望，不合格。",
                    "通过人行横道、学校区域、公共汽车站，不按规定减速慢行，不合格。",
                  ],
                },
              ],
            },
          ],
        },
        {
          title: "科目四",
          explain:
            "科目四考试主要考核安全文明驾驶常识，和科目一一样，也是电脑无纸化考试形式，比科目一多了多选择，动画题，案例分析题的题型。科目四考试时长45分钟，每题2分，90-100分为合格。成绩合格的考生，须持本人身份证在考场内出口位置刷身份证，用签名笔签名，并点击确认签名（考生无须取纸质成绩单）",
        },
        {
          title: "领取驾驶证",
          explain:
            "当科目四考试合格后，就可以等着车管所制证，当驾校通知驾驶证完成，学员持身份证到驾校报名点领取驾驶证即可。",
        },
      ],
    };
  },
  methods: {
    name() {},
  },
  onLoad (query) {
    //   const name = this.$route.query.name
    const markdown = query.markdown
     api.json.markdown(markdown).then(res=>{
       console.log(res)
       this.jsonData = res.data

     });
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  background-color: #ffffff;
  z-index: 10;
}
.flex-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 17px;
  font-family: PingFang SC;
  padding: 40px 0 20px;
  .box-set {
    width: 336px;
    border: 1px solid #498ef5;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f6f6f6;
    color: #5c6066;
    font-size: 15px;
    font-weight: 400;
    line-height: 23px;
    position: relative;
    margin-top: 40px;
  }
  .icon-right {
    transform: rotate(180deg);
  }
  .two-flex-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  .one-level-title {
    font-size: 28px;
    font-weight: bold;
    color: #000000;
    position: relative;
    &::after {
      content: "";
      width: 100%;
      height: 4px;
      border-top: 1px dashed #498ef5;
      border-bottom: 1px solid #498ef5;
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateY(100%);
    }
  }
  .one-level-explain {
  }
  .three-level-explain {
    padding-top: 30px;
  }
  .two-level-title {
    font-size: 24px;
    font-weight: bold;
    color: #0a1a33;
  }
  .three-level-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    height: 35px;
    background: #498ef5;
    border-radius: 18px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    line-height: 43px;
    position: absolute;
    left: 40px;
    top: 0;
    transform: translateY(-50%);
  }
  .four-level-title {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 3px;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #498ef5;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 400;
    color: #fefeff;
  }
  .four-level-explain {
    display: flex;
    margin-bottom: 5px;
  }
}
</style>