<template>
  <div
    class="slider"
    :class="{
      'ts-slider': navigation && tempRoute.meta && !tempRoute.meta.details,
      bg_fff: tempRoute.meta && tempRoute.meta.details
    }"
  >
    <div class="slider-body">
      <div class="slider-icon" v-show="tempRoute.meta && !tempRoute.meta.details">
        <template v-if="navigation">
          <!-- <el-image
          class="logo-new-1"
          src="https://zws-imgs-pub.ezijing.com/static/public/2a5dca328ca63abcf1c8496180adc485.png"
          ></el-image> -->
          <el-image class="logo-new-2" :src="require('@/assets/images/logofff-2.png')" style="width:46px;heihgt:40px;"></el-image>
          <el-image class="logo-new-3" :src="require('@/assets/images/logoend.png')" style="width:117px;heihgt:40px;margin-left:40px;"></el-image>
        </template>
        <template v-else>
          <el-image class="logo-new-2" :src="require('@/assets/images/logofff-2-2.png')" style="width:68px;heihgt:60px;"></el-image>
          <el-image class="logo-new-3" :src="require('@/assets/images/logofff-3.png')" style="width:176px;heihgt:60px;margin-left:40px;"></el-image>
        </template>
        <!-- <div class="logo-new-3"></div> -->
      </div>
      <div class="slider-icon" v-show="tempRoute.meta && tempRoute.meta.details">
        <img src="../../../assets/images/logofff-2.png" />
        <img src="../../../assets/images/logoend.png" />
      </div>
      <div class="slider-banner">
        <div v-for="item in navList" :key="item.path" class="tab-item">
          <div class="app-link" :class="{ 'router-link-active': $route.path.includes(item.path) }">
            <router-link tag="span" :to="item.path" class="tab-link">{{ item.title }}</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dyHeight } from '@/pages/homepage/mixins/index.js'
export default {
  mixins: [dyHeight],
  data() {
    return {
      tempRoute: {},
      navList: [
        { title: '首页', path: '/index' },
        { title: '专业设置', path: '/profession' },
        { title: '报名申请', path: '/my' },
        { title: '最新动态', path: '/news' },
        { title: '联系我们', path: '/contact' }
      ]
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.infoRouer()
      }
    }
  },
  methods: {
    infoRouer() {
      this.tempRoute = Object.assign({}, this.$route)
    }
  }
}
</script>

<style lang="scss" scoped>
.logo-new-2 {
  width: 217px;
}
// .logo-new-3 {
//   width: 176px;
//   height: 60px;
//   position: relative;
//   top: -60px;
//   left: 170px;
//   background-image: url(../../../assets/images/logofff-3.png);
// }
.logo-new-1 {
  width: 221px;
}
.slider {
  height: 80px;
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.3);
  .slider-body {
    width: 80%;
    display: flex;
    margin: 0 auto;
    height: 100%;
    justify-content: space-between;
    .slider-icon {
      flex: 1;
      white-space: nowrap;
      img {
        margin-top: 10px;
        margin-right: 20px;
      }
      .el-image {
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .slider-banner {
      display: flex;
      flex: 2;
      .tab-item {
        flex: 1;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        .app-link {
          color: #fff;
          &.router-link-active .tab-link {
            color:#AF1818 !important;
          }
        }

        .tab-link {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          cursor: pointer;
        }
      }
    }
  }
}
.ts-slider {
  height: 60px;
  background: #fff;
  .slider-body {
    .slider-banner {
      .tab-item {
        .tab-link {
          color: #222222;
        }
      }
    }
  }
}
.bg_fff {
  background: #fff;
  .slider-body {
    .slider-banner {
      .tab-item {
        .tab-link {
          color: #222222;
        }
      }
    }
  }
}
</style>
