<template>
  <div class="iot-login">
    <!-- 头部 -->
    <div class="login-header">
      <div class="top-line"></div>
      <div class="iotmenu-header-content">
        <span class="iotmenu-header-text">联锁管理平台</span>
      </div>
    </div>
    <!--  -->
    <div class="login-content">
      <div class="login-box">
        <route-view></route-view>
      </div>
    </div>
    <!-- 尾部 -->
     <div class="login-footer">
      <div class="login-footer-text">© 1983-2024 Advantech Co., Ltd.</div>
     </div>
  </div>
</template>

<script>
  import RouteView from "@/components/layouts/RouteView"
  import { mixinDevice } from '@/utils/mixin.js'

  export default {
    name: "UserLayout",
    components: { RouteView },
    mixins: [mixinDevice],
    data () {
      return {}
    },
    mounted () {
      document.body.classList.add('userLayout')
    },
    beforeDestroy () {
      document.body.classList.remove('userLayout')
    },
  }
</script>

<style lang="less">
@iotTpmFontColor: #323233;
@iotTpmContentBg: #FAFAFA;

@iotHContentHeight: 48px;
@iotHLineHeight: 8px;
@iotHHeight: 56px;

.iot-login{
  .login-header{
    height: @iotHHeight !important;
    .top-line{
      width: 100%;
      height: @iotHLineHeight;
      background: linear-gradient(90deg,#019ff3,#004280);
    }
    .iotmenu-header-content{
      height: @iotHContentHeight !important;
      line-height: @iotHContentHeight !important;
      background-color: #fff !important;
      color: rgba(0,0,0,65) !important;
      box-shadow: 0 2px 4px 0 rgba(50,50,51,.5) !important;
      z-index: 999 !important;
      padding: 0 !important;
      position: relative;
      .user-wrapper{
        .avatar{
          margin: 0 10px 0 0 !important;
        }
      }
    }
    .iotmenu-header-text{
      font-size: 23px;
      font-weight: 700;
      color: #004280;
      letter-spacing: 1px;
      margin-left: 30px;
    }
  }
  .login-content{
    width: 100%;
    height: calc(100vh - 38px - 56px);
    // background: url('../../assets/login.png') no-repeat;
    // background-size: cover;
    // background-position: center 50%;
    position: relative;
    .login-box{
      width: 400px;
      min-height: 580px;
      background-color: #fff;
      padding: 40px;
      box-shadow: 0 0 10px rgba(0,0,0,.25);
      border-radius: 4px;
      position: absolute;
      top: 50%;
      right: 30%;
      transform: translate(50%, -50%);
    }
  }
  .login-footer{
    height: 38px;
    padding-left: 37px;
    .login-footer-text{
      color: #a1a1a1;
      font-size: 14px;
    }
  }
}
@media (min-width: 1281px){
  .iot-login .login-content{
    background: url('../../assets/login.png') no-repeat;
    background-size: cover;
    background-position: center 50%;
    .login-box{
      right: 30%;
    }
  }
}
@media (max-width: 1280px){
  .iot-login .login-content{
    background: url('../../assets/login1024.png') no-repeat;
    background-size: cover;
    background-position: center 50%;
    .login-box{
      right: 50%;
    }
  }
}
// @media (max-width: 1919px) and (min-width: 1441px){
//   .iot-login .login-content .login-box{
//     left: 55.56%;
//     right: 16.67%;
//     top: 22.22%;
//     bottom: 24.07%;
//   }
// }
// @media (max-width: 1440px) and (min-width: 1367px){
//   .iot-login .login-content .login-box{
//     left: 53.15%;
//     right: 17.57%;
//     top: 8.33%;
//     bottom: 8.33%;
//   }
// }
// @media (max-width: 1366px) and (min-width: 1281px){
//   .iot-login .login-content .login-box{
//     left: 50%;
//     right: 18.75%;
//     top: 8.33%;
//     bottom: 8.33%;
//   }
// }
// @media (max-width: 1280px){
//   .iot-login .login-content .login-box{
//     left: calc(50% - 200px);
//     top: 108px;
//   }
// }
</style>