Merge branch 'master' of https://sinanoaq.cn:8888/r/scienceexperimentweb

Your Name

2023-02-24 e989421722e522f4879a354a15ba14912d7acaaa

 src/views/loginPage/loginPage.vue

@@ -1,31 +1,20 @@
<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>
</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,
@@ -84,22 +69,12 @@
            justify-content: space-around;
            padding: 0 200px;
        }
        .loginContL {
            font-size: 60px;
            font-weight: bold;
            margin-bottom: 100px;
        }
    }
    @media screen and (min-width: 960px) and (max-width: 1200px){
        .loginContent{
            display: flex;
            justify-content: space-between;
            padding: 0 40px;
        }
        .loginContL {
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 80px;
        }
    }
.login-container {
@@ -108,87 +83,74 @@
    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: 52px;
              font-family: 'PingFang SC';
              text-align: right;
              font-weight: 900;
              color: #485BD4;
              letter-spacing: 6px;
              white-space: nowrap;
            }

            :deep(.loginGroup){
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              .loginPic{
                width: 55%;
                height: 100%;
                position: relative;

                img{
                  width: 103%;
                  height: auto;
                  position: absolute;
                  bottom: -180px;
                  right: 15%;
                  margin-top: 40px;
                }
              }
              .el-tabs__content{
                display: flex;
                justify-content: center;
              }
            }
        }
    }