更新大屏

马宇豪

2023-08-14 3b9b33c2b5ab555696e1012ed1e35446c8052786

 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;