From d0d78b9fbe144326f136ee048bb59d314413032e Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Tue, 27 May 2025 08:45:29 +0800
Subject: [PATCH] 修改导出
---
src/views/loginPage/loginPage.vue | 190 +++++++++++++++++++++++------------------------
1 files changed, 92 insertions(+), 98 deletions(-)
diff --git a/src/views/loginPage/loginPage.vue b/src/views/loginPage/loginPage.vue
index 14d69e8..e3b5c20 100644
--- a/src/views/loginPage/loginPage.vue
+++ b/src/views/loginPage/loginPage.vue
@@ -1,32 +1,21 @@
<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 class="loginContent">
+ <div class="loginPanel">
+ <div class="welcc">科学研究实验安全风险评估系统</div>
+ <div class="loginGroup">
+ <div class="loginPic">
+ <img src="../../assets/loginPage/login-pic.png">
+ </div>
+ <div style="width: 45%">
+ <el-tabs v-model="tabsActiveName">
+ <AccountLogin />
+ </el-tabs>
+ </div>
+ </div>
+ </div>
</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">技术支持：苏州国科鸿宇智能科技有限公司<br/><span>GTXH Intelligent Security Management System V1.0.1</span></div>
+<!-- <div class="rights">技术支持：苏州国科鸿宇智能科技有限公司<br/><span>GTXH Intelligent Security Management System V1.0.1</span></div>-->
</div>
</template>
@@ -38,8 +27,6 @@
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';
// 定义接口来定义对象的类型
interface LoginState {
@@ -64,8 +51,6 @@
// 页面加载时
onMounted(() => {
NextLoading.done();
- loginBg();
- loginApp();
});
return {
logoMini,
@@ -78,28 +63,60 @@
</script>
<style scoped lang="scss">
- @media screen and (min-width: 1200px){
+ @media screen and (min-width: 1366px){
.loginContent{
display: flex;
justify-content: space-around;
padding: 0 200px;
}
- .loginContL {
- font-size: 60px;
- font-weight: bold;
- margin-bottom: 100px;
+ .loginPic{
+ width: 55%;
+ height: 100%;
+ position: relative;
+
+ img{
+ width: 100%;
+ height: auto;
+ position: absolute;
+ bottom: -180px;
+ right: 5%;
+ margin-top: 40px;
+ }
}
}
- @media screen and (min-width: 960px) and (max-width: 1200px){
+ @media screen and (min-width: 1024px) and (max-width: 1366px){
+ .loginPic{
+ width: 55%;
+ height: 100%;
+ position: relative;
+
+ img{
+ width: 103%;
+ height: auto;
+ position: absolute;
+ bottom: -80px;
+ right: 0;
+ }
+ }
+ }
+ @media screen and (min-width: 960px) and (max-width: 1024px){
.loginContent{
display: flex;
justify-content: space-between;
padding: 0 40px;
}
- .loginContL {
- font-size: 40px;
- font-weight: bold;
- margin-bottom: 80px;
+ .loginPic{
+ width: 55%;
+ height: 100%;
+ position: relative;
+
+ img{
+ width: 103%;
+ height: auto;
+ position: absolute;
+ bottom: -80px;
+ right: 0;
+ }
}
}
.login-container {
@@ -108,87 +125,64 @@
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-size: 100% 100%;
/*background-image: radial-gradient(at center, #0075c3, #000b61);*/
- canvas {
- display: block;
- vertical-align: bottom;
- }
-
- #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: 1.2rem;
+ font-size: 12px;
color: #fff;
position: absolute;
bottom: 30px;
text-align: center;
span{
- font-size: 1rem;
+ font-size: 12px;
color: #eee;
}
}
.loginContent {
width: 100%;
- flex-wrap: wrap;
- align-items: center;
- margin-bottom: 60px;
+ display: flex;
+ justify-content: center;
- .loginContL {
- width: 100%;
-
- .apTitleT {
- color: #fff;
- margin-bottom: 20px;
- letter-spacing: 4px;
- }
- .apTitleB {
- color: #01d0ff;
- margin-bottom: 36px;
- letter-spacing: 4px;
- }
- & > span {
- display: block;
- width: 120px;
- height: 8px;
- background: #01d0ff;
- }
- }
.loginPanel {
- width: 65%;
- padding: 85px 70px;
+ width: 85%;
+ min-height: 56%;
+ padding: 80px 40px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
background: #fff;
min-width: 450px;
border-radius: 15px;
- box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
-
- .welc {
- font-size: 36px;
- font-family: 'PingFang SC';
- font-weight: normal;
- color: #999999;
- letter-spacing: 2px;
- margin-bottom: 15px;
- }
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
.welcc {
- font-size: 32px;
- font-family: 'PingFang SC';
- font-weight: lighter;
- color: #333;
- letter-spacing: 2px;
+ font-size: clamp(2.625rem, 1.911rem + 1.12vw, 3.25rem);
+ font-family: 'PingFang SC';
+ text-align: right;
+ font-weight: 900;
+ color: #485BD4;
+ letter-spacing: 2px;
+ white-space: nowrap;
+ position: relative;
+ z-index: 999;
+ text-shadow: 0 3px 5px rgba(72,91,212,.4);
+ }
+
+ :deep(.loginGroup){
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+
+ .el-tabs__content{
+ display: flex;
+ justify-content: center;
+ }
}
}
}
--
Gitblit v1.9.2