Major.vue 5.9 KB
<template>
  <!-- 专业查询 -->
  <div class="major_search clearfix">
    <div class="major_box clearfix">
      <!-- 搜索框 -->
      <div class="search_input clearfix layout flex_row align_center">
        <input type="text" placeholder="专业查询" v-model="major_name" @keyup.enter="search()"/>
        <div class="search_tips" @click="search()">搜索</div>
      </div>
      <!-- 热门专业 -->
      <div class="hot_major clearfix ">
        <div class="hot_major_title">热门专业:</div>
        <!-- 专业名称 -->
        <div
          class="hot_major_name"
          v-for="item in hotList"
          :key="item.id"
          @click="hotMajor(item)"
        >{{item.name}}</div>
      </div>
      <!-- 专业分类 -->
      <div class="major_category clearfix">
        <div
          class="cate_name"
          :class="{choice_color:isChoice == index}"
          @click="choiced(index)"
          v-for="(item,index) in cateList"
          :key="index"
        >{{item}}</div>
      </div>
      <!-- 本科专业 -->
      <div class="undergraduate_major clearfix" v-show="isUnder">
        <div class="under_major_box">
          <div
            class="under_major_det layout flex_row align_center"
            v-for="item in underList"
            :key="item.id"
          >
            <!-- 左侧 -->
            <div class="major_det_l clearfix layout flex_row align_left">
              <!-- 图标 -->
              <div class="major_icon" style="margin-left:30px">
                <img :src="item.icon" alt />
              </div>
              <!-- 类名 -->
              <div class="major_l_name" @click="majorDetail(item.id)">{{item.name}}</div>
            </div>
            <!-- 右侧 -->
            <div class="major_det_r clearfix">
              <div
                class="major_det_name"
                v-for="secondItem in item.child"
                :key="secondItem.id"
                @click="secondMajorDetail(secondItem.id)"
              >{{secondItem.name}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 专科专业 -->
      <div class="undergraduate_major clearfix" v-show="!isUnder">
        <div class="under_major_box">
          <div
            class="under_major_det layout flex_row align_center"
            v-for="item in specialtyList"
            :key="item.id"
          >
            <!-- 左侧 -->
            <div class="major_det_l clearfix layout flex_row align_left">
              <!-- 图标 -->
              <div class="major_icon">
                <img :src="item.icon" alt />
              </div>
              <!-- 类名 -->
              <div class="major_l_name" @click="majorDetail(item.id)">{{item.name}}</div>
            </div>
            <!-- 右侧 -->
            <div class="major_det_r clearfix">
              <div
                class="major_det_name"
                v-for="secondItem in item.child"
                :key="secondItem.id"
                @click="secondMajorDetail(secondItem.id)"
              >{{secondItem.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    return {
      major_name: "",
      cateList: ["本科专业", "专科专业"],
      isChoice: 0,
      isUnder: true,
      // 本科列表
      underList: [],
      // 专科列表
      specialtyList: [],
      // 热门专业列表
      hotList: []
    };
  },
  methods: {
    // 热门专业
    hotMajor(item) {
      this.$router.push({ path: "/HotMajor", query: { id: item.id } });
    },
    // 搜索
    search() {
      
        this.$router.push({
          path: "/MajorSearch",
          query: { keyWord: this.major_name }
        });
      
    },
    // 本/专科专业
    choiced(index) {
      this.isChoice = index;
      if (index == 0) {
        this.isUnder = true;
      } else {
        this.isUnder = false;
      }
    },
    // 专业列表
    getMajorList() {
      let url = "/api/major/getMajorList/";
      post(url).then(res => {
        // 本科
        this.underList = res.b_list;
        // 专科
        this.specialtyList = res.z_list;
      });
    },
    // 热门专业
    getHotList() {
      let url = "/api/major/getHotList/";
      post(url).then(res => {
        this.hotList = res.hot_list;
      });
    },
    // 一级专业详情
    majorDetail(id) {
      this.$router.push({ path: "/MajorDetail", query: { id: id } });
    },
    // 二级专业详情
    secondMajorDetail(secondId) {
      this.$router.push({
        path: "/SecondMajorDetail",
        query: { secondId: secondId }
      });
    }
  },
  mounted() {
    this.getMajorList();
    this.getHotList();
  }
};
</script>
<style scoped>
@import '../../../../style/schoolFirstPage.css';


/* 专业类别 */
.major_category {
  width: 228px;
  height: 44px;
  background: #fff;
  border-radius: 3px;
  margin: 48px auto 24px;
}
.cate_name {
  width: 50%;
  height: 44px;
  font-size: 18px;
  color: #5b5e63;
  line-height: 44px;
  float: left;
  border-radius: 3px;
}
.choice_color {
  background-color: #409eff;
  color: #fff;
}

/* 本科专业 */
.undergraduate_major {
  width: 1200px;
  background-color: #fff;
}
.under_major_box {
  padding: 0 24px;
}
/* 具体分类 */
.under_major_det {
  padding: 22px 0;
  border-bottom: 1px solid #eee;
}

/* 左侧 */
.major_det_l {
  width: 180px;
}
/* 图标 */
.major_icon {
  width: 43px;
  height: 43px;
  margin-right: 18px;
}
.major_icon img {
  width: 100%;
  height: 100%;
  display: block;
}
/* 类名 */
.major_l_name {
  color: #34485e;
  font-size: 16px;
  line-height: 43px;
}
.major_l_name:hover{
  color: #409eff;
}
/* 右侧 */
.major_det_r {
  padding: 12px 12px 12px 0;
  border-left: 1px solid #eee;
  width: 972px;
}
/* 具体专业 */
.major_det_name {
  font-size: 14px;
  color: #8c9198;
  margin-left: 24px;
  float: left;
}
.major_det_name:hover {
  color: #409eff;
}
</style>