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">{{formSubject.firstSubject || '' }}<em v-for="item in formSubject.lastSubject">  {{item}} </em> </em></span>
        <span class="mr20">总分：<em  class="f-primary">{{ formSubject.score }}</em></span>
        <span class="mr20">位次：<em  class="f-primary">{{ formSubject.rank.lowestRank }}</em></span>
      </div>
    </div>
    <div class="recommend-wrap" >
      <div class="fx-row jc-between recommend ai-center" v-for="item in list">
        <div class="left">
          <p class="mb15 f20 bold f-666">{{ item.name }}</p>
          <!--          <p class="f12 ">2021年本科批控制线： <span class="f-primary">历史 466， 物理 434</span></p>-->
          <p class="f12 ">{{ item.tips}}</p>
        </div>
        <el-button type="primary" @click="onFillIn(item)">开始填写</el-button>
        <span v-if="item.recommand">重点推荐</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    formSubject: {
      type: Object,
      default: {}
    },
    list: {type: Array,
      default: []
    }
  },
  data() {
    return {
    }
  },
  methods:{
    onFillIn(item) {
      this.$emit("onFillIn", item);
    },
  }
}
</script>

<style scoped>
 .phase {
   width: 70%;
   margin: 0 auto;
 }
 em{
   font-weight: 400;
   font-style: normal;
 }
 .recommend{
   position: relative;
   padding: 16px ;
   margin-bottom: 15px;
   background: #f1f1f1;
 }
 .recommend > span{
   position: absolute;
   top: 0px;
   background: #42b983;
   transform: translate(0, -50%);
   padding: 4px;
   font-size: 12px;
   color: #fff;
 }
</style>