From 5a813f3b28f3cbf1db3a3657ccf83267c6e0d315 Mon Sep 17 00:00:00 2001 From: Ben Lin <maobin001@msn.com> Date: 星期四, 24 十月 2024 11:22:02 +0800 Subject: [PATCH] 工艺路线相关优化 --- src/views/sys/login/Login.vue | 108 ++++++++++++++++++++++++++---------------------------- 1 files changed, 52 insertions(+), 56 deletions(-) diff --git a/src/views/sys/login/Login.vue b/src/views/sys/login/Login.vue index dd11c68..fc2147e 100644 --- a/src/views/sys/login/Login.vue +++ b/src/views/sys/login/Login.vue @@ -1,20 +1,22 @@ <template> <div :class="prefixCls" class="relative w-full h-full px-4"> - <AppLocalePicker - class="absolute text-white top-4 right-4 enter-x xl:text-gray-600" - :showText="false" - v-if="!sessionTimeout && showLocale" - /> - <AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" /> + <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> --> + <span class="mt-5 -enter-x xl:hidden"> + <LoginLogo :alwaysShowTitle="false" /> + </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"/> + <loginLogo class="-enter-x" /> <div class="my-auto"> <!-- <img :alt="title" @@ -22,9 +24,10 @@ 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('楦块箘浠撳偍绠$悊WMS绯荤粺') }}</span> + <span v-if="!IsMes" class="inline-block mt-4 text-3xl"> {{ t('楦块箘鏅鸿兘鏅洪�燱MS绯荤粺') }}</span> + <span v-if="IsMes" class="inline-block mt-4 text-3xl"> {{ t('楦块箘鏅鸿兘鏅洪�燤ES绯荤粺') }}</span> </div> - <div class="mt-5 font-normal text-white text-md dark:text-gray-500 -enter-x"> + <div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x"> {{ t('鏈潵鍙 鏁板瓧鍖栨櫤閫犲钩鍙�') }} </div> </div> @@ -36,9 +39,9 @@ > <LoginForm /> <ForgetPasswordForm /> - <!-- <RegisterForm /> + <RegisterForm /> <MobileForm /> - <QrCodeForm /> --> + <QrCodeForm /> </div> </div> </div> @@ -46,15 +49,17 @@ </div> </template> <script lang="ts" setup> - import { computed } from 'vue'; - import { AppLogo } from '/@/components/Application'; - import { AppLocalePicker } from '/@/components/Application'; - import LoginForm from './LoginForm.vue'; + import { AppDarkModeToggle, AppLocalePicker, AppLogo, LoginLogo } 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, ref } from 'vue'; import ForgetPasswordForm from './ForgetPasswordForm.vue'; - import { useGlobSetting } from '/@/hooks/setting'; - import { useI18n } from '/@/hooks/web/useI18n'; - import { useDesign } from '/@/hooks/web/useDesign'; - import { useLocaleStore } from '/@/store/modules/locale'; + import LoginForm from './LoginForm.vue'; + import MobileForm from './MobileForm.vue'; + import QrCodeForm from './QrCodeForm.vue'; + import RegisterForm from './RegisterForm.vue'; defineProps({ sessionTimeout: { @@ -68,6 +73,7 @@ const localeStore = useLocaleStore(); const showLocale = localeStore.getShowPicker; const title = computed(() => globSetting?.title ?? ''); + const IsMes = ref(globSetting.systemType == 'MES'); </script> <style lang="less"> @prefix-cls: ~'@{namespace}-login'; @@ -80,7 +86,7 @@ background-color: @dark-bg; &::before { - background-image: url(/@/assets/svg/login-bg-dark.svg); + background-image: url('@/assets/svg/login-bg-dark.svg'); } .ant-input, @@ -88,7 +94,7 @@ background-color: #232a3b; } - .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) { + .ant-btn:not(.ant-btn-link, .ant-btn-primary) { border: 1px solid #4a5569; } @@ -99,12 +105,10 @@ .app-iconify { color: #fff; } - } - input.fix-auto-fill, - .fix-auto-fill input { - -webkit-text-fill-color: #c9d1d9 !important; - box-shadow: inherit !important; + .ant-divider-inner-text { + color: @text-color-secondary; + } } } @@ -112,6 +116,7 @@ min-height: 100%; overflow: hidden; + /* stylelint-disable-next-line media-query-no-invalid */ @media (max-width: @screen-xl) { background-color: #293146; @@ -121,18 +126,18 @@ } &::before { + content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: -48%; - background-image: url(/@/assets/svg/login-bg.svg); - background-position: 100%; + background-image: url('@/assets/svg/login-bg.svg'); background-repeat: no-repeat; + background-position: 100%; background-size: auto 100%; - content: ''; - + /* stylelint-disable-next-line media-query-no-invalid */ @media (max-width: @screen-xl) { display: none; } @@ -140,45 +145,40 @@ .@{logo-prefix-cls} { position: absolute; - // top: 12px; - top:69px; + top: 12px; height: 30px; &__title { - // font-size: 16px; color: #fff; + font-size: 16px; } + img { width: 32px; } } + .container { .@{logo-prefix-cls} { display: flex; - // width: 60%; - width: 20%; + width: 60%; height: 80px; - flex-direction: column; - justify-content: center; - // align-items: flex-start; &__title { - // font-size: 24px; - // color: #fff; - color:red; - text-shadow: 1px 1px 1px #fff; + color: #fff; + font-size: 24px; } img { - width:280px; //48px; + width: 220px; //48px; } } } &-sign-in-way { .anticon { - font-size: 22px; color: #888; + font-size: 22px; cursor: pointer; &:hover { @@ -186,21 +186,22 @@ } } } + 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; } @@ -208,11 +209,6 @@ .@{countdown-prefix-cls} input { min-width: unset; - } - - .ant-divider-inner-text { - font-size: 12px; - color: @text-color-secondary; } } </style> -- Gitblit v1.9.3