简柏林 / thingskit-front · Commits

Commit 4eca225b0b323fd13c9905c4e6c4d7e6cd67745f

Authored by fengwotao
1 parent 43814bd3

fix：修改平台背景图

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