feat(passport): 新增忘记密码功能及相关接口
- 新增忘记密码页面，支持邮箱找回和手机找回两种方式，包含验证码倒计时 - 添加密码强度和一致性校验，确保新密码安全性 - 开启对应路由 /forget，恢复已注释的忘记密码入口 - 新增发送短信验证码和邮箱验证码接口，适配未登录场景 - 新增重置密码接口，支持手机短信码及邮箱验证码方式 - 请求拦截器支持 X-Tenant-Skip 头，跳过租户信息注入，避免跨租户串扰 - 国际化新增忘记密码相关英文和中文文案 - 页面样式与登录页视觉风格一致，跨屏幕响应式布局优化
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import request from '@/utils/request';
|
||||
import type { ApiResult } from '@/api';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
import type { UpdatePasswordParam, NoticeResult } from './model';
|
||||
import type { UpdatePasswordParam, ResetPasswordParam, NoticeResult } from './model';
|
||||
import { SERVER_API_URL } from '@/config/setting';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
|
||||
@@ -108,6 +108,24 @@ export async function updatePassword(
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 找回/重置密码（未登录场景，登录页"忘记密码"入口）
|
||||
* 后端对应 POST /resetPassword，支持手机或邮箱两种方式
|
||||
*/
|
||||
export async function resetPassword(
|
||||
data: ResetPasswordParam
|
||||
): Promise<string> {
|
||||
const res = await request.post<ApiResult<unknown>>(
|
||||
SERVER_API_URL + '/resetPassword',
|
||||
data,
|
||||
{ headers: { 'X-Tenant-Skip': '1' } }
|
||||
);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message ?? '密码重置成功';
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建完整网站并初始化
|
||||
*/
|
||||
|
||||
@@ -24,6 +24,23 @@ export interface UpdatePasswordParam {
|
||||
oldPassword: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 找回/重置密码参数
|
||||
* 手机找回时传 phone + smsCode，邮箱找回时传 email + emailCode
|
||||
*/
|
||||
export interface ResetPasswordParam {
|
||||
/** 手机找回时必填 */
|
||||
phone?: string;
|
||||
smsCode?: string;
|
||||
/** 邮箱找回时必填 */
|
||||
email?: string;
|
||||
emailCode?: string;
|
||||
/** 新密码 */
|
||||
newPassword: string;
|
||||
/** 确认新密码 */
|
||||
confirmPassword: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 通知数据格式
|
||||
*/
|
||||
|
||||
@@ -139,6 +139,46 @@ export async function sendSmsCaptcha(data: LoginParam) {
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送短信验证码（后台管理员，跨租户：只要该手机号是超管或管理员即发送）
|
||||
* 后端对应 POST /sendSmsCaptchaByAdmin，参数为 { phone }
|
||||
* @param options.skipTenant 为 true 时不携带 tenantId 请求头（登录前无法确定租户时使用）
|
||||
*/
|
||||
export async function sendSmsCaptchaByAdmin(
|
||||
data: LoginParam,
|
||||
options?: { skipTenant?: boolean }
|
||||
) {
|
||||
const res = await request.post<ApiResult<SmsCaptchaResult>>(
|
||||
SERVER_API_URL + '/sendSmsCaptchaByAdmin',
|
||||
data,
|
||||
options?.skipTenant ? { headers: { 'X-Tenant-Skip': '1' } } : undefined
|
||||
);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送邮箱验证码（找回密码等登录前场景使用）
|
||||
* 后端对应 POST /sendEmailCaptcha，参数为 { email }
|
||||
* @param options.skipTenant 为 true 时不携带 tenantId 请求头（登录前无法确定租户时使用）
|
||||
*/
|
||||
export async function sendEmailCaptcha(
|
||||
data: LoginParam,
|
||||
options?: { skipTenant?: boolean }
|
||||
) {
|
||||
const res = await request.post<ApiResult<unknown>>(
|
||||
SERVER_API_URL + '/sendEmailCaptcha',
|
||||
data,
|
||||
options?.skipTenant ? { headers: { 'X-Tenant-Skip': '1' } } : undefined
|
||||
);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录
|
||||
*/
|
||||
|
||||
@@ -10,5 +10,33 @@ export default {
|
||||
loading: 'loading',
|
||||
oldPassword: 'Old',
|
||||
newPassword: 'New',
|
||||
confirm: 'Confirm'
|
||||
confirm: 'Confirm',
|
||||
forgetPage: {
|
||||
title: 'Forgot Password',
|
||||
subTitle: 'Enter your account info to reset the password',
|
||||
tabEmail: 'By Email',
|
||||
tabPhone: 'By Phone',
|
||||
email: 'Email',
|
||||
phone: 'Phone',
|
||||
emailCode: 'Email Code',
|
||||
code: 'SMS Code',
|
||||
getCode: 'Get Code',
|
||||
sentEmail: 'Verification code sent, please check your email',
|
||||
sentPhone: 'Verification code sent',
|
||||
newPassword: 'New Password',
|
||||
confirmPassword: 'Confirm Password',
|
||||
reset: 'Reset Password',
|
||||
backLogin: 'Back to Login',
|
||||
success: 'Password reset successfully, please login with the new password',
|
||||
emailPlaceholder: 'Please enter your registered email',
|
||||
phonePlaceholder: 'Please enter your registered phone',
|
||||
codePlaceholder: 'Please enter the code',
|
||||
passwordPlaceholder: 'At least 8 chars, must contain letters and numbers',
|
||||
confirmPlaceholder: 'Please enter the password again',
|
||||
newPasswordRule: 'Password must be at least 8 chars with letters and numbers',
|
||||
confirmRule: 'The two passwords do not match',
|
||||
emailRule: 'Please enter a valid email address',
|
||||
phoneRule: 'Please enter a valid phone number',
|
||||
codeRule: 'Please enter the code'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -10,5 +10,33 @@ export default {
|
||||
loading: '登录中',
|
||||
oldPassword: '旧密码',
|
||||
newPassword: '新密码',
|
||||
confirm: '确认密码'
|
||||
confirm: '确认密码',
|
||||
forgetPage: {
|
||||
title: '忘记密码',
|
||||
subTitle: '请输入账号信息以重置密码',
|
||||
tabEmail: '邮箱找回',
|
||||
tabPhone: '手机找回',
|
||||
email: '邮箱',
|
||||
phone: '手机号',
|
||||
emailCode: '邮箱验证码',
|
||||
code: '短信验证码',
|
||||
getCode: '获取验证码',
|
||||
sentEmail: '验证码已发送，请查收邮箱',
|
||||
sentPhone: '验证码已发送',
|
||||
newPassword: '新密码',
|
||||
confirmPassword: '确认新密码',
|
||||
reset: '重置密码',
|
||||
backLogin: '返回登录',
|
||||
success: '密码重置成功，请使用新密码登录',
|
||||
emailPlaceholder: '请输入注册邮箱',
|
||||
phonePlaceholder: '请输入注册手机号',
|
||||
codePlaceholder: '请输入验证码',
|
||||
passwordPlaceholder: '至少 8 位，需包含字母和数字',
|
||||
confirmPlaceholder: '请再次输入新密码',
|
||||
newPasswordRule: '新密码至少 8 位，需包含字母和数字',
|
||||
confirmRule: '两次输入的密码不一致',
|
||||
emailRule: '请输入正确的邮箱地址',
|
||||
phoneRule: '请输入正确的手机号',
|
||||
codeRule: '请输入验证码'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -50,11 +50,11 @@ export const routes = [
|
||||
component: () => import('@/views/passport/merchant/success.vue'),
|
||||
meta: { title: '申请提交成功' }
|
||||
},
|
||||
// {
|
||||
// path: '/forget',
|
||||
// component: () => import('@/views/passport/forget/index.vue'),
|
||||
// meta: { title: '忘记密码' }
|
||||
// },
|
||||
{
|
||||
path: '/forget',
|
||||
component: () => import('@/views/passport/forget/index.vue'),
|
||||
meta: { title: '忘记密码' }
|
||||
},
|
||||
// {
|
||||
// path: '/wx-work-login',
|
||||
// component: () => import('@/views/passport/wx-work/index.vue'),
|
||||
|
||||
@@ -47,6 +47,11 @@ service.interceptors.request.use(
|
||||
}
|
||||
// 获取租户ID
|
||||
if (config.headers) {
|
||||
// 登录前场景（找回密码等）由调用方显式设置 X-Tenant-Skip，
|
||||
// 此时不做任何租户/企业/商户/域名头注入，避免串租户
|
||||
if (config.headers['X-Tenant-Skip']) {
|
||||
return config;
|
||||
}
|
||||
// 附加企业ID
|
||||
const companyId = localStorage.getItem('CompanyId');
|
||||
if (companyId) {
|
||||
|
||||
507
src/views/passport/forget/index.vue
Normal file
507
src/views/passport/forget/index.vue
Normal file
@@ -0,0 +1,507 @@
|
||||
<template>
|
||||
<div
|
||||
class="login-wrapper"
|
||||
:style="{
|
||||
backgroundImage: 'url(https://oss.wsdns.cn/20250105/314d2a3da10048b09ef0f0464fdacbff.jpg)'
|
||||
}"
|
||||
>
|
||||
<div class="logo-login" v-if="config?.siteName">
|
||||
<img :src="config.siteLogo" class="logo" />
|
||||
<h4>{{ config.siteName }}</h4>
|
||||
</div>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="login-form ele-bg-white"
|
||||
>
|
||||
<div class="login-title flex justify-center items-center px-12">
|
||||
<h4 class="title-btn active">{{ t('login.forgetPage.title') }}</h4>
|
||||
</div>
|
||||
<p class="forget-subtitle">{{ t('login.forgetPage.subTitle') }}</p>
|
||||
|
||||
<a-tabs
|
||||
v-model:activeKey="activeTab"
|
||||
class="forget-tabs"
|
||||
@change="onTabChange"
|
||||
>
|
||||
<!-- 邮箱找回 -->
|
||||
<a-tab-pane key="email" :tab="t('login.forgetPage.tabEmail')">
|
||||
<a-form-item name="email">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
v-model:value="form.email"
|
||||
:placeholder="t('login.forgetPage.emailPlaceholder')"
|
||||
>
|
||||
<template #prefix>
|
||||
<MailOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="emailCode">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
:maxlength="6"
|
||||
v-model:value="form.emailCode"
|
||||
:placeholder="t('login.forgetPage.codePlaceholder')"
|
||||
>
|
||||
<template #prefix>
|
||||
<SafetyOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="sendCode"
|
||||
>
|
||||
<span v-if="!countdownTime">{{ t('login.forgetPage.getCode') }}</span>
|
||||
<span v-else>{{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-tab-pane>
|
||||
|
||||
<!-- 手机找回 -->
|
||||
<a-tab-pane key="phone" :tab="t('login.forgetPage.tabPhone')">
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
:placeholder="t('login.forgetPage.phonePlaceholder')"
|
||||
>
|
||||
<template #prefix>
|
||||
<MobileOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
:maxlength="6"
|
||||
v-model:value="form.code"
|
||||
:placeholder="t('login.forgetPage.codePlaceholder')"
|
||||
>
|
||||
<template #prefix>
|
||||
<SafetyOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="sendCode"
|
||||
>
|
||||
<span v-if="!countdownTime">{{ t('login.forgetPage.getCode') }}</span>
|
||||
<span v-else>{{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<a-form-item name="newPassword">
|
||||
<a-input-password
|
||||
size="large"
|
||||
v-model:value="form.newPassword"
|
||||
:placeholder="t('login.forgetPage.passwordPlaceholder')"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item name="confirmPassword">
|
||||
<a-input-password
|
||||
size="large"
|
||||
v-model:value="form.confirmPassword"
|
||||
:placeholder="t('login.forgetPage.confirmPlaceholder')"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
{{ loading ? t('login.loading') : t('login.forgetPage.reset') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
<div class="text-center pt-2">
|
||||
<a class="login-forget" @click="goLogin">{{ t('login.forgetPage.backLogin') }}</a>
|
||||
</div>
|
||||
</a-form>
|
||||
<div class="login-copyright">
|
||||
<a-space>
|
||||
<span>© {{ new Date().getFullYear() }}</span>
|
||||
<span>{{ config?.copyright || 'websoft.top Inc.' }}</span>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed, onUnmounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
LockOutlined,
|
||||
MobileOutlined,
|
||||
SafetyOutlined,
|
||||
MailOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import {
|
||||
sendSmsCaptchaByAdmin,
|
||||
sendEmailCaptcha
|
||||
} from '@/api/passport/login';
|
||||
import { resetPassword } from '@/api/layout';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { Config } from '@/api/cms/cmsWebsiteField/model';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
// 默认站点配置（与登录页保持一致）
|
||||
const defaultConfig: Config = {
|
||||
siteName: '小程序商城',
|
||||
siteLogo: 'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg',
|
||||
domain: '',
|
||||
icpNo: '',
|
||||
copyright: '',
|
||||
loginBgImg: '',
|
||||
address: '',
|
||||
tel: '',
|
||||
kefu2: '',
|
||||
kefu1: '',
|
||||
email: '',
|
||||
loginTitle: '',
|
||||
sysLogo: ''
|
||||
};
|
||||
const config = ref<Config>({ ...defaultConfig });
|
||||
|
||||
// 找回方式：email(邮箱) / phone(手机)，默认邮箱
|
||||
const activeTab = ref<'email' | 'phone'>('email');
|
||||
|
||||
const { form } = useFormData<{
|
||||
email: string;
|
||||
emailCode: string;
|
||||
phone: string;
|
||||
code: string;
|
||||
newPassword: string;
|
||||
confirmPassword: string;
|
||||
}>({
|
||||
email: '',
|
||||
emailCode: '',
|
||||
phone: '',
|
||||
code: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
const loading = ref(false);
|
||||
|
||||
// 验证码倒计时
|
||||
const countdownTime = ref(0);
|
||||
let countdownTimer: number | null = null;
|
||||
|
||||
// 密码强度：至少8位，且包含字母和数字
|
||||
const passwordRules = [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.forgetPage.newPasswordRule'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{ min: 8, message: t('login.forgetPage.newPasswordRule'), trigger: 'blur' },
|
||||
{
|
||||
pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/,
|
||||
message: t('login.forgetPage.newPasswordRule'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
];
|
||||
const confirmPasswordRules = [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.forgetPage.confirmRule'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (_rule: unknown, value: string) =>
|
||||
value === form.newPassword
|
||||
? Promise.resolve()
|
||||
: Promise.reject(new Error(t('login.forgetPage.confirmRule'))),
|
||||
trigger: 'blur'
|
||||
}
|
||||
];
|
||||
|
||||
// 根据当前找回方式动态生成校验规则
|
||||
const rules = computed(() => {
|
||||
if (activeTab.value === 'email') {
|
||||
return {
|
||||
email: [
|
||||
{ required: true, message: t('login.forgetPage.emailRule'), trigger: 'blur' },
|
||||
{ type: 'email', message: t('login.forgetPage.emailRule'), trigger: 'blur' }
|
||||
],
|
||||
emailCode: [
|
||||
{ required: true, message: t('login.forgetPage.codeRule'), trigger: 'blur' }
|
||||
],
|
||||
newPassword: passwordRules,
|
||||
confirmPassword: confirmPasswordRules
|
||||
};
|
||||
}
|
||||
return {
|
||||
phone: [
|
||||
{ required: true, message: t('login.forgetPage.phoneRule'), trigger: 'blur' },
|
||||
{ pattern: /^1\d{10}$/, message: t('login.forgetPage.phoneRule'), trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: t('login.forgetPage.codeRule'), trigger: 'blur' }
|
||||
],
|
||||
newPassword: passwordRules,
|
||||
confirmPassword: confirmPasswordRules
|
||||
};
|
||||
});
|
||||
|
||||
const onTabChange = () => {
|
||||
formRef.value?.clearValidate();
|
||||
};
|
||||
|
||||
// 发送验证码（邮箱/手机）
|
||||
const sendCode = () => {
|
||||
if (activeTab.value === 'email') {
|
||||
if (!form.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
|
||||
message.error(t('login.forgetPage.emailRule'));
|
||||
return;
|
||||
}
|
||||
sendEmailCaptcha({ email: form.email }, { skipTenant: true })
|
||||
.then(() => {
|
||||
message.success(t('login.forgetPage.sentEmail'));
|
||||
startCountdown();
|
||||
})
|
||||
.catch((e: Error) => message.error(e.message));
|
||||
} else {
|
||||
if (!form.phone || !/^1\d{10}$/.test(form.phone)) {
|
||||
message.error(t('login.forgetPage.phoneRule'));
|
||||
return;
|
||||
}
|
||||
sendSmsCaptchaByAdmin({ phone: form.phone }, { skipTenant: true })
|
||||
.then(() => {
|
||||
message.success(t('login.forgetPage.getCode'));
|
||||
startCountdown();
|
||||
})
|
||||
.catch((e: Error) => message.error(e.message));
|
||||
}
|
||||
};
|
||||
|
||||
const startCountdown = () => {
|
||||
countdownTime.value = 60;
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const goLogin = () => {
|
||||
router.push('/login');
|
||||
};
|
||||
|
||||
// 提交重置
|
||||
const submit = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const params: Record<string, unknown> = {
|
||||
newPassword: form.newPassword,
|
||||
confirmPassword: form.confirmPassword
|
||||
};
|
||||
if (activeTab.value === 'email') {
|
||||
params.email = form.email;
|
||||
params.emailCode = form.emailCode;
|
||||
} else {
|
||||
params.phone = form.phone;
|
||||
params.smsCode = form.code;
|
||||
}
|
||||
resetPassword(params as any)
|
||||
.then((msg) => {
|
||||
message.success(msg || t('login.forgetPage.success'));
|
||||
loading.value = false;
|
||||
router.push('/login');
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
message.error(e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
if (countdownTimer) clearInterval(countdownTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-wrapper {
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--grey-5);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.forget-subtitle {
|
||||
text-align: center;
|
||||
color: #8c8c8c;
|
||||
margin: -8px 0 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 380px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
h4 {
|
||||
padding: 22px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-btn {
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 50px;
|
||||
|
||||
.active {
|
||||
color: #007dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forget-tabs {
|
||||
:deep(.ant-tabs-nav) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
padding: 48px 0 22px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo-login {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-left: 6px;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height: 640px) {
|
||||
.login-wrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-form {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user