<template>
  <div class="login-page">
    <div class="logo">
      <p> Access a Better Web , Anywhere .</p>
      <!-- <el-button type="primary" class="login-btn" @click="handleLogin2">{{$t('login.accountLogin')}}</el-button> -->
    </div>
    <div class="sign">
      <h2><span>{{$t('login.otherType')}}</span></h2>
      <other-account></other-account>
    </div>
  </div>
</template>

<script>
import { accountLoginMixin } from '@/mixins/login'
import Vue from 'vue'
import { Button } from 'element-ui'
import otherAccount from '@/components/login/otherAccount'

Vue.component(Button.name, Button)

export default {
  name: 'login',
  mixins: [accountLoginMixin],
  components: {
    otherAccount
  },
  data () {
    return {
    }
  },
  computed: {
  },
  methods: {
    handleLogin2 () {
      this.$router.push('/loginMee')
    }
  },
  mounted () {
    if (localStorage.getItem('user_id') && localStorage.getItem('token')) {
      this.$router.replace({ path: '/' })
    } else {
      this.checkLocalLogin()
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: px2rem(24);
    text-align: center;
    color: #ffffff;
    background: url(../../../assets/h5/bg.jpg) center/cover no-repeat;
}
.logo{
  position: absolute;
  // top: 50%;
  top: 40%;
  width: 100%;
  transform: translateY(-110%);
  background: url(../../../assets/h5/login-logo.png) center top/auto px2rem(248) no-repeat;
  padding-top: px2rem(280);
}
.login-btn{
  padding: px2rem(30) px2rem(125);
  margin-top: px2rem(72);
}
.sign{
  position: absolute;
  top: 60%;
  width: 100%;
  h2{
    position: relative;
    font-size: px2rem(27);
    margin: 0 px2rem(81) px2rem(81);
    &::before,&::after{
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: px2rem(219);
      height: 1px;
      background: rgba(255,255,255,0.2);
    }
    &::after{
      left: auto;
      right: 0;
    }
  }
}
</style>
