index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. <template>
  2. <!-- 初始加载状态 -->
  3. <div v-if="state.isInitializing" class="login-loading-container">
  4. <div class="login-loading-content">
  5. <div class="loading-next container-of-loaders">
  6. <div id="loader3" class="loader-container">
  7. <div class="loader three"></div>
  8. </div>
  9. </div>
  10. <!-- <div class="login-loading-logo">
  11. <img :src="siteLogo" alt="" style="width: 60px; height: 60px;">
  12. </div> -->
  13. <!-- <div class="login-loading-text">设备借还系统</div> -->
  14. <div class="login-loading-spinner"></div>
  15. </div>
  16. </div>
  17. <!-- 主要内容 -->
  18. <div v-else class="login-container flex z-10 justify-end items-center" :class="{ loaded: !state.isInitializing }">
  19. <div class="login-left" v-if="!siteBg">
  20. <div class="login-left-logo">
  21. <!-- <img :src="siteLogo" /> -->
  22. <div class="login-left-logo-text">
  23. <!-- <span>{{ "奇才, 只选对的!" }}</span> --><!-- getSystemConfig['login.site_title'] || getThemeConfig.globalViceTitle -->
  24. <!-- <span class="login-left-logo-text-msg" style="margin-top: 5px">{{
  25. "您的人才战略顾问与首席执行官"
  26. }}</span> --><!-- getSystemConfig['login.site_name'] || getThemeConfig.globalViceTitleMsg -->
  27. </div>
  28. </div>
  29. </div>
  30. <div class="login-right flex z-10">
  31. <!-- <div class="login-right-warp-mian-title">客户服务专线:021-8888888</div> -->
  32. <div class="login-right-warp flex-margin">
  33. <!-- <span class="login-right-warp-one"></span>-->
  34. <!-- <span class="login-right-warp-two"></span>-->
  35. <div class="login-right-warp-mian">
  36. <div class="flex flex-col items-center justify-center p-8 pt-14">
  37. <!-- Logo ||'../../../assets/rayLogo.png'-->
  38. <div class="logo-title">
  39. <img :src="siteLogo" alt="" style="width: 90px; height: 90px;margin-right: 10px;">
  40. <span
  41. style="margin: 20px 0; font-size: 26px;font-weight: 600;letter-spacing: 3px;color: #595959;">设备借还系统</span>
  42. </div>
  43. <!-- <div class="text-4xl font-bold text-red-600 mb-12"></div> -->
  44. <!-- 登录表单区域 -->
  45. <div class="w-full max-w-sm">
  46. <div v-if="!state.isScan">
  47. <!-- <el-tabs v-model="state.tabsActiveName" class="w-full">
  48. <el-tab-pane :label="$t('message.label.changePwd')" name="changePwd" v-if="userInfos.pwd_change_count === 0">
  49. <ChangePwd />
  50. </el-tab-pane>
  51. <el-tab-pane :label="$t('message.label.one1')" name="account" v-else> -->
  52. <Account />
  53. <!-- </el-tab-pane> -->
  54. <!-- TODO 手机号码登录未接入,展示隐藏 -->
  55. <!-- <el-tab-pane :label="$t('message.label.two2')" name="mobile">
  56. <Mobile />
  57. </el-tab-pane> -->
  58. <!-- </el-tabs> -->
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <div class="login-authorization z-10">
  66. <!-- <p style="font-size: 12px;">©上海敏龙智创科技发展有限公司{{ getSystemConfig['login.copyright'] || '' }}</p> --><!-- ['login.keep_record'] || Copyright © -->
  67. <!-- <p class="la-other" style="margin-top: 5px"> -->
  68. <a href="https://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020250320141804000014054024-SAIC_SHOW_310000-6b70f287e0d2495697591ebb489adbe0956&signData=MEUCIGXojP0+cGcuBbeXVsraC1SL1GH9NehsKT6NwL/dPcjDAiEAryFp/aqoTmP5Z7seNN9eVQ4Rrvk4SsyT0FnqcL4kxFM="
  69. target="_blank">
  70. <!-- <img style="display: inline-block;width: 28px;" src="../../../assets/电子营业执照.png"
  71. alt=""> --></a>{{ getSystemConfig['login.keep_record'] || '京ICP备2021031018号' }}
  72. <!-- |
  73. <a :href="getSystemConfig['login.help_url'] ? getSystemConfig['login.help_url'] : '#'" target="_blank">帮助</a>
  74. |
  75. <a :href="getSystemConfig['login.privacy_url'] ? getBaseURL(getSystemConfig['login.privacy_url']) : '#'">隐私</a>
  76. |
  77. <a :href="getSystemConfig['login.clause_url'] ? getBaseURL(getSystemConfig['login.clause_url']) : '#'">条款</a> -->
  78. <!-- </p> -->
  79. </div>
  80. </div>
  81. <div v-if="siteBg">
  82. <img :src="siteBg" class="loginBg fixed inset-0 z-1 w-full h-full" />
  83. </div>
  84. </template>
  85. <script setup lang="ts" name="loginIndex">
  86. import { defineAsyncComponent, onMounted, reactive, computed, watch } from 'vue';
  87. import { storeToRefs } from 'pinia';
  88. import { useThemeConfig } from '/@/stores/themeConfig';
  89. import { NextLoading } from '/@/utils/loading';
  90. import logoMini from '/@/assets/logo-mini.svg';
  91. import loginMain from '/@/assets/login-main.svg';
  92. import loginBg from '/@/assets/login_background.jpg';
  93. import { SystemConfigStore } from '/@/stores/systemConfig';
  94. import { getBaseURL } from '/@/utils/baseUrl';
  95. // 引入组件
  96. const Account = defineAsyncComponent(() => import('/@/views/system/login/component/account.vue'));
  97. const Mobile = defineAsyncComponent(() => import('/@/views/system/login/component/mobile.vue'));
  98. const Scan = defineAsyncComponent(() => import('/@/views/system/login/component/scan.vue'));
  99. const ChangePwd = defineAsyncComponent(() => import('/@/views/system/login/component/changePwd.vue'));
  100. import { isEmpty } from 'lodash-es';
  101. import { useUserInfo } from '/@/stores/userInfo';
  102. const { userInfos } = storeToRefs(useUserInfo());
  103. // 定义变量内容
  104. const storesThemeConfig = useThemeConfig();
  105. const { themeConfig } = storeToRefs(storesThemeConfig);
  106. const state = reactive({
  107. tabsActiveName: 'account',
  108. isScan: false,
  109. isInitializing: true,
  110. });
  111. watch(
  112. () => userInfos.value.pwd_change_count,
  113. (val) => {
  114. if (val === 0) {
  115. state.tabsActiveName = 'changePwd';
  116. } else {
  117. state.tabsActiveName = 'account';
  118. }
  119. },
  120. { deep: true, immediate: true }
  121. );
  122. // 获取布局配置信息
  123. const getThemeConfig = computed(() => {
  124. return themeConfig.value;
  125. });
  126. const systemConfigStore = SystemConfigStore();
  127. const { systemConfig } = storeToRefs(systemConfigStore);
  128. const getSystemConfig = computed(() => {
  129. return systemConfig.value;
  130. });
  131. const siteLogo = computed(() => {
  132. if (!isEmpty(getSystemConfig.value['login.site_logo'])) {
  133. return getSystemConfig.value['login.site_logo'];
  134. }
  135. return 'http://1.94.168.85:8086/media/files/9/a/9aad06c63ef242ef62622f5f5e35058a.png';
  136. });
  137. const siteBg = computed(() => {
  138. // 优先使用系统配置,其次使用本地默认背景,确保首屏就有背景
  139. if (!isEmpty(getSystemConfig.value['login.login_background'])) {
  140. return getSystemConfig.value['login.login_background'];
  141. }
  142. return '';
  143. });
  144. // 页面加载时
  145. onMounted(async () => {
  146. NextLoading.done();
  147. // 预加载关键资源
  148. await Promise.all([
  149. // 确保logo图片加载完成
  150. new Promise((resolve) => {
  151. const img = new Image();
  152. img.onload = resolve;
  153. img.onerror = resolve;
  154. img.src = siteLogo.value;
  155. }),
  156. // 确保背景图片加载完成
  157. siteBg.value ? new Promise((resolve) => {
  158. const img = new Image();
  159. img.onload = resolve;
  160. img.onerror = resolve;
  161. img.src = siteBg.value;
  162. }) : Promise.resolve(),
  163. // 等待一小段时间确保样式完全应用
  164. new Promise(resolve => setTimeout(resolve, 200))
  165. ]);
  166. // 显示主要内容
  167. state.isInitializing = false;
  168. });
  169. </script>
  170. <style scoped lang="scss">
  171. @import '/@/theme/loading.scss';
  172. // 防止样式闪烁的预加载样式
  173. .login-container {
  174. opacity: 0;
  175. transition: opacity 0.3s ease-in-out;
  176. &.loaded {
  177. opacity: 1;
  178. }
  179. }
  180. // 初始加载状态样式
  181. .login-loading-container {
  182. position: fixed;
  183. top: 0;
  184. left: 0;
  185. width: 100%;
  186. height: 100%;
  187. background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(240, 240, 240, 0.9) 100%);
  188. display: flex;
  189. align-items: center;
  190. justify-content: center;
  191. z-index: 9999;
  192. .login-loading-content {
  193. text-align: center;
  194. color: white;
  195. .login-loading-logo {
  196. margin-bottom: 20px;
  197. img {
  198. border-radius: 50%;
  199. box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  200. }
  201. }
  202. .login-loading-text {
  203. font-size: 24px;
  204. font-weight: 600;
  205. margin-bottom: 30px;
  206. letter-spacing: 2px;
  207. }
  208. .login-loading-spinner {
  209. width: 40px;
  210. height: 40px;
  211. border: 4px solid rgba(255, 255, 255, 0.3);
  212. border-top: 4px solid white;
  213. border-radius: 50%;
  214. animation: spin 1s linear infinite;
  215. margin: 0 auto;
  216. }
  217. }
  218. }
  219. @keyframes spin {
  220. 0% {
  221. transform: rotate(0deg);
  222. }
  223. 100% {
  224. transform: rotate(360deg);
  225. }
  226. }
  227. .login-container {
  228. height: 100%;
  229. background: var(--el-color-white);
  230. .login-left {
  231. flex: 1;
  232. position: relative;
  233. background-color: rgba(211, 239, 255, 1);
  234. margin-right: 100px;
  235. .login-left-logo {
  236. display: flex;
  237. align-items: center;
  238. position: absolute;
  239. top: 280px;
  240. left: 80px;
  241. z-index: 999;
  242. animation: logoAnimation 0.3s ease;
  243. img {
  244. width: 52px;
  245. height: 52px;
  246. }
  247. .login-left-logo-text {
  248. display: flex;
  249. flex-direction: column;
  250. span {
  251. margin-left: 10px;
  252. font-size: 95px;
  253. font-weight: 100;
  254. font-family: 'PingFang SC';
  255. color: #fff; //var(--el-color-primary);
  256. }
  257. .login-left-logo-text-msg {
  258. font-size: 45px;
  259. color: #fff; //var(--el-color-primary);
  260. }
  261. }
  262. }
  263. .login-left-img {
  264. position: absolute;
  265. top: 50%;
  266. left: 50%;
  267. transform: translate(-50%, -50%);
  268. width: 100%;
  269. height: 52%;
  270. img {
  271. width: 100%;
  272. height: 100%;
  273. animation: error-num 0.6s ease;
  274. }
  275. }
  276. .login-left-waves {
  277. position: absolute;
  278. top: 0;
  279. right: -100px;
  280. }
  281. }
  282. .login-right {
  283. width: 700px;
  284. position: relative;
  285. .login-right-warp-mian-title {
  286. position: absolute;
  287. top: 59px;
  288. right: 115px;
  289. font-size: 14px;
  290. color: #ffffff;
  291. text-align: right;
  292. margin-right: 10px;
  293. }
  294. .login-right-warp {
  295. //border: 1px solid var(--el-color-primary-light-3);
  296. border-radius: 10px;
  297. width: 450px;
  298. height: 550px;
  299. position: relative;
  300. overflow: hidden;
  301. //background-color: var(--el-color-white);
  302. .login-right-warp-one,
  303. .login-right-warp-two {
  304. position: absolute;
  305. display: block;
  306. width: inherit;
  307. height: inherit;
  308. &::before,
  309. &::after {
  310. content: '';
  311. position: absolute;
  312. z-index: 1;
  313. }
  314. }
  315. .login-right-warp-one {
  316. &::before {
  317. filter: hue-rotate(0deg);
  318. top: 0px;
  319. left: 0;
  320. width: 100%;
  321. height: 3px;
  322. background: linear-gradient(90deg, transparent, var(--el-color-primary));
  323. animation: loginLeft 3s linear infinite;
  324. }
  325. &::after {
  326. filter: hue-rotate(60deg);
  327. top: -100%;
  328. right: 2px;
  329. width: 3px;
  330. height: 100%;
  331. background: linear-gradient(180deg, transparent, var(--el-color-primary));
  332. animation: loginTop 3s linear infinite;
  333. animation-delay: 0.7s;
  334. }
  335. }
  336. .login-right-warp-two {
  337. &::before {
  338. filter: hue-rotate(120deg);
  339. bottom: 2px;
  340. right: -100%;
  341. width: 100%;
  342. height: 3px;
  343. background: linear-gradient(270deg, transparent, var(--el-color-primary));
  344. animation: loginRight 3s linear infinite;
  345. animation-delay: 1.4s;
  346. }
  347. &::after {
  348. filter: hue-rotate(300deg);
  349. bottom: -100%;
  350. left: 0px;
  351. width: 3px;
  352. height: 100%;
  353. background: linear-gradient(360deg, transparent, var(--el-color-primary));
  354. animation: loginBottom 3s linear infinite;
  355. animation-delay: 2.1s;
  356. }
  357. }
  358. .login-right-warp-mian {
  359. display: flex;
  360. flex-direction: column;
  361. height: 100%;
  362. background: #fff;
  363. .login-right-warp-main-title {
  364. height: 130px;
  365. line-height: 130px;
  366. font-size: 32px;
  367. font-weight: 600;
  368. text-align: center;
  369. letter-spacing: 3px;
  370. animation: logoAnimation 0.3s ease;
  371. animation-delay: 0.3s;
  372. color: var(--el-text-color-primary);
  373. }
  374. .logo-title {
  375. width: 71%;
  376. display: flex;
  377. justify-content: space-between;
  378. align-items: center;
  379. flex-direction: column;
  380. }
  381. .login-right-warp-main-form {
  382. flex: 1;
  383. padding: 0 50px 50px;
  384. .login-content-main-sacn {
  385. position: absolute;
  386. top: 2px;
  387. right: 12px;
  388. width: 50px;
  389. height: 50px;
  390. overflow: hidden;
  391. cursor: pointer;
  392. transition: all ease 0.3s;
  393. color: var(--el-color-primary);
  394. &-delta {
  395. position: absolute;
  396. width: 35px;
  397. height: 70px;
  398. z-index: 2;
  399. top: 2px;
  400. right: 21px;
  401. background: var(--el-color-white);
  402. transform: rotate(-45deg);
  403. }
  404. &:hover {
  405. opacity: 1;
  406. transition: all ease 0.3s;
  407. color: var(--el-color-primary) !important;
  408. }
  409. i {
  410. width: 47px;
  411. height: 50px;
  412. display: inline-block;
  413. font-size: 48px;
  414. position: absolute;
  415. right: 1px;
  416. top: 0px;
  417. }
  418. }
  419. }
  420. }
  421. }
  422. }
  423. .login-authorization {
  424. position: absolute;
  425. bottom: 30px;
  426. left: 80px;
  427. right: 0;
  428. text-align: center;
  429. color: #d9d9d9;
  430. p {
  431. font-size: 14px;
  432. color: #d9d9d9;
  433. }
  434. a {
  435. color: var(--el-color-primary);
  436. /* margin: 0 5px; */
  437. }
  438. }
  439. }
  440. </style>