简柏林 / 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 <template> 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 <AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" /> 12 <AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" />
6 13
7 <span class="-enter-x xl:hidden"> 14 <span class="-enter-x xl:hidden">
@@ -12,16 +19,28 @@ @@ -12,16 +19,28 @@
12 <div class="flex h-full"> 19 <div class="flex h-full">
13 <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12"> 20 <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
14 <!-- <AppLogo class="-enter-x" /> --> 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 {{ getTitle }} 35 {{ getTitle }}
21 </div> 36 </div>
22 </div> 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 <div class="mt-10 font-medium text-white -enter-x"> 44 <div class="mt-10 font-medium text-white -enter-x">
26 <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span> 45 <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
27 </div> 46 </div>
@@ -31,8 +50,10 @@ @@ -31,8 +50,10 @@
31 </div> 50 </div>
32 </div> 51 </div>
33 <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12"> 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 <LoginForm /> 57 <LoginForm />
37 <ForgetPasswordForm /> 58 <ForgetPasswordForm />
38 <RegisterForm /> 59 <RegisterForm />
@@ -44,188 +65,198 @@ @@ -44,188 +65,198 @@
44 </div> 65 </div>
45 </template> 66 </template>
46 <script lang="ts" setup> 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 </script> 118 </script>
89 <style lang="less"> 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 @media (max-width: @screen-xl) { 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 .@{logo-prefix-cls} { 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 &__title { 194 &__title {
180 - font-size: 24px; 195 + font-size: 16px;
181 color: #fff; 196 color: #fff;
182 } 197 }
183 198
184 img { 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 </style> 262 </style>