首页

src/App.vue

@@ -6,7 +6,10 @@
 </template>
 
 <style>
-
+*{
+  margin: 0;
+  padding: 0;
+}
 </style>
 <script>
 //  import "./utils/rem.js";

src/router/index.ts

@@ -7,6 +7,11 @@ const routes: Array<RouteRecordRaw> = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
+  },
+  {
+    path:"/home",
+    name:"home",
+    component:()=>import('../views/Home.vue')
   }
 ]
 

src/views/Home.vue

@@ -1,18 +1,84 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+    <div class="top">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+      <div class="content">
+        <h1 class="biaoti">一对一系列课</h1>
+        <p class="word">量身订制轻松学</p>
+      </div>
+      <div class="right"></div>
+    </div>
+
+    <div class="navs">
+      <div class="nav-item">
+        <img src="../static/img/icon.png">
+        <p>名师推荐</p>
+      </div>
+      <div class="nav-item">
+        <img src="../static/img/icon.png">
+        <p>订阅专栏</p>
+      </div>
+      <div class="nav-item">
+        <img src="../static/img/icon.png">
+        <p>我的收藏</p>
+      </div>
+      <div class="nav-item">
+        <img src="../static/img/icon.png">
+        <p>下载管理</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
 
 export default defineComponent({
   name: 'Home',
-  components: {
-    HelloWorld,
-  },
 });
 </script>
+
+<style lang="scss" scoped>
+.home{
+  height: 100vh;
+  background:#F5F5F5;
+  .top{
+    width: 100%;
+    background: #5677FF;
+    padding-top:125px;
+    padding-bottom: 93px;
+    position: relative;
+    .content{
+      color:white;
+      font-size:49px;
+      margin-left: 118px;
+      .biaoti{
+        font-size:67px ;
+        margin-bottom: 41px;
+      }
+    }
+
+    .right{
+      width: 268px;
+      height: 277px;
+      background: gold;
+      position:absolute;
+      right:0;
+      bottom: 0;
+    }
+
+  }
+
+  .navs{
+    width: 900px;
+    height: 180px;
+    background: white;
+    margin:0 auto;
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    text-align: center;
+  }
+
+}
+</style>

src/views/Login.vue

@@ -1,22 +1,23 @@
 <template>
   <div class="login">
     <div class="main">
-      <img src="../static/img/logo.svg" alt="">
+      <img src="../static/img/logo.svg" alt="" class="logo">
       <van-field
-        v-model="account"
+        label="账号"
-        label="文本"
+        placeholder="请输入账号"
-        placeholder="请输入用户名"
         class="shuru"
         label-align	="center"
       />
       <van-field
-        v-model="account"
+        label="密码"
-        label="文本"
+        type="password"
         placeholder="请输入密码"
         :border="true"
         class="shuru"
         label-align	="center"
       />
+
+      <van-button type="primary" class="btn">登录</van-button>
     </div>
   </div>
 </template>
@@ -35,14 +36,31 @@ export default {
 
 <style lang="scss" scoped>
 .login {
+  height:90vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
   .main {
-    // background: red;
+     //background: red;
     width:628px;
     margin:0 auto;
+    text-align: center;
     .shuru{
       height:83px;
       width:628px;
       border-bottom:1px solid #eeeeee;
+      margin-bottom:60px;
+    }
+    .logo{
+      width:190px;
+      height:190px;
+      margin-bottom: 90px;
+    }
+    .btn{
+      width:600px;
+      height:90px;
+      border-radius:90px;
+      margin-top: 20px;
     }
   }
 }