From 4076c14a8eac96cd716522f2cb15dcda0eb4fcef Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 10 四月 2024 08:37:53 +0800
Subject: [PATCH] 新修改
---
src/views/loginPage/loginPage.vue | 145 ++++++++++++++++++------------------------------
1 files changed, 55 insertions(+), 90 deletions(-)
diff --git a/src/views/loginPage/loginPage.vue b/src/views/loginPage/loginPage.vue
index 29c9c52..a002b1d 100644
--- a/src/views/loginPage/loginPage.vue
+++ b/src/views/loginPage/loginPage.vue
@@ -1,21 +1,22 @@
<template>
<div class="login-container">
+ <div class="starBg">
+
+ </div>
<div class="loginContent">
+ <div class="welcc">广域特殊气体泄漏在线监测预警系统</div>
<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">
+ <div style="width: 100%">
+ <div style="width:100%;text-align: center;font-size: 28px;color: #11FEEE">欢迎登录</div>
<AccountLogin />
- </el-tabs>
</div>
</div>
</div>
</div>
- <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>
@@ -27,10 +28,9 @@
import loginIconTwo from '/@/assets/login-icon-two.svg';
import { NextLoading } from '/@/utils/loading';
import AccountLogin from '/@/views/loginPage/component/accountLogin.vue';
-
+import "amfe-flexible";
// 定义接口来定义对象的类型
interface LoginState {
- tabsActiveName: string;
isScan: boolean;
}
@@ -41,7 +41,6 @@
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive<LoginState>({
- tabsActiveName: 'account',
isScan: false
});
// 获取布局配置信息
@@ -51,6 +50,19 @@
// 页面加载时
onMounted(() => {
NextLoading.done();
+ const baseSize = 38;
+ /* 设置 rem 函数 */
+ function setRem() {
+ const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
+ document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
+ console.log('切换尺寸>>',document.documentElement.style.fontSize)
+ }
+ setRem();/* 初始化 rem */
+
+ window.onresize = () => {
+ setRem();/* 改变窗口大小时重新设置 rem */
+ console.log('执行切换')
+ }
});
return {
logoMini,
@@ -63,62 +75,6 @@
</script>
<style scoped lang="scss">
- @media screen and (min-width: 1366px){
- .loginContent{
- display: flex;
- justify-content: space-around;
- padding: 0 200px;
- }
- .loginPic{
- width: 55%;
- height: 100%;
- position: relative;
-
- img{
- width: 103%;
- height: auto;
- position: absolute;
- bottom: -180px;
- right: 15%;
- margin-top: 40px;
- }
- }
- }
- @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;
- }
- .loginPic{
- width: 55%;
- height: 100%;
- position: relative;
-
- img{
- width: 103%;
- height: auto;
- position: absolute;
- bottom: -80px;
- right: 0;
- }
- }
- }
.login-container {
width: 100%;
height: 100%;
@@ -130,7 +86,19 @@
background: url('../../assets/loginPage/login-bg.jpg') no-repeat center;
background-size: 100% 100%;
/*background-image: radial-gradient(at center, #0075c3, #000b61);*/
-
+ .starBg{
+ width: 1030px;
+ height: 1135px;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 50px;
+ z-index: -1;
+ background: url("../../assets/loginPage/starFalls.gif") no-repeat center;
+ background-size: 100% 100%;
+ opacity: 0.1;
+ -webkit-opacity: 0.1;
+ }
.rights {
font-size: 12px;
color: #fff;
@@ -144,34 +112,31 @@
}
}
.loginContent {
- width: 100%;
+ width: 40%;
display: flex;
+ flex-direction: column;
+ align-items: center;
justify-content: center;
-
+ margin-top: -10vh;
+ .welcc {
+ font-size: 40px;
+ font-family: 'PingFang SC';
+ text-align: center;
+ font-weight: 900;
+ color: #11FEEE;
+ white-space: nowrap;
+ z-index: 9999;
+ margin-bottom: 3vh;
+ }
.loginPanel {
- width: 85%;
- min-height: 56%;
- padding: 80px 40px;
+ width: 100%;
+ padding: 60px 180px 80px;
box-sizing: border-box;
display: flex;
flex-direction: column;
- align-items: flex-end;
- background: #fff;
- min-width: 450px;
- border-radius: 15px;
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
- .welcc {
- font-size: 52px;
- font-family: 'PingFang SC';
- text-align: right;
- font-weight: 900;
- color: #485BD4;
- letter-spacing: 6px;
- white-space: nowrap;
- position: relative;
- z-index: 9999;
- text-shadow: 0 3px 5px rgba(72,91,212,.4);
- }
+ align-items: center;
+ background: url("../../assets/loginPage/panel-bg.png") no-repeat center;
+ background-size: 100% 100%;
:deep(.loginGroup){
width: 100%;
--
Gitblit v1.9.2