简柏林 / thingskit-front · Commits

Commit 34546332819990b5c0b04dcf0731c33eee743316

Authored by fengwotao
1 parent 7ef460f6

pref：优化登录页logo

Inline Side-by-side
Showing 1 changed file with 157 additions and 138 deletions
1 1 <template>
2 2 <div :class="prefixCls" class="relative w-full h-full px-4">
3   - <AppLocalePicker
4   - class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
5   - :showText="false"
6   - v-if="!sessionTimeout && showLocale"
7   - />
  3 + <AppLocalePicker class="absolute text-white top-4 right-4 enter-x xl:text-gray-600" :showText="false"
  4 + v-if="!sessionTimeout && showLocale" />
8 5 <AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" />
9 6
10 7 <span class="-enter-x xl:hidden">
11   - <AppLogo :alwaysShowTitle="true" />
  8 + <!-- <AppLogo :alwaysShowTitle="true" /> -->
12 9 </span>
13 10
14 11 <div class="container relative h-full py-2 mx-auto sm:px-10">
15 12 <div class="flex h-full">
16 13 <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
17   - <AppLogo class="-enter-x" />
  14 + <!-- <AppLogo class="-enter-x" /> -->
  15 + <div style="display:flex;margin-top: 10px;">
  16 + <img v-if="getLogo" :src="getLogo" style="width: 48px;height:48px" />
  17 + <img style="width: 48px;height:48px" v-else src="/src/assets/images/logo.png" />
  18 + <div class="ml-2 truncate md:opacity-100"
  19 + style="line-height: 45px;margin-left: 5px;font-size: 24px;color: #fff;font-weight: 700;">
  20 + {{ getTitle }}
  21 + </div>
  22 + </div>
18 23 <div class="my-auto">
19   - <img
20   - :alt="title"
21   - src="../../../assets/svg/thingskit-login-background.svg"
22   - class="w-1/2 -mt-16 -enter-x"
23   - />
  24 + <img :alt="title" src="../../../assets/svg/thingskit-login-background.svg" class="w-1/2 -mt-16 -enter-x" />
24 25 <div class="mt-10 font-medium text-white -enter-x">
25 26 <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
26 27 </div>
... ... @@ -30,10 +31,8 @@
30 31 </div>
31 32 </div>
32 33 <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
33   - <div
34   - :class="`${prefixCls}-form`"
35   - 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"
36   - >
  34 + <div :class="`${prefixCls}-form`"
  35 + 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">
37 36 <LoginForm />
38 37 <ForgetPasswordForm />
39 38 <RegisterForm />
... ... @@ -45,168 +44,188 @@
45 44 </div>
46 45 </template>
47 46 <script lang="ts" setup>
48   - import { computed } from 'vue';
49   - import { AppLogo } from '/@/components/Application';
50   - import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
51   - import LoginForm from './LoginForm.vue';
52   - import ForgetPasswordForm from './ForgetPasswordForm.vue';
53   - import RegisterForm from './RegisterForm.vue';
54   - import MobileForm from './MobileForm.vue';
55   - import { useGlobSetting } from '/@/hooks/setting';
56   - import { useI18n } from '/@/hooks/web/useI18n';
57   - import { useDesign } from '/@/hooks/web/useDesign';
58   - import { useLocaleStore } from '/@/store/modules/locale';
59   - defineProps({
60   - sessionTimeout: {
61   - type: Boolean,
62   - },
63   - });
64   -
65   - const globSetting = useGlobSetting();
66   - const { prefixCls } = useDesign('login');
67   - const { t } = useI18n();
68   - const localeStore = useLocaleStore();
69   - const showLocale = localeStore.getShowPicker;
70   - const title = computed(() => globSetting?.title ?? '');
  47 +import { computed } from 'vue';
  48 +import { AppLogo } from '/@/components/Application';
  49 +import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
  50 +import LoginForm from './LoginForm.vue';
  51 +import ForgetPasswordForm from './ForgetPasswordForm.vue';
  52 +import RegisterForm from './RegisterForm.vue';
  53 +import MobileForm from './MobileForm.vue';
  54 +import { useGlobSetting } from '/@/hooks/setting';
  55 +import { useI18n } from '/@/hooks/web/useI18n';
  56 +import { useDesign } from '/@/hooks/web/useDesign';
  57 +import { useLocaleStore } from '/@/store/modules/locale';
  58 +import { useUserStore } from '/@/store/modules/user';
  59 +
  60 +defineProps({
  61 + sessionTimeout: {
  62 + type: Boolean,
  63 + },
  64 +});
  65 +
  66 +const userStore = useUserStore();
  67 +
  68 +const getLogo = computed(() => {
  69 + return userStore.platInfo?.logo;
  70 +});
  71 +const { title } = useGlobSetting();
  72 +const getTitle = computed(() => {
  73 + // 设置icon
  74 + let link = (document.querySelector("link[rel*='icon']") ||
  75 + document.createElement('link')) as HTMLLinkElement;
  76 + link.type = 'image/x-icon';
  77 + link.rel = 'shortcut icon';
  78 + link.href = userStore.platInfo?.icon ?? '/favicon.ico';
  79 + document.getElementsByTagName('head')[0].appendChild(link);
  80 + return userStore.platInfo?.name ?? title;
  81 +});
  82 +// const globSetting = useGlobSetting();
  83 +const { prefixCls } = useDesign('login');
  84 +const { t } = useI18n();
  85 +const localeStore = useLocaleStore();
  86 +const showLocale = localeStore.getShowPicker;
  87 +// const title = computed(() => globSetting?.title ?? '');
71 88 </script>
72 89 <style lang="less">
73   - @prefix-cls: ~'@{namespace}-login';
74   - @logo-prefix-cls: ~'@{namespace}-app-logo';
75   - @countdown-prefix-cls: ~'@{namespace}-countdown-input';
76   - @dark-bg: #293146;
  90 +@prefix-cls: ~'@{namespace}-login';
  91 +@logo-prefix-cls: ~'@{namespace}-app-logo';
  92 +@countdown-prefix-cls: ~'@{namespace}-countdown-input';
  93 +@dark-bg: #293146;
77 94
78   - html[data-theme='dark'] {
79   - .@{prefix-cls} {
80   - background-color: @dark-bg;
  95 +html[data-theme='dark'] {
  96 + .@{prefix-cls} {
  97 + background-color: @dark-bg;
81 98
82   - &::before {
83   - background-image: url(/@/assets/svg/login-bg-dark.svg);
84   - }
  99 + &::before {
  100 + background-image: url(/@/assets/svg/login-bg-dark.svg);
  101 + }
85 102
86   - .ant-input,
87   - .ant-input-password {
88   - background-color: #232a3b;
89   - }
  103 + .ant-input,
  104 + .ant-input-password {
  105 + background-color: #232a3b;
  106 + }
90 107
91   - .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
92   - border: 1px solid #4a5569;
93   - }
  108 + .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
  109 + border: 1px solid #4a5569;
  110 + }
94 111
95   - &-form {
96   - background: transparent !important;
97   - }
  112 + &-form {
  113 + background: transparent !important;
  114 + }
98 115
99   - .app-iconify {
100   - color: #fff;
101   - }
  116 + .app-iconify {
  117 + color: #fff;
102 118 }
  119 + }
  120 +
  121 + input.fix-auto-fill,
  122 + .fix-auto-fill input {
  123 + -webkit-text-fill-color: #c9d1d9 !important;
  124 + box-shadow: inherit !important;
  125 + }
  126 +}
  127 +
  128 +.@{prefix-cls} {
  129 + min-height: 100%;
  130 + overflow: hidden;
103 131
104   - input.fix-auto-fill,
105   - .fix-auto-fill input {
106   - -webkit-text-fill-color: #c9d1d9 !important;
107   - box-shadow: inherit !important;
  132 + @media (max-width: @screen-xl) {
  133 + background-color: #293146;
  134 +
  135 + .@{prefix-cls}-form {
  136 + background-color: #fff;
108 137 }
109 138 }
110 139
111   - .@{prefix-cls} {
112   - min-height: 100%;
113   - overflow: hidden;
  140 + &::before {
  141 + position: absolute;
  142 + top: 0;
  143 + left: 0;
  144 + width: 100%;
  145 + height: 100%;
  146 + margin-left: -48%;
  147 + background-image: url(/@/assets/svg/login-bg.svg);
  148 + background-position: 100%;
  149 + background-repeat: no-repeat;
  150 + background-size: auto 100%;
  151 + content: '';
  152 +
114 153 @media (max-width: @screen-xl) {
115   - background-color: #293146;
  154 + display: none;
  155 + }
  156 + }
116 157
117   - .@{prefix-cls}-form {
118   - background-color: #fff;
119   - }
  158 + .@{logo-prefix-cls} {
  159 + position: absolute;
  160 + top: 12px;
  161 + height: 30px;
  162 +
  163 + &__title {
  164 + font-size: 16px;
  165 + color: #fff;
120 166 }
121 167
122   - &::before {
123   - position: absolute;
124   - top: 0;
125   - left: 0;
126   - width: 100%;
127   - height: 100%;
128   - margin-left: -48%;
129   - background-image: url(/@/assets/svg/login-bg.svg);
130   - background-position: 100%;
131   - background-repeat: no-repeat;
132   - background-size: auto 100%;
133   - content: '';
134   - @media (max-width: @screen-xl) {
135   - display: none;
136   - }
  168 + img {
  169 + width: 32px;
137 170 }
  171 + }
138 172
  173 + .container {
139 174 .@{logo-prefix-cls} {
140   - position: absolute;
141   - top: 12px;
142   - height: 30px;
  175 + display: flex;
  176 + width: 60%;
  177 + height: 80px;
143 178
144 179 &__title {
145   - font-size: 16px;
  180 + font-size: 24px;
146 181 color: #fff;
147 182 }
148 183
149 184 img {
150   - width: 32px;
  185 + width: 48px;
151 186 }
152 187 }
  188 + }
153 189
154   - .container {
155   - .@{logo-prefix-cls} {
156   - display: flex;
157   - width: 60%;
158   - height: 80px;
159   -
160   - &__title {
161   - font-size: 24px;
162   - color: #fff;
163   - }
  190 + &-sign-in-way {
  191 + .anticon {
  192 + font-size: 22px;
  193 + color: #888;
  194 + cursor: pointer;
164 195
165   - img {
166   - width: 48px;
167   - }
  196 + &:hover {
  197 + color: @primary-color;
168 198 }
169 199 }
  200 + }
170 201
171   - &-sign-in-way {
172   - .anticon {
173   - font-size: 22px;
174   - color: #888;
175   - cursor: pointer;
  202 + input:not([type='checkbox']) {
  203 + min-width: 360px;
176 204
177   - &:hover {
178   - color: @primary-color;
179   - }
180   - }
  205 + @media (max-width: @screen-xl) {
  206 + min-width: 320px;
181 207 }
182 208
183   - input:not([type='checkbox']) {
184   - min-width: 360px;
185   -
186   - @media (max-width: @screen-xl) {
187   - min-width: 320px;
188   - }
189   -
190   - @media (max-width: @screen-lg) {
191   - min-width: 260px;
192   - }
193   -
194   - @media (max-width: @screen-md) {
195   - min-width: 240px;
196   - }
197   -
198   - @media (max-width: @screen-sm) {
199   - min-width: 160px;
200   - }
  209 + @media (max-width: @screen-lg) {
  210 + min-width: 260px;
201 211 }
202 212
203   - .@{countdown-prefix-cls} input {
204   - min-width: unset;
  213 + @media (max-width: @screen-md) {
  214 + min-width: 240px;
205 215 }
206 216
207   - .ant-divider-inner-text {
208   - font-size: 12px;
209   - color: @text-color-secondary;
  217 + @media (max-width: @screen-sm) {
  218 + min-width: 160px;
210 219 }
211 220 }
  221 +
  222 + .@{countdown-prefix-cls} input {
  223 + min-width: unset;
  224 + }
  225 +
  226 + .ant-divider-inner-text {
  227 + font-size: 12px;
  228 + color: @text-color-secondary;
  229 + }
  230 +}
212 231 </style>
... ...