初始化

package.json

@@ -9,7 +9,11 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "element-ui": "^2.15.14",
+    "less": "^4.2.0",
+    "less-loader": "^7.3.0",
+    "vue": "^2.6.14",
+    "vue-router": "^3.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,18 +1,19 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <!-- <Login/> -->
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+// import Login from './components/Login.vue'
 
 export default {
   name: 'App',
-  components: {
-    HelloWorld
-  }
+  // components: {
+  //   Login
+  // }
 }
 </script>
 

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main.js

@@ -1,8 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 
+Vue.use(ElementUI)
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

src/views/Login.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="login">
+    <div class="tab">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="账号登陆" name="first">
+          <div class="input-div">
+            <img src="./img/phone.png" alt="" class="phone-img">
+            <el-input class="phone" v-model="input" placeholder="请输入手机号/邮箱"></el-input>
+          </div>
+          <div class="input-div">
+            <img src="./img/password.png" alt="" class="password-img">
+            <el-input v-model="password" class="password" placeholder="请输入登陆密码"></el-input>
+          </div>
+          <el-checkbox v-model="checked">记住密码</el-checkbox>
+        </el-tab-pane>
+        <el-tab-pane label="人脸识别" name="second">
+          <div class="code">
+            人脸扫描
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <div v-if="activeName === 'first'">
+        <el-button type="primary">登陆</el-button>
+        <el-button>取消</el-button>
+      </div>
+      <a href="" class="left">下载浏览器</a>
+      <a href="" class="right">立即注册</a>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      activeName: 'first',
+      input: '',
+      password: '',
+      checked: false
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.login {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: url("./img/login.png") no-repeat;
+  background-size: cover;
+}
+
+/deep/ .el-tabs__item {
+  font-size: 30px !important;
+  padding-bottom: 10px;
+  height: 50px;
+}
+
+.tab {
+  width: 500px;
+  height: 603px;
+  position: absolute;
+  top: 284px;
+  left: 12%;
+
+  .phone {
+    display: inline;
+    margin-bottom: 30px;
+  }
+
+  .phone-img {
+    position: absolute;
+    width: 22px;
+    height: 28px;
+    top: 69px;
+  }
+
+  .password-img {
+    width: 21px;
+    height: 21px;
+    position: absolute;
+    top: 191px;
+  }
+
+
+}
+
+.input-div {
+}
+
+.code {
+  width: 100px;
+  height: 100px;
+  background-color: #fff;
+}
+
+.left, .right {
+  position: absolute;
+  color: #fff;
+  bottom: 15px;
+  font-size: 20px;
+}
+
+.left {
+  left: -10px;
+}
+
+.right {
+  right: -10px;
+}
+
+
+/deep/ .el-input__inner {
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  border-bottom: 3px solid #fff;
+  border-radius: 0;
+  height: 48px;
+  padding-bottom: 28px;
+  margin-top: 72px;
+  padding-left: 70px !important;
+  font-size: 19px;
+  font-weight: 1000;
+  color: #fff;
+  padding-left: 22px;
+}
+
+/deep/ .el-tabs__content {
+  text-align: left;
+}
+
+/deep/ .el-checkbox {
+  margin-top: 33px;
+  font-size: 20px;
+}
+
+/deep/ .el-checkbox__label {
+  font-size: 20px;
+  font-weight: 1000;
+  color: white;
+}
+
+/deep/ .el-checkbox__inner {
+  width: 25px;
+  height: 25px;
+  font-size: 20px;
+}
+
+/deep/ .el-button {
+  height: 50px;
+  width: 188px;
+  font-weight: bold;
+  font-size: 23px;
+  margin-top: 71px;
+
+}
+
+/deep/ .el-button--default {
+  margin-left: 93px;
+}
+
+/deep/ .el-button--primary {
+  margin-left: 18px;
+}
+
+</style>