From 3b9b33c2b5ab555696e1012ed1e35446c8052786 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 14 八月 2023 14:13:09 +0800
Subject: [PATCH] 更新大屏
---
src/views/loginPage/loginPage.vue | 34 ++++++++++++++++++++++++++++++----
1 files changed, 30 insertions(+), 4 deletions(-)
diff --git a/src/views/loginPage/loginPage.vue b/src/views/loginPage/loginPage.vue
index 7ad9d7c..a41bf07 100644
--- a/src/views/loginPage/loginPage.vue
+++ b/src/views/loginPage/loginPage.vue
@@ -1,5 +1,8 @@
<template>
<div class="login-container">
+ <div class="starBg">
+
+ </div>
<div class="loginContent">
<div class="welcc">广域特殊气体泄露在线监测预警系统</div>
<div class="loginPanel">
@@ -23,7 +26,7 @@
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 {
isScan: boolean;
@@ -45,6 +48,17 @@
// 页面加载时
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";/* 设置页面根节点字体大小 */
+ }
+ setRem();/* 初始化 rem */
+
+ window.onresize = () => {
+ setRem();/* 改变窗口大小时重新设置 rem */
+ }
});
return {
logoMini,
@@ -77,7 +91,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;
@@ -91,7 +117,7 @@
}
}
.loginContent {
- width: 32vw;
+ width: 40%;
display: flex;
flex-direction: column;
align-items: center;
@@ -109,7 +135,7 @@
}
.loginPanel {
width: 100%;
- padding: 4vh;
+ padding: 60px 180px 80px;
box-sizing: border-box;
display: flex;
flex-direction: column;
--
Gitblit v1.9.2