<template>
  <!-- 题库中心首页 -->
  <div class="que_bank">
    <el-card>
      <!-- 智能练习 -->
      <el-row class="frist_wrap">
        <el-col :span="12">
          <div>
            <div class="title">
              <img src="@/assets/images/icon_timu.png" alt="" />
              <span>智能练习</span>
            </div>
            <div class="sort_container">
              <div class="img_item">
                <img
                  src="@/assets/images/img_tongbuzaixian.png"
                  @click="toNavgator('/question-center/smartExercise', 0)"
                  alt=""
                />
              </div>
              <div class="img_item">
                <img
                  src="@/assets/images/img_zhishidianzaixian.png"
                  @click="toNavgator('/question-center/smartExercise', 1)"
                  alt=""
                />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <div class="title">
              <img src="@/assets/images/icon_zuanshi.png" alt="" />
              <span>精品试卷</span>
            </div>
            <div class="sort_container">
              <div class="img_item">
                <img
                  src="@/assets/images/img_mingxiaoshijuan.png"
                  @click="toNavgator('/question-center/bestPaper', 0)"
                  alt=""
                />
              </div>
              <div class="img_item">
                <img
                  src="@/assets/images/img_linianzhenti.png"
                  @click="toNavgator('/question-center/bestPaper', 1)"
                  alt=""
                />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 组卷中心 -->
      <div class="que_center">
        <div class="title">
          <img src="@/assets/images/icon_zujuan.png" alt="" />
          <span>组卷中心</span>
        </div>
        <div class="zujuan_wrap">
          <div class="zujuan_item">
            <img
              src="@/assets/images/img_shoudongzujuan.png"
              @click="toNavgator('/question-center/generatingPaperCenter', 0)"
            />
          </div>
          <div class="zujuan_item">
            <img
              src="@/assets/images/img_zhinengzujun.png"
              @click="toNavgator('/question-center/generatingPaperCenter', 1)"
            />
          </div>
          <div class="zujuan_item">
            <img
              src="@/assets/images/img_zujuanjilu.png"
              @click="toNavgator('/question-center/generatingPaperCenter', 2)"
            />
          </div>
        </div>
      </div>
      <!-- 学习助手 -->
      <div class="xuexi_zhushou">
        <div class="title">
          <img src="@/assets/images/icon_xuexizushou.png" alt="" />
          <span>学习助手</span>
        </div>
        <div class="zujuan_wrap">
          <div class="zujuan_item">
            <img
              src="@/assets/images/img_shoucangjia.png"
              @click="toNavgator('/question-center/learningAssitant', 0)"
              alt=""
            />
          </div>
          <div class="zujuan_item">
            <img
              src="@/assets/images/img_cuotiben.png"
              @click="toNavgator('/question-center/learningAssitant', 1)"
              alt=""
            />
          </div>
          <div class="zujuan_item">
            <img
              src="@/assets/images/img_xuexijilu.png"
              @click="toNavgator('/question-center/learningAssitant', 2)"
              alt=""
            />
          </div>
        </div>
      </div>
      <!-- 各科考点 -->
      <!-- <div class="subjects">
        <div class="title">
          <img src="@/assets/images/icon_gekekaodian.png" alt="" />
          <span>各科考点</span>
        </div>
        <div class="subject_con">
          <div class="subject_item">
            <img src="@/assets/images/img_yuwen.png" alt="" />
          </div>
          <div class="subject_item">
            <img src="@/assets/images/img_shuxue.png" alt="" />
          </div>
          <div class="subject_item">
            <img src="@/assets/images/img_yingyu.png" alt="" />
          </div>
          <div class="subject_item">
            <img src="@/assets/images/img_huaxue.png" alt="" />
          </div>
          <div class="subject_item">
            <img src="@/assets/images/img_shengwu.png" alt="" />
          </div>
          <div class="subject_item">
            <img src="@/assets/images/img_wuli.png" alt="" />
          </div>
          <div class="subject_item">
            <img src="@/assets/images/img_dili.png" alt="" />
          </div>
          <div class="subject_item">
            <img src="@/assets/images/img_lishi.png" alt="" />
          </div>
          <div class="subject_item">
            <img src="@/assets/images/img_zhengzhi.png" alt="" />
          </div>
          <div class="subject_item">
            <div class="additional">
              <div class="out_text">敬请期待</div>
              <div class="info">
                名学金榜将为您带来新兴学科考点名学金榜将为您带来新兴学科考点
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <!-- 历年真题 -->
      <div class="true_topic">
        <div class="title">
          <img src="@/assets/images/icon_linianzhenti_1.png" />
          <span>历年真题</span>
        </div>
        <div class="topics">
          <div class="topics_item" @click="toBestPaper(2021)">
            <img src="@/assets/images/icon_linianzhenti.png" />
            <span>2021年</span>
          </div>
          <div class="topics_item" @click="toBestPaper(2020)">
            <img src="@/assets/images/icon_linianzhenti.png" />
            <span>2020年</span>
          </div>
          <div class="topics_item" @click="toBestPaper(2019)">
            <img src="@/assets/images/icon_linianzhenti.png" />
            <span>2019年</span>
          </div>
          <div class="topics_item" @click="toBestPaper(2018)">
            <img src="@/assets/images/icon_linianzhenti.png" />
            <span>2018年</span>
          </div>
          <div class="topics_item" @click="toBestPaper(2017)">
            <img src="@/assets/images/icon_linianzhenti.png" />
            <span>2017年</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    toNavgator(path, tabActive) {
      this.$router.push({ path: path, query: { tabActive: tabActive } });
    },
    toBestPaper(year) {
      this.$router.push({
        path: "/question-center/bestPaper",
        query: { tabActive: 1, year: year },
      });
    },
  },
};
</script>
<style scoped>
.que_bank {
  padding: 20px;
}
.sort_container {
  display: flex;
}
.frist_wrap {
  margin-bottom: 40px;
}
.sort_container .img_item {
  margin-right: 16px;
  flex: 1;
}
.sort_container .img_item img {
  width: 100%;
  cursor: pointer;
}
.title {
  display: flex;
  align-items: center;
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffa400;
  line-height: 25px;
  margin-bottom: 16px;
}
.title img {
  margin-right: 8px;
}
.zujuan_wrap {
  display: flex;
}
.zujuan_wrap > div {
  margin-right: 16px;
  flex-grow: 1;
}
.zujuan_wrap > div > img {
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.que_center,
.frist_wrap,
.xuexi_zhushou,
.subjects {
  margin-bottom: 40px;
}
.subject_con {
  display: flex;
  flex-wrap: wrap;
}
.subject_con .subject_item {
  flex: 20%;
  margin-bottom: 16px;
  padding-right: 21px;
}
.subject_con .subject_item > img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.subject_con .subject_item:last-child {
  position: relative;
}
.subject_con .additional {
  width: 100%;
  background: #f2f2f2;
  padding: 20px 0 0 0;
  height: 100%;
}
.additional .out_text {
  font-size: 21px;
  font-family: SFNSDisplay;
  color: #c5c5c5;
  padding-left: 28px;
  margin-bottom: 8px;
  line-height: 24px;
}
.additional .info {
  font-size: 14px;
  font-family: AppleSystemUIFont;
  color: #c5c5c5;
  line-height: 17px;
  padding: 0 28px;
}
.topics {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topics .topics_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  flex: 1;
  color: #4a4a4a;
}
.topics .topics_item img {
  cursor: pointer;
}
.topics_item > span {
  margin-top: 10px;
}
.true_topic {
  margin-bottom: 58px;
}
</style>
