@中文描述: 登录框样式 @版本号: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述: 登录框样式 @版本号: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 2f3da9b commit fd02224825f88c26e1463babbb10771b5c92e9f0 ganyi authored 15 days ago

Showing 1 changed file

Ignore Space Show notes View project/hivuiLogin/views/index.vue
<template> <div class="bg"> <div class="login_hd"> <div class="login_hd_logo" :style="logoStyle"> <!-- <div class="login_hd_logo_tip">登录</div>--> </div> </div> <div class="login_bd"> <div class="login_bd_bg" :style="bgStyle"></div> <div class="login_form_box"> <login-panel @loginSuccess="handleLoginSuccess" > </login-panel> </div> </div> <div class="login_ft"> <div class="login_ft_main" id="login_copyright" v-html="config.copyright"></div> </div> </div> </template> <script> import { projectName } from "../config"; import { getToken, setToken, removeToken, getUserId, setUserId, removeUserId, } from "../utils/auth.js"; import {setUrlValue,getUrlValue} from "../utils/index.js"; import LoginPanel from "../components/LoginPanel.vue"; import _loginLogoImg from "../assets/Logo1.png" import _loginBgImg from "../assets/background.png" export default { name: "login", components: { LoginPanel }, data() { return { config: { title: window.customSysCofig?.loginTitle\|\|this.$t('hivuiLogin_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, loginBgImg: window.customSysCofig?.loginBgImg\|\|_loginBgImg, copyright: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_main_def_copyright'), }, }; }, computed: { bgStyle() { return { "background-image": "url(" + this.config.loginBgImg + ")", }; }, logoStyle() { return { "background-image": "url(" + this.config.loginLogoImg + ")", height: this.config.loginLogoImg_height + "px", width: this.config.loginLogoImg_width + "px", }; }, }, methods: { handleLoginSuccess(data) { this.goMainPage(); }, //跳转到主页 goMainPage(){ if(!window.HIVUI_SETTING.isSingleLogin&&location.hash.indexOf("eapReturnUrl=")!=-1){ let __eapReturnUrl=decodeURIComponent(location.hash.split("eapReturnUrl=")[1]); let hasTokenParams=getUrlValue(__eapReturnUrl,"access_token"); if(false&&!window._global&&hasTokenParams){//正式环境 location=setUrlValue(__eapReturnUrl,"access_token",getToken()); }else{ location=__eapReturnUrl; } }else{ location = window.HIVUI_SETTING.mainPageUrl ? window.HIVUI_SETTING.mainPageUrl : "/" + projectName + "/hivuiMain/index.html#/"; } }, } }; </script> <style lang="scss"> * { 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_hd, .login_ft { height: 100px; width: 100%; position: fixed; z-index: 99; left: 0; } .login_hd_main, .login_ft_main { width: 1000px; height: 100%; margin: 0 auto; a{ color:#0f406c; margin-left:5px; &:hover{ color:#409eff; } } } .login_hd { top: 0; .login_hd_logo { height: 60px; width: 265px; position: absolute; top: 50px; left: 50px; background: no-repeat; background-size: 100% 100%; img { height: 80px; width: 80px; margin-right: 90px; margin-top: 10px; float: right; } .login_hd_logo_tip { height: 32px; width: 84px; display: inline-block; padding: 0 20px; font-size: 22px; color: #fff; position: absolute; right: -104px; top: 0; bottom: 0; margin: auto; &:after { content: ""; height: 20px; width: 2px; position: absolute; top: 0; bottom: 0; left: 0px; background-color: #8691a8; margin: auto; } } } } .login_bd { overflow: hidden; min-width: 1210px; position: relative; height: 100%; background-color: #fff; .login_bd_bg { background: no-repeat center center; background-size: 100%; position: absolute; height: 100%; width: 100%; } } .login_ft { bottom: 0; .login_ft_main { line-height: 60px; text-align: center; font-size: 14px; } } .login_form_box{ width: 370px; height: 380px; margin: auto; position: absolute; top: 0; left: 40%; right: 0; bottom: 0; z-index: 100; padding: 18px 20px 0; border-radius: 5px; background: rgba(255, 255, 255, 1); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); // box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); } </style> <template> <div class="bg"> <div class="login_hd"> <div class="login_hd_logo" :style="logoStyle"> <!-- <div class="login_hd_logo_tip">登录</div>--> </div> </div> <div class="login_bd"> <div class="login_bd_bg" :style="bgStyle"></div> <div class="login_form_box"> <login-panel @loginSuccess="handleLoginSuccess" > </login-panel> </div> </div> <div class="login_ft"> <div class="login_ft_main" id="login_copyright" v-html="config.copyright"></div> </div> </div> </template> <script> import { projectName } from "../config"; import { getToken, setToken, removeToken, getUserId, setUserId, removeUserId, } from "../utils/auth.js"; import {setUrlValue,getUrlValue} from "../utils/index.js"; import LoginPanel from "../components/LoginPanel.vue"; import _loginLogoImg from "../assets/Logo1.png" import _loginBgImg from "../assets/background.png" export default { name: "login", components: { LoginPanel }, data() { return { config: { title: window.customSysCofig?.loginTitle\|\|this.$t('hivuiLogin_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, loginBgImg: window.customSysCofig?.loginBgImg\|\|_loginBgImg, copyright: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_main_def_copyright'), }, }; }, computed: { bgStyle() { return { "background-image": "url(" + this.config.loginBgImg + ")", }; }, logoStyle() { return { "background-image": "url(" + this.config.loginLogoImg + ")", height: this.config.loginLogoImg_height + "px", width: this.config.loginLogoImg_width + "px", }; }, }, methods: { handleLoginSuccess(data) { this.goMainPage(); }, //跳转到主页 goMainPage(){ if(!window.HIVUI_SETTING.isSingleLogin&&location.hash.indexOf("eapReturnUrl=")!=-1){ let __eapReturnUrl=decodeURIComponent(location.hash.split("eapReturnUrl=")[1]); let hasTokenParams=getUrlValue(__eapReturnUrl,"access_token"); if(false&&!window._global&&hasTokenParams){//正式环境 location=setUrlValue(__eapReturnUrl,"access_token",getToken()); }else{ location=__eapReturnUrl; } }else{ location = window.HIVUI_SETTING.mainPageUrl ? window.HIVUI_SETTING.mainPageUrl : "/" + projectName + "/hivuiMain/index.html#/"; } }, } }; </script> <style lang="scss"> * { 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_hd, .login_ft { height: 100px; width: 100%; position: fixed; z-index: 99; left: 0; } .login_hd_main, .login_ft_main { width: 1000px; height: 100%; margin: 0 auto; a{ color:#0f406c; margin-left:5px; &:hover{ color:#409eff; } } } .login_hd { top: 0; .login_hd_logo { height: 60px; width: 265px; position: absolute; top: 50px; left: 50px; background: no-repeat; background-size: 100% 100%; img { height: 80px; width: 80px; margin-right: 90px; margin-top: 10px; float: right; } .login_hd_logo_tip { height: 32px; width: 84px; display: inline-block; padding: 0 20px; font-size: 22px; color: #fff; position: absolute; right: -104px; top: 0; bottom: 0; margin: auto; &:after { content: ""; height: 20px; width: 2px; position: absolute; top: 0; bottom: 0; left: 0px; background-color: #8691a8; margin: auto; } } } } .login_bd { overflow: hidden; min-width: 1210px; position: relative; height: 100%; background-color: #fff; .login_bd_bg { background: no-repeat center center; background-size: 100%; position: absolute; height: 100%; width: 100%; } } .login_ft { bottom: 0; .login_ft_main { line-height: 60px; text-align: center; font-size: 14px; } } .login_form_box{ width: 370px; height: 380px; margin: auto; position: absolute; top: 0; left: 40%; right: 0; bottom: 0; z-index: 100; background-color: #fff; padding: 18px 20px 0; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); } </style>

Ignore Space Show notes View

project/hivuiLogin/views/index.vue

export default {
  name: "login",
  components: {
    LoginPanel
  },
  data() {
    return {
      config: {
        title: window.customSysCofig?.loginTitle||this.$t('hivuiLogin_main_def_title'),
        loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg,
        loginLogoImg_height: window.customSysCofig?.loginLogo_h||56,
        loginLogoImg_width: window.customSysCofig?.loginLogo_w||206,
        loginBgImg: window.customSysCofig?.loginBgImg||_loginBgImg,
        copyright: window.customSysCofig?.copyright||this.$t('hivuiLogin_main_def_copyright'),
      },
    };
  },
  computed: {
    bgStyle() {
      return {
        "background-image": "url(" + this.config.loginBgImg + ")",
      };
    },
    logoStyle() {
      return {
        "background-image": "url(" + this.config.loginLogoImg + ")",
        height: this.config.loginLogoImg_height + "px",
        width: this.config.loginLogoImg_width + "px",
      };
    },
  },
  methods: {

handleLoginSuccess(data) {
      this.goMainPage();
    },
    //跳转到主页
    goMainPage(){
      if(!window.HIVUI_SETTING.isSingleLogin&&location.hash.indexOf("eapReturnUrl=")!=-1){
        let __eapReturnUrl=decodeURIComponent(location.hash.split("eapReturnUrl=")[1]);
        let hasTokenParams=getUrlValue(__eapReturnUrl,"access_token");
        if(false&&!window._global&&hasTokenParams){//正式环境
          location=setUrlValue(__eapReturnUrl,"access_token",getToken());
        }else{
          location=__eapReturnUrl;
        }
      }else{
        location = window.HIVUI_SETTING.mainPageUrl
        ? window.HIVUI_SETTING.mainPageUrl
        : "/" + projectName + "/hivuiMain/index.html#/";
      }
    },
  }
};
</script>

Show line notes below