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">
          <div>
            <h1>南京生态环境评估决策平台</h1>
          <el-input v-model="input4" placeholder="请输入账户" class="input">
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
          </div>
        </div>



   </div>


    </div>
</template>

<script lang="ts">
export default {
  name: 'Login',
  setup() {
    return {}
  }
}
</script>
<style lang="less" scoped>
  .box {


    .loginInput {
      width: 651px;
      height: 689px;
      background: #FFFFFF;
      border: 1px solid #707070;
      opacity: 1;
      border-radius: 10px;
      position: relative;
      left: 50%;
      top: 255px;
      transform: translateX(-50%);

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

      }

      .importInput {
        width: 651px;
        height: 689px;
        background: #FFFFFF;
        border: 1px solid #707070;
        opacity: 1;
        border-radius: 10px;
        display: flex;
        justify-content: center;

        h1 {
          width: 393px;
          font-size: 30px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 40px;
          color: #222222;
          text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          opacity: 1;
          margin-top: 120px;
        }
      }

      img {
        width: 157.33px;
        height: 157.15px;
        margin-top: 35px;
      }

    }
  }





  </style>