<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>
        <li class="l" @click="showAction"><a class="trans" :class="loginActionActiveClass">用户中心</a></li>
      </ul>
      <div class="login-action-box abs tc bge0 animated faster" :class="loginActionBoxShow">
        <button class="button login mt20 wh" @click="showLogin">登录</button>
        <div class="split-line mt10 auto"></div>
        <button class="button register mt10 wh" @click="showRegister">注册</button>
      </div>
    </div>
    <div class="login-box pct100" :class="loginBoxShow">
      <div class="main bgwh rel tl">
        <div class="closed" @click="closed">✖</div>
        <div class="w200 auto">账号登录</div>
        <div class="w200 h30 auto mt10">
          <input class="w200 h30" type="text" name="name" placeholder="账号">
        </div>
        <div class="w200 h30 auto mt20">
          <input class="w200 h30" type="password" name="password" placeholder="密码">
        </div>
        <div class="w200 auto">
          <button class="button login mt20 wh" @click="login">登录</button>
        </div>
        <div class="w200 auto mt20 tc">
          <span class="g6">还没有账号？</span><span class="other poi" @click="showRegister">立即注册</span>
        </div>
      </div>
    </div>
    <div class="register-box pct100" :class="registernBoxShow">
      <div class="main bgwh rel tl">
        <div class="closed" @click="closed">✖</div>
        <div class="w200 auto">注册账号</div>
        <div class="w200 h20 auto mt10">
          <input class="w200 h20" type="text" name="name" placeholder="输入6-20个字符数字或字母组成的账号">
        </div>
        <div class="w200 h20 auto mt10">
          <input class="w200 h20" type="password" name="password" placeholder="请输入游戏密码6-12字符">
        </div>
        <div class="w200 h20 auto mt10">
          <input class="w200 h20" type="password" name="password" placeholder="请再次输入密码">
        </div>
        <div class="w200 h20 auto mt10">
          <input class="w200 h20" type="text" name="name" placeholder="请输入真实姓名">
        </div>
        <div class="w200 h20 auto mt10">
          <input class="w200 h20" type="text" name="name" placeholder="请输入身份证号">
        </div>
        <div class="w200 h20 auto mt10">
          <input type="checkbox" name="private" id="private"><label for="private"> 已阅读并同意 </label> <a class="other poi" target="_blank" href="./doc/userAgreement.html">乐玩游戏协议</a>
        </div>
        <div class="w200 auto">
          <button class="button login mt10 wh" @click="register">注册</button>
        </div>
        <div class="w200 auto mt10 tc">
          <span class="g6">已经有账号？</span><span class="other poi" @click="showLogin">立即登录</span>
        </div>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeClass: 'home',
      loginActionBoxShow: 'dn',
      loginBoxShow: 'dn',
      registernBoxShow: 'dn',
      loginActionActiveClass: ''
    }
  },
  methods: {
    changePage: function (page) {
      // console.log(page)
      this.activeClass = page
      this.loginActionBoxShow = 'dn'
    },
    showAction: function (params) {
      if (this.loginActionBoxShow === 'dn') {
        this.loginActionActiveClass = 'router-link-exact-active';
        this.loginActionBoxShow = 'db slideInDown'
      } else {
        this.loginActionActiveClass = '';
        this.loginActionBoxShow = 'dn'
      }
    },
    showLogin: function () {
      // console.log(1);
      this.loginBoxShow = 'db';
      this.registernBoxShow = 'dn'
    },
    showRegister: function () {
      // console.log(1)
      this.loginBoxShow = 'dn';
      this.registernBoxShow = 'db'
    },
    login: function (params) {
      // console.log(1);
      alert('网络异常请重新登录')
    },
    register: function (params) {
      // console.log(1);
      alert('请点击同意用户协议')
    },
    closed: function (params) {
      // console.log(1);
      this.loginBoxShow = 'dn'
      this.registernBoxShow = 'dn'
    }
  },
  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;
  font-family: '宋体';
  body {
    margin: 0;
    padding: 0;
  }
}
a {
  text-decoration: none;
}
ul {
  padding: 0;
}
li {
  list-style-type: none;
}
#app {
  -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;
    }
  }
  .login-action-box {
    width: 258px;
    height: 137px;
    right: 50px;
    top: 80px;
    .button {
      width: 240px;
      height: 35px;
      border: 0;
    }
    .split-line {
      border-bottom: 1px solid #f5f5f5;
      width: 240px;
    }
    .login {
      background: #2a82e4;
    }
    .register {
      background: #00baad;
    }
  }
  .login-action-box::before {
    content: 'a';
    position: absolute;
    width: 10px;
    height: 10px;
    right: 20px;
    top: -5px;
    color: #e0e0e0;
    background: #e0e0e0;
    transform: rotate(45deg);
  }
}
.login-box {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .main {
    width: 260px;
    height: 258px;
    margin: 300px auto;
    padding-top: 20px;
    input {
      border: 1px solid #aaaaaa;
      text-indent: 1em;
    }
    .button {
      width: 200px;
      height: 40px;
      border: 0;
      background: #2a82e4;
    }
    .other {
      color: #78b7fd;
    }
  }
  .closed {
    position: absolute;
    right: -35px;
    top: 0;
    font-size: 36px;
    color: #ffffff;
  }
}
.register-box {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .main {
    width: 260px;
    height: 298px;
    margin: 300px auto;
    padding-top: 20px;
    input {
      border: 1px solid #aaaaaa;
      font-size: 12px;
    }
    .button {
      width: 200px;
      height: 40px;
      border: 0;
      background: #00baad;
    }
    .other {
      color: #78b7fd;
    }
  }
  .closed {
    position: absolute;
    right: -35px;
    top: 0;
    font-size: 36px;
    color: #ffffff;
  }
}
</style>
