| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501 |
- <template>
- <!-- 初始加载状态 -->
- <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 justify-end items-center" :class="{ loaded: !state.isInitializing }">
- <div class="login-left" v-if="!siteBg">
- <div class="login-left-logo">
- <!-- <img :src="siteLogo" /> -->
- <div class="login-left-logo-text">
- <!-- <span>{{ "奇才, 只选对的!" }}</span> --><!-- getSystemConfig['login.site_title'] || getThemeConfig.globalViceTitle -->
- <!-- <span class="login-left-logo-text-msg" style="margin-top: 5px">{{
- "您的人才战略顾问与首席执行官"
- }}</span> --><!-- getSystemConfig['login.site_name'] || getThemeConfig.globalViceTitleMsg -->
- </div>
- </div>
- </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 ||'../../../assets/rayLogo.png'-->
- <div class="logo-title">
- <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">
- <!-- <el-tabs v-model="state.tabsActiveName" class="w-full">
- <el-tab-pane :label="$t('message.label.changePwd')" name="changePwd" v-if="userInfos.pwd_change_count === 0">
- <ChangePwd />
- </el-tab-pane>
- <el-tab-pane :label="$t('message.label.one1')" name="account" v-else> -->
- <Account />
- <!-- </el-tab-pane> -->
- <!-- TODO 手机号码登录未接入,展示隐藏 -->
- <!-- <el-tab-pane :label="$t('message.label.two2')" name="mobile">
- <Mobile />
- </el-tab-pane> -->
- <!-- </el-tabs> -->
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="login-authorization z-10">
- <!-- <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>{{ getSystemConfig['login.keep_record'] || '京ICP备2021031018号' }}
- <!-- |
- <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>
- |
- <a :href="getSystemConfig['login.clause_url'] ? getBaseURL(getSystemConfig['login.clause_url']) : '#'">条款</a> -->
- <!-- </p> -->
- </div>
- </div>
- <div v-if="siteBg">
- <img :src="siteBg" class="loginBg fixed inset-0 z-1 w-full h-full" />
- </div>
- </template>
- <script setup lang="ts" name="loginIndex">
- import { defineAsyncComponent, onMounted, reactive, computed, watch } from 'vue';
- import { storeToRefs } from 'pinia';
- import { useThemeConfig } from '/@/stores/themeConfig';
- import { NextLoading } from '/@/utils/loading';
- import logoMini from '/@/assets/logo-mini.svg';
- import loginMain from '/@/assets/login-main.svg';
- import loginBg from '/@/assets/login_background.jpg';
- import { SystemConfigStore } from '/@/stores/systemConfig';
- import { getBaseURL } from '/@/utils/baseUrl';
- // 引入组件
- const Account = defineAsyncComponent(() => import('/@/views/system/login/component/account.vue'));
- 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 { isEmpty } from 'lodash-es';
- import { useUserInfo } from '/@/stores/userInfo';
- const { userInfos } = storeToRefs(useUserInfo());
- // 定义变量内容
- const storesThemeConfig = useThemeConfig();
- const { themeConfig } = storeToRefs(storesThemeConfig);
- const state = reactive({
- tabsActiveName: 'account',
- isScan: false,
- isInitializing: true,
- });
- watch(
- () => userInfos.value.pwd_change_count,
- (val) => {
- if (val === 0) {
- state.tabsActiveName = 'changePwd';
- } else {
- state.tabsActiveName = 'account';
- }
- },
- { deep: true, immediate: true }
- );
- // 获取布局配置信息
- const getThemeConfig = computed(() => {
- return themeConfig.value;
- });
- const systemConfigStore = SystemConfigStore();
- const { systemConfig } = storeToRefs(systemConfigStore);
- const getSystemConfig = computed(() => {
- return systemConfig.value;
- });
- const siteLogo = computed(() => {
- if (!isEmpty(getSystemConfig.value['login.site_logo'])) {
- return getSystemConfig.value['login.site_logo'];
- }
- return 'http://1.94.168.85:8086/media/files/9/a/9aad06c63ef242ef62622f5f5e35058a.png';
- });
- const siteBg = computed(() => {
- // 优先使用系统配置,其次使用本地默认背景,确保首屏就有背景
- if (!isEmpty(getSystemConfig.value['login.login_background'])) {
- return getSystemConfig.value['login.login_background'];
- }
- return '';
- });
- // 页面加载时
- 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);
- .login-left {
- flex: 1;
- position: relative;
- background-color: rgba(211, 239, 255, 1);
- margin-right: 100px;
- .login-left-logo {
- display: flex;
- align-items: center;
- position: absolute;
- top: 280px;
- left: 80px;
- z-index: 999;
- animation: logoAnimation 0.3s ease;
- img {
- width: 52px;
- height: 52px;
- }
- .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);
- }
- .login-left-logo-text-msg {
- font-size: 45px;
- color: #fff; //var(--el-color-primary);
- }
- }
- }
- .login-left-img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 100%;
- height: 52%;
- img {
- width: 100%;
- height: 100%;
- animation: error-num 0.6s ease;
- }
- }
- .login-left-waves {
- position: absolute;
- top: 0;
- right: -100px;
- }
- }
- .login-right {
- width: 700px;
- position: relative;
- .login-right-warp-mian-title {
- position: absolute;
- top: 59px;
- right: 115px;
- font-size: 14px;
- color: #ffffff;
- text-align: right;
- margin-right: 10px;
- }
- .login-right-warp {
- //border: 1px solid var(--el-color-primary-light-3);
- border-radius: 10px;
- width: 450px;
- height: 550px;
- position: relative;
- overflow: hidden;
- //background-color: var(--el-color-white);
- .login-right-warp-one,
- .login-right-warp-two {
- position: absolute;
- display: block;
- width: inherit;
- height: inherit;
- &::before,
- &::after {
- content: '';
- position: absolute;
- z-index: 1;
- }
- }
- .login-right-warp-one {
- &::before {
- filter: hue-rotate(0deg);
- top: 0px;
- left: 0;
- width: 100%;
- height: 3px;
- background: linear-gradient(90deg, transparent, var(--el-color-primary));
- animation: loginLeft 3s linear infinite;
- }
- &::after {
- filter: hue-rotate(60deg);
- top: -100%;
- right: 2px;
- width: 3px;
- height: 100%;
- background: linear-gradient(180deg, transparent, var(--el-color-primary));
- animation: loginTop 3s linear infinite;
- animation-delay: 0.7s;
- }
- }
- .login-right-warp-two {
- &::before {
- filter: hue-rotate(120deg);
- bottom: 2px;
- right: -100%;
- width: 100%;
- height: 3px;
- background: linear-gradient(270deg, transparent, var(--el-color-primary));
- animation: loginRight 3s linear infinite;
- animation-delay: 1.4s;
- }
- &::after {
- filter: hue-rotate(300deg);
- bottom: -100%;
- left: 0px;
- width: 3px;
- height: 100%;
- background: linear-gradient(360deg, transparent, var(--el-color-primary));
- animation: loginBottom 3s linear infinite;
- animation-delay: 2.1s;
- }
- }
- .login-right-warp-mian {
- display: flex;
- flex-direction: column;
- height: 100%;
- background: #fff;
- .login-right-warp-main-title {
- height: 130px;
- line-height: 130px;
- font-size: 32px;
- font-weight: 600;
- text-align: center;
- letter-spacing: 3px;
- animation: logoAnimation 0.3s ease;
- animation-delay: 0.3s;
- color: var(--el-text-color-primary);
- }
- .logo-title {
- width: 71%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-direction: column;
- }
- .login-right-warp-main-form {
- flex: 1;
- padding: 0 50px 50px;
- .login-content-main-sacn {
- position: absolute;
- top: 2px;
- right: 12px;
- width: 50px;
- height: 50px;
- overflow: hidden;
- cursor: pointer;
- transition: all ease 0.3s;
- color: var(--el-color-primary);
- &-delta {
- position: absolute;
- width: 35px;
- height: 70px;
- z-index: 2;
- top: 2px;
- right: 21px;
- background: var(--el-color-white);
- transform: rotate(-45deg);
- }
- &:hover {
- opacity: 1;
- transition: all ease 0.3s;
- color: var(--el-color-primary) !important;
- }
- i {
- width: 47px;
- height: 50px;
- display: inline-block;
- font-size: 48px;
- position: absolute;
- right: 1px;
- top: 0px;
- }
- }
- }
- }
- }
- }
- .login-authorization {
- position: absolute;
- bottom: 30px;
- left: 80px;
- right: 0;
- text-align: center;
- color: #d9d9d9;
- p {
- font-size: 14px;
- color: #d9d9d9;
- }
- a {
- color: var(--el-color-primary);
- /* margin: 0 5px; */
- }
- }
- }
- </style>
|