antissoft / NetworkInformation

  <template>
    <div class="Login">
      <div class="login-wrap">

        <div class="login-wrap_header">内部系统</div>

        <div class="login-wrap_container">
          <div class="welcome-text">欢迎登录！</div>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            class="login-wrap_container-form"
          >
            <el-form-item label="账号" prop="account">
              <el-input
                v-model="form.account"
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="form.password"
                placeholder="请输入密码"
                autocomplete="off"
              >
              </el-input>
            </el-form-item>
            <div class="password-remind">

              <!-- <registerForm>

                <div class="user-register">账户注册</div>

              </registerForm> -->

              <div class="forget-password">
                <!-- 忘记密码？ -->
              </div>
            </div>

            <el-button class="login-button" @click="toHome" :loading="loading">登录</el-button>
            <!-- <div class="login-button" @click="toHome">

              {{ loading ? "登录中。。。" : "登录" }}

            </div> -->

          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { login } from "@/api/index";
  import { setToken } from "@/utils/auth";
  export default {
    name: "Login",

    components: {
      loginLoading() {
        return this.$store.state.user.loginLoading;
      },
    },

    data() {
      return {
        form: {

          account: "cdoffice",

          password: "123456",
        },
        rules: {
          account: { required: true, message: "用户名不能为空", trigger: "blur" },
          password: { required: true, message: "密码不能为空", trigger: "blur" },
        },

        loading: false,

      };
    },

    watch: {
      loginLoading(val) {
        if (!val) this.loading = false;
      },
    },

    created() {
    },

    mounted() {},
    methods: {
      toHome() {

        if (this.loading) return;
  

        this.$refs["form"].validate((valid) => {
          if (valid) {

            this.loading = true;
            this.$store.commit("SET_LOGIN_LOADING", true);
            this.$store
              .dispatch("Login", this.form)
              .then(() => {

                this.$router.push({ path: "/homePage" });
              })
              .catch(() => {

                this.loading = false;

                this.$store.commit("SET_LOGIN_LOADING", false);
              });

          }
        });
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .Login {
    width: 100%;
    height: 100%;
    background-image: url("@/assets/images/login_bg.png"); /* 替换为你的图片路径 */
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    .login-wrap {
      width: 626px;
      position: absolute;
      top: 50%;
      right: 8%;
      transform: translateY(-50%);
      .login-wrap_header {
        width: 510px;
        margin: 0 auto;
        color: #5ed0fa;
        font-size: 40px;
        text-align: center;
      }
      .login-wrap_container {
        width: 100%;
        height: 520px;
        padding: 64px 67px 67px;
        box-sizing: border-box;
        background-image: url("@/assets/images/login-box-container.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: left;
        position: relative;
        .welcome-text {
          width: 392px;
          margin: 0 auto 20px;
          font-size: 20px;
          font-weight: 700;
          color: #5ed0fa;
        }
        .login-wrap_container-form {
          width: 392px;
          margin: 0 auto;
          :deep(.el-form-item__label) {
            font-size: 16px;
            font-weight: 700;
            color: #5ed0fa;
            padding: 0;
          }
          :deep(.el-input__inner) {
            background: none;
            border: none;
            border-bottom: 1px solid #5ed0fa;
            padding: 0;
            border-radius: 0;
            color: #5ed0fa;
          }
          .password-remind {
            width: 100%;
            margin-bottom: 30px;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            -webkit-box-align: center;
            align-items: center;
            justify-content: space-between;
            .user-register {
              color: #5ed0fa;
              font-weight: 700;
              cursor: pointer;
            }
            .forget-password {
              color: #5ed0fa;
              font-weight: 700;
              cursor: pointer;
            }
          }
          .login-button {
            width: 100%;
            height: 46px;

            // line-height: 46px;
            // text-align: center;

            background-image: url("@/assets/images/login-btn.png");
            background-size: 100%;
            background-repeat: no-repeat;

            border-radius: 25px;
            border: unset;
            // cursor: pointer;

            color: #5ed0fa;
            font-size: 18px;
          }
        }
      }
    }
  }
  </style>