performance-test/src/views/login/Index.vue

<template>
  <div class="background-image" v-loading="loadingView">
    <div class="border">
      <div class="leftLogin">
        <!-- 华电 -->
        <h1>{{ title }}</h1>
        <el-divider></el-divider>
        <div class="loginText">
          <el-form
            :model="loginForm"
            ref="ruleForm"
            label-width="0px"
            :rules="rules"
            class="demo-ruleForm"
          >
            <el-form-item prop="userName">
              <el-input
                placeholder="请输入用户名或账号"
                v-model="loginForm.userName"
              ></el-input>
            </el-form-item>
            <!-- TODO:删除placeholder -->
            <el-form-item prop="password">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="loginForm.password"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                class="custom-button"
                @click="login('ruleForm')"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/** `runtime-config.js` 未加载或字段为空时的兜底文案 */
const DEFAULT_LOGIN_TITLE = "机组功率曲线异常检测数据分析系统";

function getRuntimeTitle() {
  const cfg =
    typeof window !== "undefined" ? window.__RUNTIME_CONFIG__ : undefined;
  const t = cfg && cfg.title;
  return typeof t === "string" && t.trim() ? t.trim() : DEFAULT_LOGIN_TITLE;
}

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        userName: "",
        password: "",
      },
      loadingView: false,
      rules: {
        userName: [
          { required: true, message: "请输入用户名或账号", trigger: "blur" },
          {
            type: "",
            message: "请输入用户名或账号",
            trigger: ["blur"],
          },
        ],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  computed: {
    /** 与 `public/runtime-config.js` 中 title 同步，部署后改文件即可 */
    title() {
      return getRuntimeTitle();
    },
  },
  created() {
    document.title = this.title;
  },
  methods: {
    // 登录
    login(formName) {
      this.loadingView = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          try {
            this.$store.dispatch("auth/goLogin", {
              loginForm: this.loginForm,
              router: this.$router,
            });
            this.loadingView = false;
          } catch (error) {
            // Handle error if needed
            this.loadingView = false;
          }
        } else {
          this.loginForm.username = "";
          this.loginForm.password = "";
          this.loadingView = false;
        }
      });
    },

    //   忘记密码
    forgot() {
      this.$router.push("/forgot");
    },
  },
};
</script>

<style lang="scss" scoped>
.background-image {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/login-img.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 50px;
  width: 450px;
  background: #fff;
  border: 1px solid rgb(231, 231, 231);
  border-radius: 5px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.4);
  margin: auto;

  .leftLogin {
    align-items: center;

    h1 {
      width: 100%;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      font-weight: 600;
      color: #00baad;
      margin-top: 20px;
    }

    .el-divider--horizontal {
      margin: 10px 0;
      height: 4px;
      background: #ba2200;
    }

    .loginText {
      .custom-button {
        width: 300px;
        margin-bottom: 10px;
        background-color: #00baad;
        color: white;
        border: 2px solid #00baad;
      }

      .custom-button:hover {
        background-color: #00baad;
        color: white;
        border: 2px solid #00baad;
      }
    }

    .forgot {
      font-size: 12px;
      color: rgb(143, 143, 143);
      margin-top: 20px;
    }

    .forgot:hover {
      font-size: 12px;
      color: rgb(0, 0, 0);
      margin-top: 20px;
    }

    .loginImg {
      width: 200px;
      height: 200px;
      margin: 50px auto;

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    // TODO：新增
    .demo-ruleForm {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      .el-button {
        margin-top: 20px;
      }

      .el-form-item {
        margin-bottom: 10px;
      }
    }
  }

  .rightImg {
    width: 50%;
    height: 100%;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 0 5px 5px 0;
      /* 可以根据需要调整圆角的大小 */
    }
  }
}

.el-input {
  width: 300px;
  margin-top: 20px;
}

// ::v-deep .el-form-item__error {
//   left: 150;
// }
</style>