gdy_qywx_pc/src/views/login/invite_new_company.vue

<template>
  <div class="login-container">

    <div class="login_logo">
      <a href="#" target="_self" title="功道云-积分系统用户登录"><img src="static/images/login-logo.png"></a>
    </div>

    <div class="login_box">

      <div class="login_ad">
        <img src="static/images/login_adpic.png">
        <span>广告语</span>
      </div>

      <div class="create_company_box">

        <div class="company_img">
          <img src="static/images/invite_new_company.png">
        </div>

        <div class="create_company_title">
          <span>秦萌邀请您加入</span>
          <div class="title">公司名称</div>
        </div>

        <div class="btn-box">
          <el-button type="primary" size="large" >同意加入</el-button>
        </div>

        <div class="btn-box">
          <el-button class="border-dis" type="default" size="large" @click="loginDemo">拒绝加入</el-button>
        </div>

      </div>
    </div>

    <div class="footer_copyright">
      <span class=""><img src="static/images/little_line.png">积分制管理 · 员工精细化管理<img src="static/images/little_line.png"></span>
      <span class="copyright">Copyright © 2020 东莞市民之网计算机网络工程有限公司 All Rights Reserved</span>
    </div>
  </div>

</template>

<script>

  import {isvalidUsername} from '@/utils/validate'
  import {getToken, setToken} from '@/utils/auth' // getToken from cookie
  import request from '@/utils/request-user'

  export default {
    data() {
      return{}
    }
  }


</script>

<style rel="stylesheet/css" type="text/css" scoped>
  .login-container{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:auto;
    cursor: default;
  }
  .login-container .login_logo{
    position:relative;
    width:100%;
    max-width:1100px;
    margin:28px auto 48px;
    overflow:hidden;
  }
  .login-container .login_logo img{
    width:128px;
    height:auto;
  }
  .login-container .login_box{
    position:relative;
    display:block;
    top:0;
    width:100%;
    height:614px;
    max-width:1100px;
    margin:0 auto;
    box-shadow:0px 4px 22px #efefef;
  }
  .login-container .login_box .login_ad{
    position:relative;
    display:inline-block;
    text-align: center;
    width:518px;
    height:614px;
    float:left;
    background:url(static/images/login_bg.jpg) no-repeat;
    background-size:cover;
    overflow:hidden;
  }
  .login-container .login_box .login_ad img{
    width:460px;
    margin:108px auto 60px;
    height:228px;
  }
  .login-container .login_box .login_ad span{
    font-family:"Microsoft YaHei";
    display:block;
    text-align: center;
    font-size:32px;
    letter-spacing: 2px;
    font-weight:bold;
    color:#fff;
  }
  .login-container .login_box .login_type_icon{
    position:absolute;
    top:0;
    right:0;
    width:94px;
    height:94px;
    overflow:hidden;
    z-index: 10;
  }
  .login-container .login_box .login_type_icon .login_default{
    width:96px;
    height:96px;
    background:url(static/images/login_default.jpg) no-repeat;
    background-size:cover;
  }
  .login-container .login_box .login_type_icon .login_code{
    width:96px;
    height:96px;
    background:url(static/images/login_code.jpg) no-repeat;
    background-size:cover;
  }
  .login-container .login_box .login_input{
    position:relative;
    display:inline-block;
    text-align: center;
    width:582px;
    height:614px;
    float:right;
    background:#FFF;
    overflow:hidden;
  }
  .login-container .login_box .login-form{
    top:0;
    left:0;
    width:360px;
    margin:0 auto;
    height:440px;
  }
  .login-container .login_box .login-form .title-container{
    display: inline-block;
    width:120px;
    height:120px;
    margin-top:106px;
    border-radius:120px;
    background:#26A2FF;
    overflow:hidden;
  }
  .login-container .login_box .login-form .title-container img{
    margin-top:40px;
    width:100%;
    height:auto;
  }
  .login-container .login_box .create_company_box{
    position: relative;
    display: inline-block;
    text-align: center;
    width: 582px;
    margin:64px auto 0px;
    padding:0 110px;
    float: right;
    background: #FFF;
    overflow: hidden;
  }
  .login-container .login_box .create_company_box .company_img{
    margin-bottom:44px;
  }
  .login-container .login_box .create_company_box .create_company_title .title{
    margin:10px auto 48px;
    color:#303133;
    font-size:24px;
  }
  .login-container .login_box .create_company_box .create_company_title span{
    color:#909399;
    font-size:16px;
    line-height:20px;
  }
  .login-container .login_box .create_company_box /deep/ .btn-box{
    display: inline-block;
    width: 100%;
    margin:16px auto 0;
    text-align: center;
  }
  .login-container .login_box .create_company_box /deep/ .btn-box button {
    width:360px;
    height: 56px;
    border-radius: 8px;
  }
  .login-container .login_box .create_company_box /deep/ .btn-box .border-dis{
    border:none;
    color:#409EFF;
  }
  .footer_copyright{
    display: block;
    text-align: center;
    width:auto;
    margin:80px auto;
    overflow:hidden;
  }
  .footer_copyright span{
    display:block;
    text-align: center;
    font-size:14px;
    line-height: 20px;
    color:#606266;
  }
  .footer_copyright span img{
    display: inline-block;
    vertical-align: top;
    margin-top:8px;
    padding:0 20px;
  }
  .footer_copyright  .copyright{
    margin-top:14px;
  }
  .login-container::-webkit-scrollbar{
    width : 4px;
    height: 1px;
  }
  .login-container::-webkit-scrollbar-thumb {
    border-radius:10px;
    box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2);
    background:#535353;
  }
  .login-container::-webkit-scrollbar-track {
    box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius:10px;
    background:transparent;
  }
</style>