修改登陆页面样式

src/components/Login.vue

@@ -1,27 +1,29 @@
 <template>
   <div class="login-wrap">
     <h1>{{ msg }}</h1>
-    <h2>请先登陆您的身份</h2>
-    <div class="form-wrap">
-      <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition">
-        <el-form-item label="角色" prop="radio">
-          <el-radio-group v-model="form.radio" v-on:change="judegAccount">
-            <el-radio label="0" border>管理员</el-radio>
-            <el-radio label="1" border>商家</el-radio>
-            <el-radio label="2" border>买家</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="用户名" prop="name">
-          <el-input v-model="form.name" v-on:blur="judegAccount" clearable></el-input>
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="form.password" type="password" clearable></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" v-on:click="submitForm">登陆</el-button>
-          <el-button v-on:click="resetForm('form')">重置</el-button>
-        </el-form-item>
-      </el-form>
+    <div class="login-content">
+      <h2>请先登陆您的身份</h2>
+      <div class="form-wrap">
+        <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition">
+          <el-form-item label="角色" prop="radio">
+            <el-radio-group v-model="form.radio" v-on:change="judegAccount">
+              <el-radio label="0" border>管理员</el-radio>
+              <el-radio label="1" border>商家</el-radio>
+              <el-radio label="2" border>买家</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="用户名" prop="name">
+            <el-input v-model="form.name" v-on:blur="judegAccount" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="form.password" type="password" clearable></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" v-on:click="submitForm">登陆</el-button>
+            <el-button v-on:click="resetForm('form')">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
   </div>
 </template>
@@ -105,7 +107,15 @@ export default {
 .login-wrap{
   width: 100%;
   height: 100%;
+  padding-top: 40px;
+  background-color: #3eb983;
+}
+.login-content{
+  width: 366px;
+  height: auto;
+  margin: 0 auto; 
   background-color: #fff;
+  border: 20px solid #bcf2db;
 }
 h1, h2 {
   font-weight: normal;
@@ -113,11 +123,13 @@ h1, h2 {
 }
 h1{
   font-size: 30px;
-  margin: 40px auto 20px;
+  margin: 0 auto 20px;
+  color: #fff;
 }
 h2{
   font-size: 22px;
-  margin-bottom: 20px;
+  line-height: 70px;
+  border-bottom: 1px solid #bcf2db;
 }
 ul {
   list-style-type: none;
@@ -136,3 +148,32 @@ a {
   text-align: left;
 }
 </style>
+
+<style>
+  .login-wrap .el-radio.is-bordered.is-checked{
+    border-color: #3eb983;
+  }
+  .login-wrap .el-radio__input.is-checked .el-radio__inner{
+    border-color: #3eb983;
+    background-color: #3eb983;
+  }
+  .login-wrap .el-radio__input .el-radio__inner:hover{
+    border-color: #3eb983;
+  }
+  .login-wrap .el-radio__input.is-checked+.el-radio__label{
+    color: #3eb983;
+  }
+  .login-wrap .el-button--primary{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+  .login-wrap .el-button--primary:hover{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+  .login-wrap .el-button--default:hover{
+    border-color: #3eb983;
+    background-color: #bcf2db;
+    color: #fff;
+  }
+</style>