style: Optimize the login interface style
This commit is contained in:
jmal
parent
668113308d
commit
9787514632
@ -5,100 +5,93 @@
|
|||||||
<div id='stars2'></div>
|
<div id='stars2'></div>
|
||||||
<div id='stars3'></div>
|
<div id='stars3'></div>
|
||||||
|
|
||||||
<el-card class="box-card">
|
<div class="login-content">
|
||||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
<el-card class="box-card">
|
||||||
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
||||||
|
|
||||||
<div class="title-container">
|
<div class="title-container">
|
||||||
<h3 v-if="!initialize">
|
<h3 v-if="!initialize">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Logo v-model="webstieRecord.netdiskLogo" width="65"></Logo>
|
<Logo v-model="webstieRecord.netdiskLogo" width="65"></Logo>
|
||||||
<div class="jmal-cloud-name">
|
<div class="jmal-cloud-name">
|
||||||
<div>{{ webstieRecord.netdiskName ? webstieRecord.netdiskName : 'JmalCloud' }}</div>
|
<div>{{ webstieRecord.netdiskName ? webstieRecord.netdiskName : 'JmalCloud' }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</h3>
|
||||||
</h3>
|
<h3 v-if="initialize" class="title">创建管理员</h3>
|
||||||
<h3 v-if="initialize" class="title">创建管理员</h3>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<span class="svg-container">
|
<span class="svg-container">
|
||||||
<svg-icon icon-class="user" />
|
<svg-icon icon-class="user" />
|
||||||
</span>
|
</span>
|
||||||
<el-input
|
<el-input
|
||||||
ref="username"
|
ref="username"
|
||||||
v-model="loginForm.username"
|
v-model="loginForm.username"
|
||||||
placeholder="用户名"
|
placeholder="用户名"
|
||||||
name="username"
|
name="username"
|
||||||
type="text"
|
type="text"
|
||||||
tabindex="1"
|
tabindex="1"
|
||||||
auto-complete="on"
|
auto-complete="on"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item prop="password">
|
<el-form-item prop="password">
|
||||||
<span class="svg-container">
|
<span class="svg-container">
|
||||||
<svg-icon icon-class="password" />
|
<svg-icon icon-class="password" />
|
||||||
</span>
|
</span>
|
||||||
<el-input
|
<el-input
|
||||||
:key="passwordType"
|
:key="passwordType"
|
||||||
ref="password"
|
ref="password"
|
||||||
v-model="loginForm.password"
|
v-model="loginForm.password"
|
||||||
:type="passwordType"
|
:type="passwordType"
|
||||||
placeholder="密码"
|
placeholder="密码"
|
||||||
name="password"
|
name="password"
|
||||||
tabindex="2"
|
tabindex="2"
|
||||||
auto-complete="on"
|
auto-complete="on"
|
||||||
@keyup.enter.native="handleLogin"
|
@keyup.enter.native="handleLogin"
|
||||||
/>
|
/>
|
||||||
<span class="show-pwd" @click="showPwd">
|
<span class="show-pwd" @click="showPwd">
|
||||||
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
||||||
</span>
|
</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item v-if="!initialize" class="remember">
|
<el-form-item v-if="!initialize" class="remember">
|
||||||
<!--<el-switch v-model="loginForm.rememberMe"></el-switch>-->
|
<!--<el-switch v-model="loginForm.rememberMe"></el-switch>-->
|
||||||
<el-checkbox label="记住我" v-model="loginForm.rememberMe"></el-checkbox>
|
<el-checkbox label="记住我" v-model="loginForm.rememberMe"></el-checkbox>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item v-if="initialize" prop="confirmPassword">
|
<el-form-item v-if="initialize" prop="confirmPassword">
|
||||||
<span class="svg-container">
|
<span class="svg-container">
|
||||||
<svg-icon icon-class="password" />
|
<svg-icon icon-class="password" />
|
||||||
</span>
|
</span>
|
||||||
<el-input
|
<el-input
|
||||||
:key="passwordType"
|
:key="passwordType"
|
||||||
ref="password"
|
ref="password"
|
||||||
v-model="loginForm.confirmPassword"
|
v-model="loginForm.confirmPassword"
|
||||||
:type="passwordType"
|
:type="passwordType"
|
||||||
placeholder="确认密码"
|
placeholder="确认密码"
|
||||||
name="password"
|
name="password"
|
||||||
tabindex="2"
|
tabindex="2"
|
||||||
auto-complete="on"
|
auto-complete="on"
|
||||||
@keyup.enter.native="handleLogin"
|
@keyup.enter.native="handleLogin"
|
||||||
/>
|
/>
|
||||||
<span class="show-pwd" @click="showPwd">
|
<span class="show-pwd" @click="showPwd">
|
||||||
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
||||||
</span>
|
</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-button :loading="loading" type="primary" style="width:100%;margin: 30px 0;" @click.native.prevent="handleLogin">{{initialize?'创建':'登录'}}</el-button>
|
||||||
<el-button :loading="loading" type="primary" style="width:100%;margin: 30px 0;" @click.native.prevent="handleLogin">{{initialize?'创建':'登录'}}</el-button>
|
</el-form>
|
||||||
|
</el-card>
|
||||||
<!--<div class="tips">-->
|
</div>
|
||||||
<!--<span style="margin-right:20px;">username: admin</span>-->
|
<footer id="footer" class="clearfix" style="font-size: 0.725rem;">
|
||||||
<!--<span> password: any</span>-->
|
|
||||||
<!--</div>-->
|
|
||||||
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
<footer id="footer" class="clearfix">
|
|
||||||
<br><br><br>
|
|
||||||
<div class="copyright">
|
<div class="copyright">
|
||||||
<p><span>{{ webstieRecord.copyright }}</span></p>
|
<div>{{ webstieRecord.copyright }}</div>
|
||||||
<p>
|
<span>
|
||||||
<a target="_blank" href="https://beian.miit.gov.cn" >{{ webstieRecord.recordPermissionNum }}</a>
|
<a target="_blank" href="https://beian.miit.gov.cn" >{{ webstieRecord.recordPermissionNum }}</a>
|
||||||
<a target="_blank" :href="'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode='+webstieRecord.networkRecordNumber" ><img v-if="webstieRecord.networkRecordNumberStr" src="~@/assets/img/beian.png"/>{{ webstieRecord.networkRecordNumberStr }}</a>
|
<a target="_blank" :href="'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode='+webstieRecord.networkRecordNumber" ><img v-if="webstieRecord.networkRecordNumberStr" src="~@/assets/img/beian.png"/>{{ webstieRecord.networkRecordNumberStr }}</a>
|
||||||
</p>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -285,6 +278,7 @@ $cursor: #409eff;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-container {
|
.login-container {
|
||||||
|
|
||||||
.el-input {
|
.el-input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 47px;
|
height: 47px;
|
||||||
@ -332,12 +326,15 @@ $light_gray:#eee;
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: linear-gradient(#002766,30%, #0040f4);
|
background: linear-gradient(#002766,30%, #0040f4);
|
||||||
|
|
||||||
|
.login-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
.box-card {
|
.box-card {
|
||||||
text-align: center;
|
|
||||||
max-width: 316px;
|
max-width: 316px;
|
||||||
margin-top: 128px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user