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

<template>
  <div ref="universityDetail" id="universityDetail" style="padding:0 5%">
    <el-row :gutter="10" class="mt20 mb30">
      <el-col :span="12" class="fx-row ai-center">
        <div class="mr30">
          <img width="72px" height="72px" src="https://img1.youzy.cn/content/media/thumbs/p00189999.jpeg" alt=""/>
        </div>
        <div>
          <span class="f28 ">北京大学</span>
          <div class="mt5">
            <el-tag class="mr5" size="mini">985</el-tag>
            <el-tag class="mr5" size="mini">211</el-tag>
            <el-tag class="mr5" size="mini">保研</el-tag>
          </div>
          <span class="f14 f-666">北京 / 综合 / 公办 / 教育部</span>
        </div>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-button plain="">返回</el-button>
      </el-col>
    </el-row>
    <div>
        <div class="tabs-wrap mb20">
          <span class="tabs-item" @click="tabActive = 0" :class="{'bg-primary':tabActive == 0}">院校概况</span>
          <span class="tabs-item" @click="tabActive = 1" :class="{'bg-primary':tabActive == 1}">招生简章</span>
          <span class="tabs-item" @click="tabActive = 2" :class="{'bg-primary':tabActive == 2}">院校风采</span>
        </div>
        <div v-if="tabActive == 0">
          <el-row :gutter="10" class="fx-row">
            <el-col :span="8"> <img src="https://i6.youzy.cn/basiclib/college/images/10003-647784f7.jpg" width="400px" alt=""></el-col>
            <el-col :span="24">
              <div class="f14 f-666 text-center fx-row">
                <el-col :span="24"  v-for="item  in 8" >
                  <img width="50px" src="https://pv4y-pc.youzy.cn/static/img/icon_shijian@2x.8463f33f.png" alt="">
                  <p class="mt10">1911年</p>
                </el-col>
              </div>
              <div class="mt10  pl10 f14 " style="line-height: 1.7;text-align: justify;">
                清华大学的前身清华学堂始建于1911年，1912年更名为清华学校。1928年更名为国立清华大学。1937年抗日战争全面爆发后南迁长沙，与北京大学、南开大学组建国立长沙临时大学，1938年迁至昆明改名为国立西南联合大学。1946年迁回清华园，设有文、法、理、工、农等5个学院、26个系。
                1952年全国高等学校院系调整后，清华大学成为一所多科性工业大学，重点为国家培养工程技术人才，被誉为“红色工程师...
              </div>
            </el-col>
          </el-row>
          <div class="mt20">
            <p class="format-tit">特色专业</p>
          </div>
          <div class="mt20">
            <p class="format-tit">重点学科</p>
          </div>
          <div class="mt20">
            <p class="format-tit">双一流学科</p>
          </div>
          <div class="mt20">
            <p class="format-tit">院系设置</p>
          </div>
        </div>
        <!--  招生简章-->
        <enroll-list v-if="tabActive == 1"></enroll-list>
        <!--  院校风采-->
        <university-style v-if="tabActive == 2"></university-style>
    </div>

  </div>
</template>

<script>
import EnrollList from './compoents/EnrollList'
import UniversityStyle from './compoents/UniversityStyle'
export default {
  name: 'UniversityDetail',
  components: {EnrollList,UniversityStyle},
  data() {
    return {
      tabActive: 0
    }
  },
  computed: {},
  watch: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
#universityDetail {
  .tabs-wrap {
    border-bottom: 1px solid #42b983;
    height: 40px;
    .tabs-item {
      cursor: pointer;
      padding: 0 33px;
      border-radius: 4px 4px 0 0;
      display: inline-block;
      line-height: 40px;

      &:hover {
        color: #47C6A2;
      }

      &.bg-primary {
        background: #47C6A2;
        color: white;
      }
    }
  }
  .format-tit{
    border-left: 4px solid #47C6A2;
    padding-left: 10px;
    margin-bottom: 20px;
    font-size: 20px;
  }
}
</style>