Skip to content

B
bigDataSystem
Commit cd34a76f authored by 张伯涛's avatar 张伯涛
Browse files
Options

登录页面调整

parent a442881f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 504 additions and 227 deletions
src/assets/svg/long-logo-blue-zh-cn.svg 0 → 100644
View file @ cd34a76f
This diff is collapsed.
src/views/sys/login/Login.vue
View file @ cd34a76f
<template>
<div :class="prefixCls" class="relative w-full h-full px-4">
<div class="flex items-center absolute right-4 top-4">
<AppDarkModeToggle class="enter-x mr-2" v-if="!sessionTimeout" />
<AppLocalePicker
class="text-white enter-x xl:text-gray-600"
:show-text="false"
v-if="!sessionTimeout && showLocale"
/>
</div>
<span class="-enter-x xl:hidden">
<AppLogo :alwaysShowTitle="true" />
</span>
<div class="container relative h-full py-2 mx-auto sm:px-10">
<div class="flex h-full">
<div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
<AppLogo class="-enter-x" />
<div class="my-auto">
<img
:alt="title"
src="../../../assets/svg/login-box-bg.svg"
class="w-1/2 -mt-16 -enter-x"
/>
<div class="mt-10 font-medium text-white -enter-x">
<span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
</div>
<div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x">
{{ t('sys.login.signInDesc') }}
</div>
</div>
<div class="login_module">
<div class="content_left"/>
<div class="content_right">
<div class="content_rightBody">
<div class="top">
<AppLocalePicker
class="text-white enter-x xl:text-gray-600"
:show-text="false"
v-if="!sessionTimeout && showLocale"
/>
</div>
<div class="form_body">
<div class="formImg">
<img src="../../../assets/svg/long-logo-blue-zh-cn.svg" class="login_logo" alt="Logo" />
</div>
<div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
<div
:class="`${prefixCls}-form`"
class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
>
<LoginForm />
<ForgetPasswordForm />
<RegisterForm />
<MobileForm />
<QrCodeForm />
</div>
<div class="titleRow">
<div class="title">登录</div>
<div class="welcom">欢迎登录 Transwarp Data Hub</div>
</div>
<LoginForm />
</div>
<div class="footer">
<div class="btnRow">
<a-button type="text" @click="agreementBtn">用户协议</a-button>
<a-button type="text" @click="aboutUsBtn">关于我们</a-button>
<a-button type="text" @click="serviceBtn">售后服务</a-button>
</div>
<div class="info">© 2013-2024 TRANSWARP. All Rights Reserved.</div>
</div>
</div>
</div>
<AgreementModal @register="registerModal"/>
</div>
</template>
<script lang="ts" setup>
import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
import { useGlobSetting } from '@/hooks/setting';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { useLocaleStore } from '@/store/modules/locale';
import { computed } from 'vue';
import ForgetPasswordForm from './ForgetPasswordForm.vue';
import LoginForm from './LoginForm.vue';
import MobileForm from './MobileForm.vue';
import QrCodeForm from './QrCodeForm.vue';
import RegisterForm from './RegisterForm.vue';
import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
import { useGlobSetting } from '@/hooks/setting';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { useLocaleStore } from '@/store/modules/locale';
import { computed } from 'vue';
import ForgetPasswordForm from './ForgetPasswordForm.vue';
import LoginForm from './LoginForm.vue';
import MobileForm from './MobileForm.vue';
import QrCodeForm from './QrCodeForm.vue';
import RegisterForm from './RegisterForm.vue';
import {useModal} from "@/components/Modal";
import AgreementModal from "@/views/sys/login/agreementModal.vue";
defineProps({
sessionTimeout: {
type: Boolean,
},
});
const [registerModal, { openModal }] = useModal();
const globSetting = useGlobSetting();
const { prefixCls } = useDesign('login');
const { t } = useI18n();
const localeStore = useLocaleStore();
const showLocale = localeStore.getShowPicker;
const title = computed(() => globSetting?.title ?? '');
function agreementBtn() {
openModal(true, {
defineProps({
sessionTimeout: {
type: Boolean,
},
});
const globSetting = useGlobSetting();
const { prefixCls } = useDesign('login');
const { t } = useI18n();
const localeStore = useLocaleStore();
const showLocale = localeStore.getShowPicker;
const title = computed(() => globSetting?.title ?? '');
}
function aboutUsBtn() {
window.open('https://www.transwarp.cn/', '_blank');
}
function serviceBtn() {
window.open('https://community.transwarp.cn/', '_blank');
}
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-login';
@logo-prefix-cls: ~'@{namespace}-app-logo';
@countdown-prefix-cls: ~'@{namespace}-countdown-input';
@dark-bg: #293146;
html[data-theme='dark'] {
.@{prefix-cls} {
background-color: @dark-bg;
&::before {
background-image: url('@/assets/svg/login-bg-dark.svg');
}
<style lang="less" scoped>
.ant-input,
.ant-input-password {
background-color: #232a3b;
}
.ant-btn:not(.ant-btn-link, .ant-btn-primary) {
border: 1px solid #4a5569;
}
.login_module{
display: flex;
flex-flow: row wrap;
min-width: 0;
&-form {
background: transparent !important;
}
.app-iconify {
color: #fff;
}
.ant-divider-inner-text {
color: @text-color-secondary;
}
}
height: 100%;
width: 100%;
background-image: url('@/assets/images/login-bg.jpg');
.content_left{
flex: 1 1 auto;
}
.@{prefix-cls} {
min-height: 100%;
overflow: hidden;
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-xl) {
background-color: #293146;
.@{prefix-cls}-form {
background-color: #fff;
}
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
.content_right{
flex: 0 0 520px;
.content_rightBody{
display: flex;
flex-direction: column;
padding: 25px;
width: 540px;
height: 100%;
margin-left: -48%;
background-image: url('@/assets/svg/login-bg.svg');
background-repeat: no-repeat;
background-position: 100%;
background-size: auto 100%;
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-xl) {
display: none;
}
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
}
.@{logo-prefix-cls} {
position: absolute;
top: 12px;
height: 30px;
&__title {
color: #fff;
font-size: 16px;
}
img {
width: 32px;
}
.top{
height: 2em;
display: flex;
-webkit-box-pack: end;
justify-content: flex-end;
}
.container {
.@{logo-prefix-cls} {
display: flex;
width: 60%;
height: 80px;
&__title {
color: #fff;
.form_body{
flex: 1 0 auto;
padding: 0px 5em;
width: 35em;
align-self: center;
display: flex;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: stretch;
align-items: stretch;
box-sizing: border-box;
.formImg{
text-align: center;
}
.titleRow{
.title{
text-align: center;
margin: 1em 0 0.5em 0;
color: #1C222B;
font-weight: 600;
font-size: 24px;
line-height: 1.3;
}
img {
width: 48px;
.welcom{
padding-bottom: 32px;
text-align: center;
font-size: 16px;
color: rgb(75, 91, 118);
}
}
}
&-sign-in-way {
.anticon {
color: #888;
font-size: 22px;
cursor: pointer;
&:hover {
color: @primary-color;
.footer{
display: flex;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
.btnRow{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0px 5em;
::v-deep .ant-btn{
color: rgb(75, 91, 118);
}
}
}
input:not([type='checkbox']) {
min-width: 360px;
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-xl) {
min-width: 320px;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-lg) {
min-width: 260px;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-md) {
min-width: 240px;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-sm) {
min-width: 160px;
.info{
font-size: 14px;
color: #97A3B7;
margin-top: 1em;
}
}
.@{countdown-prefix-cls} input {
min-width: unset;
}
}
}
</style>
src/views/sys/login/LoginForm.vue
View file @ cd34a76f
<template>
<LoginFormTitle v-show="getShow" class="enter-x" />
<!-- <LoginFormTitle v-show="getShow" class="enter-x" />-->
<Form
class="p-4 enter-x"
:model="formData"
......@@ -25,24 +25,24 @@
/>
</FormItem>
<ARow class="enter-x">
<ACol :span="12">
<FormItem>
<!-- No logic, you need to deal with it yourself -->
<Checkbox v-model:checked="rememberMe" size="small">
{{ t('sys.login.rememberMe') }}
</Checkbox>
</FormItem>
</ACol>
<ACol :span="12">
<FormItem :style="{ 'text-align': 'right' }">
<!-- No logic, you need to deal with it yourself -->
<Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
{{ t('sys.login.forgetPassword') }}
</Button>
</FormItem>
</ACol>
</ARow>
<!-- <ARow class="enter-x">-->
<!-- <ACol :span="12">-->
<!-- <FormItem>-->
<!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;-->
<!-- <Checkbox v-model:checked="rememberMe" size="small">-->
<!-- {{ t('sys.login.rememberMe') }}-->
<!-- </Checkbox>-->
<!-- </FormItem>-->
<!-- </ACol>-->
<!-- <ACol :span="12">-->
<!-- <FormItem :style="{ 'text-align': 'right' }">-->
<!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;-->
<!-- <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">-->
<!-- {{ t('sys.login.forgetPassword') }}-->
<!-- </Button>-->
<!-- </FormItem>-->
<!-- </ACol>-->
<!-- </ARow>-->
<FormItem class="enter-x">
<Button type="primary" size="large" block @click="handleLogin" :loading="loading">
......@@ -52,33 +52,33 @@
{{ t('sys.login.registerButton') }}
</Button> -->
</FormItem>
<ARow class="enter-x" :gutter="[16, 16]">
<ACol :md="8" :xs="24">
<Button block @click="setLoginState(LoginStateEnum.MOBILE)">
{{ t('sys.login.mobileSignInFormTitle') }}
</Button>
</ACol>
<ACol :md="8" :xs="24">
<Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
{{ t('sys.login.qrSignInFormTitle') }}
</Button>
</ACol>
<ACol :md="8" :xs="24">
<Button block @click="setLoginState(LoginStateEnum.REGISTER)">
{{ t('sys.login.registerButton') }}
</Button>
</ACol>
</ARow>
<!-- <ARow class="enter-x" :gutter="[16, 16]">-->
<!-- <ACol :md="8" :xs="24">-->
<!-- <Button block @click="setLoginState(LoginStateEnum.MOBILE)">-->
<!-- {{ t('sys.login.mobileSignInFormTitle') }}-->
<!-- </Button>-->
<!-- </ACol>-->
<!-- <ACol :md="8" :xs="24">-->
<!-- <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">-->
<!-- {{ t('sys.login.qrSignInFormTitle') }}-->
<!-- </Button>-->
<!-- </ACol>-->
<!-- <ACol :md="8" :xs="24">-->
<!-- <Button block @click="setLoginState(LoginStateEnum.REGISTER)">-->
<!-- {{ t('sys.login.registerButton') }}-->
<!-- </Button>-->
<!-- </ACol>-->
<!-- </ARow>-->
<Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>
<!-- <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>-->
<div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
<GithubFilled />
<WechatFilled />
<AlipayCircleFilled />
<GoogleCircleFilled />
<TwitterCircleFilled />
</div>
<!-- <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">-->
<!-- <GithubFilled />-->
<!-- <WechatFilled />-->
<!-- <AlipayCircleFilled />-->
<!-- <GoogleCircleFilled />-->
<!-- <TwitterCircleFilled />-->
<!-- </div>-->
</Form>
</template>
<script lang="ts" setup>
......
src/views/sys/login/LoginOld.vue 0 → 100644
View file @ cd34a76f
<template>
<div :class="prefixCls" class="relative w-full h-full px-4">
<div class="flex items-center absolute right-4 top-4">
<AppDarkModeToggle class="enter-x mr-2" v-if="!sessionTimeout" />
<AppLocalePicker
class="text-white enter-x xl:text-gray-600"
:show-text="false"
v-if="!sessionTimeout && showLocale"
/>
</div>
<span class="-enter-x xl:hidden">
<AppLogo :alwaysShowTitle="true" />
</span>
<div class="container relative h-full py-2 mx-auto sm:px-10">
<div class="flex h-full">
<div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
<AppLogo class="-enter-x" />
<div class="my-auto">
<img
:alt="title"
src="../../../assets/svg/login-box-bg.svg"
class="w-1/2 -mt-16 -enter-x"
/>
<div class="mt-10 font-medium text-white -enter-x">
<span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
</div>
<div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x">
{{ t('sys.login.signInDesc') }}
</div>
</div>
</div>
<div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
<div
:class="`${prefixCls}-form`"
class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
>
<LoginForm />
<ForgetPasswordForm />
<RegisterForm />
<MobileForm />
<QrCodeForm />
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
import { useGlobSetting } from '@/hooks/setting';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { useLocaleStore } from '@/store/modules/locale';
import { computed } from 'vue';
import ForgetPasswordForm from './ForgetPasswordForm.vue';
import LoginForm from './LoginForm.vue';
import MobileForm from './MobileForm.vue';
import QrCodeForm from './QrCodeForm.vue';
import RegisterForm from './RegisterForm.vue';
defineProps({
sessionTimeout: {
type: Boolean,
},
});
const globSetting = useGlobSetting();
const { prefixCls } = useDesign('login');
const { t } = useI18n();
const localeStore = useLocaleStore();
const showLocale = localeStore.getShowPicker;
const title = computed(() => globSetting?.title ?? '');
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-login';
@logo-prefix-cls: ~'@{namespace}-app-logo';
@countdown-prefix-cls: ~'@{namespace}-countdown-input';
@dark-bg: #293146;
html[data-theme='dark'] {
.@{prefix-cls} {
background-color: @dark-bg;
&::before {
background-image: url('@/assets/svg/login-bg-dark.svg');
}
.ant-input,
.ant-input-password {
background-color: #232a3b;
}
.ant-btn:not(.ant-btn-link, .ant-btn-primary) {
border: 1px solid #4a5569;
}
&-form {
background: transparent !important;
}
.app-iconify {
color: #fff;
}
.ant-divider-inner-text {
color: @text-color-secondary;
}
}
}
.@{prefix-cls} {
min-height: 100%;
overflow: hidden;
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-xl) {
background-color: #293146;
.@{prefix-cls}-form {
background-color: #fff;
}
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: -48%;
background-image: url('@/assets/svg/login-bg.svg');
background-repeat: no-repeat;
background-position: 100%;
background-size: auto 100%;
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-xl) {
display: none;
}
}
.@{logo-prefix-cls} {
position: absolute;
top: 12px;
height: 30px;
&__title {
color: #fff;
font-size: 16px;
}
img {
width: 32px;
}
}
.container {
.@{logo-prefix-cls} {
display: flex;
width: 60%;
height: 80px;
&__title {
color: #fff;
font-size: 24px;
}
img {
width: 48px;
}
}
}
&-sign-in-way {
.anticon {
color: #888;
font-size: 22px;
cursor: pointer;
&:hover {
color: @primary-color;
}
}
}
input:not([type='checkbox']) {
min-width: 360px;
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-xl) {
min-width: 320px;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-lg) {
min-width: 260px;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-md) {
min-width: 240px;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (max-width: @screen-sm) {
min-width: 160px;
}
}
.@{countdown-prefix-cls} input {
min-width: unset;
}
}
</style>
src/views/sys/login/agreementModal.vue 0 → 100644
View file @ cd34a76f
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment