fixed

zrlibs

2025-03-20 b0478092cb738ea038216c347835a14da3768baf

 src/views/account/login.vue

@@ -1,28 +1,42 @@
<template>
  <div class="login-view">
    <Form :model="formInline" :rules="ruleInline" inline ref="refFormInline">
      <FormItem prop="user">
        <Input type="text" v-model="formInline.user" placeholder="Username">
          <template #prepend>
            <Icon type="ios-person-outline"></Icon>
          </template>
        </Input>
      </FormItem>
      <FormItem prop="password">
        <Input
          type="password"
          v-model="formInline.password"
          placeholder="Password"
    <div class="login-wrap">
      <div class="login-account">
        <div class="account-logo">
          <img src="http://115.29.185.26:5101/userphoto?login=sa" />
        </div>
        <Form
          class="account-form"
          :model="form"
          :rules="rules"
          label-position="top"
          ref="refFormInline"
        >
          <template #prepend>
            <Icon type="ios-lock-outline"></Icon>
          </template>
        </Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="onSignIn">Signin</Button>
      </FormItem>
    </Form>
          <div class="title">Vue仓库管理系统</div>
          <div class="ivu-login">
            <FormItem prop="user">
              <Input
                type="text"
                v-model="form.user"
                prefix="ios-person-outline"
              >
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input
                type="password"
                v-model="form.password"
                prefix="ios-lock-outline"
              >
              </Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="onSignIn" long>登录</Button>
            </FormItem>
          </div>
        </Form>
      </div>
    </div>
  </div>
</template>

@@ -35,11 +49,11 @@
  name: "LoginView",
  data() {
    return {
      formInline: {
        user: "",
        password: "",
      form: {
        user: "admin",
        password: "0000",
      },
      ruleInline: {
      rules: {
        user: [
          {
            required: true,
@@ -53,24 +67,25 @@
            message: "Please fill in the password.",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "The password length cannot be less than 6 bits",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onSignIn() {
      // 测试用户
      if (this.form.user == "admin" && this.form.password == "0000") {
        setToken("uid");
        this.showSuccess("登录成功");
        this.$router.push("/");
        return;
      }
      this.refFormInline.validate(async (valid) => {
        try {
          if (valid) {
            let res = await login({
              user_login: Base64.encode(this.formInline.user),
              user_psw: Base64.encode(this.formInline.password),
              user_login: Base64.encode(this.form.user),
              user_psw: Base64.encode(this.form.password),
            });
            setToken(res.session_id);
            this.showSuccess("登录成功");
@@ -97,11 +112,76 @@
};
</script>

<style lang="less" scoped>
<style lang="less">
.login-view {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right bottom;
  background-image: url("../../assets/login_bg.png");
  background-attachment: fixed;
  .login-wrap {
    height: 100vh;
    overflow: auto;
  }
  .login-account {
    width: 280px;
    padding: 16px 0 0;
    margin: 0 300px 0 auto;
    margin-top: 100px;
  }
  .account-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border: 1px solid #eee;
    border-radius: 50%;
    background-color: #fafafc;
    img {
      width: 100%;
      border-style: none;
      border-radius: 100%;
    }
  }
  .account-form {
    margin-top: 32px;
  }
  .title {
    font-size: 30px;
    text-align: center;
    margin-bottom: 18px;
    letter-spacing: 3px;

    font-weight: bold;
    background: -webkit-linear-gradient(#009df4, #00e9cf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
  .ivu-login {
    padding: 60px 30px 3px;
    background-image: url("../../assets/account_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: right bottom;
  }
  .ivu-form-item {
    margin-bottom: 24px;
    vertical-align: top;
    zoom: 1;
    .ivu-icon {
      color: #0ba1f8;
    }
    .ivu-input {
      border: 2px solid #0ba1f8;
      background-color: transparent;
      color: #fff;
    }
  }
  .ivu-form-item-content {
    position: relative;
    line-height: 32px;
    font-size: 14px;
  }
}
</style>