From 85c7235b4fe8d38f6e635d6af17d19642d6f3421 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 15 Mar 2022 17:06:33 +0800
Subject: [PATCH] 样式更改
---
src/page/login/index.vue | 185 +++++++++---------
public/img/bg/bg.jpg | 0
src/main.js | 96 ++++----
src/styles/login.scss | 294 ++++++++++++++++-------------
4 files changed, 302 insertions(+), 273 deletions(-)
diff --git a/public/img/bg/bg.jpg b/public/img/bg/bg.jpg
index 3ed31d9..dd66fc4 100644
--- a/public/img/bg/bg.jpg
+++ b/public/img/bg/bg.jpg
Binary files differ
diff --git a/src/main.js b/src/main.js
index 7661545..fb0138d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,62 +1,62 @@
-import Vue from 'vue';
-import axios from './router/axios';
-import VueAxios from 'vue-axios';
-import App from './App';
-import router from './router/router';
-import './permission'; // 权限
-import './error'; // 日志
-import './cache';//页面缓存
-import store from './store';
-import {loadStyle} from './util/util'
-import * as urls from '@/config/env';
-import Element from 'element-ui';
+import Vue from 'vue'
+import axios from './router/axios'
+import VueAxios from 'vue-axios'
+import App from './App'
+import router from './router/router'
+import './permission' // 权限
+import './error' // 日志
+import './cache'//页面缓存
+import store from './store'
+import { loadStyle } from './util/util'
+import * as urls from '@/config/env'
+import Element from 'element-ui'
import {
- iconfontUrl,
- iconfontVersion
-} from '@/config/env';
-import i18n from './lang'; // Internationalization
-import './styles/common.scss';
-import basicBlock from './components/basic-block/main';
-import basicContainer from './components/basic-container/main';
-import thirdRegister from './components/third-register/main';
-import avueUeditor from 'avue-plugin-ueditor';
-import website from '@/config/website';
-import crudCommon from '@/mixins/crud';
+ iconfontUrl,
+ iconfontVersion
+} from '@/config/env'
+import i18n from './lang' // Internationalization
+import './styles/common.scss'
+import basicBlock from './components/basic-block/main'
+import basicContainer from './components/basic-container/main'
+import thirdRegister from './components/third-register/main'
+import avueUeditor from 'avue-plugin-ueditor'
+import website from '@/config/website'
+import crudCommon from '@/mixins/crud'
// 注册全局crud驱动
-window.$crudCommon = crudCommon;
+window.$crudCommon = crudCommon
// 加载Vue拓展
-Vue.use(router);
-Vue.use(VueAxios, axios);
+Vue.use(router)
+Vue.use(VueAxios, axios)
Vue.use(Element, {
- i18n: (key, value) => i18n.t(key, value)
-});
+ i18n: (key, value) => i18n.t(key, value)
+})
Vue.use(window.AVUE, {
- size: 'small',
- tableSize: 'small',
- calcHeight: 65,
- i18n: (key, value) => i18n.t(key, value)
-});
+ size: 'small',
+ tableSize: 'small',
+ calcHeight: 65,
+ i18n: (key, value) => i18n.t(key, value)
+})
// 注册全局容器
-Vue.component('basicContainer', basicContainer);
-Vue.component('basicBlock', basicBlock);
-Vue.component('thirdRegister', thirdRegister);
-Vue.component('avueUeditor', avueUeditor);
+Vue.component('basicContainer', basicContainer)
+Vue.component('basicBlock', basicBlock)
+Vue.component('thirdRegister', thirdRegister)
+Vue.component('avueUeditor', avueUeditor)
// 加载相关url地址
Object.keys(urls).forEach(key => {
- Vue.prototype[key] = urls[key];
-});
+ Vue.prototype[key] = urls[key]
+})
// 加载website
-Vue.prototype.website = website;
+Vue.prototype.website = website
// 动态加载阿里云字体库
iconfontVersion.forEach(ele => {
- loadStyle(iconfontUrl.replace('$key', ele));
-});
+ loadStyle(iconfontUrl.replace('$key', ele))
+})
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
new Vue({
- router,
- store,
- i18n,
- render: h => h(App)
-}).$mount('#app');
+ router,
+ store,
+ i18n,
+ render: h => h(App)
+}).$mount('#app')
diff --git a/src/page/login/index.vue b/src/page/login/index.vue
index 073aa9b..a74ec31 100644
--- a/src/page/login/index.vue
+++ b/src/page/login/index.vue
@@ -1,119 +1,116 @@
<template>
- <div class="login-container"
- ref="login"
- @keyup.enter.native="handleLogin">
- <top-color v-show="false"></top-color>
- <div class="login-weaper animated bounceInDown">
- <div class="login-left">
- <div class="login-time">
- {{time}}
+ <div class="login-container" ref="login" @keyup.enter.native="handleLogin">
+ <top-color v-show="false"></top-color>
+ <div class="login-weaper animated bounceInDown">
+ <div class="login-left">
+ <div class="login-time">{{time}}</div>
+ <img class="img" src="/img/logos.png" alt />
+ <p class="title">{{ $t('login.info') }}</p>
+ </div>
+ <div class="login-radius"></div>
+ <div class="login-radius-bg"></div>
+ <div class="login-border">
+ <div class="login-main">
+ <h4 class="login-title">
+ {{ $t('login.title') }}
+ <!-- <top-lang></top-lang>-->
+ </h4>
+ <userLogin v-if="activeName==='user'"></userLogin>
+ <codeLogin v-else-if="activeName==='code'"></codeLogin>
+ <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
+ <div class="login-menu">
+ <!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>-->
+ <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
+ <!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>-->
+ </div>
+ </div>
+ </div>
</div>
- <img class="img" src="/img/logos.png" alt="">
- <p class="title">{{ $t('login.info') }}</p>
- </div>
- <div class="login-border">
- <div class="login-main">
- <h4 class="login-title">
- {{ $t('login.title') }}
-<!-- <top-lang></top-lang>-->
- </h4>
- <userLogin v-if="activeName==='user'"></userLogin>
- <codeLogin v-else-if="activeName==='code'"></codeLogin>
- <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
- <div class="login-menu">
-<!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>-->
- <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
-<!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>-->
- </div>
- </div>
-
- </div>
</div>
- </div>
</template>
<script>
- import userLogin from "./userlogin";
- import codeLogin from "./codelogin";
- import thirdLogin from "./thirdlogin";
- import {mapGetters} from "vuex";
- import {dateFormat} from "@/util/date";
- import {validatenull} from "@/util/validate";
- import topLang from "@/page/index/top/top-lang";
- import topColor from "@/page/index/top/top-color";
- import {getQueryString, getTopUrl} from "@/util/util";
+import userLogin from "./userlogin"
+import codeLogin from "./codelogin"
+import thirdLogin from "./thirdlogin"
+import { mapGetters } from "vuex"
+import { dateFormat } from "@/util/date"
+import { validatenull } from "@/util/validate"
+import topLang from "@/page/index/top/top-lang"
+import topColor from "@/page/index/top/top-color"
+import { getQueryString, getTopUrl } from "@/util/util"
- export default {
+export default {
name: "login",
components: {
- userLogin,
- codeLogin,
- thirdLogin,
- topLang,
- topColor
+ userLogin,
+ codeLogin,
+ thirdLogin,
+ topLang,
+ topColor
},
- data() {
- return {
- time: "",
- activeName: "user",
- socialForm: {
- tenantId: "000000",
- source: "",
- code: "",
- state: "",
+ data () {
+ return {
+ time: "",
+ activeName: "user",
+ socialForm: {
+ tenantId: "000000",
+ source: "",
+ code: "",
+ state: "",
+ }
}
- };
},
watch: {
- $route() {
- this.handleLogin();
- }
+ $route () {
+ this.handleLogin()
+ }
},
- created() {
- this.handleLogin();
- this.getTime();
+ created () {
+ this.handleLogin()
+ this.getTime()
},
- mounted() {
+ mounted () {
},
computed: {
- ...mapGetters(["website", "tagWel"])
+ ...mapGetters(["website", "tagWel"])
},
props: [],
methods: {
- getTime() {
- setInterval(() => {
- this.time = dateFormat(new Date());
- }, 1000);
- },
- handleLogin() {
- const topUrl = getTopUrl();
- const redirectUrl = "/oauth/redirect/";
- this.socialForm.source = getQueryString("source");
- this.socialForm.code = getQueryString("code");
- this.socialForm.state = getQueryString("state");
- if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
- let source = topUrl.split("?")[0];
- source = source.split(redirectUrl)[1];
- this.socialForm.source = source;
+ getTime () {
+ setInterval(() => {
+ this.time = dateFormat(new Date())
+ }, 1000)
+ },
+ handleLogin () {
+ const topUrl = getTopUrl()
+ const redirectUrl = "/oauth/redirect/"
+ this.socialForm.source = getQueryString("source")
+ this.socialForm.code = getQueryString("code")
+ this.socialForm.state = getQueryString("state")
+ if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
+ let source = topUrl.split("?")[0]
+ source = source.split(redirectUrl)[1]
+ this.socialForm.source = source
+ }
+ if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
+ const loading = this.$loading({
+ lock: true,
+ text: '第三方系统登录中,请稍后。。。',
+ spinner: "el-icon-loading"
+ })
+ this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
+ window.location.href = topUrl.split(redirectUrl)[0]
+ this.$router.push({ path: this.tagWel.value })
+ loading.close()
+ }).catch(() => {
+ loading.close()
+ })
+ }
}
- if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
- const loading = this.$loading({
- lock: true,
- text: '第三方系统登录中,请稍后。。。',
- spinner: "el-icon-loading"
- });
- this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
- window.location.href = topUrl.split(redirectUrl)[0];
- this.$router.push({path: this.tagWel.value});
- loading.close();
- }).catch(() => {
- loading.close();
- });
- }
- }
}
- };
+};
</script>
<style lang="scss">
- @import "@/styles/login.scss";
+@import '@/styles/login.scss';
</style>
diff --git a/src/styles/login.scss b/src/styles/login.scss
index 498d5af..92a197a 100644
--- a/src/styles/login.scss
+++ b/src/styles/login.scss
@@ -1,184 +1,216 @@
.login-container {
- display: flex;
- align-items: center;
- position: relative;
- width: 100%;
- height: 100%;
- margin: 0 auto;
- background-image: url("/img/bg/bg.jpg");
- background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+ background-image: url("/img/bg/bg.jpg");
+ background-size: 100% 100%;
}
.login-weaper {
- margin: 0 auto;
- width: 1000px;
- box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ width: 1000px;
+ height: 500px;
+ min-height: 500px;
+ box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
- .el-input-group__append {
- border: none;
- }
+ .el-input-group__append {
+ border: none;
+ }
}
.login-left,
-.login-border {
- position: relative;
- min-height: 500px;
- align-items: center;
- display: flex;
+.login-border,
+.login-radius,
+.login-radius-bg {
+ position: relative;
+ min-height: 500px;
+ align-items: center;
+ display: flex;
}
.login-left {
- border-top-left-radius: 5px;
- border-bottom-left-radius: 5px;
- justify-content: center;
- flex-direction: column;
- background-color: #409EFF;
- color: #fff;
- float: left;
- width: 50%;
- position: relative;
+ position: absolute;
+ left: 0;
+ top: -40px;
+ padding: 40px 0;
+ width: 34%;
+ border-top-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+ justify-content: center;
+ flex-direction: column;
+ background-color: #02255e;
+ color: #fff;
+ z-index: 10;
+}
+
+.login-radius {
+ position: absolute;
+ left: 34%;
+ top: -40px;
+ padding: 40px 0;
+ width: 16%;
+ border-top-right-radius: 50%;
+ border-bottom-right-radius: 50%;
+ background-color: #02255e;
+ z-index: 10;
}
.login-left .img {
- width: 140px;
+ width: 140px;
}
.login-time {
- position: absolute;
- left: 25px;
- top: 25px;
- width: 100%;
- color: #fff;
- font-weight: 200;
- opacity: 0.9;
- font-size: 18px;
- overflow: hidden;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ width: 100%;
+ color: #fff;
+ font-weight: 200;
+ opacity: 0.9;
+ font-size: 18px;
+ overflow: hidden;
}
.login-left .title {
- margin-top: 60px;
- text-align: center;
- color: #fff;
- font-weight: 300;
- letter-spacing: 2px;
- font-size: 25px;
+ margin-top: 60px;
+ text-align: center;
+ color: #fff;
+ font-weight: 300;
+ letter-spacing: 2px;
+ font-size: 25px;
}
.login-border {
- border-left: none;
- border-top-right-radius: 5px;
- border-bottom-right-radius: 5px;
- color: #fff;
- background-color: #fff;
- width: 50%;
- float: left;
- box-sizing: border-box;
+ position: absolute;
+ right: 0;
+ border-left: none;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+ color: #fff;
+ background-color: #fff;
+ width: 50%;
+ box-sizing: border-box;
+}
+
+.login-radius-bg {
+ position: absolute;
+ left: 34%;
+ background-color: #fff;
+ width: 16%;
}
.login-main {
- margin: 0 auto;
- width: 65%;
- box-sizing: border-box;
+ margin: 0 auto;
+ width: 65%;
+ box-sizing: border-box;
}
-.login-main > h3 {
- margin-bottom: 20px;
+.login-main>h3 {
+ margin-bottom: 20px;
}
-.login-main > p {
- color: #76838f;
+.login-main>p {
+ color: #76838f;
}
.login-title {
- color: #333;
- margin-bottom: 40px;
- font-weight: 500;
- font-size: 22px;
- text-align: center;
- letter-spacing: 4px;
+ color: #333;
+ margin-bottom: 40px;
+ font-weight: 500;
+ font-size: 22px;
+ text-align: center;
+ letter-spacing: 4px;
}
.login-menu {
- margin-top: 40px;
- width: 100%;
- text-align: center;
+ margin-top: 40px;
+ width: 100%;
+ text-align: center;
- a {
- color: #999;
- font-size: 12px;
- margin: 0px 8px;
- }
+ a {
+ color: #999;
+ font-size: 12px;
+ margin: 0px 8px;
+ }
}
.login-submit {
- width: 100%;
- height: 45px;
- border: 1px solid #409EFF;
- background: none;
- font-size: 18px;
- letter-spacing: 2px;
- font-weight: 300;
- color: #409EFF;
- cursor: pointer;
- margin-top: 30px;
- font-family: "neo";
- transition: 0.25s;
+ width: 100%;
+ height: 45px;
+ border: 1px solid #02255e;
+ background: none;
+ font-size: 18px;
+ letter-spacing: 2px;
+ font-weight: 300;
+ color: #02255e;
+ cursor: pointer;
+ margin-top: 30px;
+ font-family: "neo";
+ transition: 0.25s;
}
.login-form {
- margin: 10px 0;
+ margin: 10px 0;
- i {
- color: #333;
- }
-
- .el-form-item__content {
- width: 100%;
- }
-
- .el-form-item {
- margin-bottom: 12px;
- }
-
- .el-input {
- input {
- padding-bottom: 10px;
- text-indent: 5px;
- background: transparent;
- border: none;
- border-radius: 0;
- color: #333;
- border-bottom: 1px solid rgb(235, 237, 242);
+ i {
+ color: #333;
}
- .el-input__prefix {
- i {
- padding: 0 5px;
- font-size: 16px !important;
- }
+ .el-form-item__content {
+ width: 100%;
}
- }
+
+ .el-form-item {
+ margin-bottom: 12px;
+ }
+
+ .el-input {
+ input {
+ padding-bottom: 10px;
+ text-indent: 5px;
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ color: #333;
+ border-bottom: 1px solid rgb(235, 237, 242);
+ }
+
+ .el-input__prefix {
+ i {
+ padding: 0 5px;
+ font-size: 16px !important;
+ }
+ }
+ }
}
.login-code {
- display: flex;
- align-items: center;
- justify-content: space-around;
- margin: 0 0 0 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ margin: 0 0 0 10px;
}
.login-code-img {
- margin-top: 2px;
- width: 100px;
- height: 38px;
- background-color: #fdfdfd;
- border: 1px solid #f0f0f0;
- color: #333;
- font-size: 14px;
- font-weight: bold;
- letter-spacing: 5px;
- line-height: 38px;
- text-indent: 5px;
- text-align: center;
- cursor:pointer!important;
-}
+ margin-top: 2px;
+ width: 100px;
+ height: 38px;
+ background-color: #fdfdfd;
+ border: 1px solid #f0f0f0;
+ color: #333;
+ font-size: 14px;
+ font-weight: bold;
+ letter-spacing: 5px;
+ line-height: 38px;
+ text-indent: 5px;
+ text-align: center;
+ cursor: pointer !important;
+}
\ No newline at end of file
--
Gitblit v1.9.3