From a01644b13be6986ad3373c2ae94a9fcf2d9459c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=93=9D=E8=89=B2=E5=9B=9B=E6=9C=88=E5=A4=A9?=
 <461249104@qq.com>
Date: Wed, 29 Mar 2017 17:02:07 +0800
Subject: [PATCH] add loaidng animation

---
 .idea/workspace.xml                    | 214 +++++++++++---------
 README.md                              |   6 +-
 src/components/Index.vue               | 261 +++++++++++++++++++++++++
 src/components/Musicsong/Musicsong.vue |  16 +-
 src/main.js                            |   4 +-
 static/img/rage_loading.png            | Bin 0 -> 2660 bytes
 test/unit/specs/Hello.spec.js          |   2 +-
 7 files changed, 403 insertions(+), 100 deletions(-)
 create mode 100644 src/components/Index.vue
 create mode 100644 static/img/rage_loading.png

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 28f4a57..1028c91 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -26,11 +26,10 @@
       <file leaf-file-name="main.js" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/main.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="374">
-              <caret line="30" column="18" selection-start-line="30" selection-start-column="13" selection-end-line="30" selection-end-column="18" />
+            <state relative-caret-position="264">
+              <caret line="12" column="0" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
               <folding>
                 <element signature="n#!!doc" expanded="true" />
-                <element signature="e#140#162#0" expanded="true" />
               </folding>
             </state>
           </provider>
@@ -39,8 +38,8 @@
       <file leaf-file-name="App.vue" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/App.vue">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="330">
-              <caret line="20" column="12" selection-start-line="20" selection-start-column="12" selection-end-line="20" selection-end-column="12" />
+            <state relative-caret-position="110">
+              <caret line="10" column="14" selection-start-line="10" selection-start-column="14" selection-end-line="10" selection-end-column="14" />
               <folding>
                 <element signature="n#ul#0;n#header#0;n#div#0;n#template#0;n#!!top" expanded="false" />
                 <element signature="e#1574#2282#0" expanded="false" />
@@ -49,37 +48,29 @@
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="musicsearch.vue" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/components/musicsearch/musicsearch.vue">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="418">
-              <caret line="58" column="31" selection-start-line="58" selection-start-column="18" selection-end-line="58" selection-end-column="31" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="Hello.vue" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/components/Hello.vue">
+      <file leaf-file-name="Index.vue" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/components/Index.vue">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1232">
-              <caret line="100" column="13" selection-start-line="98" selection-start-column="10" selection-end-line="100" selection-end-column="13" />
+            <state relative-caret-position="149">
+              <caret line="156" column="2" selection-start-line="156" selection-start-column="2" selection-end-line="171" selection-end-column="3" />
               <folding>
                 <element signature="n#style#0;n#div#0;n#template#0;n#!!top" expanded="true" />
                 <element signature="n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
                 <element signature="n#swipe#0;n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
                 <element signature="n#div#1;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-                <element signature="e#2240#2285#0" expanded="true" />
-                <element signature="e#4242#4350#0" expanded="false" />
+                <element signature="e#2392#2437#0" expanded="true" />
+                <element signature="e#4206#4267#0" expanded="false" />
+                <element signature="e#4758#4866#0" expanded="false" />
+                <element signature="e#4884#6018#0" expanded="false" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="Musicmenu.vue" pinned="false" current-in-tab="true">
+      <file leaf-file-name="Musicmenu.vue" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/components/Musicmenu/Musicmenu.vue">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="174">
+            <state relative-caret-position="-2202">
               <caret line="122" column="26" selection-start-line="122" selection-start-column="26" selection-end-line="122" selection-end-column="26" />
               <folding>
                 <element signature="n#div#0;n#div#1;n#div#0;n#transition-group#0;n#template#0;n#!!top" expanded="false" />
@@ -96,11 +87,11 @@
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="Musicsong.vue" pinned="false" current-in-tab="false">
+      <file leaf-file-name="Musicsong.vue" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/components/Musicsong/Musicsong.vue">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="682">
-              <caret line="232" column="16" selection-start-line="232" selection-start-column="16" selection-end-line="232" selection-end-column="16" />
+            <state relative-caret-position="288">
+              <caret line="480" column="3" selection-start-line="480" selection-start-column="3" selection-end-line="480" selection-end-column="3" />
               <folding>
                 <element signature="n#div#1;n#div#0;n#div#0;n#transition-group#0;n#template#0;n#!!top" expanded="false" />
                 <element signature="n#div#1;n#div#0;n#transition-group#0;n#template#0;n#!!top" expanded="false" />
@@ -113,7 +104,6 @@
                 <element signature="e#9400#10124#0" expanded="false" />
                 <element signature="e#11435#11573#0" expanded="false" />
                 <element signature="e#11585#12001#0" expanded="false" />
-                <element signature="e#13208#13307#0" expanded="false" />
               </folding>
             </state>
           </provider>
@@ -171,13 +161,14 @@
         <option value="$PROJECT_DIR$/data.json" />
         <option value="$PROJECT_DIR$/src/api/index.js" />
         <option value="$PROJECT_DIR$/src/utils/diyaxios.js" />
-        <option value="$PROJECT_DIR$/src/main.js" />
         <option value="$PROJECT_DIR$/src/components/Hello.vue" />
         <option value="$PROJECT_DIR$/build/dev-server.js" />
         <option value="$PROJECT_DIR$/src/components/musicsearch/musicsearch.vue" />
         <option value="$PROJECT_DIR$/src/App.vue" />
-        <option value="$PROJECT_DIR$/src/components/Musicsong/Musicsong.vue" />
         <option value="$PROJECT_DIR$/src/components/Musicmenu/Musicmenu.vue" />
+        <option value="$PROJECT_DIR$/src/main.js" />
+        <option value="$PROJECT_DIR$/src/components/Index.vue" />
+        <option value="$PROJECT_DIR$/src/components/Musicsong/Musicsong.vue" />
       </list>
     </option>
   </component>
@@ -193,8 +184,8 @@
     <handled-path value="$PROJECT_DIR$/node_modules" />
   </component>
   <component name="ProjectFrameBounds">
-    <option name="x" value="246" />
-    <option name="y" value="34" />
+    <option name="x" value="173" />
+    <option name="y" value="16" />
     <option name="width" value="1030" />
     <option name="height" value="720" />
   </component>
@@ -231,6 +222,48 @@
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
             </PATH_ELEMENT>
           </PATH>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="lazy-img" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="lazy-img" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+          </PATH>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="lazy-img" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="lazy-img" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="src" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+          </PATH>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="lazy-img" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="lazy-img" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="src" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="components" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+          </PATH>
         </subPane>
       </pane>
       <pane id="Scratches" />
@@ -339,12 +372,12 @@
       <workItem from="1490498080088" duration="16911000" />
       <workItem from="1490580301882" duration="33232000" />
       <workItem from="1490667672527" duration="24886000" />
-      <workItem from="1490772139092" duration="4790000" />
+      <workItem from="1490772139092" duration="5847000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="180277000" />
+    <option name="totallyTimeSpent" value="181334000" />
   </component>
   <component name="TodoView">
     <todo-panel id="selected-file">
@@ -356,12 +389,13 @@
     </todo-panel>
   </component>
   <component name="ToolWindowManager">
-    <frame x="246" y="34" width="1030" height="720" extended-state="1" />
+    <frame x="173" y="16" width="1030" height="720" extended-state="0" />
     <editor active="true" />
     <layout>
-      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.20967741" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
+      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.20967741" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3293718" sideWeight="0.4957265" order="6" side_tool="false" content_ui="tabs" />
       <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3293718" sideWeight="0.50427353" order="7" side_tool="true" content_ui="tabs" />
+      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32993197" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
       <window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
       <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
       <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
@@ -374,7 +408,6 @@
       <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
       <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
       <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
-      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
       <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
     </layout>
     <layout-to-restore>
@@ -435,7 +468,6 @@
           <caret line="7" column="14" selection-start-line="7" selection-start-column="7" selection-end-line="7" selection-end-column="14" />
           <folding>
             <element signature="n#!!doc" expanded="true" />
-            <element signature="e#140#162#0" expanded="true" />
           </folding>
         </state>
       </provider>
@@ -451,7 +483,7 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/Hello.vue">
+    <entry file="file://$PROJECT_DIR$/src/components/Index.vue">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="2948">
           <caret line="134" column="28" selection-start-line="134" selection-start-column="20" selection-end-line="134" selection-end-column="28" />
@@ -460,8 +492,10 @@
             <element signature="n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
             <element signature="n#swipe#0;n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
             <element signature="n#div#1;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="e#2240#2285#0" expanded="true" />
-            <element signature="e#4242#4350#0" expanded="false" />
+            <element signature="e#2392#2437#0" expanded="true" />
+            <element signature="e#4206#4267#0" expanded="false" />
+            <element signature="e#4758#4866#0" expanded="false" />
+            <element signature="e#4884#6018#0" expanded="false" />
           </folding>
         </state>
       </provider>
@@ -500,7 +534,6 @@
           <caret line="7" column="14" selection-start-line="7" selection-start-column="7" selection-end-line="7" selection-end-column="14" />
           <folding>
             <element signature="n#!!doc" expanded="true" />
-            <element signature="e#140#162#0" expanded="true" />
           </folding>
         </state>
       </provider>
@@ -516,7 +549,7 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/Hello.vue">
+    <entry file="file://$PROJECT_DIR$/src/components/Index.vue">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="0">
           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
@@ -525,8 +558,10 @@
             <element signature="n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
             <element signature="n#swipe#0;n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
             <element signature="n#div#1;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="e#2240#2285#0" expanded="true" />
-            <element signature="e#4242#4350#0" expanded="false" />
+            <element signature="e#2392#2437#0" expanded="true" />
+            <element signature="e#4206#4267#0" expanded="false" />
+            <element signature="e#4758#4866#0" expanded="false" />
+            <element signature="e#4884#6018#0" expanded="false" />
           </folding>
         </state>
       </provider>
@@ -565,7 +600,6 @@
           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
           <folding>
             <element signature="n#!!doc" expanded="true" />
-            <element signature="e#140#162#0" expanded="true" />
           </folding>
         </state>
       </provider>
@@ -601,7 +635,6 @@
           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
           <folding>
             <element signature="n#!!doc" expanded="true" />
-            <element signature="e#140#162#0" expanded="true" />
           </folding>
         </state>
       </provider>
@@ -625,7 +658,7 @@
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/components/User.vue" />
-    <entry file="file://$PROJECT_DIR$/src/components/Hello.vue">
+    <entry file="file://$PROJECT_DIR$/src/components/Index.vue">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="22">
           <caret line="1" column="0" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" />
@@ -634,8 +667,10 @@
             <element signature="n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
             <element signature="n#swipe#0;n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
             <element signature="n#div#1;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="e#2240#2285#0" expanded="true" />
-            <element signature="e#4242#4350#0" expanded="false" />
+            <element signature="e#2392#2437#0" expanded="true" />
+            <element signature="e#4206#4267#0" expanded="false" />
+            <element signature="e#4758#4866#0" expanded="false" />
+            <element signature="e#4884#6018#0" expanded="false" />
           </folding>
         </state>
       </provider>
@@ -727,17 +762,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/main.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="374">
-          <caret line="30" column="18" selection-start-line="30" selection-start-column="13" selection-end-line="30" selection-end-column="18" />
-          <folding>
-            <element signature="n#!!doc" expanded="true" />
-            <element signature="e#140#162#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/utils/diyaxios.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="154">
@@ -764,6 +788,7 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="154">
           <caret line="7" column="22" selection-start-line="7" selection-start-column="22" selection-end-line="7" selection-end-column="22" />
+          <folding />
         </state>
       </provider>
     </entry>
@@ -775,33 +800,28 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/Hello.vue">
+    <entry file="file://$PROJECT_DIR$/src/main.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1232">
-          <caret line="100" column="13" selection-start-line="98" selection-start-column="10" selection-end-line="100" selection-end-column="13" />
+        <state relative-caret-position="264">
+          <caret line="12" column="0" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
           <folding>
-            <element signature="n#style#0;n#div#0;n#template#0;n#!!top" expanded="true" />
-            <element signature="n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#swipe#0;n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#div#1;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="e#2240#2285#0" expanded="true" />
-            <element signature="e#4242#4350#0" expanded="false" />
+            <element signature="n#!!doc" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/components/musicsearch/musicsearch.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="418">
-          <caret line="58" column="31" selection-start-line="58" selection-start-column="18" selection-end-line="58" selection-end-column="31" />
+        <state relative-caret-position="-66">
+          <caret line="54" column="15" selection-start-line="54" selection-start-column="15" selection-end-line="54" selection-end-column="15" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/App.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="330">
-          <caret line="20" column="12" selection-start-line="20" selection-start-column="12" selection-end-line="20" selection-end-column="12" />
+        <state relative-caret-position="110">
+          <caret line="10" column="14" selection-start-line="10" selection-start-column="14" selection-end-line="10" selection-end-column="14" />
           <folding>
             <element signature="n#ul#0;n#header#0;n#div#0;n#template#0;n#!!top" expanded="false" />
             <element signature="e#1574#2282#0" expanded="false" />
@@ -809,30 +829,26 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/Musicsong/Musicsong.vue">
+    <entry file="file://$PROJECT_DIR$/src/components/Index.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="682">
-          <caret line="232" column="16" selection-start-line="232" selection-start-column="16" selection-end-line="232" selection-end-column="16" />
+        <state relative-caret-position="149">
+          <caret line="156" column="2" selection-start-line="156" selection-start-column="2" selection-end-line="171" selection-end-column="3" />
           <folding>
-            <element signature="n#div#1;n#div#0;n#div#0;n#transition-group#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#div#1;n#div#0;n#transition-group#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="e#3082#3148#0" expanded="true" />
-            <element signature="e#7599#7663#0" expanded="false" />
-            <element signature="e#7708#7758#0" expanded="false" />
-            <element signature="e#7781#8233#0" expanded="false" />
-            <element signature="e#8252#9328#0" expanded="false" />
-            <element signature="e#9347#11424#0" expanded="false" />
-            <element signature="e#9400#10124#0" expanded="false" />
-            <element signature="e#11435#11573#0" expanded="false" />
-            <element signature="e#11585#12001#0" expanded="false" />
-            <element signature="e#13208#13307#0" expanded="false" />
+            <element signature="n#style#0;n#div#0;n#template#0;n#!!top" expanded="true" />
+            <element signature="n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
+            <element signature="n#swipe#0;n#div#0;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
+            <element signature="n#div#1;n#div#0;n#div#0;n#div#0;n#template#0;n#!!top" expanded="false" />
+            <element signature="e#2392#2437#0" expanded="true" />
+            <element signature="e#4206#4267#0" expanded="false" />
+            <element signature="e#4758#4866#0" expanded="false" />
+            <element signature="e#4884#6018#0" expanded="false" />
           </folding>
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/components/Musicmenu/Musicmenu.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="174">
+        <state relative-caret-position="-2202">
           <caret line="122" column="26" selection-start-line="122" selection-start-column="26" selection-end-line="122" selection-end-column="26" />
           <folding>
             <element signature="n#div#0;n#div#1;n#div#0;n#transition-group#0;n#template#0;n#!!top" expanded="false" />
@@ -848,5 +864,25 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/components/Musicsong/Musicsong.vue">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="288">
+          <caret line="480" column="3" selection-start-line="480" selection-start-column="3" selection-end-line="480" selection-end-column="3" />
+          <folding>
+            <element signature="n#div#1;n#div#0;n#div#0;n#transition-group#0;n#template#0;n#!!top" expanded="false" />
+            <element signature="n#div#1;n#div#0;n#transition-group#0;n#template#0;n#!!top" expanded="false" />
+            <element signature="e#3082#3148#0" expanded="true" />
+            <element signature="e#7599#7663#0" expanded="false" />
+            <element signature="e#7708#7758#0" expanded="false" />
+            <element signature="e#7781#8233#0" expanded="false" />
+            <element signature="e#8252#9328#0" expanded="false" />
+            <element signature="e#9347#11424#0" expanded="false" />
+            <element signature="e#9400#10124#0" expanded="false" />
+            <element signature="e#11435#11573#0" expanded="false" />
+            <element signature="e#11585#12001#0" expanded="false" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>
\ No newline at end of file
diff --git a/README.md b/README.md
index 1fb5f48..83666d9 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-#musiccloudWebapp
+## Build Setup
 
 # install dependencies
 npm install
@@ -7,6 +7,4 @@ npm install
 npm run dev
 
 # build for production with minification
-npm run build
-
-The online demo [http://qiufengh.com:8080/](http://qiufengh.com:8080/)
+npm run build
\ No newline at end of file
diff --git a/src/components/Index.vue b/src/components/Index.vue
new file mode 100644
index 0000000..5c84c10
--- /dev/null
+++ b/src/components/Index.vue
@@ -0,0 +1,261 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div class="hello-wrapper" ref="helloWrapper">
+      <div class="hello">
+        <div class="swipe-wrapper">
+          <swipe class="my-swipe">
+            <swipe-item class="slide1">
+              <img src="../assets/1.png" alt="">
+            </swipe-item>
+            <swipe-item class="slide2">
+              <img src="../assets/2.png" alt="">
+            </swipe-item>
+            <swipe-item class="slide3">
+              <img src="../assets/3.png" alt="">
+            </swipe-item>
+            <swipe-item class="slide3">
+              <img src="../assets/4.png" alt="">
+            </swipe-item>
+            <swipe-item class="slide3">
+              <img src="../assets/5.png" alt="">
+            </swipe-item>
+            <swipe-item class="slide3">
+              <img src="../assets/6.png" alt="">
+            </swipe-item>
+            <swipe-item class="slide3">
+              <img src="../assets/7.png" alt="">
+            </swipe-item>
+            <swipe-item class="slide3">
+              <img src="../assets/8.png" alt="">
+            </swipe-item>
+          </swipe>
+        </div>
+        <div class="cards border-1px">
+          <div class="card-li">
+            <div class="circle">
+            </div>
+            <p>私人FM</p>
+          </div>
+          <div class="card-li">
+            <div class="circle">
+              <span>20</span>
+            </div>
+            <p>每日歌曲推荐</p>
+          </div>
+          <div class="card-li">
+            <div class="circle">
+            </div>
+            <p>云音乐热歌榜</p>
+          </div>
+        </div>
+        <!--<div class="height">-->
+        <!---->
+        <!--</div>-->
+        <div class="music-list">
+          <musictitle :info="info" ></musictitle>
+          <ul class="list-ul">
+            <li v-for="item in music" @click="openmenuTotal(item)">
+              <img v-lazy="item.coverImgUrl" alt=""/>
+              <div class="item-content">
+                {{item.name}}
+              </div>
+            </li>
+          </ul>
+          <div class="loading" v-show="loading">
+            <img src="../../static/img/rage_loading.png" alt="" width=100 height=100>
+          </div>
+        </div>
+      </div>
+    </div>
+    <musicmenu ref="musicmenu" v-on:openmusicsong="show"></musicmenu>
+    <Musicsong ref="musicsong"></Musicsong>
+  </div>
+</template>
+
+<script>
+  import { Swipe, SwipeItem } from 'vue-swipe';
+  import BScroll from 'better-scroll';
+  import Musictitle from './Musictitle/Musictitle.vue';
+  import Musicmenu from './Musicmenu/Musicmenu.vue';
+  import Musicsong from './Musicsong/Musicsong.vue';
+//  import data from '../../data.json';
+  import api from '../api';
+  export default {
+    name: 'hello',
+    data() {
+      return {
+        music: {},
+        info: {
+          src: '../../../static/img/aei.png',
+          content: '推荐歌单'
+        },
+        loading: false
+      };
+    },
+    created() {
+      this.get();
+//      this.music = data.music;
+    },
+    methods: {
+      get() {
+        this.loading = true;
+        this.$http.get(api.getPlayListByWhere('全部', 'hot', 0, true, 9)).then((res) => {
+          this.music = res.data.playlists;
+          this.$nextTick(() => {
+            this._initScroll();
+          });
+          this.loading = false;
+        });
+      },
+      _initScroll() {
+        if (!this.helloScroll) {
+          this.helloScroll = new BScroll(this.$refs.helloWrapper, {
+            click: true
+          });
+        } else {
+          this.helloScroll.refresh();
+        }
+      },
+      openmenuTotal: function (item) {
+        this.$refs.musicmenu.show();
+        this.$refs.musicmenu.setmusiclist(item);
+      },
+      show: function (item) {
+        this.$refs.musicsong.show(item);
+      }
+    },
+    components: {
+      Swipe,
+      SwipeItem,
+      Musictitle,
+      Musicmenu,
+      Musicsong
+    }
+  };
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+  @import "../common/stylus/mixin.styl";
+  img[lazy=error]
+    transition: all 0.5s
+    width: 100%
+  img[lazy=loading]
+    transition: all 0.5s
+    width: 100%
+  img[lazy=loaded]
+    transition: all 0.5s
+    width: 100%
+    animation: fade 0.5s
+  @keyframes fade
+    0%{
+      opacity: 0
+    }
+    100%{
+      opacity: 1
+    }
+  @-webkit-keyframes rotating{
+    0% {
+      -webkit-transform:rotate(0deg)
+    }
+    100% {
+      -webkit-transform:rotate(360deg)
+    }
+  }
+  @keyframes rotating {
+    0% {
+      transform: rotate(0deg)
+    }
+    100% {
+      transform: rotate(360deg)
+    }
+  }
+  .hello-wrapper
+    width: 100%
+    position: absolute
+    top:87px
+    bottom:0
+    overflow: hidden
+    background:#fff
+    .my-swipe
+      height: 139px
+      color: #fff
+      font-size: 30px
+      text-align: center
+      img
+        width: 100%
+    .cards
+      border-1px(#ddd)
+      .card-li
+        display: inline-block
+        width: 30%
+        margin-left: 2.5%
+        margin-top: 10px
+        margin-bottom: 10px
+        .circle
+          position: relative;
+          width: 58%
+          margin: 0 auto
+          height: 0
+          padding-top: 58%
+          border-radius: 50%
+          border: 1px solid #d33a31
+          span
+            position: absolute
+            left: 50%
+            top:50%
+            margin-left: -15px
+            margin-top: -15px
+            width: 30px
+            height: 30px
+            line-height: 30px
+            text-align: center
+            font-size: 20px
+            color: #d33a31
+        p
+          color: #333
+          font-size: 10px
+          text-align: center
+          margin-top: 5px
+      .card-li:nth-child(1)
+        .circle
+          background: url(../assets/FM.png) no-repeat
+          background-size:50px 50px
+          background-position: center
+      .card-li:nth-child(3)
+        .circle
+          background: url(../assets/ph.png) no-repeat
+          background-size:50px 50px
+          background-position: center
+    .music-list
+      .loading
+        width:100px
+        height: 100px
+        margin:10px auto 0 auto
+        img
+          -webkit-animation: rotating 3s  linear .3s infinite
+          animation: rotating 3s linear .3s infinite
+      .list-ul li
+        /*float: left;*/
+        min-height: 154px
+        display: inline-block
+        width: 30%
+        margin-left: 2.5%
+        margin-bottom: 2.5%
+        box-sizing: border-box
+        vertical-align: top
+        img
+          width: 100%
+        .item-content
+          height: 38px
+          word-wrap:break-word
+          overflow: hidden
+          display: -webkit-box
+          text-overflow:ellipsis
+          -webkit-line-clamp:2
+          -webkit-box-orient: vertical
+          font-size: 12px
+          color:#333
+          line-height: 1.5
+          letter-spacing: 1px
+</style>
diff --git a/src/components/Musicsong/Musicsong.vue b/src/components/Musicsong/Musicsong.vue
index 61514d7..704febd 100644
--- a/src/components/Musicsong/Musicsong.vue
+++ b/src/components/Musicsong/Musicsong.vue
@@ -472,12 +472,20 @@
           span
             color: #333
   @-webkit-keyframes rotating{
-    0% { -webkit-transform:rotate(0deg); }
-    100% { -webkit-transform:rotate(360deg); }
+    0% {
+      -webkit-transform:rotate(0deg)
+    }
+    100% {
+      -webkit-transform:rotate(360deg)
+    }
   }
   @keyframes rotating {
-    0% { transform: rotate(0deg);}
-    100% { transform: rotate(360deg);}
+    0% {
+      transform: rotate(0deg)
+    }
+    100% {
+      transform: rotate(360deg)
+    }
   }
   .cd-rotate
     -webkit-animation: rotating 10s  linear .3s infinite
diff --git a/src/main.js b/src/main.js
index 121b5ef..4c10ebd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,7 +7,7 @@ import Router from 'vue-router';
 import Music from './components/Music';
 import Rank from './components/Rank';
 import Station from './components/Station';
-import Hello from './components/Hello';
+import Index from './components/Index';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 
@@ -28,7 +28,7 @@ Vue.use(Router);
 
 const routes = [{
   path: '/',
-  component: Hello
+  component: Index
 }, {
   path: '/music',
   component: Music
diff --git a/static/img/rage_loading.png b/static/img/rage_loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3e69d46eb8a9073b2d8955f90eaf207ec4f6a47
GIT binary patch
literal 2660
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
S={%MI0000<MNUMnLSTaPAlAnK

literal 0
HcmV?d00001

diff --git a/test/unit/specs/Hello.spec.js b/test/unit/specs/Hello.spec.js
index 1b276f4..d07b1bf 100644
--- a/test/unit/specs/Hello.spec.js
+++ b/test/unit/specs/Hello.spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
 import Hello from '@/components/Hello'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
 
-describe('Hello.vue', () => {
+describe('index.vue', () => {
   it('should render correct contents', () => {
     const Constructor = Vue.extend(Hello){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
     const vm = new Constructor().$mount(){{#if_eq lintConfig "airbnb"}};{{/if_eq}}