修改

Your Name

2022-08-11 988558aaa309068fd393cc654be537434b0a15ea

 src/views/loginPage/loginPage.vue

@@ -1,33 +1,33 @@
<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>
      <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">技术支持：苏州国科鸿宇智能科技有限公司</div>
   </div>
    <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>
        <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">技术支持：苏州国科鸿宇智能科技有限公司</div>
    </div>
</template>

<script lang="ts">
@@ -38,133 +38,133 @@
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'
import { loginBg } from '../../../static/loginPage.js/login.js';
import { loginApp } from '../../../static/loginPage.js/loginApp.js';

// 定义接口来定义对象的类型
interface LoginState {
   tabsActiveName: string;
   isScan: boolean;
    tabsActiveName: string;
    isScan: boolean;
}

export default defineComponent({
   name: 'loginIndex',
   components: { AccountLogin },
   setup() {
      const storesThemeConfig = useThemeConfig();
      const { themeConfig } = storeToRefs(storesThemeConfig);
      const state = reactive<LoginState>({
         tabsActiveName: 'account',
         isScan: false,
      });
      // 获取布局配置信息
      const getThemeConfig = computed(() => {
         return themeConfig.value;
      });
      // 页面加载时
      onMounted(() => {
         NextLoading.done();
         loginBg();
         loginApp()
      });
      return {
         logoMini,
         loginIconTwo,
         getThemeConfig,
         ...toRefs(state),
      };
   },
    name: 'loginIndex',
    components: { AccountLogin },
    setup() {
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const state = reactive<LoginState>({
            tabsActiveName: 'account',
            isScan: false
        });
        // 获取布局配置信息
        const getThemeConfig = computed(() => {
            return themeConfig.value;
        });
        // 页面加载时
        onMounted(() => {
            NextLoading.done();
            loginBg();
            loginApp();
        });
        return {
            logoMini,
            loginIconTwo,
            getThemeConfig,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="scss">
.login-container {
   width: 100%;
   height: 100%;
   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-image: radial-gradient(at center, #0075c3, #000b61);*/
    width: 100%;
    height: 100%;
    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-image: radial-gradient(at center, #0075c3, #000b61);*/

   canvas {
      display: block;
      vertical-align: bottom;
   }
    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: 14px;
      color: #fff;
   }
   .loginContent{
      width: 100%;
      padding: 0 200px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 40px;
    #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: 16px;
        color: #fff;
    }
    .loginContent {
        width: 100%;
        padding: 0 200px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 60px;

      .loginContL{
         width: 100%;
         font-size: 60px;
         font-weight: bold;
         margin-bottom: 100px;
        .loginContL {
            width: 100%;
            font-size: 60px;
            font-weight: bold;
            margin-bottom: 100px;

         .apTitleT{
            color: #fff;
            margin-bottom: 20px;
            letter-spacing: 4px;
         }
         .apTitleB{
            color: #01d0ff;
            margin-bottom: 40px;
            letter-spacing: 4px;
         }
         &>span{
            display: block;
            width: 120px;
            height: 8px;
            background: #01d0ff;
         }
      }
      .loginPanel{
         width: 65%;
         padding: 85px 70px;
         background: #fff;
         min-width: 450px;
         border-radius: 15px;
         box-shadow: 0 8px 40px rgba(0,0,0,.15);
            .apTitleT {
                color: #fff;
                margin-bottom: 20px;
                letter-spacing: 4px;
            }
            .apTitleB {
                color: #01d0ff;
                margin-bottom: 40px;
                letter-spacing: 4px;
            }
            & > span {
                display: block;
                width: 120px;
                height: 8px;
                background: #01d0ff;
            }
        }
        .loginPanel {
            width: 65%;
            padding: 85px 70px;
            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;
         }
         .welcc{
            font-size: 32px;
            font-family: "PingFang SC";
            font-weight: lighter;
            color: #333;
            letter-spacing: 2px;
         }
      }
   }
            .welc {
                font-size: 36px;
                font-family: 'PingFang SC';
                font-weight: normal;
                color: #999999;
                letter-spacing: 2px;
                margin-bottom: 15px;
            }
            .welcc {
                font-size: 32px;
                font-family: 'PingFang SC';
                font-weight: lighter;
                color: #333;
                letter-spacing: 2px;
            }
        }
    }
}
</style>