diff --git a/decathlon-wepapp/package-lock.json b/decathlon-wepapp/package-lock.json
index 1718399237f69b957d4c2370e6e72fe777eb5f75..2fd568b582f9bfa3f9c272cccbbca007936cebf1 100644
--- a/decathlon-wepapp/package-lock.json
+++ b/decathlon-wepapp/package-lock.json
@@ -1758,6 +1758,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=1594429684526&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1784,6 +1795,34 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-3.0.0.tgz",
+          "integrity": "sha1-P3PCv1JlkfV0zEksUeJFY0n4ROQ=",
+          "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",
@@ -1816,6 +1855,13 @@
             "universalify": "^0.1.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz",
@@ -1880,6 +1926,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=1598611709087&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=1600182300005&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -1896,6 +1952,21 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.0.0-beta.7",
+          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.7.tgz?cache=0&sync_timestamp=1599639283575&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.7.tgz",
+          "integrity": "sha1-bycm+g4rH7rmeJXEdZO79p8rmrg=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/mini-css-extract-plugin": "^0.9.1",
+            "chalk": "^3.0.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^1.2.3",
+            "merge-source-map": "^1.1.0",
+            "source-map": "^0.6.1"
+          }
         }
       }
     },
@@ -2516,6 +2587,14 @@
       "integrity": "sha1-4eguTz6Zniz9YbFhKA0WoRH4ZCg=",
       "dev": true
     },
+    "axios": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.20.0.tgz?cache=0&sync_timestamp=1597979633356&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.20.0.tgz",
+      "integrity": "sha1-BXujDwSIRpSZOozQf6OUz/EcUL0=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -5593,8 +5672,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=1597057976909&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",
@@ -9344,11 +9422,6 @@
         "unicode-match-property-value-ecmascript": "^1.2.0"
       }
     },
-    "register-service-worker": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npm.taobao.org/register-service-worker/download/register-service-worker-1.7.1.tgz",
-      "integrity": "sha1-Ywg0esbArw9sCyLqXVnSXoNryTI="
-    },
     "regjsgen": {
       "version": "0.5.2",
       "resolved": "https://registry.npm.taobao.org/regjsgen/download/regjsgen-0.5.2.tgz",
@@ -11331,86 +11404,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.7",
-      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.7.tgz?cache=0&sync_timestamp=1599639283575&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.7.tgz",
-      "integrity": "sha1-bycm+g4rH7rmeJXEdZO79p8rmrg=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "chalk": "^3.0.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^1.2.3",
-        "merge-source-map": "^1.1.0",
-        "source-map": "^0.6.1"
-      },
-      "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": "3.0.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-3.0.0.tgz",
-          "integrity": "sha1-P3PCv1JlkfV0zEksUeJFY0n4ROQ=",
-          "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",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz?cache=0&sync_timestamp=1589682764497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.6.1.tgz",
-          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
-          "dev": true,
-          "optional": true
-        },
-        "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=1598611709087&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.4.3",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.3.tgz",
diff --git a/decathlon-wepapp/package.json b/decathlon-wepapp/package.json
index 623135c42d52dde4f6c9cca04b6f84dce261315a..d2ee0a90d4c03464ecc0b14376937671ee27579a 100644
--- a/decathlon-wepapp/package.json
+++ b/decathlon-wepapp/package.json
@@ -8,6 +8,7 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "axios": "^0.20.0",
         "core-js": "^3.6.5",
         "vant": "^2.10.7",
         "vue": "^2.6.11",
@@ -31,4 +32,4 @@
         "sass-loader": "^8.0.2",
         "vue-template-compiler": "^2.6.11"
     }
-}
\ No newline at end of file
+}
diff --git a/decathlon-wepapp/public/index.html b/decathlon-wepapp/public/index.html
index 41235286563508e0feb4c451a34b598ef822ec21..ebba3538379d97b814c3796f71b523f25e1aa9c9 100644
--- a/decathlon-wepapp/public/index.html
+++ b/decathlon-wepapp/public/index.html
@@ -3,9 +3,11 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2085690_z66zwefezv8.js">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2085690_z66zwefezv8.css">
   </head>
   <body>
     <noscript>
diff --git a/decathlon-wepapp/src/App.vue b/decathlon-wepapp/src/App.vue
index 82a417c331012c924819bb4d0f8689687333a742..645121d5198dcc0abcb1c6f570111f16e7ba3cdd 100644
--- a/decathlon-wepapp/src/App.vue
+++ b/decathlon-wepapp/src/App.vue
@@ -1,21 +1,19 @@
 <template>
   <div>
-    
+    <router-view />
   </div>
 </template>
 
 <script>
 export default {
-  data () {
-    return {
-    }
+  data() {
+    return {};
   },
 
   components: {},
 
   methods: {}
-}
+};
 </script>
 
-<style scoped>
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/decathlon-wepapp/src/components/HelloWorld.vue b/decathlon-wepapp/src/components/HelloWorld.vue
deleted file mode 100644
index 13efdaac139036ba2af6665387a7d4ab6728b4b5..0000000000000000000000000000000000000000
--- a/decathlon-wepapp/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</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 lang="scss">
-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/decathlon-wepapp/src/components/Home/hot.vue b/decathlon-wepapp/src/components/Home/hot.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5e4cd6738381da234665fb98584fd048d6d0a122
--- /dev/null
+++ b/decathlon-wepapp/src/components/Home/hot.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div id="hot-likes">
+      <div class="hot">
+        <div class="hot-title">
+          <h3>侬粉热搜</h3>
+          <div class="hot-nav">
+            <div class="hot-nav-item">
+              <a href="###">#背包</a>
+            </div>
+            <div class="hot-nav-item">
+              <a href="###">#背包</a>
+            </div>
+            <div class="hot-nav-item">
+              <a href="###">#背包<span>HOT</span></a>
+            </div>
+            <div class="hot-nav-item">
+              <a href="###">#背包</a>
+            </div>
+            <div class="hot-nav-item">
+              <a href="###">#背包</a>
+            </div>
+            <div class="hot-nav-item">
+              <a href="###">#背包<span>HOT</span></a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="likes">
+        <div class="likes-title">
+          <h3>猜你喜欢</h3>
+          <div class="likes-list">
+            <div class="likes-list-item"></div>
+          </div>
+        </div>
+      </div>
+      <div class="hot-banner">
+        <div class="banner-outer">
+          <div class="banner-item">
+            <a href="###">
+              <img src="../../image/hot-banner.jpg" alt="" />
+            </a>
+          </div>
+          <div class="banner-item">
+            <a href="###">
+              <img src="../../image/hot-banner.jpg" alt="" />
+            </a>
+          </div>
+          <div class="banner-item">
+            <a href="###">
+              <img src="../../image/hot-banner.jpg" alt="" />
+            </a>
+          </div>
+          <div class="banner-item">
+            <a href="###">
+              <img src="../../image/hot-banner.jpg" alt="" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+
+  components: {},
+
+  methods: {}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../sass/commmon/base.css";
+@import "../../sass/Home/hot.scss";
+</style>
diff --git a/decathlon-wepapp/src/components/Home/list.vue b/decathlon-wepapp/src/components/Home/list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..80c94d30c7606617d001d546e6d069854fe8726a
--- /dev/null
+++ b/decathlon-wepapp/src/components/Home/list.vue
@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <!-- list-sport -->
+    <div class="header">
+      <div id="list-title"><span>80</span>种运动 任你挑选</div>
+      <ul class="main-list">
+        <li
+          class="sport-item"
+          v-for="(item, index) in sportList"
+          :key="index"
+          :ref="item.ref"
+          @click="show(index)"
+        >
+          <div class="sport-item-top">
+            <div class="picture">
+              <img :src="item.img" />
+            </div>
+            <div class="list-name">
+              <span>{{ item.title }}</span>
+              <!-- 显示后 sport-item的高124需要加上li.length*54 -->
+              <div
+                class="list-subnav"
+                v-if="item.ishow"
+                :style="{ top: index > 3 ? 500 : 240 }"
+              >
+                <div
+                  class="subnav-item"
+                  v-for="(value, index) in item.subList"
+                  :key="index"
+                  ref="sub"
+                >
+                  <a href="###"
+                    ><span>有氧健身装备</span>
+                    <i class="iconfont icon-jiantou"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li class="sport-item">
+          <div class="sport-item-top">
+            <div class="picture">
+              <i class="iconfont icon-gengduo"></i>
+            </div>
+            <div class="list-name">
+              <span>所有运动</span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="footer">
+      <div class="sport-banner">
+        <div
+          class="banner-item"
+          v-for="(value, index) in bannerArr"
+          :key="index"
+        >
+          <a href="###"><img :src="value" alt=""/></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currenIndex: null,
+      sportList: [
+        {
+          id: 1,
+          title: "健身",
+          ishow: false,
+          ref: "hei1",
+          img:
+            "https://pixl.decathlon.com.cn/s805073/k$c61dfc5b746839bf2e05d3da234e537e/menuThumbnail_fitness.png?f=120x120",
+          subList: [
+            { title: "有氧健身装备" },
+            { title: "塑形/力量装备及食品" },
+            { title: "男士服饰" },
+            { title: "女士服饰" }
+          ]
+        },
+        {
+          id: 2,
+          title: "跑步",
+          ishow: false,
+          img:
+            "https://pixl.decathlon.com.cn/s815777/k$980f8a4c8adbfadedc055c32c31dd96e/menuThumbnail_running.png?f=120x120",
+          subList: [{ title: "男士" }, { title: "女士" }, { title: "青少年" }]
+        },
+        {
+          id: 3,
+          title: "自行车",
+          ishow: false,
+          img:
+            "https://pixl.decathlon.com.cn/s830258/k$747d6d4b52562b31e6aea89313f3bb63/MenuThumbnail_Cycle+new2020aw.png?f=120x120",
+          subList: [
+            { title: "公路" },
+            { title: "儿童" },
+            { title: "山地" },
+            { title: "经典城市" },
+            { title: "折叠车" },
+            { title: "旅行" }
+          ]
+        },
+        {
+          id: 4,
+          title: "一日徒步",
+          ishow: false,
+          img:
+            "https://pixl.decathlon.com.cn/s805056/k$6f757ebf7a864f3929da3e2ebe80142e/menuThumbnail_hiking.png?f=120x120",
+          subList: [{ title: "男士" }, { title: "女士" }, { title: "青少年" }]
+        },
+        {
+          id: 5,
+          title: "户外露营",
+          ishow: false,
+          img:
+            "https://pixl.decathlon.com.cn/s830258/k$747d6d4b52562b31e6aea89313f3bb63/MenuThumbnail_Cycle+new2020aw.png?f=120x120",
+          subList: [
+            { title: "帐篷" },
+            { title: "睡袋/床垫" },
+            { title: "桌椅/灯具" },
+            { title: "经典城市" },
+            { title: "水壶/炊具/食品" },
+            { title: "清洁/防护" }
+          ]
+        },
+        {
+          id: 6,
+          title: "多日徒步",
+          ishow: false,
+          img:
+            "https://pixl.decathlon.com.cn/s805070/k$ec3afb7f103e0a37eadf2f4c4100d8ca/MenuThumbnail_Trekking.png?f=120x120",
+          subList: [{ title: "男士" }, { title: "女士" }]
+        },
+        {
+          id: 7,
+          title: "基础健身/普拉提",
+          ishow: false,
+          img:
+            "https://pixl.decathlon.com.cn/s820485/k$b685197670324651aa413c376a108bd1/MenuThumbnail_Pilates.png?f=120x120",
+          subList: [{ title: "男士" }, { title: "女士" }]
+        }
+      ],
+      bannerArr: [
+        "https://pixl.decathlon.com.cn/s828429/benefits-1.jpg",
+        "https://pixl.decathlon.com.cn/s828431/benefits-2.jpg",
+        "https://pixl.decathlon.com.cn/s828430/benefits-3.jpg",
+        "https://pixl.decathlon.com.cn/s828433/benefits-4.jpg"
+      ]
+    };
+  },
+
+  components: {},
+
+  methods: {
+    show(index) {
+      this.sportList[index].ishow = !this.sportList[index].ishow;
+      // let domHeight = this.$refs.hei.style.offsetHeight;
+      // console.log(domHeight);
+    }
+  },
+  mounted() {
+    this.$refs.hei1[0].clientHeight;
+    console.log(this.$refs.hei1[0].clientHeight);
+  },
+  computed: {}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../sass/commmon/base.css";
+@import "../../sass/Home/list.scss";
+</style>
diff --git a/decathlon-wepapp/src/components/Home/main.vue b/decathlon-wepapp/src/components/Home/main.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4bb9d35f875ba9af4af983068848c3bcb5bcb996
--- /dev/null
+++ b/decathlon-wepapp/src/components/Home/main.vue
@@ -0,0 +1,46 @@
+<template>
+  <!-- 主页主题内容 -->
+  <div>
+    <!-- 80种运动，任你挑选 -->
+    <main-list></main-list>
+    <!-- 侬说搭配 -->
+    <main-match></main-match>
+    <!-- 本月主推 -->
+    <main-mouth></main-mouth>
+    <!-- 侬粉热搜、猜你喜欢 -->
+    <main-hot></main-hot>
+    <!-- 创新产品 -->
+    <main-newgoods></main-newgoods>
+    <!-- 产品召回 -->
+    <main-recall></main-recall>
+    <!-- 用户评价 -->
+    <common-evaluate></common-evaluate>
+  </div>
+</template>
+
+<script>
+import mainList from "./list";
+import mainMatch from "./match";
+import mainMouth from "./mouth";
+import mainHot from "./hot";
+import mainNewgoods from "./newgoods";
+import mainRecall from "./recall";
+export default {
+  data() {
+    return {};
+  },
+
+  components: {
+    mainList,
+    mainMatch,
+    mainMouth,
+    mainHot,
+    mainNewgoods,
+    mainRecall
+  },
+
+  methods: {}
+};
+</script>
+
+<style scoped></style>
diff --git a/decathlon-wepapp/src/components/Home/match.vue b/decathlon-wepapp/src/components/Home/match.vue
new file mode 100644
index 0000000000000000000000000000000000000000..17545d33c1d2becd8b4e9ea3eac9d33d35ca3908
--- /dev/null
+++ b/decathlon-wepapp/src/components/Home/match.vue
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <div id="match">
+      <!-- 侬说搭配 -->
+      <div class="match-outer match-title"><p>侬说搭配</p></div>
+      <div class="match-outer" v-for="(item, index) in goodsList" :key="index">
+        <div class="match-picture">
+          <a href="###">
+            <img :src="item.image" alt="" />
+          </a>
+        </div>
+        <div class="match-list">
+          <div
+            class="match-list-item"
+            v-for="(value, index2) in item.matchList"
+            :key="index2"
+          >
+            <a href="###">
+              <div class="value.icon">
+                <img :src="value.icon" alt="" />
+              </div>
+              <div class="item-price">
+                <span>￥</span><span>{{ value.price }}</span
+                ><span>.</span><span>{{ value.price_small }}</span>
+              </div>
+              <div class="match-goods-title">
+                {{ value.title }}
+              </div>
+            </a>
+          </div>
+        </div>
+        <div class="match-hint" v-if="item.isintroduce">
+          <p>{{ item.introduce }}</p>
+          <p>
+            {{ item.introduce_cont }}
+          </p>
+          <p>{{ item.introduce_value }}</p>
+        </div>
+      </div>
+      <div class="match-outer">
+        <div class="match-picture">
+          <a href="###">
+            <img src="../../image/every.jpg" alt="" />
+          </a>
+        </div>
+        <div class="match-list match-many-list">
+          <div class="match-list-item many-list">
+            <a href="###">
+              <div class="item-picture">
+                <img src="../../image/Shoes.jpg" alt="" />
+              </div>
+              <div class="item-price">
+                <span>￥</span><span>59</span><span>.</span><span>90</span>
+              </div>
+              <div class="match-goods-title">
+                <span>Pongori</span>
+                <span>
+                  室内乒乓球桌 PPT 130 小型
+                </span>
+              </div>
+            </a>
+            <div class="review">
+              <span class="review-score">
+                <span class="review-star"></span>4.67
+              </span>
+              <span class="review-num">(<em>9</em>条评价)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      goodsList: [
+        {
+          matchList: [
+            {
+              icon:
+                "https://pixl.decathlon.com.cn/p1816142/k$3a3c02d4d69b30e47723a1706456b602/sq/CN+WHEY9+1+8kg.jpg?f=250x250",
+              price: 449,
+              price_small: 90,
+              title: "乳清蛋白粉(WHEY9) 1.8kg"
+            },
+            {
+              icon:
+                "https://pixl.decathlon.com.cn/p1246712/k$c0efd812dd3cd6bd1408463dda6793cb/sq/Massage+and+Mobility+Roller+Soft.jpg?f=250x250",
+              price: 99,
+              price_small: 90,
+              title: "按摩和肌肉恢复滚轴 软泡沫"
+            },
+            {
+              icon:
+                "https://pixl.decathlon.com.cn/p188432/k$be5a593d9fee9fc44f52ba6aec2ed634/sq/Hex+Dumbbell+7+5+kg.jpg?f=250x250",
+              price: 149,
+              price_small: 90,
+              title: "7.5 公斤六角哑铃"
+            }
+          ],
+          introduce: "体能补给 快速恢复",
+          introduce_cont:
+            "80%乳清蛋白含量，整桶法国进口，在运动时迅速补充人体所需的氨基酸。结束后别忘记使用泡沫滚轴进行按摩。",
+          introduce_value: "非常有用",
+          isintroduce: true,
+          image:
+            "https://pixl.decathlon.com.cn/s831941/monthly-recommendation-mobile-5.jpg"
+        },
+        {
+          matchList: [
+            {
+              icon:
+                "https://pixl.decathlon.com.cn/p1587888/k$3096071d01ca0dc337bca3616ff87b89/sq/Men+s+Golf+Long+Sleeve+Polo+Shirt+Navy+Blue.jpg?f=250x250",
+              price: 99,
+              price_small: 90,
+              title: "男士高尔夫长袖Polo衫- 海军蓝"
+            },
+            {
+              icon:
+                "https://pixl.decathlon.com.cn/p1827565/k$11029619f9edb7db0390e214b16af9a0/sq/Men+s+Golf+Pullover+Navy+Blue.jpg?f=250x250",
+              price: 99,
+              price_small: 90,
+              title: "男士高尔夫套头衫-海军蓝"
+            },
+            {
+              icon:
+                "https://pixl.decathlon.com.cn/p1865365/k$acd53f2de6e6636a77b6931549ed0855/sq/Men+s+Golf+Ultralight+Sleeveless+Down+Jacket+Black.jpg?f=250x250",
+              price: 249,
+              price_small: 90,
+              title: "男士高尔夫轻量羽绒背心 黑色"
+            }
+          ],
+          isintroduce: false,
+          image:
+            "https://pixl.decathlon.com.cn/s830350/monthly-recommendation-mobile-4.jpg"
+        }
+      ]
+    };
+  },
+
+  components: {},
+
+  methods: {}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../sass/commmon/base.css";
+@import "../../sass/Home/match.scss";
+</style>
diff --git a/decathlon-wepapp/src/components/Home/mouth.vue b/decathlon-wepapp/src/components/Home/mouth.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cbebf3285eaa5269f3c92a9fdcef8d005bddf56f
--- /dev/null
+++ b/decathlon-wepapp/src/components/Home/mouth.vue
@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <div id="mouth">
+      <div class="mouth-title">
+        <h3>本月主推</h3>
+      </div>
+      <div class="list">
+        <ul>
+          <li class="active">鞋类</li>
+          <li>服装</li>
+          <li>背包</li>
+          <li>器械</li>
+          <li>自行车</li>
+        </ul>
+      </div>
+      <a href="###">
+        <ul>
+          <li>
+            <a href=""><img src="../../image/mouth-banner.jpg" alt=""/></a>
+          </li>
+        </ul>
+      </a>
+      <div id="margin-top20">
+        <div class="mouth-nav">
+          <div class="mouth-nav-item">
+            <a href="###">
+              <div class="nav-item-picture">
+                <img src="../../image/Shoes.jpg" alt="" />
+              </div>
+              <div class="nav-item-price">
+                <span>￥</span><span>59</span><span>.</span><span>90</span>
+              </div>
+              <div class="mouth-goods-title">
+                <span>Pongori</span>
+                <span>
+                  室内乒乓球桌 PPT 130 小型
+                </span>
+              </div>
+            </a>
+            <div class="mouth-review">
+              <span class="review-score">
+                <span class="review-star"></span>4.67
+              </span>
+              <span class="review-num">(<em>9</em>条评价)</span>
+            </div>
+          </div>
+          <div class="mouth-nav-item">
+            <a href="###">
+              <div class="nav-item-picture">
+                <img src="../../image/Shoes.jpg" alt="" />
+              </div>
+              <div class="nav-item-price">
+                <span>￥</span><span>59</span><span>.</span><span>90</span>
+              </div>
+              <div class="mouth-goods-title">
+                <span>Pongori</span>
+                <span>
+                  室内乒乓球桌 PPT 130 小型
+                </span>
+              </div>
+            </a>
+            <div class="mouth-review">
+              <span class="review-score">
+                <span class="review-star"></span>4.67
+              </span>
+              <span class="review-num">(<em>9</em>条评价)</span>
+            </div>
+          </div>
+          <div class="mouth-nav-item">
+            <a href="###">
+              <div class="nav-item-picture">
+                <img src="../../image/Shoes.jpg" alt="" />
+              </div>
+              <div class="nav-item-price">
+                <span>￥</span><span>59</span><span>.</span><span>90</span>
+              </div>
+              <div class="mouth-goods-title">
+                <span>Pongori</span>
+                <span>
+                  室内乒乓球桌 PPT 130 小型
+                </span>
+              </div>
+            </a>
+            <div class="mouth-review">
+              <span class="review-score">
+                <span class="review-star"></span>4.67
+              </span>
+              <span class="review-num">(<em>9</em>条评价)</span>
+            </div>
+          </div>
+          <div class="mouth-nav-item">
+            <a href="###">
+              <div class="nav-item-picture">
+                <img src="../../image/Shoes.jpg" alt="" />
+              </div>
+              <div class="nav-item-price">
+                <span>￥</span><span>59</span><span>.</span><span>90</span>
+              </div>
+              <div class="mouth-goods-title">
+                <span>Pongori</span>
+                <span>
+                  室内乒乓球桌 PPT 130 小型
+                </span>
+              </div>
+            </a>
+            <div class="mouth-review">
+              <span class="review-score">
+                <span class="review-star"></span>4.67
+              </span>
+              <span class="review-num">(<em>9</em>条评价)</span>
+            </div>
+          </div>
+          <div class="mouth-nav-item">
+            <a href="###">
+              <div class="nav-item-picture">
+                <img src="../../image/Shoes.jpg" alt="" />
+              </div>
+              <div class="nav-item-price">
+                <span>￥</span><span>59</span><span>.</span><span>90</span>
+              </div>
+              <div class="mouth-goods-title">
+                <span>Pongori</span>
+                <span>
+                  室内乒乓球桌 PPT 130 小型
+                </span>
+              </div>
+            </a>
+            <div class="mouth-review">
+              <span class="review-score">
+                <span class="review-star"></span>4.67
+              </span>
+              <span class="review-num">(<em>9</em>条评价)</span>
+            </div>
+          </div>
+        </div>
+        <div class="process-bar">
+          <div class="process-block"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+
+  components: {},
+
+  methods: {}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../sass/commmon/base.css";
+@import "../../sass/Home/mouth.scss";
+.active {
+  color: #0082c3;
+  font-weight: 700;
+}
+</style>
diff --git a/decathlon-wepapp/src/components/Home/nav.vue b/decathlon-wepapp/src/components/Home/nav.vue
new file mode 100644
index 0000000000000000000000000000000000000000..df8d0f803e553ac1ba68ab0ba979a30576107e14
--- /dev/null
+++ b/decathlon-wepapp/src/components/Home/nav.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+      <van-swipe-item> <img src="../../image/1.jpg" alt=""/></van-swipe-item>
+      <van-swipe-item> <img src="../../image/1.jpg" alt=""/></van-swipe-item>
+      <van-swipe-item> <img src="../../image/1.jpg" alt=""/></van-swipe-item>
+      <van-swipe-item> <img src="../../image/1.jpg" alt=""/></van-swipe-item>
+      <van-swipe-item> <img src="../../image/1.jpg" alt=""/></van-swipe-item>
+    </van-swipe>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+
+  components: {},
+
+  methods: {}
+};
+</script>
+
+<style scoped lang="scss">
+// @import "../../assets/sass/public/vw.scss";
+.my-swipe .van-swipe-item {
+  color: #fff;
+  font-size: 20px;
+  line-height: 150px;
+  text-align: center;
+  background-color: #39a9ed;
+}
+</style>
diff --git a/decathlon-wepapp/src/components/Home/newgoods.vue b/decathlon-wepapp/src/components/Home/newgoods.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3a4c654d5708ac0136468798f89f02c02c0c08a4
--- /dev/null
+++ b/decathlon-wepapp/src/components/Home/newgoods.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h3>创新产品</h3>
+    <div class="news-banner">
+      <van-swipe :autoplay="3000">
+        <van-swipe-item v-for="(image, index) in images" :key="index">
+          <img v-lazy="image" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      images: [
+        "https://pixl.decathlon.com.cn/s816020/innovation-7.jpg",
+        "https://pixl.decathlon.com.cn/s815949/innovation-7.jpg",
+        "https://pixl.decathlon.com.cn/s824596/innovation-8.jpg"
+      ]
+    };
+  },
+
+  components: {},
+
+  methods: {}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../sass/commmon/base.css";
+@import "../../sass/Home/newgoods.scss";
+</style>
diff --git a/decathlon-wepapp/src/components/Home/recall.vue b/decathlon-wepapp/src/components/Home/recall.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4b508d65eed0508f6cbf4f3e3d7affbce1853c4d
--- /dev/null
+++ b/decathlon-wepapp/src/components/Home/recall.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <h3>
+      产品召回
+    </h3>
+    <div class="recall-list">
+      <div class="recall-list-outer">
+        <div class="recall-list-item">
+          <div class="top">
+            <div class="top-icon">
+              <img src="../../image/recall.jpg" alt="" />
+            </div>
+            <div class="top-content">
+              <h4>产品召回</h4>
+              <h5>B1-500 踏板车</h5>
+              <p>
+                为了更好的满足用户的使用安全需求,我们郑重通知您,
+                将自2020年08月21日起,请持有该产品的消费者到就近迪卡侬门店进行免费安装维修配件。
+              </p>
+            </div>
+          </div>
+          <div class="footer">
+            <a href="###"><div class="watch">查看详情</div></a>
+          </div>
+        </div>
+        <div class="recall-list-item">
+          <div class="top">
+            <div class="top-icon">
+              <img src="../../image/recall.jpg" alt="" />
+            </div>
+            <div class="top-content">
+              <h4>产品召回</h4>
+              <h5>B1-500 踏板车</h5>
+              <p>
+                为了更好的满足用户的使用安全需求,我们郑重通知您,
+                将自2020年08月21日起,请持有该产品的消费者到就近迪卡侬门店进行免费安装维修配件。
+              </p>
+            </div>
+          </div>
+          <div class="footer">
+            <a href="###"><div class="watch">查看详情</div></a>
+          </div>
+        </div>
+        <div class="recall-list-item">
+          <div class="top">
+            <div class="top-icon">
+              <img src="../../image/recall.jpg" alt="" />
+            </div>
+            <div class="top-content">
+              <h4>产品召回</h4>
+              <h5>B1-500 踏板车</h5>
+              <p>
+                为了更好的满足用户的使用安全需求,我们郑重通知您,
+                将自2020年08月21日起,请持有该产品的消费者到就近迪卡侬门店进行免费安装维修配件。
+              </p>
+            </div>
+          </div>
+          <div class="footer">
+            <a href="###"><div class="watch">查看详情</div></a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+
+  components: {},
+
+  methods: {}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../sass/commmon/base.css";
+@import "../../sass/Home/recall.scss";
+</style>
diff --git a/decathlon-wepapp/src/components/commonEvaluate.vue b/decathlon-wepapp/src/components/commonEvaluate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2438f7c0495841850f084561a655d01117ae62f8
--- /dev/null
+++ b/decathlon-wepapp/src/components/commonEvaluate.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div class="users">
+      <div class="users-title">
+        <div class="users-title-outer">
+          <span class="left">&gt;</span>
+          <div class="users-title-list">
+            <div class="list-content">
+              <div class="list-item">
+                <a href="###">
+                  <span
+                    class="icon"
+                    style="background: url(data:image/png;base64,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);background-size: 100% 100%"
+                  ></span>
+                  <span class="cont">用户评价</span>
+                </a>
+              </div>
+              <div class="list-item">
+                <a href="###">
+                  <span
+                    class="icon"
+                    style="background: url(data:image/png;base64,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);background-size: 100% 100%"
+                  ></span>
+                  <span class="cont">用户评价</span>
+                </a>
+              </div>
+              <div class="list-item">
+                <a href="###">
+                  <span
+                    class="icon"
+                    style="background: url(data:image/png;base64,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);background-size: 100% 100%"
+                  ></span>
+                  <span class="cont">用户评价</span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <span class="right">&lt;</span>
+        </div>
+      </div>
+      <div class="users-content">
+        <ul>
+          <li class="content-item">
+            <div class="content-list">
+              <h6>关于迪卡侬</h6>
+            </div>
+            <div class="content-subnav" v-show="false">
+              <p><a href="###">品牌故事</a></p>
+              <p><a href="###">工作机遇</a></p>
+              <p><a href="###">迪卡侬可持续发展</a></p>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="users-focus">
+        <div class="focus-picture">
+          <img src="../image/qrcode_webiste.jpg" alt="" />
+        </div>
+        <span>关注迪卡侬</span>
+      </div>
+      <div class="user-footer">
+        <div class="footer-copy">
+          <p>
+            Copyright 2003-2020, 迪卡侬集团及其附属公司。沪ICP备16000315号-7
+          </p>
+        </div>
+        <div class="footer-wagnbei">
+          <a href="###" class="footer-auth-lefts"
+            ><img src="../image/icp_bg.png" alt=""/></a
+          ><a href="###" class="footer-auth-right"
+            ><img src="../image/picp_bg.png" alt=""
+          /></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+
+  components: {},
+
+  methods: {}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../sass/commmon/base.css";
+@import "../sass/Home/common/commonEvaluate.scss";
+</style>
diff --git a/decathlon-wepapp/src/image/1.jpg b/decathlon-wepapp/src/image/1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..25adf93d5bd78cf917a66f9d779ed389e02957e5
Binary files /dev/null and b/decathlon-wepapp/src/image/1.jpg differ
diff --git a/decathlon-wepapp/src/image/1.txt b/decathlon-wepapp/src/image/1.txt
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/decathlon-wepapp/src/image/Shoes.jpg b/decathlon-wepapp/src/image/Shoes.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b93fa3bbfbf6b127f92c17ce2c0e857e21b64c83
Binary files /dev/null and b/decathlon-wepapp/src/image/Shoes.jpg differ
diff --git a/decathlon-wepapp/src/image/every.jpg b/decathlon-wepapp/src/image/every.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..499834e0d028ba1e03d2d802e8ccfd805d7baa3f
Binary files /dev/null and b/decathlon-wepapp/src/image/every.jpg differ
diff --git a/decathlon-wepapp/src/image/hot-banner.jpg b/decathlon-wepapp/src/image/hot-banner.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9a7dc0b9064e7f50ff2a5c3017ebfec684960db4
Binary files /dev/null and b/decathlon-wepapp/src/image/hot-banner.jpg differ
diff --git a/decathlon-wepapp/src/image/icp_bg.png b/decathlon-wepapp/src/image/icp_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..763b4620daf0f67a9f6541a0d718cf33e7467ba2
Binary files /dev/null and b/decathlon-wepapp/src/image/icp_bg.png differ
diff --git a/decathlon-wepapp/src/image/list.png b/decathlon-wepapp/src/image/list.png
new file mode 100644
index 0000000000000000000000000000000000000000..58bbc84d034a0ad3148e9d1ad04a044182ab59e1
Binary files /dev/null and b/decathlon-wepapp/src/image/list.png differ
diff --git a/decathlon-wepapp/src/image/lunbotu.png b/decathlon-wepapp/src/image/lunbotu.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b37c7f4c6d813ab36fe7a0552998c308d2c2e83
Binary files /dev/null and b/decathlon-wepapp/src/image/lunbotu.png differ
diff --git a/decathlon-wepapp/src/image/match-nav.png b/decathlon-wepapp/src/image/match-nav.png
new file mode 100644
index 0000000000000000000000000000000000000000..17cdd821c0af8c842401121c958001bcd12ba20a
Binary files /dev/null and b/decathlon-wepapp/src/image/match-nav.png differ
diff --git a/decathlon-wepapp/src/image/mouth-banner.jpg b/decathlon-wepapp/src/image/mouth-banner.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cef9ac4e4fb8526e820b10500dffc723004d7f6b
Binary files /dev/null and b/decathlon-wepapp/src/image/mouth-banner.jpg differ
diff --git a/decathlon-wepapp/src/image/newgoods.jpg b/decathlon-wepapp/src/image/newgoods.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7101c19acd1583285f4609beb0ed653fad5c9167
Binary files /dev/null and b/decathlon-wepapp/src/image/newgoods.jpg differ
diff --git a/decathlon-wepapp/src/image/panoply-mobile-1.jpg b/decathlon-wepapp/src/image/panoply-mobile-1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c09bf50cacb70999f5e186e063c20b1ea90d6814
Binary files /dev/null and b/decathlon-wepapp/src/image/panoply-mobile-1.jpg differ
diff --git a/decathlon-wepapp/src/image/panoply-mobile-2.jpg b/decathlon-wepapp/src/image/panoply-mobile-2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..52e1dd81cb04c43fa795702c0686c06ae4dc5fdf
Binary files /dev/null and b/decathlon-wepapp/src/image/panoply-mobile-2.jpg differ
diff --git a/decathlon-wepapp/src/image/picp_bg.png b/decathlon-wepapp/src/image/picp_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7c497390f3f470b7f3d93b3e2d7929a0f0a02af
Binary files /dev/null and b/decathlon-wepapp/src/image/picp_bg.png differ
diff --git a/decathlon-wepapp/src/image/qrcode_webiste.jpg b/decathlon-wepapp/src/image/qrcode_webiste.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a7e5cef1fff7c7ef64c14cc39c723cdea6ab682a
Binary files /dev/null and b/decathlon-wepapp/src/image/qrcode_webiste.jpg differ
diff --git a/decathlon-wepapp/src/image/recall.jpg b/decathlon-wepapp/src/image/recall.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3d8b486ef2d29a9192733dd59ed8b4c21583c586
Binary files /dev/null and b/decathlon-wepapp/src/image/recall.jpg differ
diff --git a/decathlon-wepapp/src/image/sportbanner.jpg b/decathlon-wepapp/src/image/sportbanner.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..931edde4b3ced61200a5c03ce24a75dd49b775d8
Binary files /dev/null and b/decathlon-wepapp/src/image/sportbanner.jpg differ
diff --git "a/decathlon-wepapp/src/image/\351\246\226\351\241\265.png" "b/decathlon-wepapp/src/image/\351\246\226\351\241\265.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bc7cdc07cdaf4089fb74c61cb965b86aee83fa6b
Binary files /dev/null and "b/decathlon-wepapp/src/image/\351\246\226\351\241\265.png" differ
diff --git a/decathlon-wepapp/src/main.js b/decathlon-wepapp/src/main.js
index aa2ef93db35f2757a77440ee785f420bca2b1176..e70fe108357dba9e5c5b2d661f24e362b8090250 100644
--- a/decathlon-wepapp/src/main.js
+++ b/decathlon-wepapp/src/main.js
@@ -2,17 +2,29 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import commonEvaluate from "./components/commonEvaluate.vue"; // 引入公共组件-用户评论
+Vue.use(commonEvaluate); // 使用公共组件-用户评论
+Vue.component("common-evaluate", commonEvaluate); // 初始化公共组件-用户评论
 
 //引入vantUI组件
 import Vant from "vant";
 import "vant/lib/index.css";
-
 Vue.use(Vant);
+// 轮播图
+import { Swipe, SwipeItem } from "vant";
+import { Lazyload } from "vant";
+Vue.use(Lazyload);
+Vue.use(Swipe);
+Vue.use(SwipeItem);
+//icon图标
+import { Icon } from "vant";
+Vue.use(Icon);
 
+import "./style/common/reset.css";
 Vue.config.productionTip = false;
 
 new Vue({
-    router,
-    store,
-    render: (h) => h(App),
-}).$mount("#app");
\ No newline at end of file
+  router,
+  store,
+  render: h => h(App)
+}).$mount("#app");
diff --git a/decathlon-wepapp/src/router/index.js b/decathlon-wepapp/src/router/index.js
index c82ca3f1a8a0be0dff8a6dfcd277adf841030864..8b243ad8613e84c73d28aa8adb71b0803492b996 100644
--- a/decathlon-wepapp/src/router/index.js
+++ b/decathlon-wepapp/src/router/index.js
@@ -21,7 +21,7 @@ const routes = [
   },
   {
     path: "/",
-    redirect: "/home/:id" //重定向
+    redirect: "/home" //重定向
   },
   {
     path: "/account",
diff --git a/decathlon-wepapp/src/sass/Home/common/common.scss b/decathlon-wepapp/src/sass/Home/common/common.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cf4ee99b9e83aa0b531729215d49562025a3d387
--- /dev/null
+++ b/decathlon-wepapp/src/sass/Home/common/common.scss
@@ -0,0 +1,95 @@
+// 侬说搭配商品列表单商品样式（无评价）
+.match-list-item {
+	width: 33.33%;
+	margin: vw(8) vw(8) vw(12);
+	position: relative;
+	.item-picture {
+		width: 100%;
+		background-color: #fff;
+		img {
+			width: 100%;
+			display: inline-block;
+
+			// position: absolute;
+			// left: 0;
+			// top: 0;
+			padding: vw(36) vw(40) vw(44) vw(40);
+		}
+	}
+	.item-price {
+		position: absolute;
+		left: 50%;
+		top: vw(196);
+		transform: translate(-50%);
+		width: vw(170);
+		height: vw(60);
+		background: #ffe928;
+		font-size: vw(26);
+		line-height: vw(66);
+		text-align: center;
+		span:nth-child(-n + 2) {
+			font-weight: bold;
+			height: vw(60);
+			font-size: vw(42);
+		}
+	}
+	.match-goods-title {
+		width: 100%;
+		padding: vw(70) vw(20) vw(60) vw(18);
+		text-align: center;
+		font-size: vw(24);
+		line-height: vw(30);
+		height: vw(76);
+		transform-origin: center center;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		color: #232323;
+	}
+}
+
+// 有评价得商品item
+.many-list {
+	width: 50%;
+	margin: 0;
+	padding: vw(8);
+	img {
+		padding: vw(50);
+		width: 100%;
+	}
+	.item-price {
+		left: 32%;
+		top: vw(310);
+	}
+	.match-goods-title {
+		text-align: left;
+		transform-origin: left center;
+	}
+	.review {
+		font-size: vw(24);
+		padding: vw(10) vw(16);
+		margin-bottom: vw(10);
+		transform: scale(0.9);
+		transform-origin: left center;
+		height: vw(54);
+		.review-score {
+			.review-star {
+				display: inline-block;
+				margin-right: vw(6);
+				width: vw(28);
+				height: vw(28);
+				background: url(https://pixl.decathlon.com.cn/s802611/star.svg?q=orig)
+					no-repeat;
+				background-size: 100% auto;
+			}
+		}
+		.review-num {
+			margin-left: vw(6);
+			color: #898989;
+			transform: scale(0.8);
+			transform-origin: left center;
+		}
+	}
+}
diff --git a/decathlon-wepapp/src/sass/Home/common/commonEvaluate.scss b/decathlon-wepapp/src/sass/Home/common/commonEvaluate.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ab7f8e524559d191d8e21157838c731ba2aabda1
--- /dev/null
+++ b/decathlon-wepapp/src/sass/Home/common/commonEvaluate.scss
@@ -0,0 +1,218 @@
+@import '../../../assets/sass/public/vw.scss';
+.users {
+	position: relative;
+	overflow: hidden;
+	width: 100%;
+	background: #edeff1;
+	.users-title {
+		background: #0082c3;
+		color: #fff;
+		margin-bottom: 0;
+		padding: 0 vw(60);
+		position: relative;
+		text-align: center;
+		.users-title-outer {
+			color: #fff;
+			margin-bottom: 0;
+			max-width: vw(3360);
+			padding: vw(40) vw(60);
+			position: relative;
+			text-align: center;
+			.left {
+				color: #fff;
+				display: block;
+				left: vw(-56);
+				border: 0;
+				height: vw(50);
+				margin-top: vw(-24);
+				top: 50%;
+				width: vw(50);
+				position: absolute;
+				padding: 0;
+				outline: none;
+				z-index: 1;
+			}
+			.right {
+				color: #fff;
+				display: block;
+				border: 0;
+				height: vw(50);
+				margin-top: vw(-24);
+				top: 50%;
+				width: vw(50);
+				right: vw(-52);
+				position: absolute;
+				padding: 0;
+				outline: none;
+				z-index: 1;
+			}
+			.users-title-list {
+				overflow: hidden;
+				margin: 0;
+				padding: 0;
+				.list-content {
+					width: 1575px;
+					height: 100%;
+					box-sizing: border-box;
+					.list-item {
+						width: vw(630);
+						margin-left: -30px;
+						text-align: center;
+						float: left;
+						height: 100%;
+						min-height: 1px;
+						color: #fff;
+						.icon {
+							display: inline-block;
+							font-size: 35px;
+							height: 35px;
+							width: 35px;
+							vertical-align: middle;
+							position: relative;
+							margin-right: 10px;
+							font-family: DecathlonCube;
+							font-style: normal;
+							font-weight: 400;
+							font-variant: normal;
+							text-transform: none;
+							line-height: 1;
+							letter-spacing: 0;
+						}
+						.cont {
+							color: #fff;
+							font-weight: 700;
+							font-style: normal;
+							padding-left: 10px;
+							text-align: left;
+							text-transform: uppercase;
+							vertical-align: middle;
+						}
+					}
+				}
+			}
+		}
+	}
+	.users-content {
+		padding: 0 0 30px 0;
+		height: auto;
+		box-sizing: border-box;
+		ul {
+			box-sizing: border-box;
+			.content-item {
+				overflow: hidden;
+				padding-right: 15px;
+				padding-left: 15px;
+				width: 100%;
+				.content-list {
+					height: 55px;
+					box-sizing: border-box;
+					position: relative;
+					border-bottom: 1px solid rgba(183, 183, 183, 0.35);
+					h6 {
+						margin-bottom: 5px;
+						line-height: 55px;
+						font-size: 14px;
+						color: #232323;
+						font-weight: bold;
+					}
+				}
+				.content-list:after {
+					content: '';
+					width: 2px;
+					height: 16px;
+					background-color: #0082c3;
+					display: block;
+					position: absolute;
+					right: 12px;
+					top: 50%;
+					margin-top: -8px;
+				}
+				.content-list:before {
+					content: '';
+					width: 16px;
+					height: 2px;
+					background-color: #0082c3;
+					display: block;
+					position: absolute;
+					right: 5px;
+					top: 50%;
+					margin-top: -1px;
+				}
+				.content-subnav {
+					width: 100%;
+					padding: 0;
+					p {
+						width: 100%;
+						height: 30px;
+						line-height: 30px;
+						font-weight: 400;
+						font-style: normal;
+						font-size: 12px;
+						color: #575859;
+					}
+				}
+			}
+		}
+	}
+	.users-focus {
+		text-align: center;
+		width: 100%;
+		position: relative;
+		min-height: 1px;
+		padding-right: 15px;
+		padding-left: 15px;
+		.focus-picture {
+			position: relative;
+			display: inline-block;
+			border-radius: 2px;
+			img {
+				width: 100px;
+				height: 100px;
+			}
+		}
+		span {
+			display: block;
+			font-size: 14px;
+			font-weight: bold;
+			color: #393939;
+			width: 100%;
+			height: 30px;
+			line-height: 30px;
+			left: 0;
+			text-align: center;
+		}
+	}
+	.user-footer {
+		text-align: center;
+		padding: 14px 20px 42px;
+		position: relative;
+		margin-right: auto;
+		margin-left: auto;
+		.footer-copy {
+			margin-top: 0;
+			margin-bottom: 10px;
+			color: #575859;
+			font-weight: 400;
+			font-style: normal;
+			font-size: 12px;
+		}
+		.footer-wagnbei {
+			text-align: center;
+			.footer-auth-lefts {
+        display: inline-block;
+        margin-right: 10px;
+				img {
+					width: 41px;
+					height: 41px;
+				}
+			}
+			.footer-auth-right {
+        display: inline-block;
+        img {
+          height: 41px;
+          width: 160px;
+        }
+			}
+		}
+	}
+}
diff --git a/decathlon-wepapp/src/sass/Home/hot.scss b/decathlon-wepapp/src/sass/Home/hot.scss
new file mode 100644
index 0000000000000000000000000000000000000000..67ad6464d059d75665f27e1cbdd9cd33cb206021
--- /dev/null
+++ b/decathlon-wepapp/src/sass/Home/hot.scss
@@ -0,0 +1,105 @@
+@import '../../assets/sass/public/vw.scss';
+#hot-likes {
+	h3 {
+		margin: vw(60) auto;
+		line-height: vw(48);
+		font-weight: 700;
+		color: #232323;
+		font-size: vw(48);
+		text-align: center;
+	}
+	.hot {
+		.hot-title {
+			width: 100%;
+			box-sizing: border-box;
+			.hot-nav {
+				margin: vw(60) auto;
+				display: flex;
+				flex-wrap: wrap;
+				padding: 0 vw(30);
+				.hot-nav-item {
+					flex: 31%;
+					display: block;
+					text-align: center;
+					margin-right: vw(20);
+					margin-bottom: vw(20);
+					background-color: #f2f2f2;
+					padding: vw(10)vw(20);
+					font-size: vw(28);
+					font-weight: bold;
+					border-radius: vw(4);
+					color: #393939;
+					position: relative;
+				}
+				.hot-nav-item:nth-child(3n) {
+					margin-right: 0;
+					a {
+						position: relative;
+						span {
+							position: absolute;
+							background-color: #e20c18;
+							width: vw(64);
+							height: vw(40);
+							color: #fff;
+							font-size: vw(24);
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							border-radius: vw(4);
+							right: vw(-88);
+							bottom: vw(36);
+							transform: scale(0.8);
+							transform-origin: right bottom;
+						}
+						span:before {
+							content: '';
+							width: 0;
+							height: 0;
+							display: block;
+							border: vw(16) solid transparent;
+							border-left: vw(16) solid #e20c18;
+							position: absolute;
+							bottom: vw(-14);
+							left:vw(16);
+						}
+					}
+				}
+			}
+		}
+	}
+	.likes {
+		.likes-list {
+			background-color: white;
+			width: 100%;
+			position: relative;
+			overflow: hidden;
+			border-radius: 2px;
+			margin-bottom: 20px;
+			display: flex;
+			flex-wrap: wrap;
+			padding: 0;
+			margin: 0 auto;
+		}
+	}
+	.hot-banner {
+		box-sizing: border-box;
+		width: 100%;
+		margin: vw(60) auto;
+		padding: 0 vw(30);
+		.banner-outer {
+			width: 100%;
+			margin: 0 auto;
+      display: flex;
+      flex-wrap: wrap;
+			.banner-item {
+				flex: 49%;
+				margin-right: 2%;
+				margin-bottom: 2%;
+				border-radius: 2px;
+      }
+      .banner-item:nth-child(2n) {
+        margin-right: 0;
+      }
+		}
+	}
+}
diff --git a/decathlon-wepapp/src/sass/Home/list.scss b/decathlon-wepapp/src/sass/Home/list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..385ed0420389970fd8cc3d629642d5320927cfed
--- /dev/null
+++ b/decathlon-wepapp/src/sass/Home/list.scss
@@ -0,0 +1,140 @@
+@import '../../assets/sass/public/vw.scss';
+#list-title {
+	color: #232323;
+	font-size: vw(48);
+	font-weight: bold;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	-ms-flex-line-pack: center;
+	align-content: center;
+	height: vw(72);
+	line-height: vw(72);
+	margin: vw(100) 0 vw(60) 0;
+	span {
+		font-size: vw(66);
+		font-family: Roboto-Condensed;
+		position: relative;
+		line-height: vw(66);
+	}
+	span:after {
+		content: '+';
+		font-size: vw(56);
+		display: inline-block;
+		transform: translateY(vw(-24));
+		-webkit-transform: translateY(vw(-24));
+		-moz-transform: translateY(vw(-24));
+		-ms-transform: translateY(vw(-24));
+		-o-transform: translateY(vw(-24));
+	}
+}
+.main-list {
+	width: 100%;
+	margin-bottom: vw(40);
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+	.sport-item {
+		width: 25%;
+		.sport-item-top {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			// height: vw(248);
+			margin-bottom: vw(28);
+			.picture {
+				width: vw(160);
+				height: vw(160);
+				i {
+					display: block;
+					font-size: vw(100);
+					text-align: center;
+					line-height: vw(160);
+				}
+				img {
+					display: block;
+					transform: scale(1) translateZ(0);
+					-webkit-transform: scale(1) translateZ(0);
+					-moz-transform: scale(1) translateZ(0);
+					-ms-transform: scale(1) translateZ(0);
+					-o-transform: scale(1) translateZ(0);
+				}
+			}
+			.list-name {
+				width: 100%;
+				text-align: center;
+				span {
+					display: inline-block;
+					font-size: vw(28);
+					line-height: vw(30);
+          align-items: center;
+				}
+				.list-subnav {
+          width: 100%;
+					position: absolute;
+					top: vw(240);
+					left: 0;
+					.subnav-item {
+						width: 100%;
+						height: vw(108);
+						a {
+							background: #f6f6f6;
+							width: 100%;
+							height: vw(108);
+							font-size: vw(24);
+							display: block;
+							padding: 0 vw(30);
+							position: relative;
+							color: #5a5a5a;
+							font-weight: normal;
+							text-align: left;
+							span {
+								padding-left: vw(60);
+								font-size: 12px;
+								line-height: vw(108);
+							}
+							i {
+								font-size: vw(24);
+								width: vw(20);
+								height: vw(20);
+								line-height: 1;
+								position: absolute;
+								right: vw(40);
+								top: 50%;
+								margin-top: vw(-12);
+							}
+						}
+					}
+				}
+			}
+			// .list-subnav:nth-child(2) {
+			// 	height: 300px;
+			// 	background: red;
+			// }
+		}
+	}
+	.list-active {
+		font-weight: bold;
+		color: #0082c3;
+	}
+}
+.footer {
+	width: 100%;
+	overflow: hidden;
+	margin: 10px auto;
+	background-color: #f2f2f2;
+	.sport-banner {
+		width: 100%;
+		overflow: hidden;
+		padding: vw(20);
+		display: flex;
+		flex-wrap: wrap;
+		.banner-item {
+			width: 50%;
+			padding: vw(10);
+		}
+	}
+}
diff --git a/decathlon-wepapp/src/sass/Home/match.scss b/decathlon-wepapp/src/sass/Home/match.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e2fa9f368a57bb1acb2212f73bf249be570d3220
--- /dev/null
+++ b/decathlon-wepapp/src/sass/Home/match.scss
@@ -0,0 +1,64 @@
+@import '../../assets/sass/public/vw.scss';
+@import './common/common.scss';
+#match {
+	.match-title {
+		p {
+			font-size: vw(48);
+			line-height: vw(48);
+			font-weight: bold;
+			text-align: center;
+			margin-top: vw(60);
+			margin-bottom: vw(50);
+			color: #232323;
+		}
+	}
+	.match-outer {
+		padding: 0 vw(30);
+		margin: vw(40) 0;
+		.match-picture {
+			width: vw(690);
+			img {
+				width: 100%;
+				display: block;
+			}
+		}
+		.match-list {
+			width: 100%;
+			display: flex;
+			padding: vw(16) vw(8);
+			background: #f5f4fa;
+    }
+    // 有评价的样式
+    .match-many-list {
+			display: flex;
+      flex-wrap: wrap;
+      background: #F6F6F6;	
+		}
+	}
+	.match-hint {
+		width: 100%;
+		background-color: #f0eff6;
+		margin-top: 8px;
+		border-radius: 2px;
+		padding: 15px 15px 10px 15px;
+		overflow: hidden;
+		p:nth-child(1) {
+			font-weight: bold;
+			font-size: 14px;
+			margin-bottom: 10px;
+			line-height: 14px;
+		}
+		p:nth-child(2) {
+			font-size: 12px;
+			line-height: 15px;
+			color: #898989;
+		}
+		p:nth-child(3) {
+			font-size: 12px;
+			float: right;
+			margin-top: 8px;
+			display: flex;
+			position: relative;
+		}
+	}
+}
diff --git a/decathlon-wepapp/src/sass/Home/mouth.scss b/decathlon-wepapp/src/sass/Home/mouth.scss
new file mode 100644
index 0000000000000000000000000000000000000000..98cfa1340d7f9911803e1b6cdda5cf33405550d7
--- /dev/null
+++ b/decathlon-wepapp/src/sass/Home/mouth.scss
@@ -0,0 +1,134 @@
+@import '../../assets/sass/public/vw.scss';
+#mouth {
+	width: 100%;
+	.mouth-title {
+		width: 100%;
+		text-align: center;
+		box-sizing: border-box;
+		h3 {
+			margin: vw(60) auto;
+			line-height: vw(48);
+			font-weight: 700;
+			color: #232323;
+			font-size: vw(48);
+		}
+	}
+	.list {
+		width: 100%;
+		padding: 0 vw(20);
+		margin: 0 auto vw(40);
+		text-align: center;
+		ul {
+			display: flex;
+			li {
+				flex: 1;
+			}
+		}
+	}
+	a {
+		position: relative;
+		z-index: 1;
+		ul {
+			width: vw(3750);
+			li {
+				float: left;
+				width: vw(750);
+			}
+		}
+	}
+	#margin-top20 {
+    transform: translateY(vw(-40));
+    position: relative;
+		.mouth-nav {
+			display: flex;
+			overflow-x: auto;
+			padding-left: vw(20);
+			font-size: 0;
+			height: vw(560);
+			.mouth-nav-item {
+				flex-shrink: 0;
+				vertical-align: middle;
+				margin: 0 vw(10);
+				width: vw(300);
+				height: vw(510);
+				padding: vw(30);
+				background-color: #fff;
+				border-radius: vw(4);
+				border: none;
+				text-align: left;
+				a {
+					margin-top: -20px;
+					.nav-item-picture {
+						padding: 0;
+						height: vw(224);
+						img {
+							width: vw(200);
+							height: vw(200);
+						}
+					}
+					.nav-item-price {
+						margin-top: vw(26);
+						width: vw(170);
+						height: vw(60);
+						background: #ffe928;
+						font-size: vw(26);
+						line-height: vw(66);
+						text-align: center;
+						margin-bottom: vw(40);
+						span:nth-child(-n + 2) {
+							font-weight: bold;
+							height: vw(60);
+							font-size: vw(42);
+						}
+					}
+					.mouth-goods-title {
+						display: inline;
+						font-size: vw(24);
+						font-weight: 700;
+						padding: 0;
+						margin: 0;
+						line-height: vw(28);
+					}
+				}
+				.mouth-review {
+					font-size: vw(24);
+					padding-top: vw(10);
+					margin-bottom: vw(10);
+					transform: scale(0.9);
+					transform-origin: left center;
+					height: vw(54);
+					.review-score {
+						.review-star {
+							display: inline-block;
+							margin-right: vw(6);
+							width: vw(28);
+							height: vw(28);
+							background: url(https://pixl.decathlon.com.cn/s802611/star.svg?q=orig)
+								no-repeat;
+							background-size: 100% auto;
+						}
+					}
+				}
+			}
+		}
+		.process-bar {
+			display: block;
+			position: absolute;
+			z-index: 4;
+			bottom: 0;
+			left: vw(30);
+			right: vw(30);
+			-webkit-box-sizing: content-box;
+			box-sizing: content-box;
+			height: vw(6);
+			background-color: hsla(0, 0%, 71.8%, 0.25);
+      overflow: hidden;
+      .process-block {
+        width: 20%;
+        background-color: #0082c3;
+        height: 100%;
+        position: relative;
+      }
+		}
+	}
+}
diff --git a/decathlon-wepapp/src/sass/Home/newgoods.scss b/decathlon-wepapp/src/sass/Home/newgoods.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2cd7ecc79747b3f26568d28c4be37d761a6f768c
--- /dev/null
+++ b/decathlon-wepapp/src/sass/Home/newgoods.scss
@@ -0,0 +1,9 @@
+@import '../../assets/sass/public/vw.scss';
+h3 {
+	margin: vw(60) auto;
+	line-height: vw(48);
+	font-weight: 700;
+	color: #232323;
+	font-size: vw(48);
+	text-align: center;
+}
diff --git a/decathlon-wepapp/src/sass/Home/recall.scss b/decathlon-wepapp/src/sass/Home/recall.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5736c76e01f87d64703d69d253124c44f3d72f81
--- /dev/null
+++ b/decathlon-wepapp/src/sass/Home/recall.scss
@@ -0,0 +1,87 @@
+@import '../../assets/sass/public/vw.scss';
+h3 {
+	margin: vw(60) auto;
+	line-height: vw(48);
+	font-weight: 700;
+	color: #232323;
+	font-size: vw(48);
+	text-align: center;
+}
+
+.recall-list {
+	width: 100%;
+	margin: vw(60) auto;
+	height: vw(320);
+	white-space: nowrap;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: touch;
+	padding: 0 vw(30) vw(40) vw(30);
+	.recall-list-outer {
+		overflow-x: auto;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		.recall-list-item {
+			display: inline-block;
+			margin: 0 vw(30) vw(30) 0;
+			background-color: #fff;
+			width: 80%;
+			.top {
+				display: flex;
+				padding: vw(30);
+				box-sizing: border-box;
+				white-space: normal;
+				.top-icon {
+					width: vw(456);
+					margin-right: vw(30);
+					img {
+						width: 100%;
+					}
+				}
+				.top-content {
+					h4 {
+						font-size: vw(26);
+						font-weight: bold;
+						color: #e20c18;
+						line-height: vw(26);
+						margin-bottom: vw(4);
+					}
+					h5 {
+						font-size: vw(26);
+						font-weight: bold;
+						line-height: vw(30);
+						height: vw(30);
+						overflow: hidden;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						-webkit-line-clamp: 1;
+						-webkit-box-orient: vertical;
+					}
+					p {
+						font-size: vw(24);
+						line-height: vw(32);
+						margin-top: vw(12);
+						overflow: hidden;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						-webkit-line-clamp: 3;
+						-webkit-box-orient: vertical;
+						height: vw(96);
+					}
+				}
+			}
+			.footer {
+				padding: vw(10) vw(30) vw(30) vw(30);
+				.watch {
+					width: vw(260);
+					height: vw(60);
+					line-height: vw(60);
+					text-align: center;
+					margin: 0 auto;
+					background-color: #0082c3;
+					color: #fff;
+				}
+			}
+		}
+	}
+}
diff --git a/decathlon-wepapp/src/sass/commmon/base.css b/decathlon-wepapp/src/sass/commmon/base.css
new file mode 100644
index 0000000000000000000000000000000000000000..01e0b5a5db19acdf7da6afa15a50bf8a971b4ae2
--- /dev/null
+++ b/decathlon-wepapp/src/sass/commmon/base.css
@@ -0,0 +1,116 @@
+/*(1)清除默认样式*/
+html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img,input,header,footer,section,article,aside,figure,svg,use,figcaption{ 
+    margin:0; 
+    padding:0; 
+}
+fieldset, img,input,button { 
+    border:0 none; 
+    padding:0;
+    margin:0;
+    outline-style:none;
+}   /*去掉input等聚焦时的蓝色边框*/
+ul,li,ol{
+    list-style:none; 
+}   /* 去掉列表默认图标 */
+select, input { 
+    vertical-align:middle;
+}
+/*select, input, textarea { font-size:12px; margin:0; }*/
+textarea { 
+    resize:none; 
+} /*防止拖动*/
+img {
+    border:0; 
+    vertical-align:middle; 
+} /*  去掉图片低测默认的3像素空白缝隙，或者用display：block也可以*/
+table { 
+    border-collapse:collapse; 
+}    /* 消除边框重叠 */
+a {
+    text-decoration:none; 
+    color: #272727;
+}    /* 消除a标签默认下划线 */
+
+/*（2）添加公共样式*/
+/*body {
+    font:12px Arial,Verdana,"\5b8b\4f53";
+    color:#666;
+    background:#fff;
+}*/
+/*清除浮动（不管）*/
+.clearfix:before,.clearfix:after {  /*解决双倍margin*/
+    content:"";
+    display:table;
+}
+.clearfix:after{
+    clear:both;
+}
+.clearfix{
+    *zoom:1;/*IE/7/6*/
+}
+h1,h2,h3,h4,h5,h6 {font-weight:normal;font-size:1em;}  /*设置h标签的大小，设置跟父亲一样大的字体font-size:100%;*/
+s,i,em{
+    font-style:normal;
+    text-decoration:none;
+}
+
+
+/*公共类*/
+.container {  /*内容、版心 提取 */
+    width: vw(690);
+    /* background-color:yellow; */
+    margin:0 auto;
+}
+html,
+body {
+    height: 100%;
+    overflow-x:hidden;
+    background: #FAFAFA;
+}
+.fl {
+    float:left;
+}
+.fr {
+    float:right;
+}
+.ac {
+    text-align:center;
+}
+.hide {
+    display:none;
+}
+.f12{ font-size: 12px;}
+.f14{ font-size: 14px;}
+.f16{ font-size: 16px;}
+
+/*(3)公共部分的样式*/
+@media screen and(man-width:320px) {
+    html {
+        font-size: 12px;
+    }
+}
+@media screen and(min-width:321px) and (max-width:480px){
+    html {
+        font-size: 14px;
+    }
+}
+@media screen and(min-width:481px) and (max-width:768px){
+    html {
+        font-size: 16px;
+    }
+}
+@media screen and(min-width:769px) and (max-width:1204px){
+    html {
+        font-size: 18px;
+    }
+}
+@media screen and(min-width:1205px) {
+    html {
+        font-size: 20px;
+    }
+}
+
+
+
+
+
diff --git a/decathlon-wepapp/src/style/1.txt b/decathlon-wepapp/src/style/1.txt
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/decathlon-wepapp/src/style/Home/icon.css b/decathlon-wepapp/src/style/Home/icon.css
new file mode 100644
index 0000000000000000000000000000000000000000..f24ed10755f7731407115b3304ec8cde57f6f69b
--- /dev/null
+++ b/decathlon-wepapp/src/style/Home/icon.css
@@ -0,0 +1,9 @@
+@font-face {
+  font-family: 'iconfont';  /* project id 2085690 */
+  src: url('//at.alicdn.com/t/font_2085690_62cu8frv2y8.eot');
+  src: url('//at.alicdn.com/t/font_2085690_62cu8frv2y8.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_2085690_62cu8frv2y8.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_2085690_62cu8frv2y8.woff') format('woff'),
+  url('//at.alicdn.com/t/font_2085690_62cu8frv2y8.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_2085690_62cu8frv2y8.svg#iconfont') format('svg');
+}
\ No newline at end of file
diff --git a/decathlon-wepapp/src/style/common/reset.css b/decathlon-wepapp/src/style/common/reset.css
new file mode 100644
index 0000000000000000000000000000000000000000..a6febac3726bd78b12b450abb819e3912bbce151
--- /dev/null
+++ b/decathlon-wepapp/src/style/common/reset.css
@@ -0,0 +1,88 @@
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+html {
+  height: 100%;
+}
+ 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+ 
+ul {
+  list-style: none;
+}
+ 
+button,
+input,
+select,
+textarea {
+  margin: 0;
+}
+ 
+html {
+  box-sizing: border-box;
+}
+ 
+* {
+  box-sizing: inherit;
+}
+*:before, *:after {
+  box-sizing: inherit;
+}
+ 
+img,
+embed,
+object,
+audio,
+video {
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
+ 
+iframe {
+  border: 0;
+}
+ 
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+ 
+td,
+th {
+  padding: 0;
+  text-align: left;
+}
\ No newline at end of file
diff --git a/decathlon-wepapp/src/views/Home.vue b/decathlon-wepapp/src/views/Home.vue
index de0161c1ae1b6868a61bda2430043764277b8462..fc7c781cd7976b094f85de5100785dcaaf120949 100644
--- a/decathlon-wepapp/src/views/Home.vue
+++ b/decathlon-wepapp/src/views/Home.vue
@@ -1,19 +1,25 @@
 <template>
-  <div></div>
+  <div>
+    <app-nav></app-nav>
+    <app-main></app-main>
+  </div>
 </template>
 
 <script>
+import appNav from "../components/Home/nav";
+import appMain from "../components/Home/main";
 export default {
-  data () {
-    return {
-    }
+  data() {
+    return {};
   },
 
-  components: {},
+  components: {
+    appNav,
+    appMain
+  },
 
   methods: {}
-}
+};
 </script>
 
-<style scoped>
-</style>
\ No newline at end of file
+<style scoped></style>