front/src/views/career/zhiyuan/components/phase.vue

<template>
  <div class="phase">
    <div class="pt40 pb40 fx-row jc-between">
      <div class="left f14">
        <span class="mr20">您的预估高考成绩</span>
        <span class="mr20">选科科目：<em  class="f-primary">{{form.firstSubject }}<em v-for="item in form.lastSubject">,{{item}}</em> </em></span>
        <span class="mr20">总分：<em  class="f-primary">{{ form.score }}</em></span>
        <a href="/zhiyuan/score" class="f-red">
          <i class="el-icon-edit-outline"></i>
          修改成绩
        </a>
      </div>
    </div>
    <div class="recommend-wrap" style="width: 80%">
      <div class="fx-row jc-between recommend ai-center">
        <div class="left">
          <p class="mb15 f20 bold f-666">普通类院校本科批</p>
          <p class="f12 ">2021年本科批控制线： <span class="f-primary">历史 466， 物理 434</span></p>
        </div>
        <el-button type="primary">开始</el-button>
      </div>
      <div class="fx-row jc-between recommend ai-center">
        <div class="left">
          <p class="mb15 f20 bold f-666">普通类院校高职专科批</p>
          <p class="f12 ">2021年高职专科批控制线：<span class="f-primary">历史 200， 物理 200</span></p>
        </div>
        <el-button type="primary" @click="$router.push('/zhiyuan/recommend')">开始</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.form = this.$route.query
    console.log(this.$route.query)
  },
  data() {
    return {
      form:{}
    }
  }
}
</script>

<style scoped>
 .phase {
  padding: 0 40px 0 100px;}
 em{
   font-weight: 400;
   font-style: normal;
 }
 .recommend{
   padding: 16px ;
   margin-bottom: 15px;
   background: #f1f1f1;

 }
</style>