From 95628ed399038b576d480206bebc5327a55d3b1d Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期五, 19 八月 2022 20:42:47 +0800
Subject: [PATCH] Default Changelist
---
src/views/loginPage/loginPage.vue | 292 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 161 insertions(+), 131 deletions(-)
diff --git a/src/views/loginPage/loginPage.vue b/src/views/loginPage/loginPage.vue
index 66c68bc..fab7b59 100644
--- a/src/views/loginPage/loginPage.vue
+++ b/src/views/loginPage/loginPage.vue
@@ -1,29 +1,33 @@
<template>
- <div class="login-container">
- <div id="particles-js" style="display: flex;align-items: center;justify-content: center">
- <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="472" height="625"></canvas>
- </div>
- <div class="loginContent">
- <div class="loginContL">
- <div class="apTitleT">新疆国泰新华</div>
- <div class="apTitleB">安全风险预警监测系统</div>
- <span></span>
- </div>
- <div class="loginPanel">
- <div class="welc">WELCOME！</div>
- <div class="welcc">欢迎登录</div>
-<!-- <div class="loginInfo">-->
-<!-- <el-input v-model="input" placeholder="Please input" />-->
-<!-- </div>-->
- <div>
- <el-tabs v-model="tabsActiveName">
- <AccountLogin />
- </el-tabs>
- </div>
- </div>
- </div>
-
- </div>
+ <div class="login-container">
+ <div id="particles-js" style="display: flex; align-items: center; justify-content: center">
+ <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%" width="472" height="625"></canvas>
+ </div>
+ <el-row class="loginContent">
+ <el-col :md="12">
+ <div class="loginContL">
+ <div class="apTitleT">新疆国泰新华</div>
+ <div class="apTitleB">安全风险预警监测系统</div>
+ <span></span>
+ </div>
+ </el-col>
+ <el-col :md="12" style="display: flex; justify-content: flex-end">
+ <div class="loginPanel">
+ <div class="welc">WELCOME！</div>
+ <div class="welcc">欢迎登录</div>
+ <!-- <div class="loginInfo">-->
+ <!-- <el-input v-model="input" placeholder="Please input" />-->
+ <!-- </div>-->
+ <div>
+ <el-tabs v-model="tabsActiveName">
+ <AccountLogin />
+ </el-tabs>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ <div class="rights">技术支持：苏州国科鸿宇智能科技有限公司</div>
+ </div>
</template>
<script lang="ts">
@@ -34,127 +38,153 @@
import loginIconTwo from '/@/assets/login-icon-two.svg';
import { NextLoading } from '/@/utils/loading';
import AccountLogin from '/@/views/loginPage/component/accountLogin.vue';
-import { loginBg } from '../../../static/loginPage.js/login.js'
-import { loginApp } from '../../../static/loginPage.js/loginApp.js'
+import { loginBg } from '../../../static/loginPage.js/login.js';
+import { loginApp } from '../../../static/loginPage.js/loginApp.js';
// 定义接口来定义对象的类型
interface LoginState {
- tabsActiveName: string;
- isScan: boolean;
+ tabsActiveName: string;
+ isScan: boolean;
}
export default defineComponent({
- name: 'loginIndex',
- components: { AccountLogin },
- setup() {
- const storesThemeConfig = useThemeConfig();
- const { themeConfig } = storeToRefs(storesThemeConfig);
- const state = reactive<LoginState>({
- tabsActiveName: 'account',
- isScan: false,
- });
- // 获取布局配置信息
- const getThemeConfig = computed(() => {
- return themeConfig.value;
- });
- // 页面加载时
- onMounted(() => {
- NextLoading.done();
- loginBg();
- loginApp()
- });
- return {
- logoMini,
- loginIconTwo,
- getThemeConfig,
- ...toRefs(state),
- };
- },
+ name: 'loginIndex',
+ components: { AccountLogin },
+ setup() {
+ const storesThemeConfig = useThemeConfig();
+ const { themeConfig } = storeToRefs(storesThemeConfig);
+ const state = reactive<LoginState>({
+ tabsActiveName: 'account',
+ isScan: false
+ });
+ // 获取布局配置信息
+ const getThemeConfig = computed(() => {
+ return themeConfig.value;
+ });
+ // 页面加载时
+ onMounted(() => {
+ NextLoading.done();
+ loginBg();
+ loginApp();
+ });
+ return {
+ logoMini,
+ loginIconTwo,
+ getThemeConfig,
+ ...toRefs(state)
+ };
+ }
});
</script>
<style scoped lang="scss">
+ @media screen and (min-width: 1200px){
+ .loginContent{
+ display: flex;
+ justify-content: space-around;
+ padding: 0 200px;
+ }
+ .loginContL {
+ font-size: 60px;
+ font-weight: bold;
+ margin-bottom: 100px;
+ }
+ }
+ @media screen and (min-width: 960px) and (max-width: 1200px){
+ .loginContent{
+ display: flex;
+ justify-content: space-between;
+ padding: 0 40px;
+ }
+ .loginContL {
+ font-size: 40px;
+ font-weight: bold;
+ margin-bottom: 80px;
+ }
+ }
.login-container {
- width: 100%;
- height: 100%;
- position: relative;
- z-index: 999;
- display: flex;
- align-items: center;
- justify-content: center;
- background-image: radial-gradient(at center, #0075c3, #000b61);
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 999;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: url('../../assets/loginPage/login-bg.jpg') no-repeat center;
+ /*background-image: radial-gradient(at center, #0075c3, #000b61);*/
- canvas {
- display: block;
- vertical-align: bottom;
- }
+ canvas {
+ display: block;
+ vertical-align: bottom;
+ }
- #particles-js {
- width: 100%;
- height: 100%;
+ #particles-js {
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .rights {
+ font-size: 16px;
+ color: #fff;
+ position: absolute;
+ bottom: 30px;
+ }
+ .loginContent {
+ width: 100%;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-bottom: 60px;
- background-size: cover;
- background-position: 50% 50%;
- background-repeat: no-repeat;
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- }
+ .loginContL {
+ width: 100%;
- .loginContent{
- width: 100%;
- padding: 0 300px;
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
+ .apTitleT {
+ color: #fff;
+ margin-bottom: 20px;
+ letter-spacing: 4px;
+ }
+ .apTitleB {
+ color: #01d0ff;
+ margin-bottom: 40px;
+ letter-spacing: 4px;
+ }
+ & > span {
+ display: block;
+ width: 120px;
+ height: 8px;
+ background: #01d0ff;
+ }
+ }
+ .loginPanel {
+ width: 65%;
+ padding: 85px 70px;
+ background: #fff;
+ min-width: 450px;
+ border-radius: 15px;
+ box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
- .loginContL{
- font-size: 48px;
- font-weight: bold;
- padding-top: 20px;
- margin-right: 30px;
-
- .apTitleT{
- color: #fff;
- margin-bottom: 20px;
- letter-spacing: 4px;
- }
- .apTitleB{
- color: #01d0ff;
- margin-bottom: 40px;
- letter-spacing: 4px;
- }
- &>span{
- display: block;
- width: 120px;
- height: 8px;
- background: #01d0ff;
- }
- }
- .loginPanel{
- padding: 85px 70px;
- background: #fff;
- border-radius: 15px;
- box-shadow: 0 8px 40px rgba(0,0,0,.15);
-
- .welc{
- font-size: 36px;
- font-family: "PingFang SC";
- font-weight: normal;
- color: #999999;
- letter-spacing: 2px;
- margin-bottom: 15px;
- }
- .welcc{
- font-size: 32px;
- font-family: "PingFang SC";
- font-weight: lighter;
- color: #333;
- letter-spacing: 2px;
- }
- }
- }
+ .welc {
+ font-size: 36px;
+ font-family: 'PingFang SC';
+ font-weight: normal;
+ color: #999999;
+ letter-spacing: 2px;
+ margin-bottom: 15px;
+ }
+ .welcc {
+ font-size: 32px;
+ font-family: 'PingFang SC';
+ font-weight: lighter;
+ color: #333;
+ letter-spacing: 2px;
+ }
+ }
+ }
}
</style>
--
Gitblit v1.9.2