diff --git a/index.html b/index.html
index ead0d5e..f57f42a 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
     <meta name="format-detection" content="telephone=no">
     <meta name="format-detection" content="address=no">
     <title>vue2spa</title>
+    <link rel="stylesheet" href="./static/reset.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 3e458ff..1f8ee92 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,6 @@
   </div>
 </template>
 <script>
-    import './css/common.css'
     import HeaderCompontent from './components/header.vue'
     import FootComponent from './components/footer.vue'
     export default{
diff --git a/src/pages/index.vue b/src/pages/index.vue
index c07a0bc..8a1992f 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,10 +1,14 @@
 <template>
     <div class="container">
-        <h1>{{msg}}</h1>
-        <button v-on:click="fn1()">点我看控制台</button>
-        <li v-for="item in listArr">
-            <a href="javascript:;">{{item.name}}</a>
-        </li>
+        <button v-on:click="loadList">click me</button>
+        <ul>
+            <li v-for="(item, index) in listArr">
+                <a :href="item.alt">{{index}} 《{{item.title}}》</a>
+            </li>
+        </ul>
+        <div class="loading" v-if="loading">
+          Loading...
+        </div>
     </div>
 </template>
 <script>
@@ -14,32 +18,28 @@
     export default{
         data () {
             return{
-                msg:'这个页面包含了使用axios去请求ajax数据和其他事件方法',
+                loading: false,
                 listArr: [],
             }
         },
-        created () {
-            this.init();
-        },
         methods: {
-            init: function() {
-                var _this = this;
+            loadList: function() {
                 console.log("初始化加载数据开始...");
-                axios.get('https://api.github.com/repos/typecho-fans/plugins/contents/At', {
+                var _this = this;
+                _this.loading = true;
+                axios.get('https://api.douban.com/v2/movie/top250', {
                   params: {
-                    // 需要的参数
+                    count: 11
                   }
                 })
                 .then(function (response) {
-                  console.log(response,2);
-                  _this.listArr = response.data;
+                  // console.log(response);
+                  _this.loading = false;
+                  _this.listArr = response.data.subjects;
                 })
                 .catch(function (error) {
                   console.log(error);
                 });
-            },
-            fn1: function() {
-                console.log("这是点击事件!");
             }
         }
     }
@@ -56,5 +56,13 @@
     margin: 0 auto;
     line-height: 30px;
   }
-
+  a{
+    color: blue;
+  }
+  ul{
+    margin-bottom: 60px;
+  }
+  li{
+    line-height: 28px;
+  }
 </style>
diff --git a/src/css/common.css b/static/reset.css
similarity index 96%
rename from src/css/common.css
rename to static/reset.css
index d4148be..2340d67 100644
--- a/src/css/common.css
+++ b/static/reset.css
@@ -14,7 +14,6 @@ a{ text-decoration:none; outline: none;}
 a:hover{ text-decoration: none; }
 a:active, a:focus{ outline:none; }
 b{ font-weight: normal; }
-/*input ,button{ border: none; outline: none;}*/
 input:not([type="radio"]){appearance:none;-webkit-appearance:none;-o-appearance:none;-moz-appearance:none;}
 button:active{
   transform:scale(0.9);
