<template>
  <div class="login">
    <div class="login_main">
      <div class="title1">无人灭火机器人数字孪生后台管理系统</div>
      <div class="title2">国际花园小区</div>
      <el-form class="fromclass" :model="form" :rules="rules" ref="formref"
        style="width: 16.2vw;margin: 0 auto;margin-top: 4vh;">
        <el-form-item prop="name">
          <el-input v-model="form.name" placeholder="请输入您的账号" clearable class="widthClass" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="请输入您的密码" clearable class="widthClass" @keyup.enter="commit" />
        </el-form-item>
      </el-form>
      <div class="logingo" @click="commit">登录</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const form = ref({
  name: '',
  password: ''
})
const formref = ref(null)

const rules = {
  name: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
};
// 登录
const commit = () => {
  formref.value.validate(valid => {
    if (valid) {
      localStorage.setItem('menu', 1)//默认选中工作台
      router.replace({ path: '/home' })
    }
  })
}
</script>
<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-image: url(../../static/image/loginback.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: auto;
}

.login_main {
  width: 30vw;
  height: 25vw;
  margin: 0 auto;
  margin-top: calc((100vh - 25vw)/2);
  background-image: url(../../static/image/loginmain.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 50px;

}

.title1 {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  line-height: 48px;
  text-align: right;
  font-style: normal;
  background: linear-gradient(to bottom, #FFFFFF 50%, #96CBFF 100%);


  width: 100%;
  text-align: center;
  font-size: 26px;
  color: #D5F6FF;
  opacity: 0.79;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.title2 {
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: #D5F6FF;
  opacity: 0.79;
  line-height: 48px;
}

.widthClass {
  width: 100%;
  height: 2.2vw;
  margin: 0 auto;
  margin-top: 1vh;

}

.logingo {
  width: 16.5vw;
  height: 2.2vw;
  text-align: center;
  line-height: 2.2vw;
  margin: 0 auto;
  margin-top: 3vh;
  color: #ffffff;
  background-image: url(../../static/image/loginbutton.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

:deep().widthClass .el-input__wrapper {
  background-color: #06325c;
  /* opacity: 0.25; */
  box-shadow: none;
  border: 1px solid #064a74;
  /* color: #06325c; */
}

:deep().widthClass .el-input__inner {
  color: #ffffff !important;
}

:deep().widthClass .el-input__inner::placeholder {
  color: #ffffff !important;
  opacity: 1;

}
</style>