vue项目：搭建登录页面

14_Vue项目/day-2/vue2-shop/src/App.vue

@@ -1,14 +1,6 @@
 <template>
   <div id="app">
-    <div>
-      <p>
-        If Element is successfully added to this project, you'll see an
-        <code v-text="'<el-button>'"></code>
-        below
-      </p>
-      <el-button type="warning">el-button</el-button>
-      <router-view />
-    </div>
+    <router-view />
   </div>
 </template>
 
@@ -19,12 +11,15 @@ export default {
 </script>
 
 <style>
+body,
+html,
+h3 {
+  margin: 0;
+  padding: 0;
+}
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

14_Vue项目/day-2/vue2-shop/src/views/Login.vue

@@ -1,5 +1,92 @@
 <template>
-  <div>
-    <h3>登录</h3>
+  <div class="login">
+    <transition name="fade-down" appear>
+      <div class="login-body">
+        <div class="body-top">后台管理系统</div>
+        <div class="body-main">
+          <el-form ref="ruleForm" label-width="80px" class="demo-ruleForm">
+            <el-form-item label="账号" prop="name">
+              <el-input
+                prefix-icon="el-icon-user"
+                placeholder="请输入账号..."
+                size="mini"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="region">
+              <el-input
+                prefix-icon="el-icon-key"
+                type="password"
+                show-password
+                placeholder="请输入密码..."
+                size="mini"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item :style="{ textAlign: 'right' }">
+              <el-button type="primary" round size="mini">登录</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
+
+<script>
+export default {
+  name: 'Login',
+};
+</script>
+<style lang="css" scoped>
+.login {
+  background-image: url('../assets/bg.jpg');
+  background-repeat: no-repeat;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.login .login-body {
+  width: 400px;
+  height: 300px;
+  box-sizing: border-box;
+
+  background-color: #ccc;
+  border-radius: 10px;
+  padding-top: 20px;
+  padding-right: 56px;
+}
+
+.login .login-body .body-top {
+  color: #333;
+  font-size: 24px;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.fade-down-enter-active {
+  animation: fade-down 1s;
+}
+
+@keyframes fade-down {
+  0% {
+    transform: translateY(-100px);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}
+</style>