NanJingLamanRadarProject/04.系统编码/Frontend/src/components/Login.vue

<template>
  <div class="box">
      <div class="loginInput">
        <div class="litterSemicircle"><img src="/images/logo.png"/> </div>
        <div class="importInput">
            <h1>南京生态环境评估决策平台</h1>
            <el-input placeholder="请输入账户" type="text" class="input" v-model="inputName">
              <template #prefix>
                <el-icon><img src="/images/pen.png"></el-icon>
              </template>
            </el-input>
          <el-input  placeholder="请输入登录密码" type="password" v-model="inputPassword"  class="input" >
            <template #prefix>
              <el-icon><img src="/images/lock.png"></el-icon>
            </template>
          </el-input>
          <el-button type="primary" class="btn" @click="onLoginClick">登录</el-button>
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import {reactive, toRefs} from "vue";
import { ElMessageBox } from 'element-plus'
export default {
  name: 'Login',
  setup() {
    let option = reactive({
      inputName: null,
      inputPassword: null,
      centerDialogVisible:false
    })

    const onLoginClick = () => {
      if(option.inputName==null || option.inputPassword==null){
        ElMessageBox.alert('请完善信息', '提示', {
          confirmButtonText: '确认',
        })
      }
    }
    return {
      ...toRefs(option),
      onLoginClick
    }
  }
}
</script>

<style lang="less" scoped>
    .loginInput {
      width: 6.51rem;
      height: 6.89rem;
      background: #FFFFFF;
      border: 1px solid #707070;
      opacity: 1;
      border-radius: 10px;
      position: relative;
      left: 50%;
      top: 2.55rem;
      transform: translateX(-50%);

      .litterSemicircle {
        position: absolute;
        width: 2.39rem;
        height: 2.39rem;
        background: #FFFFFF;
        border-radius: 50%;
        opacity: 1;
        display: flex;
        justify-content: center;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .importInput {
        width: 6.51rem;
        height: 6.89rem;
        background: #FFFFFF;
        border: 1px solid #707070;
        opacity: 1;
        border-radius: 0.10rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;

        h1 {
          width: 3.93rem;
          height: 0.4rem;
          font-size: 0.30rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 0.4rem;
          color: #222222;
          text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          opacity: 1;
          margin-top: 1.20rem;
          margin-bottom: 0.52rem;
          padding-left: 0.12rem;
        }

        :deep(.input) {
          width: 4.96rem;
          height: 0.69rem;
          background: #FFFFFF;
          border: 1px solid #BCBCBC;
          opacity: 1;
          margin-bottom: 0.71rem;

          .el-input__inner{
            height: 100% !important;
            position: relative;
            border: none;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 0.24rem;
            color: #999999;
            padding-left: 0.54rem;
          }
        }
          img {
            width: 0.18rem;
            height: 0.1792rem;
            position: absolute;
            top: -13px;
            left: 18px;
          }
      }
      }
      img {
        width: 157.33px;
        height: 157.15px;
        margin-top: 35px;
      }
    .btn{
        width: 4.96rem;
        height: 0.69rem;
        background: #498DF0;
        opacity: 1;
        color: #FFFFFF;
        border: none;
        font-size: 0.22rem;
        margin-bottom: 1.27rem;
      }
  </style>