登录页样式调整

src/components/login/login.less

-.app-login {
-    ion-header, ion-content {
-        --background: transparent;
-        ion-toolbar {
-            --background: transparent;  
-        }
-    }
-    background-image: url('../../../public/assets/images/login_background.jpg');
-    &-contant {
+.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;
-        height: 100%;
-    }
-    &-form {
-        height: 200px;
-        width: 100%;
-        ion-list, .button {
-            width: 100%;
-        }
-    }
+}
+.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

src/components/login/login.vue

 <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 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>
-                            <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 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>
-                    </ion-list>
                     <div class="ion-padding button">
                         <ion-button expand="block" :disabled="isLoadding" class="ion-no-margin" @click="login">{{$t('submit')}}</ion-button>
                     </div>