|
|
@@ -3,10 +3,6 @@
|
|
|
{{template "head" .}}
|
|
|
<style>
|
|
|
|
|
|
- #app {
|
|
|
- padding-top: 100px;
|
|
|
- }
|
|
|
-
|
|
|
h1 {
|
|
|
text-align: center;
|
|
|
color: #fff;
|
|
|
@@ -44,23 +40,88 @@
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
+ #app {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ #login {
|
|
|
+ animation: charge .5s both;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 2rem;
|
|
|
+ padding: 3rem;
|
|
|
+ }
|
|
|
+ #login:hover {
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,.09);
|
|
|
+ }
|
|
|
+ @keyframes charge {
|
|
|
+ from {transform: translateY(5rem);opacity: 0}
|
|
|
+ to {transform: translateY(0);opacity: 1}
|
|
|
+ }
|
|
|
+ @keyframes wave {
|
|
|
+ from {transform: rotate(0deg);}
|
|
|
+ to {transform: rotate(360deg);}
|
|
|
+ }
|
|
|
+ .wave {
|
|
|
+ opacity: .6;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 40%;
|
|
|
+ left: 50%;
|
|
|
+ width: 6000px;
|
|
|
+ height: 6000px;
|
|
|
+ background: #000;
|
|
|
+ margin-left: -3000px;
|
|
|
+ transform-origin: 50% 48%;
|
|
|
+ border-radius: 46%;
|
|
|
+ animation: wave 72s infinite linear;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ .wave2 {
|
|
|
+ animation: wave 88s infinite linear;
|
|
|
+ opacity: .3;
|
|
|
+ }
|
|
|
+ .wave3 {
|
|
|
+ animation: wave 80s infinite linear;
|
|
|
+ opacity: .1;
|
|
|
+ }
|
|
|
+ .wave {
|
|
|
+ background: #0a755715;
|
|
|
+ }
|
|
|
+ .under {
|
|
|
+ background-color: #dbf5ed;
|
|
|
+ }
|
|
|
+ .dark .wave {
|
|
|
+ background: rgb(10 117 87 / 20%);
|
|
|
+ }
|
|
|
+ .dark .under {
|
|
|
+ background-color: #051510;
|
|
|
+ }
|
|
|
+ .dark #login {
|
|
|
+ background-color: rgb(8, 22, 20);
|
|
|
+ }
|
|
|
+ .dark h1 {
|
|
|
+ color: rgb(255 255 255 / 85%);
|
|
|
+ }
|
|
|
</style>
|
|
|
<body>
|
|
|
-<a-layout id="app" v-cloak class="login" :class="themeSwitcher.darkCardClass">
|
|
|
+<a-layout id="app" v-cloak class="login" :class="themeSwitcher.currentTheme">
|
|
|
<transition name="list" appear>
|
|
|
- <a-layout-content>
|
|
|
- <a-row type="flex" justify="center">
|
|
|
- <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
|
|
|
+ <a-layout-content class="under">
|
|
|
+ <div class='wave'></div>
|
|
|
+ <div class='wave wave2'></div>
|
|
|
+ <div class='wave wave3'></div>
|
|
|
+ <a-row type="flex" justify="center" align="middle" style="height: 100%;">
|
|
|
+ <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="6" id="login">
|
|
|
+ <a-row type="flex" justify="center">
|
|
|
+ <a-col>
|
|
|
<h1 class="title">{{ i18n "pages.login.title" }}</h1>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row type="flex" justify="center">
|
|
|
- <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
|
|
|
+ <a-col span="24">
|
|
|
<a-form>
|
|
|
<a-form-item>
|
|
|
<a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
|
|
|
@keydown.enter.native="login" autofocus>
|
|
|
- <a-icon slot="prefix" type="user" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
|
|
|
+ <a-icon slot="prefix" type="user" style="font-size: 16px;" />
|
|
|
</a-input>
|
|
|
</a-form-item>
|
|
|
<a-form-item>
|
|
|
@@ -84,8 +145,8 @@
|
|
|
</a-form-item>
|
|
|
<a-form-item>
|
|
|
<a-row justify="center" class="centered">
|
|
|
- <a-col :span="12">
|
|
|
- <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
|
|
|
<a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
|
|
|
<span role="img" :aria-label="l.name" v-text="l.icon"></span>
|
|
|
<span v-text="l.name"></span>
|
|
|
@@ -96,12 +157,19 @@
|
|
|
</a-form-item>
|
|
|
<a-form-item>
|
|
|
<a-row justify="center" class="centered">
|
|
|
- <theme-switch />
|
|
|
+ <a-col>
|
|
|
+ <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
|
|
|
+ </a-col>
|
|
|
+ <a-col>
|
|
|
+ <theme-switch />
|
|
|
+ </a-col>
|
|
|
</a-row>
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
</a-layout-content>
|
|
|
</transition>
|
|
|
</a-layout>
|
|
|
@@ -121,7 +189,6 @@
|
|
|
lang: ""
|
|
|
},
|
|
|
async created() {
|
|
|
- this.updateBackground();
|
|
|
this.lang = getLang();
|
|
|
this.secretEnable = await this.getSecretStatus();
|
|
|
},
|
|
|
@@ -143,18 +210,6 @@
|
|
|
return msg.obj;
|
|
|
}
|
|
|
},
|
|
|
- updateBackground() {
|
|
|
- const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
|
|
|
- const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
|
|
|
- const deg = RandomUtil.randomIntRange(0, 360);
|
|
|
- const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
|
|
|
- document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : background;
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- 'themeSwitcher.isDarkTheme'(newVal, oldVal) {
|
|
|
- this.updateBackground();
|
|
|
- },
|
|
|
},
|
|
|
});
|
|
|
|
Alireza Ahmadi