[新增]登录注册样式

src/layouts/LoginLayout.vue

@@ -1,22 +1,23 @@
 <template>
   <section class="main-body">
     <section class="main-body-section">
-      <div class="logo">MOOC</div>
+      <div class="logo">欢迎使用 MOOC</div>
       <div class="login_container">
         <div class="container__main"><router-view /></div>
       </div>
     </section>
-    <footer class="footer is-transparent" style="background: #f4f7fb">
-      <div class="content has-text-centered">@nju software</div>
-    </footer>
+    <!--<footer class="footer is-transparent" style="background: #f4f7fb">-->
+    <!--<div class="content has-text-centered">@nju software</div>-->
+    <!--</footer>-->
   </section>
 </template>
 
 <style lang="scss" scoped>
 .logo {
   text-align: center;
-  padding: 10vh 0 0;
-  font-size: 40px;
+  padding: 15vh 0 0;
+  font-size: 34px;
+  font-weight: bold;
   /*<!--color: $logo-color;-->*/
   /*<!--font-size: $logo-font-size;-->*/
   /*<!--font-family: $logo-font-family;-->*/
@@ -38,11 +39,15 @@
 }
 .main-body {
   min-height: 100vh;
+  min-width: 100vw;
   display: flex;
-  flex-direction: column;
-  background: #f4f7fb;
+  flex-direction: row-reverse;
+  /*background: #f4f7fb;*/
+  background-image: url("../assets/login_background.png");
+  background-size: cover;
   .main-body-section {
-    flex: 1;
+    width: 55%;
+    background-color: #ffffff;
   }
 }
 </style>

src/views/login/Login.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="intro">Sign in</div>
+    <div class="intro">登录</div>
     <b-notification type="is-danger" :active.sync="isServerError">
       {{ errorMassage }}
     </b-notification>
@@ -29,25 +29,26 @@
       >
       </b-input>
     </b-field>
-    <b-field>
-      <p class="control level" style="padding-top: 20px">
-        <button
-          style="width:40%"
-          :class="{ 'is-loading': submitting }"
-          class="button is-link"
-          @click="loginAction"
-        >
-          登 陆
-        </button>
-        <router-link
-          :to="{ name: 'REGISTER' }"
-          :class="{ 'is-text': true }"
-          class="button"
-          type="submit"
-          >没有账户，注册
-        </router-link>
-      </p>
-    </b-field>
+    <!--<p class="control level" style="padding-top: 20px">-->
+    <div style="padding-top: 40px;">
+      <button
+        :class="{ 'is-loading': submitting }"
+        class="login"
+        @click="loginAction"
+      >
+        登 陆
+      </button>
+    </div>
+    <div>
+      <router-link
+        :to="{ name: 'REGISTER' }"
+        :class="{ 'is-text': true }"
+        class="register"
+        type="submit"
+        >没有账户，注册
+      </router-link>
+    </div>
+    <!--</p>-->
   </div>
 </template>
 
@@ -109,7 +110,7 @@ export default {
 .intro {
   text-align: center;
   font-size: 25px;
-  padding: 10px 0 30px;
+  padding: 20px 0 10px;
 }
 .link {
   text-decoration: none;
@@ -118,4 +119,25 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+.register {
+  color: #7396fd;
+  margin-top: 20px;
+  padding: 10px 0px 10px 0px;
+  font-size: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  border: 1px solid #82b1ed;
+}
+.login {
+  color: #ffffff;
+  padding: 10px 0px 10px 0px;
+  display: flex;
+  justify-content: center;
+  font-size: 1rem;
+  width: 100%;
+  background: linear-gradient(to right, #82b1ed, #b073fd);
+  border-radius: 4px;
+  border: 0px;
+}
 </style>

src/views/login/Register.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="intro">Sign up</div>
+    <div class="intro">注册</div>
     <b-notification type="is-danger" :active.sync="isServerError">
       {{ errorMassage }}
     </b-notification>
@@ -67,25 +67,23 @@
       >
       </b-input>
     </b-field>
-    <b-field>
-      <p class="control level" style="padding-top: 20px">
-        <button
-          style="width:40%"
-          :class="{ 'is-loading': submitting }"
-          class="button is-link"
-          @click="registerAction"
-        >
-          注 册
-        </button>
-        <router-link
-          :to="{ name: 'LOGIN' }"
-          :class="{ 'is-text': true }"
-          class="button"
-          type="submit"
-          >已有账户，登陆
-        </router-link>
-      </p>
-    </b-field>
+    <div style="padding-top: 20px;">
+      <button
+        :class="{ 'is-loading': submitting }"
+        class="register"
+        @click="registerAction"
+      >
+        注 册
+      </button>
+    </div>
+
+    <router-link
+      :to="{ name: 'LOGIN' }"
+      :class="{ 'is-text': true }"
+      class="login"
+      type="submit"
+      >已有账户，登陆
+    </router-link>
   </div>
 </template>
 
@@ -163,7 +161,7 @@ export default {
 .intro {
   text-align: center;
   font-size: 25px;
-  padding: 10px 0 30px;
+  padding: 20px 0 10px;
 }
 .link {
   text-decoration: none;
@@ -172,4 +170,25 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+.register {
+  color: #ffffff;
+  padding: 10px 0px 10px 0px;
+  display: flex;
+  justify-content: center;
+  font-size: 1rem;
+  width: 100%;
+  background: linear-gradient(to right, #82b1ed, #b073fd);
+  border-radius: 4px;
+  border: 0px;
+}
+.login {
+  color: #7396fd;
+  margin-top: 20px;
+  padding: 10px 0px 10px 0px;
+  font-size: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  border: 1px solid #82b1ed;
+}
 </style>