front/src/views/career/components/UniversityDetail.vue

<template>
    <div ref="universityDetail" id="universityDetail" style="padding:24px 8%;background-color:#f7f7f7;">
      <el-card style="color: #5E5E5E;" ref="navBar">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'LibraryCollege'}">校园库</el-breadcrumb-item>
          <el-breadcrumb-item>校院详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
      <el-row ref="header" style="margin-top: 10px;background-color: #F0F3FC;height:260px;" v-if="universityDetails.baseInfo">
        <el-col :span="5"  class="headerImg">
            <el-image class="img" :src="universityDetails.baseInfo.logo" style="text-align: center">
              <h1 slot="error">{{universityDetails.baseInfo.name}}</h1>
            </el-image>
        </el-col>
        <el-col :span="19">
          <el-row style="padding:20px 0 30px 30px;">
            <el-col :span="20">
              <div class="baseInfo">
                <span>院校属性：</span>
                <p></p>
              </div>
              <div class="baseInfo">
                <span>网址：</span>
                <el-link :underline="false" style="color:#1154FF">{{universityDetails.baseInfo.url}}</el-link>
              </div>
              <div class="baseInfo">
                <span>电话：</span>
                <span :underline="false">
                  {{universityDetails.baseInfo.tel}}
                </span>
              </div>
              <div class="baseInfo">
                <span>院校隶属：</span>
                <span :underline="false">
                  {{universityDetails.baseInfo.managerType}}
                </span>
              </div>
              <div class="baseInfo">
                <span>所在地：</span>
                <span :underline="false">
                  {{universityDetails.baseInfo.location}}
                </span>
              </div>
              <div class="baseInfo">
                <span>院校类型：</span>
                <span :underline="false">
                  {{universityDetails.baseInfo.type}}
                </span>
              </div>
            </el-col>
            <el-col :span="4" style="text-align: right;">
              <div class="headerText">NO:{{universityDetails.baseInfo.code}}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="padding:20px 0px;" v-if="universityDetails.overview">
        <el-col :span="5" class="detailNaver">
          <div >院校概况</div>
          <div >院系设置</div>
          <div >招生简章</div>
          <div >录取分数线</div>
          <div >招生计划</div>
          <div >VR校园</div>
          <div @click="activeSelectNaver('1')" :class="{'activeNaver':selectNaver==='1','noActiveNaver':selectNaver==='2' || selectNaver==='3' }">学校状况</div>
          <div @click="activeSelectNaver('2')" :class="{'activeNaver':selectNaver==='2','noActiveNaver':selectNaver==='1' || selectNaver==='3' }">招生简章</div>
          <div @click="activeSelectNaver('3')" :class="{'activeNaver':selectNaver==='3','noActiveNaver':selectNaver==='2' || selectNaver==='1' }">开设专业</div>
        </el-col>
        <el-col :span="19" style="padding:0px 20px;">
        <div ref="a1" style="background-color: #ffffff;padding:20px 20px 0px 0px;">
         <div style="display: flex;justify-content: space-between">
           <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:10px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">学校概况</span>
           <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">SCHOOL SURVEY</span>
         </div>
          <!--第一个内容区域-->
          <div style="padding:30px;">
            <div v-html="universityDetails.overview"></div>
          </div>
        </div>
          <!--第二个内容区域-->
          <div ref="a2" style="background-color: #ffffff;padding:20px 20px 0px 0px;margin-top: 30px;">
            <div style="display: flex;justify-content: space-between">
              <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:10px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">招生简章</span>
              <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">GENERAL RULES</span>
            </div>
            <div style="padding:30px;">
              <div class="generalTitle" v-for="(item,index) in universityDetails.zsjzs" :key="item.title">
                <p :style="{'color':activeGeneralTitle===index?theme:'#000'}" @click="activeGeneralTitle=index" >·{{item.title}}</p>
              </div>
              <div style="margin-top:50px;" v-html="universityDetails.zsjzs[activeGeneralTitle].remark"></div>
            </div>
          </div>
          <!--第三个内容区域-->
          <div ref="a3" style="background-color: #ffffff;padding:20px 20px 0px 0px;margin-top: 30px;">
            <div style="display: flex;justify-content: space-between">
              <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:10px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">开设专业</span>
              <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">MARJOR</span>
            </div>
            <div style="padding:30px;">
              <el-row :gutter="30" style="font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;">
                <el-col :span="12" v-for="(item,index) in universityDetails.marjors" :key="item.name+index">
                  <div style="padding: 8px;">
                    <h5 style="margin:0 0 8px">{{item.name}}（{{item.children.length}}个）</h5>
                    <span style="padding:4px;display: inline-block" v-for="val in item.children" :key="val">{{val}}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {selectUniversityDetail} from '@/api/webApi/career-course'
    export default {
      name: "UniversityDetail",
      data(){
        return {
          universityId:'',
          universityDetails:{},
          selectNaver:'1',
          activeGeneralTitle:0
        }
      },
      computed:{
        ...mapState({theme: state => state.settings.theme}),
      },
       watch:{
         theme:{
           immediate:true,
           handler(val){
             this.$nextTick(()=>{
               this.$refs.universityDetail.style.setProperty('--themeColor', val)
             })
           }
         },
       '$route':{
         immediate:true,
         handler(val){
           this.universityId= val.query.id
           this.getUniversityDetail()
         }
       }
     },
      methods:{
        activeSelectNaver(type){
          this.selectNaver=type
          const navBarHeight=this.$refs.navBar.$el.offsetHeight
          const headerHeight=this.$refs.header.$el.offsetHeight
          const a1Height=this.$refs.a1.offsetHeight
          const a2Height=this.$refs.a2.offsetHeight
          const a3Height=this.$refs.a3.offsetHeight
          if(type==='1'){
            document.documentElement.scrollTop=navBarHeight+headerHeight+50
          }else if(type==='2'){
            document.documentElement.scrollTop=navBarHeight+headerHeight+a1Height+50+20
          }else if(type==='3'){
            document.documentElement.scrollTop=navBarHeight+headerHeight+a1Height+a2Height+50+20+20
          }
        },
        getUniversityDetail(){
          if(this.universityId){
            const params={
              universityId:this.universityId
            }
            selectUniversityDetail(params).then(res=>{
              this.universityDetails=res.data
            })
          }

        }
      }
    }
</script>

<style lang="scss" scoped>
  #universityDetail{
    .title{
     &:hover{
       color:var(--themeColor);
     }
    }
    .baseInfo{
      margin-top: 15px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #414141;
      line-height: 20px;
    }
    .headerImg{
      background-color: var(--themeColor);
      height:100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .img{
        width:60%;
        border-radius: 50%;
      }
    }
    .headerText{
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #FFFFFF;
      padding: 10px;
      background-color: var(--themeColor);
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;
    }
    .detailNaver{
      div{
        padding:20px;
        &:hover{
          background-color: #F0F3FC;
          border-top: 4px solid var(--themeColor);
        }
      }
    }
    .generalTitle{
      padding: 8px 0;
      cursor: pointer;
      font-family: PingFangSC-Regular, PingFang SC,Helvetica,serif;
      font-weight: 400;
      /*color:var(--themeColor);*/
  }
  }
  .noActiveNaver{
    background-color: #f7f7f7;
    border-top: 4px solid transparent;
  }
  .activeNaver{
    background-color: #F0F3FC;
    border-top: 4px solid var(--themeColor);
  }


</style>