From be79ce19df6ea881de516ae0b44bfe527e90e736 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 29 六月 2022 19:37:24 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut
---
src/views/loginPage/loginPage.vue | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 160 insertions(+), 0 deletions(-)
diff --git a/src/views/loginPage/loginPage.vue b/src/views/loginPage/loginPage.vue
new file mode 100644
index 0000000..66c68bc
--- /dev/null
+++ b/src/views/loginPage/loginPage.vue
@@ -0,0 +1,160 @@
+<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>
+ <div class="loginContent">
+ <div class="loginContL">
+ <div class="apTitleT">新疆国泰新华</div>
+ <div class="apTitleB">安全风险预警监测系统</div>
+ <span></span>
+ </div>
+ <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>
+ </div>
+
+ </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import logoMini from '/@/assets/logo-mini.svg';
+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 {
+ 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),
+ };
+ },
+});
+</script>
+
+<style scoped lang="scss">
+.login-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ 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;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .loginContent{
+ width: 100%;
+ padding: 0 300px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+
+ .loginContL{
+ font-size: 48px;
+ font-weight: bold;
+ padding-top: 20px;
+ margin-right: 30px;
+
+ .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{
+ padding: 85px 70px;
+ background: #fff;
+ border-radius: 15px;
+ box-shadow: 0 8px 40px rgba(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;
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.2