diff --git a/package.json b/package.json
index 900e71b..f5a2f08 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "core-js": "^3.6.5",
     "lib-flexible": "^0.3.2",
     "postcss-px2rem": "^0.3.0",
diff --git a/src/api/base.ts b/src/api/base.ts
new file mode 100644
index 0000000..59d0ce0
--- /dev/null
+++ b/src/api/base.ts
@@ -0,0 +1,4 @@
+import axios from "axios"
+axios.defaults.baseURL="https://tomcat.theluyuan.com/Learning"
+
+export default axios
\ No newline at end of file
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..699886b
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,5 @@
+import axios from "./base"
+
+export function login(){
+   return axios.post("/user/login",{userName:"zs",password:"123"})
+}
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 5089767..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,61 +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-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</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 lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  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>
diff --git a/src/components/navitem.vue b/src/components/navitem.vue
new file mode 100644
index 0000000..2b5d773
--- /dev/null
+++ b/src/components/navitem.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="navitem">
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/static/img/icon.png b/src/static/img/icon.png
new file mode 100644
index 0000000..822df21
Binary files /dev/null and b/src/static/img/icon.png differ
diff --git a/src/views/Home.vue b/src/views/Home.vue
index be8144b..e3853bc 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -10,19 +10,19 @@
 
     <div class="navs">
       <div class="nav-item">
-        <img src="../static/img/icon.png">
+        <img src="../static/img/icon.png" class="icon" />
         <p>名师推荐</p>
       </div>
       <div class="nav-item">
-        <img src="../static/img/icon.png">
+        <img src="../static/img/icon.png" />
         <p>订阅专栏</p>
       </div>
       <div class="nav-item">
-        <img src="../static/img/icon.png">
+        <img src="../static/img/icon.png" />
         <p>我的收藏</p>
       </div>
       <div class="nav-item">
-        <img src="../static/img/icon.png">
+        <img src="../static/img/icon.png" />
         <p>下载管理</p>
       </div>
     </div>
@@ -30,55 +30,63 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-
+import { defineComponent } from "vue";
+import {login} from "../api/index"
 export default defineComponent({
-  name: 'Home',
+  name: "Home",
+  setup() {
+    function denglu() {
+     login().then((res:any)=>{
+       console.log(res)
+     })
+    }
+    return {
+      denglu
+    };
+  },
 });
 </script>
 
 <style lang="scss" scoped>
-.home{
+.home {
   height: 100vh;
-  background:#F5F5F5;
-  .top{
+  background: #f5f5f5;
+  .top {
     width: 100%;
-    background: #5677FF;
-    padding-top:125px;
+    background: #5677ff;
+    padding-top: 125px;
     padding-bottom: 93px;
     position: relative;
-    .content{
-      color:white;
-      font-size:49px;
+    .content {
+      color: white;
+      font-size: 49px;
       margin-left: 118px;
-      .biaoti{
-        font-size:67px ;
+      .biaoti {
+        font-size: 67px;
         margin-bottom: 41px;
       }
     }
 
-    .right{
+    .right {
       width: 268px;
       height: 277px;
-      background: gold;
-      position:absolute;
-      right:0;
+      background: white;
+      position: absolute;
+      right: 0;
       bottom: 0;
     }
-
   }
 
-  .navs{
+  .navs {
     width: 900px;
     height: 180px;
     background: white;
-    margin:0 auto;
+    margin: 0 auto;
     margin-top: 20px;
     display: flex;
     justify-content: space-around;
     align-items: center;
     text-align: center;
   }
-
 }
 </style>
diff --git a/yarn.lock b/yarn.lock
index 987519c..33178df 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1979,6 +1979,13 @@ aws4@^1.8.0:
   resolved "https://registry.nlark.com/aws4/download/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=
 
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.npmmirror.com/axios/download/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha1-gE5voeS5xSiFAd2d/1anoJQNINY=
+  dependencies:
+    follow-redirects "^1.14.4"
+
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.nlark.com/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -3935,6 +3942,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.4.tgz?cache=0&sync_timestamp=1631622129411&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
   integrity sha1-g4/fSKi73XnlLuUfsclOPtmLk3k=
 
+follow-redirects@^1.14.4:
+  version "1.14.5"
+  resolved "https://registry.npmmirror.com/follow-redirects/download/follow-redirects-1.14.5.tgz?cache=0&sync_timestamp=1635857764332&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.5.tgz#f09a5848981d3c772b5392309778523f8d85c381"
+  integrity sha1-8JpYSJgdPHcrU5Iwl3hSP42Fw4E=
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.nlark.com/for-in/download/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"