<template>
  <div
    class="login_contain">
    <div class="login_back">
      <div class="left_top"/>
      <div class="left_bottom"/>
      <div class="right_top"/>
      <div class="right_center_lef"/>
      <div class="right_center_rig"/>
      <div class="right_center"/>
      <div class="right_hospital"/>
      <div class="right_bottom"/>
      <div class="right_nurse"/>
    </div>
    <div class="form_box">
      <div class="login_span">智慧护理信息平台-管理端</div>
      <div class="login_box">
        <el-form
          :model="loginForm"
          class="login-form"
          label-position="left">
          <div class="login_user">
            <div class="login_info">用户名</div>
            <div>
              <input
                v-model="loginForm.userCode"
                type="text"
                class="login_inp"
              >
            </div>
          </div>
          <div class="login_pwd">
            <div class="login_info">密码</div>
            <div>
              <input
                v-model="loginForm.pwd"
                type="password"
                class="login_inp"
              >
            </div>
          </div>
          <el-button
            type="primary"
            class="login_btn"
            @click="getLogin"
          >登录</el-button
          >
        </el-form>
      </div>
      <div class="version_info">
        <span>V1.18.10.0</span><br >
        <span>版权所有©南京海泰医疗信息系统有限公司</span>
      </div>
    </div>
  </div>
</template>

<script>
import './common/common.css'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        userCode: '',
        pwd: ''
      }
    }
  },
  methods: {
    getLogin() {
      this.$router.push({ path: '/home/homepage' })
    }
  }
}
</script>

<style lang="scss" scoped>
  .load_spin .ant-spin{
    max-height:100%
  }
  .el-loading-spinner .circular {
    height: 62px;
    width: 62px;
  }
  .el-loading-spinner {
    top: 50%;
    margin-top: -21px;
    width: 10%;
    border: 1px solid #fff;
    margin-left: 45%;
    text-align: center;
    position: absolute;
}
.login_back {
  background-color: #f4f8ff;
  width: 100%;
  min-height: calc(100vh);
  min-height: -moz-calc(100vh);
  min-height: -webkit-calc(100vh);
  position: relative;
}
.login_back div{
  position: absolute;
}
.left_top {
  left: 0;
  top: 0;
  width: 9.11%;
  height: 41.94%;
  background: url(../assets/images/login-left-top.png) no-repeat;
  background-size: 100% 100%;
}
.left_center_top {
  top: 50PX;
  left: 14.6%;
  width: 31.25%;
  height: 13.05%;
  text-align: center;
  background: url(../assets/images/login-htsns.png) no-repeat;
  background-size: 100% 100%;
}
.left_bottom {
  left: 4.8%;
  bottom: 77px;
  width: 8.125%;
  height: 14.44%;
  background: url(../assets/images/login-needle.png) no-repeat;
  background-size: 100% 100%;
}
.right_center_lef {
  left: calc(11.7% + 38.7% + 20px);
  top: 170px;
  width: 6.125%;
  height: 11%;
  background: url(../assets/images/login-stethoscope.png) no-repeat;
  background-size: 100% 100%;
}
.right_center_rig {
  left: calc(11.7% + 38.7% + 36.7% - 9%);
  top: 170px;
  width: 6.37%;
  height: 11%;
  background: url(../assets/images/login-appoint.png) no-repeat;
  background-size: 100% 100%;
}
.right_center {
  left: calc(11.7% + 38.7% + 10px);
  top: 210px;
  width: 36.7%;
  height: 41.9%;
  background: url(../assets/images/login-right-center.png) no-repeat;
  background-size: 100% 100%;
}
.right_top {
  top: 0;
  right: 0;
  width: 10%;
  height: 21.67%;
  background: url(../assets/images/login-right-top.png) no-repeat;
  background-size: 100% 100%;
}
.right_bottom {
  right: 0;
  bottom: 0;
  width: 10.78%;
  height: 23.33%;
  background: url(../assets/images/login-right-bottom.png) no-repeat bottom;
  background-size: 100% 100%;
}
.right_hospital {
  left: calc(11.7% + 38.7% + 20px);
  bottom: 0;
  width: 10.8%;
  height: 19.27%;
  background: url(../assets/images/login-hospital.png) no-repeat bottom;
  background-size: 100% 100%;
}
.right_nurse {
  right: 4%;
  bottom: 100px;
  width: 12.656%;
  height: 51.11%;
  background: url(../assets/images/login-nurse.png) no-repeat;
  background-size: 100% 100%;
}
.login_span {
  position: absolute;
  left: 11.7%;
  width: 38.7%;
  top: 120px;
  text-align: center;
  font-size: 3rem;
  color:#333333;
}
.login_box {
  width: 38.7%;
  height: 58.5%;
  position: absolute;
  left: 11.7%;
  top: 200px;
  border-radius: 20px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
  padding: 5.12% 0;
  box-sizing: border-box;
  background-color: #fff;
}
.login_pwd {
  margin-top: 6.67%;
}
.login_info {
  width: 60%;
  text-align: left;
  font-size:1.6rem;
  color: #808080;
  margin: 0 auto;
}
.login_inp {
  border: none;
  outline: none;
  caret-color: #147bfa;
  border-bottom: 1px solid #ccc;
  height: 40px;
  width: 60%;
  font-size: 1.6rem;
  color: #333;
}
.login_inp:focus {
  border-bottom: 1px solid #147bfa;
}
.login_btn {
  width: 60%;
  margin-top: 11%;
  height: 50px;
  font-size: 1.8rem;
}
.version_info {
  position: absolute;
  left: 11.7%;
  width: 38.7%;
  bottom: 44px;
  color: #ccc;
  line-height: 28px;
  font-size: 1.3rem;
}
@media screen and (max-width: 1024px) {
  .login_box {
    height: 43.8%;
  }
  .login_btn {
    height: 40px;
    font-size: 1.6rem;
  }
}
</style>
