<!--
  @description: 登录失败页面
  @author: 肖文龙
  @routerPath: /login
  @date:  2019/11/15-23:33
-->
<template>
  <div class="login">
    <!-- navbar 头部导航-->
    <headerBar class="headerBar" />
    <section class="login_view">
      <div class="login_view-content clearfix">
        <!-- 左边内容 -->
        <div class="login_left fl" />
        <!-- 右边内容 -->
        <div class="login_right fr">
          <div class="login_right_content">
            <el-row class="tabbar">
              <el-col
                v-for="(item, index) in tabbarList"
                :key="index"
                :span="24 / tabbarList.length"
                class="pointer"
              >
                <div
                  :class="{ selected: loginType === item.typeCode }"
                  class="bar"
                  @mouseenter="loginType = item.typeCode"
                >
                  {{ item.typename }}
                </div>
              </el-col>
            </el-row>
            <div class="user_layout_login">
              <div>
                <el-form
                  ref="loginForm"
                  :model="loginForm"
                  :rules="ruleForm"
                >
                  <el-form-item>
                    <p class="loginError_text">
                      您暂时没有招标采购的权限，请自行注册申请或致电
                      <el-link type="primary">
                        010-65896919/13/32
                      </el-link>
                    </p>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      :loading="loading"
                      style="width:calc(50% - 10px)"
                      class="btn"
                      @click="backHomepage()"
                    >
                      返回首页
                    </el-button>
                    <el-button
                      style="width:calc(50% - 10px)"
                      :loading="loading"
                      class="btn"
                      type="primary"
                      @click="registerFn()"
                    >
                      注 册
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'LoginError',
  data() {
    return {
      loginType: '00', // 索引
      // tabBar标题
      tabbarList: [
        { typename: '温馨提示', typeCode: '00' }
      ]
    }
  },
  methods: {
    // 返回首页
    backHomepage() {
      this.$store.dispatch('backHomepage')
    },
    // 跳转到注册
    registerFn() {
      this.$router.push('/registerType')
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@assets/style/common/public.less";
.login {
  .headerBar {
    display: none;
  }
  .login_view {
    width: 100%;
    min-height: 100%;
    position: relative;
    .login_right {
      .login_right_content {
        .tabbar {
          font-size: 18px;
          .bar {
            color: #131217;
            text-align: center;
            font-weight: 400;
            position: relative;
            &:after {
              content: " ";
              width: 100%;
              height: 2px;
              display: block;
              bottom: -19px;
              left: 0px;
              position: absolute;
              background: #eeeeee;
            }
            &.selected {
              color: @hyacinthine;
            }
            &.selected:after {
              background: @hyacinthine;
            }
          }
        }
      }
    }
  }
}
.web,
.tool {
  .login {
    height: 100vh;
    .login_view {
      background: url("~@/assets/img/common/login/loginbg.png") no-repeat
      center/100% 100%;
      padding-top: calc((100vh - 660px) / 2);
      .login_view-content {
        width: 962px;
        background: #fff;
        margin: 0 auto;
        .login_left {
          width: 387px;
          height: 561px;
          background: url("~@/assets/img/common/login/login.png") no-repeat
            center/ 100% 100%;
        }
        .login_right {
          width: calc(100% - 387px);
          padding: 79px 0;
          .login_right_content {
            width: 365px;
            margin: 0 auto;
            .loginError_text{
              padding: 100px 0px;
              font-size:18px;
              /deep/.el-link--inner {
              font-size:18px;
              }
            }
          }
        }
      }
    }
  }
}
.app {
  .login {
    .login_view {
      padding: 0.625rem;
      padding-top:2.5rem;
      .login_view-content {
        margin: 0 auto;
        width: 90%;
        .login_left {
          display: none;
        }
      }
        .login_right {
          .login_right_content {
            .loginError_text{
              padding: 6.25rem 0px;
              font-size:1.125rem;
              /deep/.el-link--inner {
              font-size:1.125rem;
              }
            }
          }
        }
    }
  }
}
</style>
