hotline-web/src/views/login/index.vue

<template>
	<div class="login-container w100 h100">
		<div class="login-content">
			<div class="login-content-main">
				<Motion>
					<h4 class="login-content-title">{{ getThemeConfig.globalViceTitle }}</h4>
				</Motion>
				<Motion>
					<!--          <div v-if="!state.isScan">-->
					<!--            <el-tabs v-model="state.tabsActiveName">
              <el-tab-pane label="账号登录" name="account">-->
					<account />
					<!--              </el-tab-pane>
              <el-tab-pane label="手机号登录" name="mobile">
                <Mobile />
              </el-tab-pane>
            </el-tabs>-->
					<!--          </div>-->
				</Motion>
				<!--				<Scan v-if="state.isScan" />
				<div class="login-content-main-scan" @click="state.isScan = !state.isScan">
					<i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
					<div class="login-content-main-scan-delta"></div>
				</div>-->
			</div>
		</div>
		<LayoutFooter v-if="isFooter" class="login-footer" :underline="false" />
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, reactive, onMounted, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/stores/themeConfig';
import { NextLoading } from '@/utils/loading';
import { getImageUrl } from '@/utils/tools';
import Motion from '@/utils/motion';
import { getCurrentCityConfig } from '@/utils/appConfig';
// 定义接口来定义对象的类型
interface LoginState {
	tabsActiveName: string;
	isScan: boolean;
}

// 引入组件
const Account = defineAsyncComponent(() => import('@/views/login/component/Account.vue'));
const Mobile = defineAsyncComponent(() => import('@/views/login/component/Mobile.vue'));
const Scan = defineAsyncComponent(() => import('@/views/login/component/Scan.vue'));
const LayoutFooter = defineAsyncComponent(() => import('@/layout/footer/index.vue'));

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive<LoginState>({
	tabsActiveName: 'account', // 默认显示账号密码登录
	isScan: false, // 是否显示扫码登录
});
const { loginBg } = getCurrentCityConfig();
// 设置 footer 显示/隐藏
const isFooter = computed(() => {
	return themeConfig.value.isFooter;
});

// let bgImg = themeConfig.value.loginImage ?? `url(${getImageUrl('login/login_bg.png')})`;
const bgImg = `url(${getImageUrl(loginBg)}`;
// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});
// 页面加载时
onMounted(async () => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
:deep(.el-tabs__item) {
	font-size: var(--el-font-size-medium);
}
.login-footer {
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: 10;
	color: var(--el-border-color-light) !important;
	&-warp {
		margin: auto;
		text-align: center;
		animation: error-num 0.3s ease;
	}
	:deep(.el-link){
		color: var(--el-border-color-light) !important;
	}
}
.login-container {
	position: relative;
	background-image: v-bind(bgImg);
	background-repeat: no-repeat;
	background-size: calc(100vw + 1px) calc(100vh + 1px);
	.login-content {
		width: 500px;
		padding: 40px 40px 30px;
		position: absolute;
		right: calc(25% - 250px);
		top: 50vh;
		transform: translateY(-50%) translate3d(0, 0, 0);
		background-color: var(--el-color-white);
		border-radius: 20px;
		overflow: hidden;
		z-index: 1;
		box-shadow: 0 0 20px 0 rgba(26, 64, 144, 0.46);
		.login-content-main {
			margin: 0 auto;
			.login-content-title {
				color: var(--el-color-primary);
				font-size: 28px;
				font-weight: 500;
				line-height: 48px;
				text-align: center;
				letter-spacing: 4px;
				white-space: nowrap;
				z-index: 5;
				position: relative;
				transition: all 0.3s ease;
			}
		}

		.login-content-main-scan {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
			overflow: hidden;
			cursor: pointer;
			transition: all ease 0.3s;
			color: var(--el-text-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: 2px;
				top: -1px;
			}
		}
	}
}
</style>