<template>
  <!-- 首页 -->
  <div>
    <Top :active="active"></Top>
    <!-- 主体 -->
    <div class="home_wrap">
      <!-- banner -->
      <div class="banner">
        <el-carousel :interval="3000" arrow="never" loop height="590px">
          <el-carousel-item v-for="item in list" :key="item.index">
            <img :src="item.image" alt @click="toUrl(item)" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 使用流程 -->
      <div class="use_process">
        <div class="process_box">
          <!-- 标题 -->
          <div class="home_title">
            <h2>使用流程</h2>
            <p class="title_en">Use process</p>
          </div>
          <!-- 流程图 -->
          <div class="process_img layout justify_center align_center">
            <div class="process_img_l">
              <img src="@/assets/img/process_l.png" alt />
            </div>
            <div class="process_img_r">
              <img src="@/assets/img/process_r.png" alt />
            </div>
          </div>
        </div>
      </div>
      <!-- 教育新闻 -->
      <div class="educational_news">
        <div class="news_box">
          <!-- 标题 -->
          <div class="home_title clearfix">
            <h2>教育新闻</h2>
            <p class="title_en">Education news</p>
          </div>
          <!-- 详细新闻 -->
          <div class="news_det layout justify_center align_center flex_diection clearfix">
            <!-- 单个消息 -->
            <div
              class="news_single layout align_center justify"
              v-for="(item,index) in newsList"
              :key="index"
            >
              <!-- 日期 -->
              <div class="news_date" :class="{choice_date:index == 0}">
                <i class="det_date">{{item.date}}</i>
                <br />
                {{item.month}}
              </div>
              <!-- 消息 -->
              <div class="news_infor clearfix" @click="toNewsList(item)">
                <p
                  class="news_info_con news_info_title"
                  :class="{choice_news:item.newsId == 1,choice_content:index == 0}"
                >{{item.name}}</p>
                <p class="news_info_con news_info_msg">{{item.description}}</p>
              </div>
            </div>
            <!-- 全部按钮 -->
            <div class="check_all" @click="allNews()">查看全部</div>
          </div>
        </div>
      </div>
      <!-- 名校展示 -->
      <div class="school_show">
        <div class="show_box clearfix">
          <!-- 标题 -->
          <div class="home_title">
            <h2>名校展示</h2>
            <p class="title_en">Exhibition of elite schools</p>
          </div>
          <!-- 学校 -->
          <div class="school_msg layout flex_row clearfix">
            <dl class="school_single clearfix" v-for="item in schooList" :key="item.id">
              <dt class="school_dt" @mouseenter="showDetail(item)" @mouseleave="closeDetail()">
                <img :src="item.images" alt />
                <div class="school_detail_show" v-show="isSchool == item.id">
                  <div class="to_university_detail" @click="toUniversity(item)">查看详情 ></div>
                </div>
              </dt>
              <dd class="school_dd clearfix">
                <h3>{{item.name}}</h3>
                <!-- 学校简介 -->
                <div class="school_profile">{{item.description.replace(/\s*/g,"")}}</div>
              </dd>
            </dl>
          </div>
          <div class="check_all" @click="allUniversity()">查看全部</div>
        </div>
      </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>
<script>
import Top from "../common/Top";
import Bottom from "../common/Bottom2";
import { post } from "@/api/http";
export default {
  data() {
    return {
      active: 0,
      //   轮播图
      list: [],
      // 新闻
      newsList: [],
      schooList: [],
      newsId: "",
      url: "",
      isSchool: -1
    };
  },
  methods: {
    showDetail(item) {
      this.isSchool = item.id;
    },
    closeDetail() {
      this.isSchool = "";
    },
    // 轮播图
    getCarouselList() {
      let url = "/api/index/getCarouselList/";
      post(url).then(res => {
        this.list = res.carousel_list;
      });
    },
    // 轮播图链接跳转
    toUrl(item) {
      this.url = item.href;
      if (this.url) {
        window.open(this.url, "_blank");
      }
    },
    // 教育新闻
    getNewsList() {
      let url = "/api/index/getNewsList/";
      post(url).then(res => {
        this.newsList = res.news_list;
        this.newsId = this.newsList[0].id;
      });
    },
    toNewsList(item) {
      this.$router.push({ path: "/NewsDetail", query: { id: item.id } });
    },
    // 全部新闻
    allNews() {
      if(this.newsList.length>0){
        this.$router.push({ path: "/NewsDetail", query: { id: this.newsId } });
      }
    },
    //名校展示
    getFamousList() {
      let url = "/api/index/getFamousList/";
      post(url).then(res => {
        this.schooList = res.famous_list;
      });
    },
    // 全部高校
    allUniversity() {
      this.$router.push({
        path: "/University"
      });
    },
    // 高校详情
    toUniversity(item) {
      this.$router.push({
        path: "/UniversityIntroduc",
        query: { id: item.id }
      });
    }
  },
  components: {
    Top,
    Bottom
  },
  mounted() {
    let test = this.$route.query.test;
    if (localStorage.getItem("token")) {
      this.getCarouselList();
      this.getNewsList();
      this.getFamousList();
    }else{
      this.$router.push({ path: "/login/"+test });
    }
  }
};
</script>
<style scoped>
.home_wrap {
  width: 100%;
  background-color: #f2f5fa;
}

/* 标题 */
.home_title {
  padding-top: 44px;
}

.home_title h2 {
  font-size: 32px;
  color: #0d1e2e;
  line-height: 47px;
}

.title_en {
  font-size: 16px;
  color: #bdc4ce;
}

/* 查看全部按钮 */
.check_all {
  width: 230px;
  height: 50px;
  border: 1px solid #409eff;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: #409eff;
  border-radius: 3px;
  margin: 42px auto 50px;
}

/* banner */
.banner {
  width: 100%;
  height: 590px;
}

.banner img {
  width: 100%;
  height: 100%;
}

/* 使用流程 */
.use_process {
  width: 100%;
  background: #fff;
}

.process_box {
  width: 1200px;
  height: 549px;
  margin: 0 auto;
}

/* 流程图 */
.process_img {
  margin-top: 45px;
}

.process_img_l {
  margin-right: 88px;
  margin-top: 11px;
}

/* 教育新闻 */
.educational_news {
  width: 100%;
  background-color: #f2f5fa;
}

.news_box {
  width: 1200px;
  margin: 0 auto;
}

/* 详细新闻 */
.news_det {
  margin-top: 54px;
}

/* 日期 */
.news_date {
  width: 60px;
  height: 60px;
  background: #f44a5e;
  margin-right: 50px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  margin-top: -5px;
}

/* 当天日期 */
.det_date {
  font-size: 24px;
  display: inline-block;
  margin-top: 4px;
  font-weight: bold;
}

/* 单个消息 */
.news_single {
  margin-bottom: 12px;
}

.news_infor {
  width: 882px;
  height: 70px;
  border-bottom: 1px solid #bdc4ce;
}

/* 新闻内容 */
.news_info_con {
  width: 486px;
  margin-bottom: 5px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 新闻标题 */
.news_info_title {
  font-size: 16px;
  line-height: 21px;
  color: #34485e;
}
.news_single:hover .news_date {
  background-color: #409eff;
}
.news_single:hover .news_info_title {
  color: #409eff;
}
/* 新闻简介 */
.news_info_msg {
  font-size: 14px;
  color: #8c9198;
}

/* 选中 */
.choice_news {
  color: #409eff;
}
.choice_content {
  /* color: #409eff; */
}
/* 名校展示 */
.school_show {
  width: 100%;
  background-color: #fff;
}

.show_box {
  width: 1200px;
  margin: 0 auto;
}

.school_msg {
  margin-top: 80px;
}

/* 单个学校 */

.school_single {
  width: 259px;
  height: 345px;
  margin-right: 55px;
}

/* 学校图片 */
.school_dt {
  width: 259px;
  height: 210px;
  position: relative;
}
.school_detail_show {
  position: absolute;
  width: 259px;
  height: 210px;
  background: rgba(68, 137, 245, 0.5);
  top: 0;
  left: 0;
  line-height: 210px;
}
.to_university_detail {
  width: 113px;
  height: 34px;
  background: rgba(68, 137, 245, 1);
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
  margin: 0 auto;
  display: inline-block;
}
.school_dt img {
  width: 100%;
  height: 100%;
  border-radius: 3px;
}

/* 学校简介 */
.school_dd {
  width: 259px;
  height: 135px;
}

.school_dd h3 {
  font-size: 16px;
  padding-top: 12px;
  color: #34485e;
  font-weight: bold;
}

.school_profile {
  background-color: #fff;
  font-size: 14px;
  color: #8c9198;
  text-align: left;
  width: 90%;
  height: 58px;
  margin: 5px auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
  /* autoprefixer: on */
}

/* 划过时效果 */
.school_single:hover {
  box-shadow: 0px 4px 18px rgba(42, 42, 42, 0.06);
  transform: translateY(-37px);
  transition: all 0.5s ease;
}
</style>