123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381 |
- <template>
- <div class="login-container flex z-10">
- <div class="login-left">
- <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 -->
- <div class="logo-title">
- <img src="../../../assets/LOGO1.png" alt="奇才AI面试" style="width: 65px; height: 70px;margin-right: 10px;">
- <span style="font-size: 20px;font-weight: 600;letter-spacing: 3px;color: #595959;">账号登录</span>
- </div>
- <!-- <div class="text-4xl font-bold text-red-600 mb-12">奇才AI面试</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>沪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>
- |
- <a :href="getSystemConfig['login.clause_url'] ? getBaseURL(getSystemConfig['login.clause_url']) : '#'">条款</a> -->
- </p>
- </div>
- </div>
- <div v-if="loginBg">
- <img :src="loginBg" 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/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 _ 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,
- });
- 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 logoMini;
- });
- const siteBg = computed(() => {
- if (!_.isEmpty(getSystemConfig.value['login.login_background'])) {
- return getSystemConfig.value['login.login_background'];
- }
- });
- // 页面加载时
- onMounted(() => {
- NextLoading.done();
- });
- </script>
- <style scoped lang="scss">
- .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: flex-end;
- }
- .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; */
- p {
- font-size: 14px;
- color: #d9d9d9;
- }
- a {
- color: var(--el-color-primary);
- /* margin: 0 5px; */
- }
- }
- }
- </style>
|