新修改

马宇豪

2024-04-10 4076c14a8eac96cd716522f2cb15dcda0eb4fcef

 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%;