front/src/views/career/plan/UniversitiesColleges.vue

<template>
  <div ref="UniversitiesColleges" class="app-container" >
    <el-card :style="{'background-image':backimg}" style="padding:30px;margin:10px 0;background-color:white;background-repeat: no-repeat;background-position: bottom right;">
      <p style="color:#A6A6A6;font-size:24px;font-weight:bold;">UNIVERSITIES AND COLLECGES</p>
      <p style="color:#414141;font-size:24px;font-weight:bold;">院校库</p>
      <hr class="layui-bg-orange" style="width:40px;height:4px;margin-top:10px;" />
    </el-card>
    <el-card style="background-color: #ffffff;font-size: 14px;padding:5px;">
      <div slot="header" class="radioInput" >
        <span class="radioTitle" :class="filter_type == 'all'?'active' : ''" @click="filter_type= 'all'">全部院校</span>
        <span class="radioTitle" :class="filter_type == 'top'?'active' : ''" @click="filter_type= 'top'">大学排名</span>
      </div>
      <keep-alive>
        <all-university v-if="filter_type == 'all'"></all-university>
      </keep-alive>
      <keep-alive>
        <rank-university v-if="filter_type == 'top'"></rank-university>
      </keep-alive>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import AllUniversity from '@/views/career/plan/compoents/AllUniversity';
import RankUniversity from '@/views/career/plan/compoents/RankUniversity';
export default {
  name: "UniversitiesColleges",
  components:{
    AllUniversity,
    RankUniversity
  },
  data() {
    return {
      backimg: 'url(' + require('@/assets/images/career/icon_colleges.png') + ')',
      filter_type:'all'
    }
  },
  computed: {
    ...mapState({ theme: state => state.settings.theme }),
  },
  watch: {
    theme: {
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.$refs.UniversitiesColleges.style.setProperty('--themeColor', val)
        })
      }
    },
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.layui-bg-orange {
  background-color: var(--themeColor);
  margin-left: 0;
}
.radioInput{
  background-color: #ffffff;
  padding:5px;
  padding-left: 30px;
  .radioTitle{
    cursor: pointer;
    display: inline-block;
    width: 80px;
    font-size: 14px;
    padding: 5px 10px ;
    text-align: center;
    &.active{
      color: #fff;
      border-radius: 4px ;
      border: none;
      font-weight: 400;
      background: #42b983;
    }
  }
}
</style>