easydo-zcgx-web/src/views/login/index.vue

<template>
    <el-carousel height="100vh" :pause-on-hover="false">
        <el-carousel-item>
            <img src="@/assets/images/welcomebg1.png" alt="" />
        </el-carousel-item>
        <el-carousel-item>
            <img src="@/assets/images/welcomebg2.png" alt="" />
        </el-carousel-item>
    </el-carousel>

    <div class="left">
        <img src="@/assets/images/welcomelogo.png" alt="" />
    </div>
    <div class="right">
        <div class="title">{{ projectName }}</div>
        <div class="title sub-title">欢迎登录</div>
        <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" @keyup.enter="login">
            <el-row>
                <el-col :span="24">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" placeholder="请输入用户名">
                            <template #prefix>
                                <img src="@/assets/images/user.png" alt="" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item prop="password">
                        <el-input v-model="form.password" type="password" show-password placeholder="请输入密码">
                            <template #prefix>
                                <img src="@/assets/images/pwd.png" alt="" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-button class="login-btn" :loading="islogin" @click="login">登录</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>

    <!-- 强制修改密码 -->
    <update-pwd ref="updatePwd"></update-pwd>
</template>

<script setup>
import { getConfig } from "@/config/config";
import { useUserStore } from "@/store/user";
import CryptoJS from "crypto-js";
import UpdatePwd from "./updatePwd.vue";

const router = useRouter();
const projectName = ref(getConfig("projectName"));
const form = ref({
  	username: null,
  	password: null
});

const rules = reactive({
  	username: [{ required: true, trigger: "blur", message: "用户名不能为空" }],
  	password: [{ required: true, trigger: "blur", message: "密码不能为空" }]
});

const loginForm = ref();
const updatePwd = ref();
const islogin = ref(false);

const login = () => {
  	loginForm.value.validate(valid => {
		if (valid) {
  			islogin.value = true;
            useUserStore().login(form.value).then(() => {
                islogin.value = false;
                router.push("/");
            }).catch(code => {
                islogin.value = false;
                if (code === 204) {
  					form.value.password = null;
  					updatePwd.value.open();
            	}
  			})
  		} else {
            return false;
        }
    })
}


</script>

<style lang="scss" scoped>
.el-carousel {
  position: fixed; //视频定位方式设为固定
  right: 0;
  bottom: 0; //视频位置
  min-width: 100%;
  min-height: 100%; //不会因视频尺寸造成页面需要滚动
  width: auto;
  height: auto; //尺寸保持原视频大小
  z-index: -100; //z轴定位，小于0即可

  img {
    width: 100%;
    height: 100%;
  }
}

.left {
  position: fixed; //视频定位方式设为固定
  height: 100%;
  min-height: 100%; //不会因视频尺寸造成页面需要滚动

  img {
    width: 316px;
    height: 72px;
    margin: 46px 0 0 80px;
  }
}

.right {
  position: fixed; //视频定位方式设为固定
  width: 500px;
  right: 0;
  min-height: 100%; //不会因视频尺寸造成页面需要滚动
  background: rgba(255, 255, 255, 0.68);
  border-left: 1px solid #ffffff;
  box-shadow: 2px 0px 0px 0px rgba(255, 255, 255, 1) inset;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    width: 81.6%;
    font-family: PingFang SC;
    font-size: 36px;
    font-weight: 600;
    line-height: 28px;
    margin: 100px 0 0;
  }

  .sub-title {
    font-size: 28px;
    font-weight: 500;
  }

  .el-form {
    width: 81.6%;
    margin-top: 40px;

    .el-form-item {
      margin-bottom: 0;
      margin-top: 28px;

      .el-input {
        --el-component-size: 52px;
        --el-input-text-color: #1d2129;
        font-size: 16px;

        :deep(.el-input__wrapper) {
          box-shadow: 0 0;
          border-radius: calc(2 * var(--el-border-radius-base));

          .el-input__prefix {
            padding: 0 calc(25px / 2);

            img {
              width: 24px;
              height: 24px;
            }
          }

          .el-input__inner {
            padding-left: 11px;
            font-family: PingFang SC;
            font-weight: 600;
  			box-shadow: 0 0 50px #fff inset;
          }
        }
      }
    }

    .login-btn {
      width: 100%;
      height: 56px;
      margin-top: 72px;
      padding: 0;
      background: linear-gradient(270.6deg, #165dff 2.71%, #45b1ff 99.81%);
      border: none;
      border-radius: 8px;
      font: 20px PingFang SC;
      font-weight: 600;
      color: #fff;
    }
  }
}
</style>