|
|
@@ -1,5 +1,25 @@
|
|
|
<template>
|
|
|
- <div class="login-container flex z-10">
|
|
|
+ <!-- 初始加载状态 -->
|
|
|
+ <div v-if="state.isInitializing" class="login-loading-container">
|
|
|
+ <div class="login-loading-content">
|
|
|
+ <div class="loading-next container-of-loaders">
|
|
|
+ <div id="loader3" class="loader-container">
|
|
|
+
|
|
|
+ <div class="loader three"></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- <div class="login-loading-logo">
|
|
|
+ <img :src="siteLogo" alt="" style="width: 60px; height: 60px;">
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="login-loading-text">设备借还系统</div> -->
|
|
|
+ <div class="login-loading-spinner"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主要内容 -->
|
|
|
+ <div v-else class="login-container flex z-10" :class="{ loaded: !state.isInitializing }">
|
|
|
<div class="login-left">
|
|
|
<div class="login-left-logo">
|
|
|
<!-- <img :src="siteLogo" /> -->
|
|
|
@@ -13,22 +33,23 @@
|
|
|
</div>
|
|
|
<div class="login-right flex z-10">
|
|
|
<!-- <div class="login-right-warp-mian-title">客户服务专线:021-8888888</div> -->
|
|
|
-
|
|
|
+
|
|
|
<div class="login-right-warp flex-margin">
|
|
|
-
|
|
|
+
|
|
|
<!-- <span class="login-right-warp-one"></span>-->
|
|
|
<!-- <span class="login-right-warp-two"></span>-->
|
|
|
<div class="login-right-warp-mian">
|
|
|
-
|
|
|
+
|
|
|
<div class="flex flex-col items-center justify-center p-8 pt-14">
|
|
|
- <!-- Logo -->
|
|
|
+ <!-- Logo ||'../../../assets/rayLogo.png'-->
|
|
|
<div class="logo-title">
|
|
|
- <img :src="siteLogo||'../../../assets/rayLogo.png'" alt="" style="width: 70px; height: 70px;margin-right: 10px;">
|
|
|
- <span style="font-size: 20px;font-weight: 600;letter-spacing: 3px;color: #595959;">账号登录</span>
|
|
|
+ <img :src="siteLogo" alt="" style="width: 90px; height: 90px;margin-right: 10px;">
|
|
|
+ <span
|
|
|
+ style="margin: 20px 0; font-size: 26px;font-weight: 600;letter-spacing: 3px;color: #595959;">设备借还系统</span>
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="text-4xl font-bold text-red-600 mb-12"></div> -->
|
|
|
-
|
|
|
+
|
|
|
<!-- 登录表单区域 -->
|
|
|
<div class="w-full max-w-sm">
|
|
|
<div v-if="!state.isScan">
|
|
|
@@ -37,11 +58,11 @@
|
|
|
<ChangePwd />
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane :label="$t('message.label.one1')" name="account" v-else> -->
|
|
|
- <Account />
|
|
|
- <!-- </el-tab-pane> -->
|
|
|
+ <Account />
|
|
|
+ <!-- </el-tab-pane> -->
|
|
|
|
|
|
- <!-- TODO 手机号码登录未接入,展示隐藏 -->
|
|
|
- <!-- <el-tab-pane :label="$t('message.label.two2')" name="mobile">
|
|
|
+ <!-- TODO 手机号码登录未接入,展示隐藏 -->
|
|
|
+ <!-- <el-tab-pane :label="$t('message.label.two2')" name="mobile">
|
|
|
<Mobile />
|
|
|
</el-tab-pane> -->
|
|
|
<!-- </el-tabs> -->
|
|
|
@@ -53,12 +74,14 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="login-authorization z-10">
|
|
|
- <!-- <p style="font-size: 12px;">©上海敏龙智创科技发展有限公司{{ getSystemConfig['login.copyright'] || '' }}</p> --><!-- ['login.keep_record'] || Copyright © -->
|
|
|
+ <!-- <p style="font-size: 12px;">©上海敏龙智创科技发展有限公司{{ getSystemConfig['login.copyright'] || '' }}</p> --><!-- ['login.keep_record'] || Copyright © -->
|
|
|
<!-- <p class="la-other" style="margin-top: 5px"> -->
|
|
|
-
|
|
|
- <!-- <a href="https://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020250320141804000014054024-SAIC_SHOW_310000-6b70f287e0d2495697591ebb489adbe0956&signData=MEUCIGXojP0+cGcuBbeXVsraC1SL1GH9NehsKT6NwL/dPcjDAiEAryFp/aqoTmP5Z7seNN9eVQ4Rrvk4SsyT0FnqcL4kxFM=" target="_blank" >
|
|
|
- <img style="display: inline-block;width: 28px;" src="../../../assets/电子营业执照.png" alt=""></a>沪ICP备2024071246号-3 -->
|
|
|
- <!-- |
|
|
|
+
|
|
|
+ <a href="https://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020250320141804000014054024-SAIC_SHOW_310000-6b70f287e0d2495697591ebb489adbe0956&signData=MEUCIGXojP0+cGcuBbeXVsraC1SL1GH9NehsKT6NwL/dPcjDAiEAryFp/aqoTmP5Z7seNN9eVQ4Rrvk4SsyT0FnqcL4kxFM="
|
|
|
+ target="_blank">
|
|
|
+ <img style="display: inline-block;width: 28px;" src="../../../assets/电子营业执照.png"
|
|
|
+ alt=""></a>沪ICP备2024071246号-3
|
|
|
+ <!-- |
|
|
|
<a :href="getSystemConfig['login.help_url'] ? getSystemConfig['login.help_url'] : '#'" target="_blank">帮助</a>
|
|
|
|
|
|
|
<a :href="getSystemConfig['login.privacy_url'] ? getBaseURL(getSystemConfig['login.privacy_url']) : '#'">隐私</a>
|
|
|
@@ -87,7 +110,7 @@ const Account = defineAsyncComponent(() => import('/@/views/system/login/compone
|
|
|
const Mobile = defineAsyncComponent(() => import('/@/views/system/login/component/mobile.vue'));
|
|
|
const Scan = defineAsyncComponent(() => import('/@/views/system/login/component/scan.vue'));
|
|
|
const ChangePwd = defineAsyncComponent(() => import('/@/views/system/login/component/changePwd.vue'));
|
|
|
-import _ from 'lodash-es';
|
|
|
+import { isEmpty } from 'lodash-es';
|
|
|
import { useUserInfo } from '/@/stores/userInfo';
|
|
|
const { userInfos } = storeToRefs(useUserInfo());
|
|
|
|
|
|
@@ -97,6 +120,7 @@ const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
|
const state = reactive({
|
|
|
tabsActiveName: 'account',
|
|
|
isScan: false,
|
|
|
+ isInitializing: true,
|
|
|
});
|
|
|
|
|
|
watch(
|
|
|
@@ -123,25 +147,114 @@ const getSystemConfig = computed(() => {
|
|
|
});
|
|
|
|
|
|
const siteLogo = computed(() => {
|
|
|
- if (!_.isEmpty(getSystemConfig.value['login.site_logo'])) {
|
|
|
+ if (!isEmpty(getSystemConfig.value['login.site_logo'])) {
|
|
|
return getSystemConfig.value['login.site_logo'];
|
|
|
}
|
|
|
- return logoMini;
|
|
|
+ return 'http://1.94.168.85:8086/media/files/9/a/9aad06c63ef242ef62622f5f5e35058a.png';
|
|
|
});
|
|
|
|
|
|
const siteBg = computed(() => {
|
|
|
- if (!_.isEmpty(getSystemConfig.value['login.login_background'])) {
|
|
|
+ if (!isEmpty(getSystemConfig.value['login.login_background'])) {
|
|
|
return getSystemConfig.value['login.login_background'];
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 页面加载时
|
|
|
-onMounted(() => {
|
|
|
+onMounted(async () => {
|
|
|
NextLoading.done();
|
|
|
+
|
|
|
+ // 预加载关键资源
|
|
|
+ await Promise.all([
|
|
|
+ // 确保logo图片加载完成
|
|
|
+ new Promise((resolve) => {
|
|
|
+ const img = new Image();
|
|
|
+ img.onload = resolve;
|
|
|
+ img.onerror = resolve;
|
|
|
+ img.src = siteLogo.value;
|
|
|
+ }),
|
|
|
+ // 确保背景图片加载完成
|
|
|
+ siteBg.value ? new Promise((resolve) => {
|
|
|
+ const img = new Image();
|
|
|
+ img.onload = resolve;
|
|
|
+ img.onerror = resolve;
|
|
|
+ img.src = siteBg.value;
|
|
|
+ }) : Promise.resolve(),
|
|
|
+ // 等待一小段时间确保样式完全应用
|
|
|
+ new Promise(resolve => setTimeout(resolve, 200))
|
|
|
+ ]);
|
|
|
+
|
|
|
+ // 显示主要内容
|
|
|
+ state.isInitializing = false;
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+@import '/@/theme/loading.scss';
|
|
|
+// 防止样式闪烁的预加载样式
|
|
|
+.login-container {
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s ease-in-out;
|
|
|
+
|
|
|
+ &.loaded {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 初始加载状态样式
|
|
|
+.login-loading-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(240, 240, 240, 0.9) 100%);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ .login-loading-content {
|
|
|
+ text-align: center;
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ .login-loading-logo {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-loading-text {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-loading-spinner {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border: 4px solid rgba(255, 255, 255, 0.3);
|
|
|
+ border-top: 4px solid white;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes spin {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.login-container {
|
|
|
height: 100%;
|
|
|
background: var(--el-color-white);
|
|
|
@@ -169,17 +282,18 @@ onMounted(() => {
|
|
|
.login-left-logo-text {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+
|
|
|
span {
|
|
|
margin-left: 10px;
|
|
|
font-size: 95px;
|
|
|
font-weight: 100;
|
|
|
font-family: 'PingFang SC';
|
|
|
- color: #fff;//var(--el-color-primary);
|
|
|
+ color: #fff; //var(--el-color-primary);
|
|
|
}
|
|
|
|
|
|
.login-left-logo-text-msg {
|
|
|
font-size: 45px;
|
|
|
- color: #fff;//var(--el-color-primary);
|
|
|
+ color: #fff; //var(--el-color-primary);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -209,10 +323,11 @@ onMounted(() => {
|
|
|
.login-right {
|
|
|
width: 700px;
|
|
|
position: relative;
|
|
|
- .login-right-warp-mian-title{
|
|
|
+
|
|
|
+ .login-right-warp-mian-title {
|
|
|
position: absolute;
|
|
|
top: 59px;
|
|
|
- right: 115px;
|
|
|
+ right: 115px;
|
|
|
font-size: 14px;
|
|
|
color: #ffffff;
|
|
|
text-align: right;
|
|
|
@@ -295,6 +410,7 @@ onMounted(() => {
|
|
|
flex-direction: column;
|
|
|
height: 100%;
|
|
|
background: #fff;
|
|
|
+
|
|
|
.login-right-warp-main-title {
|
|
|
height: 130px;
|
|
|
line-height: 130px;
|
|
|
@@ -306,11 +422,13 @@ onMounted(() => {
|
|
|
animation-delay: 0.3s;
|
|
|
color: var(--el-text-color-primary);
|
|
|
}
|
|
|
- .logo-title{
|
|
|
+
|
|
|
+ .logo-title {
|
|
|
width: 71%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- align-items: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.login-right-warp-main-form {
|
|
|
@@ -365,7 +483,7 @@ onMounted(() => {
|
|
|
bottom: 30px;
|
|
|
left: 80px;
|
|
|
right: 0;
|
|
|
- /* text-align: center; */
|
|
|
+ text-align: center;
|
|
|
|
|
|
p {
|
|
|
font-size: 14px;
|