@中文描述:调整小登录页弹窗样式 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:调整小登录页弹窗样式 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 68d45f0 commit 8411c3771ec9980a325ee53e86361c4c66b3d966 20278 authored on 30 Jan 2023

Showing 1 changed file

Ignore Space Show notes View project/hivuiLogin/views/miniLogin.vue
<template> <div :class="'login_form'+(questType=='ajax'?' dialogLogin':'')"> <div class="loginMainBox"> <div class="login_form_bd"> <div class="error_tips"></div> <input type="hidden" name="directAction" value> <input type="hidden" name="refererurl" value> <div class="login_field"> <label>用户名/邮箱</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" placeholder="用户名" autofocus required autocomplete="off" :readonly="(questType=='ajax'&&oldUserName)?true:false" @keyup.enter="loginFunc" > <i class="fa fa-user"></i> </div> <div class="login_field"> <label>登录密码</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" placeholder="请输入密码" required autocomplete="off" @keyup.enter="loginFunc" > <i class="fa fa-unlock-alt"></i> </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :style="btnStyle" :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > 登  录 <i :hidden="!loginLoading" class="el-icon-loading"></i> </button> </div> </div> </div> </div> </div> </template> <script> import { baseLogin } from "../api/login"; import md5 from "js-md5"; import { projectName } from "../config"; import "font-awesome/css/font-awesome.css"; import _loginLogoImg from "../assets/Logo1.png" import _loginBgImg from "../assets/background.png" import { setToken, removeToken, getUserId, setUserId, removeUserId, } from "../utils/auth.js"; import { getUrlValue, } from "../utils/index.js"; export default { components: {}, data() { return { msg: "这是小登录页", oldUserName:(top.window.Scp&&top.window.Scp.User.fuserid)\|\|false, username: (top.window.Scp&&top.window.Scp.User.fuserid)\|\|"", password: "", config: { mainColor:window.customSysCofig?.mainColor\|\|"#06c", }, loginLoading: false, questType:getUrlValue("","questType"), isRefresh:getUrlValue("","isRefresh")=="true"?true:false, }; }, computed:{ btnStyle(){ return { "background-color": this.config.mainColor, }; }, }, mounted() {}, methods: { loginFunc() { this.defaultLogin(); }, defaultLogin() { let me=this; /this.$refs.loginForm.validate(valid => { if (valid) {/ if (!me.username.trim()) { me.$message.error("请输入用户名！"); return; } else if (!me.password) { me.$message.error("请输入密码！"); return; } removeToken(); me.loginLoading = true; baseLogin({ username: me.username.trim(), password: md5(me.password) }) .then(response => { const data = response; setToken(data.token); if (me.isCheckRu) { setUserId(me.username); } else { removeUserId(); } if(me.questType=="ajax"){ top.window.SysPage.closeMiniLogin(me.isRefresh); }else{ //top.window.SysPage.newPage(me.$route.params.redirectTitle\|\|"",me.$route.params.redirect\|\|"",me.$route.params.pushData\|\|{},"post"); location.reload(); } }) .catch(error => { me.loginLoading = false; }); } } }; </script> <style lang="scss" scoped> * { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } ul, li { list-style: none; } button { outline: none; border: none; } html, body { height: 100%; width: 100%; background: #fff; } input, body, button { font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; } body { font-size: 14px; color: #333; } .bg { height: 100%; width: 100%; position: relative; } .login_form { width: 400px; height: 360px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; padding: 1px; z-index: 100; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); &.dialogLogin{ height: 350px; box-shadow:none; } .login_form_hd { color: #333; font-weight: bold; padding: 0 18px; box-sizing: border-box; width: 100%; font-size: 16px; text-align: left; line-height: 44px; height: 44px; border-bottom: 1px solid #ccc; } .login_form_bd { min-height: 231px; height: 100%; position: relative; padding: 24px 40px 0; .login_form_foot { line-height: 40px; margin-top: 20px; &i { color: #0190d4; } .login_form_app, .login_download_app { color: #0190d4; float: right; cursor: pointer; &:hover { color: #0f406c; &i { color: #0f406c; } } } } .error_tips { position: absolute; line-height: 30px; font-size: 12px; color: #f60000; text-align: center; top: 0; left: 0; right: 0; width: 100%; margin: auto; } .login_field { position: relative; padding-bottom: 20px; label { line-height: 35px; display: block; height: 35px; font-size: 16px; } i { font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 40px; height: 40px; position: absolute; top: 35px; left: 0; margin: auto; } .login_field_text { height: 40px; width: 100%; line-height: 40px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; &[readonly]{ background-color: #eee; color: #666; } &::input-placeholder { color: #ccc; } } } .login_form_btn { font-size: 13px; margin-top: 20px; .loginBtn { /* background-color: #135189; / width: 100%; height: 40px; border: none; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; i { margin-left: 5px; } &:hover { filter: brightness(0.8); } &.disabled { background-color: #ccc !important; &:hover { filter: brightness(1); } } } } } } </style> <template> <div :class="'login_form'+(questType=='ajax'?' dialogLogin':'')"> <div class="loginMainBox"> <div class="login_form_bd"> <div class="error_tips"></div> <input type="hidden" name="directAction" value> <input type="hidden" name="refererurl" value> <div class="login_field"> <label>用户名/邮箱</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" placeholder="用户名" autofocus required autocomplete="off" :readonly="(questType=='ajax'&&oldUserName)?true:false" @keyup.enter="loginFunc" > <i class="fa fa-user"></i> </div> <div class="login_field"> <label>登录密码</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" placeholder="请输入密码" required autocomplete="off" @keyup.enter="loginFunc" > <i class="fa fa-unlock-alt"></i> </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :style="btnStyle" :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > 登  录 <i :hidden="!loginLoading" class="el-icon-loading"></i> </button> </div> </div> </div> </div> </div> </template> <script> import { baseLogin } from "../api/login"; import md5 from "js-md5"; import { projectName } from "../config"; import "font-awesome/css/font-awesome.css"; import _loginLogoImg from "../assets/Logo1.png" import _loginBgImg from "../assets/background.png" import { setToken, removeToken, getUserId, setUserId, removeUserId, } from "../utils/auth.js"; import { getUrlValue, } from "../utils/index.js"; export default { components: {}, data() { return { msg: "这是小登录页", oldUserName:(top.window.Scp&&top.window.Scp.User.fuserid)\|\|false, username: (top.window.Scp&&top.window.Scp.User.fuserid)\|\|"", password: "", config: { mainColor:window.customSysCofig?.mainColor\|\|"#06c", }, loginLoading: false, questType:getUrlValue("","questType"), isRefresh:getUrlValue("","isRefresh")=="true"?true:false, }; }, computed:{ btnStyle(){ return { "background-color": this.config.mainColor, }; }, }, mounted() {}, methods: { loginFunc() { this.defaultLogin(); }, defaultLogin() { let me=this; /this.$refs.loginForm.validate(valid => { if (valid) {/ if (!me.username.trim()) { me.$message.error("请输入用户名！"); return; } else if (!me.password) { me.$message.error("请输入密码！"); return; } removeToken(); me.loginLoading = true; baseLogin({ username: me.username.trim(), password: md5(me.password) }) .then(response => { const data = response; setToken(data.token); if (me.isCheckRu) { setUserId(me.username); } else { removeUserId(); } if(me.questType=="ajax"){ top.window.SysPage.closeMiniLogin(me.isRefresh); }else{ //top.window.SysPage.newPage(me.$route.params.redirectTitle\|\|"",me.$route.params.redirect\|\|"",me.$route.params.pushData\|\|{},"post"); location.reload(); } }) .catch(error => { me.loginLoading = false; }); } } }; </script> <style lang="scss" scoped> { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } ul, li { list-style: none; } button { outline: none; border: none; } html, body { height: 100%; width: 100%; background: #fff; } input, body, button { font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; } body { font-size: 14px; color: #333; } .bg { height: 100%; width: 100%; position: relative; } .login_form { width: 370px; height: 360px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; padding: 1px; z-index: 100; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); &.dialogLogin{ height: 280px; box-shadow:none; } .login_form_hd { color: #333; font-weight: bold; padding: 0 18px; box-sizing: border-box; width: 100%; font-size: 16px; text-align: left; line-height: 44px; height: 44px; border-bottom: 1px solid #ccc; } .login_form_bd { min-height: 231px; height: 100%; position: relative; padding: 24px 40px 0; .login_form_foot { line-height: 40px; margin-top: 20px; &i { color: #0190d4; } .login_form_app, .login_download_app { color: #0190d4; float: right; cursor: pointer; &:hover { color: #0f406c; &i { color: #0f406c; } } } } .error_tips { position: absolute; line-height: 30px; font-size: 12px; color: #f60000; text-align: center; top: 0; left: 0; right: 0; width: 100%; margin: auto; } .login_field { position: relative; padding-bottom: 20px; label { line-height: 35px; display: block; height: 35px; font-size: 16px; } i { font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 40px; height: 40px; position: absolute; top: 35px; left: 0; margin: auto; } .login_field_text { height: 40px; width: 100%; line-height: 40px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; &[readonly]{ background-color: #eee; color: #666; } &::input-placeholder { color: #ccc; } } } .login_form_btn { font-size: 13px; margin-top: 20px; .loginBtn { /* background-color: #135189; */ width: 100%; height: 40px; border: none; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; i { margin-left: 5px; } &:hover { filter: brightness(0.8); } &.disabled { background-color: #ccc !important; &:hover { filter: brightness(1); } } } } } } </style>

Ignore Space Show notes View

project/hivuiLogin/views/miniLogin.vue

<template>
    <div :class="'login_form'+(questType=='ajax'?' dialogLogin':'')">
      <div class="loginMainBox">
        <div class="login_form_bd">
          <div class="error_tips"></div>
          <input type="hidden" name="directAction" value>
          <input type="hidden" name="refererurl" value>
          <div class="login_field">
            <label>用户名/邮箱</label>
            <input
              class="login_field_text"
              v-model="username"
              type="text"
              id="txtUserName"
              name="userName"
              placeholder="用户名"
              autofocus
              required
              autocomplete="off"
              :readonly="(questType=='ajax'&&oldUserName)?true:false"
              @keyup.enter="loginFunc"
            >
            <i class="fa fa-user"></i>
          </div>
          <div class="login_field">
            <label>登录密码</label>
            <input
              class="login_field_text"
              v-model="password"
              type="text"
              onfocus="this.type='password'"
              id="txtPassword"
              name="password"
              placeholder="请输入密码"
              required
              autocomplete="off"
              @keyup.enter="loginFunc"
            >
            <i class="fa fa-unlock-alt"></i>
          </div>
          <div class="login_form_btn">
            <div class="login_btn_area">
              <button
                :style="btnStyle"
                :class="'loginBtn' + (loginLoading ? ' disabled' : '')"
                @click="loginFunc"
              >
                登&nbsp;&nbsp;录
                <i :hidden="!loginLoading" class="el-icon-loading"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import { baseLogin } from "../api/login";
import md5 from "js-md5";
import { projectName } from "../config";
import "font-awesome/css/font-awesome.css";
import _loginLogoImg from "../assets/Logo1.png"
import _loginBgImg from "../assets/background.png"
import {
  setToken,
  removeToken,
  getUserId,
  setUserId,
  removeUserId,
} from "../utils/auth.js";
import {
  getUrlValue,
} from "../utils/index.js";

export default {
  components: {},
  data() {
    return {
      msg: "这是小登录页",
      oldUserName:(top.window.Scp&&top.window.Scp.User.fuserid)||false,
      username: (top.window.Scp&&top.window.Scp.User.fuserid)||"",
      password: "",
      config: {
        mainColor:window.customSysCofig?.mainColor||"#06c",
      },
      loginLoading: false,
      questType:getUrlValue("","questType"),
      isRefresh:getUrlValue("","isRefresh")=="true"?true:false,
    };
  },
  computed:{
    btnStyle(){
        return {
            "background-color": this.config.mainColor,
        };
    },
  },
  mounted() {},
  methods: {
    loginFunc() {
      this.defaultLogin();
    },
    defaultLogin() {
      let me=this;
      /*this.$refs.loginForm.validate(valid => {
                        if (valid) {*/
      if (!me.username.trim()) {
        me.$message.error("请输入用户名！");
        return;
      } else if (!me.password) {
        me.$message.error("请输入密码！");
        return;
      }
      removeToken();
      me.loginLoading = true;
      baseLogin({
        username: me.username.trim(),
        password: md5(me.password)
      })
        .then(response => {
          const data = response;
          setToken(data.token);
          if (me.isCheckRu) {
            setUserId(me.username);
          } else {
            removeUserId();
          }
          if(me.questType=="ajax"){
              top.window.SysPage.closeMiniLogin(me.isRefresh);
          }else{
              //top.window.SysPage.newPage(me.$route.params.redirectTitle||"",me.$route.params.redirect||"",me.$route.params.pushData||{},"post");
              location.reload();
          }
        })
        .catch(error => {
          me.loginLoading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
button {
  outline: none;
  border: none;
}
html,
body {
  height: 100%;
  width: 100%;
  background: #fff;
}
input,
body,
button {
  font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
    helvetica, clean, sans-serif;
}
body {
  font-size: 14px;
  color: #333;
}
.bg {
  height: 100%;
  width: 100%;
  position: relative;
}
.login_form {
    width: 400px;
    height: 360px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 1px;
    z-index: 100;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
    &.dialogLogin{
      height: 350px;
      box-shadow:none;
    }
    .login_form_hd {
        color: #333;
        font-weight: bold;
        padding: 0 18px;
        box-sizing: border-box;
        width: 100%;
        font-size: 16px;
        text-align: left;
        line-height: 44px;
        height: 44px;
        border-bottom: 1px solid #ccc;
    }
    .login_form_bd {
        min-height: 231px;
        height: 100%;
        position: relative;
        padding: 24px 40px 0;
        .login_form_foot {
        line-height: 40px;
        margin-top: 20px;
        &i {
            color: #0190d4;
        }
        .login_form_app,
        .login_download_app {
            color: #0190d4;
            float: right;
            cursor: pointer;
            &:hover {
            color: #0f406c;
            &i {
                color: #0f406c;
            }
            }
        }
        }
        .error_tips {
        position: absolute;
        line-height: 30px;
        font-size: 12px;
        color: #f60000;
        text-align: center;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: auto;
        }
        .login_field {
        position: relative;
        padding-bottom: 20px;
        label {
            line-height: 35px;
            display: block;
            height: 35px;
            font-size: 16px;
        }
        i {
            font-size: 20px;
            color: #aaa;
            width: 35px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            position: absolute;
            top: 35px;
            left: 0;
            margin: auto;
        }
        .login_field_text {
            height: 40px;
            width: 100%;
            line-height: 40px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            font-size: 16px;
            color: #000;
            padding-left: 35px;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
            helvetica, clean, sans-serif;
            &[readonly]{
              background-color: #eee;
              color: #666;
            }
            &::input-placeholder {
            color: #ccc;
            }
        }
        }
        .login_form_btn {
        font-size: 13px;
        margin-top: 20px;
        .loginBtn {
            /* background-color: #135189; */
            width: 100%;
            height: 40px;
            border: none;
            border-radius: 5px;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            i {
            margin-left: 5px;
            }
            &:hover {
            filter: brightness(0.8);
            }
            &.disabled {
            background-color: #ccc !important;
            &:hover {
                filter: brightness(1);
            }
            }
        }
        }
    }
}
</style>

export default {
  components: {},
  data() {
    return {
      msg: "这是小登录页",
      oldUserName:(top.window.Scp&&top.window.Scp.User.fuserid)||false,
      username: (top.window.Scp&&top.window.Scp.User.fuserid)||"",
      password: "",
      config: {
        mainColor:window.customSysCofig?.mainColor||"#06c",
      },
      loginLoading: false,
      questType:getUrlValue("","questType"),
      isRefresh:getUrlValue("","isRefresh")=="true"?true:false,
    };
  },
  computed:{
    btnStyle(){
        return {
            "background-color": this.config.mainColor,
        };
    },
  },
  mounted() {},
  methods: {
    loginFunc() {
      this.defaultLogin();
    },
    defaultLogin() {
      let me=this;
      /*this.$refs.loginForm.validate(valid => {
                        if (valid) {*/
      if (!me.username.trim()) {
        me.$message.error("请输入用户名！");
        return;
      } else if (!me.password) {
        me.$message.error("请输入密码！");
        return;
      }
      removeToken();
      me.loginLoading = true;
      baseLogin({
        username: me.username.trim(),
        password: md5(me.password)
      })
        .then(response => {
          const data = response;
          setToken(data.token);
          if (me.isCheckRu) {
            setUserId(me.username);
          } else {
            removeUserId();
          }
          if(me.questType=="ajax"){
              top.window.SysPage.closeMiniLogin(me.isRefresh);
          }else{
              //top.window.SysPage.newPage(me.$route.params.redirectTitle||"",me.$route.params.redirect||"",me.$route.params.pushData||{},"post");
              location.reload();
          }
        })
        .catch(error => {
          me.loginLoading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
button {
  outline: none;
  border: none;
}
html,
body {
  height: 100%;
  width: 100%;
  background: #fff;
}
input,
body,
button {
  font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
    helvetica, clean, sans-serif;
}
body {
  font-size: 14px;
  color: #333;
}
.bg {
  height: 100%;
  width: 100%;
  position: relative;
}
.login_form {
    width: 370px;
    height: 360px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 1px;
    z-index: 100;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
    &.dialogLogin{
      height: 280px;
      box-shadow:none;
    }
    .login_form_hd {
        color: #333;
        font-weight: bold;
        padding: 0 18px;
        box-sizing: border-box;
        width: 100%;
        font-size: 16px;
        text-align: left;
        line-height: 44px;
        height: 44px;
        border-bottom: 1px solid #ccc;
    }
    .login_form_bd {
        min-height: 231px;
        height: 100%;
        position: relative;
        padding: 24px 40px 0;
        .login_form_foot {
        line-height: 40px;
        margin-top: 20px;
        &i {
            color: #0190d4;
        }
        .login_form_app,
        .login_download_app {
            color: #0190d4;
            float: right;
            cursor: pointer;
            &:hover {
            color: #0f406c;
            &i {
                color: #0f406c;
            }
            }
        }
        }
        .error_tips {
        position: absolute;
        line-height: 30px;
        font-size: 12px;
        color: #f60000;
        text-align: center;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: auto;
        }
        .login_field {
        position: relative;
        padding-bottom: 20px;
        label {
            line-height: 35px;
            display: block;
            height: 35px;
            font-size: 16px;
        }
        i {
            font-size: 20px;
            color: #aaa;
            width: 35px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            position: absolute;
            top: 35px;
            left: 0;
            margin: auto;
        }
        .login_field_text {
            height: 40px;
            width: 100%;
            line-height: 40px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            font-size: 16px;
            color: #000;
            padding-left: 35px;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
            helvetica, clean, sans-serif;
            &[readonly]{
              background-color: #eee;
              color: #666;
            }
            &::input-placeholder {
            color: #ccc;
            }
        }
        }
        .login_form_btn {
        font-size: 13px;
        margin-top: 20px;
        .loginBtn {
            /* background-color: #135189; */
            width: 100%;
            height: 40px;
            border: none;
            border-radius: 5px;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            i {
            margin-left: 5px;
            }
            &:hover {
            filter: brightness(0.8);
            }
            &.disabled {
            background-color: #ccc !important;
            &:hover {
                filter: brightness(1);
            }
            }
        }
        }
    }
}
</style>

Show line notes below