From 7df64634d3d7b292713eebfa008c40b3f5f9f65f Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期二, 20 九月 2022 15:57:03 +0800
Subject: [PATCH] 修改
---
src/views/loginPage/loginPage.vue | 237 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 119 insertions(+), 118 deletions(-)
diff --git a/src/views/loginPage/loginPage.vue b/src/views/loginPage/loginPage.vue
index 66c68bc..a2e26c0 100644
--- a/src/views/loginPage/loginPage.vue
+++ b/src/views/loginPage/loginPage.vue
@@ -12,9 +12,9 @@
<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 class="loginInfo">-->
+ <!-- <el-input v-model="input" placeholder="Please input" />-->
+ <!-- </div>-->
<div>
<el-tabs v-model="tabsActiveName">
<AccountLogin />
@@ -27,134 +27,135 @@
</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'
+ 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;
-}
+ // 定义接口来定义对象的类型
+ 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),
- };
- },
-});
+ 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 {
+ .login-container {
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;
+ position: relative;
+ z-index: 999;
display: flex;
- align-items: flex-start;
- justify-content: space-between;
+ align-items: center;
+ justify-content: center;
+ background: url("../../assets/loginPage/login-bg.jpg") no-repeat center;
+ /*background-image: radial-gradient(at center, #0075c3, #000b61);*/
- .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;
- }
+ canvas {
+ display: block;
+ vertical-align: bottom;
}
- .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;
+ #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: 80px;
+ 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;
+ }
}
- .welcc{
- font-size: 32px;
- font-family: "PingFang SC";
- font-weight: lighter;
- color: #333;
- letter-spacing: 2px;
+ .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