月球大数据地理空间分析展示平台-【前端】-月球2期前端
Surpriseplus
2023-07-03 acaf0e90887fa217ff9aec6d0f25af5ec5e237a9
src/views/login.vue
@@ -28,57 +28,65 @@
        v-bind:src="reportUrl"
      ></iframe>
    </div>
    <div class="title_img">
      <h3>月球大数据地理空间分析展示平台</h3>
    </div>
    <div class="loginMenu">
      <div class="login_title">
        <span>用户登录</span>
    <div class="zz">
      <div class="title_img">
        <div class="titleLogo"></div>
        <h3>月球大数据地理空间分析展示平台</h3>
      </div>
      <el-form ref="loginForm" class="loginForm">
        <el-form-item prop="uid">
          <el-input
            placeholder="输入登录账号"
            class="nobr"
            autocomplete="off"
            :prefix-icon="User"
          >
          </el-input>
        </el-form-item>
      <div class="loginMenu">
        <div class="login_title">
          <span>用户登录</span>
        </div>
        <el-form
          ref="loginForm"
          class="loginForm"
        >
          <el-form-item prop="uid">
            <el-input
              placeholder="输入登录账号"
              class="nobr"
              autocomplete="off"
              :prefix-icon="User"
            >
            </el-input>
          </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            show-password
            placeholder="请输入登录密码"
            class="nobr"
            autocomplete="off"
            :prefix-icon="Lock"
          >
          </el-input>
        </el-form-item>
          <el-form-item prop="pwd">
            <el-input
              show-password
              placeholder="请输入登录密码"
              class="nobr"
              autocomplete="off"
              :prefix-icon="Lock"
            >
            </el-input>
          </el-form-item>
        <el-form-item required>
          <el-col :span="18">
            <el-form-item prop="validCode">
              <el-input
                placeholder="请输入验证码(忽略大小写)"
                class="nobr"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-form-item required>
            <el-col :span="18">
              <el-form-item prop="validCode">
                <el-input
                  placeholder="请输入验证码(忽略大小写)"
                  class="nobr"
                ></el-input>
              </el-form-item>
            </el-col>
          <el-col :span="6" align="right"> </el-col>
        </el-form-item>
            <el-col
              :span="6"
              align="right"
            > </el-col>
          </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="nobr loginbtn btnbox"
            @click="setLogin()"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
          <el-form-item>
            <el-button
              type="primary"
              class="nobr loginbtn btnbox"
              @click="setLogin()"
            >登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
@@ -110,14 +118,21 @@
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../assets/img/moon-bg.png") no-repeat;
  background: url("../assets/img/背景.png") no-repeat;
  background-size: 100% 100%;
  .zz {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .loginEarth {
    width: 100%;
    height: 100%;
    top: 3%;
    left: 1%;
    position: absolute;
    z-index: 0;
  }
  .loginMenu {
    position: absolute;
@@ -161,14 +176,22 @@
  }
  .title_img {
    position: absolute;
    left: 15%;
    left: 12%;
    top: 8%;
    width: 20%;
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    .titleLogo {
      width: 80px;
      height: 80px;
      background: url("../assets/img/logo.png") no-repeat;
      background-size: 100% 100%;
    }
    h3 {
      color: #fff;
      font-size: 40px;
      white-space: nowrap;
      margin-left: 10px;
    }
  }
}