<template>
  <div id="app">
    <div id="nav" class="abs" :class="activeClass">
      <img class="logo l mt10" v-if="activeClass=='home'" src="./assets/logo.png" alt="logo" />
      <img class="logo l mt10" v-else src="./assets/logo2.png" alt="logo" />
      <ul class="list r">
        <li class="l" @click="changePage('home')"><router-link class="trans" to="/">首页</router-link></li>
        <li class="l" @click="changePage('about')"><router-link class="trans" to="/business">商务合作</router-link></li>
        <li class="l" @click="changePage('about')"><router-link class="trans" to="/about">关于我们</router-link></li>
      </ul>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeClass: 'home'
    }
  },
  methods: {
    changePage: function (page) {
      // console.log(page)
      this.activeClass = page
    }
  },
  created () {
    console.log(222, window.location.hash)
    let hashValue = window.location.hash.replace('#/', '')
    if (hashValue === '') {
      this.activeClass = 'home'
    } else {
      this.activeClass = 'about'
    }
  }
}
</script>

<style lang="scss">
html{
  font-size: 14px;
  body {
    margin: 0;
    padding: 0;
  }
}
a {
  text-decoration: none;
}
ul {
  padding: 0;
}
li {
  list-style-type: none;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  min-width: 1380px;
}
#nav {
  width: 100%;
  min-width: 1380px;
  height: 100px;
  z-index: 10;
  a {
    font-size: 18px;
    &.router-link-exact-active {
      font-size: 20px;
      font-weight: bold;
    }
  }
  &.home {
    a {
      color: rgb(238,238,238);
      &.router-link-exact-active {
        color: rgb(255,255,255);
      }
    }
  }
  &.about {
    background: rgb(255,255,255);
    a {
      color: rgb(153,153,153);
      &.router-link-exact-active {
        color: rgb(51,51,51);
      }
    }
  }
  .logo {
    display: block;
    margin-top: 20px;
    height: 60px;
    margin-left: 54px;
  }
  .list {
    margin-right: 54px;
    margin-top: 38px;
    li {
      margin-left: 50px;
    }
  }
}
</style>
