diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..9d08a1a8
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/package-lock.json b/package-lock.json
index 9648a22b..eaa5d09b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1687,6 +1687,17 @@
           "integrity": "sha1-4a1IbmxUUBY0xsOXxcEh2qODYHw=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.2.1.tgz",
+          "integrity": "sha1-kK51xCTQCNJiTFvynq0xd+v881k=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594428010987&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1713,6 +1724,34 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
+          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "dev": true,
+          "optional": true
+        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz",
@@ -1734,6 +1773,25 @@
             "path-exists": "^4.0.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1596294337050&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz",
@@ -1798,6 +1856,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611730985&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1600532057758&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -1814,6 +1882,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.0.0-beta.8",
+          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.8.tgz?cache=0&sync_timestamp=1600850425972&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.8.tgz",
+          "integrity": "sha1-H1I9n+qOjG5PW7mf12gWWvWEWHk=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -2397,6 +2477,15 @@
       "integrity": "sha1-4eguTz6Zniz9YbFhKA0WoRH4ZCg=",
       "dev": true
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.18.0.tgz?cache=0&sync_timestamp=1597979584536&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-loader": {
       "version": "8.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.1.0.tgz",
@@ -2419,6 +2508,27 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz?cache=0&sync_timestamp=1586450527243&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.11.tgz",
+          "integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -2501,6 +2611,14 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "better-scroll": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npm.taobao.org/better-scroll/download/better-scroll-1.13.2.tgz",
+      "integrity": "sha1-MebgiM8tI85I5S+tbMWRNP/rL1Y=",
+      "requires": {
+        "babel-runtime": "^6.0.0"
+      }
+    },
     "bfj": {
       "version": "6.1.2",
       "resolved": "https://registry.npm.taobao.org/bfj/download/bfj-6.1.2.tgz",
@@ -3394,6 +3512,12 @@
       "integrity": "sha1-FuQHD7qK4ptnnyIVhT7hgasuq8A=",
       "dev": true
     },
+    "components": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npm.taobao.org/components/download/components-0.1.0.tgz",
+      "integrity": "sha1-IFfAjpx78mYv7slcSeX/Kpq4XtU=",
+      "dev": true
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npm.taobao.org/compressible/download/compressible-2.0.18.tgz",
@@ -5095,8 +5219,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.0.tgz?cache=0&sync_timestamp=1597057988030&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.0.tgz",
-      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs=",
-      "dev": true
+      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs="
     },
     "for-in": {
       "version": "1.0.2",
@@ -5942,8 +6065,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz",
-      "integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=",
-      "dev": true
+      "integrity": "sha1-76ouqdqg16suoTqXsritUf776L4="
     },
     "is-callable": {
       "version": "1.2.2",
@@ -10279,87 +10401,10 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.8",
-      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.8.tgz?cache=0&sync_timestamp=1600850425972&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.8.tgz",
-      "integrity": "sha1-H1I9n+qOjG5PW7mf12gWWvWEWHk=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.2.1.tgz",
-          "integrity": "sha1-kK51xCTQCNJiTFvynq0xd+v881k=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
-          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1596294337050&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611730985&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
+    "vue-router": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.0.2.tgz?cache=0&sync_timestamp=1601637530869&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.0.2.tgz",
+      "integrity": "sha1-3txnr+bE4rwlaCyLHCqMDXx+Vr4="
     },
     "vue-style-loader": {
       "version": "4.1.2",
diff --git a/package.json b/package.json
index a5926821..4a20d469 100644
--- a/package.json
+++ b/package.json
@@ -7,12 +7,16 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.18.0",
+    "better-scroll": "^1.13.2",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-router": "^3.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.0",
     "@vue/cli-service": "^4.5.0",
+    "components": "^0.1.0",
     "vue-template-compiler": "^2.6.11"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcfb..00000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/index.html b/public/index.html
index 41235286..8f58b91c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>logo.png">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 00000000..65158d89
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/App.vue b/src/App.vue
index 55df3153..71e08a64 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,24 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <keep-alive exclude="Detail">
+      <router-view/>
+    </keep-alive>
+    <MainTabBar/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import MainTabBar from "components/content/mainTabbar/MainTabBar";
+
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    MainTabBar
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+@import "./assets/css/base.css";
 </style>
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
new file mode 100644
index 00000000..3c31bd72
--- /dev/null
+++ b/src/assets/css/base.css
@@ -0,0 +1,66 @@
+@import "./normalize.css";
+
+:root {
+  --color-text: #666;
+  --color-high-text: #ff5777;
+  --color-tint: #ff8198;
+  --color-background: #fff;
+  --font-size: 14px;
+  --line-height: 1.5;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  user-select: none; /* 禁止用户鼠标在页面上选中文字/图片等 */
+  -webkit-tap-highlight-color: transparent; /* webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节 */
+  background: var(--color-background);
+  color: var(--color-text);
+  width: 100vw;
+}
+
+a {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+
+.clear-fix::after {
+  clear: both;
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}
+
+.clear-fix {
+  zoom: 1;
+}
+
+.arrow-right {
+  border-top: 1px solid #999;
+  border-left: 1px solid #999;
+  width: 9px;
+  height: 9px;
+  background-color: transparent;
+  transform: rotate(135deg);
+  display: inline-block;
+  margin-left: .1rem;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
diff --git a/src/assets/css/normalize.css b/src/assets/css/normalize.css
new file mode 100644
index 00000000..47b010e4
--- /dev/null
+++ b/src/assets/css/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/src/assets/img/cart/tick.svg b/src/assets/img/cart/tick.svg
new file mode 100644
index 00000000..f8812a29
--- /dev/null
+++ b/src/assets/img/cart/tick.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="16px" height="16px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M908.288 127.488l-537.6 537.6-254.976-254.976L0 525.824l254.976 254.976 115.712 115.712L486.4 780.8l537.6-537.6z" fill="#ffffff" p-id="2923"/></svg>
\ No newline at end of file
diff --git a/src/assets/img/common/back.svg b/src/assets/img/common/back.svg
new file mode 100644
index 00000000..b0962864
--- /dev/null
+++ b/src/assets/img/common/back.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1540006086139" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1898" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22"><defs><style type="text/css"></style></defs><path d="M736 960a31.88 31.88 0 0 1-21.77-8.55l-448-416a32 32 0 0 1 0-46.9l448-416a32 32 0 1 1 43.55 46.9L335 512l422.77 392.55A32 32 0 0 1 736 960z" p-id="1899" fill="#515151"></path></svg>
diff --git a/src/assets/img/common/collect.svg b/src/assets/img/common/collect.svg
new file mode 100644
index 00000000..7677c4fe
--- /dev/null
+++ b/src/assets/img/common/collect.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M953.395454 402.915559c-8.676613-24.556279-30.668487-42.291199-57.407478-46.220694l-222.3716-32.523741L576.974315 126.46632c-11.676947-24.065092-37.161365-39.672558-64.992223-39.672558-27.721365 0-53.151547 15.606443-64.828494 39.617299l-96.643084 197.759039-222.589564 32.633235c-26.629497 3.928472-48.566112 21.609157-57.297984 46.27493-8.622378 24.938995-2.182712 51.950186 16.806781 70.613244l163.271574 160.433946-37.925774 222.535329c-4.638647 26.356274 6.65763 52.440349 29.631878 68.102051 12.059664 8.130168 26.303063 12.441357 41.200354 12.441357 12.059664 0 23.955598-2.891863 34.651194-8.458649l193.666838-102.917998 194.431248 103.192244c23.355941 12.059664 53.260018 10.423397 75.578326-4.311189 22.646789-15.497972 33.887808-41.582047 29.30442-67.940368l-37.871539-222.533282 163.381068-160.653957C955.577143 454.91998 961.962573 427.963025 953.395454 402.915559zM896.587634 432.873872 722.675722 603.894943c-6.712889 6.603395-9.713222 15.989159-8.131191 25.211195l40.381709 237.377362c0.709151 4.202719-1.200338 8.18645-5.02034 10.80509-4.637624 3.166109-12.659321 3.329838-17.080004 1.037632L525.352611 768.203126c-8.404414-4.474918-18.444071-4.365424-26.848485 0L291.576263 878.160447c-5.129834 2.620687-12.605086 2.346441-17.080004-0.709151-1.963725-1.308809-6.438643-5.074575-5.402033-11.076266l40.435944-237.377362c1.582031-9.224082-1.419326-18.609847-8.131191-25.213241L127.486044 432.873872c-3.110851-3.055592-4.201695-7.148817-2.892887-10.859325 1.582031-4.529153 6.056949-7.80271 11.67797-8.676613l237.431597-34.814923c9.331529-1.364067 17.407462-7.258311 21.554922-15.715937L498.558361 151.45955c2.182712-4.474918 7.584746-7.476275 13.423731-7.476275 5.948479 0 11.405771 3.001357 13.58746 7.53051l103.299691 211.292264c4.14746 8.458649 12.223393 14.351869 21.554922 15.715937l237.213633 34.706453c5.675256 0.87288 10.258645 4.201695 11.787464 8.512884C900.736117 425.726078 899.698484 429.818279 896.587634 432.873872z" /></svg>
\ No newline at end of file
diff --git a/src/assets/img/common/placeholder.png b/src/assets/img/common/placeholder.png
new file mode 100644
index 00000000..6df54a7c
Binary files /dev/null and b/src/assets/img/common/placeholder.png differ
diff --git a/src/assets/img/common/top.png b/src/assets/img/common/top.png
new file mode 100644
index 00000000..c75bd734
Binary files /dev/null and b/src/assets/img/common/top.png differ
diff --git a/src/assets/img/detail/detail_bottom.png b/src/assets/img/detail/detail_bottom.png
new file mode 100644
index 00000000..a73cf6e4
Binary files /dev/null and b/src/assets/img/detail/detail_bottom.png differ
diff --git a/src/assets/img/home/recommend_bg.jpg b/src/assets/img/home/recommend_bg.jpg
new file mode 100644
index 00000000..4533eb6c
Binary files /dev/null and b/src/assets/img/home/recommend_bg.jpg differ
diff --git a/src/assets/img/tabbar/cart.svg b/src/assets/img/tabbar/cart.svg
new file mode 100644
index 00000000..69916f7a
--- /dev/null
+++ b/src/assets/img/tabbar/cart.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 405 c0 -8 6 -15 14 -15 21 0 23 -6 46 -136 31 -181 13 -165 187
+-162 187 4 194 21 11 28 -116 4 -133 7 -136 22 -3 16 9 18 136 18 100 0 142 4
+149 13 18 22 35 158 22 173 -9 11 -49 14 -180 14 -156 0 -169 1 -169 18 0 26
+-20 42 -52 42 -18 0 -28 -5 -28 -15z m394 -83 c2 -4 -1 -35 -7 -67 l-12 -60
+-131 -3 -132 -3 -11 64 c-6 35 -11 67 -11 70 0 10 298 9 304 -1z"/>
+</g>
+</svg>
diff --git a/src/assets/img/tabbar/cart_active.svg b/src/assets/img/tabbar/cart_active.svg
new file mode 100644
index 00000000..ee79a987
--- /dev/null
+++ b/src/assets/img/tabbar/cart_active.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
+fill="#ff5777" stroke="none">
+<path d="M0 405 c0 -8 6 -15 14 -15 21 0 23 -6 46 -136 31 -181 13 -165 187
+-162 187 4 194 21 11 28 -116 4 -133 7 -136 22 -3 16 9 18 136 18 100 0 142 4
+149 13 18 22 35 158 22 173 -9 11 -49 14 -180 14 -156 0 -169 1 -169 18 0 26
+-20 42 -52 42 -18 0 -28 -5 -28 -15z m394 -83 c2 -4 -1 -35 -7 -67 l-12 -60
+-131 -3 -132 -3 -11 64 c-6 35 -11 67 -11 70 0 10 298 9 304 -1z"/>
+</g>
+</svg>
diff --git a/src/assets/img/tabbar/category.svg b/src/assets/img/tabbar/category.svg
new file mode 100644
index 00000000..14febb99
--- /dev/null
+++ b/src/assets/img/tabbar/category.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M34 397 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3 c-63
+2 -84 0 -88 -11z"/>
+<path d="M234 397 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3
+c-63 2 -84 0 -88 -11z"/>
+<path d="M34 197 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3 c-63
+2 -84 0 -88 -11z"/>
+<path d="M234 197 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3
+c-63 2 -84 0 -88 -11z"/>
+</g>
+</svg>
diff --git a/src/assets/img/tabbar/category_active.svg b/src/assets/img/tabbar/category_active.svg
new file mode 100644
index 00000000..4e84fca0
--- /dev/null
+++ b/src/assets/img/tabbar/category_active.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
+fill="#ff5777" stroke="none">
+<path d="M34 397 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3 c-63
+2 -84 0 -88 -11z"/>
+<path d="M234 397 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3
+c-63 2 -84 0 -88 -11z"/>
+<path d="M34 197 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3 c-63
+2 -84 0 -88 -11z"/>
+<path d="M234 197 c-3 -8 -4 -47 -2 -88 l3 -74 85 0 85 0 0 85 0 85 -83 3
+c-63 2 -84 0 -88 -11z"/>
+</g>
+</svg>
diff --git a/src/assets/img/tabbar/home.svg b/src/assets/img/tabbar/home.svg
new file mode 100644
index 00000000..9a670e28
--- /dev/null
+++ b/src/assets/img/tabbar/home.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M110 339 c-97 -81 -118 -109 -81 -109 19 0 20 -7 23 -102 l3 -103 60
+0 60 0 5 45 c7 55 15 70 40 70 25 0 33 -15 40 -70 l5 -45 60 0 60 0 3 102 c3
+96 4 103 23 103 13 0 19 6 17 15 -4 20 -189 175 -208 174 -8 0 -58 -36 -110
+-80z m186 -26 l65 -56 -3 -101 -3 -101 -30 0 c-28 0 -30 2 -33 45 -4 57 -25
+80 -72 80 -47 0 -68 -23 -72 -80 -3 -43 -5 -45 -33 -45 l-30 0 -3 100 -3 100
+63 57 c35 32 69 57 76 58 8 0 43 -25 78 -57z"/>
+</g>
+</svg>
diff --git a/src/assets/img/tabbar/home_active.svg b/src/assets/img/tabbar/home_active.svg
new file mode 100644
index 00000000..4375ec74
--- /dev/null
+++ b/src/assets/img/tabbar/home_active.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
+fill="#ff5777" stroke="none">
+<path d="M110 339 c-97 -81 -118 -109 -81 -109 19 0 20 -7 23 -102 l3 -103 60
+0 60 0 5 45 c7 55 15 70 40 70 25 0 33 -15 40 -70 l5 -45 60 0 60 0 3 102 c3
+96 4 103 23 103 13 0 19 6 17 15 -4 20 -189 175 -208 174 -8 0 -58 -36 -110
+-80z m186 -26 l65 -56 -3 -101 -3 -101 -30 0 c-28 0 -30 2 -33 45 -4 57 -25
+80 -72 80 -47 0 -68 -23 -72 -80 -3 -43 -5 -45 -33 -45 l-30 0 -3 100 -3 100
+63 57 c35 32 69 57 76 58 8 0 43 -25 78 -57z"/>
+</g>
+</svg>
diff --git a/src/assets/img/tabbar/profile.svg b/src/assets/img/tabbar/profile.svg
new file mode 100644
index 00000000..4a5dcd07
--- /dev/null
+++ b/src/assets/img/tabbar/profile.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M130 412 c-19 -10 -48 -36 -65 -56 -28 -35 -30 -44 -30 -116 0 -73 2
+-80 33 -119 27 -33 31 -44 22 -60 -5 -11 -10 -27 -10 -35 0 -24 29 -19 39 6 7
+20 15 21 101 22 87 1 93 0 101 -21 10 -26 39 -31 39 -7 0 8 -5 24 -10 35 -9
+16 -5 27 22 60 28 35 33 49 36 107 4 79 -14 119 -72 166 -31 26 -47 31 -104
+34 -52 2 -75 -1 -102 -16z m168 -42 c130 -79 74 -280 -78 -280 -152 0 -208
+201 -78 280 43 26 113 26 156 0z"/>
+</g>
+</svg>
diff --git a/src/assets/img/tabbar/profile_active.svg b/src/assets/img/tabbar/profile_active.svg
new file mode 100644
index 00000000..6a16c228
--- /dev/null
+++ b/src/assets/img/tabbar/profile_active.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="44.000000pt" height="44.000000pt" viewBox="0 0 44.000000 44.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)"
+fill="#ff5777" stroke="none">
+<path d="M130 412 c-19 -10 -48 -36 -65 -56 -28 -35 -30 -44 -30 -116 0 -73 2
+-80 33 -119 27 -33 31 -44 22 -60 -5 -11 -10 -27 -10 -35 0 -24 29 -19 39 6 7
+20 15 21 101 22 87 1 93 0 101 -21 10 -26 39 -31 39 -7 0 8 -5 24 -10 35 -9
+16 -5 27 22 60 28 35 33 49 36 107 4 79 -14 119 -72 166 -31 26 -47 31 -104
+34 -52 2 -75 -1 -102 -16z m168 -42 c130 -79 74 -280 -78 -280 -152 0 -208
+201 -78 280 43 26 113 26 156 0z"/>
+</g>
+</svg>
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503f..00000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/common/const.js b/src/common/const.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/common/mixin.js b/src/common/mixin.js
new file mode 100644
index 00000000..0e929aa1
--- /dev/null
+++ b/src/common/mixin.js
@@ -0,0 +1,38 @@
+import {debounce} from "@/common/utils";
+
+export const itemListenerMixin={
+  data(){
+    return{
+      itemImgListener:null,
+    }
+  },
+
+  mounted(){
+    const refresh = debounce(this.$refs.scroll.refresh,500)
+
+    this.itemImgListener=()=>{
+      refresh()
+    }
+
+    this.$bus.$on('itemImgLoad',this.itemImgListener)
+
+  }
+}
+export const backTopMixin={
+  data(){
+    return{
+      isShowBackTop:false,
+      tabOffsetTop:0,
+      isTabFixed:false,
+    }
+  },
+  methods:{
+    backClick(){
+      this.$refs.scroll.scrollTo(0,0)
+    },
+    contentScoll(position){
+      this.isShowBackTop=(-position.y)>1000
+      this.isTabFixed=(-position.y)>this.tabOffsetTop
+    },
+  }
+}
diff --git a/src/common/utils.js b/src/common/utils.js
new file mode 100644
index 00000000..6ac1d39e
--- /dev/null
+++ b/src/common/utils.js
@@ -0,0 +1,37 @@
+export function debounce(func,delay){
+  let timer=null
+  //...args多个参数 delay是延迟执行 但timer已经赋值 再次传入timer清空
+  return function (...args){
+    if(timer) clearTimeout(timer)
+
+    timer=setTimeout(()=>{
+      func.apply(this,args)
+    },delay)
+  }
+}
+
+export function formatDate(date, fmt) {
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  };
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      let str = o[k] + '';
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
+    }
+  }
+  return fmt;
+}
+
+function padLeftZero (str) {
+  return ('00' + str).substr(str.length);
+}
+
+
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 7fd2dc57..00000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,57 +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>
-    </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>
diff --git a/src/components/common/Scroll/Scroll.vue b/src/components/common/Scroll/Scroll.vue
new file mode 100644
index 00000000..56382d16
--- /dev/null
+++ b/src/components/common/Scroll/Scroll.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="wrapper" ref="wrapper">
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from 'better-scroll'
+export default {
+  name: "Scroll",
+  props:{
+    probeType:{
+      type:Number,
+      default:0
+    },
+    pullUpLoad:{
+      type:Boolean,
+      default: false
+    }
+  },
+  data(){
+    return{
+      scroll:null
+    }
+  },
+  mounted() {
+    this.scroll=new BScroll(this.$refs.wrapper,{
+      click:true,
+      probeType:this.probeType,
+      pullUpLoad: this.pullUpLoad
+    })
+    this.scroll.on('scroll',(position)=>{
+      this.$emit('scroll',position)
+    })
+
+    this.scroll.on('pullingUp',()=>{
+      this.$emit('pullingUp')
+    })
+
+
+
+    this.scroll.scrollTo(0,0)
+  },
+  methods:{
+    scrollTo(x,y,time=3000){
+      this.scroll && this.scroll.scrollTo(x,y,time)
+    },
+    finishPullUp(){
+      this.scroll && this.scroll.finishPullUp()
+    },
+    refresh(){
+      this.scroll && this.scroll.refresh()
+    },
+    getScrolly(){
+      return this.scroll ? this.scroll.y : 0
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/common/navbar/NavBar.vue b/src/components/common/navbar/NavBar.vue
new file mode 100644
index 00000000..48e740f9
--- /dev/null
+++ b/src/components/common/navbar/NavBar.vue
@@ -0,0 +1,29 @@
+<template>
+<div class="nav-bar">
+  <div class="left"><slot name="left"></slot></div>
+  <div class="center"><slot name="center"></slot></div>
+  <div class="right"><slot name="right"></slot></div>
+</div>
+</template>
+
+<script>
+export default {
+name: "NavBar"
+}
+</script>
+
+<style scoped>
+.nav-bar{
+  display: flex;
+  line-height: 44px;
+  height: 44px;
+  text-align: center;
+  box-shadow: 0 1px 1px rgba(100,100,100,.1);
+}
+.left,.right{
+  width:60px;
+}
+.center{
+  flex:1;
+}
+</style>
diff --git a/src/components/common/swiper/Swiper.vue b/src/components/common/swiper/Swiper.vue
new file mode 100644
index 00000000..ef2142b3
--- /dev/null
+++ b/src/components/common/swiper/Swiper.vue
@@ -0,0 +1,371 @@
+<template>
+    <div id="hy-swiper">
+      <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
+        <slot></slot>
+      </div>
+      <slot name="indicator">
+      </slot>
+      <div class="indicator">
+        <slot name="indicator" v-if="showIndicator && slideCount>1">
+          <div v-for="(item, index) in slideCount" class="indi-item" :class="{active: index === currentIndex-1}" :key="index"></div>
+        </slot>
+      </div>
+    </div>
+</template>
+
+<script>
+	export default {
+		name: "Swiper",
+    props: {
+      interval: {
+		    type: Number,
+        default: 3000
+      },
+      animDuration: {
+		    type: Number,
+        default: 300
+      },
+      moveRatio: {
+        type: Number,
+        default: 0.25
+      },
+      showIndicator: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data: function () {
+		  return {
+        slideCount: 0, // 元素个数
+        totalWidth: 0, // swiper的宽度
+        swiperStyle: {}, // swiper样式
+        currentIndex: 1, // 当前的index
+        scrolling: false, // 是否正在滚动
+      }
+    },
+    mounted: function () {
+      // 1.操作DOM, 在前后添加Slide
+      setTimeout(() => {
+        this.handleDom();
+        // 2.开启定时器
+        this.startTimer();
+      }, 500)
+    },
+    methods: {
+		  /**
+       * 定时器操作
+       */
+      startTimer: function () {
+		    this.playTimer = window.setInterval(() => {
+		      this.currentIndex++;
+		      this.scrollContent(-this.currentIndex * this.totalWidth);
+        }, this.interval)
+      },
+      stopTimer: function () {
+        window.clearInterval(this.playTimer);
+      },
+
+      /**
+       * 滚动到正确的位置
+       */
+      scrollContent: function (currentPosition) {
+        // 0.设置正在滚动
+        this.scrolling = true;
+
+        // 1.开始滚动动画
+        this.swiperStyle.transition ='transform '+ this.animDuration + 'ms';
+        this.setTransform(currentPosition);
+
+        // 2.判断滚动到的位置
+        this.checkPosition();
+
+        // 4.滚动完成
+        this.scrolling = false
+      },
+
+      /**
+       * 校验正确的位置
+       */
+      checkPosition: function () {
+        window.setTimeout(() => {
+          // 1.校验正确的位置
+          this.swiperStyle.transition = '0ms';
+          if (this.currentIndex >= this.slideCount + 1) {
+            this.currentIndex = 1;
+            this.setTransform(-this.currentIndex * this.totalWidth);
+          } else if (this.currentIndex <= 0) {
+            this.currentIndex = this.slideCount;
+            this.setTransform(-this.currentIndex * this.totalWidth);
+          }
+
+          // 2.结束移动后的回调
+          this.$emit('transitionEnd', this.currentIndex-1);
+        }, this.animDuration)
+      },
+
+      /**
+       * 设置滚动的位置
+       */
+      setTransform: function (position) {
+        this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`;
+        this.swiperStyle['-webkit-transform'] = `translate3d(${position}px), 0, 0`;
+        this.swiperStyle['-ms-transform'] = `translate3d(${position}px), 0, 0`;
+      },
+
+      /**
+       * 操作DOM, 在DOM前后添加Slide
+       */
+		  handleDom: function () {
+        // 1.获取要操作的元素
+        let swiperEl = document.querySelector('.swiper');
+        let slidesEls = swiperEl.getElementsByClassName('slide');
+        // 2.保存个数
+        this.slideCount = slidesEls.length;
+
+        // 3.如果大于1个, 那么在前后分别添加一个slide
+        if (this.slideCount > 1) {
+          let cloneFirst = slidesEls[0].cloneNode(true);
+          let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true);
+          swiperEl.insertBefore(cloneLast, slidesEls[0]);
+          swiperEl.appendChild(cloneFirst);
+          this.totalWidth = swiperEl.offsetWidth;
+          this.swiperStyle = swiperEl.style;
+        }
+
+        // 4.让swiper元素, 显示第一个(目前是显示前面添加的最后一个元素)
+        this.setTransform(-this.totalWidth);
+      },
+
+      /**
+       * 拖动事件的处理
+       */
+      touchStart: function (e) {
+        // 1.如果正在滚动, 不可以拖动
+        if (this.scrolling) return;
+
+        // 2.停止定时器
+        this.stopTimer();
+
+        // 3.保存开始滚动的位置
+        this.startX = e.touches[0].pageX;
+      },
+
+      touchMove: function (e) {
+        // 1.计算出用户拖动的距离
+        this.currentX = e.touches[0].pageX;
+        this.distance = this.currentX - this.startX;
+        let currentPosition = -this.currentIndex * this.totalWidth;
+        let moveDistance = this.distance + currentPosition;
+
+        // 2.设置当前的位置
+        this.setTransform(moveDistance);
+      },
+
+      touchEnd: function (e) {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        // 1.获取移动的距离
+        let currentMove = Math.abs(this.distance);
+
+        // 2.判断最终的距离
+        if (this.distance === 0) {
+          return
+        } else if (this.distance > 0 && currentMove > this.totalWidth * this.moveRatio) { // 右边移动超过0.5
+          this.currentIndex--
+        } else if (this.distance < 0 && currentMove > this.totalWidth * this.moveRatio) { // 向左移动超过0.5
+          this.currentIndex++
+        }
+
+        // 3.移动到正确的位置
+        this.scrollContent(-this.currentIndex * this.totalWidth);
+
+        // 4.移动完成后重新开启定时器
+        this.startTimer();
+      },
+
+      /**
+       * 控制上一个, 下一个
+       */
+      previous: function () {
+        this.changeItem(-1);
+      },
+
+      next: function () {
+        this.changeItem(1);
+      },
+
+      changeItem: function (num) {
+        // 1.移除定时器
+        this.stopTimer();
+
+        // 2.修改index和位置
+        this.currentIndex += num;
+        this.scrollContent(-this.currentIndex * this.totalWidth);
+
+        // 3.添加定时器
+        this.startTimer();
+      }
+    }
+	}
+</script>
+
+<style scoped>
+  #hy-swiper {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .swiper {
+    display: flex;
+  }
+
+  .indicator {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    width: 100%;
+    bottom: 8px;
+  }
+
+  .indi-item {
+    box-sizing: border-box;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background-color: #fff;
+    line-height: 8px;
+    text-align: center;
+    font-size: 12px;
+    margin: 0 5px;
+  }
+
+  .indi-item.active {
+    background-color: rgba(212,62,46,1.0);
+  }
+</style>
diff --git a/src/components/common/swiper/SwiperItem.vue b/src/components/common/swiper/SwiperItem.vue
new file mode 100644
index 00000000..5ad3e73e
--- /dev/null
+++ b/src/components/common/swiper/SwiperItem.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="slide">
+      <slot></slot>
+    </div>
+</template>
+
+<script>
+	export default {
+		name: "Slide"
+	}
+</script>
+
+<style scoped>
+  .slide {
+    width: 100%;
+    flex-shrink: 0;
+  }
+
+  .slide img {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/common/swiper/index.js b/src/components/common/swiper/index.js
new file mode 100644
index 00000000..5eec1951
--- /dev/null
+++ b/src/components/common/swiper/index.js
@@ -0,0 +1,6 @@
+import Swiper from './Swiper'
+import SwiperItem from './SwiperItem'
+
+export {
+  Swiper, SwiperItem
+}
diff --git a/src/components/common/tabbar/TabBar.vue b/src/components/common/tabbar/TabBar.vue
new file mode 100644
index 00000000..b1a700fd
--- /dev/null
+++ b/src/components/common/tabbar/TabBar.vue
@@ -0,0 +1,24 @@
+<template>
+  <div id="tab-bar">
+   <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TabBar"
+}
+</script>
+
+<style scoped>
+#tab-bar{
+  display: flex;
+  background-color: #f6f6f6;
+
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom:0;
+  box-shadow: 0 -3px 1px rgba(100,100,100,.1);
+}
+</style>
diff --git a/src/components/common/tabbar/TabBarItem.vue b/src/components/common/tabbar/TabBarItem.vue
new file mode 100644
index 00000000..b1cd7f6c
--- /dev/null
+++ b/src/components/common/tabbar/TabBarItem.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="tab-bar-item" @click="itemClick">
+    <div  v-if="!isActive"><slot name="item-icon"></slot></div>
+    <div v-else><slot name="item-icon-active"></slot></div>
+    <div :style="activeStyle"><slot name="item-text"></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TabBarItem",
+  props:{
+    path:String,
+    activeColor:{
+      type:String,
+      default:'red'
+    }
+  },
+  data(){
+    return{
+      // isActive:true
+    }
+  },
+  computed:{
+    isActive(){
+      return this.$route.path.indexOf(this.path)!==-1
+    },
+    activeStyle(){
+      return this.isActive ? {color:this.activeColor} : {}
+    }
+  },
+  methods:{
+    itemClick(){
+      this.$router.replace(this.path)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tab-bar-item{
+  flex:1;
+  text-align: center;
+  height: 49px;
+}
+.tab-bar-item img{
+  width:24px;
+  height:24px;
+  margin-top: 3px;
+  vertical-align: middle;
+  margin-bottom: 2px;
+}
+</style>
diff --git a/src/components/content/backTop/backTop.vue b/src/components/content/backTop/backTop.vue
new file mode 100644
index 00000000..9e87c395
--- /dev/null
+++ b/src/components/content/backTop/backTop.vue
@@ -0,0 +1,23 @@
+<template>
+<div class="back-Top" >
+  <img src="@/assets/img/common/top.png" alt="">
+</div>
+</template>
+
+<script>
+export default {
+  name: "backTop",
+}
+</script>
+
+<style scoped>
+.back-Top{
+  position: fixed;
+  right: 8px;
+  bottom: 55px;
+}
+.back-Top img{
+  width: 48px;
+  height: 48px;
+}
+</style>
diff --git a/src/components/content/goods/GoodsList.vue b/src/components/content/goods/GoodsList.vue
new file mode 100644
index 00000000..0e79cea0
--- /dev/null
+++ b/src/components/content/goods/GoodsList.vue
@@ -0,0 +1,32 @@
+<template>
+<div class="goods">
+  <GoodsListItem v-for="(item, index) in goods" :key="index" :goodsItem="item"/>
+</div>
+</template>
+
+<script>
+import GoodsListItem from "@/components/content/goods/GoodsListItem";
+
+export default {
+name: "GoodsList",
+  components:{
+  GoodsListItem
+  },
+  props:{
+  goods:{
+    type:Array,
+    default(){
+      return []
+    }
+  }
+  }
+}
+</script>
+
+<style scoped>
+.goods{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+</style>
diff --git a/src/components/content/goods/GoodsListItem.vue b/src/components/content/goods/GoodsListItem.vue
new file mode 100644
index 00000000..27e6825d
--- /dev/null
+++ b/src/components/content/goods/GoodsListItem.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="goods-items" @click="itemClick">
+      <img :src="showImage"  alt="" @load="imageLoad">
+      <div class="goods-info">
+        <p>{{goodsItem.title}}</p>
+        <span class="price">{{goodsItem.price}}</span>
+        <span class="collect">{{goodsItem.cfav}}</span>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+name: "GoodsListItem",
+  props:{
+    goodsItem:{
+      type:Object,
+      default(){
+        return {}
+      }
+    }
+  },
+  methods:{
+  imageLoad(){
+    this.$bus.$emit('itemImageLoad')
+  },
+    itemClick(){
+      this.$router.push('/detail/'+this.goodsItem.iid)
+    }
+  },
+  computed:{
+  showImage(){
+    return this.goodsItem.image || this.goodsItem.show.img
+  }
+  }
+}
+</script>
+
+<style scoped>
+.goods-items {
+  padding-bottom: 40px;
+  position: relative;
+
+  width:48%;
+}
+.goods-items img {
+  width: 100%;
+}
+
+.goods-info {
+  font-size: 12px;
+  position: absolute;
+  bottom: 5px;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  text-align: center;
+}
+
+.goods-info p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 3px;
+}
+
+.goods-info .price {
+  color: var(--color-high-text);
+  margin-right: 20px;
+}
+
+.goods-info .collect {
+  position: relative;
+}
+
+.goods-info .collect::before {
+  content: '';
+  position: absolute;
+  left: -15px;
+  top: 0;
+  width: 14px;
+  height: 14px;
+  background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
+}
+</style>
diff --git a/src/components/content/mainTabbar/MainTabBar.vue b/src/components/content/mainTabbar/MainTabBar.vue
new file mode 100644
index 00000000..bb96f3ac
--- /dev/null
+++ b/src/components/content/mainTabbar/MainTabBar.vue
@@ -0,0 +1,42 @@
+<template>
+  <tab-bar>
+    <tab-bar-item path="/home" activeColor="red">
+      <img slot="item-icon"    src="~assets/img/tabbar/home.svg" alt="">
+      <img slot="item-icon-active"    src="~assets/img/tabbar/home_active.svg" alt="">
+      <div slot="item-text">首页</div>
+    </tab-bar-item>
+    <tab-bar-item path="/category" activeColor="red">
+      <img slot="item-icon"    src="~assets/img/tabbar/category.svg" alt="">
+      <img slot="item-icon-active"    src="~assets/img/tabbar/category_active.svg" alt="">
+      <div slot="item-text">分类</div>
+    </tab-bar-item>
+    <tab-bar-item path="/cart" activeColor="red">
+      <img slot="item-icon"    src="~assets/img/tabbar/cart.svg" alt="">
+      <img slot="item-icon-active"    src="~assets/img/tabbar/cart_active.svg" alt="">
+      <div slot="item-text">购物车</div>
+    </tab-bar-item>
+    <tab-bar-item path="/profile" activeColor="red">
+      <img slot="item-icon"    src="~assets/img/tabbar/profile.svg" alt="">
+      <img slot="item-icon-active"    src="~assets/img/tabbar/profile_active.svg" alt="">
+      <div slot="item-text">我的</div>
+    </tab-bar-item>
+  </tab-bar>
+</template>
+
+<script>
+import TabBar from "@/components/common/tabbar/TabBar";
+import TabBarItem from "@/components/common/tabbar/TabBarItem";
+
+export default {
+
+name: "MainTabBar",
+  components:{
+    TabBar,
+    TabBarItem
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/content/tabControl/TabControl.vue b/src/components/content/tabControl/TabControl.vue
new file mode 100644
index 00000000..33273ef7
--- /dev/null
+++ b/src/components/content/tabControl/TabControl.vue
@@ -0,0 +1,55 @@
+<template>
+<div class="tab-control">
+  <div v-for="(item,index) in titles"
+       class="tab-control-item" :class="{active:index===currentIndex}" @click="itemclick(index)">
+    <span>{{item}}</span>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "TabControl",
+  props:{
+    titles:{
+      type:Array,
+      default(){
+        return []
+      }
+    }
+  },
+  data(){
+    return{
+      currentIndex:0
+    }
+  },
+  methods:{
+    itemclick(index){
+      this.currentIndex=index;
+      this.$emit('tabClick',index);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tab-control{
+  display: flex;
+  text-align: center;
+  font-size: 15px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #fff;
+  z-index: 9;
+}
+.tab-control-item{
+  flex:1;
+}
+.tab-control-item span{
+  padding: 5px;
+}
+
+.active span{
+  border-bottom: 3px solid var(--color-tint);
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 63eb05f7..dc2ca82b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
 
 Vue.config.productionTip = false
+Vue.prototype.$bus = new Vue()
 
 new Vue({
   render: h => h(App),
+  router,
 }).$mount('#app')
diff --git a/src/network/detail.js b/src/network/detail.js
new file mode 100644
index 00000000..1cf2ae08
--- /dev/null
+++ b/src/network/detail.js
@@ -0,0 +1,50 @@
+import {request} from "@/network/request";
+
+export function getDetail(iid){
+  return request({
+    url:'/detail',
+    params:{
+      iid
+    }
+  })
+}
+
+export function getRecommend(){
+  return request({
+    url:'/recommend'
+  })
+}
+
+export class Goods{
+  constructor(itemInfo, columns, services) {
+    this.title = itemInfo.title;
+    this.desc = itemInfo.desc;
+    this.newPrice = itemInfo.price;
+    this.oldPrice = itemInfo.oldPrice;
+    this.discount = itemInfo.discountDesc;
+    this.columns = columns;
+    this.services = services;
+    this.nowPrice = itemInfo.highNowPrice;
+  }
+}
+
+export class Shop {
+  constructor(shopInfo) {
+    this.logo = shopInfo.shopLogo;
+    this.name = shopInfo.name;
+    this.fans = shopInfo.cFans;
+    this.sells = shopInfo.cSells;
+    this.score = shopInfo.score;
+    this.goodsCount = shopInfo.cGoods
+  }
+}
+
+export class GoodsParam {
+  constructor(info, rule) {
+    // 注: images可能没有值(某些商品有值, 某些没有值)
+    this.image = info.images ? info.images[0] : '';
+    this.infos = info.set;
+    this.sizes = rule.tables;
+  }
+}
+
diff --git a/src/network/home.js b/src/network/home.js
new file mode 100644
index 00000000..96b51eb4
--- /dev/null
+++ b/src/network/home.js
@@ -0,0 +1,18 @@
+import {request} from "@/network/request";
+
+export function getHomeMutidata(){
+  return request({
+    url:'/home/multidata'
+  })
+}
+export function getHomeGoods(type,page){
+  return request({
+    url:'/home/data',
+    params:{
+      type,
+      page
+    }
+  })
+}
+
+
diff --git a/src/network/request.js b/src/network/request.js
new file mode 100644
index 00000000..3548bd08
--- /dev/null
+++ b/src/network/request.js
@@ -0,0 +1,26 @@
+import axios from 'axios'
+
+export function request(config){
+  const  instance =axios.create({
+    baseURL:'http://152.136.185.210:8000/api/w6',
+    timeout:5000
+  })
+
+  // //拦截
+  // instance.interceptors.request.use(config=>{
+  //     console.log(config);
+  //     return config
+  //   },
+  //   err=>{
+  //     // console.log(err)
+  //   })
+  //
+  // instance.interceptors.request.use(res=>{
+  //   return res.get
+  // },err=>{
+  //   console.log(err);
+  // })
+
+  return instance(config)
+}
+
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 00000000..41c7db47
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+const Home=()=>import('../views/home/Home')
+const Category=()=>import('../views/category/Category')
+const Cart=()=>import('../views/cart/Cart')
+const Profile=()=>import('../views/profile/Profile')
+const Detail=()=>import('../views/detail/Detail')
+Vue.use(Router)
+
+const routes=[
+  {
+    path:'',
+    redirect:'/home'
+  },
+  {
+    path:'/home',
+    component:Home
+  },
+  {
+    path:'/category',
+    component:Category
+  },
+  {
+    path:'/cart',
+    component:Cart
+  },
+  {
+    path: '/profile',
+    component: Profile
+  },
+  {
+    path: '/detail/:iid',
+    component: Detail
+  }
+]
+const router =new Router({
+  routes,
+  mode:'history'
+})
+export default router
diff --git a/src/views/cart/Cart.vue b/src/views/cart/Cart.vue
new file mode 100644
index 00000000..5c66266d
--- /dev/null
+++ b/src/views/cart/Cart.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h2>购物车</h2>
+  </div>
+</template>
+
+<script>
+export default {
+name: "Home"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/category/Category.vue b/src/views/category/Category.vue
new file mode 100644
index 00000000..dd0ba701
--- /dev/null
+++ b/src/views/category/Category.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="wrapper" ref="aaaa">
+    <ul >
+      <button @click="btnClick">按钮</button>
+      <li>分类列表1</li>
+      <li>分类列表2</li>
+      <li>分类列表3</li>
+      <li>分类列表4</li>
+      <li>分类列表5</li>
+      <li>分类列表6</li>
+      <li>分类列表7</li>
+      <li>分类列表8</li>
+      <li>分类列表9</li>
+      <li>分类列表10</li>
+      <li>分类列表11</li>
+      <li>分类列表12</li>
+      <li>分类列表13</li>
+      <li>分类列表14</li>
+      <li>分类列表15</li>
+      <li>分类列表16</li>
+      <li>分类列表17</li>
+      <li>分类列表18</li>
+      <li>分类列表19</li>
+      <li>分类列表20</li>
+      <li>分类列表21</li>
+      <li>分类列表22</li>
+      <li>分类列表23</li>
+      <li>分类列表24</li>
+      <li>分类列表25</li>
+      <li>分类列表26</li>
+      <li>分类列表27</li>
+      <li>分类列表28</li>
+      <li>分类列表29</li>
+      <li>分类列表30</li>
+      <li>分类列表31</li>
+      <li>分类列表32</li>
+      <li>分类列表33</li>
+      <li>分类列表34</li>
+      <li>分类列表35</li>
+      <li>分类列表36</li>
+      <li>分类列表37</li>
+      <li>分类列表38</li>
+      <li>分类列表39</li>
+      <li>分类列表40</li>
+      <li>分类列表41</li>
+      <li>分类列表42</li>
+      <li>分类列表43</li>
+      <li>分类列表44</li>
+      <li>分类列表45</li>
+      <li>分类列表46</li>
+      <li>分类列表47</li>
+      <li>分类列表48</li>
+      <li>分类列表49</li>
+      <li>分类列表50</li>
+      <li>分类列表51</li>
+      <li>分类列表52</li>
+      <li>分类列表53</li>
+      <li>分类列表54</li>
+      <li>分类列表55</li>
+      <li>分类列表56</li>
+      <li>分类列表57</li>
+      <li>分类列表58</li>
+      <li>分类列表59</li>
+      <li>分类列表60</li>
+      <li>分类列表61</li>
+      <li>分类列表62</li>
+      <li>分类列表63</li>
+      <li>分类列表64</li>
+      <li>分类列表65</li>
+      <li>分类列表66</li>
+      <li>分类列表67</li>
+      <li>分类列表68</li>
+      <li>分类列表69</li>
+      <li>分类列表70</li>
+      <li>分类列表71</li>
+      <li>分类列表72</li>
+      <li>分类列表73</li>
+      <li>分类列表74</li>
+      <li>分类列表75</li>
+      <li>分类列表76</li>
+      <li>分类列表77</li>
+      <li>分类列表78</li>
+      <li>分类列表79</li>
+      <li>分类列表80</li>
+      <li>分类列表81</li>
+      <li>分类列表82</li>
+      <li>分类列表83</li>
+      <li>分类列表84</li>
+      <li>分类列表85</li>
+      <li>分类列表86</li>
+      <li>分类列表87</li>
+      <li>分类列表88</li>
+      <li>分类列表89</li>
+      <li>分类列表90</li>
+      <li>分类列表91</li>
+      <li>分类列表92</li>
+      <li>分类列表93</li>
+      <li>分类列表94</li>
+      <li>分类列表95</li>
+      <li>分类列表96</li>
+      <li>分类列表97</li>
+      <li>分类列表98</li>
+      <li>分类列表99</li>
+      <li>分类列表100</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+ import BScroll from 'better-scroll'
+
+export default {
+  name: "Category",
+  data(){
+    return {
+      scroll:null
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.scroll=new BScroll(document.querySelector('.wrapper'),{
+      probeType:3,
+      pullUpLoad:true,
+    })
+
+    this.scroll.on('scroll',(position)=>{
+      // console.log(position);
+    })
+
+    this.scroll.on('pullingUp',()=>{
+      console.log('上拉加载更多');
+    })
+  },
+  methods:{
+    btnClick(){
+      console.log('ctnClick');
+    }
+  }
+}
+</script>
+
+<style scoped>
+.wrapper{
+  height: 150px;
+  background-color: red;
+
+  /*overflow: hidden;*/
+  overflow-y:scroll;
+}
+
+</style>
diff --git a/src/views/detail/Detail.vue b/src/views/detail/Detail.vue
new file mode 100644
index 00000000..ad0ff5e9
--- /dev/null
+++ b/src/views/detail/Detail.vue
@@ -0,0 +1,168 @@
+<template>
+  <div id="detail" >
+      <DetailNewBar class="detail-nav" @titleClick="titleClick" ref="nav"/>
+      <scroll class="content"
+              ref="scroll"
+              @scroll="totalScroll"
+              :probe-type="3" >
+      <DetailSwiper :top-images="topImages"/>
+      <DetailBaseInfo :goods="goods"/>
+      <DetailShopInfo :shop="shop" />
+      <DetailGoodsInfo :detail-info="detailInfo" @detailImageload="detailImageload"/>
+      <DetailParamInfo ref="params" :param-info="paramInfo"/>
+      <DetailCommentInfo ref="comment" :comment-info="commentInfo"/>
+      <GoodsList ref="recommend" :goods="recommends"></GoodsList>
+    </scroll>
+    <back-top @click.native="backClick" v-show="isShowBackTop"/>
+    <detail-bottom-bar @addToCart="addToCart"/>
+  </div>
+</template>
+
+<script>
+import DetailNewBar from "@/views/detail/childComps/DetailNewBar";
+import DetailSwiper from "@/views/detail/childComps/DetailSwiper";
+import DetailBaseInfo from "@/views/detail/childComps/DetailBaseInfo";
+import DetailShopInfo from "@/views/detail/childComps/DetailShopInfo";
+import DetailGoodsInfo from "@/views/detail/childComps/DetailGoodsInfo";
+import DetailParamInfo from "@/views/detail/childComps/DetailParamInfo";
+import DetailCommentInfo from "@/views/detail/childComps/DetailCommentInfo";
+import DetailBottomBar from "@/views/detail/childComps/DetailBottomBar";
+
+import backTop from "@/components/content/backTop/backTop";
+import GoodsList from "@/components/content/goods/GoodsList";
+import scroll from "@/components/common/Scroll/Scroll";
+
+import {itemListenerMixin,backTopMixin} from "@/common/mixin";
+import {debounce} from "@/common/utils";
+
+import {getDetail, Goods, Shop, GoodsParam, getRecommend} from "@/network/detail";
+
+
+export default {
+  name: "Detail",
+  components: {
+    DetailNewBar,
+    DetailSwiper,
+    DetailBaseInfo,
+    DetailShopInfo,
+    DetailGoodsInfo,
+    DetailParamInfo,
+    DetailCommentInfo,
+    DetailBottomBar,
+
+    backTop,
+    GoodsList,
+    scroll,
+
+  },
+  mixins: [itemListenerMixin,backTopMixin],
+  data() {
+    return {
+      iid: null,
+      topImages: [],
+      goods: {},
+      shop: {},
+      detailInfo: {},
+      paramInfo: {},
+      commentInfo: {},
+      recommends: [],
+      themeTopYs: [],
+      getThemeTopY: null,
+      currentIndex:0,
+    }
+  },
+  created() {
+    //home主页传入iid
+    this.iid = this.$route.params.iid
+    //数据的展示
+    getDetail(this.iid).then(res => {
+      const data = res.data.result
+      //轮播图的切换
+      this.topImages = data.itemInfo.topImages
+      //商品介绍
+      this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
+      //店铺名的展示
+      this.shop = new Shop(data.shopInfo)
+      //穿着展示
+      this.detailInfo = data.detailInfo
+      //商品推荐的展示
+      this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
+
+      if (data.rate.list) {
+        this.commentInfo = data.rate.list[0];
+      }
+      //导航栏点击切换
+      this.getThemeTopY = debounce(() => {
+        this.themeTopYs = []
+        this.themeTopYs.push(0);
+        this.themeTopYs.push(this.$refs.params.$el.offsetTop)
+        this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
+        this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
+        this.themeTopYs.push(Number.MAX_VALUE)
+      }, 500)
+
+    })
+    //获取评论的数据
+    getRecommend().then(res => {
+      this.recommends = res.data.data.list
+    })
+  },
+  mounted() {
+  },
+  destroyed() {
+    //无keep-live时activated无法使用
+    this.$bus.$off('itemImgLoad', this.itemImgListener)
+  },
+  methods: {
+    //上拉图片加载
+    detailImageload() {
+      this.itemImgListener()
+      this.getThemeTopY()
+    },
+    //导航栏点击切换
+    titleClick(index) {
+      this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 1000);
+    },
+    //位置移动时导航栏跟着移动
+    positionScroll(position) {
+      const positionY = -position.y
+      let length = this.themeTopYs.length
+      for (let i = 0; i < length-1; i++) {
+        if(this.currentIndex!==i&&(positionY>=this.themeTopYs[i]&&positionY<this.themeTopYs[i+1]))
+        {
+          this .currentIndex=i;
+          this.$refs.nav.currentIndex=this.currentIndex
+
+        }
+      }
+    },
+    //mixin混入回退顶部的按钮
+    totalScroll(position){
+      this.positionScroll(position)
+      this.contentScoll(position)
+    },
+    //加入购物车
+    addToCart(){
+      console.log('----');
+    }
+  }
+}
+</script>
+
+<style scoped>
+#detail{
+  position: relative;
+  z-index: 9;
+  background-color: #ffffff;
+  height: 100vh;
+}
+.detail-nav{
+  position: relative;
+  z-index: 9;
+  background-color: #ffffff;
+}
+.content{
+  height: calc(100% - 96px);
+  position: relative;
+}
+</style>
diff --git a/src/views/detail/childComps/DetailBaseInfo.vue b/src/views/detail/childComps/DetailBaseInfo.vue
new file mode 100644
index 00000000..427dace4
--- /dev/null
+++ b/src/views/detail/childComps/DetailBaseInfo.vue
@@ -0,0 +1,103 @@
+<template>
+  <div v-if="Object.keys(goods).length !== 0" class="base-info">
+    <div class="info-title">{{goods.title}}</div>
+    <div class="info-price">
+      <span class="n-price">{{goods.newPrice}}</span>
+      <span class="o-price">{{goods.oldPrice}}</span>
+      <span class="discount">{{goods.discount}}</span>
+    </div>
+    <div class="info-other">
+      <span>{{goods.columns[0]}}</span>
+      <span>{{goods.columns[1]}}</span>
+      <span>{{goods.services[goods.services.length-1].name}}</span>
+    </div>
+    <div class="info-service">
+      <span class="info-service-item" v-for="index in goods.services.length-1" :key="index">
+        <img :src="goods.services[index-1].icon">
+        <span>{{goods.services[index-1].name}}</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+	export default {
+		name: "DetailBaseInfo",
+    props: {
+		  goods: {
+		    type: Object,
+        default(){
+		      return []
+        }
+      }
+    }
+	}
+</script>
+
+<style scoped>
+  .base-info {
+    margin-top: 15px;
+    padding: 0 8px;
+    color: #999;
+    border-bottom: 5px solid #f2f5f8;
+  }
+
+  .info-title {
+    color: #222
+  }
+
+  .info-price {
+    margin-top: 10px;
+  }
+
+  .info-price .n-price {
+    font-size: 24px;
+    color: var(--color-high-text);
+  }
+
+  .info-price .o-price {
+    font-size: 13px;
+    margin-left: 5px;
+    text-decoration: line-through;
+  }
+
+  .info-price .discount {
+    font-size: 12px;
+    padding: 2px 5px;
+    color: #fff;
+    background-color: var(--color-high-text);
+    border-radius: 8px;
+    margin-left: 5px;
+
+    /*让元素上浮一些: 使用相对定位即可*/
+    position: relative;
+    top: -8px;
+  }
+
+  .info-other {
+    margin-top: 15px;
+    line-height: 30px;
+    display: flex;
+    font-size: 13px;
+    border-bottom: 1px solid rgba(100,100,100,.1);
+    justify-content: space-between;
+  }
+
+  .info-service {
+    display: flex;
+    justify-content: space-between;
+    line-height: 60px;
+  }
+
+  .info-service-item img {
+    width: 10px;
+    height: 10px;
+    position: relative;
+    top: 2px;
+  }
+
+  .info-service-item span {
+    font-size: 13px;
+    color: #333;
+  }
+</style>
diff --git a/src/views/detail/childComps/DetailBottomBar.vue b/src/views/detail/childComps/DetailBottomBar.vue
new file mode 100644
index 00000000..bb74ab50
--- /dev/null
+++ b/src/views/detail/childComps/DetailBottomBar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="bottom-bar">
+    <div class="bar-item bar-left">
+      <div>
+        <i class="icon service"></i>
+        <span class="text">客服</span>
+      </div>
+      <div>
+        <i class="icon shop"></i>
+        <span class="text">店铺</span>
+      </div>
+      <div>
+        <i class="icon select"></i>
+        <span class="text">收藏</span>
+      </div>
+    </div>
+    <div class="bar-item bar-right">
+      <div class="cart" @click="addToCart">加入购物车</div>
+      <div class="buy">购买</div>
+    </div>
+  </div>
+</template>
+
+<script>
+	export default {
+		name: "DetailBottomBar",
+    methods: {
+      addToCart() {
+        this.$emit('addToCart')
+      }
+    }
+	}
+</script>
+
+<style scoped>
+  .bottom-bar {
+    height: 58px;
+    position: fixed;
+    background-color: #fff;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    display: flex;
+    text-align: center;
+  }
+
+  .bar-item {
+    flex: 1;
+    display: flex;
+  }
+
+  .bar-item>div {
+    flex: 1;
+  }
+
+  .bar-left .text {
+    font-size: 13px;
+  }
+
+  .bar-left .icon {
+    display: block;
+    width: 22px;
+    height: 22px;
+    margin: 10px auto 3px;
+    background: url("~assets/img/detail/detail_bottom.png") 0 0/100%;
+  }
+
+  .bar-left .service {
+    background-position:0 -54px;
+  }
+
+  .bar-left .shop {
+    background-position:0 -98px;
+  }
+
+  .bar-right {
+    font-size: 15px;
+    color: #fff;
+    line-height: 58px;
+  }
+
+  .bar-right .cart {
+    background-color: #ffe817;
+    color: #333;
+  }
+
+  .bar-right .buy {
+    background-color: #f69;
+  }
+</style>
diff --git a/src/views/detail/childComps/DetailCommentInfo.vue b/src/views/detail/childComps/DetailCommentInfo.vue
new file mode 100644
index 00000000..b543bfe8
--- /dev/null
+++ b/src/views/detail/childComps/DetailCommentInfo.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div v-if="Object.keys(commentInfo).length !== 0" class="comment-info">
+      <div class="info-header">
+        <div class="header-title">用户评价</div>
+        <div class="header-more">
+          更多
+          <i class="arrow-right"></i>
+        </div>
+      </div>
+      <div class="info-user">
+        <img :src="commentInfo.user.avatar" alt="">
+        <span>{{commentInfo.user.uname}}</span>
+      </div>
+      <div class="info-detail">
+        <p>{{commentInfo.content}}</p>
+        <div class="info-other">
+          <span class="date">{{commentInfo.created | showDate}}</span>
+          <span>{{commentInfo.style}}</span>
+        </div>
+        <div class="info-imgs">
+          <img :src="item" v-for="(item, index) in commentInfo.images">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {formatDate} from "@/common/utils";
+
+  export default {
+		name: "DetailCommentInfo",
+    props: {
+		  commentInfo: {
+		    type: Object,
+      }
+    },
+    filters: {
+		  showDate: function (value) {
+        let date = new Date(value*1000);
+        return formatDate(date, 'yyyy-MM-dd')
+      }
+    }
+	}
+</script>
+
+<style scoped>
+  .comment-info {
+    padding: 5px 12px;
+    color: #333;
+    border-bottom: 5px solid #f2f5f8;
+  }
+
+  .info-header {
+    height: 50px;
+    line-height: 50px;
+    border-bottom: 1px solid rgba(0,0,0,.1);
+  }
+
+  .header-title {
+    float: left;
+    font-size: 15px;
+  }
+
+  .header-more {
+    float: right;
+    margin-right: 10px;
+    font-size: 13px;
+  }
+
+  .info-user {
+    padding: 10px 0 5px;
+  }
+
+  .info-user img {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+  }
+
+  .info-user span {
+    position: relative;
+    font-size: 15px;
+    top: -15px;
+    margin-left: 10px;
+  }
+
+  .info-detail {
+    padding: 0 5px 15px;
+  }
+
+  .info-detail p {
+    font-size: 14px;
+    color: #777;
+    line-height: 1.5;
+  }
+
+  .info-detail .info-other {
+    font-size: 12px;
+    color: #999;
+    margin-top: 10px;
+  }
+
+  .info-other .date {
+    margin-right: 8px;
+  }
+
+  .info-imgs {
+    margin-top: 10px;
+  }
+
+  .info-imgs img {
+    width: 70px;
+    height: 70px;
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/views/detail/childComps/DetailGoodsInfo.vue b/src/views/detail/childComps/DetailGoodsInfo.vue
new file mode 100644
index 00000000..ea409cac
--- /dev/null
+++ b/src/views/detail/childComps/DetailGoodsInfo.vue
@@ -0,0 +1,90 @@
+<template>
+  <div v-if="Object.keys(detailInfo).length !== 0" class="goods-info" >
+    <div class="info-desc clear-fix">
+      <div class="start">
+      </div>
+      <div class="desc">{{detailInfo.desc}}</div>
+      <div class="end"></div>
+    </div>
+    <div class="info-key">{{detailInfo.detailImage[0].key}}</div>
+    <div class="info-list">
+      <img v-for="(item, index) in detailInfo.detailImage[0].list" :key="index" :src="item" alt="" @load="imgLoad">
+    </div>
+  </div>
+</template>
+
+<script>
+	export default {
+		name: "DetailGoodsInfo",
+    props: {
+      detailInfo: {
+        type: Object
+      }
+    },
+    data(){
+		  return{
+		    rounter:0,
+        imagesLength:0,
+      }
+    },
+    methods: {
+      imgLoad() {
+        this.$emit('detailImageload')
+      }
+    }
+	}
+</script>
+
+<style scoped>
+  .goods-info {
+    padding: 20px 0;
+    border-bottom: 5px solid #f2f5f8;
+  }
+
+  .info-desc {
+    padding: 0 15px;
+  }
+
+  .info-desc .start, .info-desc .end {
+    width: 90px;
+    height: 1px;
+    background-color: #a3a3a5;
+    position: relative;
+  }
+
+  .info-desc .start {
+    float: left;
+  }
+
+  .info-desc .end {
+    float: right;
+  }
+
+  .info-desc .start::before, .info-desc .end::after {
+    content: '';
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    background-color: #333;
+    bottom: 0;
+  }
+
+  .info-desc .end::after {
+    right: 0;
+  }
+
+  .info-desc .desc {
+    padding: 15px 0;
+    font-size: 14px;
+  }
+
+  .info-key {
+    margin: 10px 0 10px 15px;
+    color: #333;
+    font-size: 15px;
+  }
+
+  .info-list img {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/detail/childComps/DetailNewBar.vue b/src/views/detail/childComps/DetailNewBar.vue
new file mode 100644
index 00000000..4150fa05
--- /dev/null
+++ b/src/views/detail/childComps/DetailNewBar.vue
@@ -0,0 +1,56 @@
+<template>
+  <nav-bar>
+    <div slot="left" class="back" @click="backClick">
+      <img src="~assets/img/common/back.svg" alt="">
+    </div>
+    <div slot="center" class="title">
+      <div v-for="(item,index) in titles"
+           class="title-item"
+           :class="{active:index===currentIndex}" @click="titleClick(index)">
+        {{item}}
+      </div>
+    </div>
+  </nav-bar>
+</template>
+
+<script>
+import NavBar from "@/components/common/navbar/NavBar";
+
+export default {
+  name: "DetailNewBar",
+  components: {
+    NavBar
+  },
+  data(){
+    return{
+      titles:['商品','参数','评论','推荐'],
+      currentIndex:0,
+    }
+  },
+  methods:{
+    titleClick(index){
+      this.currentIndex=index;
+      this.$emit('titleClick',index)
+    },
+    backClick(){
+      this.$router.back()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title{
+  display: flex;
+  font-size: 13px;
+}
+.title-item{
+  flex:1;
+}
+.active{
+  color: var(--color-high-text);
+}
+.back img{
+  margin-top: 12px;
+}
+</style>
diff --git a/src/views/detail/childComps/DetailParamInfo.vue b/src/views/detail/childComps/DetailParamInfo.vue
new file mode 100644
index 00000000..d9bf83f8
--- /dev/null
+++ b/src/views/detail/childComps/DetailParamInfo.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="param-info" v-if="Object.keys(paramInfo).length !== 0">
+    <table v-for="(table, index) in paramInfo.sizes"
+           class="info-size" :key="index">
+      <tr v-for="(tr, indey) in table" :key="indey">
+        <td v-for="(td, indez) in tr" :key="indez">{{td}}</td>
+      </tr>
+    </table>
+    <table class="info-param">
+      <tr v-for="(info, index) in paramInfo.infos">
+        <td class="info-param-key">{{info.key}}</td>
+        <td class="param-value">{{info.value}}</td>
+      </tr>
+    </table>
+    <div class="info-img" v-if="paramInfo.image.length !== 0">
+      <img :src="paramInfo.image" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+	export default {
+		name: "DetailParamInfo",
+    props: {
+		  paramInfo: {
+		    type: Object
+      }
+    }
+	}
+</script>
+
+<style scoped>
+  .param-info {
+    padding: 20px 15px;
+    font-size: 14px;
+    border-bottom: 5px solid #f2f5f8;
+  }
+
+  .param-info table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .param-info table tr {
+    height: 42px;
+  }
+
+  .param-info table tr td {
+    border-bottom: 1px solid rgba(100,100,100,.1);
+  }
+
+  .info-param-key {
+    /*当value的数据量比较大的时候, 会挤到key,所以给一个固定的宽度*/
+    width: 95px;
+  }
+
+  .info-param {
+    border-top: 1px solid rgba(0,0,0,.1);
+  }
+
+  .param-value {
+    color: #eb4868
+  }
+
+  .info-img img {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/detail/childComps/DetailShopInfo.vue b/src/views/detail/childComps/DetailShopInfo.vue
new file mode 100644
index 00000000..bd713182
--- /dev/null
+++ b/src/views/detail/childComps/DetailShopInfo.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="shop-info">
+    <div class="shop-top">
+      <img :src="shop.logo">
+      <span class="title">{{shop.name}}</span>
+    </div>
+    <div class="shop-middle">
+      <div class="shop-middle-item shop-middle-left">
+        <div class="info-sells">
+          <div class="sells-count">
+            {{shop.sells | sellCountFilter}}
+          </div>
+          <div class="sells-text">总销量</div>
+        </div>
+        <div class="info-goods">
+          <div class="goods-count">
+            {{shop.goodsCount}}
+          </div>
+          <div class="goods-text">全部宝贝</div>
+        </div>
+      </div>
+      <div class="shop-middle-item shop-middle-right">
+        <table>
+          <tr v-for="(item, index) in shop.score" :key="index">
+            <td>{{item.name}}</td>
+            <td class="score" :class="{'score-better': item.isBetter}">{{item.score}}</td>
+            <td class="better" :class="{'better-more': item.isBetter}"><span>{{item.isBetter ? '高':'低'}}</span></td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="shop-bottom">
+      <div class="enter-shop">进店逛逛</div>
+    </div>
+  </div>
+</template>
+
+<script>
+	export default {
+		name: "DetailShopInfo",
+    props: {
+		  shop: {
+		    type: Object,
+        default(){
+		      return []
+        }
+      }
+    },
+    filters: {
+      sellCountFilter: function (value) {
+        if (value < 10000) return value;
+        return (value/10000).toFixed(1) + '万'
+      }
+    }
+	}
+</script>
+
+<style scoped>
+  .shop-info {
+    padding: 25px 8px;
+    border-bottom: 5px solid #f2f5f8;
+  }
+
+  .shop-top {
+    line-height: 45px;
+    /* 让元素垂直中心对齐 */
+    display: flex;
+    align-items: center;
+  }
+
+  .shop-top img {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    border: 1px solid rgba(0,0,0,.1);
+  }
+
+  .shop-top .title {
+    margin-left: 10px;
+    vertical-align: center;
+  }
+
+  .shop-middle {
+    margin-top: 15px;
+    display: flex;
+    align-items: center;
+  }
+
+  .shop-middle-item {
+    flex: 1;
+  }
+
+  .shop-middle-left {
+    display: flex;
+    justify-content: space-evenly;
+    color: #333;
+    text-align: center;
+    border-right: 1px solid rgba(0,0,0,.1);
+  }
+
+  .sells-count, .goods-count {
+    font-size: 18px;
+  }
+
+  .sells-text, .goods-text {
+    margin-top: 10px;
+    font-size: 12px;
+  }
+
+  .shop-middle-right {
+    font-size: 13px;
+    color: #333;
+  }
+
+  .shop-middle-right table {
+    width: 120px;
+    margin-left: 30px;
+  }
+
+  .shop-middle-right table td {
+    padding: 5px 0;
+  }
+
+  .shop-middle-right .score {
+    color: #5ea732;
+  }
+
+  .shop-middle-right .score-better {
+    color: #f13e3a;
+  }
+
+  .shop-middle-right .better span {
+    background-color: #5ea732;
+    color: #fff;
+    text-align: center;
+  }
+
+  .shop-middle-right .better-more span {
+    background-color: #f13e3a;
+  }
+
+  .shop-bottom {
+    text-align: center;
+    margin-top: 10px;
+  }
+
+  .enter-shop {
+    display: inline-block;
+    font-size: 14px;
+    background-color: #f2f5f8;
+    width: 150px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 10px;
+  }
+</style>
diff --git a/src/views/detail/childComps/DetailSwiper.vue b/src/views/detail/childComps/DetailSwiper.vue
new file mode 100644
index 00000000..80836f00
--- /dev/null
+++ b/src/views/detail/childComps/DetailSwiper.vue
@@ -0,0 +1,35 @@
+<template>
+    <swiper class="swiper-item">
+      <swiper-item  v-for="(item,index) in topImages">
+        <img :src="item"  :key="index" alt="">
+      </swiper-item>
+    </swiper>
+</template>
+
+<script>
+import {Swiper,SwiperItem} from '@/components/common/swiper'
+
+
+export default {
+name: "DetailSwiper",
+  props:{
+  topImages:{
+    type:Array,
+    default(){
+      return []
+    }
+  }
+  },
+  components:{
+  SwiperItem,
+    Swiper,
+  },
+}
+</script>
+
+<style scoped>
+.swiper-item{
+  height: 200px;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/home/Home.vue b/src/views/home/Home.vue
new file mode 100644
index 00000000..62e9bf27
--- /dev/null
+++ b/src/views/home/Home.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="home">
+    <NavBar class="nav-bar"><div slot="center">购物街</div> </NavBar>
+    <TabControl :titles="['流行','新款','精选']"
+                @tabClick="tabClick"
+                ref="tabControl1"
+                class="tab-control"
+                v-show="isTabFixed"></TabControl>
+    <scroll class="content" ref="scroll"
+            :probe-type="3"
+            @scroll="contentScoll"
+            :pull-up-load="true"
+            @pullingUp="loadMore">
+    <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
+    <home-recommend-view :recommends="recommends"></home-recommend-view>
+    <HomefeatureView></HomefeatureView>
+    <TabControl :titles="['流行','新款','精选']"
+                @tabClick="tabClick"
+                ref="tabControl2"
+                class="tab-control"></TabControl>
+    <GoodsList :goods="showGoods"></GoodsList>
+    </scroll>
+    <back-top @click.native="backClick" v-show="isShowBackTop"/>
+  </div>
+</template>
+
+<script>
+import NavBar from "@/components/common/navbar/NavBar";
+import scroll from "@/components/common/Scroll/Scroll";
+import TabControl from "@/components/content/tabControl/TabControl";
+import GoodsList from "@/components/content/goods/GoodsList";
+import GoodsListItem from "@/components/content/goods/GoodsListItem";
+import backTop from "@/components/content/backTop/backTop";
+
+import HomeSwiper from "./childComps/HomeSwiper";
+import HomeRecommendView from "./childComps/HomeRecommendView";
+import HomefeatureView from "./childComps/HomefeatureView";
+
+import {getHomeGoods,getHomeMutidata} from "@/network/home";
+import {itemListenerMixin,backTopMixin} from "@/common/mixin";
+
+export default {
+  name: "Home",
+  components: {
+    NavBar,
+    scroll,
+    TabControl,
+    GoodsList,
+    GoodsListItem,
+    backTop,
+
+
+    HomeSwiper,
+    HomeRecommendView,
+    HomefeatureView,
+  },
+  data(){
+    return{
+      banners:[],
+      recommends:[],
+      goods:{
+        'pop':{page:0,list:[]},
+        'new':{page:0,list:[]},
+        'sell':{page:0,list:[]},
+      },
+      currentType:'pop',
+      // result:null
+    }
+  },
+  mixins:[itemListenerMixin,backTopMixin],
+  //组件加载完运行，生命周期函数Dom
+  created() {
+    this.getHomeGoods('pop')
+    this.getHomeGoods('new')
+    this.getHomeGoods('sell')
+
+    getHomeMutidata().then(res=>{
+      //轮播图数据请求
+      this.banners=res.data.data.banner.list;
+      //推荐图片的数据请求
+      this.recommends=res.data.data.recommend.list;
+    })
+  },
+  mounted() {
+  },
+  methods:{
+    //商品的加载更多
+    getHomeGoods(type){
+      const  page=this.goods[type].page+1
+      getHomeGoods(type,page).then(res=>{
+        this.goods[type].list.push(...res.data.data.list)
+        this.goods[type].page+=1
+        this.$refs.scroll.finishPullUp()
+      })
+    },
+    //事件监听
+    tabClick(index){
+      switch (index){
+        case 0:
+          this.currentType='pop'
+              break
+        case 1:
+          this.currentType='new'
+              break
+        case 2:
+          this.currentType='sell'
+              break
+      }
+      //三种类型的切换
+      this.$refs.tabControl1.currentIndex=index;
+      this.$refs.tabControl2.currentIndex=index;
+    },
+    //上拉加载更多
+    loadMore(){
+      this.getHomeGoods(this.currentType)
+      this.$refs.scroll.scroll.refresh()
+    },
+    //轮播图的切换
+    swiperImageLoad(){
+      this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop
+    }
+  },
+  computed:{
+    showGoods(){
+      return this.goods[this.currentType].list
+    },
+    //切换板块时，回来保存当前的位置
+    activated(){
+      this.$refs.scroll.scrollTo(0,this.saveY,0)
+      this.$refs.scroll.refresh()
+    },
+    deactivated(){
+      this.saveY = this.$refs.scroll.getScrolly()
+      //判断当前哪个图片加载监听
+      this.$bus.$off('itemImgLoad',this.itemImgListener)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.home{
+  height: 100vh;
+  position: relative;
+}
+.nav-bar {
+  background-color: var(--color-tint);
+  color: #fff;
+  /*font-weight: 700;*/
+  /*position: fixed;*/
+  /*left: 0;*/
+  /*right: 0;*/
+  /*top:0;*/
+  /*z-index: 9;*/
+}
+.content{
+  left: 0;
+  right: 0;
+  top:44px;
+  bottom: 49px;
+  overflow: hidden;
+  position: absolute;
+}
+/*.content{*/
+/*  height:calc(100% - 93px);*/
+/*  overflow: hidden;*/
+/*  margin-top: 44px;*/
+/*}*/
+.tab-control{
+  position: relative;
+  z-index: 9;
+}
+</style>
diff --git a/src/views/home/childComps/HomeRecommendView.vue b/src/views/home/childComps/HomeRecommendView.vue
new file mode 100644
index 00000000..830ce244
--- /dev/null
+++ b/src/views/home/childComps/HomeRecommendView.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="recommends">
+    <div v-for="item in recommends" class="recommends-item">
+      <a :href="item.link">
+        <img :src="item.image" alt="">
+        <div>{{item.title}}</div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HomeRecommendView",
+  props:{
+    recommends:{
+      type:Array,
+      default() {
+        return [];
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.recommends{
+  display: flex;
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  padding: 10px 0 20px;
+  border-bottom: 8px solid #eee;
+}
+.recommends-item{
+  flex:1;
+}
+.recommends-item img{
+  width: 65px;
+  height: 65px;
+}
+</style>
diff --git a/src/views/home/childComps/HomeSwiper.vue b/src/views/home/childComps/HomeSwiper.vue
new file mode 100644
index 00000000..750885d1
--- /dev/null
+++ b/src/views/home/childComps/HomeSwiper.vue
@@ -0,0 +1,45 @@
+<template>
+  <swiper>
+    <swiperItem v-for="item in banners">
+      <a :href="item.link" >
+        <img :src="item.image" alt="" @load="imageLoad">
+      </a>
+    </swiperItem>
+  </swiper>
+</template>
+
+<script>
+import {Swiper, SwiperItem} from "@/components/common/swiper/index"
+export default {
+  name: "HomeSwiper",
+  components:{
+    Swiper,
+    SwiperItem
+  },
+  props:{
+    banners:{
+      type:Array,
+      default(){
+        return[]
+      }
+    }
+  },
+  data(){
+    return {
+      isLoad:false
+    }
+  },
+  methods:{
+    imageLoad(){
+      if(!this.isLoad) {
+        this.$emit('swiperImageLoad')
+        this.isLoad=true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/home/childComps/HomefeatureView.vue b/src/views/home/childComps/HomefeatureView.vue
new file mode 100644
index 00000000..25209bb4
--- /dev/null
+++ b/src/views/home/childComps/HomefeatureView.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="feature">
+    <a href="https://act.mogujie.com/zzlx67">
+      <img src="@/assets/img/home/recommend_bg.jpg" alt="">
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HomefeatureView"
+}
+</script>
+
+<style scoped>
+.feature img{
+  width: 100%;
+}
+
+</style>
diff --git a/src/views/profile/Profile.vue b/src/views/profile/Profile.vue
new file mode 100644
index 00000000..c0c5932c
--- /dev/null
+++ b/src/views/profile/Profile.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h2>我的</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Profile"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 00000000..f1c70093
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,13 @@
+module.exports={
+    configureWebpack:{
+        resolve:{
+            alias:{
+                'assets':'@/assets',
+                'common':'@/common',
+                'components':'@/components',
+                'network':'@/network',
+                'views':'@/views',
+            }
+        }
+    }
+}