index.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. <template>
  2. <div class="login-container flex z-10">
  3. <div class="login-left">
  4. <div class="login-left-logo">
  5. <!-- <img :src="siteLogo" /> -->
  6. <div class="login-left-logo-text">
  7. <span>{{ "奇才, 只选对的!" }}</span><!-- getSystemConfig['login.site_title'] || getThemeConfig.globalViceTitle -->
  8. <span class="login-left-logo-text-msg" style="margin-top: 5px">{{
  9. "您的人才战略顾问与首席执行官"
  10. }}</span><!-- getSystemConfig['login.site_name'] || getThemeConfig.globalViceTitleMsg -->
  11. </div>
  12. </div>
  13. </div>
  14. <div class="login-right flex z-10">
  15. <div class="login-right-warp-mian-title">客户服务专线:021-8888888</div>
  16. <div class="login-right-warp flex-margin">
  17. <!-- <span class="login-right-warp-one"></span>-->
  18. <!-- <span class="login-right-warp-two"></span>-->
  19. <div class="login-right-warp-mian">
  20. <div class="flex flex-col items-center justify-center p-8 pt-14">
  21. <!-- Logo -->
  22. <div class="logo-title">
  23. <img src="../../../assets/LOGO1.png" alt="奇才AI面试" style="width: 65px; height: 70px;margin-right: 10px;">
  24. <span style="font-size: 20px;font-weight: 600;letter-spacing: 3px;color: #595959;">账号登录</span>
  25. </div>
  26. <!-- <div class="text-4xl font-bold text-red-600 mb-12">奇才AI面试</div> -->
  27. <!-- 登录表单区域 -->
  28. <div class="w-full max-w-sm">
  29. <div v-if="!state.isScan">
  30. <!-- <el-tabs v-model="state.tabsActiveName" class="w-full">
  31. <el-tab-pane :label="$t('message.label.changePwd')" name="changePwd" v-if="userInfos.pwd_change_count === 0">
  32. <ChangePwd />
  33. </el-tab-pane>
  34. <el-tab-pane :label="$t('message.label.one1')" name="account" v-else> -->
  35. <Account />
  36. <!-- </el-tab-pane> -->
  37. <!-- TODO 手机号码登录未接入,展示隐藏 -->
  38. <!-- <el-tab-pane :label="$t('message.label.two2')" name="mobile">
  39. <Mobile />
  40. </el-tab-pane> -->
  41. <!-- </el-tabs> -->
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="login-authorization z-10">
  49. <p style="font-size: 12px;">©上海敏龙智创科技发展有限公司{{ getSystemConfig['login.copyright'] || '' }}</p><!-- ['login.keep_record'] || Copyright © -->
  50. <p class="la-other" style="margin-top: 5px">
  51. <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" >
  52. <img style="display: inline-block;width: 28px;" src="../../../assets/电子营业执照.png" alt=""></a>沪ICP备2024071246号-3
  53. <!-- |
  54. <a :href="getSystemConfig['login.help_url'] ? getSystemConfig['login.help_url'] : '#'" target="_blank">帮助</a>
  55. |
  56. <a :href="getSystemConfig['login.privacy_url'] ? getBaseURL(getSystemConfig['login.privacy_url']) : '#'">隐私</a>
  57. |
  58. <a :href="getSystemConfig['login.clause_url'] ? getBaseURL(getSystemConfig['login.clause_url']) : '#'">条款</a> -->
  59. </p>
  60. </div>
  61. </div>
  62. <div v-if="loginBg">
  63. <img :src="loginBg" class="loginBg fixed inset-0 z-1 w-full h-full" />
  64. </div>
  65. </template>
  66. <script setup lang="ts" name="loginIndex">
  67. import { defineAsyncComponent, onMounted, reactive, computed, watch } from 'vue';
  68. import { storeToRefs } from 'pinia';
  69. import { useThemeConfig } from '/@/stores/themeConfig';
  70. import { NextLoading } from '/@/utils/loading';
  71. import logoMini from '/@/assets/logo-mini.svg';
  72. import loginMain from '/@/assets/login-main.svg';
  73. import loginBg from '/@/assets/background.jpg';
  74. import { SystemConfigStore } from '/@/stores/systemConfig';
  75. import { getBaseURL } from '/@/utils/baseUrl';
  76. // 引入组件
  77. const Account = defineAsyncComponent(() => import('/@/views/system/login/component/account.vue'));
  78. const Mobile = defineAsyncComponent(() => import('/@/views/system/login/component/mobile.vue'));
  79. const Scan = defineAsyncComponent(() => import('/@/views/system/login/component/scan.vue'));
  80. const ChangePwd = defineAsyncComponent(() => import('/@/views/system/login/component/changePwd.vue'));
  81. import _ from 'lodash-es';
  82. import { useUserInfo } from '/@/stores/userInfo';
  83. const { userInfos } = storeToRefs(useUserInfo());
  84. // 定义变量内容
  85. const storesThemeConfig = useThemeConfig();
  86. const { themeConfig } = storeToRefs(storesThemeConfig);
  87. const state = reactive({
  88. tabsActiveName: 'account',
  89. isScan: false,
  90. });
  91. watch(
  92. () => userInfos.value.pwd_change_count,
  93. (val) => {
  94. if (val === 0) {
  95. state.tabsActiveName = 'changePwd';
  96. } else {
  97. state.tabsActiveName = 'account';
  98. }
  99. },
  100. { deep: true, immediate: true }
  101. );
  102. // 获取布局配置信息
  103. const getThemeConfig = computed(() => {
  104. return themeConfig.value;
  105. });
  106. const systemConfigStore = SystemConfigStore();
  107. const { systemConfig } = storeToRefs(systemConfigStore);
  108. const getSystemConfig = computed(() => {
  109. return systemConfig.value;
  110. });
  111. const siteLogo = computed(() => {
  112. if (!_.isEmpty(getSystemConfig.value['login.site_logo'])) {
  113. return getSystemConfig.value['login.site_logo'];
  114. }
  115. return logoMini;
  116. });
  117. const siteBg = computed(() => {
  118. if (!_.isEmpty(getSystemConfig.value['login.login_background'])) {
  119. return getSystemConfig.value['login.login_background'];
  120. }
  121. });
  122. // 页面加载时
  123. onMounted(() => {
  124. NextLoading.done();
  125. });
  126. </script>
  127. <style scoped lang="scss">
  128. .login-container {
  129. height: 100%;
  130. background: var(--el-color-white);
  131. .login-left {
  132. flex: 1;
  133. position: relative;
  134. background-color: rgba(211, 239, 255, 1);
  135. margin-right: 100px;
  136. .login-left-logo {
  137. display: flex;
  138. align-items: center;
  139. position: absolute;
  140. top: 280px;
  141. left: 80px;
  142. z-index: 999;
  143. animation: logoAnimation 0.3s ease;
  144. img {
  145. width: 52px;
  146. height: 52px;
  147. }
  148. .login-left-logo-text {
  149. display: flex;
  150. flex-direction: column;
  151. span {
  152. margin-left: 10px;
  153. font-size: 95px;
  154. font-weight: 100;
  155. font-family: 'PingFang SC';
  156. color: #fff;//var(--el-color-primary);
  157. }
  158. .login-left-logo-text-msg {
  159. font-size: 45px;
  160. color: #fff;//var(--el-color-primary);
  161. }
  162. }
  163. }
  164. .login-left-img {
  165. position: absolute;
  166. top: 50%;
  167. left: 50%;
  168. transform: translate(-50%, -50%);
  169. width: 100%;
  170. height: 52%;
  171. img {
  172. width: 100%;
  173. height: 100%;
  174. animation: error-num 0.6s ease;
  175. }
  176. }
  177. .login-left-waves {
  178. position: absolute;
  179. top: 0;
  180. right: -100px;
  181. }
  182. }
  183. .login-right {
  184. width: 700px;
  185. position: relative;
  186. .login-right-warp-mian-title{
  187. position: absolute;
  188. top: 59px;
  189. right: 115px;
  190. font-size: 14px;
  191. color: #ffffff;
  192. text-align: right;
  193. margin-right: 10px;
  194. }
  195. .login-right-warp {
  196. //border: 1px solid var(--el-color-primary-light-3);
  197. border-radius: 10px;
  198. width: 450px;
  199. height: 550px;
  200. position: relative;
  201. overflow: hidden;
  202. //background-color: var(--el-color-white);
  203. .login-right-warp-one,
  204. .login-right-warp-two {
  205. position: absolute;
  206. display: block;
  207. width: inherit;
  208. height: inherit;
  209. &::before,
  210. &::after {
  211. content: '';
  212. position: absolute;
  213. z-index: 1;
  214. }
  215. }
  216. .login-right-warp-one {
  217. &::before {
  218. filter: hue-rotate(0deg);
  219. top: 0px;
  220. left: 0;
  221. width: 100%;
  222. height: 3px;
  223. background: linear-gradient(90deg, transparent, var(--el-color-primary));
  224. animation: loginLeft 3s linear infinite;
  225. }
  226. &::after {
  227. filter: hue-rotate(60deg);
  228. top: -100%;
  229. right: 2px;
  230. width: 3px;
  231. height: 100%;
  232. background: linear-gradient(180deg, transparent, var(--el-color-primary));
  233. animation: loginTop 3s linear infinite;
  234. animation-delay: 0.7s;
  235. }
  236. }
  237. .login-right-warp-two {
  238. &::before {
  239. filter: hue-rotate(120deg);
  240. bottom: 2px;
  241. right: -100%;
  242. width: 100%;
  243. height: 3px;
  244. background: linear-gradient(270deg, transparent, var(--el-color-primary));
  245. animation: loginRight 3s linear infinite;
  246. animation-delay: 1.4s;
  247. }
  248. &::after {
  249. filter: hue-rotate(300deg);
  250. bottom: -100%;
  251. left: 0px;
  252. width: 3px;
  253. height: 100%;
  254. background: linear-gradient(360deg, transparent, var(--el-color-primary));
  255. animation: loginBottom 3s linear infinite;
  256. animation-delay: 2.1s;
  257. }
  258. }
  259. .login-right-warp-mian {
  260. display: flex;
  261. flex-direction: column;
  262. height: 100%;
  263. background: #fff;
  264. .login-right-warp-main-title {
  265. height: 130px;
  266. line-height: 130px;
  267. font-size: 32px;
  268. font-weight: 600;
  269. text-align: center;
  270. letter-spacing: 3px;
  271. animation: logoAnimation 0.3s ease;
  272. animation-delay: 0.3s;
  273. color: var(--el-text-color-primary);
  274. }
  275. .logo-title{
  276. width: 71%;
  277. display: flex;
  278. justify-content: space-between;
  279. align-items: flex-end;
  280. }
  281. .login-right-warp-main-form {
  282. flex: 1;
  283. padding: 0 50px 50px;
  284. .login-content-main-sacn {
  285. position: absolute;
  286. top: 2px;
  287. right: 12px;
  288. width: 50px;
  289. height: 50px;
  290. overflow: hidden;
  291. cursor: pointer;
  292. transition: all ease 0.3s;
  293. color: var(--el-color-primary);
  294. &-delta {
  295. position: absolute;
  296. width: 35px;
  297. height: 70px;
  298. z-index: 2;
  299. top: 2px;
  300. right: 21px;
  301. background: var(--el-color-white);
  302. transform: rotate(-45deg);
  303. }
  304. &:hover {
  305. opacity: 1;
  306. transition: all ease 0.3s;
  307. color: var(--el-color-primary) !important;
  308. }
  309. i {
  310. width: 47px;
  311. height: 50px;
  312. display: inline-block;
  313. font-size: 48px;
  314. position: absolute;
  315. right: 1px;
  316. top: 0px;
  317. }
  318. }
  319. }
  320. }
  321. }
  322. }
  323. .login-authorization {
  324. position: absolute;
  325. bottom: 30px;
  326. left: 80px;
  327. right: 0;
  328. /* text-align: center; */
  329. p {
  330. font-size: 14px;
  331. color: #d9d9d9;
  332. }
  333. a {
  334. color: var(--el-color-primary);
  335. /* margin: 0 5px; */
  336. }
  337. }
  338. }
  339. </style>