|
|
|
|
@ -1,239 +1,265 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { computed, reactive, ref } from 'vue'
|
|
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
|
import { useMessage } from 'naive-ui'
|
|
|
|
|
import { computed, reactive, ref } from "vue";
|
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
|
import { useMessage } from "naive-ui";
|
|
|
|
|
|
|
|
|
|
// import captcha from './captcha.vue'
|
|
|
|
|
import { PageEnum } from '@/enums/pageEnum'
|
|
|
|
|
import { useUserStore } from '@/store/modules/user'
|
|
|
|
|
import { ResultEnum } from '@/enums/httpEnum'
|
|
|
|
|
import { getCode, smsLogin } from '@/api/login/login'
|
|
|
|
|
import { PageEnum } from "@/enums/pageEnum";
|
|
|
|
|
import { useUserStore } from "@/store/modules/user";
|
|
|
|
|
import { ResultEnum } from "@/enums/httpEnum";
|
|
|
|
|
import { getCode, smsLogin } from "@/api/login/login";
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits(['close', 'forget'])
|
|
|
|
|
const emit = defineEmits(["close", "forget"]);
|
|
|
|
|
interface FormState {
|
|
|
|
|
enterprisecode?: string
|
|
|
|
|
username: string
|
|
|
|
|
password: string
|
|
|
|
|
enterprisecode?: string;
|
|
|
|
|
username: string;
|
|
|
|
|
password: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface FormSms {
|
|
|
|
|
agentcode: string
|
|
|
|
|
phone: string
|
|
|
|
|
phonecode: string
|
|
|
|
|
agentcode: string;
|
|
|
|
|
phone: string;
|
|
|
|
|
phonecode: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const formRef = ref()
|
|
|
|
|
const formRefSms = ref()
|
|
|
|
|
const message = useMessage()
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
const autoLogin = ref(true)
|
|
|
|
|
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
|
|
|
|
|
const userStore = useUserStore()
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const show = ref(false)
|
|
|
|
|
const flag = ref(true)
|
|
|
|
|
const formRef = ref();
|
|
|
|
|
const formRefSms = ref();
|
|
|
|
|
const message = useMessage();
|
|
|
|
|
const loading = ref(false);
|
|
|
|
|
const autoLogin = ref(true);
|
|
|
|
|
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
|
|
|
|
|
const userStore = useUserStore();
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
const show = ref(false);
|
|
|
|
|
const flag = ref(true);
|
|
|
|
|
|
|
|
|
|
const formInline: FormState = reactive({
|
|
|
|
|
// enterprisecode: '演示公司',
|
|
|
|
|
// username: 'yanshi01',
|
|
|
|
|
// password: '123456',
|
|
|
|
|
// enterprisecode: "演示公司",
|
|
|
|
|
// username: "yanshi01",
|
|
|
|
|
// password: "123456",
|
|
|
|
|
enterprisecode: '',
|
|
|
|
|
username: '',
|
|
|
|
|
password: '',
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const formSms: FormSms = reactive({
|
|
|
|
|
agentcode: '',
|
|
|
|
|
phone: '',
|
|
|
|
|
phonecode: '',
|
|
|
|
|
})
|
|
|
|
|
const tab = ref(0)
|
|
|
|
|
const countTime = ref('获取验证码')
|
|
|
|
|
agentcode: "",
|
|
|
|
|
phone: "",
|
|
|
|
|
phonecode: "",
|
|
|
|
|
});
|
|
|
|
|
const tab = ref(0);
|
|
|
|
|
const countTime = ref("获取验证码");
|
|
|
|
|
const rules = {
|
|
|
|
|
enterprisecode: { required: true, message: '请输入企业编码', trigger: 'blur' },
|
|
|
|
|
agentcode: { required: true, message: '请输入企业编码', trigger: 'blur' },
|
|
|
|
|
phone: { required: true, message: '请输入手机号', trigger: 'blur' },
|
|
|
|
|
phonecode: { required: true, message: '请输入验证码', trigger: 'blur' },
|
|
|
|
|
username: { required: true, message: '请输入用户名', trigger: 'blur' },
|
|
|
|
|
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
|
|
captcha: { required: true, message: '请输入验证码', trigger: 'blur' },
|
|
|
|
|
}
|
|
|
|
|
enterprisecode: { required: true, message: "请输入企业编码", trigger: "blur" },
|
|
|
|
|
agentcode: { required: true, message: "请输入企业编码", trigger: "blur" },
|
|
|
|
|
phone: { required: true, message: "请输入手机号", trigger: "blur" },
|
|
|
|
|
phonecode: { required: true, message: "请输入验证码", trigger: "blur" },
|
|
|
|
|
username: { required: true, message: "请输入用户名", trigger: "blur" },
|
|
|
|
|
password: { required: true, message: "请输入密码", trigger: "blur" },
|
|
|
|
|
captcha: { required: true, message: "请输入验证码", trigger: "blur" },
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function handleSubmit(e) {
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
formRef.value.validate(async (errors) => {
|
|
|
|
|
if (!errors) {
|
|
|
|
|
const { username, password, enterprisecode } = formInline
|
|
|
|
|
message.loading('登录中...')
|
|
|
|
|
loading.value = true
|
|
|
|
|
const { username, password, enterprisecode } = formInline;
|
|
|
|
|
message.loading("登录中...");
|
|
|
|
|
loading.value = true;
|
|
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
|
username,
|
|
|
|
|
password,
|
|
|
|
|
codetoken: userStore.getCapToken,
|
|
|
|
|
agentcode: enterprisecode,
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const { code, message: msg } = await userStore.login(params)
|
|
|
|
|
const { code, message: msg } = await userStore.login(params);
|
|
|
|
|
if (code === ResultEnum.SUCCESS) {
|
|
|
|
|
await userStore.getInformation()
|
|
|
|
|
message.destroyAll()
|
|
|
|
|
|
|
|
|
|
const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
|
|
|
|
|
message.success('登录成功，即将进入系统')
|
|
|
|
|
if (route.name === LOGIN_NAME)
|
|
|
|
|
router.replace('/')
|
|
|
|
|
else router.replace(toPath)
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
message.destroyAll()
|
|
|
|
|
message.info(msg || '登录失败')
|
|
|
|
|
}
|
|
|
|
|
await userStore.getInformation();
|
|
|
|
|
message.destroyAll();
|
|
|
|
|
|
|
|
|
|
const toPath = decodeURIComponent((route.query?.redirect || "/") as string);
|
|
|
|
|
message.success("登录成功，即将进入系统");
|
|
|
|
|
if (route.name === LOGIN_NAME) router.replace("/");
|
|
|
|
|
else router.replace(toPath);
|
|
|
|
|
} else {
|
|
|
|
|
message.destroyAll();
|
|
|
|
|
message.info(msg || "登录失败");
|
|
|
|
|
}
|
|
|
|
|
finally {
|
|
|
|
|
loading.value = false
|
|
|
|
|
} finally {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
message.error("请填写完整信息，并且进行验证码校验");
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
message.error('请填写完整信息，并且进行验证码校验')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleSmsSubmit(e) {
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
formRefSms.value.validate(async (errors) => {
|
|
|
|
|
if (!errors) {
|
|
|
|
|
const { phone, agentcode, phonecode } = formSms
|
|
|
|
|
message.loading('登录中...')
|
|
|
|
|
loading.value = true
|
|
|
|
|
const { phone, agentcode, phonecode } = formSms;
|
|
|
|
|
message.loading("登录中...");
|
|
|
|
|
loading.value = true;
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const res = await smsLogin({
|
|
|
|
|
phone,
|
|
|
|
|
agentcode,
|
|
|
|
|
phonecode,
|
|
|
|
|
})
|
|
|
|
|
const { code, message: msg } = res
|
|
|
|
|
});
|
|
|
|
|
const { code, message: msg } = res;
|
|
|
|
|
if (code === ResultEnum.SUCCESS) {
|
|
|
|
|
// const { code, message: msg } = await userStore.login(params)
|
|
|
|
|
await userStore.getInformation()
|
|
|
|
|
|
|
|
|
|
message.destroyAll()
|
|
|
|
|
const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
|
|
|
|
|
message.success('登录成功，即将进入系统')
|
|
|
|
|
if (route.name === LOGIN_NAME)
|
|
|
|
|
router.replace('/')
|
|
|
|
|
else router.replace(toPath)
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
message.destroyAll()
|
|
|
|
|
message.info(msg || '登录失败')
|
|
|
|
|
}
|
|
|
|
|
await userStore.getInformation();
|
|
|
|
|
|
|
|
|
|
message.destroyAll();
|
|
|
|
|
const toPath = decodeURIComponent((route.query?.redirect || "/") as string);
|
|
|
|
|
message.success("登录成功，即将进入系统");
|
|
|
|
|
if (route.name === LOGIN_NAME) router.replace("/");
|
|
|
|
|
else router.replace(toPath);
|
|
|
|
|
} else {
|
|
|
|
|
message.destroyAll();
|
|
|
|
|
message.info(msg || "登录失败");
|
|
|
|
|
}
|
|
|
|
|
finally {
|
|
|
|
|
loading.value = false
|
|
|
|
|
} finally {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
message.error("请填写完整信息，并且进行验证码校验");
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
message.error('请填写完整信息，并且进行验证码校验')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function close() {
|
|
|
|
|
emit('close')
|
|
|
|
|
emit("close");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function switchTab(type: number) {
|
|
|
|
|
tab.value = type
|
|
|
|
|
tab.value = type;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function computedForm() {
|
|
|
|
|
return !formInline.enterprisecode || !formInline.username || !formInline.password
|
|
|
|
|
return !formInline.enterprisecode || !formInline.username || !formInline.password;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function sendCode(value) {
|
|
|
|
|
if (!formSms.phonecode)
|
|
|
|
|
return
|
|
|
|
|
if (!formSms.phonecode) return;
|
|
|
|
|
|
|
|
|
|
if (!flag.value)
|
|
|
|
|
return
|
|
|
|
|
flag.value = false
|
|
|
|
|
if (!flag.value) return;
|
|
|
|
|
flag.value = false;
|
|
|
|
|
|
|
|
|
|
const res = await getCode({
|
|
|
|
|
phone: formSms.phone,
|
|
|
|
|
agentcode: '',
|
|
|
|
|
})
|
|
|
|
|
startCount()
|
|
|
|
|
agentcode: "",
|
|
|
|
|
});
|
|
|
|
|
startCount();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function startCount() {
|
|
|
|
|
let time = 60
|
|
|
|
|
countTime.value = '60s'
|
|
|
|
|
let time = 60;
|
|
|
|
|
countTime.value = "60s";
|
|
|
|
|
const timer = setInterval(() => {
|
|
|
|
|
countTime.value = `${--time}s`
|
|
|
|
|
countTime.value = `${--time}s`;
|
|
|
|
|
if (time === 0) {
|
|
|
|
|
clearInterval(timer)
|
|
|
|
|
countTime.value = '重新获取'
|
|
|
|
|
flag.value = true
|
|
|
|
|
clearInterval(timer);
|
|
|
|
|
countTime.value = "重新获取";
|
|
|
|
|
flag.value = true;
|
|
|
|
|
}
|
|
|
|
|
}, 1000)
|
|
|
|
|
}, 1000);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function forget() {
|
|
|
|
|
emit('forget')
|
|
|
|
|
emit("forget");
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="form-login">
|
|
|
|
|
<img class="img-close" src="@/assets/images/login/close.png" alt="" @click="close">
|
|
|
|
|
<img class="img-close" src="@/assets/images/login/close.png" alt="" @click="close" />
|
|
|
|
|
<div class="tab">
|
|
|
|
|
<div :class="{ 'tab-item-active': tab === 0 }" class="tab-item" @click="switchTab(0)">
|
|
|
|
|
<div
|
|
|
|
|
:class="{ 'tab-item-active': tab === 0 }"
|
|
|
|
|
class="tab-item"
|
|
|
|
|
@click="switchTab(0)"
|
|
|
|
|
>
|
|
|
|
|
密码登录
|
|
|
|
|
<div class="line" />
|
|
|
|
|
</div>
|
|
|
|
|
<div :class="{ 'tab-item-active': tab === 1 }" class="tab-item" @click="switchTab(1)">
|
|
|
|
|
<div
|
|
|
|
|
:class="{ 'tab-item-active': tab === 1 }"
|
|
|
|
|
class="tab-item"
|
|
|
|
|
@click="switchTab(1)"
|
|
|
|
|
>
|
|
|
|
|
短信登录
|
|
|
|
|
<div class="line" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="tab === 0" class="form-1">
|
|
|
|
|
<n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
|
|
|
|
|
<n-form
|
|
|
|
|
ref="formRef"
|
|
|
|
|
label-placement="left"
|
|
|
|
|
size="large"
|
|
|
|
|
:model="formInline"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
>
|
|
|
|
|
<n-form-item class="form-item" path="enterprisecode">
|
|
|
|
|
<n-input v-model:value="formInline.enterprisecode" class="item-input" placeholder="请输入企业编码">
|
|
|
|
|
<n-input
|
|
|
|
|
v-model:value="formInline.enterprisecode"
|
|
|
|
|
class="item-input"
|
|
|
|
|
placeholder="请输入企业编码"
|
|
|
|
|
>
|
|
|
|
|
<template #prefix>
|
|
|
|
|
<svg-icon size="20" name="enterprise" />
|
|
|
|
|
</template>
|
|
|
|
|
</n-input>
|
|
|
|
|
</n-form-item>
|
|
|
|
|
<n-form-item class="form-item" path="username">
|
|
|
|
|
<n-input v-model:value="formInline.username" class="item-input" placeholder="请输入用户名">
|
|
|
|
|
<n-input
|
|
|
|
|
v-model:value="formInline.username"
|
|
|
|
|
class="item-input"
|
|
|
|
|
placeholder="请输入用户名"
|
|
|
|
|
>
|
|
|
|
|
<template #prefix>
|
|
|
|
|
<svg-icon size="20" name="account" />
|
|
|
|
|
</template>
|
|
|
|
|
</n-input>
|
|
|
|
|
</n-form-item>
|
|
|
|
|
<n-form-item class="form-item" path="password">
|
|
|
|
|
<n-input v-model:value="formInline.password" class="item-input" type="password" show-password-on="click" placeholder="请输入密码">
|
|
|
|
|
<n-input
|
|
|
|
|
v-model:value="formInline.password"
|
|
|
|
|
class="item-input"
|
|
|
|
|
type="password"
|
|
|
|
|
show-password-on="click"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
>
|
|
|
|
|
<template #prefix>
|
|
|
|
|
<svg-icon size="20" name="password" />
|
|
|
|
|
</template>
|
|
|
|
|
</n-input>
|
|
|
|
|
</n-form-item>
|
|
|
|
|
<n-form-item class="form-item">
|
|
|
|
|
<n-button :class="{ 'btn-disabled': computedForm() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSubmit">
|
|
|
|
|
<n-button
|
|
|
|
|
:class="{ 'btn-disabled': computedForm() }"
|
|
|
|
|
class="btn"
|
|
|
|
|
type="primary"
|
|
|
|
|
size="large"
|
|
|
|
|
:loading="loading"
|
|
|
|
|
block
|
|
|
|
|
@click="handleSubmit"
|
|
|
|
|
>
|
|
|
|
|
登录
|
|
|
|
|
</n-button>
|
|
|
|
|
</n-form-item>
|
|
|
|
|
<n-form-item class="default-color">
|
|
|
|
|
<div class="w-full flex justify-between">
|
|
|
|
|
<div class="flex justify-between w-full">
|
|
|
|
|
<div class="flex-initial">
|
|
|
|
|
<n-checkbox v-model:checked="autoLogin">
|
|
|
|
|
记住账号
|
|
|
|
|
<span class="forgetSpan">记住账号</span>
|
|
|
|
|
</n-checkbox>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-initial order-last" @click="forget">
|
|
|
|
|
@ -244,43 +270,85 @@ function forget() {
|
|
|
|
|
</n-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="form-1">
|
|
|
|
|
<n-form ref="formRefSms" label-placement="left" size="large" :model="formSms" :rules="rules">
|
|
|
|
|
<n-form
|
|
|
|
|
ref="formRefSms"
|
|
|
|
|
label-placement="left"
|
|
|
|
|
size="large"
|
|
|
|
|
:model="formSms"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
>
|
|
|
|
|
<n-form-item class="form-item" path="agentcode">
|
|
|
|
|
<n-input v-model:value="formSms.agentcode" class="item-input" placeholder="请输入企业编码">
|
|
|
|
|
<n-input
|
|
|
|
|
v-model:value="formSms.agentcode"
|
|
|
|
|
class="item-input"
|
|
|
|
|
placeholder="请输入企业编码"
|
|
|
|
|
>
|
|
|
|
|
<template #prefix>
|
|
|
|
|
<svg-icon size="20" name="enterprise" />
|
|
|
|
|
</template>
|
|
|
|
|
</n-input>
|
|
|
|
|
</n-form-item>
|
|
|
|
|
<n-form-item class="form-item" path="phone">
|
|
|
|
|
<n-input v-model:value="formSms.phone" class="item-input" placeholder="请输入手机号">
|
|
|
|
|
<n-input
|
|
|
|
|
v-model:value="formSms.phone"
|
|
|
|
|
class="item-input"
|
|
|
|
|
placeholder="请输入手机号"
|
|
|
|
|
>
|
|
|
|
|
<template #prefix>
|
|
|
|
|
<img class="img-phone" src="@/assets/images/login/phone.png" alt="" @click="close">
|
|
|
|
|
<img
|
|
|
|
|
class="img-phone"
|
|
|
|
|
src="@/assets/images/login/phone.png"
|
|
|
|
|
alt=""
|
|
|
|
|
@click="close"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</n-input>
|
|
|
|
|
</n-form-item>
|
|
|
|
|
<n-form-item class="form-item" path="phonecode">
|
|
|
|
|
<n-input v-model:value="formSms.phonecode" maxlength="6" class="item-input" placeholder="请输入验证码" clearable>
|
|
|
|
|
<n-input
|
|
|
|
|
v-model:value="formSms.phonecode"
|
|
|
|
|
maxlength="6"
|
|
|
|
|
class="item-input"
|
|
|
|
|
placeholder="请输入验证码"
|
|
|
|
|
clearable
|
|
|
|
|
>
|
|
|
|
|
<template #prefix>
|
|
|
|
|
<img class="img-phone" src="@/assets/images/login/auth.png" alt="" @click="close">
|
|
|
|
|
<img
|
|
|
|
|
class="img-phone"
|
|
|
|
|
src="@/assets/images/login/auth.png"
|
|
|
|
|
alt=""
|
|
|
|
|
@click="close"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<template #suffix>
|
|
|
|
|
<div :class="{ 'code-count': countTime !== '获取验证码' }" class="code" @click="sendCode">
|
|
|
|
|
<div
|
|
|
|
|
:class="{ 'code-count': countTime !== '获取验证码' }"
|
|
|
|
|
class="code"
|
|
|
|
|
@click="sendCode"
|
|
|
|
|
>
|
|
|
|
|
{{ countTime }}
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</n-input>
|
|
|
|
|
</n-form-item>
|
|
|
|
|
<n-form-item class="form-item">
|
|
|
|
|
<n-button :class="{ 'btn-disabled': computedForm() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSmsSubmit">
|
|
|
|
|
<n-button
|
|
|
|
|
:class="{ 'btn-disabled': computedForm() }"
|
|
|
|
|
class="btn"
|
|
|
|
|
type="primary"
|
|
|
|
|
size="large"
|
|
|
|
|
:loading="loading"
|
|
|
|
|
block
|
|
|
|
|
@click="handleSmsSubmit"
|
|
|
|
|
>
|
|
|
|
|
登录
|
|
|
|
|
</n-button>
|
|
|
|
|
</n-form-item>
|
|
|
|
|
<n-form-item class="default-color">
|
|
|
|
|
<div class="w-full flex justify-between">
|
|
|
|
|
<div class="flex justify-between w-full">
|
|
|
|
|
<div class="flex-initial">
|
|
|
|
|
<n-checkbox v-model:checked="autoLogin">
|
|
|
|
|
记住账号
|
|
|
|
|
<span class="forgetSpan">记住账号</span>
|
|
|
|
|
</n-checkbox>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-initial order-last" @click="forget">
|
|
|
|
|
@ -298,15 +366,19 @@ function forget() {
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 417px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
background: linear-gradient(136deg,rgba(226,236,255,0.80) 3%, rgba(251,251,251,0.80) 97%);
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
136deg,
|
|
|
|
|
rgba(226, 236, 255, 0.8) 3%,
|
|
|
|
|
rgba(251, 251, 251, 0.8) 97%
|
|
|
|
|
);
|
|
|
|
|
border: 1px solid #ffffff;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.04);
|
|
|
|
|
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
|
|
|
|
|
backdrop-filter: blur(12px);
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 48px 27px 0;
|
|
|
|
|
|
|
|
|
|
.img-close{
|
|
|
|
|
.img-close {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: -44px;
|
|
|
|
|
@ -315,9 +387,9 @@ function forget() {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab{
|
|
|
|
|
.tab {
|
|
|
|
|
display: flex;
|
|
|
|
|
.tab-item{
|
|
|
|
|
.tab-item {
|
|
|
|
|
width: 72px;
|
|
|
|
|
height: 25px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
@ -328,7 +400,7 @@ function forget() {
|
|
|
|
|
line-height: 33px;
|
|
|
|
|
margin-right: 24px;
|
|
|
|
|
|
|
|
|
|
&-active{
|
|
|
|
|
&-active {
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 33px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
@ -338,12 +410,12 @@ function forget() {
|
|
|
|
|
color: #507afd;
|
|
|
|
|
line-height: 33px;
|
|
|
|
|
|
|
|
|
|
.line{
|
|
|
|
|
background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
|
|
|
|
|
.line {
|
|
|
|
|
background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line{
|
|
|
|
|
.line {
|
|
|
|
|
width: 32px;
|
|
|
|
|
height: 4px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
@ -353,55 +425,55 @@ function forget() {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-1{
|
|
|
|
|
.form-1 {
|
|
|
|
|
margin-top: 29px;
|
|
|
|
|
|
|
|
|
|
.form-item{
|
|
|
|
|
.form-item {
|
|
|
|
|
height: 60px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-input{
|
|
|
|
|
.item-input {
|
|
|
|
|
width: 366px;
|
|
|
|
|
// height: 44px;
|
|
|
|
|
background: rgba(255,255,255,0.50);
|
|
|
|
|
background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn{
|
|
|
|
|
.btn {
|
|
|
|
|
width: 366px;
|
|
|
|
|
height: 44px;
|
|
|
|
|
background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
|
|
|
|
|
background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
margin-bottom: 14px;
|
|
|
|
|
|
|
|
|
|
&-disabled{
|
|
|
|
|
&-disabled {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
background: linear-gradient(234deg,#96aaff 0%, #1c43ff 100%);
|
|
|
|
|
background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img-phone{
|
|
|
|
|
.img-phone {
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.order-last{
|
|
|
|
|
.order-last {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
|
|
|
font-weight: Regular;
|
|
|
|
|
color: #507afd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.code{
|
|
|
|
|
.code {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
|
|
|
font-weight: Regular;
|
|
|
|
|
color: #507afd;
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
|
|
|
|
|
&-count{
|
|
|
|
|
&-count {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #999999;
|
|
|
|
|
}
|
|
|
|
|
@ -410,4 +482,12 @@ function forget() {
|
|
|
|
|
::v-deep(.n-form-item-feedback--error) {
|
|
|
|
|
// color: #FF4E4F !important;
|
|
|
|
|
}
|
|
|
|
|
.forgetSpan {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
|
|
|
font-weight: Regular;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #999999;
|
|
|
|
|
line-height: 21px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
