supervise/warehousing-system/project_web/src/components/Login.vue

<template>
  <div class="background">
    <div class="login_box">
      <div class="box_Central">
        <div><img /></div>

        <el-form
          :rules="rules"
          :model="loginForm"
          ref="loginFormRef"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="loginForm.username"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="loginForm.password"
              style="width: 200px"
              show-password
            ></el-input>
          </el-form-item>
          <div class="cl">
            <div class="box_cn">
              <el-row>
                <el-button type="primary" @click="login">登录</el-button>
              </el-row>
            </div>
            <div class="box_cv">
              <el-row>
                <el-button
                  type="info"
                  style="background-color: orange; border-color: orange"
                  @click="resetBtn"
                  >重置</el-button
                >
              </el-row>
            </div>
          </div>
        </el-form>
      </div>
      <!-- 外层 -->
      <div class="face face2">欢迎使用</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        // key:value
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    resetBtn() {
      // 获取当前表单对象  之后重置数据
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;

        const { data: result } = await this.$http.post(
          "/user/login",
          this.loginForm
        );
        if (result.status !== 200)
          return this.$message.error("用户名或密码错误!");
        this.$message.success("用户登录成功!");
        const token = result.data;
        console.log(token);
        window.sessionStorage.setItem("token", token);
        this.$router.push("/home");
      });
    },
  },
};
</script>

<style>
.background {
  /* 渐变背景 */
  background: linear-gradient(90deg, #00aaff, #ffffff, #4eecec);
  height: 100%;
  width: 100%;
}

.box_Central {
  margin-top: 60px;
  margin-left: 60px;
}
.box_cn {
  float: left;
  margin-left: 80px;
}
.box_cv {
  float: left;

  margin-left: 50px;
}
.cl {
  clear: both;
}
.login_box {
  width: 450px;
  height: 330px;
  background-color: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}
.face {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 50px;
}

.login_box .face2 {
  background: #111;
  transition: 0.5s;
}
/* 经过外层高度变小 */
.login_box:hover .face2 {
  height: 60px;
}
/* 经过字体变小 */
.login_box:hover .face2 h2 {
  font-size: 2em;
}
/* 三个卡片外层渐变色 */
.login_box:nth-child(1) .face2 {
  background: linear-gradient(45deg, #00aaff, #4eeaea);
}

.login_box .face2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
}
.login_box .face2 h2 {
  margin: 0;
  padding: 0;
  font-size: 10em;
  color: #fff;
  transition: 0.5s;
}
</style>