提交 76969c95 编写于 作者: Neuromancer255's avatar Neuromancer255

登录页样式调整

上级 8087ed0f
.app-login {
ion-header, ion-content {
--background: transparent;
ion-toolbar {
--background: transparent;
}
}
background-image: url('../../../public/assets/images/login_background.jpg');
&-contant {
display: flex;
align-items: center;
height: 100%;
}
&-form {
height: 200px;
width: 100%;
ion-list, .button {
width: 100%;
}
}
.app-login-contant{
width: 100%;
height: 100%;
background: linear-gradient(45deg, #8e9eab, #eef2f3);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.ibizLogo{
margin-top: 20vh;
width: 86px;
height: 40px;
}
.app-login-form{
width: 90vw;
height: 40vh;
border-radius: 10px;
background-color: white;
margin-top: 40px;
display: flex;
flex-direction: column;
justify-content: space-around;
box-shadow: -5px 5px 10px #8e9eab;
}
.ion-no-margin{
margin: auto;
--background: linear-gradient(to left, #7BC6CC, #BE93C5) !important;
--background-activated:linear-gradient(to left, #5FC3E4, #E55D87) !important;
--background-activated-opacity:0.8;
--transition: --background 2s;
font-size: 1.2rem;
--border-radius: 20px;
margin-top: 20px;
height: 38px;
width: 92%;
}
ion-input{
--background:#f1f1f1 !important;
border-radius: 20px;
width: 90% !important;
height: 44.8px !important;
margin:auto;
margin-top: 1vh;
--padding-start:20px !important;
}
ion-label{
margin-left: 5vw;
font-size: 1rem !important;
}
\ No newline at end of file
<template>
<ion-page :className="{ 'app-login': true }">
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<img src="assets/images/logo.png" />
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<div class="app-login-contant">
<img src="assets/images/logo.png" class="ibizLogo"/>
<form class="app-login-form">
<ion-list lines="full" class=" ion-no-padding">
<ion-item>
<ion-label position="floating">{{$t('username')}}<ion-text color="danger">*</ion-text></ion-label>
<ion-input required type="text" debounce="100" :value="username" @ionChange="($event) => username = $event.detail.value"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">{{$t('password')}}<ion-text color="danger">*</ion-text></ion-label>
<ion-input required type="password" debounce="100" :value="password" @ionChange="($event) => password = $event.detail.value"></ion-input>
</ion-item>
</ion-list>
<ion-item lines="none">
<ion-label position="stacked">{{$t('username')}}</ion-label>
<ion-input clear-input required type="text" debounce="100" :value="username" @ionChange="($event) => username = $event.detail.value"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="stacked">{{$t('password')}}</ion-label>
<ion-input clear-input required type="password" debounce="100" :value="password" @ionChange="($event) => password = $event.detail.value"></ion-input>
</ion-item>
<div class="ion-padding button">
<ion-button expand="block" :disabled="isLoadding" class="ion-no-margin" @click="login">{{$t('submit')}}</ion-button>
</div>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册