<template>
  <div class="simulation">
    <ZhiYuanHeader></ZhiYuanHeader>
    <div class="oldyear w1200 whitebox">
      <div class="oldyear-top bg-FFFDF0">
        <div class="top-tips">
          <p>重要提示</p>
          <p> 1、郑重提醒：本系统依据历年院校录取数据提供高考志愿智能模拟功能，不等同于实际的网上填报志愿，建议考生在填报志愿时，结合本系统的推荐加以完善个人志愿表；</p><p> 2、高考志愿填报给出的志愿报告仅供考生填报时参考，我们不对实际录取结果提供担保，建议考生在填报志愿时，结合本系统的推荐，再进一步咨询相关高校，以完善志愿表；</p><p> 3、2020年专业录取相关数据已更新；</p><p> 4、2018-2020各院校录取数据，参考各省市出版的填报指南以及各本专科院校的官网历年录取数据；</p><p> 5、在正式填报时，以教育考试院公布的最新招生计划数为准；</p><p> 6、填写成绩信息后，您可以按系统的重点填报提示选择适合自己的批次模拟，也可直接选择自己关注的批次进行模拟；</p><p> 7、志愿模拟填报代码均为模拟代码，本站不提供院校代码及专业代码，正式填报请以教育考试院为准。</p>
        </div>
      </div>
      <div class="box-center">
        <div class="title data-col">
          <div class="name">2021 志愿模拟填报</div>
          <div class="title-label">当前高考省份：【湖南】【3+1+2模式】</div>
        </div>
      </div>
      <div class="oldtear-filtrate">
        <div class="subject-content">
          <div class="subject-label">
            <span class="label">首选科目</span>
            <span class="tips">（2选1）</span>
            </div><div class="subjects">
              <a href="javascript:void(0);" class="active">物理</a>
              <a href="javascript:void(0);" class="">历史</a>
            </div>
          </div>
          <div class="subject-content">
            <div class="subject-label">
              <span class="label">再选科目</span>
              <span class="tips">（4选2）</span>
            </div>
            <div class="subjects">
              <a href="javascript:void(0);" class="">化学</a>
              <a href="javascript:void(0);" class="">生物</a>
              <a href="javascript:void(0);" class="active">政治</a>
              <a href="javascript:void(0);" class="active">地理</a>
            </div>
          </div>
          <div class="group-description">
            <div class="subject-label">
              <span class="label">我的科目组合</span>
            </div>
            <div class="sub-group">
              <span class="sub">物</span>
              <span style="margin: 0px 5px;">+</span><span class="sub">政</span>
              <span style="margin: 0px 5px;">+</span><span class="sub">地</span>
            </div>
            <div class="tips">                        选考科目一经提交确认，将不可修改，请认真确认你的科目选择。</div>
            </div>
            <div class="classes-tips" style="color: rgb(51, 51, 51); margin-bottom: 15px; font-size: 14px;">                此处选择、填写的总分/排位是您在最近一次考试查出分数时所对应的分数/位次，请知晓。文理科、总分及排位查询
              <span class="cl-f80">不受限制</span>                ,可在科目组合确认后
              <span class="cl-f80">多次更改查询</span>
            </div>
            <div class="classes-content">
              <div class="classes-item">
                <div class="classes-label">预估分数</div>
                <div class="classes-value">
                  <input type="text" maxlength="3" placeholder="100-750">
                  <span>                            分</span>
                </div>
                <div class="tip" style="display: none;">
                  <div class="icon">!</div>
                  <div class="text">总分应输入100-750分，请重新输入。</div>
                </div>
              </div>
              <div class="classes-item">
                <div class="classes-label">预估排名</div>
                <div class="classes-value">
                  <input type="text" maxlength="6" placeholder="输入排名">
                  <span>                            名</span>
                </div>
              </div>
            </div>
          <div class="btn-box"><a href="javascript:void(0);" class="submit">模拟填报</a></div>
        </div>
      </div>
      <div class="moni-tips-con" style="display: none;">
        <div class="line"><p></p>
          <span></span>
        </div>
        <div class="moni-content">
          <h1>重要提示</h1>
            <ul>
              <li><b style="color: rgb(255, 136, 0);">1、郑重提醒：本系统依据历年院校录取数据提供高考志愿智能模拟功能，不等同于实际的网上填报志愿，建议考生在填报志愿时，结合本系统的推荐加以完善个人志愿表；</b></li>
              <li> 2、高考志愿填报给出的志愿报告仅供考生填报时参考，我们不对实际录取结果提供担保，建议考生在填报志愿时，结合本系统的推荐，再进一步咨询相关高校，以完善志愿表；</li>
              <li> 3、2020年专业录取相关数据已更新；</li>
              <li> 4、2018-2020各院校录取数据，参考各省市出版的填报指南以及各本专科院校的官网历年录取数据；</li>
              <li> 5、在正式填报时，以教育考试院公布的最新招生计划数为准；</li>
              <li> 6、填写成绩信息后，您可以按系统的重点填报提示选择适合自己的批次模拟，也可直接选择自己关注的批次进行模拟；</li>
              <li><b style="color: rgb(255, 136, 0);">7、志愿模拟填报代码均为模拟代码，本站不提供院校代码及专业代码，正式填报请以教育考试院为准。</b></li>
            </ul>
            <div class="btn-group">
              <a href="javascript: void(0);" id="close-moni-tips-mask" class="">我已知晓</a>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
import ZhiYuanHeader from "../components/ZhiYuanHeader.vue";
export default {
  components: { ZhiYuanHeader },
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>

body {
  width: 100%;
  font: 12px/150% Arial, Microsoft YaHei, '微软雅黑';
  color: #666;
  min-width: 1300px;
  -webkit-text-size-adjust: none;
  background: #f5f7fa;
}

.navigation_top {
  position: relative;
  margin-bottom: 10px;
  margin-top: 10px;
  height: 113px;
}
.navigation_top p {
  color: #8CA07E;
  font-size: 14px;
  padding-top: 70px;
  margin-left: 42px;
  z-index: 1;
  position: relative;
}
.navigation_top img {
  position: absolute;
  left: -7px;
  top: 0;
}
.whitebox {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 7px 0px rgb(177 181 188 / 23%);
}
.w1200 {
  margin: 0 auto;
  width: 1200px;
}
.oldyear-top {
  padding: 20px;
}
.top-tips {
  border-radius: 4px;
  background: #fffdf0;
  border: 1px solid #f1d6b6;
  padding: 20px;
  font-weight: 400;
  color: #f29c3a;
  line-height: 26px;
  font-size: 14px;
}

.top-tips p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.box-center {
  margin: 20px 0;
  text-align: center;
  width: 100%;
  position: relative;
}
.box-center .title .name {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  line-height: 27px;
}
.oldtear-filtrate {
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
}
.title-label {
  color: #999999;
  line-height: 27px;
  font-size: 14px;
}
.subject-content {
  display: flex;
  font-size: 14px;
  flex-direction: row;
  align-items: center;
}
.subject-content .subjects {
  display: flex;
  flex-direction: row;
}
.subject-label, .classes-label {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}
.subject-label .label {
  color: #333;
}
.subject-label .tips {
  color: #bfbfbf;
}
.subject-content .subjects a.active {
  border-color: #ff8800;
  font-weight: bold;
  color: #ff8800;
  background: url(https://static-v2.52gaokao.com/website/icon/simulation/icon-subject-checked.png) no-repeat bottom right;
}
.subject-content .subjects a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  line-height: 28px;
  padding: 0 16px;
  border: 1px solid #bfbfbf;
  margin: 10px 0;
  margin-right: 14px;
}
.classes-tips .cl-f80 {
  color: #ff8800;
}
.group-description {
  display: flex;
  font-size: 14px;
  flex-direction: row;
  margin-top: 10px;
  align-items: center;
}
.classes-tips {
  display: flex;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px dashed #e6e6e6;
}
.classes-content {
  display: flex;
  flex-direction: column;
}
.classes-value input {
  width: 233px;
  height: 32px;
  border: 1px solid #c8cacc;
  border-radius: 17px;
  padding-left: 10px;
  line-height: 32px;
  padding-right: 10px;
  margin-right: 10px;
}
select, input, textarea {
    font-size: 14px;
    margin: 0;
    color: #333;
    font-family: Arial, Microsoft YaHei, '微软雅黑';
}
input {
  padding-top: 0;
  padding-bottom: 0;
  outline: none;
  line-height: normal;
}
.classes-item {
  margin-top: 20px;
}
.classes-item, .classes-value {
  display: flex;
  font-size: 14px;
  flex-direction: row;
  align-items: center;
}
.btn-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
  padding-bottom: 50px;
}
.btn-box .submit {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 160px;
  line-height: 34px;
  border-radius: 23px;
  color: #fff;
  border: 1px solid #ff8800;
  background: linear-gradient(90deg, #ff9c20, #ff840f);
  font-size: 14px;
  margin: 0 15px;
}
.moni-tips-con {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 620px;
  height: 460px;
  margin-left: -310px;
  background: #fff;
  margin-top: -230px;
}
</style>