From d4dbf38fd3e856509f46d373b8d3a04262cb0813 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Mon, 7 Aug 2017 23:49:33 +0800
Subject: [PATCH 01/15] init index page

---
 src/modules/css/common.css      |  878 +++++++++++++++++++++
 src/pages/index/App.vue         |   23 -
 src/pages/index/assets/logo.png |  Bin 6849 -> 0 bytes
 src/pages/index/index.css       | 1277 +++++++++++++++++++++++++++++++
 src/pages/index/index.html      |  227 +++++-
 src/pages/index/index.js        |   17 +-
 src/pages/index/router/index.js |   15 -
 7 files changed, 2375 insertions(+), 62 deletions(-)
 create mode 100644 src/modules/css/common.css
 delete mode 100644 src/pages/index/App.vue
 delete mode 100644 src/pages/index/assets/logo.png
 create mode 100644 src/pages/index/index.css
 delete mode 100644 src/pages/index/router/index.js

diff --git a/src/modules/css/common.css b/src/modules/css/common.css
new file mode 100644
index 0000000..219cd7e
--- /dev/null
+++ b/src/modules/css/common.css
@@ -0,0 +1,878 @@
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+b,
+big,
+blockquote,
+body,
+canvas,
+caption,
+center,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+object,
+ol,
+output,
+p,
+pre,
+q,
+ruby,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+tt,
+u,
+ul,
+var,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline
+}
+
+html {
+  line-height: 1
+}
+
+ol,
+ul {
+  list-style: none
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0
+}
+
+caption,
+td,
+th {
+  font-weight: 400;
+  vertical-align: middle
+}
+
+blockquote,
+q {
+  quotes: none
+}
+
+blockquote:after,
+blockquote:before,
+q:after,
+q:before {
+  content: "";
+  content: none
+}
+
+a img {
+  border: none
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+  display: block
+}
+
+html {
+  font-family: Helvetica, STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Tohoma, Arial
+}
+
+body {
+  color: #333;
+  background-color: #eee;
+  -webkit-backface-visibility: hidden
+}
+
+body.body-fixed-bottom {
+  padding-bottom: 40px
+}
+
+.container {
+  background-color: #f8f8f8
+}
+
+strong {
+  font-weight: 700
+}
+
+a {
+  color: #333;
+  background: transparent;
+  text-decoration: none
+}
+
+h1 {
+  font-size: 2em;
+  margin: .67em 0
+}
+
+h2 {
+  font-size: 18px;
+  line-height: 22px
+}
+
+h3 {
+  font-size: 15px;
+  line-height: 18px
+}
+
+button,
+input[type=email],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=text],
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none
+}
+
+.c-orange {
+  color: #f60!important
+}
+
+.c-orange-dark {
+  color: #f15a0c!important
+}
+
+.c-green {
+  color: #06bf04!important
+}
+
+.c-red {
+  color: #ed5050!important
+}
+
+.c-pink {
+  color: #ee614b!important
+}
+
+.c-white {
+  color: #fff!important
+}
+
+.c-gray-light {
+  color: #e5e5e5!important
+}
+
+.c-gray {
+  color: #c9c9c9!important
+}
+
+.c-gray-dark {
+  color: #999!important
+}
+
+.c-gray-darker {
+  color: #666!important
+}
+
+.c-black {
+  color: #333!important
+}
+
+.c-yellow {
+  color: #f09000!important
+}
+
+.c-light-yellow {
+  color: #fcff00!important
+}
+
+.c-blue {
+  color: #00a0f8!important
+}
+
+hr {
+  margin: 10px 0;
+  border: 0;
+  -o-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line.png) 2 stretch;
+  border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line.png) 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  hr {
+    border-top-width: 1px
+  }
+}
+
+hr.margin-0 {
+  margin: 0
+}
+
+hr.left-10 {
+  margin-left: 10px
+}
+
+.relative {
+  position: relative
+}
+
+.font-size-12 {
+  font-size: 12px!important
+}
+
+.font-size-14 {
+  font-size: 14px!important
+}
+
+.font-size-16 {
+  font-size: 16px!important
+}
+
+.font-size-18 {
+  font-size: 18px!important
+}
+
+.font-size-20 {
+  font-size: 20px!important
+}
+
+.font-size-22 {
+  font-size: 22px!important
+}
+
+.font-size-24 {
+  font-size: 24px!important
+}
+
+.font-size-26 {
+  font-size: 26px!important
+}
+
+.font-size-28 {
+  font-size: 28px!important
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.border-bottom-none {
+  border-bottom: 0!important
+}
+
+.border-top-none {
+  border-top: 0!important
+}
+
+.link,
+.link:active,
+.link:hover,
+.link:link,
+.link:visited {
+  color: #07d
+}
+
+.clearfix {
+  zoom: 1
+}
+
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.pull-left {
+  float: left
+}
+
+.pull-right {
+  float: right
+}
+
+.show {
+  display: block
+}
+
+.hide {
+  display: none!important;
+  visibility: hidden
+}
+
+.center,
+.text-center {
+  text-align: center
+}
+
+.text-left {
+  text-align: left
+}
+
+.text-right {
+  text-align: right
+}
+
+.loading {
+  background-image: url(https://b.yzcdn.cn/v2/image/loader.gif)!important;
+  background-repeat: no-repeat!important;
+  background-position: 50%!important;
+  background-size: 16px 16px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .loading {
+    background-image: url(/v2/image/loader@2x.gif)!important
+  }
+}
+
+.with-bs-bottom,
+.with-bs-top {
+  background: url(/v2/image/wap/bottom_line.png) 0 0 no-repeat;
+  background-size: 100% 1px
+}
+
+.with-bs-bottom {
+  background-position: 0 100%
+}
+
+.arrow-right:after {
+  content: "";
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-top: 2px solid #cbc9cc;
+  border-right: 2px solid #cbc9cc;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: 50%;
+  right: 3px;
+  margin-top: -5px
+}
+
+.wrapper {
+  width: 320px
+}
+
+.content,
+.wrapper {
+  margin: 0 auto
+}
+
+.container .content {
+  zoom: 1
+}
+
+.container .content:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.copyright {
+  background-color: #f8f8f8;
+  color: #999;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center
+}
+
+.copyright .ft-links {
+  padding: 15px
+}
+
+.copyright .ft-links>a {
+  margin: 0 6px;
+  color: #333
+}
+
+.copyright .ft-links~.ft-copyright {
+  -o-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line.png) 2 stretch;
+  border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line.png) 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .copyright .ft-links~.ft-copyright {
+    border-top-width: 1px
+  }
+}
+
+.copyright .ft-copyright {
+  padding: 50px 0 20px;
+  margin: 0 15px;
+  font-size: 12px;
+  background: url(/v2/image/wap/common/logo@2x.png) no-repeat center 20px;
+  background-size: 73px 24px
+}
+
+.copyright .ft-copyright>a {
+  color: #ccc
+}
+
+.copyright .pf-copyright {
+  display: block;
+  background: url(/v2/image/pf/ui/copyright.png) no-repeat center 20px;
+  background-size: 73px 24px
+}
+
+.footer {
+  margin: 0;
+  padding: 0;
+  min-height: 1px;
+  text-align: center;
+  line-height: 16px;
+  background-color: #f8f8f8
+}
+
+.footer .link-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-bottom: -3px;
+  margin-right: 10px;
+  background-image: url("data:image/png;base64,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");
+  background-repeat: no-repeat;
+  background-size: 16px
+}
+
+.footer .link-title {
+  font-size: 16px
+}
+
+.full-screen .footer {
+  margin-top: 0
+}
+
+.btn {
+  display: inline-block;
+  border-radius: 3px;
+  padding: 5px 4px;
+  text-align: center;
+  margin: 0;
+  font-size: 12px;
+  cursor: pointer;
+  line-height: 1.5;
+  -webkit-appearance: none;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+  color: #999
+}
+
+.btn-disabled,
+.btn[disabled] {
+  background-color: #c9c9c9!important;
+  background-image: none!important;
+  border: 1px solid transparent!important;
+  color: #fff!important
+}
+
+.btn-disabled:active,
+.btn[disabled]:active {
+  background-color: #c9c9c9!important;
+  background-image: none!important;
+  border: 1px solid #bcbcbc!important
+}
+
+.btn-default {
+  color: #999;
+  background-color: #fff;
+  border: 1px solid #e5e5e5
+}
+
+.btn-blue {
+  color: #fff;
+  background-color: #00a0f8;
+  border-color: #00a0f8
+}
+
+.btn-gray-dark {
+  color: #333;
+  background-color: #999;
+  border-color: #999
+}
+
+.btn-green {
+  color: #fff;
+  background-color: #06bf04;
+  border-color: #03b401
+}
+
+.btn-red {
+  color: #fff;
+  background-color: #ed5050;
+  border-color: #ed5050
+}
+
+.btn-pink {
+  color: #fff;
+  background-color: #ee614b;
+  border-color: #ee614b
+}
+
+.btn-white {
+  color: #333;
+  background-color: #fff;
+  border-color: #e5e5e5
+}
+
+.btn-yellow {
+  color: #fff;
+  background-color: #f09000;
+  border-color: #f09000
+}
+
+.btn-grayeee {
+  color: #999;
+  background-color: #eee;
+  border-color: 1px solid #ebebeb
+}
+
+.btn-orange {
+  color: #fff;
+  border-color: #f60;
+  background-color: #f60
+}
+
+.btn-orange-dark {
+  color: #fff;
+  border-color: #f15a0c;
+  background-color: #f15a0c
+}
+
+.btn-block {
+  text-align: center;
+  width: 100%;
+  padding: 11px 10px;
+  font-size: 16px;
+  line-height: 16px;
+  border-radius: 4px;
+  box-sizing: border-box
+}
+
+.btn-xsmall {
+  padding: 8px 10px
+}
+
+.btn-xsmall,
+.btn-xxsmall {
+  line-height: 14px;
+  width: auto;
+  font-size: 12px
+}
+
+.btn-xxsmall {
+  padding: 4px 10px
+}
+
+.btn-l {
+  padding: 9px 4px;
+  font-size: 14px
+}
+
+.btn-opt {
+  min-width: 50px
+}
+
+.motify {
+  display: none;
+  position: fixed;
+  top: 35%;
+  left: 50%;
+  width: 220px;
+  padding: 0;
+  margin: 0 0 0 -110px;
+  z-index: 2;
+  background: rgba(0, 0, 0, .8);
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.5em;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
+}
+
+.motify .motify-inner {
+  padding: 10px;
+  text-align: center;
+  word-wrap: break-word
+}
+
+.motify p {
+  margin: 0 0 5px
+}
+
+.motify p:last-of-type {
+  margin-bottom: 0
+}
+
+.fullscreen-guide {
+  z-index: 1;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .9);
+  text-align: center
+}
+
+.fullscreen-guide.hide {
+  display: none
+}
+
+.fullscreen-guide .guide-close {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  font-size: 40px;
+  color: #fff;
+  cursor: pointer
+}
+
+.fullscreen-guide .guide-arrow {
+  position: absolute;
+  top: 2px;
+  right: 15px;
+  background: url(/v2/image/wap/guide_arrow.png) 0 0 no-repeat;
+  width: 47px;
+  height: 44px
+}
+
+.fullscreen-guide .guide-inner {
+  padding-top: 48px;
+  width: 320px;
+  margin: 0 auto
+}
+
+.fullscreen-guide .step {
+  width: 260px;
+  display: inline-block;
+  text-align: left;
+  margin-bottom: 15px
+}
+
+.follow-guide .guide-inner-title {
+  color: #fff;
+  border-bottom: 1px solid #ccc;
+  margin: 10px;
+  padding-bottom: 30px;
+  font-size: 18px;
+  font-weight: 400
+}
+
+.follow-guide .wxid {
+  width: 260px;
+  display: inline-block;
+  text-align: left;
+  margin-bottom: 25px;
+  padding-left: 65px;
+  font-size: 18px
+}
+
+.follow-guide .wxid strong {
+  padding: 1px 5px;
+  background-color: #fff;
+  color: #000;
+  border-radius: 4px
+}
+
+.follow-guide .step-1,
+.follow-guide .step-2,
+.follow-guide .step-3 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none
+}
+
+.follow-guide .step-1 {
+  height: 29px
+}
+
+.follow-guide .step-2 {
+  margin-bottom: 10px;
+  height: 64px;
+  background: url(/v2/image/wap/step_2.png) no-repeat
+}
+
+.follow-guide .step-3 {
+  margin-top: 10px;
+  height: 68px;
+  background: url(/v2/image/wap/step_3.png) no-repeat
+}
+
+.follow-guide .quick-subscribe {
+  margin: 140px 15px 0;
+  padding: 10px;
+  background: #fff;
+  border: 2px solid #f2f2f2;
+  border-radius: 10px
+}
+
+.follow-guide .quick-subscribe h2 {
+  font-size: 14px;
+  border-bottom: 1px solid #f2f2f2;
+  padding-bottom: 20px;
+  margin: 12px 0
+}
+
+.follow-guide .quick-subscribe .btn {
+  font-size: 14px;
+  background: #4b0;
+  color: #fff;
+  display: inline-block;
+  line-height: 38px;
+  padding: 0 26px;
+  border-radius: 4px
+}
+
+.fuck-taobao .step-1 {
+  height: 29px;
+  background: url(/v2/image/wap/step_1.png) no-repeat
+}
+
+.fuck-taobao .step-2 {
+  height: 86px;
+  background: url(/v2/image/wap/ftios_step_2.png) no-repeat
+}
+
+.fuck-taobao .step-and-2 {
+  height: 62px;
+  background: url(/v2/image/wap/ftand_step_2.png) no-repeat
+}
+
+.fav-guide .step-1 {
+  height: 29px;
+  background: url(/v2/image/wap/step_1.png) no-repeat
+}
+
+.fav-guide .step-2 {
+  height: 86px;
+  background: url(/v2/image/wap/fav_step_2.png) no-repeat
+}
+
+@media only screen and (-o-min-device-pixel-ratio:3/2),
+only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .fullscreen-guide .guide-arrow {
+    background-image: url(/v2/image/wap/guide_arrow@2x.png);
+    background-size: 47px 44px
+  }
+  .follow-guide .step-2 {
+    background-image: url(/v2/image/wap/step_2@2x.png);
+    background-size: 260px 64px
+  }
+  .follow-guide .step-3 {
+    background-image: url(/v2/image/wap/step_3@2x.png);
+    background-size: 260px 68px
+  }
+  .fuck-taobao .step-1 {
+    background-image: url(/v2/image/wap/step_1@2x.png);
+    background-size: 260px 29px
+  }
+  .fuck-taobao .step-2 {
+    background-image: url(/v2/image/wap/ftios_step_2@2x.png);
+    background-size: 248px 86px
+  }
+  .fuck-taobao .step-and-2 {
+    background-image: url(/v2/image/wap/ftand_step_2@2x.png);
+    background-size: 260px 62px
+  }
+  .fav-guide .step-1 {
+    background-image: url(/v2/image/wap/step_1@2x.png);
+    background-size: 260px 29px
+  }
+  .fav-guide .step-2 {
+    background-image: url(/v2/image/wap/fav_step_2@2x.png);
+    background-size: 260px 86px
+  }
+  .share-guide .step-1 {
+    background-image: url(/v2/image/wap/step_1@2x.png);
+    background-size: 260px 29px
+  }
+  .share-guide .step-2 {
+    background-image: url(/v2/image/wap/share_step_2@2x.png);
+    background-size: 260px 86px
+  }
+}
+
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  font-family: Helvetica, STHeiti STXihei, Microsoft YaHei, Tohoma, Arial
+}
+
+ 
\ No newline at end of file
diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue
deleted file mode 100644
index 97c2c84..0000000
--- a/src/pages/index/App.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div id="app">
-    <img src="./assets/logo.png">
-    <router-view></router-view>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'app'
-}
-</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;
-}
-</style>
diff --git a/src/pages/index/assets/logo.png b/src/pages/index/assets/logo.png
deleted file mode 100644
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6849
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

diff --git a/src/pages/index/index.css b/src/pages/index/index.css
new file mode 100644
index 0000000..d7858ce
--- /dev/null
+++ b/src/pages/index/index.css
@@ -0,0 +1,1277 @@
+.wakeup-app {
+  position: fixed;
+  top: -60px;
+  left: 0;
+  z-index: 5;
+  background-color: #ececec;
+  width: 100%;
+  height: 60px;
+  cursor: pointer;
+  text-align: center;
+  overflow: hidden;
+  transition: all .5s linear
+}
+
+.wakeup-app .close {
+  float: left;
+  width: 40px;
+  height: 60px;
+  position: relative;
+  cursor: pointer
+}
+
+.wakeup-app .close:after {
+  position: absolute;
+  display: block;
+  content: "\D7";
+  width: 18px;
+  height: 18px;
+  font-size: 14px;
+  line-height: 16px;
+  border-radius: 9px;
+  color: #fff;
+  background-color: #dddedf;
+  top: 50%;
+  left: 50%;
+  margin-top: -9px;
+  margin-left: -9px
+}
+
+.wakeup-app .app-icon {
+  float: left;
+  width: 60px;
+  height: 60px;
+  background-image: url(/v2/image/wap/weixin_share_default_logo.png);
+  background-size: 80% 80%;
+  background-repeat: no-repeat;
+  background-position: 50%
+}
+
+.wakeup-app .description {
+  float: left;
+  text-align: left;
+  padding: 5px 0 5px 3px
+}
+
+.wakeup-app .description .title {
+  margin: 6px 0;
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 400
+}
+
+.wakeup-app .description .meta {
+  color: #999;
+  line-height: 1;
+  font-size: 12px;
+  letter-spacing: 1px
+}
+
+.wakeup-app .btn {
+  float: right;
+  margin-top: 12px;
+  margin-right: 12px;
+  padding: 8px;
+  border-color: #fc5959;
+  background-color: #fc5959;
+  letter-spacing: 1px
+}
+
+.wakeup-app-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 5;
+  background-color: #000;
+  opacity: .8;
+  z-index: 6
+}
+
+.wakeup-app-opentip {
+  position: fixed;
+  height: 144px;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  z-index: 7
+}
+
+.wakeup-app-opentip .lay {
+  width: 100%;
+  height: 120px;
+  background-color: #f9f9f9;
+  border-radius: 0 0 8px 8px;
+  background: #f9f9f9 url(/v2/image/wap/opentip.png) 100% 4px no-repeat;
+  background-size: 127px auto
+}
+
+.wakeup-app-opentip .note {
+  float: right;
+  margin: 39px 58px 0 0;
+  width: 160px;
+  line-height: 20px
+}
+
+.wakeup-app-opentip .note h3 {
+  font-size: 20px;
+  margin-bottom: 6px;
+  font-weight: 400
+}
+
+.wakeup-app-opentip .note p {
+  font-size: 14px
+}
+
+.bottom-nav {
+  position: fixed;
+  width: 100%;
+  height: 50px;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 8;
+  -o-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .bottom-nav {
+    border-top-width: 1px
+  }
+}
+
+.bottom-nav ul {
+  position: relative;
+  height: 100%;
+  zoom: 1
+}
+
+.bottom-nav ul:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.bottom-nav li {
+  display: block;
+  float: left;
+  width: 25%;
+  height: 100%
+}
+
+.bottom-nav a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding-top: 8px;
+  text-align: center;
+  font-size: 10px
+}
+
+.bottom-nav [class^=icon-] {
+  display: block;
+  width: 22px;
+  height: 22px;
+  margin: auto;
+  margin-bottom: 4px;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: 100% auto
+}
+
+.bottom-nav .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-cart {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-user {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .active a {
+  color: #ff6366
+}
+
+.bottom-nav .active .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .active .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .active .icon-cart {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABMJJREFUeAHtWs2PFEUU7+qZHUWcxY/swesEo0j8hIs3FENCOHmYDRv+As/EgzEmaDSeTOTEwXAzWZjJ7kII2YuHvWCMAUXQNbDJEi7Augo4w7q7dE8Xv9dMLVU93duzUzU4tVQnu1WvXtV7r3793qvqqvE89zgEHAIOAYeAQ8Ah4BBwCGghwOTRwdjYl4zzjz3GSnL7pqhz3sI8bnPGzvEw/LxUr1+U56UAEY6NNcAsyx02ZZ3z/yLO95ZOnvxJzM8XFSo550dRrFAl808eYGudsWcYY9/K5iseITOy6vCaG+C9lMW3ph0v++Lc3FO7L1wIyGbFI7qZBI3vpt/A92EsFCCQrRsGAon0t4GfZHcG/i132zAQURRtCiC4513SAsILw80RGpz/ogXEad+fw4qyLAuxsY5VQg+I0Xq9Bbf63cbJyzaHQaAHBAkDmraHx92nJybmZWA2nCxpcOR5VidMePSvMghU7wkIFkV2e0QUKWHRMxCNZvNyvAVPwmoJHTFmBogXp6cb2Fhds2TenWYmEiV16Ck0aKDFW+2lrycmrtIc5KdnIICElQmTXuCRON/LMGh4BJZQK4HAwVNHfiBIevaIIAisXDnSEqUWEFsmJ68jPP5VHWzwKRzVmfUImjKE2uUVnK/+ePPmbNrr6jk0YmGWJUz69H5vZiY0DgQEW5UwcU6ZGhYEjK5HWBUaOFQ6n+YN2kBcbzT+QMJMdbUshf9bO+417vv+mSz9Wh7x8vT0KsLjSpbwQWpHYv/q2fHxhSybilmMbtsRdxQeO9v98YXu3Y/rnCevClQaA9tjHha6/ZPyPG8J3noLL+pPfC0fH6rVTin6EoQ2EByHucz3D8VyOb9WPHFie0KHFaRWaMQz9H05YVb+2b9/2IqZJ4zUBmJlZeXREgr3HN627c2EDitIbSDKU1N/USyK2SIm3xZ1m0ptIGiymPxaePiMvWUTAMJWI0BA2Fp44Hv/yQUCn7ZrQGBN3Hl+164hgbQtpRmPkE+18WubNyoV6/KEESBOR9FVJMxF8fZZofBdUK2+e2vfvq2ibdBLdXenYW1w8OAXWD0/6xCBpIE2+v0S7Tqpjqsy9rCMiZx/6o7zkb1iJ9nJF7JJ3zK21seGxsc/ydFCt3dmnrsHDjy/tVz+Afa9Y0aiMSnRZBiW6M52PYlGQoMUPHf27J1mq/U+HOBTvJKfESoL+FtdT/lj4EWw4XgeCGSHMY9Yb1JHEucer1Writ6RxUWFLjebCr2lUlHo0r17Cl1cXlbpkZGYXpifV34etJ6NjucQUBFQXEplmaNq1Wrhw2LxMCSO4oLlFWRyOsypTYXhN93Er7DElBwhTy77DkRsfKFAq8keWTHVkVhnplqtD7oBw5ScpA2CNrZqCIHJkjwhDQTqR+1tT0kO66BNyekQ3G7oOxDQM5qlvN2exxfD8/rl8YWc1LLvQFBOSNXcbszji7F5/fL4Qk5W2Xcg2okxSz9dG3Z1Cp7XL4+faUCb0XcgoKeWY0QeXwzP65fHF3JSy74DQUskrQ5p2uNVA/w0XrLNlJykXEEXRKVfZX12lr++Y8f3r/r+EnS8gFgehhtfRv0ols6Pulk6yTZTckiWexwCDgGHgEPAIaCHwAMJYdPtuf90jwAAAABJRU5ErkJggg==")
+}
+
+.bottom-nav .active .icon-user {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABLNJREFUeAHtW0toE1EUnZekrfVT1IVWqS1CiwvFLir4wUItCEI3Wp02deVOcFEUVyJCFn5WRdCFC0FQEZtEW0EFF4IFPxutohZ1UXGhbaB+UCm2zWee545BsFhyZ3JnGHEehCaZM+fce3Lnzbw7U8MIR+hA6EDoQOhA6ADXAcUFSuAShhE5appbjEhkp6FUCzhXIoCVxK0NYxx/xg2thw3LunEinX6UMAyLtvkxfDHiXVvbvLoVK3ohdhhJLWMmNgFz+j5kMmdWDw1NM/dxDfPciHxX125UwGlUwCpXUWr9HhVyKJZKXXe1P3OnCBPnBqZy8fgJIxq95toEUiUDwWFz4ZObQDj7eEWs8vH4VSTRzQmCjdE6Gevv7wEeR43s8KQi8OsdFzeB8oaxNresBzabeEXYcwIdDl6OQmGP9JwhWhF0drAnRi9NIG5MvraWoI6oEXSKtCc3wQD/SoUJ1Nb660Z3X4oZkcDvhOOMrhN8GaSVgKaUmNgckTPNrSoWuy8VGIdH5/OtFen0Aw62FEbMUfuyuZSa9Ha6VBcackb8WjsIhcWkEdSUM6K4eGKmIAWzF2wSZGJGYLIRC4qbmKSmmBHc4EVxSoldaosZUewniOZZikxrnSmF4W4XMwKC1Fjxe4hpyhlBnSW/h6CmnBFor/ntA7X0pDTFjKAeI4KakAqMwTNR1GRAS0PEjEig0Uo9xtKSMgjSIk0ZNsFFCwVEjVZ0od9LBTcnDzRsrTkBzjeIVQRJ291mNFqdh+FwD2hId7ZFjaB0qHOE8/tJh6mx4cQt3Z0icbFl+KxMwuZt0RBN3WbJyrArwaMOtpcV8btA/pUbPF4dGr+NoDfhLb8/7DCMBE7XQb0JPCvU8GPoQOjALwc8nSwnTHPhkmh0I9YFa5XW9bj504BXPd7TMxLVeF+NS/L5xR9jGp9n8Hka+M/4bkwpNYbT5pil9Rt893heMvm2iBX/I2rEvba2WOvy5TuQUAcC3wzydXgfFYta6y/gfYLXnVw2279gYECsQyViRLa7uxlE+1QkshdJc5+IKdcfFIq+p5W6/DCTubJtaChfDmFZRvzo7KyrrKzsw6/eVU4Q5e4LQ16jSdNbkUrddcvlygg6BLbW1h7GMXwMwgvcikvvB0MGpwuF/YvS6Y9OuR0b8aSlpaK5qSkJE3Y5FfMDj/nj5dTkZHvNzZufnOg5MqJYCWRCpxMRv7GojBdTMzPtNYODdPZhDUf9iNba2otBN4GyRozrq6uqbiUcdODYFYGHw3ZBYYBlb0BAlmUdqEwmz3HCYVcETlOnOIRBwkSUOpIyTdZ1DMuIXE9PO0pnTZCSZMWCR4w6o9EdHCzLCBB1cMiCiEElb+fExTNC6y0cskBitN7EiYtlBGbhBg5ZEDE4pFnPgLOMQIJLgpgkKyallnJwXCO+c8gCidH6KyculhG4UhvhkAURg8nyKSculhFoltzmkAURowqF85y4WEY8Hx09i8XMKw5hkDCo5Du4Pch6hoJlxIbh4ZyVze4G8bMgJVoilvT3b9/Y/y/CXmuQqL0Eb2w8iDWHiVNqE75aXCIYvzd/RuWOaMu6gDXGJb/FQ73QgdCB0IHQgf/FgZ+UQn2ZrGr7bgAAAABJRU5ErkJggg==")
+}
+
+::-webkit-scrollbar {
+  display: none
+}
+
+body,
+html {
+  -webkit-tap-highlight-color: transparent
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden
+}
+
+.container {
+  background-color: #f4f4f4
+}
+
+.with-bottom-nav {
+  padding-bottom: 50px;
+  box-sizing: border-box
+}
+
+.block-item {
+  position: relative;
+  display: block;
+  padding: 10px;
+  line-height: 22px;
+  border: 0 none;
+  -o-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  overflow: hidden
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .block-item {
+    border-top-width: 1px
+  }
+}
+
+.block-item .btn-auth-code {
+  position: absolute;
+  top: 6px;
+  right: 0;
+  height: 30px;
+  line-height: 30px;
+  padding-left: 7px;
+  padding-right: 7px;
+  font-weight: 700
+}
+
+.block-item .verify-image {
+  position: absolute;
+  width: 80px;
+  height: 30px;
+  right: 10px;
+  top: 7px
+}
+
+.block-item.border-none {
+  border-bottom: 0 none
+}
+
+.block-item ul {
+  padding-right: 50px
+}
+
+.block-item ul em {
+  color: #999
+}
+
+.block-item h4.block-item-title {
+  line-height: 22px;
+  float: left;
+  margin-right: 10px
+}
+
+.swiper-container {
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 1
+}
+
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  -webkit-transition-property: -webkit-transform, left, top;
+  -webkit-transition-duration: 0s;
+  -webkit-transform: translateZ(0);
+  -webkit-transition-timing-function: ease;
+  -moz-transition-property: -moz-transform, left, top;
+  -moz-transition-duration: 0s;
+  -moz-transform: translateZ(0);
+  -moz-transition-timing-function: ease;
+  -o-transition-property: -o-transform, left, top;
+  -o-transition-duration: 0s;
+  -o-transform: translateZ(0);
+  -o-transition-timing-function: ease;
+  -o-transform: translate(0);
+  -ms-transition-property: -ms-transform, left, top;
+  -ms-transition-duration: 0s;
+  -ms-transform: translateZ(0);
+  -ms-transition-timing-function: ease;
+  transition-property: left, top, -webkit-transform;
+  transition-property: transform, left, top;
+  transition-property: transform, left, top, -webkit-transform;
+  transition-duration: 0s;
+  transform: translateZ(0);
+  transition-timing-function: ease
+}
+
+.swiper-free-mode>.swiper-wrapper {
+  transition-timing-function: ease-out;
+  margin: 0 auto
+}
+
+.swiper-slide {
+  float: left
+}
+
+.swiper-wp8-horizontal {
+  -ms-touch-action: pan-y
+}
+
+.swiper-wp8-vertical {
+  -ms-touch-action: pan-x
+}
+
+.swiper-pagination {
+  margin: 0;
+  text-align: right;
+  position: absolute;
+  bottom: 5px;
+  width: 100%;
+  z-index: 1
+}
+
+.swp-thumbnail-list {
+  margin-right: 6px
+}
+
+.swiper-pagination-switch {
+  display: inline-block;
+  margin: 7px 4px 0;
+  width: 5px;
+  height: 5px;
+  background: url(/v2/image/pagination.png) no-repeat scroll -1px -1px;
+  cursor: pointer
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .swiper-pagination-switch {
+    background-image: url(/v2/image/pagination@2x.png);
+    background-position: 0 0;
+    background-size: 5px 10px
+  }
+}
+
+.swiper-active-switch {
+  background-position: -1px -8px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .swiper-active-switch {
+    background-image: url(/v2/image/pagination@2x.png);
+    background-position: 0 -5px;
+    background-size: 5px 10px
+  }
+}
+
+.swp .swiper-wrapper,
+.swp .swp-page {
+  overflow: hidden
+}
+
+.swp .swp-page {
+  display: none;
+  width: 100%;
+  height: 100%;
+  text-align: center
+}
+
+.swp .swp-page img {
+  max-width: 100%;
+  max-height: 100%
+}
+
+.swp .swp-page:first-child {
+  display: block
+}
+
+.goods-item {
+  background: #fff
+}
+
+.goods-item .thumb {
+  margin-bottom: 6px;
+  text-align: center;
+  background-color: #f4f4f4;
+  position: relative
+}
+
+.goods-item .thumb:after {
+  content: " ";
+  display: block;
+  padding-top: 100%
+}
+
+.goods-item .thumb img {
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  max-width: 100%;
+  max-height: 100%
+}
+
+.goods-item .thumb .sell-out {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: url(/v2/image/yzapp/h5/2listicon_shouqing@2x.png) no-repeat 50%;
+  background-size: 40% auto;
+  background-color: rgba(0, 0, 0, .3)
+}
+
+.goods-item .thumb .sell-out-34 {
+  background-size: 34% auto
+}
+
+.goods-item .thumb .sell-out-50 {
+  background-size: 50% auto
+}
+
+.goods-item .thumb .sell-out-60 {
+  background-size: 60% auto
+}
+
+.goods-item .detail .title {
+  padding-bottom: 8px;
+  font-size: 12px;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.goods-item .detail .price {
+  padding-bottom: 8px;
+  font-size: 14px;
+  color: #ff525e
+}
+
+.daily {
+  margin-bottom: 10px;
+  position: relative;
+  overflow: hidden;
+  zoom: 1
+}
+
+.daily:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.daily-item {
+  background-color: #fff;
+  margin-bottom: 12px
+}
+
+.daily-pic {
+  position: relative
+}
+
+.daily-pic:after {
+  content: " ";
+  display: block;
+  padding-top: 54%
+}
+
+.daily-pic:before {
+  content: " ";
+  display: table;
+  clear: both;
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  margin-left: -9px;
+  border: 9px solid;
+  border-bottom-width: 12px;
+  z-index: 4;
+  border-color: transparent transparent #fff
+}
+
+.daily-pic img {
+  position: absolute;
+  width: 100%;
+  height: 100%
+}
+
+.daily-pic.no-goods:before {
+  display: none;
+  content: ""
+}
+
+.daily-goods {
+  padding: 12px 8px 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch
+}
+
+.daily-goods .goods-item {
+  vertical-align: top
+}
+
+.daily-goods .thumb {
+  margin-bottom: 12px;
+  position: relative
+}
+
+.daily-goods .thumb:before {
+  z-index: 2;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border: 1px solid #e5e5e5
+}
+
+.daily-goods .thumbs {
+  position: relative;
+  background-color: #fff;
+  margin-bottom: 12px;
+  overflow: hidden
+}
+
+.daily-goods .thumbs .img-box {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  width: 47%;
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative
+}
+
+.daily-goods .thumbs .img-box:after {
+  content: " ";
+  display: block;
+  padding-top: 100%
+}
+
+.daily-goods .thumbs .img-box img {
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  max-width: 100%;
+  max-height: 100%
+}
+
+.daily-goods .thumbs .img-box:before {
+  z-index: 2;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border: 1px solid #e5e5e5
+}
+
+.daily-goods .thumbs .img-box:first-child {
+  margin-right: 6%
+}
+
+.daily-goods .thumbs-group {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex
+}
+
+.daily-goods .thumbs-group:first-child {
+  margin-bottom: 6%
+}
+
+.daily-goods .daily-goods-cont {
+  white-space: nowrap
+}
+
+.daily-goods .daily-goods-cont li {
+  display: inline-block;
+  width: 90px;
+  margin-right: 5px;
+  vertical-align: top
+}
+
+.img-box {
+  position: relative
+}
+
+.img-box:after {
+  content: " ";
+  display: block;
+  padding-top: 100%
+}
+
+.img-box img {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0
+}
+
+.line-block:before {
+  content: "";
+  display: block;
+  margin: 10px
+}
+
+.line-block .lineblock-title {
+  display: block;
+  text-align: center;
+  margin-top: -17px;
+  margin-bottom: 17px;
+  line-height: 14px
+}
+
+.line-block .lineblock-font {
+  display: inline-block;
+  padding: 0 10px;
+  background-color: #fff;
+  color: #22c415
+}
+
+.line-block.line-block-red:before {
+  border-top: 1px solid #f33
+}
+
+.line-block.line-block-red .lineblock-font {
+  color: #f33
+}
+
+.line-block.line-block-green:before {
+  border-top: 1px solid #22c415
+}
+
+.line-block.line-block-green .lineblock-font {
+  color: #22c415
+}
+
+.line-block.line-block-gray:before {
+  border-top: 1px solid #eee
+}
+
+.line-block.line-block-gray .lineblock-font {
+  color: #999;
+  background-color: #f8f8f8
+}
+
+.list-finished,
+.loading-more {
+  width: 100%;
+  padding: 20px 10px;
+  vertical-align: middle;
+  text-align: center;
+  color: #999;
+  font-size: 12px;
+  line-height: 20px;
+  box-sizing: border-box
+}
+
+.list-finished span,
+.loading-more span {
+  display: inline-block;
+  margin-top: 10px;
+  width: 16px;
+  height: 16px;
+  background: url(https://b.yzcdn.cn/v2/image/loader.gif) no-repeat 50%;
+  background-size: 16px 16px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .list-finished span,
+  .loading-more span {
+    background-image: url(https://b.yzcdn.cn/v2/image/loader@2x.gif)
+  }
+}
+
+.custom-image-swiper {
+  width: 100%;
+  position: relative;
+  font-size: 0
+}
+
+.custom-image-swiper .swiper-wrapper {
+  position: relative
+}
+
+.custom-image-swiper .swiper-wrapper:after {
+  content: " ";
+  display: block;
+  padding-top: 48%
+}
+
+.custom-image-swiper .title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0 auto;
+  text-align: left;
+  box-sizing: border-box;
+  padding: 5px 15px;
+  z-index: 3;
+  background-color: rgba(51, 51, 51, .8);
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.5
+}
+
+.custom-image-swiper a[href="javascript:;"],
+.custom-image-swiper a[href="javascript:void(0);"] {
+  cursor: default
+}
+
+.custom-image-swiper .swp-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-align: center
+}
+
+.custom-image-swiper .swp-page img {
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%
+}
+
+.custom-image-swiper .swiper-slide a {
+  display: block;
+  position: relative;
+  text-align: center;
+  width: 320px
+}
+
+.custom-image-swiper .swiper-slide a img {
+  max-width: 100%;
+  height: auto
+}
+
+.custom-image-swiper-single .swiper-wrapper {
+  position: relative
+}
+
+.custom-image-swiper-single .swiper-wrapper:after {
+  content: " ";
+  display: block;
+  padding-top: 0
+}
+
+.custom-image-swiper-single .swp-page {
+  position: static
+}
+
+.custom-image-swiper-single .swiper-slide {
+  float: none
+}
+
+.section-title {
+  position: relative;
+  display: block;
+  padding: 15px 0 5px 10px;
+  text-align: left;
+  color: #999;
+  font-size: 14px
+}
+
+.section-title .more {
+  position: absolute;
+  display: block;
+  width: 50px;
+  right: 0;
+  top: 20px;
+  padding-right: 15px;
+  text-align: right
+}
+
+.section-title .more i {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAA8xJREFUSA2llltIVFEUhp3jZZzpJlFkROBL1EOBEUE9RTeURgrpJfDFh0ERr2P3HmKyC3SB8YIwivMiPYR0Rcsgix4ysKCCMOhKRNr0UEbKyDhe+tZwthxP55xGO7BZe+/1r/WvtfbeZ29XWgrfzMyMq7GxcZvL5dpLfy0mq2luxlHGw8h+j8fTV15eHvuXO5cToKOjY/no6OhJMKW0IRz3Ij9omhZFxqenp3MlAOZ3IiWgB+np6cHq6urX6C0/W0IyOo6TIzi5RrtcW1v7xdKDPhmJRJaMjY2VEoQE+IhWFQgEfplt/iJsbW1dPDExcRVgDq0Uo89mI6dxZ2fnopGRkQaCPUAl9tfU1Lwx4ucQSpSU8AkZ9WdnZ9eyJgkjeD795ubmErINQVoE6TNlO0tIRLIxulF8IqsaBfgfCakP0nBmZubWyspKWfc0TTlEeZq+Jz8/v17N/a8ks7tUqzWRSNxUvpIZsm65rNug1+vdSBm/KaVZlpWVncLBLqpxrL29/YVZbzemck+xa2bjXUtmODk5Kdl1OJEFg0ENI9m5u8E+rKio2GJHYJ7H5hStoaurK12jlG4GJdT5khloHEM4De6iPpczNTXVlyope+Ixdj+i0ehuDUMp0cuqqqofRgKrPmW8wPxZXTcvUmxus4F8UtICtu493ck/BaRS/nmT8gcSjgIhzKO9paX8LYSUKr6DIE82gvwPk2ckZUaAFqSykdbb+eCIxNHFNMi8pBuzAzrNCyn2V3TMMtbojBMebExK+p3OKiegnY5zuYIKFSg9fqRslh86OfMrhfAbgzWWKIdJIUMtt8ImHdbrdrvP25mEw+GV6H6zQbUBCHfYAa3mbciKW1paZJ0sv3g8LhwDGnW/S2efnrIl2Di5EDKxx7+P5Ho0/b772tTU5DM6tuovlExeDqx1UVZWVresYRrMZ4jgXApZXgduXDPHMqqguWOPQ9jFsRlKEnJGupmIkWWZApml/vNW50w2SEpkrOsGfPkzMjIaxGeSUDpMlJJhQygU2i5j8yc/b87rLgI7hO6A0wZRtvjK4Sa6QwXr1QWcvA8VgAwLIY3guNDp5aXwTpJbaCkXwy3IXnEPHlbY2QxlAsV9MggQVR/kxQo0X4ntOnb/AHaDLNdRo/2cDJWC6DZLdJD3E+FpjD4qnZPUH2EBqlSN7Ym6urqIGW9JKKC2tjbv+Ph4HcYBjB9C3M0TpNfv9/80OuEWzxoeHpZDXQRW1lcey0G756UtoXIqCw/hQcY+HO6hP0k/+fJGyk2zHPmcgHqQN1iW90jb7w/2Ad4Ucnl03gAAAABJRU5ErkJggg==");
+  background-size: 100% auto;
+  background-repeat: no-repeat
+}
+
+.section-content {
+  position: relative;
+  overflow: hidden;
+  zoom: 1
+}
+
+.section-content:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.shops {
+  background-color: #fff;
+  margin-bottom: 10px;
+  font-size: 0;
+  position: relative
+}
+
+.shops:after {
+  content: " ";
+  display: block;
+  padding-top: 58%
+}
+
+.shops:before {
+  z-index: 1;
+  content: "";
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid #e5e5e5
+}
+
+.shop-wrap,
+.shops:before {
+  position: absolute;
+  top: 0;
+  left: 0
+}
+
+.shop-wrap {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden
+}
+
+.shop-item {
+  position: relative;
+  display: inline-block;
+  width: 33.333%
+}
+
+.shop-item:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-right: 1px solid #e5e5e5
+}
+
+.shop-item:last-child:before {
+  content: "";
+  display: none
+}
+
+.shop-item img {
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  max-width: 100%;
+  max-height: 100%
+}
+
+.channels {
+  margin-bottom: 12px;
+  position: relative;
+  overflow: hidden
+}
+
+.channels:after {
+  display: block;
+  padding-top: 54%;
+  content: " "
+}
+
+.channels .primary-channel {
+  left: 0;
+  width: 55%;
+  padding-right: 5px
+}
+
+.channels .primary-channel,
+.channels .secondary-channel {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  box-sizing: border-box
+}
+
+.channels .secondary-channel {
+  right: 0;
+  width: 45%
+}
+
+.channels .secondary-channel a {
+  height: 50%
+}
+
+.channels .secondary-channel a:first-child {
+  margin-bottom: 5px
+}
+
+.channels .secondary-channel a:last-child {
+  margin-top: 5px
+}
+
+.channels a {
+  display: block;
+  position: relative;
+  height: 100%
+}
+
+.channels img {
+  position: absolute;
+  width: 100%;
+  height: 100%
+}
+
+.view-history {
+  display: block;
+  height: 40px;
+  margin: 0 10px 20px;
+  color: #fe6573;
+  text-align: center;
+  line-height: 40px;
+  position: relative
+}
+
+.view-history:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  border: 1px solid #fe6573
+}
+
+.hot-goods {
+  overflow: hidden
+}
+
+.hot-goods ul {
+  position: relative;
+  padding: 0 6px;
+  zoom: 1
+}
+
+.hot-goods ul:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.hot-goods li {
+  float: left;
+  width: 50%;
+  box-sizing: border-box;
+  padding-bottom: 6px
+}
+
+.hot-goods li:nth-child(odd) {
+  padding-right: 3px
+}
+
+.hot-goods li:nth-child(2n) {
+  padding-left: 3px
+}
+
+.hot-goods li .goods-item .thumb {
+  margin-bottom: 10px;
+  background-color: #fff
+}
+
+.hot-goods li .goods-item .detail {
+  padding: 0 8px 1px
+}
+
+.hot-goods li .goods-item .title {
+  color: #666;
+  padding-bottom: 0;
+  line-height: 16px;
+  height: 32px;
+  margin-bottom: 10px;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical
+}
+
+.daily-title {
+  display: none;
+  position: relative;
+  padding: 6px 10px;
+  border-bottom: none;
+  font-size: 14px;
+  height: 22px;
+  line-height: 22px;
+  overflow: hidden;
+  background-color: transparent
+}
+
+.daily-title .pull-left {
+  position: relative;
+  padding-left: 28px
+}
+
+.daily-title .pull-right {
+  position: relative;
+  padding-right: 12px
+}
+
+.daily-title .home-more {
+  display: block;
+  width: 50px;
+  text-align: right;
+  font-size: 12px;
+  color: #909090
+}
+
+.daily-title .today .icon-calendar,
+.daily-title .today .week {
+  color: #ff6366
+}
+
+.daily-title .today .icon-calendar {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMDNkYzdhYS1mMTQzLTRkNmYtYjc5ZS00NjExYWRhYmY0MDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0ZDNEIwRkE5RkZGMTFFNTg0QTVGQjczODc0NDhBMDciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0ZDNEIwRjk5RkZGMTFFNTg0QTVGQjczODc0NDhBMDciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozODc5YWViZS0wNGIxLTQ2MDEtYjc3OS1hOTIzOGFlNzU5MmUiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDplYTViMzg2Yy1kNmFhLTExNzgtOTliYy05NjM3NzNjZGVkNzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5uq3T5AAABvUlEQVR42uyZT0rDQBSHJ7W2FPQSXfinanXlAcRF72E0iKteRDcubIwXEJcKLsQLuKm2KCKIvYNiETT+nv1F0mhFraRTeQ++ZpIMma/Tl0l5ccKVNfPDCLl1TH/xq+tkzJDFZ8IlsAmuQJszESc+Q/3Q6zoy5iUdSl8J58A2aIAqmAL5AUyijDlNB3HZAYWksMgegQ0e88EiOzoJTCz3+qHXdQoc26eLBw7p+C68BZbBDVhgpzP+PGlHm2OLwyy4BktMEeNglZjB9hyMgHlwYdl9Jk518CxtmWGXsr6FsoaT6dPRFeEKT+xavJpFbpUsVwPDvLE9isP24MhlE8uLzfH2sMkOVCGofb+v6/2f/xIqrMIqrMIqrMIqrMIqrMIqrMIqPDzCT2znrbV0vXG27kX4ljtzFk/sBLctET7mzqrFwtGLmBMR3jOdUqYcLFuYDmW6iWOQMUGtiUZUgjkwnXqsLbJSu97nnjg2o1JVlXkiVfg6T0qJsxG7KdOSHMPnJFPU49FTOhonDMOoo7xDkLL8ukXL3QsnTmQfu4W7fwb5dlLoLoLRlCUfwJ3cYJKzkgbxkx+F9Un3t/EqwABHz27QdwbwxAAAAABJRU5ErkJggg==")
+}
+
+.daily-title .icon-calendar,
+.daily-title .week {
+  color: #999
+}
+
+.icon-calendar {
+  left: 0;
+  top: -1px;
+  width: 22px;
+  height: 22px;
+  box-sizing: border-box;
+  font-size: 12px;
+  text-align: center;
+  line-height: 26px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMDNkYzdhYS1mMTQzLTRkNmYtYjc5ZS00NjExYWRhYmY0MDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEVCQzkxN0VCNzZDMTFFNThDRTBGNzNDQTNERTI0NkUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEVCQzkxN0RCNzZDMTFFNThDRTBGNzNDQTNERTI0NkUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMEM2OTc3RDlGQjMxMUU1OTU3QUFDQ0NDNDVDQkQyQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMEM2OTc3RTlGQjMxMUU1OTU3QUFDQ0NDNDVDQkQyQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph7pZggAAAHDSURBVHja7JnBSgMxEIaztbYe9CH0oGBpfQfxUO+KL1CjQg/2RRS8yG7rC4gehR6kL+DF2tWLUPQdFHVB1390AkspuEtlm8AM/GSTLOHLZLJhJ57v+yqjxVx6ajL7GUdrnWmcgnLMimPaVqEGtAktQuU/PD2RBUEwOs4HNIS6UAcr8JDs9BIhUYKOoAOLPP8FtaEWwN+SwAR7BW2YidPsoAH0nmcMw+NzKKq8ypqbe7TieDcyIXHMsI/QNtSflksBRQ66IQH+BOUltM6r36Slr0B7/P5WCljvH7ybahzA36PY4eo+JlApsOtnOAzubPsqALrPbMTYIOA697Ut/poZtjptuli5Y5FrB0epOLIJphGjmQ4Y545mARZgARZgARZgARZgARZgARZgARbgXIEjfi7bColf/AV+fCHgIVeqFjt2mctnAu5yZddiYJNtuSbgM+iTG2sWhkON2YixQ8AhZO4NLqA1i2Apd33OVV9rHZrcWovjhLLwtzwBSnEOEpsyL8h5FCscoibR3mNG9y5lktlL8mQTOuXZUaJ7CZrNGfIVeqINpn6vvcJk57h7OrpXOMxt+6dMtxrz4tilBLxS3wIMAJd8eANQjJf5AAAAAElFTkSuQmCC")
+}
+
+.icon-calendar,
+.icon-home-more {
+  position: absolute;
+  background-size: 100% auto;
+  display: inline-block;
+  background-repeat: no-repeat
+}
+
+.icon-home-more {
+  right: 0;
+  top: 6px;
+  width: 5px;
+  height: 9px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Qzk5Mjc4QkNCNzc1MTFFNThDRTBGNzNDQTNERTI0NkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Qzk5Mjc4QkRCNzc1MTFFNThDRTBGNzNDQTNERTI0NkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0RUJDOTE3RkI3NkMxMUU1OENFMEY3M0NBM0RFMjQ2RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0RUJDOTE4MEI3NkMxMUU1OENFMEY3M0NBM0RFMjQ2RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhD34L0AAAD6SURBVHjafNExS0JRFMDxm0SDkCFqkLgILg2KCRIIQTwdBKEpnP0WfgL39yF0FgojX+TuqkMQoQTJg3BwkRBC+h84wSPu7cAPhPfHe7j3wPf9rjFG3GJiHBPDEZIY4vK/sIcBEhih6Ar36OAOKTyiYAtlvtHWHbMIkLOFMjvcYIq8xhlbKLNFE3Oc6xontlBmgwbeUME94jHHbXyijg9coe8KZdZY6u+yKzzW/eTfQrQOLZEs/4CaHi0rvP4N5SnHqOIdHhbyIRqm9e4u9KOnsYmGp3hCSY7RaBU9SsIzPOsFv+hOoe2tA41muLZFv+GXvq+nF22dHwEGAAygMdxzOhyLAAAAAElFTkSuQmCC")
+}
+
+.line-block .lineblock-title .lineblock-font {
+  background-color: #f4f4f4
+}
+
+.line-block.line-block-gray {
+  position: relative;
+  margin: 20px 10px 10px
+}
+
+.line-block.line-block-gray:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid #ababab;
+  height: 1px;
+  margin: 7px 0 0
+}
+
+.line-block .lineblock-title {
+  position: relative
+}
+
+.category-guid {
+  font-size: 0;
+  margin-bottom: 10px
+}
+
+.list-finished,
+.notice {
+  padding: 10px
+}
+
+.notice {
+  display: block;
+  font-size: 12px;
+  line-height: 16px;
+  color: #f90;
+  background-color: #ffc;
+  letter-spacing: .4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.activity {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding-top: 10px;
+  overflow: hidden;
+  font-size: 0;
+  position: relative
+}
+
+.activity:after {
+  content: " ";
+  display: block;
+  padding-top: 40%
+}
+
+.activity .item {
+  width: 50%
+}
+
+.activity .item:first-child {
+  position: relative
+}
+
+.activity .item:first-child:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-right: 1px solid #e5e5e5
+}
+
+.fadeIn {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-name: a;
+  animation-name: a
+}
+
+@-webkit-keyframes a {
+  0% {
+    opacity: 0
+  }
+  to {
+    opacity: 1
+  }
+}
+
+@keyframes a {
+  0% {
+    opacity: 0
+  }
+  to {
+    opacity: 1
+  }
+}
diff --git a/src/pages/index/index.html b/src/pages/index/index.html
index 7eb4db8..d6ea1c3 100644
--- a/src/pages/index/index.html
+++ b/src/pages/index/index.html
@@ -1,11 +1,220 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>maijia</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+<html class="no-js " lang="zh-CN">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <link rel="dns-prefetch" href="https://dn-kdt-img.qbox.me/">
+  <link rel="dns-prefetch" href="https://img.yzcdn.cn/">
+  <link rel="dns-prefetch" href="https://b.yzcdn.cn/">
+  <link rel="dns-prefetch" href="https://su.yzcdn.cn/">
+  <link rel="dns-prefetch" href="https://h5.youzan.com/v2/">
+  <link rel="dns-prefetch" href="https://h5.youzan.com/">
+  <meta name="keywords" content="有赞,移动电商服务平台">
+  <meta name="description" content="有赞是帮助商家在微信上搭建微信商城的平台，提供店铺、商品、订单、物流、消息和客户的管理模块，同时还提供丰富的营销应用和活动插件。">
+  <!-- 是否为手持设备优化 -->
+  <meta name="HandheldFriendly" content="True">
+  <!-- 为某个宽度特殊优化 -->
+  <meta name="MobileOptimized" content="320">
+  <!-- 电话号码和邮箱识别 -->
+  <meta name="format-detection" content="telephone=no">
+  <!-- 针对LCD液晶显示器设计，可提高文字的清晰度 -->
+  <meta http-equiv="cleartype" content="on">
+  <link rel="shortcut icon" href="https://b.yzcdn.cn/v2/image/yz_fc.ico">
+  <title>发现朋友圈的推荐</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+</head>
+
+<body class=" " style="min-height: 860px;">
+  <div class="container with-bottom-nav" style="min-height: 667px;">
+    <div class="content">
+      <div class="js-image-swiper
+ custom-image-swiper  custom-image-swiper-single" data-images="1">
+        <div class="swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swp-page">
+              <a class="js-no-follow" href="https://h5.koudaitong.com/v2/index/rukou">
+                <img class="goods-main-photo fadeIn" src="https://img.yzcdn.cn/upload_files/2016/07/29/Fl3T06Mu7TpIhR4L1s2tzm8cZrgt.jpg">
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a href="https://maijia.youzan.com/mars/notice/detail?id=" class="notice"></a>
+      <div class="section-title">优店推荐</div>
+      <div class="section-content shops">
+        <div class="shop-wrap">
+          <div class="shop-item">
+            <a href="https://h5.koudaitong.com/v2/showcase/feature?alias=zjtozpgn">
+              <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/09/23/FgQUVNXnvpFKFl1DIN2LXhPA1cxy.png?imageView2/2/w/300/h/0/q/75/format/png">
+            </a>
+          </div>
+          <div class="shop-item">
+            <a href="https://h5.koudaitong.com/v2/feature/1e22e3vtu">
+              <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/08/03/FqNGnCQS1eq9nIhRg48E_UfFf9K2.png?imageView2/2/w/300/h/0/q/75/format/png">
+            </a>
+          </div>
+          <div class="shop-item">
+            <a href="https://h5.koudaitong.com/v2/feature/8oups7zk">
+              <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/08/05/Fv5hhMZrtPZQWE7fape0ddEYtSuy.png?imageView2/2/w/300/h/0/q/75/format/png">
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="section-content daily">
+        <ul>
+        </ul>
+      </div>
+      <div class="line-block line-block-gray">
+        <div class="lineblock-title">
+          <span class="lineblock-font">最热商品推荐</span>
+        </div>
+      </div>
+      <div class="hot-goods js-waterfull-wrap" data-src="">
+        <ul class="js-list js-lazy" data-src="">
+          <li>
+            <div class="goods-item">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=2fwig6rnqfq6m&amp;source=yzapp&amp;f_platform=yzapp">
+                <div class="thumb img-box">
+                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/05/06/Fhy3xjNz5XWtcHM0YCZBsUPFpaXL.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                </div>
+                <div class="detail">
+                  <div class="title">i-mu/幻响醛击手除甲醛</div>
+                  <div class="price">￥149.00</div>
+                </div>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="goods-item">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=365dgchyzdtxe&amp;source=yzapp&amp;f_platform=yzapp">
+                <div class="thumb img-box">
+                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/07/10/FqQYAfXfNGyg_AaV-fJVCaOg4j4l.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                </div>
+                <div class="detail">
+                  <div class="title">【现挖48小时内发货】假一罚十 ！正宗天目山小香薯，不让朴实薯农血本无归！</div>
+                  <div class="price">￥49.00</div>
+                </div>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="goods-item">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=3ngl01w7r4b9i&amp;source=yzapp&amp;f_platform=yzapp">
+                <div class="thumb img-box">
+                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/07/03/FmwQG9tP0Q9nQPm4CDR5zlI9PKBt.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                </div>
+                <div class="detail">
+                  <div class="title">【丰巢】【特价29.9元限量500份已售罄】连平鹰嘴桃 5斤装 包邮</div>
+                  <div class="price">￥29.90</div>
+                </div>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="goods-item">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=2xiz0ynyefc9p&amp;source=yzapp&amp;f_platform=yzapp">
+                <div class="thumb img-box">
+                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/11/04/Fut6-tAwHkUguKtkWIqsEjnvrutt.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                </div>
+                <div class="detail">
+                  <div class="title">*【读者专属】HFP全线产品最低64折起 点击下方【选择：种类】即可挑选产品 1WRI</div>
+                  <div class="price">￥63.00</div>
+                </div>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="goods-item">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=1ya5nwvyvb8t1&amp;source=yzapp&amp;f_platform=yzapp">
+                <div class="thumb img-box">
+                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/07/03/FhlrJkzVeMM46zTh_gwRXkLFvFGt.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                </div>
+                <div class="detail">
+                  <div class="title">【广西百色小贵妃--鲜嫩多汁，香味浓郁，皮薄核小，口口留香，新鲜现摘】</div>
+                  <div class="price">￥29.80</div>
+                </div>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="goods-item">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=3nj3a27og505i&amp;source=yzapp&amp;f_platform=yzapp">
+                <div class="thumb img-box">
+                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/07/08/FtTrpa3fIcNJ3cp4_So1WH26cj9A.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                </div>
+                <div class="detail">
+                  <div class="title">【优选】澳洲Swisse钙+维生素D</div>
+                  <div class="price">￥88.00</div>
+                </div>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="goods-item">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=273w8vno6x8jq&amp;source=yzapp&amp;f_platform=yzapp">
+                <div class="thumb img-box">
+                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/06/01/FsIeFiIjzSmGHo9sOvPpCpTgjODa.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                </div>
+                <div class="detail">
+                  <div class="title">【瘦身降三高必备】减脂才是真减肥，集减脂/降三高/抗衰老的高科技黑茶，送家人朋友</div>
+                  <div class="price">￥198.00</div>
+                </div>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="goods-item">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=2ov6kbj4smwwi&amp;source=yzapp&amp;f_platform=yzapp">
+                <div class="thumb img-box">
+                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/06/13/FjeqHCvSQWKw0S5wD9oroR2NR9rZ.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                </div>
+                <div class="detail">
+                  <div class="title">【也许是最适合东方女性的香水】喷一喷，散发女性魅力，未见沙龙香水</div>
+                  <div class="price">￥108.00</div>
+                </div>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="goods-item">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=3np5vvqoc62w7&amp;source=yzapp&amp;f_platform=yzapp">
+                <div class="thumb img-box">
+                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/04/13/Fq-Lf_Lht3NIaLUOBH6s5z6K0yYU.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                </div>
+                <div class="detail">
+                  <div class="title">最火好物！约会神器 ~必备！澳洲Breath Pearls天然清新口气珠 草本精华 无添加 50粒/瓶</div>
+                  <div class="price">￥59.00</div>
+                </div>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="goods-item">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=2ok5vxv8d23qq&amp;source=yzapp&amp;f_platform=yzapp">
+                <div class="thumb img-box">
+                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/11/06/FpRZ3GWdr-ucvleqtie8GqOqhyhC.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                </div>
+                <div class="detail">
+                  <div class="title">【好物】可站立德国创意双层反向伞长柄男女晴雨伞</div>
+                  <div class="price">￥68.00</div>
+                </div>
+              </a>
+            </div>
+          </li>
+        </ul>
+        <div class="loading-more"><span></span></div>
+      </div>
+      <div class="js-show-find category-guid" style="display: none;"></div>
+    </div>
+  </div>
+  <div class="bottom-nav">
+    <ul>
+      <li class="active"><a href="https://maijia.youzan.com/mars/homepage"><i class="icon-home"></i><div>有赞</div></a></li>
+      <li><a href="https://maijia.youzan.com/mars/category"><i class="icon-category"></i><div>分类</div></a></li>
+      <li><a href="https://h5.youzan.com/v2/trade/cart?f_platform=yzapp&amp;source=yzapp"><i class="icon-cart"></i><div>购物车</div></a></li>
+      <li><a href="https://h5.youzan.com/v2/buyer/member"><i class="icon-user"></i><div>我</div></a></li>
+    </ul>
+  </div>
+</body>
+
 </html>
diff --git a/src/pages/index/index.js b/src/pages/index/index.js
index ec10971..e9493c0 100644
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@@ -1,15 +1,2 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App'
-import router from './router'
-
-Vue.config.productionTip = false
-
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  template: '<App/>',
-  components: { App }
-})
+import '@/modules/css/common.css'
+import './index.css'
\ No newline at end of file
diff --git a/src/pages/index/router/index.js b/src/pages/index/router/index.js
deleted file mode 100644
index 5bf9ea6..0000000
--- a/src/pages/index/router/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Hello from '@/components/Hello'
-
-Vue.use(Router)
-
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'Hello',
-      component: Hello
-    }
-  ]
-})

From 88905bffd46e6e7ab321c1baa3d3931a2784605c Mon Sep 17 00:00:00 2001
From: tony <tonyfree2014@gmail.com>
Date: Wed, 9 Aug 2017 08:57:22 +0800
Subject: [PATCH 02/15] lists render

---
 build/webpack.base.conf.js |   4 +-
 package.json               |   7 +-
 src/modules/js/api.js      |  13 ++++
 src/pages/index/index.html | 127 ++-----------------------------------
 src/pages/index/index.js   |  25 +++++++-
 yarn.lock                  |  15 ++++-
 6 files changed, 62 insertions(+), 129 deletions(-)
 create mode 100644 src/modules/js/api.js

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 906429a..4ff45d6 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -23,7 +23,9 @@ module.exports = {
     extensions: ['.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src')
+      '@': resolve('src'),
+      'css': '@/modules/css',
+      'js': '@/modules/js'
     }
   },
   module: {
diff --git a/package.json b/package.json
index 1901142..890b75a 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.16.2",
     "vue": "^2.3.3",
     "vue-router": "^2.6.0"
   },
@@ -33,18 +34,18 @@
     "friendly-errors-webpack-plugin": "^1.1.3",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
     "ora": "^1.2.0",
     "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
     "url-loader": "^0.5.8",
     "vue-loader": "^12.1.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.3.3",
     "webpack": "^2.6.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0"
diff --git a/src/modules/js/api.js b/src/modules/js/api.js
new file mode 100644
index 0000000..53f5c23
--- /dev/null
+++ b/src/modules/js/api.js
@@ -0,0 +1,13 @@
+let url = {
+  hotLists: '/index/hotLists'
+}
+
+let host = 'http://rapapi.org/mockjsdata/23334'
+
+for (let key in url) {
+  if (url.hasOwnProperty(key)) {
+    url[key] = host + url[key]
+  }
+}
+
+export default url
\ No newline at end of file
diff --git a/src/pages/index/index.html b/src/pages/index/index.html
index d6ea1c3..8c82718 100644
--- a/src/pages/index/index.html
+++ b/src/pages/index/index.html
@@ -71,132 +71,15 @@
       </div>
       <div class="hot-goods js-waterfull-wrap" data-src="">
         <ul class="js-list js-lazy" data-src="">
-          <li>
+           <li v-for="list in lists" :key="list.id">
             <div class="goods-item">
               <a href="https://h5.youzan.com/v2/showcase/goods?alias=2fwig6rnqfq6m&amp;source=yzapp&amp;f_platform=yzapp">
                 <div class="thumb img-box">
-                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/05/06/Fhy3xjNz5XWtcHM0YCZBsUPFpaXL.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                  <img class="fadeIn" v-bind:src="list.img">
                 </div>
                 <div class="detail">
-                  <div class="title">i-mu/幻响醛击手除甲醛</div>
-                  <div class="price">￥149.00</div>
-                </div>
-              </a>
-            </div>
-          </li>
-          <li>
-            <div class="goods-item">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=365dgchyzdtxe&amp;source=yzapp&amp;f_platform=yzapp">
-                <div class="thumb img-box">
-                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/07/10/FqQYAfXfNGyg_AaV-fJVCaOg4j4l.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-                </div>
-                <div class="detail">
-                  <div class="title">【现挖48小时内发货】假一罚十 ！正宗天目山小香薯，不让朴实薯农血本无归！</div>
-                  <div class="price">￥49.00</div>
-                </div>
-              </a>
-            </div>
-          </li>
-          <li>
-            <div class="goods-item">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=3ngl01w7r4b9i&amp;source=yzapp&amp;f_platform=yzapp">
-                <div class="thumb img-box">
-                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/07/03/FmwQG9tP0Q9nQPm4CDR5zlI9PKBt.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-                </div>
-                <div class="detail">
-                  <div class="title">【丰巢】【特价29.9元限量500份已售罄】连平鹰嘴桃 5斤装 包邮</div>
-                  <div class="price">￥29.90</div>
-                </div>
-              </a>
-            </div>
-          </li>
-          <li>
-            <div class="goods-item">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=2xiz0ynyefc9p&amp;source=yzapp&amp;f_platform=yzapp">
-                <div class="thumb img-box">
-                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/11/04/Fut6-tAwHkUguKtkWIqsEjnvrutt.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-                </div>
-                <div class="detail">
-                  <div class="title">*【读者专属】HFP全线产品最低64折起 点击下方【选择：种类】即可挑选产品 1WRI</div>
-                  <div class="price">￥63.00</div>
-                </div>
-              </a>
-            </div>
-          </li>
-          <li>
-            <div class="goods-item">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=1ya5nwvyvb8t1&amp;source=yzapp&amp;f_platform=yzapp">
-                <div class="thumb img-box">
-                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/07/03/FhlrJkzVeMM46zTh_gwRXkLFvFGt.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-                </div>
-                <div class="detail">
-                  <div class="title">【广西百色小贵妃--鲜嫩多汁，香味浓郁，皮薄核小，口口留香，新鲜现摘】</div>
-                  <div class="price">￥29.80</div>
-                </div>
-              </a>
-            </div>
-          </li>
-          <li>
-            <div class="goods-item">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=3nj3a27og505i&amp;source=yzapp&amp;f_platform=yzapp">
-                <div class="thumb img-box">
-                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/07/08/FtTrpa3fIcNJ3cp4_So1WH26cj9A.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-                </div>
-                <div class="detail">
-                  <div class="title">【优选】澳洲Swisse钙+维生素D</div>
-                  <div class="price">￥88.00</div>
-                </div>
-              </a>
-            </div>
-          </li>
-          <li>
-            <div class="goods-item">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=273w8vno6x8jq&amp;source=yzapp&amp;f_platform=yzapp">
-                <div class="thumb img-box">
-                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/06/01/FsIeFiIjzSmGHo9sOvPpCpTgjODa.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-                </div>
-                <div class="detail">
-                  <div class="title">【瘦身降三高必备】减脂才是真减肥，集减脂/降三高/抗衰老的高科技黑茶，送家人朋友</div>
-                  <div class="price">￥198.00</div>
-                </div>
-              </a>
-            </div>
-          </li>
-          <li>
-            <div class="goods-item">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=2ov6kbj4smwwi&amp;source=yzapp&amp;f_platform=yzapp">
-                <div class="thumb img-box">
-                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/06/13/FjeqHCvSQWKw0S5wD9oroR2NR9rZ.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-                </div>
-                <div class="detail">
-                  <div class="title">【也许是最适合东方女性的香水】喷一喷，散发女性魅力，未见沙龙香水</div>
-                  <div class="price">￥108.00</div>
-                </div>
-              </a>
-            </div>
-          </li>
-          <li>
-            <div class="goods-item">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=3np5vvqoc62w7&amp;source=yzapp&amp;f_platform=yzapp">
-                <div class="thumb img-box">
-                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2017/04/13/Fq-Lf_Lht3NIaLUOBH6s5z6K0yYU.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-                </div>
-                <div class="detail">
-                  <div class="title">最火好物！约会神器 ~必备！澳洲Breath Pearls天然清新口气珠 草本精华 无添加 50粒/瓶</div>
-                  <div class="price">￥59.00</div>
-                </div>
-              </a>
-            </div>
-          </li>
-          <li>
-            <div class="goods-item">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=2ok5vxv8d23qq&amp;source=yzapp&amp;f_platform=yzapp">
-                <div class="thumb img-box">
-                  <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/11/06/FpRZ3GWdr-ucvleqtie8GqOqhyhC.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-                </div>
-                <div class="detail">
-                  <div class="title">【好物】可站立德国创意双层反向伞长柄男女晴雨伞</div>
-                  <div class="price">￥68.00</div>
+                  <div class="title">{{list.name}}</div>
+                  <div class="price">￥{{list.price}}</div>
                 </div>
               </a>
             </div>
@@ -217,4 +100,4 @@
   </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/pages/index/index.js b/src/pages/index/index.js
index e9493c0..6aa6366 100644
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@@ -1,2 +1,23 @@
-import '@/modules/css/common.css'
-import './index.css'
\ No newline at end of file
+import 'css/common.css'
+import './index.css'
+
+import Vue from 'vue'
+import axios from 'axios'
+import url from 'js/api.js'
+
+new Vue({
+  el: '.container',
+  data: {
+    lists: null
+  },
+  created() {
+    this.getLists()
+  },
+  methods: {
+    getLists() {
+      axios.post(url.hotLists).then(res => {
+        this.lists = res.data.lists
+      })
+    }
+  }
+})
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 333091c..78fcf2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -189,6 +189,13 @@ aws4@^1.2.1:
   version "1.6.0"
   resolved "http://registry.npm.taobao.org/aws4/download/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@^0.16.2:
+  version "0.16.2"
+  resolved "http://registry.npm.taobao.org/axios/download/axios-0.16.2.tgz#ba4f92f17167dfbab40983785454b9ac149c3c6d"
+  dependencies:
+    follow-redirects "^1.2.3"
+    is-buffer "^1.1.5"
+
 babel-code-frame@^6.11.0, babel-code-frame@^6.22.0:
   version "6.22.0"
   resolved "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
@@ -1346,7 +1353,7 @@ debug@2.6.7:
   dependencies:
     ms "2.0.0"
 
-debug@2.6.8, debug@^2.1.1, debug@^2.2.0:
+debug@2.6.8, debug@^2.1.1, debug@^2.2.0, debug@^2.4.5:
   version "2.6.8"
   resolved "http://registry.npm.taobao.org/debug/download/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies:
@@ -1710,6 +1717,12 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "http://registry.npm.taobao.org/flatten/download/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+follow-redirects@^1.2.3:
+  version "1.2.4"
+  resolved "http://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.2.4.tgz#355e8f4d16876b43f577b0d5ce2668b9723214ea"
+  dependencies:
+    debug "^2.4.5"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "http://registry.npm.taobao.org/for-in/download/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"

From 37106d00739f03eeb291ac98662b4f085b7399b3 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Thu, 10 Aug 2017 18:31:40 +0800
Subject: [PATCH 03/15] mint-ui loadmore

---
 .babelrc                   |  7 +++++-
 package.json               |  2 ++
 src/pages/index/index.html | 44 ++++++++++++++++++++------------------
 src/pages/index/index.js   | 15 ++++++++++++-
 yarn.lock                  | 24 +++++++++++++++++++++
 5 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/.babelrc b/.babelrc
index c06df4d..53039ce 100644
--- a/.babelrc
+++ b/.babelrc
@@ -8,7 +8,12 @@
     }],
     "stage-2"
   ],
-  "plugins": ["transform-runtime"],
+  "plugins": ["transform-runtime", ["component", [
+    {
+      "libraryName": "mint-ui",
+      "style": true
+    }
+  ]]],
   "env": {
     "test": {
       "presets": ["env", "stage-2"],
diff --git a/package.json b/package.json
index 890b75a..19f819e 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.16.2",
+    "mint-ui": "^2.2.9",
     "vue": "^2.3.3",
     "vue-router": "^2.6.0"
   },
@@ -18,6 +19,7 @@
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-loader": "^7.1.1",
+    "babel-plugin-component": "^0.10.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
diff --git a/src/pages/index/index.html b/src/pages/index/index.html
index 8c82718..418480e 100644
--- a/src/pages/index/index.html
+++ b/src/pages/index/index.html
@@ -69,35 +69,37 @@
           <span class="lineblock-font">最热商品推荐</span>
         </div>
       </div>
-      <div class="hot-goods js-waterfull-wrap" data-src="">
-        <ul class="js-list js-lazy" data-src="">
-           <li v-for="list in lists" :key="list.id">
-            <div class="goods-item">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=2fwig6rnqfq6m&amp;source=yzapp&amp;f_platform=yzapp">
-                <div class="thumb img-box">
-                  <img class="fadeIn" v-bind:src="list.img">
-                </div>
-                <div class="detail">
-                  <div class="title">{{list.name}}</div>
-                  <div class="price">￥{{list.price}}</div>
-                </div>
-              </a>
-            </div>
-          </li>
-        </ul>
-        <div class="loading-more"><span></span></div>
-      </div>
-      <div class="js-show-find category-guid" style="display: none;"></div>
+      <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
+        <div class="hot-goods js-waterfull-wrap" data-src="">
+          <ul class="js-list js-lazy" data-src="">
+            <li v-for="list in lists" :key="list.id">
+              <div class="goods-item">
+                <a href="https://h5.youzan.com/v2/showcase/goods?alias=2fwig6rnqfq6m&amp;source=yzapp&amp;f_platform=yzapp">
+                  <div class="thumb img-box">
+                    <img class="fadeIn" v-bind:src="list.img">
+                  </div>
+                  <div class="detail">
+                    <div class="title">{{list.name}}</div>
+                    <div class="price">￥{{list.price}}</div>
+                  </div>
+                </a>
+              </div>
+            </li>
+          </ul>
+          <!-- <div class="loading-more"><span></span></div> -->
+        </div>
+      </mt-loadmore>
+      <!-- <div class="js-show-find category-guid" style="display: none;"></div> -->
     </div>
   </div>
-  <div class="bottom-nav">
+   <div class="bottom-nav">
     <ul>
       <li class="active"><a href="https://maijia.youzan.com/mars/homepage"><i class="icon-home"></i><div>有赞</div></a></li>
       <li><a href="https://maijia.youzan.com/mars/category"><i class="icon-category"></i><div>分类</div></a></li>
       <li><a href="https://h5.youzan.com/v2/trade/cart?f_platform=yzapp&amp;source=yzapp"><i class="icon-cart"></i><div>购物车</div></a></li>
       <li><a href="https://h5.youzan.com/v2/buyer/member"><i class="icon-user"></i><div>我</div></a></li>
     </ul>
-  </div>
+  </div> 
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/pages/index/index.js b/src/pages/index/index.js
index 6aa6366..929699b 100644
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@@ -5,10 +5,14 @@ import Vue from 'vue'
 import axios from 'axios'
 import url from 'js/api.js'
 
+import { Loadmore } from 'mint-ui'
+Vue.component(Loadmore.name, Loadmore)
+
 new Vue({
   el: '.container',
   data: {
-    lists: null
+    lists: null,
+    allLoaded: false
   },
   created() {
     this.getLists()
@@ -18,6 +22,15 @@ new Vue({
       axios.post(url.hotLists).then(res => {
         this.lists = res.data.lists
       })
+    },
+    loadBottom() {
+      console.log(1111)
+      // 加载更多数据
+      // this.allLoaded = true;// 若数据已全部获取完毕
+      // this.$refs.loadmore.onBottomLoaded();
+    },
+    handleBottomChange(status) {
+      console.log(status)
     }
   }
 })
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 78fcf2b..bbf5f68 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -111,6 +111,10 @@ arr-flatten@^1.0.1:
   version "1.1.0"
   resolved "http://registry.npm.taobao.org/arr-flatten/download/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
 
+array-find-index@^1.0.2:
+  version "1.0.2"
+  resolved "http://registry.npm.taobao.org/array-find-index/download/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "http://registry.npm.taobao.org/array-flatten/download/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -379,6 +383,10 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-component@^0.10.0:
+  version "0.10.0"
+  resolved "http://registry.npm.taobao.org/babel-plugin-component/download/babel-plugin-component-0.10.0.tgz#55d6dbc0f35d7a381931b16ff1ee34ef93085add"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "http://registry.npm.taobao.org/babel-plugin-syntax-async-functions/download/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -2551,6 +2559,14 @@ minimist@^1.2.0:
   version "1.2.0"
   resolved "http://registry.npm.taobao.org/minimist/download/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+mint-ui@^2.2.9:
+  version "2.2.9"
+  resolved "http://registry.npm.taobao.org/mint-ui/download/mint-ui-2.2.9.tgz#7c9892560ca647abec2e4d660cd8aee41d738017"
+  dependencies:
+    array-find-index "^1.0.2"
+    raf.js "0.0.4"
+    vue-lazyload "^1.0.1"
+
 "mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "http://registry.npm.taobao.org/mkdirp/download/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -3254,6 +3270,10 @@ querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "http://registry.npm.taobao.org/querystring/download/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
+raf.js@0.0.4:
+  version "0.0.4"
+  resolved "http://registry.npm.taobao.org/raf.js/download/raf.js-0.0.4.tgz#f15af445d241b27fa7131a57450b67ef9c402fec"
+
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "http://registry.npm.taobao.org/randomatic/download/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -3961,6 +3981,10 @@ vue-hot-reload-api@^2.1.0:
   version "2.1.0"
   resolved "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
 
+vue-lazyload@^1.0.1:
+  version "1.0.6"
+  resolved "http://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.0.6.tgz#7d5494fc35c35fc84dcc271165b827e309b4e793"
+
 vue-loader@^12.1.0:
   version "12.2.2"
   resolved "http://registry.npm.taobao.org/vue-loader/download/vue-loader-12.2.2.tgz#2b3a764f27018f975bc78cb8b1f55137548ee2d7"

From c58e8b92a4afd394ecffdf906eb23bb8ab377ac3 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Thu, 10 Aug 2017 18:40:51 +0800
Subject: [PATCH 04/15] just checout demo

---
 src/pages/index/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index/index.js b/src/pages/index/index.js
index 929699b..6e7ece7 100644
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@@ -27,7 +27,7 @@ new Vue({
       console.log(1111)
       // 加载更多数据
       // this.allLoaded = true;// 若数据已全部获取完毕
-      // this.$refs.loadmore.onBottomLoaded();
+      this.$refs.loadmore.onBottomLoaded()
     },
     handleBottomChange(status) {
       console.log(status)

From e42cb0ad344e70a0efdc9858c3221224a20551df Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Thu, 10 Aug 2017 21:31:45 +0800
Subject: [PATCH 05/15] mint-ui loadmore

---
 src/pages/index/index.html |  9 +++++----
 src/pages/index/index.js   | 23 ++++++++++-------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/pages/index/index.html b/src/pages/index/index.html
index 418480e..b12f122 100644
--- a/src/pages/index/index.html
+++ b/src/pages/index/index.html
@@ -69,9 +69,11 @@
           <span class="lineblock-font">最热商品推荐</span>
         </div>
       </div>
-      <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
         <div class="hot-goods js-waterfull-wrap" data-src="">
-          <ul class="js-list js-lazy" data-src="">
+          <ul class="js-list js-lazy" data-src="" 
+            v-infinite-scroll="getLists"
+            infinite-scroll-disabled="loading"
+            infinite-scroll-distance="10">
             <li v-for="list in lists" :key="list.id">
               <div class="goods-item">
                 <a href="https://h5.youzan.com/v2/showcase/goods?alias=2fwig6rnqfq6m&amp;source=yzapp&amp;f_platform=yzapp">
@@ -86,9 +88,8 @@
               </div>
             </li>
           </ul>
-          <!-- <div class="loading-more"><span></span></div> -->
+           <div class="loading-more" v-show="loading"><span></span></div> 
         </div>
-      </mt-loadmore>
       <!-- <div class="js-show-find category-guid" style="display: none;"></div> -->
     </div>
   </div>
diff --git a/src/pages/index/index.js b/src/pages/index/index.js
index 6e7ece7..833ac58 100644
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@@ -5,32 +5,29 @@ import Vue from 'vue'
 import axios from 'axios'
 import url from 'js/api.js'
 
-import { Loadmore } from 'mint-ui'
-Vue.component(Loadmore.name, Loadmore)
+import { InfiniteScroll } from 'mint-ui'
+Vue.use(InfiniteScroll)
 
 new Vue({
   el: '.container',
   data: {
     lists: null,
-    allLoaded: false
+    loading: false
   },
   created() {
     this.getLists()
   },
   methods: {
     getLists() {
+      this.loading = true
       axios.post(url.hotLists).then(res => {
-        this.lists = res.data.lists
+        if (this.lists) {
+          this.lists = this.lists.concat(res.data.lists)
+        } else {
+          this.lists = res.data.lists
+        }
+        this.loading = false
       })
-    },
-    loadBottom() {
-      console.log(1111)
-      // 加载更多数据
-      // this.allLoaded = true;// 若数据已全部获取完毕
-      this.$refs.loadmore.onBottomLoaded()
-    },
-    handleBottomChange(status) {
-      console.log(status)
     }
   }
 })
\ No newline at end of file

From 1cff6f015d5098c07c15fda28fcb85d65d96b521 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Thu, 10 Aug 2017 21:54:28 +0800
Subject: [PATCH 06/15] create Foot.vue

---
 build/webpack.base.conf.js |   3 +-
 src/components/Foot.vue    |  14 ++++
 src/pages/index/index.html | 130 ++++++++++++++++++-------------------
 src/pages/index/index.js   |   6 +-
 4 files changed, 83 insertions(+), 70 deletions(-)
 create mode 100644 src/components/Foot.vue

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 4ff45d6..85ab24c 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -25,7 +25,8 @@ module.exports = {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
       'css': '@/modules/css',
-      'js': '@/modules/js'
+      'js': '@/modules/js',
+      'components': '@/components'
     }
   },
   module: {
diff --git a/src/components/Foot.vue b/src/components/Foot.vue
new file mode 100644
index 0000000..4008b98
--- /dev/null
+++ b/src/components/Foot.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="bottom-nav">
+    <ul>
+      <li class="active"><a href="https://maijia.youzan.com/mars/homepage"><i class="icon-home"></i><div>有赞</div></a></li>
+      <li><a href="https://maijia.youzan.com/mars/category"><i class="icon-category"></i><div>分类</div></a></li>
+      <li><a href="https://h5.youzan.com/v2/trade/cart?f_platform=yzapp&amp;source=yzapp"><i class="icon-cart"></i><div>购物车</div></a></li>
+      <li><a href="https://h5.youzan.com/v2/buyer/member"><i class="icon-user"></i><div>我</div></a></li>
+    </ul>
+  </div> 
+</template>
+
+<script>
+  
+</script>
diff --git a/src/pages/index/index.html b/src/pages/index/index.html
index b12f122..1f3ea50 100644
--- a/src/pages/index/index.html
+++ b/src/pages/index/index.html
@@ -24,83 +24,77 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 </head>
 
-<body class=" " style="min-height: 860px;">
-  <div class="container with-bottom-nav" style="min-height: 667px;">
-    <div class="content">
-      <div class="js-image-swiper
- custom-image-swiper  custom-image-swiper-single" data-images="1">
-        <div class="swiper-container">
-          <div class="swiper-wrapper">
-            <div class="swp-page">
-              <a class="js-no-follow" href="https://h5.koudaitong.com/v2/index/rukou">
-                <img class="goods-main-photo fadeIn" src="https://img.yzcdn.cn/upload_files/2016/07/29/Fl3T06Mu7TpIhR4L1s2tzm8cZrgt.jpg">
-              </a>
+<body class="" style="min-height: 860px;">
+  <div class="vue-el">
+    <div class="container with-bottom-nav" style="min-height: 667px;">
+      <div class="content">
+        <div class="js-image-swiper custom-image-swiper  custom-image-swiper-single" data-images="1">
+          <div class="swiper-container">
+            <div class="swiper-wrapper">
+              <div class="swp-page">
+                <a class="js-no-follow" href="https://h5.koudaitong.com/v2/index/rukou">
+                  <img class="goods-main-photo fadeIn" src="https://img.yzcdn.cn/upload_files/2016/07/29/Fl3T06Mu7TpIhR4L1s2tzm8cZrgt.jpg">
+                </a>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <a href="https://maijia.youzan.com/mars/notice/detail?id=" class="notice"></a>
-      <div class="section-title">优店推荐</div>
-      <div class="section-content shops">
-        <div class="shop-wrap">
-          <div class="shop-item">
-            <a href="https://h5.koudaitong.com/v2/showcase/feature?alias=zjtozpgn">
-              <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/09/23/FgQUVNXnvpFKFl1DIN2LXhPA1cxy.png?imageView2/2/w/300/h/0/q/75/format/png">
-            </a>
-          </div>
-          <div class="shop-item">
-            <a href="https://h5.koudaitong.com/v2/feature/1e22e3vtu">
-              <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/08/03/FqNGnCQS1eq9nIhRg48E_UfFf9K2.png?imageView2/2/w/300/h/0/q/75/format/png">
-            </a>
-          </div>
-          <div class="shop-item">
-            <a href="https://h5.koudaitong.com/v2/feature/8oups7zk">
-              <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/08/05/Fv5hhMZrtPZQWE7fape0ddEYtSuy.png?imageView2/2/w/300/h/0/q/75/format/png">
-            </a>
+        <a href="https://maijia.youzan.com/mars/notice/detail?id=" class="notice"></a>
+        <div class="section-title">优店推荐</div>
+        <div class="section-content shops">
+          <div class="shop-wrap">
+            <div class="shop-item">
+              <a href="https://h5.koudaitong.com/v2/showcase/feature?alias=zjtozpgn">
+                <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/09/23/FgQUVNXnvpFKFl1DIN2LXhPA1cxy.png?imageView2/2/w/300/h/0/q/75/format/png">
+              </a>
+            </div>
+            <div class="shop-item">
+              <a href="https://h5.koudaitong.com/v2/feature/1e22e3vtu">
+                <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/08/03/FqNGnCQS1eq9nIhRg48E_UfFf9K2.png?imageView2/2/w/300/h/0/q/75/format/png">
+              </a>
+            </div>
+            <div class="shop-item">
+              <a href="https://h5.koudaitong.com/v2/feature/8oups7zk">
+                <img class="fadeIn" src="https://img.yzcdn.cn/upload_files/2016/08/05/Fv5hhMZrtPZQWE7fape0ddEYtSuy.png?imageView2/2/w/300/h/0/q/75/format/png">
+              </a>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="section-content daily">
-        <ul>
-        </ul>
-      </div>
-      <div class="line-block line-block-gray">
-        <div class="lineblock-title">
-          <span class="lineblock-font">最热商品推荐</span>
-        </div>
-      </div>
-        <div class="hot-goods js-waterfull-wrap" data-src="">
-          <ul class="js-list js-lazy" data-src="" 
-            v-infinite-scroll="getLists"
-            infinite-scroll-disabled="loading"
-            infinite-scroll-distance="10">
-            <li v-for="list in lists" :key="list.id">
-              <div class="goods-item">
-                <a href="https://h5.youzan.com/v2/showcase/goods?alias=2fwig6rnqfq6m&amp;source=yzapp&amp;f_platform=yzapp">
-                  <div class="thumb img-box">
-                    <img class="fadeIn" v-bind:src="list.img">
-                  </div>
-                  <div class="detail">
-                    <div class="title">{{list.name}}</div>
-                    <div class="price">￥{{list.price}}</div>
-                  </div>
-                </a>
-              </div>
-            </li>
+        <div class="section-content daily">
+          <ul>
           </ul>
-           <div class="loading-more" v-show="loading"><span></span></div> 
         </div>
-      <!-- <div class="js-show-find category-guid" style="display: none;"></div> -->
+        <div class="line-block line-block-gray">
+          <div class="lineblock-title">
+            <span class="lineblock-font">最热商品推荐</span>
+          </div>
+        </div>
+          <div class="hot-goods js-waterfull-wrap" data-src="">
+            <ul class="js-list js-lazy" data-src="" 
+              v-infinite-scroll="getLists"
+              infinite-scroll-disabled="loading"
+              infinite-scroll-distance="10">
+              <li v-for="list in lists" :key="list.id">
+                <div class="goods-item">
+                  <a href="https://h5.youzan.com/v2/showcase/goods?alias=2fwig6rnqfq6m&amp;source=yzapp&amp;f_platform=yzapp">
+                    <div class="thumb img-box">
+                      <img class="fadeIn" v-bind:src="list.img">
+                    </div>
+                    <div class="detail">
+                      <div class="title">{{list.name}}</div>
+                      <div class="price">￥{{list.price}}</div>
+                    </div>
+                  </a>
+                </div>
+              </li>
+            </ul>
+            <div class="loading-more" v-show="loading"><span></span></div> 
+          </div>
+        <!-- <div class="js-show-find category-guid" style="display: none;"></div> -->
+      </div>
     </div>
+    <foot></foot>
   </div>
-   <div class="bottom-nav">
-    <ul>
-      <li class="active"><a href="https://maijia.youzan.com/mars/homepage"><i class="icon-home"></i><div>有赞</div></a></li>
-      <li><a href="https://maijia.youzan.com/mars/category"><i class="icon-category"></i><div>分类</div></a></li>
-      <li><a href="https://h5.youzan.com/v2/trade/cart?f_platform=yzapp&amp;source=yzapp"><i class="icon-cart"></i><div>购物车</div></a></li>
-      <li><a href="https://h5.youzan.com/v2/buyer/member"><i class="icon-user"></i><div>我</div></a></li>
-    </ul>
-  </div> 
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/pages/index/index.js b/src/pages/index/index.js
index 833ac58..91825cc 100644
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@@ -4,12 +4,13 @@ import './index.css'
 import Vue from 'vue'
 import axios from 'axios'
 import url from 'js/api.js'
+import Foot from 'components/Foot.vue'
 
 import { InfiniteScroll } from 'mint-ui'
 Vue.use(InfiniteScroll)
 
 new Vue({
-  el: '.container',
+  el: '.vue-el',
   data: {
     lists: null,
     loading: false
@@ -29,5 +30,8 @@ new Vue({
         this.loading = false
       })
     }
+  },
+  components: {
+    Foot
   }
 })
\ No newline at end of file

From bd65871204297c4985323fd1865105eee187a064 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Fri, 11 Aug 2017 00:05:35 +0800
Subject: [PATCH 07/15] add Swipe.vue

---
 package.json               |  1 +
 src/components/Foot.vue    | 98 ++++++++++++++++++++++++++++++++++++++
 src/components/Swipe.vue   | 38 +++++++++++++++
 src/modules/js/api.js      |  6 ++-
 src/pages/index/index.css  | 93 ------------------------------------
 src/pages/index/index.html | 16 ++-----
 src/pages/index/index.js   | 30 ++++++++++--
 yarn.lock                  |  4 ++
 8 files changed, 174 insertions(+), 112 deletions(-)
 create mode 100644 src/components/Swipe.vue

diff --git a/package.json b/package.json
index 19f819e..c0cb75f 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.16.2",
     "mint-ui": "^2.2.9",
+    "swiper": "^3.4.2",
     "vue": "^2.3.3",
     "vue-router": "^2.6.0"
   },
diff --git a/src/components/Foot.vue b/src/components/Foot.vue
index 4008b98..3a8593a 100644
--- a/src/components/Foot.vue
+++ b/src/components/Foot.vue
@@ -12,3 +12,101 @@
 <script>
   
 </script>
+
+<style>
+.bottom-nav {
+  position: fixed;
+  width: 100%;
+  height: 50px;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 8;
+  -o-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .bottom-nav {
+    border-top-width: 1px
+  }
+}
+
+.bottom-nav ul {
+  position: relative;
+  height: 100%;
+  zoom: 1
+}
+
+.bottom-nav ul:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.bottom-nav li {
+  display: block;
+  float: left;
+  width: 25%;
+  height: 100%
+}
+
+.bottom-nav a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding-top: 8px;
+  text-align: center;
+  font-size: 10px
+}
+
+.bottom-nav [class^=icon-] {
+  display: block;
+  width: 22px;
+  height: 22px;
+  margin: auto;
+  margin-bottom: 4px;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: 100% auto
+}
+
+.bottom-nav .icon-home {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAAC7dJREFUeAHtnHts1WcZx2kpbdkKdDULnQIGJ5dRo44xYItLCiFkElGXLTBjNiKDMC9hDtcwkAIFmkqqZEICMoQYFjIuapYtmwuJUP5wOCNMiRSGzhEurguXcr+X+vm++z0/33P4nZ7fOT0tjd2bvH3ey/M87/N8f+/99zvt0ePT4BDI60wctm7d2rOxsXEwbQ69efPm3fn5+X2gfWQD6fOkz0NPkD00YsSID6dMmdKius4IHQrE4sWL++JEJXE8Tlbm5eXd19raWhjHMXivwXsAYBrg30FsQN+5OLLZ8OQciLVr1/Zqamp6FMefxpHJGFWUjWERMlcB5w2A2VheXv72rFmzrkfwZF2UMyBWrFjR+8yZMzOwpIo4MJVFOHMMgN7HIdHz5M+Ll3Qf0hoqA6DDyA9IpYPyo8T60tLSX8+ZM+dyG3yxq9oNBN01H+Nn0mINsX9yyzi1l7Lt0J3Qd+C/kMwTlYevhPKHAWQcdCJ0ZATfx5QtAtR18N+MqI9d1C4gaHwkBq4hjvZbxOkm8hugr8Bz0K/LNo2e4bTzFPLToeW+Htr5C/H78Aj0rELWQCxcuPAZGl+NUeHkR/4IcTmWbMCoK1lZlEYIvcWwCIy5xEHGTruaXH+wZMmS9VaWCc0YCC2B+/fv/zmN/tgawogrxLqysrLls2fPvmrlHUlXrlxZdPLkyRdp90VsETgukH+poqLihUyX3oyA4GmU0ugW4kRrGLqnV69eU6urqz/wyjotuXTp0nuvX7++hQYfsEYBQ3PSVOw9Y2XpaGwg1OCNGzfeAoShppTGNvfr1296rmZu05sp1Yp19uzZDdj2pMli26GCgoJJcR9QLCCCnvCuB0IrDVYzHmut4a5Ambd+ih1Lic4vgUEcE6dnpAUimBPUE9xwQPEl4ndR/lp7nUdHAXqriTPReRdUw+tV9gcrsu1l6Pw2ejYR75B96N3OnDEp3ZyRn84Zzga/QKnNCa25AkHtsv/YjO6FJO+BasKrIC5jY/YnHAonQMpiBz0g2YiAeq02ahPlQzoFbQKhJRJjn/OUVKshL591Ej0TEH48hYL7KV+Woi5tcWBjtTHKB/li+SiaEgiUjQTZ1SZEenMu5wSe1Nc93Qd79+49mDZetzLqn6+trb3H8plS2SqbTY70avlk+WQaCQQC+RiiHWNhILBHq0OycHvy6B7iyb81b968wzU1Nd+izJ0wqc9nlUrYsXr8sZKBzXvELF+Ia+RblHBkoc4OCDkjQPKK9gnZTl5RjaoMvSEQpN/1+Jot3dLS4iY8y2dKZbNslw+SlU/yLUrPLUBoTYaxxphRUhd3LTaZdLS+vv5OjDIgWq9evfpHk6E8dL5nz56ud1hdNlS2ywdPtibw0SviYighRyY4SrtTJAqOaNuczNPe/OXLl0eho2eg50pdXd0p00mbehAuAEpYbmXZUPkgXwLZ/oGPCaoSgNClCrW6T3AB4Q45O9A9x1gb0MNeWkn/IudkUl1WWZ1/5IsnXBX4GhYlAKGbJWoGqhbBJsgGpXMdeNIhENwl/DlJf4GXzwkQgT5dC8gnhYGBr5/k+JsABE/q6bCmA4/StDHW2mEeCPclwdi13W7LokWLzhpfeymrhSbM8MEm+dojRB/GvlROtgZB7xVL55JyeBvCafGzgc7Wffv2vWn6m5ubv0i7Lgs9RXS7Q6tfvnx5HybWQeTLsPUENh+0ujhUPtEb54sXOlk+E92EHAJBXSXRjU8E9mbaCLKxAiA84TF+tG3bthYvr1tvCwX0iFVkBmH050UvXrx4l1WKslvcydCaga3/9stTpeUTOveiTxsr+VpJfJ2YMDTGqyAI2y2RawrIUzyd27y0Vqy/krczQhkG/4j4Tcq+QkwAIZAbR/2bOJgwxIO6VMT3LfQ5VEBXqzRJUN5h6VxStr1jMPyrgc7W4uLiWl//qlWrNLtrSCYMCY9H5deIF40HfcOReczjaTMJ705jSPBZhTpqw3CfMaB8t6VzSdky677ABcA+PH/+fL3VSghss6cxgU7Fht9i02uk67lgmQZ/BUDmE4uIJeTD+QFe25wl6EqRecfK5bN8V97NEXoNhzJ3rqDyGF0t1pW7KYxD0TmJJ/CNgLeV9A9TyTGONWQShk0yL/LhUCF9PLk+VV6+oV/vVAbI5+AV5L9saAw1QSrft3SuKI1rj78RfW5JAOwPeKp/aKf+z5g85wnNLbFDko/Od9cjMPJu00KXO2bpbChO59Od7+XAdD/yeu/xIPrHkTYQbpD3J8xsmkmQAdiMerB8xAanw3x3QFChV22uAsPPJ7QSI4PzJcg/j0GPIv9llsiSKDHqbzLeH+cg9F5UfYZlct4ND0DXcng0rrzvo3yXnPUIl1EBxmYEBCDo3lEz8SioVEQFXfE1A8L3AMGt21FMGZbJcQcE7bpjQVx5+Wi28gD/B0RcBSn4dFk6KqlOmyRtae9UOai/DGDPKp2rgDN9zRl0XmqvXjdZYmjYC1Ae9o44ykE0XHbR80+e+peYCNXT6k0eno8snQuqMwl2DvJ0/c1Lp036PprvDggMDYEA6YyAQJFbh9U6DRxn27s/rSXtZLhw4cI0VNiK9yG9LaOXv76P5rv1iBNmGxVtfZdgbLeVAvgXzACcynji9X3kQTrfDdVDnuJhlu6qFCCOmG2kM5ooJQd4vo/OdweEPtyiUnt4de8BWg6V7sKh0bOtzEunTco3+ShG+SzflXZA6HUYlQdUEISHLdEVKV1bJ1IXcCb29joQCX2Tz/Yq0IaGlriGgFG9QjvBLhtw/ikzDlu3WzoO9X3zfQ6BQIl/9J4YR+lt5Cm1tgsLC39j6ZjU9y302QeiAUXuaxdQG8lYGh5TcaezYZ87t6jhoqKiM3ENkE/yLeCXrw0mGwIB0zm63BtWgUDY/aysK1Ds/Bl22AHuUlVVlS5pYgXfJ/kqn03QnTUsw5jZyAHmiSA/HcalRG2VOz2wO63gImcCBo/FgRFQ3R/0Y6IMN3CU/S6uYfhRjPx045evlhZNAEJftB4/flyHmYEIldOQBFeLsSMCbeRxI6V3HONJP0h7w3D0c9ASQHC9lXLXtFGzA54jbOerLR+D+p8lHpWvvkwCEPqsly2yzggrxUTjc/l6bX17v5TD6Hyu8SfQ2yrR+QBRV2vl3BTpPWc43s1Zo7IhIpxF3zYuYxYvWLAg1tKpL/BOnTo119NVn/wJcwIQYtRnvdwm626xPwYNOn36tBQsUV2MUEgX1Gn0EeJjxs9TruaOInTYytNQfZ58QBG+RlG6cyNg6mzxyeVJGgVWrc8QSdsh7WP5aHVGI42jV8yC4VdiwoArOlGmeiMO70zYXhZvNgH9JwHNOQxtxFnnOM4ey0ZfskzwNeA/0F0c1D3L/LM2me+WHiEGjFmHoMbUaCngaW7h6PtI1DcSrONvU38OPv/lTHI7AvQ/FLonK6qI7IGom+xbhLMs0HGd3r0FcQcCNuhT5XVR6iJ7hBh5Irpv3E0sVB4Fm5nYvqN0coD3a/Dpo7Mh8DVDo55wuFQly3dUnjnoVWx5Uvqx6xrxIWyNPLKnBELCdPtnIP54WkC3qlVdVw/YrnlumWfnDGxf7+UTkuGanFAaZHbt2vVeZWWltrNjg6JxhL83NDQcjOLvKmU8dU3Ymgfcg6YnvAQIdW3Z59bqthj0gTeK7GCTRwOb1FBbMrezLgBhEzYYCPrg9IV0NqUFQsdUgNAHWYekDCDuYDn8fdD10unv1HrZJNtkoxqWzbLdjtptGdPmHOELfvpRuocG3a4UtLv3zxQMD7091rfNdMHnrIzud1t+uKJdLw9mHtE2S9oD/ZLrt5/EGQ5mv2jsoeELKa2lFQC670+ZfEAYKtp0rSGO9ssBqIl89/hxmzkOGLF+7kiX3QFgu+HXy9u0Ab4SAH2IITge5q79c0ffm2BfP4OyKuJAv85P45w+0vj/+wGs76TS3f4n0cmAKE/31om0ktj9fiSP0ylDsPQOhqHL/duElEZ3t4r/ArDQCKfQERmpAAAAAElFTkSuQmCC")
+}
+
+.bottom-nav .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-cart {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-user {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .active a {
+  color: #ff6366
+}
+
+.bottom-nav .active .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .active .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .active .icon-cart {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABMJJREFUeAHtWs2PFEUU7+qZHUWcxY/swesEo0j8hIs3FENCOHmYDRv+As/EgzEmaDSeTOTEwXAzWZjJ7kII2YuHvWCMAUXQNbDJEi7Augo4w7q7dE8Xv9dMLVU93duzUzU4tVQnu1WvXtV7r3793qvqqvE89zgEHAIOAYeAQ8Ah4BBwCGghwOTRwdjYl4zzjz3GSnL7pqhz3sI8bnPGzvEw/LxUr1+U56UAEY6NNcAsyx02ZZ3z/yLO95ZOnvxJzM8XFSo550dRrFAl808eYGudsWcYY9/K5iseITOy6vCaG+C9lMW3ph0v++Lc3FO7L1wIyGbFI7qZBI3vpt/A92EsFCCQrRsGAon0t4GfZHcG/i132zAQURRtCiC4513SAsILw80RGpz/ogXEad+fw4qyLAuxsY5VQg+I0Xq9Bbf63cbJyzaHQaAHBAkDmraHx92nJybmZWA2nCxpcOR5VidMePSvMghU7wkIFkV2e0QUKWHRMxCNZvNyvAVPwmoJHTFmBogXp6cb2Fhds2TenWYmEiV16Ck0aKDFW+2lrycmrtIc5KdnIICElQmTXuCRON/LMGh4BJZQK4HAwVNHfiBIevaIIAisXDnSEqUWEFsmJ68jPP5VHWzwKRzVmfUImjKE2uUVnK/+ePPmbNrr6jk0YmGWJUz69H5vZiY0DgQEW5UwcU6ZGhYEjK5HWBUaOFQ6n+YN2kBcbzT+QMJMdbUshf9bO+417vv+mSz9Wh7x8vT0KsLjSpbwQWpHYv/q2fHxhSybilmMbtsRdxQeO9v98YXu3Y/rnCevClQaA9tjHha6/ZPyPG8J3noLL+pPfC0fH6rVTin6EoQ2EByHucz3D8VyOb9WPHFie0KHFaRWaMQz9H05YVb+2b9/2IqZJ4zUBmJlZeXREgr3HN627c2EDitIbSDKU1N/USyK2SIm3xZ1m0ptIGiymPxaePiMvWUTAMJWI0BA2Fp44Hv/yQUCn7ZrQGBN3Hl+164hgbQtpRmPkE+18WubNyoV6/KEESBOR9FVJMxF8fZZofBdUK2+e2vfvq2ibdBLdXenYW1w8OAXWD0/6xCBpIE2+v0S7Tqpjqsy9rCMiZx/6o7zkb1iJ9nJF7JJ3zK21seGxsc/ydFCt3dmnrsHDjy/tVz+Afa9Y0aiMSnRZBiW6M52PYlGQoMUPHf27J1mq/U+HOBTvJKfESoL+FtdT/lj4EWw4XgeCGSHMY9Yb1JHEucer1Writ6RxUWFLjebCr2lUlHo0r17Cl1cXlbpkZGYXpifV34etJ6NjucQUBFQXEplmaNq1Wrhw2LxMCSO4oLlFWRyOsypTYXhN93Er7DElBwhTy77DkRsfKFAq8keWTHVkVhnplqtD7oBw5ScpA2CNrZqCIHJkjwhDQTqR+1tT0kO66BNyekQ3G7oOxDQM5qlvN2exxfD8/rl8YWc1LLvQFBOSNXcbszji7F5/fL4Qk5W2Xcg2okxSz9dG3Z1Cp7XL4+faUCb0XcgoKeWY0QeXwzP65fHF3JSy74DQUskrQ5p2uNVA/w0XrLNlJykXEEXRKVfZX12lr++Y8f3r/r+EnS8gFgehhtfRv0ols6Pulk6yTZTckiWexwCDgGHgEPAIaCHwAMJYdPtuf90jwAAAABJRU5ErkJggg==")
+}
+
+.bottom-nav .active .icon-user {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABLNJREFUeAHtW0toE1EUnZekrfVT1IVWqS1CiwvFLir4wUItCEI3Wp02deVOcFEUVyJCFn5WRdCFC0FQEZtEW0EFF4IFPxutohZ1UXGhbaB+UCm2zWee545BsFhyZ3JnGHEehCaZM+fce3Lnzbw7U8MIR+hA6EDoQOhA6ADXAcUFSuAShhE5appbjEhkp6FUCzhXIoCVxK0NYxx/xg2thw3LunEinX6UMAyLtvkxfDHiXVvbvLoVK3ohdhhJLWMmNgFz+j5kMmdWDw1NM/dxDfPciHxX125UwGlUwCpXUWr9HhVyKJZKXXe1P3OnCBPnBqZy8fgJIxq95toEUiUDwWFz4ZObQDj7eEWs8vH4VSTRzQmCjdE6Gevv7wEeR43s8KQi8OsdFzeB8oaxNresBzabeEXYcwIdDl6OQmGP9JwhWhF0drAnRi9NIG5MvraWoI6oEXSKtCc3wQD/SoUJ1Nb660Z3X4oZkcDvhOOMrhN8GaSVgKaUmNgckTPNrSoWuy8VGIdH5/OtFen0Aw62FEbMUfuyuZSa9Ha6VBcackb8WjsIhcWkEdSUM6K4eGKmIAWzF2wSZGJGYLIRC4qbmKSmmBHc4EVxSoldaosZUewniOZZikxrnSmF4W4XMwKC1Fjxe4hpyhlBnSW/h6CmnBFor/ntA7X0pDTFjKAeI4KakAqMwTNR1GRAS0PEjEig0Uo9xtKSMgjSIk0ZNsFFCwVEjVZ0od9LBTcnDzRsrTkBzjeIVQRJ291mNFqdh+FwD2hId7ZFjaB0qHOE8/tJh6mx4cQt3Z0icbFl+KxMwuZt0RBN3WbJyrArwaMOtpcV8btA/pUbPF4dGr+NoDfhLb8/7DCMBE7XQb0JPCvU8GPoQOjALwc8nSwnTHPhkmh0I9YFa5XW9bj504BXPd7TMxLVeF+NS/L5xR9jGp9n8Hka+M/4bkwpNYbT5pil9Rt893heMvm2iBX/I2rEvba2WOvy5TuQUAcC3wzydXgfFYta6y/gfYLXnVw2279gYECsQyViRLa7uxlE+1QkshdJc5+IKdcfFIq+p5W6/DCTubJtaChfDmFZRvzo7KyrrKzsw6/eVU4Q5e4LQ16jSdNbkUrddcvlygg6BLbW1h7GMXwMwgvcikvvB0MGpwuF/YvS6Y9OuR0b8aSlpaK5qSkJE3Y5FfMDj/nj5dTkZHvNzZufnOg5MqJYCWRCpxMRv7GojBdTMzPtNYODdPZhDUf9iNba2otBN4GyRozrq6uqbiUcdODYFYGHw3ZBYYBlb0BAlmUdqEwmz3HCYVcETlOnOIRBwkSUOpIyTdZ1DMuIXE9PO0pnTZCSZMWCR4w6o9EdHCzLCBB1cMiCiEElb+fExTNC6y0cskBitN7EiYtlBGbhBg5ZEDE4pFnPgLOMQIJLgpgkKyallnJwXCO+c8gCidH6KyculhG4UhvhkAURg8nyKSculhFoltzmkAURowqF85y4WEY8Hx09i8XMKw5hkDCo5Du4Pch6hoJlxIbh4ZyVze4G8bMgJVoilvT3b9/Y/y/CXmuQqL0Eb2w8iDWHiVNqE75aXCIYvzd/RuWOaMu6gDXGJb/FQ73QgdCB0IHQgf/FgZ+UQn2ZrGr7bgAAAABJRU5ErkJggg==")
+}
+</style>
+
diff --git a/src/components/Swipe.vue b/src/components/Swipe.vue
new file mode 100644
index 0000000..7aa0e7c
--- /dev/null
+++ b/src/components/Swipe.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide" v-for="list in lists">
+        <a class="js-no-follow" :href="list.clickUrl">
+          <img class="goods-main-photo fadeIn" :src="list.image">
+        </a>
+      </div>
+    </div>
+    <div class="swiper-pagination"></div>
+  </div>
+</template>
+
+<script>
+import Swiper from 'swiper'
+import 'swiper/dist/css/swiper.css'
+export default {
+  props: ['lists'],
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      new Swiper('.swiper-container', {
+        loop: true,
+        pagination: '.swiper-pagination'
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.swiper-slide img {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/modules/js/api.js b/src/modules/js/api.js
index 53f5c23..dcccaf2 100644
--- a/src/modules/js/api.js
+++ b/src/modules/js/api.js
@@ -1,8 +1,10 @@
 let url = {
-  hotLists: '/index/hotLists'
+  hotLists: '/index/hotLists',
+  banner: '/index/banner'
 }
 
-let host = 'http://rapapi.org/mockjsdata/23334'
+// let host = 'http://rapapi.org/mockjsdata/23334'
+let host = 'http://rapapi.org/mockjsdata/24170'
 
 for (let key in url) {
   if (url.hasOwnProperty(key)) {
diff --git a/src/pages/index/index.css b/src/pages/index/index.css
index d7858ce..cd33ed0 100644
--- a/src/pages/index/index.css
+++ b/src/pages/index/index.css
@@ -126,100 +126,7 @@
   font-size: 14px
 }
 
-.bottom-nav {
-  position: fixed;
-  width: 100%;
-  height: 50px;
-  bottom: 0;
-  background-color: #fff;
-  z-index: 8;
-  -o-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
-  border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
-  border-top: 2px solid #e5e5e5
-}
-
-@media only screen and (-webkit-min-device-pixel-ratio:1.5),
-only screen and (min--moz-device-pixel-ratio:1.5),
-only screen and (min-device-pixel-ratio:1.5) {
-  .bottom-nav {
-    border-top-width: 1px
-  }
-}
-
-.bottom-nav ul {
-  position: relative;
-  height: 100%;
-  zoom: 1
-}
-
-.bottom-nav ul:after {
-  content: "";
-  display: table;
-  clear: both
-}
-
-.bottom-nav li {
-  display: block;
-  float: left;
-  width: 25%;
-  height: 100%
-}
-
-.bottom-nav a {
-  display: block;
-  width: 100%;
-  height: 100%;
-  padding-top: 8px;
-  text-align: center;
-  font-size: 10px
-}
-
-.bottom-nav [class^=icon-] {
-  display: block;
-  width: 22px;
-  height: 22px;
-  margin: auto;
-  margin-bottom: 4px;
-  background-position: 50%;
-  background-repeat: no-repeat;
-  background-size: 100% auto
-}
-
-.bottom-nav .icon-home {
-  background-image: url("data:image/png;base64,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")
-}
-
-.bottom-nav .icon-category {
-  background-image: url("data:image/png;base64,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")
-}
-
-.bottom-nav .icon-cart {
-  background-image: url("data:image/png;base64,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")
-}
-
-.bottom-nav .icon-user {
-  background-image: url("data:image/png;base64,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")
-}
-
-.bottom-nav .active a {
-  color: #ff6366
-}
 
-.bottom-nav .active .icon-home {
-  background-image: url("data:image/png;base64,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")
-}
-
-.bottom-nav .active .icon-category {
-  background-image: url("data:image/png;base64,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")
-}
-
-.bottom-nav .active .icon-cart {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABMJJREFUeAHtWs2PFEUU7+qZHUWcxY/swesEo0j8hIs3FENCOHmYDRv+As/EgzEmaDSeTOTEwXAzWZjJ7kII2YuHvWCMAUXQNbDJEi7Augo4w7q7dE8Xv9dMLVU93duzUzU4tVQnu1WvXtV7r3793qvqqvE89zgEHAIOAYeAQ8Ah4BBwCGghwOTRwdjYl4zzjz3GSnL7pqhz3sI8bnPGzvEw/LxUr1+U56UAEY6NNcAsyx02ZZ3z/yLO95ZOnvxJzM8XFSo550dRrFAl808eYGudsWcYY9/K5iseITOy6vCaG+C9lMW3ph0v++Lc3FO7L1wIyGbFI7qZBI3vpt/A92EsFCCQrRsGAon0t4GfZHcG/i132zAQURRtCiC4513SAsILw80RGpz/ogXEad+fw4qyLAuxsY5VQg+I0Xq9Bbf63cbJyzaHQaAHBAkDmraHx92nJybmZWA2nCxpcOR5VidMePSvMghU7wkIFkV2e0QUKWHRMxCNZvNyvAVPwmoJHTFmBogXp6cb2Fhds2TenWYmEiV16Ck0aKDFW+2lrycmrtIc5KdnIICElQmTXuCRON/LMGh4BJZQK4HAwVNHfiBIevaIIAisXDnSEqUWEFsmJ68jPP5VHWzwKRzVmfUImjKE2uUVnK/+ePPmbNrr6jk0YmGWJUz69H5vZiY0DgQEW5UwcU6ZGhYEjK5HWBUaOFQ6n+YN2kBcbzT+QMJMdbUshf9bO+417vv+mSz9Wh7x8vT0KsLjSpbwQWpHYv/q2fHxhSybilmMbtsRdxQeO9v98YXu3Y/rnCevClQaA9tjHha6/ZPyPG8J3noLL+pPfC0fH6rVTin6EoQ2EByHucz3D8VyOb9WPHFie0KHFaRWaMQz9H05YVb+2b9/2IqZJ4zUBmJlZeXREgr3HN627c2EDitIbSDKU1N/USyK2SIm3xZ1m0ptIGiymPxaePiMvWUTAMJWI0BA2Fp44Hv/yQUCn7ZrQGBN3Hl+164hgbQtpRmPkE+18WubNyoV6/KEESBOR9FVJMxF8fZZofBdUK2+e2vfvq2ibdBLdXenYW1w8OAXWD0/6xCBpIE2+v0S7Tqpjqsy9rCMiZx/6o7zkb1iJ9nJF7JJ3zK21seGxsc/ydFCt3dmnrsHDjy/tVz+Afa9Y0aiMSnRZBiW6M52PYlGQoMUPHf27J1mq/U+HOBTvJKfESoL+FtdT/lj4EWw4XgeCGSHMY9Yb1JHEucer1Writ6RxUWFLjebCr2lUlHo0r17Cl1cXlbpkZGYXpifV34etJ6NjucQUBFQXEplmaNq1Wrhw2LxMCSO4oLlFWRyOsypTYXhN93Er7DElBwhTy77DkRsfKFAq8keWTHVkVhnplqtD7oBw5ScpA2CNrZqCIHJkjwhDQTqR+1tT0kO66BNyekQ3G7oOxDQM5qlvN2exxfD8/rl8YWc1LLvQFBOSNXcbszji7F5/fL4Qk5W2Xcg2okxSz9dG3Z1Cp7XL4+faUCb0XcgoKeWY0QeXwzP65fHF3JSy74DQUskrQ5p2uNVA/w0XrLNlJykXEEXRKVfZX12lr++Y8f3r/r+EnS8gFgehhtfRv0ols6Pulk6yTZTckiWexwCDgGHgEPAIaCHwAMJYdPtuf90jwAAAABJRU5ErkJggg==")
-}
-
-.bottom-nav .active .icon-user {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABLNJREFUeAHtW0toE1EUnZekrfVT1IVWqS1CiwvFLir4wUItCEI3Wp02deVOcFEUVyJCFn5WRdCFC0FQEZtEW0EFF4IFPxutohZ1UXGhbaB+UCm2zWee545BsFhyZ3JnGHEehCaZM+fce3Lnzbw7U8MIR+hA6EDoQOhA6ADXAcUFSuAShhE5appbjEhkp6FUCzhXIoCVxK0NYxx/xg2thw3LunEinX6UMAyLtvkxfDHiXVvbvLoVK3ohdhhJLWMmNgFz+j5kMmdWDw1NM/dxDfPciHxX125UwGlUwCpXUWr9HhVyKJZKXXe1P3OnCBPnBqZy8fgJIxq95toEUiUDwWFz4ZObQDj7eEWs8vH4VSTRzQmCjdE6Gevv7wEeR43s8KQi8OsdFzeB8oaxNresBzabeEXYcwIdDl6OQmGP9JwhWhF0drAnRi9NIG5MvraWoI6oEXSKtCc3wQD/SoUJ1Nb660Z3X4oZkcDvhOOMrhN8GaSVgKaUmNgckTPNrSoWuy8VGIdH5/OtFen0Aw62FEbMUfuyuZSa9Ha6VBcackb8WjsIhcWkEdSUM6K4eGKmIAWzF2wSZGJGYLIRC4qbmKSmmBHc4EVxSoldaosZUewniOZZikxrnSmF4W4XMwKC1Fjxe4hpyhlBnSW/h6CmnBFor/ntA7X0pDTFjKAeI4KakAqMwTNR1GRAS0PEjEig0Uo9xtKSMgjSIk0ZNsFFCwVEjVZ0od9LBTcnDzRsrTkBzjeIVQRJ291mNFqdh+FwD2hId7ZFjaB0qHOE8/tJh6mx4cQt3Z0icbFl+KxMwuZt0RBN3WbJyrArwaMOtpcV8btA/pUbPF4dGr+NoDfhLb8/7DCMBE7XQb0JPCvU8GPoQOjALwc8nSwnTHPhkmh0I9YFa5XW9bj504BXPd7TMxLVeF+NS/L5xR9jGp9n8Hka+M/4bkwpNYbT5pil9Rt893heMvm2iBX/I2rEvba2WOvy5TuQUAcC3wzydXgfFYta6y/gfYLXnVw2279gYECsQyViRLa7uxlE+1QkshdJc5+IKdcfFIq+p5W6/DCTubJtaChfDmFZRvzo7KyrrKzsw6/eVU4Q5e4LQ16jSdNbkUrddcvlygg6BLbW1h7GMXwMwgvcikvvB0MGpwuF/YvS6Y9OuR0b8aSlpaK5qSkJE3Y5FfMDj/nj5dTkZHvNzZufnOg5MqJYCWRCpxMRv7GojBdTMzPtNYODdPZhDUf9iNba2otBN4GyRozrq6uqbiUcdODYFYGHw3ZBYYBlb0BAlmUdqEwmz3HCYVcETlOnOIRBwkSUOpIyTdZ1DMuIXE9PO0pnTZCSZMWCR4w6o9EdHCzLCBB1cMiCiEElb+fExTNC6y0cskBitN7EiYtlBGbhBg5ZEDE4pFnPgLOMQIJLgpgkKyallnJwXCO+c8gCidH6KyculhG4UhvhkAURg8nyKSculhFoltzmkAURowqF85y4WEY8Hx09i8XMKw5hkDCo5Du4Pch6hoJlxIbh4ZyVze4G8bMgJVoilvT3b9/Y/y/CXmuQqL0Eb2w8iDWHiVNqE75aXCIYvzd/RuWOaMu6gDXGJb/FQ73QgdCB0IHQgf/FgZ+UQn2ZrGr7bgAAAABJRU5ErkJggg==")
-}
 
 ::-webkit-scrollbar {
   display: none
diff --git a/src/pages/index/index.html b/src/pages/index/index.html
index 1f3ea50..522f94f 100644
--- a/src/pages/index/index.html
+++ b/src/pages/index/index.html
@@ -28,18 +28,10 @@
   <div class="vue-el">
     <div class="container with-bottom-nav" style="min-height: 667px;">
       <div class="content">
-        <div class="js-image-swiper custom-image-swiper  custom-image-swiper-single" data-images="1">
-          <div class="swiper-container">
-            <div class="swiper-wrapper">
-              <div class="swp-page">
-                <a class="js-no-follow" href="https://h5.koudaitong.com/v2/index/rukou">
-                  <img class="goods-main-photo fadeIn" src="https://img.yzcdn.cn/upload_files/2016/07/29/Fl3T06Mu7TpIhR4L1s2tzm8cZrgt.jpg">
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-        <a href="https://maijia.youzan.com/mars/notice/detail?id=" class="notice"></a>
+        <!-- <div class="js-image-swiper custom-image-swiper  custom-image-swiper-single" data-images="1">
+         </div>  -->
+          <swipe :lists="bannerLists" v-if="bannerLists"></swipe>
+        <!-- <a href="https://maijia.youzan.com/mars/notice/detail?id=" class="notice"></a> -->
         <div class="section-title">优店推荐</div>
         <div class="section-content shops">
           <div class="shop-wrap">
diff --git a/src/pages/index/index.js b/src/pages/index/index.js
index 91825cc..698d55a 100644
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@@ -5,6 +5,7 @@ import Vue from 'vue'
 import axios from 'axios'
 import url from 'js/api.js'
 import Foot from 'components/Foot.vue'
+import Swipe from 'components/Swipe.vue'
 
 import { InfiniteScroll } from 'mint-ui'
 Vue.use(InfiniteScroll)
@@ -12,26 +13,45 @@ Vue.use(InfiniteScroll)
 new Vue({
   el: '.vue-el',
   data: {
+    pageNum: 1,
+    pageSize: 6,
     lists: null,
-    loading: false
+    loading: false,
+    allLoaded: false,
+    bannerLists: null
   },
   created() {
     this.getLists()
+    this.getBanner()
   },
   methods: {
     getLists() {
+      if (this.allLoaded) return
       this.loading = true
-      axios.post(url.hotLists).then(res => {
+      axios.post(url.hotLists, {
+        pageNum: this.pageNum,
+        pageSize: this.pageSize
+      }).then(res => {
+        let curLists = res.data.lists
+        if(curLists.length < this.pageSize) {
+          this.allLoaded = true
+        }
         if (this.lists) {
-          this.lists = this.lists.concat(res.data.lists)
+          this.lists = this.lists.concat(curLists)
         } else {
-          this.lists = res.data.lists
+          this.lists = curLists
         }
         this.loading = false
       })
+    },
+    getBanner() {
+      axios.get(url.banner).then(res => {
+        this.bannerLists = res.data.lists
+      })
     }
   },
   components: {
-    Foot
+    Foot,
+    Swipe
   }
 })
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index bbf5f68..c1f37b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3775,6 +3775,10 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
+swiper@^3.4.2:
+  version "3.4.2"
+  resolved "http://registry.npm.taobao.org/swiper/download/swiper-3.4.2.tgz#39d6b410b1a39833e1f72d3b72999df5f5e38392"
+
 tapable@^0.2.7, tapable@~0.2.5:
   version "0.2.8"
   resolved "http://registry.npm.taobao.org/tapable/download/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"

From c4b1ba4ea8eb29bf4e32d6307e5046001cd3c5f7 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Sat, 12 Aug 2017 22:55:31 +0800
Subject: [PATCH 08/15] add comments

---
 src/components/Swipe.vue   | 28 +++++++++++++++++++++++++---
 src/pages/index/index.html |  3 ++-
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/Swipe.vue b/src/components/Swipe.vue
index 7aa0e7c..47970c6 100644
--- a/src/components/Swipe.vue
+++ b/src/components/Swipe.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="swiper-container">
     <div class="swiper-wrapper">
-      <div class="swiper-slide" v-for="list in lists">
+      <div class="swp-page swiper-slide" v-for="list in lists">
         <a class="js-no-follow" :href="list.clickUrl">
           <img class="goods-main-photo fadeIn" :src="list.image">
         </a>
@@ -12,11 +12,24 @@
 </template>
 
 <script>
+// swiper对dom节点进行操作的，dom节点什么生成？mounted
 import Swiper from 'swiper'
 import 'swiper/dist/css/swiper.css'
+
 export default {
-  props: ['lists'],
+  // props: ['lists'],
+  props: {
+    lists: {
+      type: Array,
+      required: true
+    },
+    name: {}
+  },
+  created() {
+    // console.log('created: ',document.querySelectorAll('.swiper-slide'))
+  },
   mounted() {
+    // console.log('mounted: ',document.querySelectorAll('.swiper-slide'))
     this.init()
   },
   methods: {
@@ -26,7 +39,16 @@ export default {
         pagination: '.swiper-pagination'
       })
     }
-  }
+  },
+  // watch: {
+  //   lists(val,oldVal) {
+  //     console.log(val,oldVal)
+  //     console.log('before nextTick: ',document.querySelectorAll('.swiper-slide'))
+  //     this.$nextTick(() => {
+  //       console.log('after nextTick: ',document.querySelectorAll('.swiper-slide'))
+  //     })
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/pages/index/index.html b/src/pages/index/index.html
index 522f94f..88e6948 100644
--- a/src/pages/index/index.html
+++ b/src/pages/index/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <!-- DNS预解析  -->
   <link rel="dns-prefetch" href="https://dn-kdt-img.qbox.me/">
   <link rel="dns-prefetch" href="https://img.yzcdn.cn/">
   <link rel="dns-prefetch" href="https://b.yzcdn.cn/">
@@ -30,7 +31,7 @@
       <div class="content">
         <!-- <div class="js-image-swiper custom-image-swiper  custom-image-swiper-single" data-images="1">
          </div>  -->
-          <swipe :lists="bannerLists" v-if="bannerLists"></swipe>
+          <swipe :lists="bannerLists" name="swipe.vue" v-if="bannerLists"></swipe>
         <!-- <a href="https://maijia.youzan.com/mars/notice/detail?id=" class="notice"></a> -->
         <div class="section-title">优店推荐</div>
         <div class="section-content shops">

From 7fbc5324a49c3aafcd059fba4c208fcea5817379 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Sat, 12 Aug 2017 23:19:18 +0800
Subject: [PATCH 09/15] create lesson02

---
 src/modules/js/api.js            |    6 +-
 src/pages/category/category.css  | 1274 ++++++++++++++++++++++++++++++
 src/pages/category/category.html |  154 ++++
 src/pages/category/category.js   |   60 ++
 4 files changed, 1493 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/category/category.css
 create mode 100644 src/pages/category/category.html
 create mode 100644 src/pages/category/category.js

diff --git a/src/modules/js/api.js b/src/modules/js/api.js
index dcccaf2..f4a1e5a 100644
--- a/src/modules/js/api.js
+++ b/src/modules/js/api.js
@@ -1,8 +1,12 @@
 let url = {
   hotLists: '/index/hotLists',
-  banner: '/index/banner'
+  banner: '/index/banner',
+  topList: '/category/topList',
+  subList: '/category/subList',
+  rank: '/category/rank'
 }
 
+//开发环境和真实环境的切换
 // let host = 'http://rapapi.org/mockjsdata/23334'
 let host = 'http://rapapi.org/mockjsdata/24170'
 
diff --git a/src/pages/category/category.css b/src/pages/category/category.css
new file mode 100644
index 0000000..c88c6e8
--- /dev/null
+++ b/src/pages/category/category.css
@@ -0,0 +1,1274 @@
+.wakeup-app {
+  position: fixed;
+  top: -60px;
+  left: 0;
+  z-index: 100;
+  background-color: #ececec;
+  width: 100%;
+  height: 60px;
+  cursor: pointer;
+  text-align: center;
+  overflow: hidden;
+  transition: all .5s linear
+}
+
+.wakeup-app .close {
+  float: left;
+  width: 40px;
+  height: 60px;
+  position: relative;
+  cursor: pointer
+}
+
+.wakeup-app .close:after {
+  position: absolute;
+  display: block;
+  content: "\D7";
+  width: 18px;
+  height: 18px;
+  font-size: 14px;
+  line-height: 16px;
+  border-radius: 9px;
+  color: #fff;
+  background-color: #dddedf;
+  top: 50%;
+  left: 50%;
+  margin-top: -9px;
+  margin-left: -9px
+}
+
+.wakeup-app .app-icon {
+  float: left;
+  width: 60px;
+  height: 60px;
+  background-image: url("/v2/image/wap/weixin_share_default_logo.png");
+  background-size: 80% 80%;
+  background-repeat: no-repeat;
+  background-position: 50%
+}
+
+.wakeup-app .description {
+  float: left;
+  text-align: left;
+  padding: 5px 0 5px 3px
+}
+
+.wakeup-app .description .title {
+  margin: 6px 0;
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 400
+}
+
+.wakeup-app .description .meta {
+  color: #999;
+  line-height: 1;
+  font-size: 12px;
+  letter-spacing: 1px
+}
+
+.wakeup-app .btn {
+  float: right;
+  margin-top: 12px;
+  margin-right: 12px;
+  padding: 8px;
+  border-color: #fc5959;
+  background-color: #fc5959;
+  letter-spacing: 1px
+}
+
+.wakeup-app-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: #000;
+  opacity: .8;
+  z-index: 101
+}
+
+.wakeup-app-opentip {
+  position: fixed;
+  height: 144px;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  z-index: 102
+}
+
+.wakeup-app-opentip .lay {
+  width: 100%;
+  height: 120px;
+  background-color: #f9f9f9;
+  border-radius: 0 0 8px 8px;
+  background: #f9f9f9 url("/v2/image/wap/opentip.png") 100% 4px no-repeat;
+  background-size: 127px auto
+}
+
+.wakeup-app-opentip .note {
+  float: right;
+  margin: 39px 58px 0 0;
+  width: 160px;
+  line-height: 20px
+}
+
+.wakeup-app-opentip .note h3 {
+  font-size: 20px;
+  margin-bottom: 6px;
+  font-weight: 400
+}
+
+.wakeup-app-opentip .note p {
+  font-size: 14px
+}
+
+.bottom-nav {
+  position: fixed;
+  width: 100%;
+  height: 50px;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 999;
+  -o-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .bottom-nav {
+    border-top-width: 1px
+  }
+}
+
+.bottom-nav ul {
+  position: relative;
+  height: 100%;
+  zoom: 1
+}
+
+.bottom-nav ul:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.bottom-nav li {
+  display: block;
+  float: left;
+  width: 25%;
+  height: 100%
+}
+
+.bottom-nav a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding-top: 8px;
+  text-align: center;
+  font-size: 10px
+}
+
+.bottom-nav [class^=icon-] {
+  display: block;
+  width: 22px;
+  height: 22px;
+  margin: auto;
+  margin-bottom: 4px;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: 100% auto
+}
+
+.bottom-nav .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-cart {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-user {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-sign {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAodJREFUWAntmL1uE0EQx88fQnbrDomCN0gewQVSFOhSRRSU9DQ4yPhbyHEKpLRpSIfkhgpo/QQIKj9AkGhQChrbKez8/9HN6mRjZca+27sEVrLmvDs789vZub27CYL/LSMRaLfbn/mLG8dqt2gAeGrQtaia7OYtlrOge+eAc9GoDQaDR9Pp9AR91cVi8TA65vs6l8v9gs9RqVR6XavVfop/B0zYyWTyAwMVGcyIvCyXyzsC7W66MLIVrOwrVvVSFAQad/OC15BukTK2jVxnN9ztM+z0fsj2nH6iOVxlx99g2e+7MWBkCf1Wxb8DlpxdjqwopiGFRdjI4FJCAfQF6XKTFgpdi4rJrhoYufbMQqHVtdp1KaF1kLbeSoTlrk0bbJ3/exHhWM/ZdZHS9i/v+J2LcCaAh8PhA23EUwfudDon4/H4T6/Xe6KBXjklNJPi0gHsezzFXsHeVT6f/62xm1qEo7B4gh7U6/XvmQVehm21WupvRe8R3gaWO+AVeFtYr8BxwHoDjgvWBNzv9x93u90dTrK0OGHpV53Ds9ns03w+/wboF1rguGFNwDgrz7lAQH/QQCcBawLGWXmKp9EbDXRSsCZgKjebzePboJOENQPfBp00LP1v9PLDSCOPA+RzP8zpAC8xu/Iiw3cDy+OWINqmPiWWDUbTA6DnPmDJsDEwJxO6UCi8BSw/q+ZJRpb+2LYCpoFGo/EO0EfFYvEwqTSgH2kb5bBMFgnogVwnLV2EsZ2sxwasGibtVGtfWISN8xwwrkfsQGnzTBT5P60m5dbQ/0g4XEqw0o2C9h5uoH3IC9QDRCcVCQbxe0k2+eMizNImK90I/8foFoiib0kGskSr774Z/k1/1yIEXsFMVT4vAAAAAElFTkSuQmCC")
+}
+
+.bottom-nav .active a {
+  color: #ff6366
+}
+
+.bottom-nav .active .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .active .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .active .icon-cart {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABMJJREFUeAHtWs2PFEUU7+qZHUWcxY/swesEo0j8hIs3FENCOHmYDRv+As/EgzEmaDSeTOTEwXAzWZjJ7kII2YuHvWCMAUXQNbDJEi7Augo4w7q7dE8Xv9dMLVU93duzUzU4tVQnu1WvXtV7r3793qvqqvE89zgEHAIOAYeAQ8Ah4BBwCGghwOTRwdjYl4zzjz3GSnL7pqhz3sI8bnPGzvEw/LxUr1+U56UAEY6NNcAsyx02ZZ3z/yLO95ZOnvxJzM8XFSo550dRrFAl808eYGudsWcYY9/K5iseITOy6vCaG+C9lMW3ph0v++Lc3FO7L1wIyGbFI7qZBI3vpt/A92EsFCCQrRsGAon0t4GfZHcG/i132zAQURRtCiC4513SAsILw80RGpz/ogXEad+fw4qyLAuxsY5VQg+I0Xq9Bbf63cbJyzaHQaAHBAkDmraHx92nJybmZWA2nCxpcOR5VidMePSvMghU7wkIFkV2e0QUKWHRMxCNZvNyvAVPwmoJHTFmBogXp6cb2Fhds2TenWYmEiV16Ck0aKDFW+2lrycmrtIc5KdnIICElQmTXuCRON/LMGh4BJZQK4HAwVNHfiBIevaIIAisXDnSEqUWEFsmJ68jPP5VHWzwKRzVmfUImjKE2uUVnK/+ePPmbNrr6jk0YmGWJUz69H5vZiY0DgQEW5UwcU6ZGhYEjK5HWBUaOFQ6n+YN2kBcbzT+QMJMdbUshf9bO+417vv+mSz9Wh7x8vT0KsLjSpbwQWpHYv/q2fHxhSybilmMbtsRdxQeO9v98YXu3Y/rnCevClQaA9tjHha6/ZPyPG8J3noLL+pPfC0fH6rVTin6EoQ2EByHucz3D8VyOb9WPHFie0KHFaRWaMQz9H05YVb+2b9/2IqZJ4zUBmJlZeXREgr3HN627c2EDitIbSDKU1N/USyK2SIm3xZ1m0ptIGiymPxaePiMvWUTAMJWI0BA2Fp44Hv/yQUCn7ZrQGBN3Hl+164hgbQtpRmPkE+18WubNyoV6/KEESBOR9FVJMxF8fZZofBdUK2+e2vfvq2ibdBLdXenYW1w8OAXWD0/6xCBpIE2+v0S7Tqpjqsy9rCMiZx/6o7zkb1iJ9nJF7JJ3zK21seGxsc/ydFCt3dmnrsHDjy/tVz+Afa9Y0aiMSnRZBiW6M52PYlGQoMUPHf27J1mq/U+HOBTvJKfESoL+FtdT/lj4EWw4XgeCGSHMY9Yb1JHEucer1Writ6RxUWFLjebCr2lUlHo0r17Cl1cXlbpkZGYXpifV34etJ6NjucQUBFQXEplmaNq1Wrhw2LxMCSO4oLlFWRyOsypTYXhN93Er7DElBwhTy77DkRsfKFAq8keWTHVkVhnplqtD7oBw5ScpA2CNrZqCIHJkjwhDQTqR+1tT0kO66BNyekQ3G7oOxDQM5qlvN2exxfD8/rl8YWc1LLvQFBOSNXcbszji7F5/fL4Qk5W2Xcg2okxSz9dG3Z1Cp7XL4+faUCb0XcgoKeWY0QeXwzP65fHF3JSy74DQUskrQ5p2uNVA/w0XrLNlJykXEEXRKVfZX12lr++Y8f3r/r+EnS8gFgehhtfRv0ols6Pulk6yTZTckiWexwCDgGHgEPAIaCHwAMJYdPtuf90jwAAAABJRU5ErkJggg==")
+}
+
+.bottom-nav .active .icon-user {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABLNJREFUeAHtW0toE1EUnZekrfVT1IVWqS1CiwvFLir4wUItCEI3Wp02deVOcFEUVyJCFn5WRdCFC0FQEZtEW0EFF4IFPxutohZ1UXGhbaB+UCm2zWee545BsFhyZ3JnGHEehCaZM+fce3Lnzbw7U8MIR+hA6EDoQOhA6ADXAcUFSuAShhE5appbjEhkp6FUCzhXIoCVxK0NYxx/xg2thw3LunEinX6UMAyLtvkxfDHiXVvbvLoVK3ohdhhJLWMmNgFz+j5kMmdWDw1NM/dxDfPciHxX125UwGlUwCpXUWr9HhVyKJZKXXe1P3OnCBPnBqZy8fgJIxq95toEUiUDwWFz4ZObQDj7eEWs8vH4VSTRzQmCjdE6Gevv7wEeR43s8KQi8OsdFzeB8oaxNresBzabeEXYcwIdDl6OQmGP9JwhWhF0drAnRi9NIG5MvraWoI6oEXSKtCc3wQD/SoUJ1Nb660Z3X4oZkcDvhOOMrhN8GaSVgKaUmNgckTPNrSoWuy8VGIdH5/OtFen0Aw62FEbMUfuyuZSa9Ha6VBcackb8WjsIhcWkEdSUM6K4eGKmIAWzF2wSZGJGYLIRC4qbmKSmmBHc4EVxSoldaosZUewniOZZikxrnSmF4W4XMwKC1Fjxe4hpyhlBnSW/h6CmnBFor/ntA7X0pDTFjKAeI4KakAqMwTNR1GRAS0PEjEig0Uo9xtKSMgjSIk0ZNsFFCwVEjVZ0od9LBTcnDzRsrTkBzjeIVQRJ291mNFqdh+FwD2hId7ZFjaB0qHOE8/tJh6mx4cQt3Z0icbFl+KxMwuZt0RBN3WbJyrArwaMOtpcV8btA/pUbPF4dGr+NoDfhLb8/7DCMBE7XQb0JPCvU8GPoQOjALwc8nSwnTHPhkmh0I9YFa5XW9bj504BXPd7TMxLVeF+NS/L5xR9jGp9n8Hka+M/4bkwpNYbT5pil9Rt893heMvm2iBX/I2rEvba2WOvy5TuQUAcC3wzydXgfFYta6y/gfYLXnVw2279gYECsQyViRLa7uxlE+1QkshdJc5+IKdcfFIq+p5W6/DCTubJtaChfDmFZRvzo7KyrrKzsw6/eVU4Q5e4LQ16jSdNbkUrddcvlygg6BLbW1h7GMXwMwgvcikvvB0MGpwuF/YvS6Y9OuR0b8aSlpaK5qSkJE3Y5FfMDj/nj5dTkZHvNzZufnOg5MqJYCWRCpxMRv7GojBdTMzPtNYODdPZhDUf9iNba2otBN4GyRozrq6uqbiUcdODYFYGHw3ZBYYBlb0BAlmUdqEwmz3HCYVcETlOnOIRBwkSUOpIyTdZ1DMuIXE9PO0pnTZCSZMWCR4w6o9EdHCzLCBB1cMiCiEElb+fExTNC6y0cskBitN7EiYtlBGbhBg5ZEDE4pFnPgLOMQIJLgpgkKyallnJwXCO+c8gCidH6KyculhG4UhvhkAURg8nyKSculhFoltzmkAURowqF85y4WEY8Hx09i8XMKw5hkDCo5Du4Pch6hoJlxIbh4ZyVze4G8bMgJVoilvT3b9/Y/y/CXmuQqL0Eb2w8iDWHiVNqE75aXCIYvzd/RuWOaMu6gDXGJb/FQ73QgdCB0IHQgf/FgZ+UQn2ZrGr7bgAAAABJRU5ErkJggg==")
+}
+
+::-webkit-scrollbar {
+  display: none
+}
+
+body,
+html {
+  -webkit-tap-highlight-color: transparent
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden
+}
+
+.container {
+  background-color: #f4f4f4
+}
+
+.with-bottom-nav {
+  box-sizing: border-box
+}
+
+.center-img {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+  width: 60px;
+  height: 60px
+}
+
+.center-img img {
+  max-width: 100%;
+  max-height: 100%;
+  border: 0;
+  vertical-align: middle
+}
+
+.goods-item {
+  background: #fff
+}
+
+.goods-item .thumb {
+  margin-bottom: 6px;
+  text-align: center;
+  background-color: #f4f4f4;
+  position: relative
+}
+
+.goods-item .thumb:after {
+  content: " ";
+  display: block;
+  padding-top: 100%
+}
+
+.goods-item .thumb img {
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  max-width: 100%;
+  max-height: 100%
+}
+
+.goods-item .thumb .sell-out {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: url("/v2/image/yzapp/h5/2listicon_shouqing@2x.png") no-repeat 50%;
+  background-size: 40% auto;
+  background-color: rgba(0, 0, 0, .3)
+}
+
+.goods-item .thumb .sell-out-34 {
+  background-size: 34% auto
+}
+
+.goods-item .thumb .sell-out-50 {
+  background-size: 50% auto
+}
+
+.goods-item .thumb .sell-out-60 {
+  background-size: 60% auto
+}
+
+.goods-item .detail .title {
+  padding-bottom: 8px;
+  font-size: 12px;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.goods-item .detail .price {
+  padding-bottom: 8px;
+  font-size: 14px;
+  color: #ff525e
+}
+
+.list-finished,
+.loading-more {
+  width: 100%;
+  padding: 20px 10px;
+  vertical-align: middle;
+  text-align: center;
+  color: #999;
+  font-size: 12px;
+  line-height: 20px;
+  box-sizing: border-box
+}
+
+.list-finished span,
+.loading-more span {
+  display: inline-block;
+  margin-top: 10px;
+  width: 16px;
+  height: 16px;
+  background: url("/v2/image/loader.gif") no-repeat 50%;
+  background-size: 16px 16px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .list-finished span,
+  .loading-more span {
+    background-image: url("/v2/image/loader@2x.gif")
+  }
+}
+
+.container {
+  overflow-y: hidden;
+  position: relative
+}
+
+.content {
+  overflow-y: auto
+}
+
+.content,
+.custom-search {
+  box-sizing: border-box;
+  width: 100%
+}
+
+.custom-search {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 6px 15px;
+  background-color: #fafafa;
+  z-index: 1001;
+  -o-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .custom-search {
+    border-bottom-width: 1px
+  }
+}
+
+.custom-search form {
+  margin: 0;
+  position: relative;
+  background: #fff;
+  overflow: hidden;
+  box-sizing: border-box
+}
+
+.custom-search form:before {
+  z-index: 1;
+  border-radius: 8px;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border: 1px solid #e5e5e5
+}
+
+.custom-search form::-webkit-input-placeholder {
+  color: #d7d7d7
+}
+
+.custom-search form .custom-search-input {
+  margin: 0;
+  padding: 0 10px 0 40px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border-radius: 0;
+  height: 32px;
+  width: 100%;
+  box-sizing: border-box;
+  border: 0 none;
+  outline: none;
+  font-size: 14px;
+  box-shadow: 0 0 0 0
+}
+
+.custom-search .cancel {
+  display: none
+}
+
+.custom-search.focus {
+  zoom: 1
+}
+
+.custom-search.focus:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.custom-search.focus form {
+  float: left;
+  width: 88%;
+  margin-right: 8px
+}
+
+.custom-search.focus .cancel {
+  display: block;
+  float: left;
+  line-height: 32px;
+  font-size: 14px;
+  color: #666
+}
+
+.icon-custom-search {
+  position: absolute;
+  top: 0;
+  left: 2px;
+  border: 0 none;
+  height: 32px;
+  line-height: 32px;
+  width: 37px;
+  padding: 0;
+  color: #fff;
+  font-size: 14px;
+  text-indent: -9999px;
+  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAAXNSR0IArs4c6QAAA2xJREFUWAnNV79rU1EUTh4NsYNImyHYTk4lCSUtRFRIkQri1hR0chX/gE4uHTK4OLnr7qTQuImDiIFWDNgQkpLJKZUOaRCHpqQ2ft/lnsvNa9/L68uj+iCcH/ec73zv3HvfvYnF/pMnHoRHs9lcRty64zgrw+FwHvqcztuPx+Od09PTL7C3crncd+2/sPAlAgKPUPw5UBcCIrdBahOE3gaMN2HnEqnX6zcSicQbvO1tE3kBBV3bGQwGj/P5/I+gaWeI7O3t3QXQO5BICQjsHuwKZAWyhbfe5xi6NQdfDr41yBLkjJXThf0wk8l8Fp+fHCGiSXwEQEIn9VH05dHR0YtCofDLD6hWq12bnp5+BnIbiLvCWJAbAOt+EDKGiJ6Ob0iUTnROTk7WFxcXa34E3GONRqMwNTW1BT8XNcl0MU03x02TI0B6TRgSx8fHty5KgljMYS7UDm2+GLGp+z2KCHcHEmRh9tmJpaUlBeSX7DXGXGJgvM8YYrOGVzz9iojeoiqOayJMJ9xFiEEs8ds1xGdLR3+s1HcC89njwrQDJtGJRUyNsaBrnQvJjrCF6kELK+N2h8QGkcQiphVralk+paJjzoo4wd5OEvdEEpjvBcCuJT6RDgLVNqMD7FsyEJUEZlOw7FriE8mpkQMsJl9MGYxCujBNLTe22jVuZ5R2r9czH010Z+iFTSLq3GAA5tCTsRfAOH8qlbouMZian6K7pQOW5sOFwKw7YFIbmDnBsGuJT6SDOeSlRj0ILIkelQTmmmDZtcQnklPDA0o9YF/iKSr2pJJYxLRwTC3Lp1RHX+/atMB+hke5OyisTSxi6vy231VS7Rq0bFOKYcFu8CgXO6wkBrEk364hPluardVqtbbBXk7gDo/ysCfw7u7ufDKZ/IpCcifZyWazd+zCbt18R3jHxHx2dYACCtMZ5tgkNJ5TrVavuovbtukInVFfFe1CeMntw8PDB8Vi8bftF32ECJ0hLs9ZTGmJu8NamLwi9mGru6sU8yNzhgiTIvo78RRXxFcgM7I2vMicS0TegNc7rPzQf7C4LmZnZz8EIeNLxCK0DD3UX86gZAIREUJhpR+Zg4ODe6urq32zfcMWCZLHncIdw/Vhx3PK0un0E/ouhQgL+ZBJXioRmwx03mP/4Pep2+2+5tg/e8rl8shs/AUCtdXXCXeHEgAAAABJRU5ErkJggg==") 50% no-repeat;
+  background-size: 16px 16px;
+  border-radius: 5px 0 0 5px
+}
+
+.custom-search-type-selection-btn {
+  position: absolute;
+  top: 6px;
+  left: 15px;
+  border: 0 none;
+  font-size: 14px;
+  color: #666;
+  height: 32px;
+  padding-right: 12px;
+  padding-left: 12px;
+  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAAINJREFUGBljnDlz5gIGBoZ4ICYGLGQCqsoC4mtEqAapyWIEKZw3b57W79+/TwOZXCA+FvCNlZXVNCkp6RrIBgYQg5GRMRuLQrAQSA6kBsQBawAx0tLSFgCphSA2GlgIlQMLwzVAFaH7B+xuZAPAfkAWQPIPA8zdyPJY2bNmzUoAYWySAB1bJ40myOHYAAAAAElFTkSuQmCC") no-repeat 100%;
+  background-size: 6px, 4px;
+  display: none
+}
+
+.custom-search-type-selection-btn-focus {
+  display: block
+}
+
+.custom-search-button {
+  position: absolute;
+  top: 0;
+  left: 2px;
+  border: 0 none;
+  height: 32px;
+  line-height: 32px;
+  width: 37px;
+  padding: 0;
+  color: #fff;
+  font-size: 14px;
+  text-indent: -9999px;
+  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAAXNSR0IArs4c6QAAA2xJREFUWAnNV79rU1EUTh4NsYNImyHYTk4lCSUtRFRIkQri1hR0chX/gE4uHTK4OLnr7qTQuImDiIFWDNgQkpLJKZUOaRCHpqQ2ft/lnsvNa9/L68uj+iCcH/ec73zv3HvfvYnF/pMnHoRHs9lcRty64zgrw+FwHvqcztuPx+Od09PTL7C3crncd+2/sPAlAgKPUPw5UBcCIrdBahOE3gaMN2HnEqnX6zcSicQbvO1tE3kBBV3bGQwGj/P5/I+gaWeI7O3t3QXQO5BICQjsHuwKZAWyhbfe5xi6NQdfDr41yBLkjJXThf0wk8l8Fp+fHCGiSXwEQEIn9VH05dHR0YtCofDLD6hWq12bnp5+BnIbiLvCWJAbAOt+EDKGiJ6Ob0iUTnROTk7WFxcXa34E3GONRqMwNTW1BT8XNcl0MU03x02TI0B6TRgSx8fHty5KgljMYS7UDm2+GLGp+z2KCHcHEmRh9tmJpaUlBeSX7DXGXGJgvM8YYrOGVzz9iojeoiqOayJMJ9xFiEEs8ds1xGdLR3+s1HcC89njwrQDJtGJRUyNsaBrnQvJjrCF6kELK+N2h8QGkcQiphVralk+paJjzoo4wd5OEvdEEpjvBcCuJT6RDgLVNqMD7FsyEJUEZlOw7FriE8mpkQMsJl9MGYxCujBNLTe22jVuZ5R2r9czH010Z+iFTSLq3GAA5tCTsRfAOH8qlbouMZian6K7pQOW5sOFwKw7YFIbmDnBsGuJT6SDOeSlRj0ILIkelQTmmmDZtcQnklPDA0o9YF/iKSr2pJJYxLRwTC3Lp1RHX+/atMB+hke5OyisTSxi6vy231VS7Rq0bFOKYcFu8CgXO6wkBrEk364hPluardVqtbbBXk7gDo/ysCfw7u7ufDKZ/IpCcifZyWazd+zCbt18R3jHxHx2dYACCtMZ5tgkNJ5TrVavuovbtukInVFfFe1CeMntw8PDB8Vi8bftF32ECJ0hLs9ZTGmJu8NamLwi9mGru6sU8yNzhgiTIvo78RRXxFcgM7I2vMicS0TegNc7rPzQf7C4LmZnZz8EIeNLxCK0DD3UX86gZAIREUJhpR+Zg4ODe6urq32zfcMWCZLHncIdw/Vhx3PK0un0E/ouhQgL+ZBJXioRmwx03mP/4Pep2+2+5tg/e8rl8shs/AUCtdXXCXeHEgAAAABJRU5ErkJggg==") 50% no-repeat;
+  background-size: 16px 16px;
+  border-radius: 5px 0 0 5px
+}
+
+.custom-search-icon {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABqUlEQVR42r3WzyvDcRzH8Y+vOHDkpBwpB46k3MwOfu0wLvgDyEEp/8DOrjat5MSJs7i4O7CaWClqshxELphf81QO65Vv7+++37ZXPVprfT7Py7e+c5VKxY+HMWSQwzMYn3xHBjF4cLXy+2ESFwiyC0xGDbdiE2G2idagYY0eIMoOJB4onMV/u0IKcQxgBIs4wjd02VrCE9C9YxXNcD6GcQPdRJCwh3M5WEYcLoBO6IN4Ds8Kx6BbM2KqB69yR8wKp+XANVrgarQu92xY4RM5kIILoVfuObXCJTkwChfSQ9U9j1b4U8L9EcL56ous8BOqNxQhXARj3GuFcxJeDhntwFfVPWdWOCPh45DhJbknbYXjYJEesHYU5Y64FfZwKYdu0RUw2oQdOX8Jzwr/moaugD4j2oZd6KZqeTttQVdGBoNogvvTjRWUoNsL8z4+hN/eUMQzrJWRtMIa30aY7UNfq0krrBIoIMgKSMDhM2jc+pc5jizyeAHjk+/IYlye3gWf+IwRjsKOa7ge5qHxD8xIuLFxCTc0nqhHTM1B46W6RjWu4UaZxR3uMfUDvUqknv4oBC4AAAAASUVORK5CYII=") no-repeat 50%;
+  background-size: 15px;
+  height: 15px;
+  width: 15px;
+  display: inline-block;
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: transparent
+}
+
+.search-content {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding-left: 10px;
+  background: #fff;
+  z-index: 1000;
+  box-sizing: border-box;
+  padding-top: 45px
+}
+
+.search-content .title {
+  margin-top: 14px;
+  font-size: 14px;
+  font-weight: 700
+}
+
+.search-content .suggest {
+  -o-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .search-content .suggest {
+    border-bottom-width: 1px
+  }
+}
+
+.search-content .suggest span {
+  display: block;
+  padding: 16px 0;
+  font-size: 12px;
+  color: #666
+}
+
+.search-content .clean-wrap {
+  margin-top: 30px
+}
+
+.search-content .clean-history {
+  position: relative;
+  display: block;
+  width: 140px;
+  margin: auto;
+  padding: 10px 24px;
+  color: #666;
+  font-size: 14px;
+  text-align: center;
+  box-sizing: border-box
+}
+
+.search-content .clean-history:before {
+  border-radius: 4px;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border: 1px solid #e5e5e5
+}
+
+.search-type-dropdown-menu {
+  width: 120px;
+  position: absolute;
+  top: 32px;
+  left: 15px;
+  border-radius: 2px;
+  z-index: 1001;
+  display: none
+}
+
+.search-type-goods {
+  padding: 12px
+}
+
+.search-type-goods span {
+  font-size: 16px;
+  color: silver;
+  margin-left: 14px;
+  display: inline-block;
+  vertical-align: middle
+}
+
+.search-type-shop {
+  padding: 12px
+}
+
+.search-type-shop span {
+  font-size: 16px;
+  color: silver;
+  margin-left: 14px;
+  display: inline-block;
+  vertical-align: middle
+}
+
+.search-type-dropdown-menu-divider {
+  background: #666;
+  height: 1px
+}
+
+.search-type-dropdown-menu-indicator {
+  height: 12px;
+  display: block
+}
+
+.search-type-dropdown-menu-indicator i {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 10px 12px;
+  border-color: transparent transparent #4e4e4e;
+  margin-left: 17px
+}
+
+.drop-menu-content {
+  background: #4e4e4e;
+  border-radius: 4px
+}
+
+.icon-goods {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAmCAYAAACh1knUAAAAAXNSR0IArs4c6QAAA7RJREFUWAntmE1oU0EQx5ukSQ0ahWhTjU0b8GIPoviBJ8WiIKLoxQ/ai3r0E4SCVIWK4EEUFDx4EnqQCoKHtqC9WMWeKvYkaKGKTRrT2pqARCsxX/7m5W1I0iR9rUnooQvbeTs7M///m53dt2lNzRJppoXwCAQCrYlE4go+O+kNRXy/ox9JpVL3vV7vYBGbOWrDRHw+XxfeXQBoPiaTKTknGgrmzaJnPoW41dzcfFPG8zVDRPRMvAIkCsBVq9Xa43a7fxQKHgwG18VisTbm7tBXWCyW/Y2Nja8L2S5YRzb6xsfHU8jLRp2xvaT79Bvx0dJowFBqokYyYcBWM8H2qW67w4iPUSINUhPFlqMQkNjqdVSsqHPcjBLJcarEYMkQqTX4drIVF9MM++VsXzkjJiYmziHPgtqCXLkY9GI+1Mxv5j4Rt5vz5ZFeQ5p5hggENiaTyR6M9mYFimU9l+PRqoJAYogzpp0zJiA6bWkAN/n9fo0EBl/oHfS3Ho8nrBzLIXlZJ1h76PdE8rkQzH1gpU9pSJzXD5/PMzMzjnKAlooxPT29igNvTDAFW2y1XQMrqQn5PnTU19dH5LmSzeVy/RIswVDYavu2iNJsNg+JrEaDiMJKYwsorGR3xCicUDVICIZefzEdO7001QIvhaOWppRNVeaWieSneTkjRTPCvs58d/KNKjXOxtSWBkWI/VwbCoVWVwo0P65gCaZgy5yqkaAMotGoW2Q1WhaWhq2IfBXweDy+rRokdKytOpaGrZbmpSi5jxzTJysuFBZLMyBgKiN9KORad5gfU2srzULuJWAcEUx6n+BpRJqamoIUTi9jB8tzXSYq2bgQXSO+3Hv6+fh9EyyVkRqbzdYJuwS6C1xYtstkJRoZlzq8qGN1KowMEX4QjZKVB0zYMOrlFrVeGZVLTk1Nuci4ZL6O/pAL9EcVO+cQg4iFq9sA8gAGo1xuj5K6MWX8P5K4myhQ+R3cwosOUg4HkXEVM5MRUejpOol8z3AzjsMEaINYDmHlbESKLzFOId9hLyRGuAmeyCYhcQoCUNV2Cuox8/LvBSE4Qr9rt9tfGL3TyiV8dnb2EO4dkNilx3kGiTNk+Y+Ms1tBIsoAQu0Qus3Yq+v+QmiYZz9ykoxFdb0mAKkDdAMDD3I3UmpBmg/7G9TEk/Rw7t+SRMScgDZSe5rH4zy3IjM/kmS+RIsB/ob559RDN885pPP95iWS7RAOh9dEIpEt6OSbJG+u3liZCdgkPehwOD44nc6famI++Q/zQ4iwYYqv+AAAAABJRU5ErkJggg==") no-repeat 50%;
+  background-size: contain
+}
+
+.icon-goods,
+.icon-shop {
+  height: 19px;
+  width: 18px;
+  vertical-align: middle;
+  display: inline-block
+}
+
+.icon-shop {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAkCAYAAADl9UilAAAAAXNSR0IArs4c6QAABJJJREFUWAntmE1oXFUUxztvMjZGrTUqk0yM0KikXVgltaglEMSV1FWl2IXtoi3YTVftRsGNIi4UN7oolBbaWnHhyo1UqFIIqPSDfoGGagv5mCEpJLFp0iRmMv7+N/c83pt5U/LCCCJ5cObce87/nPN/5968e9s1a/6jT+Z+vIaGhh5saWnJ3Q+zUt/MzMzfnZ2d9+rF1xAbGxt7eG5u7oNKpfIOQYV6gQ2yFzOZzFe5XO7Dtra26WjOGDHIrKVL/QBe8qA5tMQ9JHkEjGLueFNUrfOTGp/Foe8Sv+hxa9ESPRfoXi/+sNaS2f8ODg4eQipICYJ9JGkyQLFY3Oh9t8wW1d5XidpsjO+i/CMjI9vMptyqgb3kYw+ZTzqITmD8rjMGwX7e4BzzBfMvLi5u9uOrZluuDoLgirCQecFilFs18O2XzWqbPyQ2PDz8CoHP4Sh2dHR8bwDTEHNJSZSaGHkdMcthOaV9raJqi4P5QmIE7ZER5qcR2weGk9065oqEjmUMiHUvgw47ZmGqhZzW3Dho7IjB9gGcb8vAc2pJ1fxa0hV3jIzPUyv2B+eruJriIC6yOWK08E0MrTgus+7XPDhUExMT6/F34p+h9X+EjmUOyDlO7DA5HqLWs9Vhqqna4iAu8ttS7tYE50np6mdqasqW8TqYmmWuxteZuy1AvHU+BovUdlwCGD4O0+04ynzovo6h/SSSLPX+snzUsNhEYqotDuIiTgEbbhfBOnbO5PP5UUtUpa1jqfeX5bFPBvUsl7mc9rXPMMmJUwDLHfIQmLiM8oHpkeZtVkyMHNaxl5Ur6TEO4hRQbJNAGH9MAuMX5kX5CLheD+P9QCt2zMSghUJhkHidDPnx8fFHY04/MQ7k2KiOuc2McV0SuFQq9QB0fyRgn07CcNS45QGXYX+8loTB3ie/fNPT068mYYyDXkDEfhBofn7+UwLDs1G2ycnJxxYWFo5orIe1/1K3j6XZ0q/mskdsRyER2+B+ftQw1Pmcs/cJm0tjy4mDxuKkN3wK4yXkSQy/I9/i0xHRjd6N1vdtAK0P3wakxPwUcgvbBmQPtjbkT2z6VvWhtQr9jG8y7mLcy1hN+AmtldmCTDI/gQwwLmDfiXQzv430uNbCfku5XD6GI/amBOj5rqmp6SB+ETsC5nVnjfyQ6CzTA9lstkiH32d8GInuNV1nPgP3cXNz8/rZ2dkvyPMWttiD/wo59rEfLzpi8gLMslfeQH/DVHvqPeQXvsq/osPHX4e2YngGUZfOgzkXAhhoc1N8M0vcxb65CZmrra2tf0UxXHW2Eqtr0CeIzstdOtDR5SguHPu7UeK9KgQ1cFCvnvtra2CdhqVaJZa2lasdW+1Y2g6kxa/usf9vxzirxvR2o6Oj+bRvmRZvNaxmNL5mj3GI/ywAd6OPdLBHwY0cK7dqKKfVjOYPbxdm5Aq0iavLJebNiO5Tuucnn/gWlF5nIaNbbxcyy7Wqh6vOb9E0NcTkhFwv96/jBOv/Mv61h5e+wf1rL6T6q4skEhMIUgH3/W66p1tlQ5eU3GW6NNDe3j5Abvdvjmpi/wB5ZEDU0fjP7wAAAABJRU5ErkJggg==") no-repeat 50%;
+  background-size: contain
+}
+
+body,
+html {
+  height: 100%
+}
+
+.with-bottom-nav,
+.with-bottom-nav .class-nav {
+  padding-top: 45px;
+  padding-bottom: 50px
+}
+
+.with-bottom-nav .class-nav {
+  box-sizing: border-box
+}
+
+.tabs-content {
+  padding-top: 50px;
+  background-color: #f4f4f4
+}
+
+.shops-panel .list-finished,
+.tabber {
+  background-color: #fff
+}
+
+.tabber {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: #333;
+  font-size: 14px;
+  overflow: visible;
+  -o-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-bottom: 1px solid #e5e5e5;
+  z-index: 998
+}
+
+.tabber a {
+  float: left;
+  width: 50%;
+  border: 0 none;
+  outline: 0 none;
+  background-color: #fff;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.tabber li {
+  display: inline-block;
+  line-height: 38px;
+  padding: 0 8px
+}
+
+.tabber a.active li {
+  color: #f44;
+  border-bottom: 1px solid #f44
+}
+
+.container {
+  background-color: #fff;
+  box-sizing: border-box
+}
+
+.class-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #f4f4f4;
+  z-index: 999
+}
+
+.class-category,
+.class-nav {
+  height: 100%;
+  overflow: hidden
+}
+
+.class-category {
+  margin-left: 96px;
+  padding-top: 11px;
+  box-sizing: border-box
+}
+
+.inner-content {
+  width: 100%;
+  margin-bottom: 50px;
+}
+
+.inner-content,
+.nav {
+  transition-timing-function: ease
+}
+
+.nav {
+  box-sizing: border-box;
+  float: left;
+  width: 82px;
+  font-size: 13px;
+  background-color: #f4f4f4;
+  text-align: left
+}
+
+.nav .category-name {
+  position: relative;
+  padding: 20px 10px;
+  background: #f4f4f4;
+  border-bottom: 1px solid #fff;
+  -o-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .nav .category-name {
+    border-bottom-width: 1px
+  }
+}
+
+.nav .category-name.active {
+  background: #fff;
+  color: #fa6060
+}
+
+.main-content {
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.main-content .category-title {
+  color: #b3b3b3;
+  margin-top: 3px;
+  margin-bottom: 5px;
+  margin-left: 4%;
+  font-size: 12px;
+  position: relative
+}
+
+.main-content .category-title:first-child {
+  margin-top: 4px
+}
+
+.main-content .category-content {
+  width: 100%;
+  position: relative;
+  text-align: center;
+  overflow: hidden
+}
+
+.main-content .category-item {
+  width: 33.3%;
+  box-sizing: border-box;
+  text-align: center;
+  float: left;
+  padding-bottom: 12px;
+  margin-bottom: 10px
+}
+
+.main-content .category-img {
+  width: 60px;
+  height: 60px;
+  display: inline-block;
+  text-align: center
+}
+
+.main-content .category-item-name {
+  display: block;
+  margin-top: 0;
+  font-size: 12px
+}
+
+.main-content .category-loading {
+  margin-left: -21px;
+  margin-top: 120px;
+  left: 50%;
+  border-width: 3px;
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-radius: 100%;
+  border-style: solid;
+  border-color: #d9d9d9 #d9d9d9 #d9d9d9 transparent;
+  box-shadow: 0 0 0 1px transparent;
+  -webkit-animation: loader .8s linear;
+  animation: loader .8s linear;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite
+}
+
+.main-content .category-tip {
+  margin-top: 120px;
+  font-size: 12px;
+  color: #ccc;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 80%;
+  text-align: center
+}
+
+.hot-goods {
+  position: relative
+}
+
+.hot-goods .goods-item {
+  display: block;
+  position: relative;
+  width: auto;
+  margin-bottom: 12px
+}
+
+.hot-goods .goods-item .thumb {
+  float: left;
+  position: relative;
+  width: 90px;
+  height: 90px;
+  margin: 0
+}
+
+.hot-goods .goods-item .badge:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: " ";
+  border-style: solid;
+  border-width: 12px;
+  border-color: #fc5959 transparent transparent #fc5959;
+  z-index: 1
+}
+
+.hot-goods .goods-item .badge .num {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.5;
+  margin-left: 3px;
+  z-index: 2
+}
+
+.hot-goods .goods-item .detail {
+  margin-left: 100px;
+  height: 90px;
+  font-size: 12px;
+  padding: 3px 20px 0 0;
+  box-sizing: border-box;
+  -o-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .hot-goods .goods-item .detail {
+    border-bottom-width: 1px
+  }
+}
+
+.hot-goods .goods-item .title {
+  line-height: 1.5;
+  margin-bottom: 14px;
+  padding-bottom: 0;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical
+}
+
+.hot-goods .goods-item .price {
+  display: inline-block;
+  margin-right: 20px
+}
+
+.hot-goods .goods-item .recommend {
+  color: silver;
+  display: inline-block
+}
+
+.hot-title {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 8px 8px 8px 0;
+  zoom: 1
+}
+
+.hot-title:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.hot-title .icon-right {
+  color: #fc5959;
+  font-size: 12px;
+  padding-left: 50px
+}
+
+.hot-title .icon-right:after {
+  display: inline-block;
+  content: " ";
+  width: 6px;
+  height: 20px;
+  background: url("https://b.yzcdn.cn/v2/image/yzapp/h5/more-red@3x.png") no-repeat 50%;
+  background-size: 100% auto;
+  margin: 0 8px 2px 4px;
+  vertical-align: middle
+}
+
+.hot-goods,
+.hot-keywords,
+.hot-shops {
+  position: relative
+}
+
+.shop-item {
+  margin-bottom: 22px
+}
+
+.shop-title {
+  font-size: 12px;
+  margin-bottom: 10px;
+  position: relative
+}
+
+.shop-title .badge {
+  display: inline-block;
+  background-color: #fc5959;
+  text-align: center;
+  color: #fff;
+  border-radius: 3px;
+  padding: 2px 4px;
+  margin-right: 3px;
+  font-size: 10px;
+  line-height: 10px;
+  vertical-align: middle;
+  margin-bottom: 4px
+}
+
+.shop-title .follows {
+  color: silver;
+  margin-left: 4px
+}
+
+.shop-images {
+  margin-right: 10px;
+  font-size: 0
+}
+
+.shop-images li {
+  position: relative;
+  width: 32%;
+  box-sizing: border-box;
+  margin-right: 2%;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle
+}
+
+.shop-images li:after {
+  content: " ";
+  display: block;
+  padding-top: 100%
+}
+
+.shop-images li:last-child {
+  margin-right: 0
+}
+
+.shop-images li img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto
+}
+
+.keywords-list {
+  padding-bottom: 20px
+}
+
+.keywords-list li {
+  display: inline-block;
+  position: relative;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  font-size: 12px
+}
+
+.keywords-list li:before {
+  border-radius: 5px;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border: 1px solid #ccc
+}
+
+.keywords-list li a {
+  display: block;
+  padding: 6px 15px
+}
+
+.hot-goods-wrap {
+  padding: 10px 0 20px 10px;
+  background-color: #fff
+}
+
+.hot-goods-wrap .goods-item .thumb {
+  width: 140px;
+  height: 140px
+}
+
+.hot-goods-wrap .goods-item .detail {
+  position: relative;
+  font-size: 14px;
+  height: 140px;
+  margin-left: 150px
+}
+
+.hot-goods-wrap .goods-item .title {
+  font-size: 14px
+}
+
+.hot-goods-wrap .goods-item .price {
+  margin: 0;
+  padding-bottom: 0
+}
+
+.hot-goods-wrap .meta {
+  position: relative;
+  zoom: 1
+}
+
+.hot-goods-wrap .meta:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.hot-goods-wrap .recommend {
+  font-size: 12px;
+  line-height: 14px
+}
+
+.hot-goods-wrap .from-shop {
+  position: absolute;
+  bottom: 10px;
+  width: 100%;
+  padding-right: 20px;
+  box-sizing: border-box
+}
+
+.hot-goods-wrap .from-shop a {
+  display: block;
+  color: silver;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.hot-shop-wrap {
+  background-color: #f4f4f4
+}
+
+.hot-shop-wrap .avatar {
+  position: relative;
+  float: left;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  overflow: hidden;
+  z-index: 995
+}
+
+.hot-shop-wrap .avatar img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto
+}
+
+.hot-shop-wrap .info {
+  height: 56px;
+  margin-left: 66px
+}
+
+.hot-shop-wrap .shop-name {
+  font-size: 14px;
+  padding-top: 12px;
+  position: relative;
+  height: 18px
+}
+
+.hot-shop-wrap .shop-name .name {
+  float: left;
+  margin-right: 10px
+}
+
+.hot-shop-wrap .follows {
+  padding-top: 5px;
+  margin-left: 0
+}
+
+.hot-shop-wrap .shop-item {
+  padding: 12px;
+  background-color: #fff;
+  margin-bottom: 10px
+}
+
+.hot-shop-wrap .shop-item:last-child {
+  margin-bottom: 0
+}
+
+.hot-shop-wrap .shop-images {
+  margin-right: 0
+}
+
+.hot-shop-wrap .shop-images li {
+  border: 1px solid #efefef
+}
+
+.hot-shop-wrap .icon-top1,
+.hot-shop-wrap .icon-top2,
+.hot-shop-wrap .icon-top3 {
+  display: inline-block;
+  width: 34px;
+  height: 15px;
+  background: url("/v2/image/yzapp/h5/TOP1@2x.png") no-repeat 50%;
+  background-size: 100% auto
+}
+
+.hot-shop-wrap .icon-top2 {
+  background-image: url("/v2/image/yzapp/h5/TOP2@2x.png")
+}
+
+.hot-shop-wrap .icon-top3 {
+  background-image: url("/v2/image/yzapp/h5/TOP3@2x.png")
+}
+
+@-webkit-keyframes loader {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn)
+  }
+}
+
+@keyframes loader {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn)
+  }
+}
diff --git a/src/pages/category/category.html b/src/pages/category/category.html
new file mode 100644
index 0000000..42afe81
--- /dev/null
+++ b/src/pages/category/category.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html class="no-js " lang="zh-CN">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <link rel="dns-prefetch" href="https://dn-kdt-img.qbox.me/">
+  <link rel="dns-prefetch" href="https://img.yzcdn.cn/">
+  <link rel="dns-prefetch" href="https://b.yzcdn.cn/">
+  <link rel="dns-prefetch" href="https://su.yzcdn.cn/">
+  <link rel="dns-prefetch" href="https://h5.youzan.com/v2/">
+  <link rel="dns-prefetch" href="https://h5.youzan.com/">
+  <meta name="keywords" content="有赞,移动电商服务平台">
+  <meta name="description" content="有赞是帮助商家在微信上搭建微信商城的平台，提供店铺、商品、订单、物流、消息和客户的管理模块，同时还提供丰富的营销应用和活动插件。">
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="format-detection" content="telephone=no">
+  <meta http-equiv="cleartype" content="on">
+  <link rel="shortcut icon" href="https://b.yzcdn.cn/v2/image/yz_fc.ico">
+  <title>分类</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <!-- <link rel="stylesheet" href="./css/common.css"> -->
+  <!-- <link rel="stylesheet" href="./css/category.css"> -->
+</head>
+
+<body class=" " style="">
+  <div id="app">
+    <div class="container with-bottom-nav" style="min-height: 667px; height: 667px;">
+      <div class="custom-search js-search-bar">
+        <form>
+          <input type="search" class="custom-search-input" autocomplete="off" name="keyword" value="" placeholder="搜索更赞的商品">
+          <span class="icon-custom-search"></span>
+        </form>
+        <button class="custom-search-type-selection-btn">商品</button>
+        <span class="cancel">取消</span>
+        <div class="search-type-dropdown-menu" style="display: none;">
+          <span class="search-type-dropdown-menu-indicator">
+              <i></i>
+          </span>
+          <div class="drop-menu-content">
+            <div class="search-type-goods">
+              <i class="icon-goods"></i>
+              <span>商品</span>
+            </div>
+            <div class="search-type-dropdown-menu-divider"></div>
+            <div class="search-type-shop">
+              <i class="icon-shop"></i>
+              <span>店铺</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="search-content" style="display: none;"></div>
+      <div class="content" style="height: 617px;">
+        <div class="class-nav">
+          <div id="scroll-nav" style="height: 100%;">
+            <ul class="nav" id="scroll-nav-content" style="height: 540px; transform: translate3d(0px, 0px, 0px);">
+              <li class="category-name js-category-name" 
+              :class="{active:index==topIndex}" 
+              :data-cid="list.id" 
+              v-for="(list,index) in topLists" 
+              @click="getSubList(index,list.id)"
+              >{{list.name}}</li>              
+            </ul>
+          </div>
+        </div>
+        <div class="class-category">
+          <div id="scroll-main-wrap" class="main-content">
+            <div id="scroll-main-content" class="js-main-content inner-content" style="height: 943px; transform: translate3d(0px, 0px, 0px); " v-if="topIndex==0&&rankData">
+              <div class="hot-wrap">
+                <div class="hot-goods">
+                  <div class="hot-title">
+                    <p class="pull-left">热销商品榜</p>
+                    <a href="https://maijia.youzan.com/mars/rank/hotgoods" class="pull-right icon-right">更多</a>
+                  </div>
+                  <ul>
+                    <li class="goods-item" v-for="(list,index) in rankData.hotGoods">
+                      <a href="https://h5.youzan.com/v2/showcase/goods?alias=27cjv5wdsb4to&amp;source=yzapp&amp;f_platform=yzapp">
+                        <div class="thumb badge center-img">
+                          <img :src="list.image">
+                          <span class="num">{{index+1}}</span>
+                        </div>
+                        <div class="detail">
+                          <div class="title">{{list.name}}</div>
+                          <div class="price">￥{{list.price | number}}</div>
+                          <div class="recommend">
+                            <span>推荐值:</span>
+                            <span>{{list.recommend}}</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="hot-shops" style="position: relative;">
+                  <div class="hot-title">
+                    <p class="pull-left">TOP店铺榜</p>
+                    <a href="https://maijia.youzan.com/mars/rank/hotshops" class="pull-right icon-right">更多</a>
+                  </div>
+                  <ul>
+                    <li class="shop-item" v-for="(list,index) in rankData.hotShops">
+                      <div class="shop-title">
+                        <span class="badge">{{index+1}}</span>
+                        <a :href="list.clickUrl">{{list.name}}</a>
+                        <span class="follows"> / 关注度: {{list.follows}}</span>
+                      </div>
+                      <ul class="shop-images">
+                        <li v-for="img in list.images">
+                          <a :href="list.clickUrl"><img :src="img"></a>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+                <div class="hot-keywords">
+                  <div class="hot-title">
+                    <p class="pull-left">热搜词排行</p>
+                  </div>
+                  <ul class="keywords-list">
+                    <li v-for="item in rankData.hotKeywords"><a href="javascript:;" class="js-hot-keyword">{{item}}</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div id="scroll-main-content" class="js-main-content inner-content" style="height: 534px; transform: translate3d(0px, 0px, 0px); " v-if="topIndex>0&&subData">
+              <h3 class="category-title">热门品牌 </h3>
+              <ul class="category-content">
+                <li class="category-item js-category-item" :data-item-id="list.id" :data-item-name="list.name" 
+                  v-for="list in subData.brandList"
+                >
+                  <img :src="list.image" :alt="list.name" class="category-img">
+                  <span class="category-item-name">
+                  {{list.name}}            </span>
+                </li>
+              </ul>
+              <h3 class="category-title"> 热门分类  </h3>
+              <ul class="category-content">
+                <li class="category-item js-category-item" :data-item-id="list.id" :data-item-name="list.name" 
+                  v-for="list in subData.categoryList"
+                >
+                  <img :src="list.image" :alt="list.name" class="category-img">
+                  <span class="category-item-name">
+                  {{list.name}}            </span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <foot></foot>
+  </div>
+</body>
+
+</html>
diff --git a/src/pages/category/category.js b/src/pages/category/category.js
new file mode 100644
index 0000000..4510b6a
--- /dev/null
+++ b/src/pages/category/category.js
@@ -0,0 +1,60 @@
+import 'css/common.css'
+import './category.css'
+
+import Vue from 'vue'
+import axios from 'axios'
+import url from 'js/api.js'
+
+import Foot from 'components/Foot.vue'
+
+new Vue({
+  el: '#app',
+  data: {
+    topLists: null,
+    topIndex: 0,
+    subData: null,
+    rankData: null
+  },
+  created() {
+    this.getTopList()
+    this.getSubList(0)
+  },
+  methods: {
+    getTopList() {
+      axios.post(url.topList).then(res => {
+        this.topLists = res.data.lists
+      }).catch(res => {
+
+      })
+    },
+    getSubList(index,id) {
+      this.topIndex = index
+      if(index === 0) {
+        this.getRank()
+      }else {
+        axios.post(url.subList, {id}).then(res => {
+          this.subData = res.data.data
+        })
+      }
+    },
+    getRank () {
+      axios.post(url.rank).then(res => {
+        this.rankData = res.data.data
+      })
+    }
+  },
+  components: {
+    Foot
+  },
+  filters: {
+    number(price) {
+      let priceStr = '' + price
+      if (priceStr.indexOf('.') > -1) {
+        let arr = priceStr.split('.')
+        return arr[0] + '.' + (arr[1] + '0').substr(0,2)
+      } else {
+        return priceStr + '.00'
+      }
+    }
+  }
+})
\ No newline at end of file

From f1837edbc649d522e18d1f088bb00f4fb880570a Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Mon, 14 Aug 2017 23:26:56 +0800
Subject: [PATCH 10/15] Foot.vue z-index bug fixed and navigate

---
 package.json            |  1 +
 src/components/Foot.vue | 40 +++++++++++++++++++++++++++++++++++-----
 yarn.lock               |  4 ++++
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index c0cb75f..cfb94b5 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.16.2",
     "mint-ui": "^2.2.9",
+    "qs": "^6.5.0",
     "swiper": "^3.4.2",
     "vue": "^2.3.3",
     "vue-router": "^2.6.0"
diff --git a/src/components/Foot.vue b/src/components/Foot.vue
index 3a8593a..e456933 100644
--- a/src/components/Foot.vue
+++ b/src/components/Foot.vue
@@ -1,16 +1,46 @@
 <template>
   <div class="bottom-nav">
     <ul>
-      <li class="active"><a href="https://maijia.youzan.com/mars/homepage"><i class="icon-home"></i><div>有赞</div></a></li>
-      <li><a href="https://maijia.youzan.com/mars/category"><i class="icon-category"></i><div>分类</div></a></li>
-      <li><a href="https://h5.youzan.com/v2/trade/cart?f_platform=yzapp&amp;source=yzapp"><i class="icon-cart"></i><div>购物车</div></a></li>
-      <li><a href="https://h5.youzan.com/v2/buyer/member"><i class="icon-user"></i><div>我</div></a></li>
+      <li :class="{active: index===curIndex}" v-for="(list,index) in navConfig" @click="changeNav(list,index)"><a><i :class="list.icon"></i><div>{{list.name}}</div></a></li>
     </ul>
   </div> 
 </template>
 
 <script>
+let navConfig = [{
+  name: '有赞',
+  icon: 'icon-home',
+  href: 'index.html'
+},{
+  name: '分类',
+  icon: 'icon-category',
+  href: 'category.html'
+},{
+  name: '购物车',
+  icon: 'icon-cart',
+  href: 'cart.html'
+},{
+  name: '我',
+  icon: 'icon-user',
+  href: 'member.html'
+}]
+
+import qs from 'qs'
   
+export default {
+  data() {
+    return {
+      navConfig,
+      curIndex: parseInt(qs.parse(location.search.substr(1)).index) || 0
+    }
+  },
+  methods: {
+    changeNav(list, index) {
+      location.href = `${list.href}?index=${index}`
+    }
+  }
+}
+
 </script>
 
 <style>
@@ -20,7 +50,7 @@
   height: 50px;
   bottom: 0;
   background-color: #fff;
-  z-index: 8;
+  z-index: 9999;
   -o-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
   border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
   border-top: 2px solid #e5e5e5
diff --git a/yarn.lock b/yarn.lock
index c1f37b0..ea3e15c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3255,6 +3255,10 @@ qs@6.4.0, qs@~6.4.0:
   version "6.4.0"
   resolved "http://registry.npm.taobao.org/qs/download/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
+qs@^6.5.0:
+  version "6.5.0"
+  resolved "http://registry.npm.taobao.org/qs/download/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49"
+
 query-string@^4.1.0:
   version "4.3.4"
   resolved "http://registry.npm.taobao.org/query-string/download/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"

From b8ce79cbc3527120c5bd29f773affa6b972a457b Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Mon, 14 Aug 2017 23:43:50 +0800
Subject: [PATCH 11/15] add cart,member,search,goods

---
 src/pages/cart/cart.css          | 1711 +++++++++++
 src/pages/cart/cart.html         |  210 +-
 src/pages/cart/cart.js           |    3 +
 src/pages/cart/cart_base.css     | 1161 ++++++++
 src/pages/cart/cart_trade.css    | 4381 ++++++++++++++++++++++++++++
 src/pages/goods/goods.css        | 4636 ++++++++++++++++++++++++++++++
 src/pages/goods/goods.html       |  481 ++++
 src/pages/goods/goods.js         |    6 +
 src/pages/goods/goods_base.css   |    0
 src/pages/goods/goods_common.css | 1173 ++++++++
 src/pages/goods/goods_custom.css | 3816 ++++++++++++++++++++++++
 src/pages/goods/goods_mars.css   |  375 +++
 src/pages/goods/goods_sku.css    | 1492 ++++++++++
 src/pages/goods/goods_theme.css  |  108 +
 src/pages/member/member.css      |  956 ++++++
 src/pages/member/member.html     |  111 +
 src/pages/member/member.js       |    2 +
 src/pages/member/member_base.css | 1161 ++++++++
 src/pages/search/search.css      | 1151 ++++++++
 src/pages/search/search.html     |  197 ++
 src/pages/search/search.js       |    2 +
 21 files changed, 23125 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/cart/cart.css
 create mode 100644 src/pages/cart/cart_base.css
 create mode 100644 src/pages/cart/cart_trade.css
 create mode 100644 src/pages/goods/goods.css
 create mode 100644 src/pages/goods/goods.html
 create mode 100644 src/pages/goods/goods.js
 create mode 100644 src/pages/goods/goods_base.css
 create mode 100644 src/pages/goods/goods_common.css
 create mode 100644 src/pages/goods/goods_custom.css
 create mode 100644 src/pages/goods/goods_mars.css
 create mode 100644 src/pages/goods/goods_sku.css
 create mode 100644 src/pages/goods/goods_theme.css
 create mode 100644 src/pages/member/member.css
 create mode 100644 src/pages/member/member.html
 create mode 100644 src/pages/member/member.js
 create mode 100644 src/pages/member/member_base.css
 create mode 100644 src/pages/search/search.css
 create mode 100644 src/pages/search/search.html
 create mode 100644 src/pages/search/search.js

diff --git a/src/pages/cart/cart.css b/src/pages/cart/cart.css
new file mode 100644
index 0000000..4b7d636
--- /dev/null
+++ b/src/pages/cart/cart.css
@@ -0,0 +1,1711 @@
+.modal-login {
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: #edf0f4;
+  color: #666;
+  display: none
+}
+
+.account-form {
+  overflow: hidden
+}
+
+.account-form a {
+  color: #07d
+}
+
+.account-form a:hover {
+  color: #07d
+}
+
+.account-form a.new-window {
+  color: #00f
+}
+
+.account-form a.new-window:hover {
+  color: #00f
+}
+
+.account-form input,
+.account-form textarea,
+.account-form select,
+.account-form button,
+.account-form label {
+  display: inline-block;
+  vertical-align: top;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
+}
+
+.account-form input,
+.account-form textarea,
+.account-form select {
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-size: 16px;
+  background: white;
+  border: 0
+}
+
+.account-form .btn-auth-code {
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-size: 16px;
+  background: white
+}
+
+.account-form input:focus,
+.account-form textarea:focus,
+.account-form select:focus,
+.account-form button:focus {
+  outline: 0
+}
+
+.account-form textarea {
+  resize: none
+}
+
+.account-form input[type="search"],
+.account-form input[type="search"]::-webkit-search-cancel-button,
+.account-form input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none
+}
+
+.account-form::-ms-clear {
+  display: none
+}
+
+.account-form::-webkit-input-placeholder {
+  color: #a8a8af
+}
+
+.account-form:-ms-input-placeholder {
+  color: #a8a8af
+}
+
+.account-form::-moz-placeholder {
+  color: #a8a8af;
+  opacity: 1
+}
+
+.account-form::-moz-focus-inner {
+  padding: 0 !important;
+  border: 0 !important
+}
+
+.account-form button {
+  border: 1px solid #e5e5e5
+}
+
+.account-form .form-title {
+  margin: 25px 0 10px;
+  padding: 0 12px;
+  line-height: 24px;
+  font-size: 14px;
+  color: #7c7b83;
+  text-transform: uppercase;
+  text-shadow: 0 1px rgba(255, 255, 255, 0.2)
+}
+
+.account-form .big {
+  font-size: 20px;
+  text-align: center;
+  font-weight: normal
+}
+
+.account-form .action-links {
+  text-align: right;
+  padding: 6px 12px;
+  margin-top: 20px;
+  font-size: 14px;
+  zoom: 1
+}
+
+.account-form .action-links:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.account-form .action-links>a,
+.account-form .action-links>span {
+  padding: 6px 0;
+  margin-left: 5px;
+  display: inline-block;
+  vertical-align: middle
+}
+
+.account-form .action-links .division-span {
+  border-left: 1px solid #999;
+  margin: 0 5px 0 3px
+}
+
+.account-form .btn-send-auth {
+  width: 25%;
+  height: 30px;
+  line-height: 30px;
+  padding-left: 0;
+  padding-right: 0;
+  position: absolute;
+  top: 6px;
+  right: 10px
+}
+
+.bind-taobao .btn-send-auth {
+  padding-left: 7px;
+  padding-right: 7px;
+  width: auto;
+  font-weight: bold
+}
+
+.bind-taobao .action-container .btn.btn-white {
+  border: 1px solid #e5e5e5;
+  color: #333
+}
+
+.taobao-result {
+  border-bottom: 1px solid #e5e5e5
+}
+
+.quantity {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  position: relative
+}
+
+.quantity input[type=number]::-webkit-outer-spin-button {
+  margin: 0
+}
+
+.quantity button {
+  border: 2px solid #eee;
+  font-size: 16px;
+  line-height: 10px;
+  font-weight: bold;
+  color: #666;
+  margin: 0;
+  padding: 5px;
+  outline: none !important;
+  text-align: center;
+  width: 26px;
+  height: 30px;
+  vertical-align: middle;
+  text-indent: -9999px;
+  overflow: hidden
+}
+
+.quantity .txt {
+  margin: 0;
+  font-size: 14px;
+  width: 24px;
+  height: 18px;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent;
+  border-radius: 0
+}
+
+.quantity .txt:focus {
+  border-color: #eee
+}
+
+.quantity .minus {
+  position: relative;
+  border-radius: 4px 0 0 4px;
+  border-right: 0px none
+}
+
+.quantity .minus::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  content: '';
+  width: 8px;
+  height: 2px;
+  background-color: #6c6c6c
+}
+
+.quantity .plus {
+  position: relative;
+  border-left: 0px none;
+  border-radius: 0 4px 4px 0
+}
+
+.quantity .plus::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  content: '';
+  width: 8px;
+  height: 2px;
+  background-color: #6c6c6c
+}
+
+.quantity .plus::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  content: '';
+  width: 2px;
+  height: 8px;
+  background-color: #6c6c6c
+}
+
+.quantity .minus.disabled::before {
+  background-color: #dddddd
+}
+
+.quantity .plus.disabled::before {
+  background-color: #dddddd
+}
+
+.quantity .plus.disabled::after {
+  background-color: #dddddd
+}
+
+.quantity .response-area {
+  width: 42px;
+  height: 42px;
+  top: -7px;
+  position: absolute
+}
+
+.quantity .response-area-plus {
+  right: -5px
+}
+
+.quantity .response-area-minus {
+  left: -5px
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.action-tip {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 15px;
+  margin: 10px 0;
+  color: #999
+}
+
+.form {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  padding-left: 10px;
+  padding-right: 10px;
+  list-style: none;
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.form.mg-top-20 {
+  margin-top: 20px
+}
+
+.form.mg-bottom-20 {
+  margin-bottom: 20px
+}
+
+.form .block-item.no-top-border {
+  border-top-width: 0px
+}
+
+.form>.block-item:first-child {
+  border-top: 0px none
+}
+
+.form .block-item {
+  display: table;
+  width: 100%;
+  padding: 0
+}
+
+.form .block-item label {
+  display: table-cell;
+  width: 90px;
+  line-height: 28px;
+  padding: 10px 0
+}
+
+.form .block-item textarea,
+.form .block-item input,
+.form .block-item select,
+.form .block-item a,
+.form .block-item span {
+  display: table-cell;
+  overflow: hidden;
+  padding: 10px 0;
+  min-height: 28px;
+  line-height: 28px;
+  font-size: 14px
+}
+
+.form .block-item textarea,
+.form .block-item input,
+.form .block-item select {
+  width: 99%;
+  background-color: #fff;
+  border: 0px none;
+  outline: none
+}
+
+.form .block-item textarea {
+  height: 50px;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  resize: none
+}
+
+.form .block-item:last-child {
+  border-bottom: 0px none
+}
+
+.tabber {
+  width: 100%;
+  color: #333;
+  font-size: 14px;
+  background-color: #fff;
+  overflow: visible;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .tabber {
+    border-top-width: 1px;
+    border-bottom-width: 1px
+  }
+}
+
+.tabber button,
+.tabber a {
+  float: left;
+  width: 50%;
+  line-height: 40px;
+  border: 0px none;
+  outline: 0px none;
+  background-color: #fff;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.tabber button:hover,
+.tabber a:hover {
+  text-decoration: none
+}
+
+.tabber button.active,
+.tabber a.active {
+  position: relative;
+  top: 1px;
+  line-height: 39px;
+  color: #22C415;
+  border-bottom: 1px solid #22C415
+}
+
+.tabber.tabber-n4 button,
+.tabber.tabber-n4 a {
+  width: 25%
+}
+
+.block.block-order.block-cart .header {
+  overflow: hidden;
+  line-height: 53px;
+  height: 53px
+}
+
+.block.block-order.block-cart .header .shop-title {
+  font-size: 14px;
+  position: relative;
+  padding-left: 24px
+}
+
+.block.block-order.block-cart .header .custom-store-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 18px;
+  width: 18px;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAe1BMVEUAAABmZmZmZmZmZmZmZmZpaWlmZmZoaGhsbGxmZmZmZmZkZGR3d3dnZ2dpaWlmZmZmZmaKiopnZ2dmZmZnZ2dnZ2dnZ2dmZmZoaGhoaGhnZ2dnZ2dpaWlqampmZmZnZ2dmZmZnZ2dmZmZmZmZnZ2dmZmZnZ2dnZ2dmZmY+hk1GAAAAKHRSTlMAHuHm+xnrKBDXyzgHWjP4zwOckonzuXRpT0dAFxS+U+/HsYKwr6Z+1CmDegAAATRJREFUOMu1ksmWgyAQRUEU0QbBeYoZe3j//4WtqejJIqQ7i9yFPk7dU7wF7P/suIfdaqhCwoss1NUJABF4EECwWAVOnHnhJxTzT4IcnwU5d4ZgTxHYsehvKXqTlOk16cwnDajWWGG4lzSgtkm6TtLNV8C838HQMXewnCK3cDlFA3f9ShpdEGKvr432c7yQLmnHJ45drMYzwiFA0kdRnyAYQpxHFXdHfN1uJeSBxY6ii9lBUlwbA420STktvdq0rtN26TOViZUNwIg5eHm/lLXf1SF/KukSC2n8TCpgS9MmEMovjaiXHbpB4Zcq/NyetvBLe4wUAkReKUVGIUH8uiQx+aQJkhENOp/UoWFEj9rkj6Tc1OjZjRKwAWEREoCYDyjZhnEhHhA6w+7RnMg+NjjX7AV+AbbXK771Kk31AAAAAElFTkSuQmCC") no-repeat;
+  background-size: 18px 18px;
+  text-indent: -999em
+}
+
+.block.block-order.block-cart .header .select-group {
+  float: left;
+  height: 28px;
+  line-height: 28px;
+  padding: 12px 10px 5px 0
+}
+
+.block.block-order.block-cart .header .select-group .check {
+  margin-top: 0
+}
+
+.block-list-cart {
+  background-color: #fff
+}
+
+.block-list-cart.block {
+  padding-left: 0
+}
+
+.block-list-cart .clear-block {
+  padding-bottom: 10px;
+  background-color: #fff
+}
+
+.block-list-cart .clear-btn {
+  border-color: #f60;
+  color: #f60;
+  font-size: 14px;
+  padding: 6px 44px
+}
+
+.block-list-cart .block-item-cart {
+  background-color: #fafafa;
+  border: 0;
+  overflow: visible;
+  padding: 0 0 0 10px;
+  margin-bottom: 10px
+}
+
+.block-list-cart .block-item-cart.ajust {
+  -webkit-transition: all .3s ease-in-out;
+  -moz-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out
+}
+
+.block-list-cart .block-item-cart .ajust {
+  -webkit-transition: all .3s ease-in-out;
+  -moz-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out
+}
+
+.block-list-cart .block-item-cart.error .error-box {
+  display: block
+}
+
+.block-list-cart .block-item-cart.disable div.error-box {
+  color: #999
+}
+
+.block-list-cart .block-item-cart.bale-cart {
+  background: #fff8f2
+}
+
+.block-list-cart .block-item-cart .title {
+  font-size: 14px;
+  height: 40px;
+  overflow: hidden;
+  line-height: 20px
+}
+
+.block-list-cart .block-item-cart .check-container {
+  float: left;
+  height: 60px;
+  margin-left: -10px;
+  padding: 20px 10px;
+  width: 20px
+}
+
+.block-list-cart .block-item-cart .name-card {
+  padding-right: 10px
+}
+
+.block-list-cart .block-item-cart .name-card .thumb {
+  width: 90px;
+  height: 90px
+}
+
+.block-list-cart .block-item-cart .name-card .thumb .bale-tag {
+  height: 14px;
+  line-height: 14px;
+  padding: 0 6px 0 3px;
+  font-size: 8px;
+  color: #fff;
+  background: #f44;
+  position: absolute;
+  left: 0;
+  bottom: 4px;
+  border-radius: 0 7px 7px 0
+}
+
+.block-list-cart .block-item-cart .name-card .detail {
+  margin-left: 98px
+}
+
+.block-list-cart .block-item-cart .name-card .detail .sku {
+  height: 20px;
+  padding-right: 20px;
+  color: #666;
+  position: relative
+}
+
+.block-list-cart .block-item-cart .name-card.name-card-order .thumb {
+  width: 66px;
+  height: 66px
+}
+
+.block-list-cart .block-item-cart .name-card.name-card-order .detail {
+  margin-left: 73px
+}
+
+.block-list-cart .block-item-cart .name-card .num {
+  color: #666;
+  font-weight: 100;
+  font-size: 12px;
+  position: absolute;
+  right: 0;
+  bottom: 0
+}
+
+.block-list-cart .block-item-cart .name-card .num .quantity .response-area {
+  width: 32px;
+  height: 60px;
+  top: -20px
+}
+
+.block-list-cart .block-item-cart .name-card .num .quantity .response-area-minus {
+  left: 0
+}
+
+.block-list-cart .block-item-cart .name-card .num button {
+  margin: 0;
+  width: 40px;
+  height: 30px;
+  border: 1px solid #999;
+  background-color: #f2f2f2;
+  border-radius: 1px
+}
+
+.block-list-cart .block-item-cart .name-card .num button.disabled {
+  border-color: #e8e8e8
+}
+
+.block-list-cart .block-item-cart .name-card .num .txt {
+  border: 1px solid #999;
+  color: #666;
+  height: 28px;
+  width: 38px;
+  line-height: 20px;
+  padding: 0;
+  z-index: 1;
+  position: relative;
+  margin: 0 -1px
+}
+
+.block-list-cart .block-item-cart .error-box {
+  display: none;
+  color: #f60;
+  font-size: 12px;
+  margin-top: 3px;
+  margin-left: 98px
+}
+
+.block-list-cart .block-item-cart .delete-btn {
+  width: 640px;
+  height: 100%;
+  position: absolute;
+  right: -640px;
+  top: -1px;
+  background-color: #ff4343;
+  color: #fff;
+  font-size: 12px
+}
+
+.block-list-cart .block-item-cart .delete-btn span {
+  left: 20px;
+  position: absolute;
+  top: 50%;
+  margin-top: -6px
+}
+
+.check {
+  border-radius: 100%;
+  display: inline-block;
+  margin: 17px 0 0;
+  vertical-align: middle;
+  line-height: 60px;
+  width: 18px;
+  height: 18px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAVFBMVEUAAACampqioqKZmZmampqampqampqampqcnJyqqqqampqampqampqampqbm5v///+ZmZn5+fn09PTw8PDm5ubR0dHPz8/Jycm7u7uxsbGdnZ3d3d2KAK0RAAAAD3RSTlMAvRDz2cWQUTsDXdaioVxmAFd6AAAA6klEQVQ4y42UWRaEIAwEEfeVxn25/z2H6OhTB5jUdz9SBBJxRzZ1EIVhFNSNFHbSADeC1BLJYryIs1ckT0AsQ99p3fXDAiLJHzJUaZ20utDTSjXlLVMCmFv1oJ0BlFcqp3NG9cNIZ50VyWdTFjby+t7rPMd+1nHH2PgoB8Yr3nsIrK0r1K4AddVYT8rJZNzN9QFod0gDkKIAFuVhAQpRAYMvNAAVKfW+UE9SEdD5Qh0QiXD39pqHrBCrHE+8/t+CmtPMhvUsnAdmfRXOp2N9X84gsEaKM5ycMWcvDP7q4S8xQhbVsQ6r4iHzAbrdPVnePehPAAAAAElFTkSuQmCC);
+  background-repeat: no-repeat;
+  background-size: 18px
+}
+
+.check.info {
+  background-position: 0 0
+}
+
+.check.checked,
+.check.delete {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAS1BMVEUAAAAzhPszhPoyhPsyhPozg/s0hPwyhPw0hvs8h/9Aj/8yg/syg/ozhPsyg/r///+wz/2RvfxTl/pup/vT5P3U5f16r/u91/18sPvWF+94AAAADnRSTlMAvdnFopBcUTsREPPW8utY9+UAAADeSURBVDjLlZTrDoMgDIWpIoqX1svm9v5PumRGD7Aq7vtH8iWnFFoT4p2lousKss4bnZo4gGpFaUpOKJvUqVihipSWWIXawOn5hB4W8Smk16PX1fAl2x3La6n89pA1lpV36rOqJ5ElqN1rziwi7+PkjdOkp8gDJ2esHiYzjtaQHjZFDS2O+yxxGChMtzsiYxQGOjNAkhFhIQPixs1CWBBHHFkIA2QsR9YLYUELHMcWwoJmeo4shAGfPPCIMJT081XWlVPqm58u/31vD0J+pPLDeXPM8wsjv3r+XWL5dfgBB3w3WcIaGhAAAAAASUVORK5CYII=)
+}
+
+.bottom-fix .bottom-cart {
+  padding: 0 10px;
+  height: 49px;
+  background-color: #fff;
+  font-weight: 500;
+  color: #f60;
+  position: relative
+}
+
+.bottom-fix .bottom-cart .select-all {
+  font-weight: 100;
+  float: left;
+  width: 55px;
+  height: 40px;
+  color: #333
+}
+
+.bottom-fix .bottom-cart>div {
+  height: 50px;
+  line-height: 50px;
+  font-size: 14px
+}
+
+.bottom-fix .bottom-cart .total-price {
+  padding-right: 80px;
+  text-align: right;
+  font-weight: 100;
+  width: auto;
+  margin-left: 55px;
+  font-size: 12px;
+  line-height: 16px;
+  padding-top: 8px;
+  margin-right: 9px
+}
+
+.bottom-fix .bottom-cart button {
+  position: absolute;
+  right: 0px;
+  padding: 4px 10px;
+  top: -1px;
+  width: 90px;
+  height: 50px;
+  margin-top: 0;
+  min-width: 75px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: 0px
+}
+
+.bottom-fix .bottom-cart button[disabled] {
+  color: #999 !important;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-bbb.png") 2 stretch !important;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-bbb.png") 2 stretch !important;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-bbb.png") 2 stretch !important;
+  background-color: #f1f1f1 !important
+}
+
+.bottom-fix .bottom-cart button.hide {
+  display: none
+}
+
+.bottom-fix .bottom-cart button.btn-red {
+  background-color: #ff4343
+}
+
+.bottom-fix .bottom-cart .check {
+  margin: -5px 5px 0 0
+}
+
+.bottom-fix .bottom-cart.editing {
+  color: #f24d4d
+}
+
+.bottom-fix .bottom-cart.disable {
+  color: #ccc
+}
+
+.bottom-fix .bottom-cart .cancel-delete {
+  top: 5px;
+  position: absolute;
+  width: 45px;
+  right: 90px
+}
+
+.block-item-cart.editing .name-card .title {
+  visibility: hidden
+}
+
+.block-item-cart.editing .name-card .num {
+  left: 0;
+  top: 0
+}
+
+.block-item-cart.editing .name-card .detail .sku {
+  padding-right: 60px
+}
+
+.block-item-cart.editing .delete-btn {
+  -webkit-transform: translate3d(-60px, 0, 0);
+  -moz-transform: translate3d(-60px, 0, 0);
+  transform: translate3d(-60px, 0, 0)
+}
+
+.invalid-list-title {
+  font-size: 12px;
+  color: #999;
+  margin: 10px 0;
+  text-align: center;
+  line-height: 40px;
+  padding-top: 0;
+  background: #fafafa
+}
+
+.invalid-list {
+  margin-bottom: 0
+}
+
+.tabber.tabber-n3 button,
+.tabber.tabber-n3 a {
+  width: 33.33333%
+}
+
+.tabber.tabber-double-11 {
+  border: 0px none;
+  overflow: hidden;
+  margin-bottom: 1px
+}
+
+.tabber.tabber-double-11 a {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: 0px none;
+  color: #999;
+  display: block;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .tabber.tabber-double-11 a {
+    border-bottom-width: 1px
+  }
+}
+
+.tabber.tabber-double-11 a.active {
+  color: #F15A0C;
+  border-top: 0px none;
+  border-bottom: 2px solid #F15A0C;
+  -webkit-border-image: initial;
+  -moz-border-image: initial;
+  border-image: initial
+}
+
+.tabber.tabber-double-11.tabber-fixed {
+  z-index: 9;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%
+}
+
+.tabber.tabber-double-11.tabber-fixed a {
+  background-color: #fff
+}
+
+.tabber.tabber-double-11.tabber-one-line {
+  height: 40px
+}
+
+.tabber.tabber-double-11.tabber-two-line {
+  height: 80px
+}
+
+.more-discount {
+  position: fixed;
+  bottom: 101px;
+  right: 8px;
+  display: block;
+  z-index: 11;
+  height: 38px;
+  width: 45px;
+  text-align: center;
+  line-height: 14px;
+  padding-top: 9px;
+  border-radius: 50%;
+  opacity: 0.9;
+  background: #f66
+}
+
+.tag {
+  display: inline-block;
+  background-color: transparent;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  text-align: center;
+  margin: 0;
+  color: #999;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 4px
+}
+
+.tag-big {
+  font-size: 14px;
+  line-height: 18px
+}
+
+.tag.tag-green {
+  color: #06bf04;
+  border-color: #0c3
+}
+
+.tag.tag-orange {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-orangef60 {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-white {
+  color: #333;
+  border-color: #bbb
+}
+
+.tag.tag-blue {
+  color: #38f;
+  border-color: #38f
+}
+
+.tag.tag-red {
+  color: #ed5050;
+  border-color: #ed5050
+}
+
+.tag.tag-pink {
+  color: #ee614b;
+  border-color: #ee614b
+}
+
+.tag.disabled {
+  background-color: #ddd !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  color: #fff !important
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.wrapper-form .form-item {
+  position: relative;
+  margin-top: 10px
+}
+
+.wrapper-form .form-item label {
+  position: absolute;
+  top: 1px;
+  left: 10px;
+  line-height: 45px;
+  z-index: 1;
+  color: #666
+}
+
+.wrapper-form .form-item textarea,
+.wrapper-form .form-item input {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  line-height: 18px;
+  padding: 12px 10px 12px 68px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 14px;
+  outline: none;
+  opacity: 1;
+  -webkit-appearance: none
+}
+
+.wrapper-form .form-item input[disabled='disabled'] {
+  background: #f8f8f8
+}
+
+.wrapper-form .form-item:first-child {
+  margin-top: 0
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.popout-box .header {
+  position: relative;
+  margin-bottom: 10px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .popout-box .header {
+    border-bottom-width: 1px
+  }
+}
+
+.popout-box .header h2 {
+  margin-bottom: 16px;
+  line-height: 16px;
+  font-size: 16px
+}
+
+.popout-box .action-container {
+  margin: 10px 0 0 0;
+  padding: 0
+}
+
+.popout-box .action-container .btn.btn-block {
+  font-size: 14px
+}
+
+.popout-login .wrapper-form {
+  padding-top: 10px
+}
+
+.popout-login .wrapper-form .verify-image {
+  position: absolute;
+  right: 0px;
+  top: 7px;
+  width: 80px;
+  height: 30px
+}
+
+.popout-login .wrapper-form .btn-auth-code {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 80px;
+  padding: 15px 4px;
+  border-radius: 5px
+}
+
+.popout-login .wrapper-form .txt-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0
+}
+
+.popout-login .wrapper-form .txt-cover-half {
+  right: 90px
+}
+
+.popout-login .wrapper-form .error {
+  margin-top: 10px;
+  word-break: break-word
+}
+
+.popout-login .bottom-tips {
+  padding-top: 16px;
+  font-size: 0
+}
+
+.popout-login .bottom-tips .inline-item {
+  padding: 0 10px;
+  border-right: 1px solid #e5e5e5;
+  font-size: 12px
+}
+
+.popout-login .bottom-tips .inline-item:last-child {
+  padding-right: 0px;
+  border-right: 0px none
+}
+
+.block.block-order .header {
+  height: 37px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 10px;
+  padding-left: 10px;
+  line-height: 37px
+}
+
+.block.block-order .header span {
+  font-size: 12px
+}
+
+.block.block-order .header a.disable {
+  color: #999
+}
+
+.block.block-order .bottom {
+  padding: 10px;
+  padding-left: 10px;
+  height: 16px;
+  font-size: 14px;
+  line-height: 16px
+}
+
+.block.block-order:last-of-type {
+  margin-bottom: 0
+}
+
+.line-block::before {
+  content: '';
+  display: block;
+  margin: 10px
+}
+
+.line-block .lineblock-title {
+  display: block;
+  text-align: center;
+  margin-top: -17px;
+  margin-bottom: 17px;
+  line-height: 14px
+}
+
+.line-block .lineblock-font {
+  display: inline-block;
+  padding: 0px 10px;
+  background-color: #fff;
+  color: #22C415
+}
+
+.line-block.line-block-red::before {
+  border-top: 1px solid #F33
+}
+
+.line-block.line-block-red .lineblock-font {
+  color: #F33
+}
+
+.line-block.line-block-green::before {
+  border-top: 1px solid #22C415
+}
+
+.line-block.line-block-green .lineblock-font {
+  color: #22C415
+}
+
+.line-block.line-block-gray::before {
+  border-top: 1px solid #eee
+}
+
+.line-block.line-block-gray .lineblock-font {
+  color: #999;
+  background-color: #f8f8f8
+}
+
+body.has-bottom-nav {
+  padding-bottom: 51px
+}
+
+.mj-bottom-nav {
+  position: fixed;
+  width: 100%;
+  height: 50px;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 999;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .mj-bottom-nav {
+    border-top-width: 1px
+  }
+}
+
+.mj-bottom-nav ul {
+  position: relative;
+  height: 100%;
+  zoom: 1
+}
+
+.mj-bottom-nav ul:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.mj-bottom-nav li {
+  display: block;
+  float: left;
+  width: 25%;
+  height: 100%
+}
+
+.mj-bottom-nav a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding-top: 8px;
+  text-align: center;
+  font-size: 10px
+}
+
+.mj-bottom-nav [class^="icon-"] {
+  display: block;
+  width: 22px;
+  height: 22px;
+  margin: auto;
+  margin-bottom: 4px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% auto
+}
+
+.mj-bottom-nav .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .icon-cart {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .icon-user {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .active a {
+  color: #ff6366
+}
+
+.mj-bottom-nav .active .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .active .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .active .icon-cart {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABMJJREFUeAHtWs2PFEUU7+qZHUWcxY/swesEo0j8hIs3FENCOHmYDRv+As/EgzEmaDSeTOTEwXAzWZjJ7kII2YuHvWCMAUXQNbDJEi7Augo4w7q7dE8Xv9dMLVU93duzUzU4tVQnu1WvXtV7r3793qvqqvE89zgEHAIOAYeAQ8Ah4BBwCGghwOTRwdjYl4zzjz3GSnL7pqhz3sI8bnPGzvEw/LxUr1+U56UAEY6NNcAsyx02ZZ3z/yLO95ZOnvxJzM8XFSo550dRrFAl808eYGudsWcYY9/K5iseITOy6vCaG+C9lMW3ph0v++Lc3FO7L1wIyGbFI7qZBI3vpt/A92EsFCCQrRsGAon0t4GfZHcG/i132zAQURRtCiC4513SAsILw80RGpz/ogXEad+fw4qyLAuxsY5VQg+I0Xq9Bbf63cbJyzaHQaAHBAkDmraHx92nJybmZWA2nCxpcOR5VidMePSvMghU7wkIFkV2e0QUKWHRMxCNZvNyvAVPwmoJHTFmBogXp6cb2Fhds2TenWYmEiV16Ck0aKDFW+2lrycmrtIc5KdnIICElQmTXuCRON/LMGh4BJZQK4HAwVNHfiBIevaIIAisXDnSEqUWEFsmJ68jPP5VHWzwKRzVmfUImjKE2uUVnK/+ePPmbNrr6jk0YmGWJUz69H5vZiY0DgQEW5UwcU6ZGhYEjK5HWBUaOFQ6n+YN2kBcbzT+QMJMdbUshf9bO+417vv+mSz9Wh7x8vT0KsLjSpbwQWpHYv/q2fHxhSybilmMbtsRdxQeO9v98YXu3Y/rnCevClQaA9tjHha6/ZPyPG8J3noLL+pPfC0fH6rVTin6EoQ2EByHucz3D8VyOb9WPHFie0KHFaRWaMQz9H05YVb+2b9/2IqZJ4zUBmJlZeXREgr3HN627c2EDitIbSDKU1N/USyK2SIm3xZ1m0ptIGiymPxaePiMvWUTAMJWI0BA2Fp44Hv/yQUCn7ZrQGBN3Hl+164hgbQtpRmPkE+18WubNyoV6/KEESBOR9FVJMxF8fZZofBdUK2+e2vfvq2ibdBLdXenYW1w8OAXWD0/6xCBpIE2+v0S7Tqpjqsy9rCMiZx/6o7zkb1iJ9nJF7JJ3zK21seGxsc/ydFCt3dmnrsHDjy/tVz+Afa9Y0aiMSnRZBiW6M52PYlGQoMUPHf27J1mq/U+HOBTvJKfESoL+FtdT/lj4EWw4XgeCGSHMY9Yb1JHEucer1Writ6RxUWFLjebCr2lUlHo0r17Cl1cXlbpkZGYXpifV34etJ6NjucQUBFQXEplmaNq1Wrhw2LxMCSO4oLlFWRyOsypTYXhN93Er7DElBwhTy77DkRsfKFAq8keWTHVkVhnplqtD7oBw5ScpA2CNrZqCIHJkjwhDQTqR+1tT0kO66BNyekQ3G7oOxDQM5qlvN2exxfD8/rl8YWc1LLvQFBOSNXcbszji7F5/fL4Qk5W2Xcg2okxSz9dG3Z1Cp7XL4+faUCb0XcgoKeWY0QeXwzP65fHF3JSy74DQUskrQ5p2uNVA/w0XrLNlJykXEEXRKVfZX12lr++Y8f3r/r+EnS8gFgehhtfRv0ols6Pulk6yTZTckiWexwCDgGHgEPAIaCHwAMJYdPtuf90jwAAAABJRU5ErkJggg==")
+}
+
+.mj-bottom-nav .active .icon-user {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABLNJREFUeAHtW0toE1EUnZekrfVT1IVWqS1CiwvFLir4wUItCEI3Wp02deVOcFEUVyJCFn5WRdCFC0FQEZtEW0EFF4IFPxutohZ1UXGhbaB+UCm2zWee545BsFhyZ3JnGHEehCaZM+fce3Lnzbw7U8MIR+hA6EDoQOhA6ADXAcUFSuAShhE5appbjEhkp6FUCzhXIoCVxK0NYxx/xg2thw3LunEinX6UMAyLtvkxfDHiXVvbvLoVK3ohdhhJLWMmNgFz+j5kMmdWDw1NM/dxDfPciHxX125UwGlUwCpXUWr9HhVyKJZKXXe1P3OnCBPnBqZy8fgJIxq95toEUiUDwWFz4ZObQDj7eEWs8vH4VSTRzQmCjdE6Gevv7wEeR43s8KQi8OsdFzeB8oaxNresBzabeEXYcwIdDl6OQmGP9JwhWhF0drAnRi9NIG5MvraWoI6oEXSKtCc3wQD/SoUJ1Nb660Z3X4oZkcDvhOOMrhN8GaSVgKaUmNgckTPNrSoWuy8VGIdH5/OtFen0Aw62FEbMUfuyuZSa9Ha6VBcackb8WjsIhcWkEdSUM6K4eGKmIAWzF2wSZGJGYLIRC4qbmKSmmBHc4EVxSoldaosZUewniOZZikxrnSmF4W4XMwKC1Fjxe4hpyhlBnSW/h6CmnBFor/ntA7X0pDTFjKAeI4KakAqMwTNR1GRAS0PEjEig0Uo9xtKSMgjSIk0ZNsFFCwVEjVZ0od9LBTcnDzRsrTkBzjeIVQRJ291mNFqdh+FwD2hId7ZFjaB0qHOE8/tJh6mx4cQt3Z0icbFl+KxMwuZt0RBN3WbJyrArwaMOtpcV8btA/pUbPF4dGr+NoDfhLb8/7DCMBE7XQb0JPCvU8GPoQOjALwc8nSwnTHPhkmh0I9YFa5XW9bj504BXPd7TMxLVeF+NS/L5xR9jGp9n8Hka+M/4bkwpNYbT5pil9Rt893heMvm2iBX/I2rEvba2WOvy5TuQUAcC3wzydXgfFYta6y/gfYLXnVw2279gYECsQyViRLa7uxlE+1QkshdJc5+IKdcfFIq+p5W6/DCTubJtaChfDmFZRvzo7KyrrKzsw6/eVU4Q5e4LQ16jSdNbkUrddcvlygg6BLbW1h7GMXwMwgvcikvvB0MGpwuF/YvS6Y9OuR0b8aSlpaK5qSkJE3Y5FfMDj/nj5dTkZHvNzZufnOg5MqJYCWRCpxMRv7GojBdTMzPtNYODdPZhDUf9iNba2otBN4GyRozrq6uqbiUcdODYFYGHw3ZBYYBlb0BAlmUdqEwmz3HCYVcETlOnOIRBwkSUOpIyTdZ1DMuIXE9PO0pnTZCSZMWCR4w6o9EdHCzLCBB1cMiCiEElb+fExTNC6y0cskBitN7EiYtlBGbhBg5ZEDE4pFnPgLOMQIJLgpgkKyallnJwXCO+c8gCidH6KyculhG4UhvhkAURg8nyKSculhFoltzmkAURowqF85y4WEY8Hx09i8XMKw5hkDCo5Du4Pch6hoJlxIbh4ZyVze4G8bMgJVoilvT3b9/Y/y/CXmuQqL0Eb2w8iDWHiVNqE75aXCIYvzd/RuWOaMu6gDXGJb/FQ73QgdCB0IHQgf/FgZ+UQn2ZrGr7bgAAAABJRU5ErkJggg==")
+}
+
+.tabber.tabber-double-11 {
+  margin-bottom: 10px
+}
+
+.tips {
+  border-top: 1px solid #f9ecb5;
+  border-bottom: 1px solid #f9ecb5;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 10px;
+  color: #f09000;
+  background-color: #fdf8e4
+}
+
+.show-more {
+  padding: 10px;
+  text-align: center
+}
+
+hr.cart {
+  margin: 30px 20px 0 20px
+}
+
+.block-item.block-item-cart-shop {
+  padding: 5px 0
+}
+
+.block-item.block-item-cart-shop .btn-go-pay {
+  position: absolute;
+  right: 10px;
+  top: 20px;
+  font-size: 12px;
+  padding: 2px 6px
+}
+
+#cart-container .edit-list {
+  padding: 0 10px;
+  margin-right: -10px
+}
+
+#cart-container .block-cart {
+  margin: 0;
+  border: none
+}
+
+#cart-container .shop-list {
+  background-color: #fff
+}
+
+.conflict-pop-box h3 {
+  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: 15px
+}
+
+.conflict-pop-box p {
+  margin: 15px 0 20px;
+  line-height: 1.5
+}
+
+.block.login-tip {
+  padding: 0 10px;
+  line-height: 38px;
+  border-top: 0;
+  margin-top: -1px
+}
+
+.block.login-tip .close-btn {
+  float: left;
+  width: 15px;
+  height: 36px;
+  margin-right: 6px;
+  cursor: pointer;
+  background-image: url("/v2/image/wap/trade/cart/delete-cart@2x.png");
+  background-size: 15px 15px;
+  background-repeat: no-repeat;
+  background-position: center
+}
+
+.block.login-tip .login-btn {
+  color: #f60;
+  border-color: #f60;
+  padding: 3px 5px;
+  margin-top: 6px;
+  float: right
+}
+
+.close-pop-box {
+  padding-bottom: 10px
+}
+
+.close-pop-box h3 {
+  padding: 0 0 15px;
+  border-bottom: 1px solid #e5e5e5
+}
+
+.close-pop-box p {
+  line-height: 30px;
+  padding: 11px 0 0
+}
+
+.close-pop-box .btn {
+  padding-top: 10px;
+  padding-bottom: 10px
+}
+
+.mj-display {
+  padding-bottom: 51px
+}
+
+.mj-display.body-fixed-bottom {
+  padding-bottom: 126px
+}
+
+.mj-display .bottom-fix {
+  bottom: 51px
+}
+
+body.body-fixed-bottom {
+  padding-bottom: 85px;
+  background-color: #f8f8f8
+}
+
+.bale-cart-title {
+  line-height: 16px;
+  padding: 10px 10px 10px 40px;
+  font-size: 14px
+}
+
+.bale-cart-title .bale-cart-link {
+  display: block
+}
+
+.bale-cart-title .name {
+  float: left;
+  height: 22px;
+  line-height: 22px;
+  max-width: 210px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.bale-cart-title .status {
+  float: right;
+  height: 16px;
+  font-size: 12px;
+  margin: 3px 0;
+  padding-right: 15px;
+  color: #999
+}
+
+.bale-cart-title .tag {
+  height: 16px;
+  line-height: 16px;
+  font-size: 10px;
+  border: 0;
+  background: #f44;
+  color: #fff;
+  padding: 0 5px;
+  margin-right: 5px
+}
+
+.bale-cart-title .bale-info {
+  vertical-align: middle
+}
+
+.bale-cart-title .bale-tips {
+  float: right;
+  height: 22px;
+  line-height: 22px;
+  width: 45px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.bale-cart-title .tip-content {
+  vertical-align: middle;
+  color: #999;
+  font-size: 12px
+}
+
+.go-package-list::after {
+  content: '';
+  width: 6px;
+  height: 12px;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  margin-top: -6px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAMAAAD57OxYAAAAPFBMVEUAAACZmZmlpaWampqZmZmampqampqampqampqbm5ubm5ucnJyZmZmfn5+bm5uZmZmampqampqbm5uZmZnmDXU5AAAAE3RSTlMA8Qjo3dHCn4lPPi8jGA+ysXRhTrGNsAAAAFxJREFUGNNl0EcOwCAMRNEUekv5979r2Bgr4BVPQrbH27/Cq+8H4oCHPQmOqysPOTiLqFkwVVQN2CYqJ7hDlHe4BVvq8kMRCCv0mzZYW+tQXUcXnSNoOI09H2StDz/YBU9Q8POZAAAAAElFTkSuQmCC) no-repeat;
+  background-size: 6px 12px
+}
+
+@media (min-width: 360px) {
+  .bale-cart-title .name {
+    max-width: 250px
+  }
+}
+
+@media (min-width: 375px) {
+  .bale-cart-title .name {
+    max-width: 265px
+  }
+}
+
+@media (min-width: 414px) {
+  .bale-cart-title .name {
+    max-width: 290px
+  }
+}
+
+.go-pay-shop-list .go-pay-title {
+  padding: 17px 0;
+  font-size: 16px;
+  text-align: center
+}
+
+.go-pay-shop-list .shop {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  padding: 15px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .go-pay-shop-list .shop {
+    border-top-width: 1px
+  }
+}
+
+.go-pay-shop-list .name {
+  font-size: 14px
+}
+
+.go-pay-shop-list .info {
+  float: left
+}
+
+.go-pay-shop-list .price {
+  margin-top: 5px;
+  font-size: 12px
+}
+
+.go-pay-shop-list .go-pay-btn {
+  border: 1px #f60 solid;
+  color: #f60;
+  font-size: 14px;
+  float: right;
+  width: 83px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center
+}
+
+.go-shop-tip {
+  background-color: #FFF7CC;
+  width: 100%;
+  line-height: 35px;
+  height: 35px;
+  text-align: center
+}
+
+.bottom-cart .btn-orange-dark {
+  border-color: #FF4444;
+  background-color: #FF4444
+}
+
+.bottom-fix .bottom-cart {
+  height: 50px
+}
+
+.bottom-fix .bottom-cart .total-price {
+  margin-left: 80px
+}
+
+.bottom-fix .bottom-cart .select-all {
+  width: auto;
+  height: auto;
+  max-width: 80px
+}
+
+.bottom-fix .bottom-cart .btn {
+  height: 50px;
+  top: initial;
+  bottom: 0px
+}
diff --git a/src/pages/cart/cart.html b/src/pages/cart/cart.html
index 0387015..d31279f 100644
--- a/src/pages/cart/cart.html
+++ b/src/pages/cart/cart.html
@@ -1,12 +1,206 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="" lang="zh-cmn-Hans" style="position: static;">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="keywords" content="有赞,移动电商服务平台">
+  <meta name="description" content="">
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="format-detection" content="telephone=no">
+  <meta http-equiv="cleartype" content="on">
+  <meta name="referrer" content="always">
+  <link rel="shortcut icon" href="https://b.yzcdn.cn/v2/image/yz_fc.ico">
+  <title>购物车</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <!-- <link rel="stylesheet" href="./css/cart_base.css"> -->
+  <!-- <link rel="stylesheet" href="./css/cart_trade.css"> -->
+  <!-- <link rel="stylesheet" href="./css/cart.css"> -->
 </head>
-<body>
-  购物车页面
+
+<body class=" body-fixed-bottom" style="">
+  <div class="container " style="min-height: 581px;">
+    <div class="content clearfix js-page-content">
+      <div id="cart-container">
+        <div>
+          <!---->
+          <!---->
+          <!---->
+          <div class="js-shop-list shop-list">
+            <div class="block block-order block-cart">
+              <div class="header">
+                <div class="select-group js-select-group"><span class="check checked"></span></div> <a class="shop-title"><i class="custom-store-img">店铺：</i>寻找田野</a>
+                <a href="javascript:;" data-type="cart" class="j-edit-list pull-right c-blue font-size-12 edit-list">
+                  <!---->
+                  编辑
+                </a>
+              </div>
+              <!---->
+              <div>
+                <ul class="js-list block block-list block-list-cart border-0">
+                  <li class="block-item block-item-cart editing">
+                    <div>
+                      <div class="check-container"><span class="check"></span></div>
+                      <div class="name-card clearfix">
+                        <a href="https://h5.youzan.com/v2/showcase/goods?alias=2oivacpjh2ex0" class="thumb js-goods-link"><img data-src="https://img.yzcdn.cn/upload_files/2017/07/04/Fqp4EItsHaclmGQPBoMkR1qKmKGi.jpg!200x200.jpg" class="js-lazy" src="https://img.yzcdn.cn/upload_files/2017/07/04/Fqp4EItsHaclmGQPBoMkR1qKmKGi.jpg?imageView2/2/w/200/h/200/q/75/format/webp">
+                          <!---->
+                        </a>
+                        <div class="detail"><a href="https://h5.youzan.com/v2/showcase/goods?alias=2oivacpjh2ex0" class="js-goods-link"><h3 class="title js-ellipsis"><i>江苏盱眙“花雕冰醉”小龙虾  口味独特 清甜爽口</i></h3></a>
+                          <p class="sku ellipsis">
+                            7-9钱，总重1600g 净虾800g
+                          </p>
+                          <!-- 显示状态 -->
+                          <div class="num" style="display: none;">
+                            ×<span class="num-txt">2</span>
+                            <!---->
+                          </div>
+                          <!-- 编辑状态 -->
+                          <div class="num">
+                            <!---->
+                            <div class="quantity">
+                              <button type="button" class="minus disabled"></button>
+                              <input type="text" pattern="[0-9]*" class="txt" value="1">
+                              <button type="button" class="plus "></button>
+                              <div class="response-area response-area-minus"></div>
+                              <div class="response-area response-area-plus"></div>
+                            </div>
+                          </div>
+                          <div class="price c-orange">
+                            ¥<span>189.00 </span></div>
+                        </div>
+                        <div class="error-box"></div>
+                      </div>
+                      <div class="delete-btn"><span>删除</span></div>
+                    </div>
+                  </li>
+                  <li class="block-item block-item-cart">
+                    <div>
+                      <div class="check-container"><span class="check checked"></span></div>
+                      <div class="name-card clearfix">
+                        <a href="https://h5.youzan.com/v2/showcase/goods?alias=1y7n2wi58q1as" class="thumb js-goods-link"><img data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FkSvYz8FLLD9-t0smXO43hF6ov7S.jpg!200x200.jpg" class="js-lazy" src="https://img.yzcdn.cn/upload_files/2017/07/12/FkSvYz8FLLD9-t0smXO43hF6ov7S.jpg?imageView2/2/w/200/h/200/q/75/format/webp">
+                          <!---->
+                        </a>
+                        <div class="detail"><a href="https://h5.youzan.com/v2/showcase/goods?alias=1y7n2wi58q1as" class="js-goods-link"><h3 class="title js-ellipsis"><i>寻找田野|最正宗的上海南汇8424 得奖最多奥运会指定西瓜1只/箱 9-11斤</i></h3></a>
+                          <p class="sku ellipsis">
+                            4500g-5000g
+                          </p>
+                          <div class="num">
+                            ×<span class="num-txt">3</span>
+                            <!---->
+                          </div>
+                          <div class="price c-orange">
+                            ¥<span>98.00 </span></div>
+                        </div>
+                        <div class="error-box"></div>
+                      </div>
+                      <div class="delete-btn"><span>删除</span></div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="block block-order block-cart">
+              <div class="header">
+                <div class="select-group js-select-group"><span class="check checked"></span></div> <a class="shop-title"><i class="custom-store-img">店铺：</i>猫咪森林</a>
+                <a href="javascript:;" data-type="cart" class="j-edit-list pull-right c-blue font-size-12 edit-list">
+                  <!---->
+                  编辑
+                </a>
+              </div>
+              <!---->
+              <div>
+                <ul class="js-list block block-list block-list-cart border-0">
+                  <li class="block-item block-item-cart">
+                    <div>
+                      <div class="check-container"><span class="check checked"></span></div>
+                      <div class="name-card clearfix">
+                        <a href="https://h5.youzan.com/v2/showcase/goods?alias=2orhx1x0k6mpg" class="thumb js-goods-link"><img data-src="https://img.yzcdn.cn/upload_files/2017/07/03/FgvM-buQ1iwZoKjCv5J_K8_YMDlo.jpg!200x200.jpg" class="js-lazy" src="https://img.yzcdn.cn/upload_files/2017/07/03/FgvM-buQ1iwZoKjCv5J_K8_YMDlo.jpg?imageView2/2/w/200/h/200/q/75/format/webp">
+                          <!---->
+                        </a>
+                        <div class="detail"><a href="https://h5.youzan.com/v2/showcase/goods?alias=2orhx1x0k6mpg" class="js-goods-link"><h3 class="title js-ellipsis"><i>美翻了美爆了！值得ALL IN!炒鸡“温柔知性典雅温暖色”的8个色系！艺气息扑面而来！3CE MOOD RECIPE系列指甲油！</i></h3></a>
+                          <p class="sku ellipsis">
+                            BR05红棕色
+                          </p>
+                          <div class="num">
+                            ×<span class="num-txt">1</span>
+                            <!---->
+                          </div>
+                          <div class="price c-orange">
+                            ¥<span>12.99 </span></div>
+                        </div>
+                        <div class="error-box"></div>
+                      </div>
+                      <div class="delete-btn"><span>删除</span></div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="js-invalid-goods shop-list">
+            <p class="block invalid-list-title">
+              以下商品无法一起购买
+            </p>
+            <div class="block block-list-cart block-order border-top-0">
+              <ul class="block border-0 invalid-list js-invalid-list">
+                <li class="block-item block-item-cart error">
+                  <div index="0">
+                    <div class="check-container hide"><span class="check"></span></div>
+                    <div class="name-card clearfix">
+                      <a href="https://h5.youzan.com/v2/showcase/goods?alias=36co1k2m80lmu" class="thumb js-goods-link"><img data-src="https://img.yzcdn.cn/upload_files/2017/06/29/FstNOp77JZHQjZIDFd5LlZYE3j_j.jpg!200x200.jpg" class="js-lazy" src="https://img.yzcdn.cn/upload_files/2017/06/29/FstNOp77JZHQjZIDFd5LlZYE3j_j.jpg?imageView2/2/w/200/h/200/q/75/format/webp">
+                        <!---->
+                      </a>
+                      <div class="detail"><a href="https://h5.youzan.com/v2/showcase/goods?alias=36co1k2m80lmu" class="js-goods-link"><h3 class="title js-ellipsis"><i>国际安徒生奖大奖书系（文学作品系列第二辑 共8册） 国际安徒生奖获奖书系 是经过IBBY各国分会和丛书主编、著名儿童文学理论家方卫平教授层层筛选产生的经典佳作</i></h3></a>
+                        <p class="sku ellipsis">
+                          下周二发货
+                        </p>
+                        <div class="num">
+                          ×<span class="num-txt">1</span>
+                          <!---->
+                        </div>
+                        <!---->
+                      </div>
+                      <div class="error-box">商品已售罄</div>
+                    </div>
+                    <div class="delete-btn"><span>删除</span></div>
+                  </div>
+                </li>
+              </ul>
+              <div class="center clear-block">
+                <button class="btn clear-btn js-clear">清空失效商品</button>
+              </div>
+            </div>
+          </div>
+          <div style="padding:0;" class="js-bottom-opts bottom-fix">
+            <div class="go-shop-tip js-go-shop-tip c-orange font-size-12">
+              你需要分开结算每个店铺的商品哦~
+            </div>
+            <div class="bottom-cart clear-fix">
+              <div class="select-all"><span class="check checked"></span> 全选
+              </div>
+              <!-- 显示状态 -->
+              <div class="total-price" style="display: none;">
+                合计：¥<span class="js-total-price" style="color: rgb(255, 102, 0);">684.99</span>
+                <p class="c-gray-dark">不含运费</p>
+              </div>
+              <button href="javascript:;" class="js-go-pay btn btn-orange-dark font-size-14" style="display: none;">
+                结算 (3)
+              </button>
+              <!-- 编辑状态 -->
+              <button href="javascript:;" disabled="disabled" class="j-delete-goods btn font-size-14 btn-red" >删除
+                    </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="footer" style="min-height: 86px;">
+    <div class="copyright">
+      <div class="ft-copyright " style="background-image: url(https://img.yzcdn.cn/upload_files/2016/11/15/147918630760182374.png);">
+        <a class="yz-logo" href="https://www.youzan.com/?from_source=support_logo">有赞提供技术支持</a> </div>
+    </div>
+  </div>
 </body>
-</html>
\ No newline at end of file
+
+</html>
diff --git a/src/pages/cart/cart.js b/src/pages/cart/cart.js
index e69de29..1bd406b 100644
--- a/src/pages/cart/cart.js
+++ b/src/pages/cart/cart.js
@@ -0,0 +1,3 @@
+import './cart_base.css'
+import './cart_trade.css'
+import './cart.css'
\ No newline at end of file
diff --git a/src/pages/cart/cart_base.css b/src/pages/cart/cart_base.css
new file mode 100644
index 0000000..ce0f4dd
--- /dev/null
+++ b/src/pages/cart/cart_base.css
@@ -0,0 +1,1161 @@
+* {
+  -webkit-tap-highlight-color: transparent
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline
+}
+
+html {
+  line-height: 1
+}
+
+ol,
+ul {
+  list-style: none
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0
+}
+
+caption,
+th,
+td {
+  font-weight: normal;
+  vertical-align: middle
+}
+
+q,
+blockquote {
+  quotes: none
+}
+
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: "";
+  content: none
+}
+
+a img {
+  border: none
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+  display: block
+}
+
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  font-family: Arial, Helvetica, "STHeiti STXihei", "Microsoft YaHei", Tohoma
+}
+
+body {
+  color: #333;
+  background-color: #f8f8f8;
+  -webkit-backface-visibility: hidden
+}
+
+body.body-fixed-bottom {
+  padding-bottom: 50px
+}
+
+.container {
+  background-color: #f8f8f8
+}
+
+strong {
+  font-weight: bold
+}
+
+a {
+  color: #333;
+  background: transparent;
+  text-decoration: none
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0
+}
+
+h2 {
+  font-size: 18px;
+  line-height: 22px
+}
+
+h3 {
+  font-size: 15px;
+  line-height: 18px
+}
+
+button,
+[type='number'],
+[type='text'],
+[type='password'],
+[type='email'],
+[type='search'],
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  margin: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none
+}
+
+div,
+span,
+li,
+dt,
+dd {
+  cursor: pointer
+}
+
+.c-orange {
+  color: #f60 !important
+}
+
+.c-orange-dark {
+  color: #f15a0c !important
+}
+
+.c-green {
+  color: #06bf04 !important
+}
+
+.c-wx-green {
+  color: #4b0 !important
+}
+
+.c-red {
+  color: #ed5050 !important
+}
+
+.c-pink {
+  color: #ee614b !important
+}
+
+.c-white {
+  color: #fff !important
+}
+
+.c-gray-light {
+  color: #e5e5e5 !important
+}
+
+.c-gray {
+  color: #c9c9c9 !important
+}
+
+.c-gray-dark {
+  color: #999 !important
+}
+
+.c-gray-darker {
+  color: #666 !important
+}
+
+.c-black {
+  color: #333 !important
+}
+
+.c-yellow {
+  color: #f09000 !important
+}
+
+.c-light-yellow {
+  color: #fcff00 !important
+}
+
+.c-blue {
+  color: #38f !important
+}
+
+hr {
+  margin: 10px 0;
+  border: 0;
+  -webkit-border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  -moz-border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  hr {
+    border-top-width: 1px
+  }
+}
+
+hr.margin-0 {
+  margin: 0
+}
+
+hr.left-10 {
+  margin-left: 10px
+}
+
+.relative {
+  position: relative
+}
+
+.font-size-12 {
+  font-size: 12px !important
+}
+
+.font-size-14 {
+  font-size: 14px !important
+}
+
+.font-size-16 {
+  font-size: 16px !important
+}
+
+.font-size-18 {
+  font-size: 18px !important
+}
+
+.font-size-20 {
+  font-size: 20px !important
+}
+
+.font-size-22 {
+  font-size: 22px !important
+}
+
+.font-size-24 {
+  font-size: 24px !important
+}
+
+.font-size-26 {
+  font-size: 26px !important
+}
+
+.font-size-28 {
+  font-size: 28px !important
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.border-bottom-none {
+  border-bottom: 0 !important
+}
+
+.border-top-none {
+  border-top: 0 !important
+}
+
+.link {
+  color: #07d
+}
+
+.link:link,
+.link:hover,
+.link:visited,
+.link:active {
+  color: #07d
+}
+
+.clearfix {
+  zoom: 1
+}
+
+.clearfix:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.pull-left {
+  float: left
+}
+
+.pull-right {
+  float: right
+}
+
+.show {
+  display: block
+}
+
+.hide {
+  display: none !important;
+  visibility: hidden
+}
+
+.center,
+.text-center {
+  text-align: center
+}
+
+.text-left {
+  text-align: left
+}
+
+.text-right {
+  text-align: right
+}
+
+.loading {
+  background-image: url("/v2/image/loader.gif") !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+  background-size: 16px 16px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .loading {
+    background-image: url("/v2/image/loader@2x.gif") !important
+  }
+}
+
+.with-bs-top,
+.with-bs-bottom {
+  background: url("/v2/image/wap/bottom_line.png") left top no-repeat;
+  background-size: 100% 1px
+}
+
+.with-bs-bottom {
+  background-position: left bottom
+}
+
+.arrow-right::after {
+  content: '';
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-top: 2px solid #cbc9cc;
+  border-right: 2px solid #cbc9cc;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: 50%;
+  right: 3px;
+  margin-top: -5px
+}
+
+.wrapper {
+  width: 320px;
+  margin: 0 auto
+}
+
+.content {
+  margin: 0 auto
+}
+
+.container .content {
+  zoom: 1
+}
+
+.container .content:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.copyright {
+  background-color: #f8f8f8;
+  color: #999;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center
+}
+
+.copyright .ft-links {
+  padding: 15px
+}
+
+.copyright .ft-links>a {
+  margin: 0 6px;
+  color: #333
+}
+
+.copyright .ft-links ~ .ft-copyright {
+  -webkit-border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  -moz-border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .copyright .ft-links ~ .ft-copyright {
+    border-top-width: 1px
+  }
+}
+
+.copyright .ft-copyright {
+  padding: 50px 0 20px;
+  margin: 0 15px;
+  font-size: 12px;
+  background: url("/v2/image/wap/common/logo_v3@2x.png") no-repeat center 15px;
+  background-size: 110px 30px
+}
+
+.copyright .ft-copyright>a {
+  padding-top: 45px;
+  color: #ccc
+}
+
+.copyright .ft-copyright .yz-logo {
+  padding-left: 14px;
+  position: relative
+}
+
+.copyright .ft-copyright .yz-logo::before {
+  content: '';
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAkCAMAAACpD3pbAAAAb1BMVEUAAADLy8vKysrLy8vLy8vLy8vLy8vLy8vMzMzOzs7Ly8vLy8vMzMzQ0NDLy8vLy8vLy8vLy8vLy8vMzMzOzs7Pz8/S0tLLy8vKysrLy8vKysrLy8vLy8vLy8vMzMzNzc3Nzc3R0dHLy8vMzMzKysrwyZpuAAAAJHRSTlMAoqm+ZfvtjEA4z65xCebgxJmGUjMdGPPm2tW0p5OQSSkQdl8nEAN1AAAAwUlEQVQ4y6XQyRaDIAyF4bQgivNsnbXN+z9jj7CoUsLGf/udLHLhWj2kTAJZj4jeRmmDRxPFgeKQYq54oHhWzCjOFUeEJp3iguAaVSXBseaYYKb5Y9fdO18nm2yNr3XCX6JQHPPyM4do9jIWpTkxjo39fIMuAyWlRfW8TbXCA21lIJlAfMDTygIyRJpzQBe/3SzdXLu5usNe6+QRnOzf4sDFKQc7i7yI1wbgj1M286CFX57mKRt9LncwW7o+KgMg+gJYeFH82wegJQAAAABJRU5ErkJggg==) no-repeat;
+  background-size: 10px 12px;
+  width: 10px;
+  height: 12px;
+  position: absolute;
+  bottom: 1px;
+  left: 0
+}
+
+.copyright .pf-copyright {
+  display: block;
+  background: url("/v2/image/pf/ui/copyright.png") no-repeat center 20px;
+  background-size: 73px 24px
+}
+
+.footer {
+  margin: 0;
+  padding: 0;
+  min-height: 1px;
+  text-align: center;
+  line-height: 16px;
+  background-color: #f8f8f8
+}
+
+.footer .link-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-bottom: -3px;
+  margin-right: 10px;
+  background-image: url("data:image/png;base64,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");
+  background-repeat: no-repeat;
+  background-size: 16px
+}
+
+.footer .link-title {
+  font-size: 16px
+}
+
+.full-screen .footer {
+  margin-top: 0
+}
+
+.btn {
+  display: inline-block;
+  border-radius: 3px;
+  padding: 5px 4px;
+  text-align: center;
+  margin: 0;
+  font-size: 12px;
+  cursor: pointer;
+  line-height: 1.5;
+  -webkit-appearance: none;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+  color: #999
+}
+
+.btn-disabled,
+.btn[disabled] {
+  background-color: #c9c9c9 !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  color: #fff !important
+}
+
+.btn-disabled:active,
+.btn[disabled]:active {
+  background-color: #c9c9c9 !important;
+  background-image: none !important;
+  border: 1px solid #bcbcbc !important
+}
+
+.btn-default {
+  color: #999;
+  background-color: #fff;
+  border: 1px solid #e5e5e5
+}
+
+.btn-action-secondary {
+  color: #fff;
+  background-color: #f85;
+  border-color: #f85
+}
+
+.btn-action-primary {
+  color: #fff;
+  background-color: #f44;
+  border-color: #f44
+}
+
+.btn-blue {
+  color: #fff;
+  background-color: #38f;
+  border-color: #38f
+}
+
+.btn-gray-dark {
+  color: #333;
+  background-color: #999;
+  border-color: #999
+}
+
+.btn-green {
+  color: #fff;
+  background-color: #06bf04;
+  border-color: #03b401
+}
+
+.btn-wx-green {
+  color: #fff;
+  background-color: #4b0;
+  border-color: #4b0
+}
+
+.btn-red {
+  color: #fff;
+  background-color: #ed5050;
+  border-color: #ed5050
+}
+
+.btn-pink {
+  color: #fff;
+  background-color: #ee614b;
+  border-color: #ee614b
+}
+
+.btn-white {
+  color: #333;
+  background-color: #fff;
+  border-color: #e5e5e5
+}
+
+.btn-yellow {
+  color: #fff;
+  background-color: #f09000;
+  border-color: #f09000
+}
+
+.btn-grayeee {
+  color: #999;
+  background-color: #eee;
+  border-color: 1px solid #ebebeb
+}
+
+.btn-orange {
+  color: #fff;
+  border-color: #f60;
+  background-color: #f60
+}
+
+.btn-orange-dark {
+  color: #fff;
+  border-color: #f15a0c;
+  background-color: #f15a0c
+}
+
+.btn-block {
+  text-align: center;
+  width: 100%;
+  padding: 11px 10px;
+  font-size: 16px;
+  line-height: 16px;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-xsmall {
+  padding: 8px 10px;
+  line-height: 14px;
+  width: auto;
+  font-size: 12px
+}
+
+.btn-xxsmall {
+  padding: 4px 10px;
+  line-height: 14px;
+  width: auto;
+  font-size: 12px
+}
+
+.btn-l {
+  padding: 9px 4px;
+  font-size: 14px
+}
+
+.btn-opt {
+  min-width: 50px
+}
+
+.motify {
+  display: none;
+  position: fixed;
+  top: 35%;
+  left: 50%;
+  width: 220px;
+  padding: 0;
+  margin: 0 0 0 -110px;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.5em;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
+}
+
+.motify .motify-inner {
+  padding: 10px;
+  text-align: center;
+  word-wrap: break-word
+}
+
+.motify p {
+  margin: 0 0 5px
+}
+
+.motify p:last-of-type {
+  margin-bottom: 0
+}
+
+.fullscreen-guide {
+  z-index: 2000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  text-align: center
+}
+
+.fullscreen-guide.hide {
+  display: none
+}
+
+.fullscreen-guide .guide-close {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  font-size: 40px;
+  color: #fff;
+  cursor: pointer
+}
+
+.fullscreen-guide .guide-arrow {
+  position: absolute;
+  top: 2px;
+  right: 15px;
+  background: url("/v2/image/wap/guide_arrow.png") top left no-repeat;
+  width: 47px;
+  height: 44px
+}
+
+.fullscreen-guide .guide-inner {
+  padding-top: 48px;
+  width: 320px;
+  margin: 0 auto
+}
+
+.fullscreen-guide .step {
+  width: 260px;
+  display: inline-block;
+  text-align: left;
+  margin-bottom: 15px
+}
+
+.follow-guide .guide-inner-title {
+  color: #fff;
+  border-bottom: 1px solid #666;
+  padding-bottom: 20px;
+  font-size: 18px;
+  font-weight: normal
+}
+
+.follow-guide .wxid {
+  display: inline-block;
+  text-align: left;
+  margin-bottom: 20px;
+  font-size: 18px
+}
+
+.follow-guide .wxid .hasno-mp-weixin {
+  width: 200px;
+  height: 200px;
+  margin-top: 20px;
+  background: url("/v2/image/wap/cannot_follow@2x.png") no-repeat;
+  background-size: cover
+}
+
+.follow-guide .wxid strong {
+  padding: 1px 5px;
+  background-color: #fff;
+  color: #000;
+  border-radius: 4px
+}
+
+.follow-guide .guide-text {
+  color: #fff;
+  font-size: 16px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #666
+}
+
+.follow-guide .guide-text-title {
+  color: #fff;
+  margin: 15px 0;
+  font-size: 20px
+}
+
+.follow-guide .guide-text-step {
+  text-align: left;
+  padding-left: 56px;
+  color: #fff;
+  margin-bottom: 10px;
+  font-size: 16px
+}
+
+.follow-guide .step-1,
+.follow-guide .step-2,
+.follow-guide .step-3 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none
+}
+
+.follow-guide .step-1 {
+  height: 29px
+}
+
+.follow-guide .step-2 {
+  margin-bottom: 10px;
+  height: 64px;
+  background: url("/v2/image/wap/step_2.png") no-repeat
+}
+
+.follow-guide .step-3 {
+  margin-top: 10px;
+  height: 68px;
+  background: url("/v2/image/wap/step_3.png") no-repeat
+}
+
+.follow-guide .quick-subscribe {
+  margin: 140px 15px 0;
+  padding: 10px;
+  background: #fff;
+  border: 2px solid #f2f2f2;
+  border-radius: 10px
+}
+
+.follow-guide .quick-subscribe h2 {
+  font-size: 14px;
+  border-bottom: 1px solid #f2f2f2;
+  padding-bottom: 20px;
+  margin: 12px 0
+}
+
+.follow-guide .quick-subscribe .btn {
+  font-size: 14px;
+  background: #4b0;
+  color: #fff;
+  display: inline-block;
+  line-height: 38px;
+  padding: 0 26px;
+  border-radius: 4px
+}
+
+.fuck-taobao .step-1 {
+  height: 29px;
+  background: url("/v2/image/wap/step_1.png") no-repeat
+}
+
+.fuck-taobao .step-2 {
+  height: 86px;
+  background: url("/v2/image/wap/ftios_step_2.png") no-repeat
+}
+
+.fuck-taobao .step-and-2 {
+  height: 62px;
+  background: url("/v2/image/wap/ftand_step_2.png") no-repeat
+}
+
+.fav-guide .step-1 {
+  height: 29px;
+  background: url("/v2/image/wap/step_1.png") no-repeat
+}
+
+.fav-guide .step-2 {
+  height: 86px;
+  background: url("/v2/image/wap/fav_step_2.png") no-repeat
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (-o-min-device-pixel-ratio: 3 / 2),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .fullscreen-guide .guide-arrow {
+    background-image: url("/v2/image/wap/guide_arrow@2x.png");
+    background-size: 47px 44px
+  }
+  .follow-guide .step-2 {
+    background-image: url("/v2/image/wap/step_2@2x.png");
+    background-size: 260px 64px
+  }
+  .follow-guide .step-3 {
+    background-image: url("/v2/image/wap/step_3@2x.png");
+    background-size: 260px 68px
+  }
+  .fuck-taobao .step-1 {
+    background-image: url("/v2/image/wap/step_1@2x.png");
+    background-size: 260px 29px
+  }
+  .fuck-taobao .step-2 {
+    background-image: url("/v2/image/wap/ftios_step_2@2x.png");
+    background-size: 248px 86px
+  }
+  .fuck-taobao .step-and-2 {
+    background-image: url("/v2/image/wap/ftand_step_2@2x.png");
+    background-size: 260px 62px
+  }
+  .fav-guide .step-1 {
+    background-image: url("/v2/image/wap/step_1@2x.png");
+    background-size: 260px 29px
+  }
+  .fav-guide .step-2 {
+    background-image: url("/v2/image/wap/fav_step_2@2x.png");
+    background-size: 260px 86px
+  }
+  .share-guide .step-1 {
+    background-image: url("/v2/image/wap/step_1@2x.png");
+    background-size: 260px 29px
+  }
+  .share-guide .step-2 {
+    background-image: url("/v2/image/wap/share_step_2@2x.png");
+    background-size: 260px 86px
+  }
+}
+
+a#global-cart {
+  z-index: 10
+}
+
+a#global-cart .icon-img {
+  background: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png") no-repeat;
+  background-position: -202px -4px;
+  background-size: 300px 150px
+}
+
+a#global-cart.hide {
+  display: none
+}
+
+a#global-cart.new .icon-img {
+  background-position: -250px -4px
+}
+
+.no-text a#global-cart {
+  background: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png") no-repeat;
+  background-size: 300px 150px
+}
+
+.no-text a#global-cart.s0 {
+  background-position: -200px -100px
+}
+
+.no-text a#global-cart.s1 {
+  background-position: -150px -100px
+}
+
+.no-text a#global-cart.s2 {
+  background-position: -100px -100px
+}
+
+.no-text a#global-cart.s3 {
+  background-position: -50px -100px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  a#global-cart .icon-img {
+    background-position: -200px -7px;
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png")
+  }
+  a#global-cart.new .icon-img {
+    background-position: -250px -7px
+  }
+  .no-text a#global-cart {
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png")
+  }
+}
+
+.fixed-icon {
+  height: 50px;
+  width: 50px;
+  border-radius: 26px;
+  position: fixed;
+  bottom: 52px;
+  right: 6px;
+  z-index: 70;
+  cursor: pointer
+}
+
+.ds-btn {
+  bottom: 115px
+}
+
+.ds-btn .icon-img {
+  height: 100%;
+  background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_e4444b6200.png");
+  background-repeat: no-repeat;
+  background-size: 300px 150px;
+  background-position: -250px -100px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .ds-btn .icon-img {
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_6b9819545.png")
+  }
+}
+
+a#global-wish {
+  z-index: 10;
+  display: block
+}
+
+a#global-wish .icon-img {
+  background: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png") no-repeat;
+  background-position: -2px -4px;
+  background-size: 300px 150px
+}
+
+a#global-wish.hide {
+  display: none
+}
+
+a#global-wish.new .icon-img {
+  background-position: -45px -7px
+}
+
+.no-text a#global-wish {
+  background: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png");
+  background-position: -150px -50px;
+  background-size: 300px 150px
+}
+
+.no-text a#global-wish.new {
+  background-position: -200px -50px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  a#global-wish .icon-img {
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png");
+    background-position: 3px -7px
+  }
+  .no-text a#global-wish {
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png")
+  }
+}
+
+#right-icon {
+  height: 50px;
+  width: 50px;
+  border-radius: 26px;
+  border: 1px solid #e1e1e1;
+  position: fixed;
+  bottom: 52px;
+  right: 6px;
+  z-index: 30;
+  overflow: hidden;
+  -webkit-transition: width ease-in-out .3s;
+  -moz-transition: width ease-in-out .3s;
+  transition: width ease-in-out .3s;
+  background-color: white;
+  background-clip: padding-box
+}
+
+#right-icon .right-icon-container {
+  position: absolute;
+  height: 50px;
+  right: 0px;
+  top: 0px
+}
+
+#right-icon .icon {
+  float: left;
+  width: 50px;
+  height: 50px
+}
+
+#right-icon .show-more-btn {
+  background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png");
+  background-repeat: no-repeat;
+  background-size: 300px 150px;
+  background-position: 1px -50px
+}
+
+#right-icon .show-more-btn.new {
+  background-position: -99px -50px
+}
+
+#right-icon .icon-img {
+  height: 32px
+}
+
+#right-icon .icon-txt {
+  line-height: 18px;
+  font-size: 12px;
+  text-align: center;
+  color: #9f9f9f
+}
+
+#right-icon.show {
+  padding-left: 12px
+}
+
+#right-icon.show .show-more-btn {
+  background-position: -49px -50px
+}
+
+#right-icon.no-text {
+  border: 0px none;
+  background-color: transparent
+}
+
+#right-icon.no-text .icon-txt,
+#right-icon.no-text .icon-img {
+  display: none
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  #right-icon .show-more-btn {
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png")
+  }
+}
diff --git a/src/pages/cart/cart_trade.css b/src/pages/cart/cart_trade.css
new file mode 100644
index 0000000..903e474
--- /dev/null
+++ b/src/pages/cart/cart_trade.css
@@ -0,0 +1,4381 @@
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.action-tip {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 15px;
+  margin: 10px 0;
+  color: #999
+}
+
+.empty-list {
+  font-size: 14px;
+  display: block;
+  text-align: center;
+  padding: 30px 10px;
+  color: #999
+}
+
+.empty-list h4 {
+  font-size: 16px;
+  margin-bottom: 10px;
+  color: #666
+}
+
+.empty-list div {
+  margin-bottom: 20px
+}
+
+.empty-list .empty-list-header,
+.empty-list .empty-list-content {
+  margin-bottom: 0
+}
+
+.empty-list .empty-list-content {
+  margin-top: 20px
+}
+
+.empty-list .empty-list-content .home-page {
+  padding: 8px 30px
+}
+
+.progress-bar {
+  height: 15px;
+  width: 100%;
+  background-color: #efeff4;
+  border-radius: 7px
+}
+
+.progress-bar span {
+  display: inline-block;
+  height: 100%;
+  border-radius: 7px;
+  background-color: rgba(6, 191, 4, 0.6);
+  -webkit-transition: width .4s ease-in-out;
+  -moz-transition: width .4s ease-in-out;
+  transition: width .4s ease-in-out
+}
+
+.shine span {
+  position: relative
+}
+
+.shine span::after {
+  content: '';
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #fff;
+  border-radius: 7px;
+  -webkit-animation: animate-shine 2s ease-out infinite;
+  -moz-animation: animate-shine 2s ease-out infinite;
+  animation: animate-shine 2s ease-out infinite
+}
+
+@-webkit-keyframes animate-shine {
+  0% {
+    opacity: 0;
+    width: 0
+  }
+  50% {
+    opacity: .5
+  }
+  100% {
+    opacity: 0;
+    width: 95%
+  }
+}
+
+@-moz-keyframes animate-shine {
+  0% {
+    opacity: 0;
+    width: 0
+  }
+  50% {
+    opacity: .5
+  }
+  100% {
+    opacity: 0;
+    width: 95%
+  }
+}
+
+@keyframes animate-shine {
+  0% {
+    opacity: 0;
+    width: 0
+  }
+  50% {
+    opacity: .5
+  }
+  100% {
+    opacity: 0;
+    width: 95%
+  }
+}
+
+textarea.txt,
+input.txt {
+  border: 1px solid #e5e5e5;
+  padding: 5px;
+  resize: none;
+  border-radius: 4px
+}
+
+textarea.txt:focus,
+input.txt:focus {
+  outline: none !important
+}
+
+textarea.txt.txt-nb,
+input.txt.txt-nb {
+  border: 0px none
+}
+
+textarea.txt.txt-nb:focus,
+input.txt.txt-nb:focus {
+  border-color: #eee
+}
+
+textarea.txt.txt-black,
+textarea.txt input.txt.txt-black,
+input.txt.txt-black,
+input.txt input.txt.txt-black {
+  color: #444
+}
+
+.block-item {
+  position: relative;
+  display: block;
+  padding: 10px;
+  line-height: 1.5;
+  border: 0;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  overflow: hidden
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .block-item {
+    border-top-width: 1px
+  }
+}
+
+.block-item .btn-auth-code {
+  position: absolute;
+  top: 6px;
+  right: 0;
+  height: 30px;
+  line-height: 30px;
+  padding-left: 7px;
+  padding-right: 7px;
+  font-weight: bold
+}
+
+.block-item .verify-image {
+  position: absolute;
+  width: 80px;
+  height: 30px;
+  right: 10px;
+  top: 7px
+}
+
+.block-item.border-none {
+  border-top: 0
+}
+
+.block-item ul {
+  padding-right: 50px
+}
+
+.block-item ul em {
+  color: #999
+}
+
+.block-item h4.block-item-title {
+  line-height: 22px;
+  float: left;
+  margin-right: 10px
+}
+
+.block {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  border-bottom: 2px solid #e5e5e5;
+  overflow: hidden;
+  margin: 10px 0;
+  background-color: #fff;
+  display: block;
+  position: relative;
+  font-size: 14px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .block {
+    border-top-width: 1px;
+    border-bottom-width: 1px
+  }
+}
+
+.block.top-0 {
+  margin-top: 0
+}
+
+.block.bottom-0 {
+  margin-bottom: 0
+}
+
+.block.border-top-0 {
+  border-top: 0
+}
+
+.block.border-bottom-0 {
+  border-bottom: 0
+}
+
+.block.border-0 {
+  border-top: 0;
+  border-bottom: 0
+}
+
+.block:first-child {
+  margin-top: 0
+}
+
+.block .bottom {
+  padding: 10px;
+  height: 18px;
+  line-height: 18px
+}
+
+.block .bottom .price {
+  float: right;
+  color: #f60
+}
+
+.block p {
+  overflow: hidden
+}
+
+.block.block-order .header {
+  height: 37px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 10px;
+  padding-left: 10px;
+  line-height: 37px
+}
+
+.block.block-order .header span {
+  font-size: 12px
+}
+
+.block.block-order .header a.disable {
+  color: #999
+}
+
+.block.block-order .bottom {
+  padding: 10px;
+  padding-left: 10px;
+  height: 16px;
+  font-size: 14px;
+  line-height: 16px
+}
+
+.block.block-order:last-of-type {
+  margin-bottom: 0
+}
+
+.block.block-list {
+  margin: 0;
+  padding: 0;
+  padding-left: 10px;
+  list-style: none;
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.block.block-list.margin-top-normal {
+  margin-top: 20px
+}
+
+.block-list.wf {
+  padding-left: 0
+}
+
+.block-list.wf .b-list {
+  padding-left: 10px;
+  background-color: #fff
+}
+
+.block-list>.block-item {
+  padding: 10px 10px 10px 0
+}
+
+.block-list>.block-item:first-child {
+  border-top: 0px none
+}
+
+.block.block-list+.block.block-list {
+  margin-top: 12px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (-o-min-device-pixel-ratio: 3 / 2),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .block.block-list li span.clear {
+    background: url("/v2/image/wap/icon_clear@2x.png") center center no-repeat;
+    background-size: 100%
+  }
+}
+
+.form {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  padding-left: 10px;
+  padding-right: 10px;
+  list-style: none;
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.form.mg-top-20 {
+  margin-top: 20px
+}
+
+.form.mg-bottom-20 {
+  margin-bottom: 20px
+}
+
+.form .block-item.no-top-border {
+  border-top-width: 0px
+}
+
+.form>.block-item:first-child {
+  border-top: 0px none
+}
+
+.form .block-item {
+  display: table;
+  width: 100%;
+  padding: 0
+}
+
+.form .block-item label {
+  display: table-cell;
+  width: 90px;
+  line-height: 28px;
+  padding: 10px 0
+}
+
+.form .block-item textarea,
+.form .block-item input,
+.form .block-item select,
+.form .block-item a,
+.form .block-item span {
+  display: table-cell;
+  overflow: hidden;
+  padding: 10px 0;
+  min-height: 28px;
+  line-height: 28px;
+  font-size: 14px
+}
+
+.form .block-item textarea,
+.form .block-item input,
+.form .block-item select {
+  width: 99%;
+  background-color: #fff;
+  border: 0px none;
+  outline: none
+}
+
+.form .block-item textarea {
+  height: 50px;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  resize: none
+}
+
+.form .block-item:last-child {
+  border-bottom: 0px none
+}
+
+@-webkit-keyframes loader {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@-moz-keyframes loader {
+  from {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes loader {
+  from {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+.loader-container {
+  position: relative;
+  width: 200px;
+  height: 100px;
+  border-radius: 8px;
+  background-color: #fff
+}
+
+.loader-container .loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -29px;
+  margin-left: -24px;
+  height: 17px;
+  padding-top: 41px;
+  text-align: center;
+  color: #888;
+  z-index: 1000
+}
+
+.loader-container .loader::before,
+.loader-container .loader::after {
+  position: absolute;
+  content: '';
+  top: 0%;
+  left: 50%;
+  margin-left: -12px;
+  width: 24px;
+  height: 24px;
+  border-radius: 100%
+}
+
+.loader-container .loader::after {
+  border-width: 3px;
+  border-style: solid;
+  border-color: #d9d9d9 #d9d9d9 #d9d9d9 transparent;
+  -webkit-box-shadow: 0px 0px 0px 1px transparent;
+  box-shadow: 0px 0px 0px 1px transparent;
+  -webkit-animation: loader 0.8s linear;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation: loader 0.8s linear;
+  animation: loader 0.8s linear;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite
+}
+
+.tag {
+  display: inline-block;
+  background-color: transparent;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  text-align: center;
+  margin: 0;
+  color: #999;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 4px
+}
+
+.tag-big {
+  font-size: 14px;
+  line-height: 18px
+}
+
+.tag.tag-green {
+  color: #06bf04;
+  border-color: #0c3
+}
+
+.tag.tag-orange {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-orangef60 {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-white {
+  color: #333;
+  border-color: #bbb
+}
+
+.tag.tag-blue {
+  color: #38f;
+  border-color: #38f
+}
+
+.tag.tag-red {
+  color: #ed5050;
+  border-color: #ed5050
+}
+
+.tag.tag-pink {
+  color: #ee614b;
+  border-color: #ee614b
+}
+
+.tag.disabled {
+  background-color: #ddd !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  color: #fff !important
+}
+
+.ui.overview {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -moz-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  text-align: center;
+  padding: 10px 0
+}
+
+.ui.overview .item {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 10px;
+  position: relative;
+  width: 100%;
+  float: left;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-right: 2px solid #e5e5e5
+}
+
+.ui.overview .item .value {
+  font-size: 16px;
+  line-height: 20px
+}
+
+.ui.overview .item .value span:first-child {
+  font-weight: 100
+}
+
+.ui.overview .item .value .corner {
+  vertical-align: top;
+  font-size: 12px;
+  display: inline-block;
+  margin-top: -4px
+}
+
+.ui.overview .item .label {
+  font-size: 12px;
+  line-height: 20px;
+  color: #000
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .ui.overview .item {
+    border-right-width: 1px
+  }
+}
+
+.ui.overview .item:last-child {
+  border: none
+}
+
+.ui.overview.one .item {
+  width: 100%
+}
+
+.ui.overview.two .item {
+  width: 50%
+}
+
+.ui.overview.three .item {
+  width: 33.33333%
+}
+
+.ui.overview.four .item {
+  width: 25%
+}
+
+.ui.overview.five .item {
+  width: 20%
+}
+
+.ui.overview.border {
+  border: 1px solid #eee
+}
+
+.ui.overview.border-bottom {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .ui.overview.border-bottom {
+    border-bottom-width: 1px
+  }
+}
+
+.ui.overview.red {
+  border-color: #ed5050
+}
+
+div.important-message {
+  position: relative;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding: 10px 10px 5px;
+  line-height: 1.4em;
+  font-size: 12px
+}
+
+div.important-message h3 {
+  font-size: 14px;
+  zoom: 1
+}
+
+div.important-message h3:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+div.important-message p {
+  margin-top: 4px;
+  line-height: 1.2
+}
+
+div.important-message .mp-wx {
+  color: #f60;
+  text-decoration: underline
+}
+
+div.important-message .btn-reload {
+  border: 1px solid white;
+  padding: 0 5px;
+  border-radius: 2px;
+  font-size: 12px
+}
+
+div.important-message-confirm {
+  padding: 15px 10px 15px 35px;
+  background-color: #7b859b;
+  font-size: 12px;
+  color: white
+}
+
+div.important-message-confirm::before {
+  content: '';
+  position: absolute;
+  top: 16px;
+  left: 9px;
+  width: 20px;
+  height: 20px;
+  background-image: url("/v2/image/wap/address/order.png");
+  background-size: 20px 20px
+}
+
+div.important-message-order {
+  padding: 0
+}
+
+div.important-message-order .message-status {
+  position: relative;
+  padding: 0px 10px 0px 10px;
+  margin-bottom: 13px;
+  height: 40px;
+  margin: 15px 0
+}
+
+div.important-message-order .message-status:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  width: 40px;
+  height: 40px;
+  background-image: url("/v2/image/wap/trade/result/order_status/icon_totuan2@2x.png");
+  background-size: 40px 40px
+}
+
+div.important-message-order .status-text {
+  position: absolute;
+  padding-left: 50px;
+  top: 50%;
+  -webkit-transform: translate3d(0, -50%, 0);
+  -moz-transform: translate3d(0, -50%, 0);
+  transform: translate3d(0, -50%, 0)
+}
+
+div.important-message-order p {
+  color: #b1b1b1
+}
+
+div.important-message-order .order-state-topay:before {
+  background-image: url("/v2/image/wap/trade/result/order_status/icon_topay2@2x.png")
+}
+
+div.important-message-order .order-state-paid:before {
+  background-image: url("/v2/image/wap/trade/result/order_status/icon_yifukuan2@2x.png")
+}
+
+div.important-message-order .order-state-send:before {
+  background-image: url("/v2/image/wap/trade/result/order_status/icon_send2@2x.png")
+}
+
+div.important-message-order .order-state-closed:before,
+div.important-message-order .order-state-cancel:before {
+  background-image: url("/v2/image/wap/trade/result/order_status/icon_close2@2x.png")
+}
+
+div.important-message-order .order-state-success:before {
+  background-image: url("/v2/image/wap/trade/result/order_status/icon_success2@2x.png")
+}
+
+div.important-message-order .order-state-totuan:before {
+  background-image: url("/v2/image/wap/trade/result/order_status/icon_totuan2@2x.png")
+}
+
+div.important-message-comment {
+  padding: 10px 10px 10px 35px;
+  background-color: #fef2da;
+  border-top: 1px solid #ffd685;
+  border-bottom: 1px solid #ffd685;
+  position: relative
+}
+
+div.important-message-comment:before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: 9px;
+  width: 17px;
+  height: 21px;
+  background-image: url("/v2/image/trade/comment_flag.png");
+  background-size: 17px 21px
+}
+
+div.important-message-comment h3 {
+  color: #ff7148;
+  margin-bottom: 0
+}
+
+.append-message {
+  margin: 0;
+  padding: 5px 10px;
+  background-color: #fff;
+  line-height: 20px;
+  font-size: 12px
+}
+
+.append-message span {
+  color: #999
+}
+
+.complain {
+  position: relative;
+  display: block;
+  padding: 10px 20px 10px 36px !important;
+  line-height: 18px
+}
+
+.complain p.title {
+  color: #f51919
+}
+
+.complain:after {
+  content: '';
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-top: 2px solid #cbc9cc;
+  border-right: 2px solid #cbc9cc;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  right: 10px;
+  top: 18px
+}
+
+.complain:before {
+  content: '';
+  position: absolute;
+  top: 11px;
+  left: 11px;
+  width: 15px;
+  height: 17px;
+  background: url("/v2/image/wap/trade/ling.png") no-repeat;
+  background-size: 15px 17px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .complain:before {
+    background-image: url("/v2/image/wap/trade/ling@2x.png")
+  }
+}
+
+.express-list-container {
+  margin-top: 12px
+}
+
+.address-list .block {
+  border-bottom: 0px none
+}
+
+.express .logistics-tips {
+  border-top: 1px solid #fbeed5;
+  border-bottom: 1px solid #fbeed5;
+  background-color: #fcf8e3;
+  line-height: 30px;
+  padding-left: 10px
+}
+
+.tabber-ios-green.tabber.tabber-ios {
+  border: 1px solid #06bf04;
+  margin: 0 10px
+}
+
+.tabber-ios-green.tabber.tabber-ios a {
+  color: #06bf04;
+  border-right: 1px solid #06bf04
+}
+
+.tabber-ios-green.tabber.tabber-ios a.active {
+  color: #fff;
+  background-color: #06bf04
+}
+
+#confirm-pay-way-opts .butn.butn-block {
+  margin-bottom: 20px;
+  -webkit-tap-highlight-color: transparent
+}
+
+.confirm-pay-way-opts-popup.active {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0)
+}
+
+.order-message.block-item {
+  padding: 10px 10px 10px 0;
+  line-height: 22px
+}
+
+.order-message span {
+  float: left;
+  color: #333;
+  width: 75px
+}
+
+.order-message .message-content {
+  color: #666
+}
+
+.order-message .input-wrapper {
+  padding-left: 75px
+}
+
+.order-message textarea,
+.order-message input {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 99%;
+  height: 22px;
+  line-height: 22px;
+  padding: 0;
+  color: #666;
+  border: 0;
+  -webkit-transition: height 0.3s ease-in-out;
+  -moz-transition: height 0.3s ease-in-out;
+  transition: height 0.3s ease-in-out;
+  resize: none;
+  outline: none
+}
+
+.order-message textarea.two-rows,
+.order-message input.two-rows {
+  height: 48px
+}
+
+.order-message textarea.error,
+.order-message input.error {
+  border-color: #ed5050
+}
+
+.order-message textarea {
+  vertical-align: top
+}
+
+.order-message input {
+  height: 22px
+}
+
+.order-message textarea:disabled,
+.order-message input:disabled {
+  background-color: #fff !important;
+  border: 0 !important
+}
+
+.review {
+  height: 30px;
+  padding: 5px 10px
+}
+
+.self-fetch-title {
+  float: left;
+  width: 80px
+}
+
+.self-fetch-info {
+  margin-left: 80px;
+  display: block
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  div.important-message.important-message-order:before {
+    background-image: url("/v2/image/wap/address/order@2x.png")
+  }
+  div.important-message.important-message-comment:before {
+    background-image: url("/v2/image/trade/comment_flag@2x.png")
+  }
+  .express .block-item.arrow:after {
+    background-image: url("/v2/image/wap/address/right_arrow@2x.png")
+  }
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.bottom-fix {
+  display: block;
+  z-index: 100;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  padding: 6px 7px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-bbb.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-bbb.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-bbb.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  background-color: #fff;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 0
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .bottom-fix {
+    border-top-width: 1px
+  }
+}
+
+.bottom-fix .btn {
+  font-size: 14px
+}
+
+.tabber {
+  width: 100%;
+  color: #333;
+  font-size: 14px;
+  background-color: #fff;
+  overflow: visible;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .tabber {
+    border-top-width: 1px;
+    border-bottom-width: 1px
+  }
+}
+
+.tabber button,
+.tabber a {
+  float: left;
+  width: 50%;
+  line-height: 40px;
+  border: 0px none;
+  outline: 0px none;
+  background-color: #fff;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.tabber button:hover,
+.tabber a:hover {
+  text-decoration: none
+}
+
+.tabber button.active,
+.tabber a.active {
+  position: relative;
+  top: 1px;
+  line-height: 39px;
+  color: #22C415;
+  border-bottom: 1px solid #22C415
+}
+
+.tabber.tabber-top button.active,
+.tabber.tabber-top a.active {
+  top: 0;
+  margin-top: -1px;
+  border-top: 1px solid #22C415;
+  border-bottom: 0px none
+}
+
+.tabber.tabber-top button.first,
+.tabber.tabber-top a.first {
+  border-right: 1px solid #e5e5e5
+}
+
+.avatar {
+  display: inline-block;
+  width: 70px;
+  height: 70px;
+  margin: 0 auto;
+  position: relative
+}
+
+.avatar img {
+  display: block;
+  width: 70px;
+  height: 70px;
+  margin: 0 auto
+}
+
+.avatar p {
+  line-height: 50px;
+  font-size: 12px;
+  margin-top: 0;
+  margin-bottom: -1px
+}
+
+.avatar p>span {
+  padding: 5px 15px;
+  background-color: #809843;
+  border-radius: 13px;
+  color: #fff
+}
+
+.arrow_box {
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  position: relative
+}
+
+.arrow_box .empty-trigon,
+.arrow_box .empty-trigon:before {
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  position: absolute;
+  border-color: transparent;
+  border-right-color: #e5e5e5;
+  border-width: 11px
+}
+
+.arrow_box .empty-trigon:before {
+  border-color: transparent;
+  border-right-color: #fff;
+  border-width: 10px;
+  content: '';
+  left: -10px;
+  top: -10px;
+  left: -9px
+}
+
+.arrow_box .empty-trigon {
+  top: 5px;
+  right: 100%
+}
+
+.circular {
+  border-radius: 320px
+}
+
+.circular.nested {
+  position: relative
+}
+
+.circular.nested .circular {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto
+}
+
+div.peerpay-gift {
+  text-align: left
+}
+
+div.peerpay-gift h2 {
+  padding-top: 5px;
+  line-height: 18px;
+  font-size: 12px;
+  color: #999;
+  padding-left: 10px
+}
+
+div.peerpay-gift textarea {
+  color: #ccc;
+  width: 100%;
+  height: 60px
+}
+
+div.peerpay-gift div.invite-message {
+  padding: 0 22px 0 10px
+}
+
+div.peerpay-gift div.invite-message textarea {
+  height: 60px;
+  font-size: 14px
+}
+
+div.peerpay-gift .steps {
+  height: 70px;
+  padding-top: 15px
+}
+
+div.peerpay-gift .steps .step {
+  position: relative;
+  margin: 0 auto;
+  background: url("/v2/image/wap/peerpay_steps.png") no-repeat center center
+}
+
+div.peerpay-gift .steps .step-x {
+  position: relative;
+  height: 34px;
+  float: left
+}
+
+div.peerpay-gift .steps .step-3 {
+  width: 33.33%
+}
+
+div.peerpay-gift .steps .step-3-1 {
+  background-position: 0 0;
+  width: 34px;
+  height: 34px
+}
+
+div.peerpay-gift .steps .step-3-2 {
+  background-position: 0 -84px;
+  width: 34px;
+  height: 34px
+}
+
+div.peerpay-gift .steps .step-3-3 {
+  background-position: 0 -168px;
+  width: 34px;
+  height: 34px
+}
+
+div.peerpay-gift .steps .step-4 {
+  width: 24.9%
+}
+
+div.peerpay-gift .steps .step-4-1 {
+  background-position: 0 -252px;
+  width: 34px;
+  height: 34px
+}
+
+div.peerpay-gift .steps .step-4-2 {
+  background-position: 0 -336px;
+  width: 34px;
+  height: 34px
+}
+
+div.peerpay-gift .steps .step-4-3 {
+  background-position: 0 -420px;
+  width: 34px;
+  height: 34px
+}
+
+div.peerpay-gift .steps .step-4-4 {
+  background-position: 0 -504px;
+  width: 34px;
+  height: 34px
+}
+
+div.peerpay-gift .steps p {
+  font-size: 12px;
+  color: #999;
+  line-height: 25px
+}
+
+div.peerpay-gift .steps hr {
+  position: absolute;
+  margin: 0;
+  top: 15px;
+  width: 100%;
+  border: 0px none;
+  border-bottom: 2px solid #e4e4e4
+}
+
+.block-list.block-list-peerpay .block-item {
+  padding: 5px 0
+}
+
+.block.form .block-item span.price {
+  position: absolute;
+  left: -5px;
+  top: 2px
+}
+
+.block.form .block-item .price {
+  color: #f60;
+  font-size: 20px;
+  line-height: 20px
+}
+
+.block.form .block-item input.price::-webkit-input-placeholder {
+  font-size: 14px
+}
+
+.block.form .block-item input.price::-moz-placeholder {
+  font-size: 14px
+}
+
+.block.form .block-item input.price::-ms-input-placeholder {
+  font-size: 14px
+}
+
+.block.form .block-item input.price::-moz-placeholder {
+  font-size: 14px
+}
+
+.block.form .block-item input.date-time {
+  margin-left: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none
+}
+
+.block.form .block-item div.price-container {
+  width: auto;
+  overflow: hidden;
+  position: relative
+}
+
+.block.form .block-item div.price-container input {
+  z-index: 0;
+  margin-left: 15px;
+  margin-top: 4px;
+  padding-top: 5px;
+  width: 100%
+}
+
+.block.form .block-item div.clear-response-area {
+  position: absolute;
+  z-index: 2;
+  top: 1px;
+  right: 0px;
+  width: 70px;
+  height: 40px
+}
+
+.block.form .block-item .btn-clear {
+  position: absolute;
+  z-index: 1;
+  right: 10px;
+  top: 9px;
+  width: 40px;
+  line-height: 15px;
+  font-size: 12px
+}
+
+.name-card .detail.detail-peerpay p {
+  line-height: 13px
+}
+
+.peerpay.gift .steps {
+  padding-top: 25px;
+  margin-top: 0
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (-o-min-device-pixel-ratio: 3 / 2),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .peerpay-gift .steps .step {
+    background: url("/v2/image/wap/peerpay_steps@2x.png") no-repeat top left
+  }
+  .peerpay-gift .steps .step-3-1 {
+    background-position: 0 0;
+    background-size: cover
+  }
+  .peerpay-gift .steps .step-3-2 {
+    background-position: 0 -59px;
+    background-size: cover
+  }
+  .peerpay-gift .steps .step-3-3 {
+    background-position: 0 -118px;
+    background-size: cover
+  }
+  .peerpay-gift .steps .step-4-1 {
+    background-position: 0 -177px;
+    background-size: cover
+  }
+  .peerpay-gift .steps .step-4-2 {
+    background-position: 0 -236px;
+    background-size: cover
+  }
+  .peerpay-gift .steps .step-4-3 {
+    background-position: 0 -295px;
+    background-size: cover
+  }
+  .peerpay-gift .steps .step-4-4 {
+    background-position: 0 -354px;
+    background-size: cover
+  }
+}
+
+.message-container-link {
+  display: block
+}
+
+.peerpay-gift .message-container,
+.gift .message-container {
+  width: 100%;
+  position: relative;
+  height: 334px;
+  background-size: cover;
+  background-position: center top
+}
+
+.peerpay-gift .message-container div.message,
+.gift .message-container div.message {
+  height: 200px
+}
+
+.peerpay-gift .message-container div.message span,
+.gift .message-container div.message span {
+  font-size: 16px;
+  color: #fff;
+  width: 280px;
+  line-height: 28px;
+  display: inline-block;
+  vertical-align: middle
+}
+
+.peerpay-gift .message-container .avatar-peerpay .txt-status,
+.gift .message-container .avatar-peerpay .txt-status {
+  background: rgba(255, 255, 255, 0.3)
+}
+
+.peerpay-gift .message-container .bottom-arrow,
+.gift .message-container .bottom-arrow {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 7px;
+  background: url("/v2/image/wap/peerpay/block_gray.png") no-repeat center center;
+  background-size: auto 7px
+}
+
+@media (min-width: 415px) {
+  .peerpay-gift .message-container .bottom-arrow,
+  .gift .message-container .bottom-arrow {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 7px;
+    background: #f9f9f9
+  }
+}
+
+.peerpay-gift .progress {
+  margin-bottom: 0;
+  padding: 20px 10px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.peerpay-gift .progress .progress-txt {
+  line-height: 30px;
+  height: 30px;
+  font-size: 12px
+}
+
+.peerpay-gift .progress .progress-txt span {
+  color: #999
+}
+
+.peerpay-gift .progress .progress-txt span em {
+  color: #ed5050
+}
+
+.peerpay-gift .feed,
+.gift .feed {
+  padding: 0 10px 10px
+}
+
+.peerpay-gift .feed .record-item,
+.gift .feed .record-item {
+  width: 100%;
+  position: relative;
+  padding-bottom: 10px
+}
+
+.peerpay-gift .feed .record-item .left,
+.gift .feed .record-item .left {
+  width: 50px;
+  height: 100%;
+  position: relative;
+  margin-left: -10px
+}
+
+.peerpay-gift .feed .record-item .left .avatar,
+.gift .feed .record-item .left .avatar {
+  width: 35px;
+  height: 35px;
+  position: absolute;
+  top: 0;
+  left: 8px;
+  z-index: 0;
+  border: 0px none
+}
+
+.peerpay-gift .feed .record-item .left .avatar img,
+.gift .feed .record-item .left .avatar img {
+  width: 35px;
+  height: 35px;
+  background-color: #ddd
+}
+
+.peerpay-gift .feed .record-item .detail,
+.gift .feed .record-item .detail {
+  margin-left: 45px;
+  width: auto;
+  border-radius: 4px;
+  border: 1px solid #e5e5e5;
+  background-color: #fff;
+  padding: 5px
+}
+
+.peerpay-gift .feed .record-item .detail p,
+.gift .feed .record-item .detail p {
+  color: #333;
+  line-height: 18px
+}
+
+.peerpay-gift .feed .record-item .detail hr,
+.gift .feed .record-item .detail hr {
+  border: none;
+  border-top: 1px solid #eee;
+  margin: 4px 0
+}
+
+.peerpay-gift .feed .time-line,
+.gift .feed .time-line {
+  background-size: 1px 100%;
+  background-position: 15px 0;
+  background-repeat: repeat-y;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU4RkQyMTU1MDQ0QjExRTQ4QUM3RTVFREM0MkE3NjAzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU4RkQyMTU2MDQ0QjExRTQ4QUM3RTVFREM0MkE3NjAzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NThGRDIxNTMwNDRCMTFFNDhBQzdFNUVEQzQyQTc2MDMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NThGRDIxNTQwNDRCMTFFNDhBQzdFNUVEQzQyQTc2MDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz43M2/EAAAAF0lEQVR42mK8e/cuAxJgYkAFpPIBAgwAy+ICoV1NyDEAAAAASUVORK5CYII=)
+}
+
+.peerpay-gift .feed .time-line:first-child,
+.gift .feed .time-line:first-child {
+  height: 10px
+}
+
+.peerpay-gift .feed .time-line:last-child,
+.gift .feed .time-line:last-child {
+  background-size: 1px 20px
+}
+
+.wrapper {
+  width: 100%;
+  height: 200px;
+  margin: 0;
+  padding: 0;
+  display: table
+}
+
+.wrapper .outer-wrapper {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  margin: 0;
+  padding: 0
+}
+
+.wrapper .table-wrapper {
+  display: table;
+  vertical-align: middle;
+  text-align: center;
+  width: 100%;
+  height: 100%
+}
+
+.wrapper .table-cell-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+  width: 100%;
+  height: 100%
+}
+
+.avatar.avatar-peerpay {
+  width: 300px;
+  height: 120px
+}
+
+.gift-box {
+  border-radius: 4px;
+  background: white;
+  width: 260px;
+  padding: 20px 20px 12px 20px
+}
+
+.gift-box .title {
+  font-size: 16px;
+  margin-bottom: 10px
+}
+
+.gift-box .subtitle {
+  font-size: 12px
+}
+
+.gift-box .btn {
+  margin-bottom: 10px
+}
+
+.gift-box .btn:last-child {
+  margin-bottom: 0
+}
+
+.gift-box hr {
+  border: 0px none;
+  border-top: 1px solid #eee
+}
+
+.gift-success .gift-name {
+  height: 33px
+}
+
+.gift-success .gift-thanks {
+  height: 89px
+}
+
+.gift-success .txt {
+  margin-bottom: 10px;
+  width: 248px
+}
+
+.goods-order-list-container .list li .goods-detail .detail.gift-fetch h3 {
+  overflow: hidden;
+  max-height: 32px
+}
+
+.paid-time {
+  min-height: 90px;
+  text-align: left;
+  color: #333;
+  background: #fff url("/v2/image/wap/order/paid_watermark.png") right 8px no-repeat;
+  margin: 0;
+  padding: 0 5px
+}
+
+.paid-time .paid-time-inner p {
+  margin: 5px 0;
+  word-break: break-all
+}
+
+.qrcode-pic {
+  text-align: center
+}
+
+.qrcode-pic .pic-wrapper {
+  display: inline-block;
+  background: #fff
+}
+
+.qrcode-pic .pic-wrapper img {
+  display: block;
+  width: 100%;
+  padding-top: 15px
+}
+
+.qrcode-pic .pic-wrapper span {
+  display: inline-block;
+  padding: 5px 0 0;
+  font-size: 12px;
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: 100%
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .paid-time {
+    background-image: url("/v2/image/wap/order/paid_watermark@2x.png");
+    background-size: 130px 77px
+  }
+}
+
+.block-item.qrcode {
+  padding: 0
+}
+
+.goods-order-list-container {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.goods-order-list-container ol,
+.goods-order-list-container ul {
+  list-style: none;
+  margin: 0
+}
+
+.goods-order-list-container .header {
+  height: 37px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 10px;
+  padding-left: 10px;
+  line-height: 37px
+}
+
+.goods-order-list-container .header span {
+  font-size: 14px
+}
+
+.goods-order-list-container .header a {
+  float: right;
+  font-size: 13px;
+  margin-right: -10px;
+  padding-right: 10px;
+  line-height: 37px;
+  width: 50px;
+  text-align: right;
+  color: #0189e9
+}
+
+.goods-order-list-container .header a.disable {
+  color: #999
+}
+
+.goods-order-list-container .list {
+  padding-left: 10px;
+  display: block;
+  overflow: hidden
+}
+
+.goods-order-list-container .list li {
+  padding: 10px 0;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5;
+  position: relative
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .goods-order-list-container .list li {
+    border-bottom-width: 1px
+  }
+}
+
+.goods-order-list-container .list li:last-child {
+  border: 0px none
+}
+
+.goods-order-list-container .list {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .goods-order-list-container .list {
+    border-top-width: 1px
+  }
+}
+
+.goods-order-list-container .list li .goods-detail {
+  padding-right: 10px
+}
+
+.goods-order-list-container .list li .goods-detail .thumb {
+  width: 66px;
+  height: 66px;
+  -webkit-border-image: url("/v2/image/border-line-c9c9c9-inner.png") 2 stretch;
+  -moz-border-image: url("/v2/image/border-line-c9c9c9-inner.png") 2 stretch;
+  border-image: url("/v2/image/border-line-c9c9c9-inner.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  border-right: 2px solid #e5e5e5;
+  border-bottom: 2px solid #e5e5e5;
+  border-left: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .goods-order-list-container .list li .goods-detail .thumb {
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px
+  }
+}
+
+.goods-order-list-container .list li .goods-detail .detail {
+  margin-left: 75px;
+  position: relative;
+  padding-right: 73px
+}
+
+.goods-order-list-container .list li .goods-detail .detail p {
+  color: #333
+}
+
+.goods-order-list-container .list li .goods-detail .detail p.c-gray {
+  color: #999
+}
+
+.goods-order-list-container .list li .goods-detail .detail p.c-orange {
+  color: #f60
+}
+
+.goods-order-list-container .list li .goods-detail .detail p.pull-bottom {
+  position: absolute;
+  bottom: -10px
+}
+
+.goods-order-list-container .list li .goods-detail .detail.no-price {
+  padding-right: 0
+}
+
+.block.goods-order-list-container .list .goods-detail {
+  margin-left: 0
+}
+
+.block.goods-order-list-container .list .goods-detail img {
+  margin: 0 5px 0 0
+}
+
+.block.goods-order-list-container .list .price-num div.price {
+  color: #555
+}
+
+.block.goods-order-list-container .bottom {
+  padding: 10px;
+  padding-left: 10px;
+  height: 16px;
+  font-size: 14px;
+  line-height: 16px
+}
+
+.block.goods-order-list-container .bottom span {
+  float: right;
+  color: #f60
+}
+
+.goods-list-present-title {
+  width: 18px;
+  height: 36px;
+  position: absolute;
+  top: 0px;
+  left: 3px;
+  background: url("/v2/image/wap/trade/confirm/present@2x.png") no-repeat;
+  background-size: 18px 36px
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.popout-box .header {
+  position: relative;
+  margin-bottom: 10px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .popout-box .header {
+    border-bottom-width: 1px
+  }
+}
+
+.popout-box .header h2 {
+  margin-bottom: 16px;
+  line-height: 16px;
+  font-size: 16px
+}
+
+.popout-box .action-container {
+  margin: 10px 0 0 0;
+  padding: 0
+}
+
+.popout-box .action-container .btn.btn-block {
+  font-size: 14px
+}
+
+.pay-popout {
+  position: relative
+}
+
+.pay-popout .header {
+  padding: 0 0 10px;
+  line-height: 1.4
+}
+
+.pay-popout .content {
+  line-height: 1.4;
+  padding: 5px 20px 10px
+}
+
+.pay-popout .password-content {
+  padding: 0
+}
+
+.pay-popout .password {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  height: 48px;
+  margin-top: 10px;
+  padding: 10px;
+  padding-right: 40px;
+  border: 1px solid #e5e5e5;
+  font-size: 14px
+}
+
+.pay-popout .clear-input {
+  position: absolute;
+  top: 17px;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  padding: 10px;
+  background-image: url("/v2/image/wap/clear_input@2x.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  -webkit-user-select: none
+}
+
+.pay-popout .close {
+  position: absolute;
+  right: 3px;
+  top: 0;
+  height: 20px;
+  width: 20px;
+  margin: 12px;
+  background-image: url("/v2/image/wap/showcase-1416814739063.png");
+  background-position: 0 -90px;
+  background-repeat: no-repeat
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .pay-popout .close {
+    background-image: url("/v2/image/wap/showcase2x-1416814739063.png");
+    background-position: 0 -81px;
+    background-size: 30px auto
+  }
+}
+
+.pay-popout .tips {
+  padding-top: 5px
+}
+
+.btn-pay-loading {
+  position: relative;
+  color: transparent !important
+}
+
+.btn-pay-loading:link,
+.btn-pay-loading:visited,
+.btn-pay-loading:focus,
+.btn-pay-loading:hover,
+.btn-pay-loading:active {
+  color: transparent !important
+}
+
+.btn-pay-loading::before,
+.btn-pay-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin-left: -8px;
+  margin-top: -8px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-pay-loading::after {
+  border-color: #666666 transparent transparent transparent;
+  -webkit-animation: zent-btn-spin 0.6s linear;
+  -moz-animation: zent-btn-spin 0.6s linear;
+  animation: zent-btn-spin 0.6s linear;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite
+}
+
+@-webkit-keyframes zent-btn-spin {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0)
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@-moz-keyframes zent-btn-spin {
+  0% {
+    -moz-transform: rotate(0);
+    transform: rotate(0)
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes zent-btn-spin {
+  0% {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    transform: rotate(0)
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+.search-form {
+  position: relative;
+  padding: 7px 10px 7px 10px;
+  background-color: #efefef
+}
+
+.search-form .search-input {
+  width: 100%;
+  height: 30px;
+  padding-left: 30px;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  outline-width: 0px;
+  font-size: 14px
+}
+
+.search-form .search-input:focus {
+  -webkit-appearance: none
+}
+
+.search-form .search-cancel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 55px;
+  text-align: center;
+  line-height: 44px;
+  font-size: 16px;
+  color: #666
+}
+
+.search-form .search-icon {
+  position: absolute;
+  top: 6px;
+  left: 12px;
+  width: 30px;
+  height: 30px
+}
+
+.search-form .search-icon::before,
+.search-form .search-icon::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%
+}
+
+.search-form .search-icon::before {
+  margin-top: -7px;
+  margin-left: -8px;
+  width: 10px;
+  height: 10px;
+  border: 1px solid #a3a3a3;
+  background: transparent;
+  border-radius: 12px
+}
+
+.search-form .search-icon::after {
+  margin-top: 2px;
+  margin-left: 3px;
+  width: 2px;
+  height: 7px;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  background-color: #a3a3a3
+}
+
+.search-form .close-icon {
+  position: absolute;
+  top: 2px;
+  right: 55px;
+  height: 40px;
+  width: 40px;
+  border-radius: 100px;
+  background: #a3a3a3;
+  -webkit-transform: scale(0.42);
+  -moz-transform: scale(0.42);
+  -ms-transform: scale(0.42);
+  transform: scale(0.42);
+  -webkit-tap-highlight-color: transparent
+}
+
+.search-form .close-icon::before,
+.search-form .close-icon::after {
+  content: '';
+  height: 6px;
+  width: 28px;
+  display: block;
+  background: #fff;
+  border-radius: 10px;
+  position: absolute;
+  top: 17px;
+  left: 6px;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg)
+}
+
+.search-form .close-icon::after {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg)
+}
+
+.search-bar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  overflow: hidden;
+  background-color: #fff
+}
+
+.search-bar .search-form {
+  padding-right: 55px
+}
+
+.search-bar .history-list {
+  padding: 10px
+}
+
+.search-bar .history-list li {
+  float: left;
+  border: 1px solid #ddd;
+  padding: 5px;
+  margin: 0 10px 10px 0;
+  color: #666;
+  border-radius: 3px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 18px
+}
+
+.search-bar .search-recom-list li {
+  float: left;
+  width: 50%;
+  padding-bottom: 5px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-bottom: 1px solid #ddd;
+  text-align: left;
+  border-radius: 0;
+  font-size: 14px;
+  line-height: 30px
+}
+
+.search-bar .search-recom-list li p {
+  padding: 5px;
+  white-space: nowrap;
+  word-break: keep-all;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.search-bar .search-recom-list li p b {
+  font-weight: bold
+}
+
+.search-bar .tag.tag-clear {
+  width: 145px;
+  height: 40px;
+  margin-top: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  border: 1px solid #666;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.tabber {
+  width: 100%;
+  color: #333;
+  font-size: 14px;
+  background-color: #fff;
+  overflow: visible;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .tabber {
+    border-top-width: 1px;
+    border-bottom-width: 1px
+  }
+}
+
+.tabber button,
+.tabber a {
+  float: left;
+  width: 50%;
+  line-height: 40px;
+  border: 0px none;
+  outline: 0px none;
+  background-color: #fff;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.tabber button:hover,
+.tabber a:hover {
+  text-decoration: none
+}
+
+.tabber button.active,
+.tabber a.active {
+  position: relative;
+  top: 1px;
+  line-height: 39px;
+  color: #22C415;
+  border-bottom: 1px solid #22C415
+}
+
+.tabber.tabber-ios {
+  border: 1px solid #f60;
+  border-radius: 3px;
+  margin: 0 10px;
+  width: auto;
+  overflow: hidden
+}
+
+.tabber.tabber-ios a {
+  color: #f60;
+  line-height: 2;
+  border: 0px none;
+  background-color: transparent;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border-right: 1px solid #f60
+}
+
+.tabber.tabber-ios a:last-child {
+  border: none !important
+}
+
+.tabber.tabber-ios a.active {
+  line-height: 2;
+  top: 0;
+  color: #fff;
+  border: 0px none;
+  background-color: #f60
+}
+
+.tabber-ios-gray.tabber.tabber-ios {
+  border: 1px solid #c9c9c9
+}
+
+.tabber-ios-gray.tabber.tabber-ios a {
+  color: #333;
+  border-right: 1px solid #c9c9c9
+}
+
+.tabber-ios-gray.tabber.tabber-ios a.active {
+  color: #fff;
+  background-color: #c9c9c9
+}
+
+.tabber-ios-blue.tabber.tabber-ios {
+  border: 1px solid #33a8f5
+}
+
+.tabber-ios-blue.tabber.tabber-ios a {
+  color: #33a8f5;
+  border-right: 1px solid #33a8f5
+}
+
+.tabber-ios-blue.tabber.tabber-ios a.active {
+  color: #fff;
+  background-color: #33a8f5
+}
+
+.tabber-ios-coffee.tabber.tabber-ios {
+  border: 1px solid #c4a797
+}
+
+.tabber-ios-coffee.tabber.tabber-ios a {
+  color: #c4a797;
+  border-right: 1px solid #c4a797
+}
+
+.tabber-ios-coffee.tabber.tabber-ios a.active {
+  color: #fff;
+  background-color: #c4a797
+}
+
+.icon-circle-info {
+  display: inline-block;
+  width: 24px;
+  height: 26px;
+  background-image: url("/v2/image/wap/address/edit_address@2x.png");
+  background-repeat: no-repeat;
+  background-size: 24px 26px;
+  background-position: center
+}
+
+.icon-add {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background-image: url("/v2/image/wap/address/add_address@2x.png");
+  background-repeat: no-repeat;
+  background-size: 22px 22px;
+  background-position: center
+}
+
+.icon-arrow-right {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  line-height: 22px;
+  border-top: 2px solid #999;
+  border-right: 2px solid #999;
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg)
+}
+
+.cancel-img {
+  position: absolute;
+  right: 3px;
+  top: 4px;
+  padding: 10px;
+  height: 22px;
+  width: 22px;
+  background-image: url("/v2/image/wap/address/close@2x.png");
+  background-repeat: no-repeat;
+  background-size: 22px 22px;
+  background-position: center
+}
+
+.icon-check {
+  position: absolute;
+  left: 0px;
+  top: 50%;
+  margin-top: -12px;
+  width: 22px;
+  height: 22px;
+  background-image: url("/v2/image/wap/base/select@2x.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 22px 22px
+}
+
+.icon-check.icon-checked {
+  background-image: url("/v2/image/wap/base/selected@2x.png")
+}
+
+.icon-check.icon-disabled {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAPFBMVEUAAADm5ubm5ubw8PDl5eXm5ubm5ubm5ubl5eX////m5ubm5ubm5ubm5ubm5ubx8fHm5ubs7Ozr6+vo6Oget5BzAAAAD3RSTlMAwrwQ2ZBcUTsD89aiofKT6USAAAAAzUlEQVQ4y4TPSQ6EMAwFUWeGAEqZ3P+uTasHIohCrZ9kf2lzcTM+Z2+26KRfsjTZ1CGTAapqOVKtgJkuZA6AliYFwtwaZ2Evl3awrjELlE6w/NVsoXQD+7sYTnNX4bvrND312Wjan+/fm7dJUAZBOpBFR0ixIg7KMHASqWNUibKiY6SsYp6REU95CC/5GeVXI2WMAwAAATEPwP+fazCIqd0lxF0bzUOt1rnDi4dKPVPFYgKWVeHS+foyCIyUhpMxZ2F49XiJnQ5zdZhfhwMW+js1+yywMAAAAABJRU5ErkJggg==")
+}
+
+.icon-upgrade-address {
+  display: block;
+  width: 22px;
+  height: 22px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAUVBMVEUAAABKwQBFvABEvABHvABEvABFuwBGuwBEvwBIvgBVvwBFvABGvABFuwBEvABEvABEvABEuwBFvABEvQBFvABEuwBFvQBLvABEvABOxABEuwAUsSvvAAAAGnRSTlMAFdTyQtutgDgpDI5s6efDv6WZg31aVSL2DVfs2yEAAAFbSURBVDjLfNLdksIgDIZhaqAUsP+tOu/9X+gu4+xWE2sOepA+k8kHOF3dOk9BJEzz2rmv5ZeBlxoWf0q7EQhl9ynn5PcSgPHz+HsL/ZZeW2nrob1b6wWJWXdzFMTscoW2cR+qaeH63ioQz6JEKO9zHzd3WrfH62wPyioN/v8cRO9gN5G/M2lpdaojqyId0ih7ueiO8LydkagtaB0Zn+n6bKzRuadmXNi0rZO13lh+vwNJ2wYarRNDjReMdeCMDnRupRhbsdGF1c3sxlZs9M7sJryxFRvtmVwgGVux0YnghHy8vfrrwFUf7y0jP52VqREAMAzD5uj+izZGAgK+c7FAk/g5+KHUsMCh0eY7ON/gAfP4RgYsMANmdQVmdTlKgTlKzl1gzi0hCUZIkqhhJIr4DUv82EqwbIVhBduw+LzAIIQMsENG8QWs+NqCsUfuHua9JvYC6tW2l2av4w+OnR9lOh4o9gAAAABJRU5ErkJggg==");
+  background-repeat: no-repeat;
+  background-size: 22px 22px
+}
+
+.address-fm .address-fm-title {
+  text-align: center;
+  padding: 15px 0;
+  font-size: 16px;
+  line-height: 20px
+}
+
+.address-fm .block-item {
+  margin-left: 10px;
+  padding-left: 0
+}
+
+.address-fm .block-item.no-top-border {
+  border-top-width: 0
+}
+
+.address-fm .block-item .address-detail {
+  height: auto;
+  min-height: 28px;
+  max-height: 80px;
+  overflow-x: hidden;
+  overflow-y: scroll
+}
+
+.address-fm input,
+.address-fm textarea,
+.address-fm select,
+.address-fm button,
+.address-fm label {
+  vertical-align: top;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
+}
+
+.address-fm .area-layout {
+  overflow: hidden
+}
+
+.address-fm .area-layout span {
+  float: left;
+  width: 31%
+}
+
+.address-fm .area-layout span select {
+  padding: 0
+}
+
+.address-fm .upgrade-info {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  padding: 12px 10px;
+  line-height: 18px;
+  background-color: #fff6e1
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .address-fm .upgrade-info {
+    border-top-width: 1px
+  }
+}
+
+.address-fm .address-province,
+.address-fm .address-city,
+.address-fm .address-county,
+.address-fm .community-info {
+  color: #333
+}
+
+.address-list .address-title {
+  padding: 17px 0;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5;
+  font-size: 16px;
+  text-align: center
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .address-list .address-title {
+    border-bottom-width: 1px
+  }
+}
+
+.address-list .icon-add {
+  position: absolute;
+  left: 0px;
+  top: 13px
+}
+
+.address-list .icon-arrow-right {
+  float: right;
+  margin-right: 10px;
+  margin-top: 3px
+}
+
+.address-list .address-container {
+  max-height: 290px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch
+}
+
+.address-list .block-item {
+  padding: 15px 30px;
+  font-size: 14px
+}
+
+.address-list .block-item:first-child {
+  border-top: 0
+}
+
+.address-list .block-item p {
+  margin-bottom: 8px;
+  line-height: 1em
+}
+
+.address-list .address-str {
+  max-width: 100%;
+  padding-right: 10px;
+  color: #999;
+  line-height: 16px;
+  display: block;
+  font-size: 12px
+}
+
+.address-list .address-opt {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -26px;
+  padding: 10px;
+  padding-right: 15px;
+  z-index: 5
+}
+
+.address-list .add-address {
+  position: relative;
+  padding: 15px;
+  padding-left: 30px;
+  margin: 0;
+  margin-left: 10px;
+  line-height: 20px;
+  font-size: 14px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .address-list .add-address {
+    border-top-width: 1px
+  }
+}
+
+.address-list .upgrade-address {
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  color: #4b0
+}
+
+.no-user-select {
+  -webkit-user-select: none
+}
+
+.express .logistics {
+  padding: 10px 0
+}
+
+.express .tabber {
+  font-size: 12px
+}
+
+.express .tabber-ios-gray-darker {
+  border: 1px solid #666
+}
+
+.express .tabber-ios-gray-darker a {
+  color: #666;
+  border-right: 1px solid #666
+}
+
+.express .tabber-ios-gray-darker a.active {
+  color: #fff;
+  background-color: #666
+}
+
+.express .self-fetch-tip {
+  line-height: 1.5;
+  margin: 10px;
+  margin-left: 0
+}
+
+.express .logistics-content {
+  padding-bottom: 4px
+}
+
+.express-panel {
+  padding: 15px 10px;
+  background-color: #fff;
+  line-height: 22px;
+  min-height: 22px;
+  position: relative
+}
+
+.express-panel .express-detail {
+  margin: 0 0 0 25px
+}
+
+.express-panel .address-detail {
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #666
+}
+
+.express-panel .name,
+.express-panel .tel {
+  font-size: 14px;
+  color: #333
+}
+
+.express-panel .name {
+  float: left;
+  width: 160px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.express-panel .tel {
+  float: right
+}
+
+.express-panel::before {
+  content: '';
+  position: absolute;
+  top: 18px;
+  left: 10px;
+  width: 18px;
+  height: 18px;
+  background-image: url("/v2/image/wap/address/site2@2x.png");
+  background-size: 18px 18px
+}
+
+.express-panel.express-panel-edit .express-detail {
+  margin-right: 18px
+}
+
+.express-panel.express-panel-edit::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  width: 6px;
+  height: 11px;
+  margin-top: -5px;
+  background-image: url("/v2/image/wap/trade/arrow@2x.png");
+  background-size: 6px 11px
+}
+
+.selffetch-panel .block-item .address-detail {
+  line-height: 22px;
+  padding-right: 10px
+}
+
+.selffetch-panel .address-name {
+  margin-right: 5px
+}
+
+.selffetch-panel .block-item.arrow:after {
+  content: "";
+  position: absolute;
+  width: 6px;
+  height: 11px;
+  top: 50%;
+  right: 0;
+  -webkit-transform: translate3d(0, -50%, 0);
+  -moz-transform: translate3d(0, -50%, 0);
+  transform: translate3d(0, -50%, 0);
+  background-image: url("/v2/image/wap/trade/arrow@2x.png");
+  background-size: 6px 11px
+}
+
+.empty-address-tip {
+  position: relative;
+  padding: 16px 10px 16px 60px;
+  line-height: 40px;
+  background-color: #fff;
+  font-size: 14px;
+  color: #333;
+  background: url("/v2/image/wap/address/add@2x.png") no-repeat;
+  background-size: 40px 40px;
+  background-position: 10px center
+}
+
+.empty-address-tip::after {
+  content: '';
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-top: 2px solid #cbc9cc;
+  border-right: 2px solid #cbc9cc;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: 0;
+  bottom: 0;
+  right: 15px;
+  margin: auto
+}
+
+.address-header {
+  line-height: 36px;
+  font-size: 14px;
+  color: #c9c9c9;
+  padding: 5px 10px
+}
+
+.city-btn {
+  padding-right: 20px;
+  color: #c9c9c9;
+  position: relative
+}
+
+.city-btn::before {
+  content: '';
+  position: absolute;
+  top: 5px;
+  right: 0;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-top-color: #c9c9c9
+}
+
+.search-btn {
+  float: right;
+  padding: 35px 5px 0;
+  width: 15px;
+  height: 0;
+  overflow: hidden;
+  background: url("/v2/image/wap/icons/search@2x.png") no-repeat;
+  background-position: right center;
+  background-size: 15px 15px
+}
+
+.popup .header {
+  padding: 10px 0;
+  position: relative;
+  line-height: 30px;
+  font-size: 16px;
+  text-align: center;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .popup .header {
+    border-bottom-width: 1px
+  }
+}
+
+.popup .close {
+  position: absolute;
+  right: 3px;
+  top: 4px;
+  padding: 10px;
+  height: 22px;
+  width: 22px;
+  background-image: url("/v2/image/wap/address/close@2x.png");
+  background-repeat: no-repeat;
+  background-size: 22px 22px;
+  background-position: center
+}
+
+.name-card {
+  margin-left: 0px;
+  width: auto;
+  padding: 5px 0;
+  overflow: hidden;
+  position: relative
+}
+
+.name-card .thumb {
+  width: 60px;
+  height: 60px;
+  float: left;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+  background-size: cover
+}
+
+.name-card .thumb img {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%
+}
+
+.name-card a:hover,
+.name-card a:active {
+  text-decoration: none
+}
+
+.name-card .detail {
+  margin-left: 68px;
+  width: auto;
+  position: relative
+}
+
+.name-card .detail h3 {
+  margin-top: 1px;
+  color: #333;
+  font-size: 12px;
+  line-height: 16px;
+  width: 100%
+}
+
+.name-card .detail p {
+  position: relative;
+  font-size: 12px;
+  line-height: 16px;
+  white-space: nowrap;
+  margin: 0 0 2px;
+  color: #ccc
+}
+
+.name-card .detail a {
+  display: block
+}
+
+.name-card .detail .l2-ellipsis {
+  max-height: 34px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical
+}
+
+.name-card .btn-goods-link {
+  bottom: 8px;
+  right: 10px;
+  position: absolute;
+  line-height: 14px;
+  font-size: 12px
+}
+
+.name-card.name-card-3col {
+  padding: 8px 0;
+  padding-right: 85px
+}
+
+.name-card.name-card-3col .right-col {
+  position: absolute;
+  right: 0px;
+  top: 8px;
+  width: 78px;
+  padding-right: 10px;
+  font-size: 12px
+}
+
+.name-card.name-card-3col .right-col .price {
+  font-size: 14px;
+  color: #515151;
+  text-align: right;
+  line-height: 16px
+}
+
+.name-card.name-card-3col .right-col .num {
+  font-weight: 200;
+  text-align: right;
+  margin-top: 3px;
+  padding: 0;
+  color: #555
+}
+
+.name-card.name-card-3col .right-col .num .num-txt {
+  padding: 0;
+  line-height: 22px;
+  color: #515151
+}
+
+.name-card.name-card-3col .right-col .order-state {
+  font-size: 13px;
+  text-align: right
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.popout-box .header {
+  position: relative;
+  margin-bottom: 10px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .popout-box .header {
+    border-bottom-width: 1px
+  }
+}
+
+.popout-box .header h2 {
+  margin-bottom: 16px;
+  line-height: 16px;
+  font-size: 16px
+}
+
+.popout-box .action-container {
+  margin: 10px 0 0 0;
+  padding: 0
+}
+
+.popout-box .action-container .btn.btn-block {
+  font-size: 14px
+}
+
+.tag {
+  display: inline-block;
+  background-color: transparent;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  text-align: center;
+  margin: 0;
+  color: #999;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 4px
+}
+
+.tag-big {
+  font-size: 14px;
+  line-height: 18px
+}
+
+.tag.tag-green {
+  color: #06bf04;
+  border-color: #0c3
+}
+
+.tag.tag-orange {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-orangef60 {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-white {
+  color: #333;
+  border-color: #bbb
+}
+
+.tag.tag-blue {
+  color: #38f;
+  border-color: #38f
+}
+
+.tag.tag-red {
+  color: #ed5050;
+  border-color: #ed5050
+}
+
+.tag.tag-pink {
+  color: #ee614b;
+  border-color: #ee614b
+}
+
+.tag.disabled {
+  background-color: #ddd !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  color: #fff !important
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.wrapper-form .form-item {
+  position: relative;
+  margin-top: 10px
+}
+
+.wrapper-form .form-item label {
+  position: absolute;
+  top: 1px;
+  left: 10px;
+  line-height: 45px;
+  z-index: 1;
+  color: #666
+}
+
+.wrapper-form .form-item textarea,
+.wrapper-form .form-item input {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  line-height: 18px;
+  padding: 12px 10px 12px 68px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 14px;
+  outline: none;
+  opacity: 1;
+  -webkit-appearance: none
+}
+
+.wrapper-form .form-item input[disabled='disabled'] {
+  background: #f8f8f8
+}
+
+.wrapper-form .form-item:first-child {
+  margin-top: 0
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.popout-box .header {
+  position: relative;
+  margin-bottom: 10px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .popout-box .header {
+    border-bottom-width: 1px
+  }
+}
+
+.popout-box .header h2 {
+  margin-bottom: 16px;
+  line-height: 16px;
+  font-size: 16px
+}
+
+.popout-box .action-container {
+  margin: 10px 0 0 0;
+  padding: 0
+}
+
+.popout-box .action-container .btn.btn-block {
+  font-size: 14px
+}
+
+.popout-login .wrapper-form {
+  padding-top: 10px
+}
+
+.popout-login .wrapper-form .verify-image {
+  position: absolute;
+  right: 0px;
+  top: 7px;
+  width: 80px;
+  height: 30px
+}
+
+.popout-login .wrapper-form .btn-auth-code {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 80px;
+  padding: 15px 4px;
+  border-radius: 5px
+}
+
+.popout-login .wrapper-form .txt-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0
+}
+
+.popout-login .wrapper-form .txt-cover-half {
+  right: 90px
+}
+
+.popout-login .wrapper-form .error {
+  margin-top: 10px;
+  word-break: break-word
+}
+
+.popout-login .bottom-tips {
+  padding-top: 16px;
+  font-size: 0
+}
+
+.popout-login .bottom-tips .inline-item {
+  padding: 0 10px;
+  border-right: 1px solid #e5e5e5;
+  font-size: 12px
+}
+
+.popout-login .bottom-tips .inline-item:last-child {
+  padding-right: 0px;
+  border-right: 0px none
+}
+
+.time-picker-container {
+  margin-top: 10px
+}
+
+.time-picker h3 {
+  background-color: #c9c9c9;
+  line-height: 25px;
+  color: #fff;
+  text-align: center
+}
+
+.time-picker .time-picker-items {
+  overflow: hidden;
+  padding: 5px
+}
+
+.time-picker .time-picker-items li {
+  float: left;
+  width: 22%;
+  margin: 5px 1.5%
+}
+
+.time-picker .time-picker-items a {
+  display: block;
+  font-size: 12px;
+  line-height: 48px;
+  text-align: center;
+  border: 1px solid #e0e0e0;
+  background-color: #fff
+}
+
+.time-picker .time-picker-items a.time-disable {
+  background-color: #ededed;
+  color: #c9c9c9
+}
+
+.time-picker .time-picker-items a.time-active {
+  border-color: #f60;
+  color: #f60
+}
+
+.date-picker-header {
+  background-color: #fff;
+  padding: 10px 0;
+  border-bottom: 1px solid #c9c9c9
+}
+
+.date-picker-header li {
+  float: left;
+  width: 21%;
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: center;
+  color: #c9c9c9
+}
+
+.date-picker-header li .date-disable {
+  color: #d2d2d2
+}
+
+.date-picker-header li:first-child a {
+  color: #f60
+}
+
+.date-picker-header li.more-date-li {
+  width: 16%
+}
+
+.date-picker-header li span {
+  display: block
+}
+
+.date-picker-header .date-header-item {
+  display: block;
+  border-right: 1px solid #c9c9c9
+}
+
+.date-picker-header .calendar-icon {
+  display: inline-block;
+  width: 20px;
+  height: 15px;
+  background-image: url("/v2/image/wap/trade/calendar.png");
+  background-size: 20px 15px
+}
+
+.date-picker-calendar {
+  background-color: #fff;
+  text-align: center;
+  border: 1px solid #e5e5e5;
+  border-bottom: 0
+}
+
+.date-picker-calendar td {
+  width: 45px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.date-picker-calendar .calendar-header {
+  line-height: 45px
+}
+
+.date-picker-calendar .calendar-header-title {
+  font-weight: bold
+}
+
+.date-picker-calendar .calendar-prev,
+.date-picker-calendar .calendar-next {
+  cursor: pointer;
+  color: #e5e5e5
+}
+
+.date-picker-calendar .calendar-weeks-title {
+  line-height: 22px;
+  border-bottom: 1px solid #e5e5e5
+}
+
+.date-picker-calendar .calendar-body tr {
+  border-bottom: 1px solid #e5e5e5
+}
+
+.date-picker-calendar .calendar-body td {
+  line-height: 45px
+}
+
+.date-picker-calendar .disable {
+  color: #999;
+  background-color: #e5e5e5
+}
+
+.date-picker-calendar .curr {
+  color: #f60;
+  border: 1px solid #f60
+}
+
+.date-picker-calendar .today {
+  background-color: #f60;
+  color: #fff
+}
+
+.date-picker-calendar .calendar-hide {
+  visibility: hidden
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .date-picker-header .calendar-icon {
+    background-image: url("/v2/image/wap/trade/calendar@2x.png")
+  }
+}
+
+.half-day-picker-container {
+  margin-top: 40px;
+  height: 100%
+}
+
+.half-day {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 5px;
+  padding-bottom: 40px
+}
+
+.half-day .half-day-row .time-disable {
+  background-color: #ededed;
+  color: #c9c9c9
+}
+
+.half-day .half-day-row .time-active {
+  border: 1px solid #3283fa;
+  background-color: #3283fa;
+  color: #fff
+}
+
+.half-day-row {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 0
+}
+
+.half-day-row .info {
+  display: inline-block;
+  width: 26%;
+  font-size: 10px;
+  line-height: 40px;
+  text-align: center;
+  height: 40px
+}
+
+.half-day-row .slot {
+  display: inline-block;
+  width: 20%;
+  font-size: 12px;
+  height: 38px;
+  line-height: 38px;
+  text-align: center;
+  border: 1px solid #e0e0e0;
+  background-color: #fff;
+  margin: 0 2%;
+  border-radius: 3px
+}
+
+.city-list-container h3 {
+  line-height: 36px
+}
+
+.curr-city-name,
+.history-city {
+  padding: 5px 15px
+}
+
+.history-city-list li {
+  width: 30%;
+  float: left;
+  margin-right: 5%;
+  margin-bottom: 10px
+}
+
+.history-city-list li:nth-child(3n) {
+  margin-right: 0
+}
+
+.curr-city-name p {
+  width: 30%
+}
+
+.city-name-btn {
+  display: block;
+  font-size: 14px;
+  line-height: 1.5;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0
+}
+
+.location-position {
+  line-height: 1.5;
+  padding: 10px 0
+}
+
+.city-items h3 {
+  padding: 0 15px
+}
+
+.city-items li {
+  cursor: pointer
+}
+
+.contacts-container {
+  margin-left: -10px
+}
+
+.contacts-container::after {
+  content: '';
+  display: block;
+  height: 2px;
+  background-image: url("/v2/image/wap/address/border2@2x.png");
+  background-size: 34px 2px
+}
+
+.contacts-detail-container {
+  padding: 15px 10px
+}
+
+.contacts-detail {
+  position: relative;
+  margin-left: 28px;
+  line-height: 18px
+}
+
+.contacts-detail::before {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: -27px;
+  width: 16px;
+  height: 16px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAiCAMAAAAJbCvNAAAAYFBMVEUAAAAzMzMzMzM0NDRAQEAzMzMzMzM3Nzc5OTk0NDQ0NDQ1NTU1NTU3NzczMzMzMzM0NDQ2NjY0NDQ0NDQ0NDQ0NDQ1NTU1NTUzMzMzMzMzMzM0NDQzMzM1NTU7OzszMzPfg0AmAAAAH3RSTlMA879/DO+bJB/82EEwFfnpUDnPuaOLWDLSr6lxaGANzOKzvAAAAOdJREFUOMu1kldywzAQQ8FqUhKLVd1x/1tmEmcSSZbML7+vxcySXGCJObWthKhsjW0Okr/IAzY4GgrVaN0oQXPcOG8o3bN0kub1Dkm5FCtqCvevnOB6Uks1l4p21VCxmcuG1apBUM+lpig2lJ8oD1m2WQ6qHHV5WeV1b3+YzxDycG6T8d6k9jzkgCVj57nAd+Pc4YmMncpT0IAOU1ZdJE9/Xu+e6aqxQF8T/f1ZZ8/hgRceA33+ySdSYRPF+J1YT4sdLHvAUYRd64ION/bYpecNF47YZeQFLSfsMrFFYniTPxMi3xLBAl89sRlPXwGQUQAAAABJRU5ErkJggg==");
+  background-size: 16px 16px
+}
+
+.contacts-detail.edit-arrow::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 6px;
+  height: 11px;
+  margin-top: -5px;
+  background-image: url("/v2/image/wap/trade/arrow@2x.png");
+  background-size: 6px 11px
+}
+
+.empty-contacts {
+  position: relative;
+  padding-left: 50px;
+  line-height: 40px;
+  background: url("/v2/image/wap/address/add@2x.png") no-repeat;
+  background-size: 40px 40px;
+  background-position: 0 center
+}
+
+.empty-contacts::after {
+  content: '';
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-top: 2px solid #cbc9cc;
+  border-right: 2px solid #cbc9cc;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: 0;
+  bottom: 0;
+  right: 5px;
+  margin: auto
+}
+
+.contacts-panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background: #fff
+}
+
+.contacts-list {
+  padding-bottom: 51px
+}
+
+.contacts-list .block-item {
+  padding: 15px 30px;
+  line-height: 22px
+}
+
+.contacts-list .icon-edit-contacts {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  margin-top: -13px;
+  width: 24px;
+  height: 26px;
+  background-image: url("/v2/image/wap/address/edit_address@2x.png");
+  background-repeat: no-repeat;
+  background-size: 24px 26px;
+  background-position: center
+}
+
+.add-contacts {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  line-height: 50px;
+  background: #fff;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .add-contacts {
+    border-top-width: 1px
+  }
+}
+
+.add-contacts .icon-add {
+  margin: 0 10px;
+  vertical-align: middle
+}
+
+.add-contacts::after {
+  content: '';
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-top: 2px solid #cbc9cc;
+  border-right: 2px solid #cbc9cc;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: 0;
+  bottom: 0;
+  right: 13px;
+  margin: auto
+}
+
+.contacts-form {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%
+}
+
+.contacts-form .btn-loading-save {
+  position: relative;
+  color: transparent !important
+}
+
+.contacts-form .btn-loading-save:link,
+.contacts-form .btn-loading-save:visited,
+.contacts-form .btn-loading-save:focus,
+.contacts-form .btn-loading-save:hover,
+.contacts-form .btn-loading-save:active {
+  color: transparent !important
+}
+
+.contacts-form .btn-loading-save::before,
+.contacts-form .btn-loading-save::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin-left: -8px;
+  margin-top: -8px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.contacts-form .btn-loading-save::after {
+  border-color: #fff transparent transparent transparent;
+  -webkit-animation: btn-spin 0.6s linear;
+  -moz-animation: btn-spin 0.6s linear;
+  animation: btn-spin 0.6s linear;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite
+}
+
+.contacts-form .btn-loading-delete {
+  position: relative;
+  color: transparent !important
+}
+
+.contacts-form .btn-loading-delete:link,
+.contacts-form .btn-loading-delete:visited,
+.contacts-form .btn-loading-delete:focus,
+.contacts-form .btn-loading-delete:hover,
+.contacts-form .btn-loading-delete:active {
+  color: transparent !important
+}
+
+.contacts-form .btn-loading-delete::before,
+.contacts-form .btn-loading-delete::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin-left: -8px;
+  margin-top: -8px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.contacts-form .btn-loading-delete::after {
+  border-color: #666 transparent transparent transparent;
+  -webkit-animation: btn-spin 0.6s linear;
+  -moz-animation: btn-spin 0.6s linear;
+  animation: btn-spin 0.6s linear;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite
+}
+
+@-webkit-keyframes btn-spin {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0)
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@-moz-keyframes btn-spin {
+  0% {
+    -moz-transform: rotate(0);
+    transform: rotate(0)
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes btn-spin {
+  0% {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    transform: rotate(0)
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+.info-panel {
+  line-height: 1.6
+}
+
+.info-panel .left-part {
+  float: left;
+  margin-right: 10px
+}
+
+.info-panel .right-part {
+  float: right;
+  text-align: right
+}
+
+.info-panel .arrow.right-part {
+  margin-right: 10px
+}
+
+.info-panel .arrow:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 7px;
+  -webkit-transform: translate3d(0, -55%, 0);
+  -moz-transform: translate3d(0, -55%, 0);
+  transform: translate3d(0, -55%, 0);
+  width: 6px;
+  height: 11px;
+  background-image: url("/v2/image/wap/trade/arrow@2x.png");
+  background-size: 6px 11px;
+  background-repeat: no-repeat
+}
+
+.info-panel-big {
+  line-height: 2
+}
+
+.address-search-container .search-bar {
+  top: 40px
+}
+
+.search-history {
+  padding-left: 10px
+}
+
+.search-history h3 {
+  padding: 10px 0
+}
+
+.search-history .block.block-list {
+  padding-left: 0
+}
+
+.search-history .block-item {
+  padding-left: 0
+}
+
+.order-total {
+  padding: 12px 10px
+}
+
+.order-total p {
+  line-height: 26px
+}
+
+.order-total .total {
+  font-size: 16px
+}
+
+.header-receive-tips-wrap {
+  position: relative;
+  display: block;
+  padding-left: 38px;
+  margin-top: 10px;
+  height: 44px;
+  line-height: 44px;
+  font-size: 12px;
+  background-color: #fff
+}
+
+.header-receive-tips-wrap::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  -webkit-perspective: 1000;
+  -webkit-backface-visibility: hidden;
+  pointer-events: none;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e5e5e5
+}
+
+.header-receive-tips::before {
+  content: '';
+  position: absolute;
+  left: 10px;
+  top: 13px;
+  width: 16px;
+  height: 16px;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAR5JREFUWAljTE9P9/r///9MBgYGGSCmG2BkZHzMxMSUzgK0cRYQS9PNZqhFQE/L/v37dxYLkAG2fNasWYzEOCItLe0/SB26elziuMyEqpdhwqWAXuKjDhgNgdEQYATmx8fALEfXUhCWxYGl4VMmZmbmNKDAE5ggHWmQnSC7IQBUMsFKM5gYLWh0e0YT4WgIjIbAaAiMhsBoCIyGwKAKgeeg+j83N5dmrSMks8F2geyDhwCweXQAJPDr16/ZWVlZsiA2NQHIzJ8/f4L6oSBwEEIxMIA6p2DAxsZWBrTcDdhX9Pjz588jYMsFJkUVGmgmzJx37OzspTAOM4xx6tSpT6ampkuBDpAAigkDMS9Mjkr0M2AobwFaHjx58mR4GxQA88BYkiwphJUAAAAASUVORK5CYII=") no-repeat;
+  background-size: 16px 16px
+}
+
+.header-receive-tips.has-arrow::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  width: 6px;
+  height: 11px;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  background-image: url("/v2/image/wap/trade/arrow@2x.png");
+  background-size: 6px 11px
+}
+
+.border-top-none {
+  border-top: 0px none !important
+}
+
+.list-finished,
+.loading-more {
+  width: 100%;
+  padding: 20px 10px;
+  vertical-align: middle;
+  text-align: center;
+  color: #999;
+  font-size: 12px;
+  line-height: 20px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.list-finished span,
+.loading-more span {
+  display: inline-block;
+  margin-top: 10px;
+  width: 16px;
+  height: 16px;
+  background: url("/v2/image/loader.gif") no-repeat center center;
+  background-size: 16px 16px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .list-finished span,
+  .loading-more span {
+    background-image: url("/v2/image/loader@2x.gif")
+  }
+}
+
+.c-green-55BD47 {
+  color: #55BD47
+}
+
+.scene {
+  padding-top: 15px
+}
+
+.paid-time {
+  margin: 0;
+  padding: 5px 0
+}
+
+.paid-time .paid-time-inner {
+  padding: 0 10px
+}
+
+.name-card.name-card-goods .detail {
+  min-height: 38px
+}
+
+.tag.tag-opt {
+  min-width: 50px;
+  padding: 5px;
+  font-size: 10px
+}
+
+.overview .cashback-amount {
+  width: 100%;
+  float: none;
+  border: none
+}
+
+.gift-app-order .gift-tips {
+  line-height: 120%;
+  margin: 10px
+}
+
+.gift-app-order .action-container {
+  margin: 10px 0
+}
+
+.pj-actions {
+  background-color: #7b859b;
+  padding: 5px 15px 20px 15px
+}
+
+.pj-actions .btn.btn-view {
+  background-color: transparent;
+  color: #fff
+}
+
+.pj-errors .desc {
+  padding: 5px;
+  line-height: 22px
+}
+
+.pj-errors .desc-bottom-line {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5;
+  padding-bottom: 10px;
+  margin: 0 5px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .pj-errors .desc-bottom-line {
+    border-bottom-width: 1px
+  }
+}
+
+.pj-errors .reason {
+  font-size: 12px;
+  line-height: 18px;
+  padding: 10px 5px
+}
+
+.tabber.tabber-fold {
+  border: 0px none
+}
+
+.tabber.tabber-fold button {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .tabber.tabber-fold button {
+    border-bottom-width: 1px
+  }
+}
+
+.tabber.tabber-fold button.active {
+  margin-top: 0;
+  -webkit-border-image: initial;
+  -moz-border-image: initial;
+  border-image: initial
+}
+
+.order-wait-box h3 {
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ccc
+}
+
+.order-wait-box .order-wait-tip {
+  line-height: 1.5;
+  margin: 15px 0 25px
+}
+
+.page-header {
+  background-color: #000;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999
+}
+
+.page-header a {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  color: #fff;
+  line-height: 40px
+}
+
+.page-header h3 {
+  line-height: 40px;
+  color: #fff
+}
+
+.selffetch-address .address-list .address-container {
+  max-height: none
+}
+
+.order-number-status {
+  position: relative;
+  padding: 10px 10px 10px 10px
+}
+
+.order-number-status p {
+  line-height: 1.5;
+  word-break: break-all
+}
+
+.order-number-status .copy-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 3px 10px
+}
+
+.tag-red-bk {
+  color: #fff;
+  background-color: #f44
+}
diff --git a/src/pages/goods/goods.css b/src/pages/goods/goods.css
new file mode 100644
index 0000000..be25078
--- /dev/null
+++ b/src/pages/goods/goods.css
@@ -0,0 +1,4636 @@
+.modal-login {
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: #edf0f4;
+  color: #666;
+  display: none
+}
+
+.account-form {
+  overflow: hidden
+}
+
+.account-form a {
+  color: #07d
+}
+
+.account-form a:hover {
+  color: #07d
+}
+
+.account-form a.new-window {
+  color: #00f
+}
+
+.account-form a.new-window:hover {
+  color: #00f
+}
+
+.account-form input,
+.account-form textarea,
+.account-form select,
+.account-form button,
+.account-form label {
+  display: inline-block;
+  vertical-align: top;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
+}
+
+.account-form input,
+.account-form textarea,
+.account-form select {
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-size: 16px;
+  background: white;
+  border: 0
+}
+
+.account-form .btn-auth-code {
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-size: 16px;
+  background: white
+}
+
+.account-form input:focus,
+.account-form textarea:focus,
+.account-form select:focus,
+.account-form button:focus {
+  outline: 0
+}
+
+.account-form textarea {
+  resize: none
+}
+
+.account-form input[type="search"],
+.account-form input[type="search"]::-webkit-search-cancel-button,
+.account-form input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none
+}
+
+.account-form::-ms-clear {
+  display: none
+}
+
+.account-form::-webkit-input-placeholder {
+  color: #a8a8af
+}
+
+.account-form:-ms-input-placeholder {
+  color: #a8a8af
+}
+
+.account-form::-moz-placeholder {
+  color: #a8a8af;
+  opacity: 1
+}
+
+.account-form::-moz-focus-inner {
+  padding: 0 !important;
+  border: 0 !important
+}
+
+.account-form button {
+  border: 1px solid #e5e5e5
+}
+
+.account-form .form-title {
+  margin: 25px 0 10px;
+  padding: 0 12px;
+  line-height: 24px;
+  font-size: 14px;
+  color: #7c7b83;
+  text-transform: uppercase;
+  text-shadow: 0 1px rgba(255, 255, 255, 0.2)
+}
+
+.account-form .big {
+  font-size: 20px;
+  text-align: center;
+  font-weight: normal
+}
+
+.account-form .action-links {
+  text-align: right;
+  padding: 6px 12px;
+  margin-top: 20px;
+  font-size: 14px;
+  zoom: 1
+}
+
+.account-form .action-links:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.account-form .action-links>a,
+.account-form .action-links>span {
+  padding: 6px 0;
+  margin-left: 5px;
+  display: inline-block;
+  vertical-align: middle
+}
+
+.account-form .action-links .division-span {
+  border-left: 1px solid #999;
+  margin: 0 5px 0 3px
+}
+
+.account-form .btn-send-auth {
+  width: 25%;
+  height: 30px;
+  line-height: 30px;
+  padding-left: 0;
+  padding-right: 0;
+  position: absolute;
+  top: 6px;
+  right: 10px
+}
+
+.bind-taobao .btn-send-auth {
+  padding-left: 7px;
+  padding-right: 7px;
+  width: auto;
+  font-weight: bold
+}
+
+.bind-taobao .action-container .btn.btn-white {
+  border: 1px solid #e5e5e5;
+  color: #333
+}
+
+.taobao-result {
+  border-bottom: 1px solid #e5e5e5
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.bottom-fix {
+  display: block;
+  z-index: 100;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  padding: 6px 7px;
+  -webkit-border-image: url("/v2/image/wap/border-line-bbb.png") 2 stretch;
+  -moz-border-image: url("/v2/image/wap/border-line-bbb.png") 2 stretch;
+  border-image: url("/v2/image/wap/border-line-bbb.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  background-color: #fff;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 0
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .bottom-fix {
+    border-top-width: 1px
+  }
+}
+
+.bottom-fix .btn {
+  font-size: 14px
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.popout-box .header {
+  position: relative;
+  margin-bottom: 10px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .popout-box .header {
+    border-bottom-width: 1px
+  }
+}
+
+.popout-box .header h2 {
+  margin-bottom: 16px;
+  line-height: 16px;
+  font-size: 16px
+}
+
+.popout-box .action-container {
+  margin: 10px 0 0 0;
+  padding: 0
+}
+
+.popout-box .action-container .btn.btn-block {
+  font-size: 14px
+}
+
+.trade-reward {
+  background-color: #fff;
+  position: relative
+}
+
+.trade-reward .trade-reward-content {
+  padding: 5px 24px 5px 10px;
+  line-height: 25px;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  transform-style: preserve-3d
+}
+
+.trade-reward .trade-reward-content .trade-reward-tag {
+  background-color: #f44;
+  color: #fff;
+  padding: 0 3px;
+  vertical-align: top;
+  margin-right: 5px;
+  border-radius: 2px;
+  font-size: 10px;
+  line-height: 14px
+}
+
+.trade-reward .trade-reward-content .trade-reward-info {
+  vertical-align: middle;
+  color: #666
+}
+
+.trade-reward .trade-reward-content .trade-reward-info.hide-part-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 78%;
+  display: inline-block
+}
+
+.trade-reward .trade-reward-content .arrow {
+  font-weight: bold;
+  color: #999;
+  position: absolute;
+  top: 12px;
+  right: 10px;
+  width: 6px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAMAAAD57OxYAAAAPFBMVEUAAACZmZmlpaWampqZmZmampqampqampqampqbm5ubm5ucnJyZmZmfn5+bm5uZmZmampqampqbm5uZmZnmDXU5AAAAE3RSTlMA8Qjo3dHCn4lPPi8jGA+ysXRhTrGNsAAAAFxJREFUGNNl0EcOwCAMRNEUekv5979r2Bgr4BVPQrbH27/Cq+8H4oCHPQmOqysPOTiLqFkwVVQN2CYqJ7hDlHe4BVvq8kMRCCv0mzZYW+tQXUcXnSNoOI09H2StDz/YBU9Q8POZAAAAAElFTkSuQmCC) 6px 12px no-repeat;
+  background-position: center;
+  background-size: contain;
+  -webkit-transition: 0.1s linear;
+  -moz-transition: 0.1s linear;
+  transition: 0.1s linear
+}
+
+.trade-reward .trade-reward-content .arrow.arrow-down {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg)
+}
+
+.stock-detail {
+  position: relative;
+  line-height: 12px;
+  font-size: 0;
+  color: #999;
+  background-color: #fff;
+  padding: 0 10px
+}
+
+.stock-detail dl {
+  width: 33.333333%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: inline-block;
+  font-size: 12px;
+  zoom: 1
+}
+
+.stock-detail dl:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.stock-detail dl:nth-child(1) {
+  text-align: left
+}
+
+.stock-detail dl:nth-child(2) {
+  text-align: center
+}
+
+.stock-detail dl:nth-child(3) {
+  text-align: right
+}
+
+.stock-detail dt {
+  display: inline-block
+}
+
+.stock-detail dt em,
+.stock-detail dt label {
+  color: #999
+}
+
+.stock-detail dd {
+  display: inline-block;
+  word-wrap: break-word
+}
+
+.sku-detail {
+  position: relative;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  line-height: 20px;
+  font-size: 14px;
+  background-color: #fff;
+  border-top: 1px solid #f0f0f0;
+  border-bottom: 1px solid #f0f0f0
+}
+
+.sku-detail .goods-models {
+  margin: 0;
+  padding: 1px 5px;
+  background-color: #ffe
+}
+
+.sku-detail .goods-models dt {
+  text-align: right;
+  width: 90px;
+  padding-left: 0;
+  padding-right: 5px
+}
+
+.sku-detail .goods-models dd {
+  margin-left: 90px
+}
+
+.sku-detail dl {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  zoom: 1
+}
+
+.sku-detail dl:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.sku-detail dt {
+  float: left;
+  color: #333
+}
+
+.sku-detail dt em,
+.sku-detail dt label {
+  color: #999
+}
+
+.sku-detail dd {
+  margin-left: 42px;
+  display: block;
+  word-wrap: break-word
+}
+
+.sku-detail .txt,
+.sku-detail .txta {
+  display: inline-block;
+  border: 2px solid #eee;
+  padding: 5px;
+  resize: none;
+  border-radius: 4px;
+  width: 190px;
+  font-size: 14px
+}
+
+.sku-detail .txt:focus,
+.sku-detail .txta:focus {
+  outline: none !important;
+  border-color: #666
+}
+
+.sku-detail .qrcode-buy {
+  display: none;
+  position: absolute;
+  bottom: 10px;
+  right: 20px
+}
+
+.sku-detail .sku-detail-inner {
+  padding-left: 10px
+}
+
+.sku-detail .sku-detail-inner.adv-opts-inner-addons {
+  border: 0;
+  -webkit-border-image: url(https://b.yzcdn.cnhttps://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  -moz-border-image: url(https://b.yzcdn.cnhttps://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-bottom: 2px solid #e5e5e5;
+  border-bottom-width: 1px;
+  margin-left: 10px;
+  padding-left: 0
+}
+
+.sku-detail .sku-group {
+  position: relative;
+  padding-right: 15px;
+  margin-right: 10px
+}
+
+.sku-detail .sku-group .sku-item {
+  margin-right: 10px
+}
+
+.sku-detail .sku-group .sku-info {
+  padding-left: 10px
+}
+
+.sku-detail .sku-group .sku-info:first-child {
+  padding-left: 0
+}
+
+.sku-detail .sku-group.select-sku:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -6px;
+  width: 6px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAMAAAD57OxYAAAAPFBMVEUAAACZmZmlpaWampqZmZmampqampqampqampqbm5ubm5ucnJyZmZmfn5+bm5uZmZmampqampqbm5uZmZnmDXU5AAAAE3RSTlMA8Qjo3dHCn4lPPi8jGA+ysXRhTrGNsAAAAFxJREFUGNNl0EcOwCAMRNEUekv5979r2Bgr4BVPQrbH27/Cq+8H4oCHPQmOqysPOTiLqFkwVVQN2CYqJ7hDlHe4BVvq8kMRCCv0mzZYW+tQXUcXnSNoOI09H2StDz/YBU9Q8POZAAAAAElFTkSuQmCC) no-repeat;
+  background-size: 6px 12px
+}
+
+.package-buy-block {
+  position: relative;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 10px;
+  background: #fff
+}
+
+.package-buy-block .info {
+  line-height: 20px;
+  padding-right: 16px
+}
+
+.package-buy-block .goods-block {
+  position: relative;
+  padding-left: 85px;
+  margin-top: 10px;
+  margin-bottom: 1px;
+  white-space: nowrap;
+  font-size: 0
+}
+
+.package-buy-block .goods-item {
+  display: inline-block;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 50%;
+  height: 85px;
+  max-width: 154px;
+  padding-right: 85px
+}
+
+.package-buy-block .goods-item:before {
+  content: '';
+  display: block;
+  height: 85px;
+  background: url("/v2/image/wap/ump/package_buy/add@2x.png") no-repeat center;
+  background-size: 14px 14px
+}
+
+.package-buy-block .goods-item .goods-info {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 85px;
+  height: 85px;
+  background-size: 100%;
+  background-position: center
+}
+
+.package-buy-block .goods-item .price {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  line-height: 20px;
+  padding: 0 10px;
+  opacity: .9;
+  background: #fff
+}
+
+.package-buy-block .goods-item:first-child {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 85px
+}
+
+.package-buy-block::after {
+  content: '';
+  position: absolute;
+  top: 13px;
+  right: 10px;
+  width: 6px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAMAAAD57OxYAAAAPFBMVEUAAACZmZmlpaWampqZmZmampqampqampqampqbm5ubm5ucnJyZmZmfn5+bm5uZmZmampqampqbm5uZmZnmDXU5AAAAE3RSTlMA8Qjo3dHCn4lPPi8jGA+ysXRhTrGNsAAAAFxJREFUGNNl0EcOwCAMRNEUekv5979r2Bgr4BVPQrbH27/Cq+8H4oCHPQmOqysPOTiLqFkwVVQN2CYqJ7hDlHe4BVvq8kMRCCv0mzZYW+tQXUcXnSNoOI09H2StDz/YBU9Q8POZAAAAAElFTkSuQmCC) no-repeat;
+  background-size: 6px 12px
+}
+
+.select-delivery {
+  position: relative;
+  margin-right: 10px
+}
+
+.select-delivery::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -6px;
+  width: 6px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAMAAAD57OxYAAAAPFBMVEUAAACZmZmlpaWampqZmZmampqampqampqampqbm5ubm5ucnJyZmZmfn5+bm5uZmZmampqampqbm5uZmZnmDXU5AAAAE3RSTlMA8Qjo3dHCn4lPPi8jGA+ysXRhTrGNsAAAAFxJREFUGNNl0EcOwCAMRNEUekv5979r2Bgr4BVPQrbH27/Cq+8H4oCHPQmOqysPOTiLqFkwVVQN2CYqJ7hDlHe4BVvq8kMRCCv0mzZYW+tQXUcXnSNoOI09H2StDz/YBU9Q8POZAAAAAElFTkSuQmCC) no-repeat;
+  background-size: 6px 12px
+}
+
+.popup-delivery-title {
+  margin: 0;
+  line-height: 50px;
+  font-size: 16px;
+  text-align: center;
+  color: #333;
+  position: relative;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .popup-delivery-title {
+    border-bottom-width: 1px
+  }
+}
+
+.popup-delivery-title .popup-close {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  margin-top: -10px;
+  width: 20px;
+  height: 20px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAATlBMVEUAAACfn5+qqqqbm5uampqampqampqampqZmZmmpqaZmZmampqampqbm5ubm5uampqampqZmZmampqampqampqbm5ubm5uampqZmZmZmZli26NGAAAAGXRSTlMAFQiAQue+rdML7vLUKSXZxKWicm9eUjrilPrdEAAAAUVJREFUOMudlVuWgjAQRCshkJeGl4i1/43OjKN0iChqfXLuodOXToN10tg3bYxt048JT6MqxyyuUpuYryIZhskk75OZhkDGyj9y55q0RssDbSxZn0uuIrsZReaOrJBHW/KEjZxIqyGxDAabMYE2rxuOeJJjkOpn0uBpDHnryNdyvu1z1v5WuMPLdP/FVeT8GpwZ1fWFdmm+U7kyp+/Pr690NFLDqYVreNFLPw5IDItRdfglF65elOnAhJEDsCKFWzJwRM8JJVlymNijoUFJlhwMG7RMKMhDySGxRaRHSZYcPKOAmRe26hGU0uKlFZ9SWpoRf3/nVEUzoif3LKToEeHCCSnC5RMKJ2T2CVdDYa+cmIcMxXrM3CXzp1zwMmbrwdV6bS8b3HevwtuX67Prur8APlwp+0vqi7W3v0j3V/PXy37/9/ED+r8bNE3AmtsAAAAASUVORK5CYII=) no-repeat;
+  background-size: 20px
+}
+
+.popup-delivery-item {
+  display: block;
+  line-height: 50px;
+  font-size: 14px;
+  color: #333;
+  padding-left: 10px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .popup-delivery-item {
+    border-bottom-width: 1px
+  }
+}
+
+.popup-delivery-item input[type='radio'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  margin: 0 4px 0 0;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAVFBMVEUAAACampqioqKZmZmampqampqampqampqcnJyqqqqampqampqampqampqbm5v///+ZmZn5+fn09PTw8PDm5ubR0dHPz8/Jycm7u7uxsbGdnZ3d3d2KAK0RAAAAD3RSTlMAvRDz2cWQUTsDXdaioVxmAFd6AAAA6klEQVQ4y42UWRaEIAwEEfeVxn25/z2H6OhTB5jUdz9SBBJxRzZ1EIVhFNSNFHbSADeC1BLJYryIs1ckT0AsQ99p3fXDAiLJHzJUaZ20utDTSjXlLVMCmFv1oJ0BlFcqp3NG9cNIZ50VyWdTFjby+t7rPMd+1nHH2PgoB8Yr3nsIrK0r1K4AddVYT8rJZNzN9QFod0gDkKIAFuVhAQpRAYMvNAAVKfW+UE9SEdD5Qh0QiXD39pqHrBCrHE+8/t+CmtPMhvUsnAdmfRXOp2N9X84gsEaKM5ycMWcvDP7q4S8xQhbVsQ6r4iHzAbrdPVnePehPAAAAAElFTkSuQmCC) no-repeat;
+  background-size: 18px;
+  vertical-align: middle;
+  outline: none;
+  border: 0
+}
+
+.popup-delivery-item input[type='radio']:checked {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAS1BMVEUAAAAzhPszhPoyhPsyhPozg/s0hPwyhPw0hvs8h/9Aj/8yg/syg/ozhPsyg/r///+wz/2RvfxTl/pup/vT5P3U5f16r/u91/18sPvWF+94AAAADnRSTlMAvdnFopBcUTsREPPW8utY9+UAAADeSURBVDjLlZTrDoMgDIWpIoqX1svm9v5PumRGD7Aq7vtH8iWnFFoT4p2lousKss4bnZo4gGpFaUpOKJvUqVihipSWWIXawOn5hB4W8Smk16PX1fAl2x3La6n89pA1lpV36rOqJ5ElqN1rziwi7+PkjdOkp8gDJ2esHiYzjtaQHjZFDS2O+yxxGChMtzsiYxQGOjNAkhFhIQPixs1CWBBHHFkIA2QsR9YLYUELHMcWwoJmeo4shAGfPPCIMJT081XWlVPqm58u/31vD0J+pPLDeXPM8wsjv3r+XWL5dfgBB3w3WcIaGhAAAAAASUVORK5CYII=)
+}
+
+.popup-delivery-item em {
+  font-size: 12px;
+  color: #666
+}
+
+.popup-delivery-item .delivery-text {
+  vertical-align: middle
+}
+
+.delivery em {
+  font-size: 12px;
+  color: #666
+}
+
+.presale {
+  background-color: #fff;
+  position: relative
+}
+
+.presale .presale-content {
+  padding: 5px 24px 5px 10px;
+  line-height: 25px;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  transform-style: preserve-3d
+}
+
+.presale .presale-content .presale-tag {
+  background-color: #03b401;
+  color: #fff;
+  padding: 0 3px;
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 5px;
+  border-radius: 2px;
+  font-size: 10px;
+  line-height: 14px
+}
+
+.presale .presale-content .presale-info {
+  vertical-align: middle;
+  color: #666
+}
+
+.presale .presale-content .presale-info.hide-part-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 78%;
+  display: inline-block
+}
+
+.presale .presale-content .arrow {
+  font-weight: bold;
+  color: #999;
+  position: absolute;
+  top: 15px;
+  right: 14px;
+  width: 5px;
+  height: 8px;
+  background: url("/v2/image/wap/cashback/guide@2x.png") 5px 8px no-repeat;
+  background-position: center;
+  background-size: contain;
+  -webkit-transition: 0.1s linear;
+  -moz-transition: 0.1s linear;
+  transition: 0.1s linear
+}
+
+.presale .presale-content .arrow.arrow-down {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg)
+}
+
+.available-store {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  border-bottom: 2px solid #e5e5e5;
+  padding: 10px 0 10px 10px;
+  margin-bottom: 10px;
+  background-color: #fff
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .available-store {
+    border-top-width: 1px
+  }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .available-store {
+    border-bottom-width: 1px
+  }
+}
+
+.available-store .available-title {
+  margin-bottom: 10px
+}
+
+.available-store .store-list {
+  margin-right: 10px;
+  white-space: nowrap;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch
+}
+
+.available-store .store-list::-webkit-scrollbar {
+  display: none
+}
+
+.available-store .store-item {
+  display: inline-block;
+  width: 120px;
+  height: 73px;
+  background-color: #f8f8f8;
+  border: 1px solid #eee;
+  white-space: normal;
+  padding: 10px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-right: 10px;
+  font-size: 12px;
+  line-height: 1.2;
+  vertical-align: top;
+  margin-top: 10px
+}
+
+.available-store .store-item p:not(.store-distance) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  height: 28px
+}
+
+.available-store .store-distance {
+  color: #999;
+  margin-top: 10px
+}
+
+.available-store .store-distance::before {
+  content: '';
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAclBMVEUAAABmZmZmZmZnZ2dtbW1mZmZnZ2d5eXlnZ2dnZ2dmZmZnZ2dra2tvb29mZmZnZ2dmZmZnZ2dmZmZmZmZmZmZnZ2dmZmZmZmZnZ2dnZ2doaGhnZ2doaGhoaGhmZmZnZ2dmZmZnZ2dpaWloaGhmZmZmZmYcsd3zAAAAJXRSTlMA8alyCu1NBcWPbiobD+j32c3Kt7Kjg2piXFcxI0fUv5t8PTtG+AgO8wAAAQBJREFUKM9dkFmWgyAURAHBMc4masycvvvfYguYxk59cIqndU/xxKZyVo2UjZpLsVeSGzZVeRLmZQ/pWGhdjCn0fyHdUsWfS1zR6s0rmkOIHxqUd1fkRex0kVyd6Yg88f32jIjO/YBxPSYJcnIdDRYxcvRA0hR+rD8yrmfmSSmRhaSelbnPs71I1vol0vrZQR4+ceMlxIubTzzW8+Ry4kkVRRVP4egn+1RaV2UAGFzBltjWNyx+GVnmF7NgtHAsJf5JcfLLqTnv52fqbXUTpgjzwjCFrFk+fjE7su6R540j6XWIJwqGFXwYQCVir7xG5rmkzsWXijvAPbQIirsuDrdfTo4UI0dK9nwAAAAASUVORK5CYII=) no-repeat;
+  background-size: 12px;
+  vertical-align: middle;
+  margin-right: 2px;
+  position: relative;
+  top: -1px
+}
+
+.btn-retail {
+  padding: 0 3px;
+  margin-right: 5px;
+  border-radius: 2px;
+  margin-top: 3px;
+  line-height: 14px
+}
+
+.tabber {
+  width: 100%;
+  color: #333;
+  font-size: 14px;
+  background-color: #fff;
+  overflow: visible;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .tabber {
+    border-top-width: 1px;
+    border-bottom-width: 1px
+  }
+}
+
+.tabber button,
+.tabber a {
+  float: left;
+  width: 50%;
+  line-height: 40px;
+  border: 0px none;
+  outline: 0px none;
+  background-color: #fff;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.tabber button:hover,
+.tabber a:hover {
+  text-decoration: none
+}
+
+.tabber button.active,
+.tabber a.active {
+  position: relative;
+  top: 1px;
+  line-height: 39px;
+  color: #22C415;
+  border-bottom: 1px solid #22C415
+}
+
+.goods-promotion {
+  background: #fff;
+  line-height: 25px;
+  padding: 5px 10px
+}
+
+.goods-promotion .link {
+  font-size: 12px
+}
+
+.promotion-status {
+  background-color: #fff;
+  padding: 0 0 10px;
+  margin-top: 10px;
+  line-height: 20px;
+  position: relative
+}
+
+.promotion-status.price-promotion {
+  display: inline-block;
+  padding: 0
+}
+
+.promotion-status .tag {
+  border: 0;
+  padding: 0 3px;
+  margin-right: 5px;
+  border-radius: 2px;
+  margin-top: 5px;
+  line-height: 12px
+}
+
+.promotion-status .tag.tag-red {
+  font-size: 8px;
+  background-color: #f44;
+  color: #fff
+}
+
+.promotion-status .promotion-info {
+  vertical-align: middle;
+  color: #666;
+  font-size: 12px;
+  margin-left: 10px;
+  margin-right: 20px;
+  line-height: 22px;
+  position: relative
+}
+
+.promotion-status .promotion-info.hide-part-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 90%;
+  display: inline-block
+}
+
+.promotion-status .arrow {
+  font-weight: bold;
+  color: #999;
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  width: 6px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAMAAAD57OxYAAAAPFBMVEUAAACZmZmlpaWampqZmZmampqampqampqampqbm5ubm5ucnJyZmZmfn5+bm5uZmZmampqampqbm5uZmZnmDXU5AAAAE3RSTlMA8Qjo3dHCn4lPPi8jGA+ysXRhTrGNsAAAAFxJREFUGNNl0EcOwCAMRNEUekv5979r2Bgr4BVPQrbH27/Cq+8H4oCHPQmOqysPOTiLqFkwVVQN2CYqJ7hDlHe4BVvq8kMRCCv0mzZYW+tQXUcXnSNoOI09H2StDz/YBU9Q8POZAAAAAElFTkSuQmCC) 6px 12px no-repeat;
+  background-position: center;
+  background-size: contain;
+  -webkit-transition: 0.1s linear;
+  -moz-transition: 0.1s linear;
+  transition: 0.1s linear
+}
+
+.promotion-status .arrow.arrow-down {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg)
+}
+
+.tabber.orange {
+  color: #f60
+}
+
+.tabber.orange button.active,
+.tabber.orange a.active {
+  color: #f60;
+  border-bottom: 1px solid #f60
+}
+
+@-webkit-keyframes loader {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@-moz-keyframes loader {
+  from {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes loader {
+  from {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}
+
+.loader-container {
+  position: relative;
+  width: 200px;
+  height: 100px;
+  border-radius: 8px;
+  background-color: #fff
+}
+
+.loader-container .loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -29px;
+  margin-left: -24px;
+  height: 17px;
+  padding-top: 41px;
+  text-align: center;
+  color: #888;
+  z-index: 1000
+}
+
+.loader-container .loader::before,
+.loader-container .loader::after {
+  position: absolute;
+  content: '';
+  top: 0%;
+  left: 50%;
+  margin-left: -12px;
+  width: 24px;
+  height: 24px;
+  border-radius: 100%
+}
+
+.loader-container .loader::after {
+  border-width: 3px;
+  border-style: solid;
+  border-color: #d9d9d9 #d9d9d9 #d9d9d9 transparent;
+  -webkit-box-shadow: 0px 0px 0px 1px transparent;
+  box-shadow: 0px 0px 0px 1px transparent;
+  -webkit-animation: loader 0.8s linear;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation: loader 0.8s linear;
+  animation: loader 0.8s linear;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite
+}
+
+.calendar {
+  height: 100%;
+  background-color: #f8f8f8 !important;
+  overflow: scroll !important
+}
+
+.calendar .date-picker-calendar {
+  overflow: scroll !important
+}
+
+.calendar .date-picker-calendar .calendar-body {
+  padding: 0 10px 10px;
+  position: relative
+}
+
+.calendar ul.calendar-week-header {
+  padding: 0 10px;
+  width: 100%;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5;
+  background: #fff;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 10
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .calendar ul.calendar-week-header {
+    border-bottom-width: 1px
+  }
+}
+
+.calendar ul.calendar-week-header li {
+  display: inline-block;
+  width: 14.28571%;
+  line-height: 2.4;
+  font-size: 14px;
+  text-align: center
+}
+
+.calendar span.year-month {
+  float: right;
+  margin: 20px 4px 10px 0;
+  color: #999;
+  font-size: 12px
+}
+
+.calendar .calendar-table {
+  display: block;
+  width: 100%;
+  overflow: hidden
+}
+
+.calendar .calendar-table .calendar-cell {
+  float: left;
+  position: relative;
+  width: 14.28571%
+}
+
+.calendar .calendar-table .calendar-cell:before {
+  content: "";
+  display: block;
+  padding-top: 100%
+}
+
+.calendar .calendar-table .calendar-cell .js-calendar-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: 4px;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  font-size: 12px
+}
+
+.calendar .calendar-table .calendar-cell .js-calendar-item span {
+  padding-top: 50%;
+  display: inline-block;
+  margin-top: -6px
+}
+
+@media screen and (max-width: 320px) {
+  .calendar .calendar-table .calendar-cell .js-calendar-item span {
+    margin-top: -4.8px;
+    font-size: 12px;
+    -webkit-transform: scale(0.8);
+    -moz-transform: scale(0.8);
+    -ms-transform: scale(0.8);
+    transform: scale(0.8)
+  }
+}
+
+.calendar .calendar-table .calendar-cell .js-calendar-item.today {
+  color: #38f;
+  border: 1px solid #38f
+}
+
+.calendar .calendar-table .calendar-cell .js-calendar-item.select {
+  color: #fff;
+  border: 1px solid #38f;
+  background-color: #38f
+}
+
+.calendar .calendar-table .calendar-cell .js-calendar-item.select.patch:after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  right: -12px;
+  width: 12px;
+  height: 100%;
+  display: inline-block;
+  background-color: #38f;
+  border: 1px solid #38f
+}
+
+.calendar .calendar-table .calendar-cell .js-calendar-item i {
+  position: absolute;
+  top: 1px;
+  font-size: 12px;
+  -webkit-transform: scale(0.75);
+  -moz-transform: scale(0.75);
+  -ms-transform: scale(0.75);
+  transform: scale(0.75);
+  color: #fff
+}
+
+.calendar .calendar-table .calendar-cell .js-calendar-item i.left {
+  left: 1px
+}
+
+.calendar .calendar-table .calendar-cell .js-calendar-item i.right {
+  right: 1px
+}
+
+@media screen and (max-width: 320px) {
+  .calendar .calendar-table .calendar-cell .js-calendar-item i {
+    top: 0px;
+    font-size: 12px;
+    -webkit-transform: scale(0.65);
+    -moz-transform: scale(0.65);
+    -ms-transform: scale(0.65);
+    transform: scale(0.65)
+  }
+  .calendar .calendar-table .calendar-cell .js-calendar-item i.left {
+    left: -2px
+  }
+  .calendar .calendar-table .calendar-cell .js-calendar-item i.right {
+    right: -2px
+  }
+}
+
+.calendar .calendar-table .calendar-cell .js-calendar-item.disable {
+  color: #cacaca !important;
+  border: 1px solid #ebebeb;
+  background-color: #eee !important
+}
+
+.calendar .page-header {
+  background-color: #000;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999
+}
+
+.calendar .page-header a {
+  position: absolute;
+  top: 0;
+  color: #fff;
+  line-height: 40px
+}
+
+.calendar .page-header .cancel-datetime {
+  left: 10px
+}
+
+.calendar .page-header .confirm-datetime {
+  left: auto;
+  right: 10px
+}
+
+.calendar .page-header h3 {
+  line-height: 40px;
+  color: #fff
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.action-tip {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 15px;
+  margin: 10px 0;
+  color: #999
+}
+
+.contact-seller {
+  position: fixed;
+  bottom: 53px;
+  left: 10px;
+  font-size: 14px;
+  color: #fff;
+  z-index: 100
+}
+
+.contact-seller a.open-im {
+  position: relative;
+  display: inline-block;
+  padding: 7px 12px;
+  font-size: 12px;
+  color: #30c665;
+  background-color: #FFFFFF;
+  border-radius: 100px;
+  border: 1px solid #30c665
+}
+
+.contact-seller .unread-dot {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  background: #ff5050;
+  border-radius: 50%;
+  display: block;
+  width: 8px;
+  height: 8px;
+  text-indent: -9999px
+}
+
+.contact-seller .unread-dot:empty {
+  display: none
+}
+
+.block-item {
+  position: relative;
+  display: block;
+  padding: 10px;
+  line-height: 1.5;
+  border: 0;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  overflow: hidden
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .block-item {
+    border-top-width: 1px
+  }
+}
+
+.block-item .btn-auth-code {
+  position: absolute;
+  top: 6px;
+  right: 0;
+  height: 30px;
+  line-height: 30px;
+  padding-left: 7px;
+  padding-right: 7px;
+  font-weight: bold
+}
+
+.block-item .verify-image {
+  position: absolute;
+  width: 80px;
+  height: 30px;
+  right: 10px;
+  top: 7px
+}
+
+.block-item.border-none {
+  border-top: 0
+}
+
+.block-item ul {
+  padding-right: 50px
+}
+
+.block-item ul em {
+  color: #999
+}
+
+.block-item h4.block-item-title {
+  line-height: 22px;
+  float: left;
+  margin-right: 10px
+}
+
+.block {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  border-bottom: 2px solid #e5e5e5;
+  overflow: hidden;
+  margin: 10px 0;
+  background-color: #fff;
+  display: block;
+  position: relative;
+  font-size: 14px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .block {
+    border-top-width: 1px;
+    border-bottom-width: 1px
+  }
+}
+
+.block.top-0 {
+  margin-top: 0
+}
+
+.block.bottom-0 {
+  margin-bottom: 0
+}
+
+.block.border-top-0 {
+  border-top: 0
+}
+
+.block.border-bottom-0 {
+  border-bottom: 0
+}
+
+.block.border-0 {
+  border-top: 0;
+  border-bottom: 0
+}
+
+.block:first-child {
+  margin-top: 0
+}
+
+.block .bottom {
+  padding: 10px;
+  height: 18px;
+  line-height: 18px
+}
+
+.block .bottom .price {
+  float: right;
+  color: #f60
+}
+
+.block p {
+  overflow: hidden
+}
+
+.block.block-list {
+  margin: 0;
+  padding: 0;
+  padding-left: 10px;
+  list-style: none;
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.block.block-list.margin-top-normal {
+  margin-top: 20px
+}
+
+.block-list.wf {
+  padding-left: 0
+}
+
+.block-list.wf .b-list {
+  padding-left: 10px;
+  background-color: #fff
+}
+
+.block-list>.block-item {
+  padding: 10px 10px 10px 0
+}
+
+.block-list>.block-item:first-child {
+  border-top: 0px none
+}
+
+.block.block-list+.block.block-list {
+  margin-top: 12px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (-o-min-device-pixel-ratio: 3 / 2),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .block.block-list li span.clear {
+    background: url("/v2/image/wap/icon_clear@2x.png") center center no-repeat;
+    background-size: 100%
+  }
+}
+
+.form {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  padding-left: 10px;
+  padding-right: 10px;
+  list-style: none;
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.form.mg-top-20 {
+  margin-top: 20px
+}
+
+.form.mg-bottom-20 {
+  margin-bottom: 20px
+}
+
+.form .block-item.no-top-border {
+  border-top-width: 0px
+}
+
+.form>.block-item:first-child {
+  border-top: 0px none
+}
+
+.form .block-item {
+  display: table;
+  width: 100%;
+  padding: 0
+}
+
+.form .block-item label {
+  display: table-cell;
+  width: 90px;
+  line-height: 28px;
+  padding: 10px 0
+}
+
+.form .block-item textarea,
+.form .block-item input,
+.form .block-item select,
+.form .block-item a,
+.form .block-item span {
+  display: table-cell;
+  overflow: hidden;
+  padding: 10px 0;
+  min-height: 28px;
+  line-height: 28px;
+  font-size: 14px
+}
+
+.form .block-item textarea,
+.form .block-item input,
+.form .block-item select {
+  width: 99%;
+  background-color: #fff;
+  border: 0px none;
+  outline: none
+}
+
+.form .block-item textarea {
+  height: 50px;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  resize: none
+}
+
+.form .block-item:last-child {
+  border-bottom: 0px none
+}
+
+.tag {
+  display: inline-block;
+  background-color: transparent;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  text-align: center;
+  margin: 0;
+  color: #999;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 4px
+}
+
+.tag-big {
+  font-size: 14px;
+  line-height: 18px
+}
+
+.tag.tag-green {
+  color: #06bf04;
+  border-color: #0c3
+}
+
+.tag.tag-orange {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-orangef60 {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-white {
+  color: #333;
+  border-color: #bbb
+}
+
+.tag.tag-blue {
+  color: #38f;
+  border-color: #38f
+}
+
+.tag.tag-red {
+  color: #ed5050;
+  border-color: #ed5050
+}
+
+.tag.tag-pink {
+  color: #ee614b;
+  border-color: #ee614b
+}
+
+.tag.disabled {
+  background-color: #ddd !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  color: #fff !important
+}
+
+.line-block::before {
+  content: '';
+  display: block;
+  margin: 10px
+}
+
+.line-block .lineblock-title {
+  display: block;
+  text-align: center;
+  margin-top: -17px;
+  margin-bottom: 17px;
+  line-height: 14px
+}
+
+.line-block .lineblock-font {
+  display: inline-block;
+  padding: 0px 10px;
+  background-color: #fff;
+  color: #22C415
+}
+
+.line-block.line-block-red::before {
+  border-top: 1px solid #F33
+}
+
+.line-block.line-block-red .lineblock-font {
+  color: #F33
+}
+
+.line-block.line-block-green::before {
+  border-top: 1px solid #22C415
+}
+
+.line-block.line-block-green .lineblock-font {
+  color: #22C415
+}
+
+.line-block.line-block-gray::before {
+  border-top: 1px solid #eee
+}
+
+.line-block.line-block-gray .lineblock-font {
+  color: #999;
+  background-color: #f8f8f8
+}
+
+.content {
+  min-height: 480px
+}
+
+.common-banner {
+  padding: 0 10px
+}
+
+.common-banner>a {
+  display: block
+}
+
+.common-banner img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto
+}
+
+.internal-purchase .shop-card {
+  margin-top: 206px
+}
+
+.components-container {
+  margin: 0;
+  padding: 0
+}
+
+.goods-price {
+  padding: 10px 10px 2px;
+  text-align: left
+}
+
+.goods-price i {
+  font-weight: normal;
+  font-style: normal;
+  font-size: 18px;
+  vertical-align: baseline
+}
+
+.goods-price em {
+  color: #999;
+  font-style: normal
+}
+
+.goods-price.goods-has-wish {
+  margin-right: 75px
+}
+
+.current-price {
+  color: #f60;
+  display: inline-block;
+  font-size: 14px
+}
+
+.current-price>span {
+  display: inline-block;
+  vertical-align: middle
+}
+
+.current-price .price {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 18px
+}
+
+.current-price.activity-price {
+  color: #ed5050
+}
+
+.current-price span {
+  font-size: 16px
+}
+
+.price-tag {
+  background: #fa3232;
+  color: #fff;
+  display: inline-block;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 16px;
+  vertical-align: middle
+}
+
+.old-price {
+  vertical-align: middle;
+  display: inline-block;
+  margin-left: 5px;
+  font-size: 14px;
+  color: #999;
+  text-decoration: line-through
+}
+
+.original-price {
+  text-decoration: line-through;
+  vertical-align: middle;
+  color: #999;
+  font-size: 12px;
+  margin: 5px 0 10px;
+  display: block
+}
+
+.content-body hr {
+  margin: 0;
+  border: 0 none;
+  position: relative
+}
+
+.content-body hr::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: auto;
+  top: auto;
+  height: 1px;
+  width: 100%;
+  background-color: #e5e5e5;
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  -moz-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  transform-origin: 50% 100%
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .content-body hr::after {
+    -webkit-transform: scaleY(0.5);
+    -moz-transform: scaleY(0.5);
+    -ms-transform: scaleY(0.5);
+    transform: scaleY(0.5)
+  }
+}
+
+.content-body hr.with-margin {
+  margin: 0 10px
+}
+
+.content-body hr.with-margin-l {
+  margin-left: 10px
+}
+
+.qrcode-container {
+  background-color: #fff
+}
+
+.qrcode-container.active {
+  border-color: #f60
+}
+
+.qrcode-container .shop-detail {
+  padding-left: 30px;
+  text-align: center;
+  font-size: 16px;
+  color: #6dc016;
+  font-weight: normal;
+  background: url("/v2/image/wap/weixin_logo.png") 10px top no-repeat
+}
+
+.qrcode-container .weixin-title {
+  font-size: 14px
+}
+
+.custom-richtext {
+  overflow-x: auto
+}
+
+.external-buy {
+  display: none;
+  padding: 9px 0;
+  border-top: 1px solid #eee;
+  text-align: center
+}
+
+.btn.butn-qrcode {
+  font-size: 18px !important;
+  line-height: 18px;
+  text-align: center;
+  width: 154px !important;
+  height: 42px;
+  background: #f60;
+  text-indent: 10px;
+  color: #fff;
+  background-color: #f15a0c;
+  position: relative;
+  border-radius: 0;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px
+}
+
+.btn.butn-qrcode:before {
+  content: '\A';
+  position: absolute;
+  top: -1px;
+  right: -21px;
+  width: 0;
+  height: 0;
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 20px solid #f15a0c;
+  z-index: 10
+}
+
+.btn.butn-qrcode:hover,
+.btn.butn-qrcode:active {
+  color: #fff;
+  background-color: #f15a0c
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .wap-page-goods .qrcode-container .shop-detail {
+    background-image: url("/v2/image/wap/weixin_logo@2x.png");
+    background-size: 30px 24px
+  }
+}
+
+.tag {
+  display: inline-block;
+  background-color: transparent;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  text-align: center;
+  margin: 0;
+  color: #999;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 4px
+}
+
+.tag-big {
+  font-size: 14px;
+  line-height: 18px
+}
+
+.tag.tag-green {
+  color: #06bf04;
+  border-color: #0c3
+}
+
+.tag.tag-orange {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-orangef60 {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-white {
+  color: #333;
+  border-color: #bbb
+}
+
+.tag.tag-blue {
+  color: #38f;
+  border-color: #38f
+}
+
+.tag.tag-red {
+  color: #ed5050;
+  border-color: #ed5050
+}
+
+.tag.tag-pink {
+  color: #ee614b;
+  border-color: #ee614b
+}
+
+.tag.disabled {
+  background-color: #ddd !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  color: #fff !important
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.wrapper-form .form-item {
+  position: relative;
+  margin-top: 10px
+}
+
+.wrapper-form .form-item label {
+  position: absolute;
+  top: 1px;
+  left: 10px;
+  line-height: 45px;
+  z-index: 1;
+  color: #666
+}
+
+.wrapper-form .form-item textarea,
+.wrapper-form .form-item input {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  line-height: 18px;
+  padding: 12px 10px 12px 68px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 14px;
+  outline: none;
+  opacity: 1;
+  -webkit-appearance: none
+}
+
+.wrapper-form .form-item input[disabled='disabled'] {
+  background: #f8f8f8
+}
+
+.wrapper-form .form-item:first-child {
+  margin-top: 0
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.popout-box .header {
+  position: relative;
+  margin-bottom: 10px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .popout-box .header {
+    border-bottom-width: 1px
+  }
+}
+
+.popout-box .header h2 {
+  margin-bottom: 16px;
+  line-height: 16px;
+  font-size: 16px
+}
+
+.popout-box .action-container {
+  margin: 10px 0 0 0;
+  padding: 0
+}
+
+.popout-box .action-container .btn.btn-block {
+  font-size: 14px
+}
+
+.popout-login .wrapper-form {
+  padding-top: 10px
+}
+
+.popout-login .wrapper-form .verify-image {
+  position: absolute;
+  right: 0px;
+  top: 7px;
+  width: 80px;
+  height: 30px
+}
+
+.popout-login .wrapper-form .btn-auth-code {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 80px;
+  padding: 15px 4px;
+  border-radius: 5px
+}
+
+.popout-login .wrapper-form .txt-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0
+}
+
+.popout-login .wrapper-form .txt-cover-half {
+  right: 90px
+}
+
+.popout-login .wrapper-form .error {
+  margin-top: 10px;
+  word-break: break-word
+}
+
+.popout-login .bottom-tips {
+  padding-top: 16px;
+  font-size: 0
+}
+
+.popout-login .bottom-tips .inline-item {
+  padding: 0 10px;
+  border-right: 1px solid #e5e5e5;
+  font-size: 12px
+}
+
+.popout-login .bottom-tips .inline-item:last-child {
+  padding-right: 0px;
+  border-right: 0px none
+}
+
+.search-form {
+  position: relative;
+  padding: 7px 10px 7px 10px;
+  background-color: #efefef
+}
+
+.search-form .search-input {
+  width: 100%;
+  height: 30px;
+  padding-left: 30px;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  outline-width: 0px;
+  font-size: 14px
+}
+
+.search-form .search-input:focus {
+  -webkit-appearance: none
+}
+
+.search-form .search-cancel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 55px;
+  text-align: center;
+  line-height: 44px;
+  font-size: 16px;
+  color: #666
+}
+
+.search-form .search-icon {
+  position: absolute;
+  top: 6px;
+  left: 12px;
+  width: 30px;
+  height: 30px
+}
+
+.search-form .search-icon::before,
+.search-form .search-icon::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%
+}
+
+.search-form .search-icon::before {
+  margin-top: -7px;
+  margin-left: -8px;
+  width: 10px;
+  height: 10px;
+  border: 1px solid #a3a3a3;
+  background: transparent;
+  border-radius: 12px
+}
+
+.search-form .search-icon::after {
+  margin-top: 2px;
+  margin-left: 3px;
+  width: 2px;
+  height: 7px;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  background-color: #a3a3a3
+}
+
+.search-form .close-icon {
+  position: absolute;
+  top: 2px;
+  right: 55px;
+  height: 40px;
+  width: 40px;
+  border-radius: 100px;
+  background: #a3a3a3;
+  -webkit-transform: scale(0.42);
+  -moz-transform: scale(0.42);
+  -ms-transform: scale(0.42);
+  transform: scale(0.42);
+  -webkit-tap-highlight-color: transparent
+}
+
+.search-form .close-icon::before,
+.search-form .close-icon::after {
+  content: '';
+  height: 6px;
+  width: 28px;
+  display: block;
+  background: #fff;
+  border-radius: 10px;
+  position: absolute;
+  top: 17px;
+  left: 6px;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg)
+}
+
+.search-form .close-icon::after {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg)
+}
+
+.search-bar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  overflow: hidden;
+  background-color: #fff
+}
+
+.search-bar .search-form {
+  padding-right: 55px
+}
+
+.search-bar .history-list {
+  padding: 10px
+}
+
+.search-bar .history-list li {
+  float: left;
+  border: 1px solid #ddd;
+  padding: 5px;
+  margin: 0 10px 10px 0;
+  color: #666;
+  border-radius: 3px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 18px
+}
+
+.search-bar .search-recom-list li {
+  float: left;
+  width: 50%;
+  padding-bottom: 5px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-bottom: 1px solid #ddd;
+  text-align: left;
+  border-radius: 0;
+  font-size: 14px;
+  line-height: 30px
+}
+
+.search-bar .search-recom-list li p {
+  padding: 5px;
+  white-space: nowrap;
+  word-break: keep-all;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.search-bar .search-recom-list li p b {
+  font-weight: bold
+}
+
+.search-bar .tag.tag-clear {
+  width: 145px;
+  height: 40px;
+  margin-top: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  border: 1px solid #666;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+#store_search_box .close-icon {
+  right: 8px
+}
+
+.item-info {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5;
+  position: relative;
+  padding: 15px 10px;
+  background-color: #fff;
+  display: block;
+  line-height: 1.5;
+  padding-left: 24px;
+  margin-left: 10px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAkCAMAAADfNcjQAAAAclBMVEUAAABoaGhnZ2dmZmZmZmZ3d3dnZ2doaGhnZ2dubm5tbW1mZmZmZmZnZ2dnZ2dmZmZnZ2dmZmZoaGhoaGhmZmZpaWlnZ2dpaWlmZmZmZmZmZmZmZmZmZmZmZmZnZ2dpaWlra2tpaWlnZ2dnZ2dnZ2dmZmZ+ArEjAAAAJXRSTlMAGPPkyAa+ZawSDJaAWffazWlTR0E4LRzt4N7TwLmcJyYinoV31igZuAAAAWVJREFUOMt1k9uagjAMhNu0hXIQUEA8raur//u/4qKCeKBzRTJJJhO+qgmuzqJSpIyy2qlv6Ex4QjL9QbtcoMqbU5qemrwCyd1buwX/O8W/HuzLkLVh16o3tDvM+tlvOCTqA8kBowd9y2FmbXfAPtI5u0TNINmR3wWEVs2iRW4iGV4F4Ml6KWHyF1sRG09uEadqqqebiDui5wUq6l4hH8MIs9B6YYjGTE7WZ5txPubuJjGMKk1fW3IaIsvi8bHADqkTpRLSIRIGbY0MqRRRBS5c4CiUQYclNKZ30oaXbKnUkWXY5pJj3/cTPtQPsdJwDp36DPpWdVEBXO7Ta0w6z6eG+mHvb77gb7C7LljN8SuK9Whm033z3WY6gKfsvvgSP22zZ3t+589b9i+7J3Z8JtNTssmbo4ginsK4IPrw7o7gx9/t4ei+XW2Qa592V2Ez67vzsF0ut+A7NY9mD7BvVBgraz+m/wNtUx5LFJsTHQAAAABJRU5ErkJggg==);
+  background-repeat: no-repeat;
+  background-size: 16px 18px;
+  background-position: left 16px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .item-info {
+    border-bottom-width: 1px
+  }
+}
+
+.item-info.right-arrow::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 13px;
+  margin-top: -6px;
+  width: 6px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAMAAAD57OxYAAAAPFBMVEUAAACZmZmlpaWampqZmZmampqampqampqampqbm5ubm5ucnJyZmZmfn5+bm5uZmZmampqampqbm5uZmZnmDXU5AAAAE3RSTlMA8Qjo3dHCn4lPPi8jGA+ysXRhTrGNsAAAAFxJREFUGNNl0EcOwCAMRNEUekv5979r2Bgr4BVPQrbH27/Cq+8H4oCHPQmOqysPOTiLqFkwVVQN2CYqJ7hDlHe4BVvq8kMRCCv0mzZYW+tQXUcXnSNoOI09H2StDz/YBU9Q8POZAAAAAElFTkSuQmCC) no-repeat;
+  background-size: 6px 12px
+}
+
+.item-name {
+  line-height: 20px;
+  margin-bottom: 5px;
+  font-size: 14px
+}
+
+.item-address {
+  font-size: 12px;
+  color: #666;
+  margin-right: 20px
+}
+
+.list-finished,
+.loading-more {
+  width: 100%;
+  padding: 20px 10px;
+  vertical-align: middle;
+  text-align: center;
+  color: #999;
+  font-size: 12px;
+  line-height: 20px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.list-finished span,
+.loading-more span {
+  display: inline-block;
+  margin-top: 10px;
+  width: 16px;
+  height: 16px;
+  background: url("/v2/image/loader.gif") no-repeat center center;
+  background-size: 16px 16px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .list-finished span,
+  .loading-more span {
+    background-image: url("/v2/image/loader@2x.gif")
+  }
+}
+
+.ui.overview {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -moz-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  text-align: center;
+  padding: 10px 0
+}
+
+.ui.overview .item {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 10px;
+  position: relative;
+  width: 100%;
+  float: left;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-right: 2px solid #e5e5e5
+}
+
+.ui.overview .item .value {
+  font-size: 16px;
+  line-height: 20px
+}
+
+.ui.overview .item .value span:first-child {
+  font-weight: 100
+}
+
+.ui.overview .item .value .corner {
+  vertical-align: top;
+  font-size: 12px;
+  display: inline-block;
+  margin-top: -4px
+}
+
+.ui.overview .item .label {
+  font-size: 12px;
+  line-height: 20px;
+  color: #000
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .ui.overview .item {
+    border-right-width: 1px
+  }
+}
+
+.ui.overview .item:last-child {
+  border: none
+}
+
+.ui.overview.one .item {
+  width: 100%
+}
+
+.ui.overview.two .item {
+  width: 50%
+}
+
+.ui.overview.three .item {
+  width: 33.33333%
+}
+
+.ui.overview.four .item {
+  width: 25%
+}
+
+.ui.overview.five .item {
+  width: 20%
+}
+
+.ui.overview.border {
+  border: 1px solid #eee
+}
+
+.ui.overview.border-bottom {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .ui.overview.border-bottom {
+    border-bottom-width: 1px
+  }
+}
+
+.ui.overview.red {
+  border-color: #ed5050
+}
+
+@font-face {
+  font-family: "iconfont";
+  src: url("https://b.yzcdn.cn/youzan-icon/font/iconfont-0.1.eot?t=1481088669367");
+  src: url("https://b.yzcdn.cn/youzan-icon/font/iconfont-0.1.eot?t=1481088669367#iefix") format("embedded-opentype"), url("https://b.yzcdn.cn/youzan-icon/font/iconfont-0.1.woff?t=1481088669367") format("woff"), url("https://b.yzcdn.cn/youzan-icon/font/iconfont-0.1.ttf?t=1481088669367") format("truetype"), url("https://b.yzcdn.cn/youzan-icon/font/iconfont-0.1.svg?t=1481088669367#iconfont") format("svg")
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale
+}
+
+.icon-certificate:before {
+  content: "\e602"
+}
+
+.icon-search:before {
+  content: "\e603"
+}
+
+.icon-gift:before {
+  content: "\e604"
+}
+
+.icon-cancel:before {
+  content: "\e605"
+}
+
+.icon-left-arrow:before {
+  content: "\e606"
+}
+
+.icon-shopping-cart:before {
+  content: "\e607"
+}
+
+.icon-location:before {
+  content: "\e608"
+}
+
+.icon-service:before {
+  content: "\e609"
+}
+
+.icon-store:before {
+  content: "\e60a"
+}
+
+.orange-btn {
+  background: #f85;
+  color: #fff;
+  position: relative
+}
+
+.orange-btn::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid #E57A4C
+}
+
+.orange-btn:active {
+  background: #DD6F44
+}
+
+.red-btn {
+  background: #f44;
+  color: #fff;
+  position: relative
+}
+
+.red-btn::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid #E53D3D
+}
+
+.red-btn:active {
+  background: #D43333
+}
+
+.disabled-btn {
+  background: #e5e5e5;
+  color: #999;
+  position: relative
+}
+
+.disabled-btn::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid #cdcdcd
+}
+
+.warning-bar {
+  margin: 0;
+  height: 35px;
+  line-height: 35px;
+  background: #FFF7CC !important
+}
+
+.new-btn {
+  font-size: 10px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  float: left;
+  background-color: #fff
+}
+
+.new-btn:active {
+  background-color: #F8F8F8
+}
+
+.new-btn .desc {
+  font-size: 10px;
+  position: absolute;
+  line-height: normal;
+  left: 0;
+  bottom: 5px;
+  width: 100%;
+  color: #666;
+  text-align: center
+}
+
+.big-btn {
+  height: 50px;
+  line-height: 50px;
+  font-size: 16px;
+  float: left;
+  padding: 0;
+  border: none;
+  vertical-align: top
+}
+
+.big-btn-1-1 {
+  overflow: hidden;
+  text-align: center
+}
+
+.big-btn-1-1 .big-btn {
+  width: 100%
+}
+
+.big-btn-2-1 {
+  font-size: 0;
+  overflow: hidden;
+  text-align: center
+}
+
+.big-btn-2-1 .big-btn {
+  width: 50%
+}
+
+.buy-cart {
+  position: relative
+}
+
+.buy-cart::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1)
+}
+
+.buy-cart .icon-shopping-cart {
+  display: block;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 18px;
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  margin-left: -10px;
+  color: #666
+}
+
+.buy-cart-msg::before {
+  content: "";
+  height: 8px;
+  width: 8px;
+  border-radius: 8px;
+  background: #ff4444;
+  position: absolute;
+  top: 7px;
+  left: 50%;
+  margin-left: 7px;
+  z-index: 2
+}
+
+.service {
+  position: relative
+}
+
+.service::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1)
+}
+
+.service .icon-service {
+  display: block;
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 20px;
+  color: #ff4444;
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  margin-left: -10px
+}
+
+.service-msg::before {
+  content: "";
+  height: 8px;
+  width: 8px;
+  border-radius: 8px;
+  background: #ff4444;
+  position: absolute;
+  top: 7px;
+  left: 50%;
+  margin-left: 7px;
+  z-index: 2
+}
+
+.gift {
+  position: relative
+}
+
+.gift::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1)
+}
+
+.gift .icon-gift {
+  display: block;
+  width: 20px;
+  height: 20px;
+  font-size: 18px;
+  line-height: 20px;
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  margin-left: -10px;
+  color: #666
+}
+
+.point {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAoCAMAAACo9wirAAAAY1BMVEUAAABpaWloaGhmZmZmZmZnZ2dycnJnZ2dnZ2dmZmZmZmZnZ2dtbW1ra2toaGhmZmZmZmZlZWVmZmZmZmZnZ2dmZmZpaWlmZmZoaGhmZmZmZmZmZmZmZmZnZ2dkZGRmZmZmZmYJ5zNiAAAAIHRSTlMAGVzpy8YH+sDv4NoVEQ705Luok4ptKF9MsX94VUgzS+0p87kAAAD3SURBVDjL7ZRJrsMgEEQZDBgDnqfMdf9T/v6xpYTEFllmkbcAS1UGuqUu9jlc9I2TxkjX9IK/qnpQiFCDftYHCVSH0zx6rf04nw4VIIfH4TmgztEf+qyAnK+6Qz2zN+YabnFkyALbIJDwvwsUJdukLCBoy2ndQSCnVYLvtgYyaUhekXzkWibfvICE5aOA6d/13qDgi6EGUHUhalJXAajvBq2gWhCyOV7Gshwvx0aCaEnQZJjgAvOtRYRtPQsOExnUWua1y6wBYWzWXZ/KtPBsBw/76+R2Jw1gvrWTu6OXHN70+McBclsC5LYGSDqCYvj0CLGJs4/5AxbWIm2lZulWAAAAAElFTkSuQmCC");
+  background-size: 18px;
+  background-repeat: no-repeat;
+  background-position: 50% 7px;
+  position: relative
+}
+
+.point::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1)
+}
+
+.promotion {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAY1BMVEUAAAD/RET/RET/RET/RUX/RUX/RET/Rkb/Rkb/R0f/UFD/VVX/WVn/RUX/RUX/RUX/RET/RUX/RUX/RET/RUX/RUX/RET/Rkb/RET/Rkb/Rkb/Rkb/R0f/R0f/RUX/RET/RET/klPVAAAAIHRSTlMAnffs3LSZPyIZEAkFZe7q48vIv6OUg4BwbVdQSEE0LcnOiicAAAG2SURBVFjD7dfJbsIwFEbha2eeGFvm4bz/UzZ0E1VQ/7d0hcTZREjRJ5I4jm3v3r1O1325zrNo3215kEepwvzn2dunoEN+f/b279B5ya1Y7E5129ujggOqC8Zm4djZrwU0VGVA3LRmaScIaIhA2Zh0LAn1n8DiYg4nDd2cVeNx0tAAfHQeJw1VcXTM46ShOoOV6/8IqICF6/4I6Ay4npeCllB6HAUdIHrGoYRy2DgcCVUwa7WjoQDB40xtH0NzODqdSXo0P0PsnM4k2X17KJTjqoSdcHyt4SQcXznUwvGVQSscXxF64TwHaaeHqC9NO9ZCpm+2dqyGXD9+7dgJ1npAasd2UOpXRDtWwF6/tNrpIlw908ggxs8R5uaa2ML0W5yvptoh5bQzqExO/rrN9yhSnyNdE+Fgpj6QuhKW40F8snUX4DwexSJC1iym4ZtY1si6FWS1jYmFluoD4vTon176daPDYCK9GG1WwKdy9PL4srg5vWDkgr0pgSiuS28h2k0EMnGf1aamO4YZY0XiuYttVt/Wp10RubVMjGe58ZvK795T/1Z0ah6qf26OY5avy/3V3r17mb4A97lDYil581IAAAAASUVORK5CYII=");
+  background-size: 24px;
+  background-repeat: no-repeat;
+  background-position: 50% 5px;
+  position: relative
+}
+
+.promotion::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1)
+}
+
+.mini-btn-1-1,
+.mini-btn-2-1,
+.mini-btn-3-1,
+.big-mini-btn-1-1,
+.big-mini-btn-2-1 {
+  font-size: 0;
+  padding: 0
+}
+
+@media screen and (min-width: 768px) {
+  .mini-btn-1-1 {
+    float: left;
+    width: 70px
+  }
+  .mini-btn-1-1 .new-btn {
+    width: 70px
+  }
+  .mini-btn-2-1 {
+    float: left;
+    width: 120px
+  }
+  .mini-btn-2-1 .new-btn {
+    width: 60px
+  }
+  .mini-btn-3-1 {
+    float: left;
+    width: 129px
+  }
+  .mini-btn-3-1 .new-btn {
+    width: 43px
+  }
+  .presale-btn {
+    position: relative
+  }
+  .presale-btn .left-desc-btn {
+    position: absolute;
+    left: 10px !important
+  }
+  .presale-btn .right-buy-btn {
+    right: 10px !important
+  }
+}
+
+@media screen and (max-width: 321px) {
+  .mini-btn-1-1 {
+    float: left;
+    width: 70px
+  }
+  .mini-btn-1-1 .new-btn {
+    width: 70px
+  }
+  .mini-btn-2-1 {
+    float: left;
+    width: 120px
+  }
+  .mini-btn-2-1 .new-btn {
+    width: 60px
+  }
+  .mini-btn-3-1 {
+    float: left;
+    width: 129px
+  }
+  .mini-btn-3-1 .new-btn {
+    width: 43px
+  }
+  .presale-btn {
+    position: relative
+  }
+  .presale-btn .left-desc-btn {
+    position: absolute;
+    left: 10px !important
+  }
+  .presale-btn .right-buy-btn {
+    right: 10px !important
+  }
+}
+
+@media screen and (min-width: 321px) and (max-width: 413px) {
+  .mini-btn-1-1 {
+    float: left;
+    width: 70px
+  }
+  .mini-btn-1-1 .new-btn {
+    width: 70px
+  }
+  .mini-btn-2-1 {
+    float: left;
+    width: 140px
+  }
+  .mini-btn-2-1 .new-btn {
+    width: 70px
+  }
+  .mini-btn-3-1 {
+    float: left;
+    width: 144px
+  }
+  .mini-btn-3-1 .new-btn {
+    width: 48px
+  }
+}
+
+@media screen and (min-width: 413px) and (max-width: 767px) {
+  .mini-btn-1-1 {
+    float: left;
+    width: 80px
+  }
+  .mini-btn-1-1 .new-btn {
+    width: 80px
+  }
+  .mini-btn-2-1 {
+    float: left;
+    width: 160px
+  }
+  .mini-btn-2-1 .new-btn {
+    width: 80px
+  }
+  .mini-btn-3-1 {
+    float: left;
+    width: 174px
+  }
+  .mini-btn-3-1 .new-btn {
+    width: 58px
+  }
+}
+
+.sku-layout .content-foot {
+  padding: 0 !important;
+  width: 100% !important
+}
+
+.sku-layout .layout-content {
+  border: none !important
+}
+
+.bottom-fix {
+  border-top: 0;
+  bottom: -1px
+}
+
+.presale-btn {
+  position: relative
+}
+
+.presale-btn .left-desc-btn {
+  font-size: 10px;
+  position: absolute;
+  left: 8%
+}
+
+.presale-btn .multi-line {
+  height: 30px;
+  margin-top: 10px;
+  line-height: 15px;
+  text-align: left
+}
+
+.presale-btn .right-buy-btn {
+  position: absolute;
+  right: 8%
+}
+
+.price-intro {
+  height: 44px;
+  overflow: hidden;
+  padding-left: 15px;
+  border-bottom: 1px solid #eee;
+  background-color: #fff
+}
+
+.price-intro.js-unfold {
+  height: auto
+}
+
+.price-intro.js-unfold>h4 {
+  border-bottom: 1px solid #eee
+}
+
+.price-intro.js-unfold .icon-arrow {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-top: 1px solid #999;
+  border-right: 1px solid #999;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  transform: rotate(135deg)
+}
+
+.price-intro .icon-arrow {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-top: 1px solid #999;
+  border-right: 1px solid #999;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: 17px;
+  right: 10px
+}
+
+.price-intro>h4 {
+  position: relative;
+  height: 44px;
+  line-height: 44px;
+  font-size: 14px;
+  color: #999;
+  cursor: pointer
+}
+
+.price-intro>p {
+  margin: 15px 15px 15px 0;
+  line-height: 20px;
+  font-size: 12px;
+  color: #999
+}
+
+.goods-detail {
+  margin-top: 5px
+}
+
+.line-block-pinjian {
+  margin-top: 20px
+}
+
+.line-block-pinjian::before {
+  margin: 10px 0;
+  border-top: 1px solid #e5e5e5
+}
+
+.line-block-pinjian .lineblock-title {
+  margin-bottom: 0
+}
+
+.line-block-pinjian .lineblock-font {
+  padding: 0 30px;
+  color: #f60
+}
+
+.report-detail-container.pd0 {
+  padding: 0
+}
+
+.report-detail-container.no-border {
+  border: 0px none
+}
+
+.goods-loading {
+  min-height: 40px
+}
+
+.block-list-traderecord {
+  padding-left: 0;
+  margin-bottom: 30px;
+  background-color: #fff;
+  width: 100%;
+  border-top: 0px none
+}
+
+.block-list-traderecord.empty .list-finished {
+  padding: 90px 10px;
+  font-size: 14px
+}
+
+.block-list-traderecord.empty .b-list {
+  display: none
+}
+
+.block-list-traderecord .list-header,
+.block-list-traderecord .block-item {
+  display: table;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.block-list-traderecord .list-header span,
+.block-list-traderecord .block-item span {
+  display: table-cell;
+  font-size: 12px
+}
+
+.block-list-traderecord .list-header .col-1,
+.block-list-traderecord .block-item .col-1 {
+  width: 34%
+}
+
+.block-list-traderecord .list-header .col-2,
+.block-list-traderecord .block-item .col-2 {
+  width: 33%
+}
+
+.block-list-traderecord .list-header .col-3,
+.block-list-traderecord .block-item .col-3 {
+  width: 33%
+}
+
+.block-list-traderecord .list-header {
+  padding: 0 10px;
+  height: 33px;
+  line-height: 33px;
+  background-color: #f2f2f2;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .block-list-traderecord .list-header {
+    border-bottom-width: 1px
+  }
+}
+
+.block-list-traderecord .list-header .col-1 {
+  text-indent: 12px
+}
+
+.block-list-traderecord .b-list {
+  border-top: 0px none
+}
+
+.block-list-traderecord .b-list .block-item.header {
+  background-color: #f2f2f2
+}
+
+.block-list-traderecord .b-list .col-1 {
+  text-indent: 5px
+}
+
+.trade-review-list {
+  display: block
+}
+
+.trade-review-list .loading {
+  height: 18px
+}
+
+.trade-review-list .review-rate-tabber {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  border-top: 0px none;
+  background-color: #f2f2f2
+}
+
+.trade-review-list .review-rate-tabber .item {
+  width: 25%;
+  float: left;
+  text-align: center
+}
+
+.trade-review-list .review-rate-tabber button {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  float: none;
+  height: 20px;
+  width: 88%;
+  line-height: 16px;
+  padding-left: 3px;
+  padding-right: 3px;
+  border-bottom: 0px none;
+  border-radius: 2px;
+  background-color: #f2f2f2;
+  font-size: 12px;
+  color: #666
+}
+
+.trade-review-list .review-rate-tabber button.active {
+  background-color: #f60;
+  color: #fff
+}
+
+.trade-review-list .review-profile {
+  padding: 10px 25px 10px 15px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .trade-review-list .review-profile {
+    border-bottom-width: 1px
+  }
+}
+
+.trade-review-list .review-avatar-container {
+  width: 267px;
+  max-height: 142px;
+  margin: auto;
+  overflow: hidden
+}
+
+.trade-review-list .profiles {
+  margin-left: -6px;
+  margin-top: 5px
+}
+
+.trade-review-list .image-circle,
+.trade-review-list .name-circle {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  margin: 5px 0px 5px 6px;
+  border-radius: 14px;
+  float: left
+}
+
+.trade-review-list .name-circle {
+  display: inline-block;
+  line-height: 28px;
+  border: 1px solid #f60;
+  color: #f60;
+  text-align: center
+}
+
+.report-detail-container .btn-more {
+  margin-top: 10px
+}
+
+.review-detail-container .block-item,
+.report-detail-container .block-item {
+  padding: 10px 10px 10px 0
+}
+
+.review-detail-container .block-item:first-child,
+.report-detail-container .block-item:first-child {
+  border-top: 0px none
+}
+
+.review-detail-container .loading-more,
+.report-detail-container .loading-more {
+  padding-left: 0px
+}
+
+.review-detail-container .review-item .thumb,
+.report-detail-container .review-item .thumb {
+  width: 42px;
+  height: 42px
+}
+
+.review-detail-container .review-item .thumb img,
+.report-detail-container .review-item .thumb img {
+  height: 100%;
+  border-radius: 42px
+}
+
+.review-detail-container .review-item .thumb span,
+.report-detail-container .review-item .thumb span {
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 42px;
+  height: 42px;
+  line-height: 42px;
+  border-radius: 42px;
+  border: 1px solid #f60
+}
+
+.review-detail-container .review-item .detail,
+.report-detail-container .review-item .detail {
+  margin-left: 54px;
+  margin-top: 3px
+}
+
+.review-detail-container .review-item .detail h3,
+.report-detail-container .review-item .detail h3 {
+  line-height: 18px;
+  font-size: 14px
+}
+
+.review-detail-container .review-item .detail p,
+.report-detail-container .review-item .detail p {
+  margin-top: 2px
+}
+
+.review-detail-container .img-container,
+.report-detail-container .img-container {
+  margin-top: 0px;
+  margin-left: -6px;
+  font-size: 0px;
+  line-height: 0px
+}
+
+.review-detail-container .img-container img,
+.report-detail-container .img-container img {
+  width: 96px;
+  height: 96px;
+  margin-left: 6px;
+  margin-top: 5px
+}
+
+.review-detail-container .other,
+.report-detail-container .other {
+  margin-top: 6px;
+  color: #ccc
+}
+
+.review-detail-container .like,
+.review-detail-container .comment,
+.report-detail-container .like,
+.report-detail-container .comment {
+  display: inline-block;
+  vertical-align: text-bottom;
+  margin: 0px 3px 0 17px
+}
+
+.review-detail-container .like,
+.report-detail-container .like {
+  width: 15px;
+  height: 17px;
+  background: url("/v2/image/wap/trade/reviews/reviews_628a8d4a7d.png") no-repeat;
+  background-size: 98px 92px;
+  background-position: -30px -60px
+}
+
+.review-detail-container .comment,
+.report-detail-container .comment {
+  width: 16px;
+  height: 13px;
+  background: url("/v2/image/wap/trade/reviews/reviews_628a8d4a7d.png") no-repeat;
+  background-size: 98px 92px;
+  background-position: -60px -44px
+}
+
+.review-detail-container .like-item.active,
+.report-detail-container .like-item.active {
+  color: #f60
+}
+
+.review-detail-container .like-item.active .like,
+.report-detail-container .like-item.active .like {
+  background-position: 0 -60px
+}
+
+.review-detail-container .seller-reply,
+.report-detail-container .seller-reply {
+  position: relative;
+  margin-top: 10px;
+  margin-left: -6px;
+  padding: 10px 9px;
+  background-color: #f2f2f2;
+  font-size: 0px;
+  line-height: 0px
+}
+
+.review-detail-container .seller-reply:before,
+.report-detail-container .seller-reply:before {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: 14px;
+  border-width: 0px 4px 5px 4px;
+  border-color: transparent transparent #f2f2f2 transparent;
+  border-style: solid
+}
+
+.review-detail-container .seller-reply .reply-text,
+.report-detail-container .seller-reply .reply-text {
+  margin-left: 6px;
+  line-height: 18px;
+  color: #e88161
+}
+
+.review-detail-container .seller-reply .reply-image,
+.report-detail-container .seller-reply .reply-image {
+  margin-top: 6px;
+  margin-left: 6px;
+  width: 90px;
+  height: 90px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .review-item .like,
+  .review-item .comment {
+    background-image: url("/v2/image/wap/trade/reviews/reviews@2x_628a8d4a7d.png")
+  }
+}
+
+.goods-store.block-list .custom-store-img {
+  left: 0px
+}
+
+.goods-store.block-list .offline-store .offline-store-img {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px
+}
+
+.goods-store.block-list .offline-store .offline-store-name {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 5px
+}
+
+.goods-store.block-list .offline-store .offline-store-enter {
+  font-size: 12px;
+  color: #999;
+  padding-right: 15px
+}
+
+.goods-store.block-list .offline-store .offline-store-branch {
+  margin-top: 5px;
+  font-size: 12px;
+  color: #999
+}
+
+.goods-store.block-list .renzheng .rz-item {
+  padding-right: 16px;
+  white-space: nowrap
+}
+
+.goods-store.block-list .renzheng .rz-item::before {
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
+  width: 13px;
+  height: 13px
+}
+
+.goods-store.block-list .renzheng .rz-name {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 3px
+}
+
+.goods-store.block-list .renzheng .rz-item::before {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAArhJREFUSA3dljFoU0EYx/8vSdOKdHSwuHUR6ugoQmNTCAVNd5eOOggOFTdxK3YQBF27uCkYhRJotAVxdFRwcZMujiKkNcn5/1/ed7k8k/QpkqE3vLt3932//33v7r57wGkvSZ4Aawe40OniBm3XHLDIeiH1OyTgK9u7pSJeN5fxLe0fW00UrH4guI2HcNigUHEshQMEdfnYwRwetK7gcJztWMHqPq67Hp5TbJ6gXzRsOIdGOcHHs8U+8GcXC8cOl5MEdU6oTtsZ2v5ICrjZquDNKNGRgqtvcYfwx4QUCHtVSrDZvOY/3SiG76u9w2LHYZt+64T26Hd3bwVPsg5/CKaRNRIHx8H7e1VsZ50mva+2sMmJbnmbItazkQ4Jas1cG1/0GQvAvb8Vs4lItAc88p93DhfjNSU3Kv0NMq/P+K9ioslXDL/+YkYlCGrr02BDG0RrFtnkatbe49xKC7fM2DPIEtOz04EgqHOmrc9v3DhpgxjUaol1jrDP92cmKoZYYqZn2JsHQb6tqUdb34/kfJgYwZco8GlmFi/NNWJ5tvqDIB2UQaBzpjpP8WLHODCx0iwqzav4br7GMrb6gyDbPl3ZoTYnnsnbAtu71UHMYUmRZcVkF7EsFQ4JGivUEus5PO0wilg0j5ggR8o7mRJH6POf0pXZFMt4we39mWuxZKJDYhwbFZn5d9o4n7ZDbg2CnIqyPpQbzUHrUSpjORaVsCbgPyPH4jUzP6uNZWz1B0G2d9VBeF21layoFzshMvONWJ6t/iCo+4wz6XJH1ZWIzUl1LKpoFfWkyOQjhlhiiq0+lSDoL0/dZ7xilPX7w4OnBJIzqOQRk5dn9K+rnfhi5gQGZerJW1ldlydnwdOALWX9wXTytex6EsNfxJnbfyhCQ071AjbRqf5iBNFp/kSZqOr/+ZsYc09n+zcFilpmjjvmggAAAABJRU5ErkJggg==");
+  background-repeat: no-repeat;
+  background-size: 13px 13px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .goods-store.block-list .renzheng .rz-item::before {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAABLhJREFUWAntmE1oVUcYht9zE2OLG7spNNTuu25XNw2lTXJBLBixP3Rr47KWIrhohXZhuxBE1KU/24IaVKgUcpOqpLmrdu1eIYVu6qaoaXKP7zvnfNM5k8n15twIhubAvTNn5pvvfc43P2fmADvX/zQC2SDPfWARr608xYEcmKKft/gbLX9yu1z+HlCkPbIbt2+P429V1LlqgU4t4FCe40sKjiPHcF/CGVZpt5hluNCewI2+2gRGmwKd+hVj6OI0IZuBj01nCdtBAyfaH2Kp38Z9gX6SY+jRAs4Q8KvQMRt32e0dCt8cyvFHI8PyniHX5fhnDaOsHF3L8A7bTdO2SdtGpX2Gc3sncPxahrWwPJV/Luj0Heyl6FWKaRwWV4YnbHg+exVn5sbwlxX3SltLeD1/jOOEPcbh8orZ8iHbfLhPb36AR1aWSnuCOshVdOj8bd84w2xjF76eex8PfdkmMq172Nf9F2cJe9iaEeL+nmE0e8FuCFp29y8+khlyGp9sT+JHExgknZrHNwzAKQI7BkWWw2D/RsOgMmZC4XJMFt1NSBp+vlWQ0pEv+SQmeQEFRJrKp65kRDW78zX8Zg34tN9uJaT5Veoim+MHK8uG8F5qNUhHlEuQNeQTz74oSGk439TweqG2L4yWC5WXi3mxTnJ2a+IE9i8k6zSoJeccAk0xxELrIkpDvXHcxXFxvu7sNh9hSt8Zu/pSq43vw3JpSMvKQgYrq4Dq3c2KcVWyYVfrpBkOmgqytYCLTL/oAt/FsNKSZqkzXrJ42Qroygo+4hx0725OxU6/i7n3tkHGRXIBlwRpJlzr3rS8UmlJ05WRwbEEBhVQPo9/++i1GNjVzlokGYAj5oS+L89N4Kjd+7SBWz4fsKisAsqn3GeGendbvm6aiqRBMnXrZ+h7uIvf7T5kUVkFlPfaT7pLGwzL10kNMhXJFKQ0Ik3P4uoiCF9pu6CoHpoEk/O4LJC4zu7rQKptpOlZVBdven13PN21HkSQmrHqNK51WvNm4ujUhRSM09T2urg8i27jrv+zNMLqE7xheUu7wRhWlxJWM9lHdhBIaUSankV1Magfl9r0yiC8eISYIdYVXxbApiBlq9kdR923jzKRpmeRWaXrsxwPLd7ambP+rozskiCBZtTtfpIUsIVJsAQJUg/WL6QcrDbwrl/ygQeF0+K/GtEG2lZJoGnLh6mEU5H14DKuAek0ujhoWhxPnkVlFdCREfxMETecadjU8cEahmkS1gxqQkpLms4NGXS8NpdKK6DluXtRFRwCDZ1xlE9dSdiakPJfnqeMZzH+BmAVnoUAF+yGsMdaPOPYfZxWYAeAlIa0zH/I4MssE6bcii1xjFo3zM5P4uOwPs5rxqtM4HFdP/d8gVxnS3fYo48ON9Njcbt1EXUG/DjgDelAxwV/n8gIsC6k8x2cSDkY/9MOtJKgOrNQ+JzZMUynWvP4zO63KpVP+TZ/0kydl1SfBFWFvmCwYbFEsGv56vzpeZFVu34v+ZJPdrkNGx2XN568vRxviw8Q9gDb4pOOwW6Lj2QGq/Sl/+wYwjrgl/1DbgzsPo3r5MqDWHnG0dZQP13api1rR8a1pa19RPxadFY7fzsR6B2BZ3gZC5nkyYLJAAAAAElFTkSuQmCC")
+  }
+}
+
+.goods-store.block-list .offline-store .offline-store-img {
+  background-image: url("data:image/png;base64,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");
+  background-repeat: no-repeat;
+  background-size: 14px 16px
+}
+
+.store-arrow-right:after {
+  content: '';
+  position: absolute;
+  top: 15px;
+  right: 10px;
+  width: 6px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAMAAAD57OxYAAAAPFBMVEUAAACZmZmlpaWampqZmZmampqampqampqampqbm5ubm5ucnJyZmZmfn5+bm5uZmZmampqampqbm5uZmZnmDXU5AAAAE3RSTlMA8Qjo3dHCn4lPPi8jGA+ysXRhTrGNsAAAAFxJREFUGNNl0EcOwCAMRNEUekv5979r2Bgr4BVPQrbH27/Cq+8H4oCHPQmOqysPOTiLqFkwVVQN2CYqJ7hDlHe4BVvq8kMRCCv0mzZYW+tQXUcXnSNoOI09H2StDz/YBU9Q8POZAAAAAElFTkSuQmCC) no-repeat;
+  background-size: 6px 12px
+}
+
+.redpackets {
+  display: block
+}
+
+.redpackets__img {
+  margin: 0 auto;
+  max-width: 100%;
+  min-height: 1px;
+  width: auto;
+  height: auto;
+  vertical-align: middle
+}
+
+.tag.tag-redf30 {
+  color: #f30;
+  border-color: #f30
+}
+
+.tag.tag-red-bk {
+  color: #fff;
+  background-color: #f30
+}
+
+.goods-header {
+  display: block;
+  height: auto;
+  padding: 10px 0 0;
+  -webkit-tap-highlight-color: transparent;
+  border-top: 1px solid #f2f2f2;
+  background-color: #fff;
+  margin-bottom: 10px;
+  position: relative
+}
+
+.goods-header::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: auto;
+  top: auto;
+  height: 1px;
+  width: 100%;
+  background-color: #e5e5e5;
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  -moz-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  transform-origin: 50% 100%
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .goods-header::after {
+    -webkit-transform: scaleY(0.5);
+    -moz-transform: scaleY(0.5);
+    -ms-transform: scaleY(0.5);
+    transform: scaleY(0.5)
+  }
+}
+
+.goods-header.restore {
+  border-top-color: transparent;
+  background-color: #fff
+}
+
+.goods-header.restore .thumb {
+  display: block
+}
+
+.goods-header.restore .title {
+  padding-right: 5px
+}
+
+.goods-header .thumb {
+  display: none;
+  width: 50px;
+  height: 50px;
+  border: 1px solid #eee;
+  float: left;
+  margin: 2px 0 0 10px
+}
+
+.goods-header .thumb>img {
+  max-width: 100%;
+  max-height: 100%
+}
+
+.goods-header .title {
+  font-weight: normal;
+  margin: 0;
+  padding: 0 10px;
+  font-size: 16px;
+  line-height: 22px;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical
+}
+
+.goods-header .wish-add {
+  position: relative;
+  margin-top: -1px;
+  margin-right: 11px;
+  padding-left: 18px;
+  height: 12px;
+  line-height: 12px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none
+}
+
+.goods-header .wish-add:before {
+  content: '';
+  position: absolute;
+  top: 5px;
+  left: 4px;
+  width: 12px;
+  height: 10px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAMAAACgaw2xAAAAilBMVEUAAAD/ZwD/dAD/cAD/nQD/ZgD/ZwD/ZgD/ZwD/ZwD/aAD/ZgD/ZgD/aQD/aAD/agD/ZwD/ZgD/ZwD/ZgD/ZwD/ZwD/ZgD/ZgD/ZwD/aAD/bAD/ZwD/ZgD/ZgD/ZgD/ZgD/ZgD/ZwD/ZgD/ZgD/ZgD/agD/awD/ZgD/ZgD/ZwD/ZwD/ZgD/ZwD/ZgB8I7uZAAAALXRSTlMA+wYLAthR4n5rSfHpMSYc+O7MwbmpoXJgOBH13dTGvrORioNXGBPQpZqLQT4TqzsCAAAA00lEQVQY022P544DIRCDB1hgyfZe0utVv//rHbegKAn5fln2WBqTJetktTvPVvFhn+h2RY4TFlJFk3TywMkSozzn86oFGxJ8qFthUhysX5TMVWMAn8tpnsJa3+jJ0aPmThk0RA1+ycEvwivB1hGluFKARkEJRBhI5FQjC/yoZJw6mCDIoIkUNtFr0ONoaxLDa4Gxgv4rbuGdq8bRT16rBz/fovFDv4ATJ4+qsL2RxzDocXlh2gPdw7CpBuQoflqgMs+TLhJgQBKLYO24wyae6R1Px3+0jBJGO/lX3gAAAABJRU5ErkJggg==) no-repeat;
+  background-size: 12px 10px
+}
+
+.goods-header .wish-added {
+  background-color: #f30;
+  color: #fff
+}
+
+.goods-header .wish-added::before {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAMAAACgaw2xAAAAbFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8+T+BWAAAAI3RSTlMA99uX+fEK++vTk4opIBwZ5eDXtoWCcWNbOBLKuLeje3lLMTUPnhkAAACOSURBVBjTdc5XDoMwEADRAYPpvZMe3/+OcRAgkmze10ojexcrU1EYxSnWU9V+FGcshsC8eTfo1nHAGs0mVtsUjKBDIwg1vRH1XOTQ4MrBxZGD8/9FI4cznRxaCnGJl4OSwhWYhfVlgZX6P7dOLKbSfPAfrPKTOahTdvru798kmqM5cZYzVcG3vK2qJGPzAqh0LxJZYtS6AAAAAElFTkSuQmCC)
+}
+
+.wish-add-drop {
+  width: 14px;
+  height: 12px;
+  background-image: url("/v2/image/wap/wish/share_like@2x.png");
+  background-size: cover;
+  z-index: 1000
+}
+
+.report-detail {
+  padding: 15px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5;
+  background-color: #fff
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .report-detail {
+    border-bottom-width: 1px
+  }
+}
+
+.report-detail .good-report {
+  display: inline-block;
+  margin-top: 5px;
+  width: 60px;
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+  text-align: center;
+  border-radius: 2px;
+  background-color: #fb6252;
+  color: #fff
+}
+
+.report-detail .report-section {
+  margin-bottom: 10px
+}
+
+.report-detail .report-item label,
+.report-detail .report-item span {
+  line-height: 24px
+}
+
+.report-detail .report-item label {
+  font-size: 14px;
+  color: #666
+}
+
+.report-detail .report-desc {
+  line-height: 22px
+}
+
+.report-detail .image-section {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-flow: row wrap;
+  -moz-box-orient: horizontal;
+  -moz-box-direction: normal;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -moz-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start
+}
+
+.report-detail .image-section .image-small {
+  width: 60px;
+  height: 60px;
+  margin: 0 10px 10px 0
+}
+
+.goods-activity {
+  border-top: 0;
+  padding-bottom: 0;
+  position: relative;
+  padding-top: 0;
+  padding-left: 0;
+  overflow: visible;
+  top: -1px
+}
+
+.goods-activity.theme-orange .goods-price {
+  background-color: #f60
+}
+
+.goods-activity.theme-orange .goods-price .price-title {
+  background-color: #f60
+}
+
+.goods-activity .title {
+  margin: 0;
+  font-size: 16px;
+  line-height: 22px;
+  text-align: left
+}
+
+.goods-activity .view-detail {
+  padding-right: 15px;
+  font-size: 14px
+}
+
+.goods-activity .goods-title {
+  padding: 10px 0
+}
+
+.goods-activity .goods-title>.title {
+  padding: 0 10px
+}
+
+.goods-activity .overview-countdown {
+  position: absolute;
+  right: 0;
+  top: 3px;
+  font-size: 12px;
+  line-height: 1
+}
+
+.goods-activity .overview-countdown .countdown-title {
+  background-color: inherit;
+  display: block;
+  padding: 7px 10px 0;
+  width: auto;
+  color: #fff
+}
+
+.goods-activity .overview-countdown .countdown {
+  display: block;
+  padding: 5px 10px;
+  text-align: center;
+  color: #fff
+}
+
+.goods-activity .overview-countdown .countdown span {
+  display: inline-block;
+  background-color: #fff;
+  border-radius: 2px;
+  color: #ff4343;
+  font-size: 10px;
+  line-height: 16px;
+  text-align: center;
+  padding: 0 1px;
+  min-width: 14px;
+  position: relative;
+  top: -1px
+}
+
+.goods-activity .goods-price {
+  position: relative;
+  width: 100%;
+  min-height: 50px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: #ff4343;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: inherit;
+  padding-right: 155px
+}
+
+.goods-activity .goods-price .price-title {
+  position: absolute;
+  background-color: #ff4343;
+  top: -19px;
+  left: 0;
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 0 4px 0 0;
+  color: #fff
+}
+
+.goods-activity .goods-price .current-price,
+.goods-activity .goods-price .cur-price {
+  margin-right: 0
+}
+
+.goods-activity .goods-price .current-price.activity-price,
+.goods-activity .goods-price .cur-price.activity-price {
+  color: #fff;
+  font-size: 20px
+}
+
+.goods-activity .goods-price .current-price .price,
+.goods-activity .goods-price .cur-price .price {
+  font-size: 30px;
+  vertical-align: baseline
+}
+
+.goods-activity .goods-price .current-price span,
+.goods-activity .goods-price .cur-price span {
+  font-size: 12px
+}
+
+.goods-activity .goods-price .current-price .price-wrapper,
+.goods-activity .goods-price .cur-price .price-wrapper {
+  display: inline-block
+}
+
+.goods-activity .goods-price .current-price .price-wrapper span,
+.goods-activity .goods-price .cur-price .price-wrapper span {
+  font-size: 16px;
+  margin-right: 5px
+}
+
+.goods-activity .goods-price .original-price {
+  display: inline-block;
+  font-size: 12px;
+  color: #fff;
+  opacity: .6;
+  margin: 0;
+  line-height: 12px
+}
+
+.goods-activity .activity-intro {
+  background-color: rgba(255, 102, 0, 0.05);
+  position: relative
+}
+
+.goods-activity .activity-intro .title {
+  font-size: 14px;
+  padding: 0
+}
+
+.goods-activity .activity-intro .block-item:first-child {
+  border: 0
+}
+
+.goods-activity .activity-intro .desc {
+  margin-left: 10px;
+  padding-left: 0
+}
+
+.bottom-fix .warning-bar i {
+  font-style: normal;
+  color: #f60
+}
+
+.bottom-fix .info-wrapper {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5;
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  line-height: 1.5em;
+  padding: 3px 5px 5px;
+  border-top: 1px solid #ccc;
+  -webkit-box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.2);
+  border-color: #ddd;
+  bottom: 42px;
+  left: 0;
+  background-color: #fff
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .bottom-fix .info-wrapper {
+    border-bottom-width: 1px
+  }
+}
+
+.bottom-fix .info-wrapper em {
+  font-style: normal
+}
+
+.bottom-fix .info-wrapper a {
+  color: #07d;
+  text-decoration: underline
+}
+
+.bottom-fix .info-wrapper a:hover {
+  color: #07d;
+  text-decoration: underline
+}
+
+.bottom-fix .info-wrapper i {
+  font-style: normal;
+  color: #f60
+}
+
+.bottom-fix .bottom-tips {
+  position: absolute;
+  top: -31px;
+  font-size: 12px;
+  color: #f60;
+  background-color: #fff6e1;
+  width: 100%;
+  line-height: 30px;
+  left: 0
+}
+
+.responsive-wrapper {
+  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1)
+}
+
+.points-price {
+  padding: 10px;
+  color: #999;
+  font-size: 14px;
+  background: #fff
+}
+
+.points-price .points {
+  color: #f60
+}
+
+.points-price .points::before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAMAAABFjsb+AAAAaVBMVEUAAAD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgD/ZgCsDQbuAAAAInRSTlMABPvSsmLC5kke8oX2oZF5Dm85MCjqvJxqaELImJZUU9vYkeuzIAAAALhJREFUGNNtkFsSgjAMRdM0LdgWKBRR3pr9L9KA4ygO9y8n+Ti5IFF5aa/IeLVlrmAndcb6VhljqpvmrBYarfMX+OTinY1QZC38ps0KwDscc0dw1R+rHHiXH1DuPKiJaTd4WxFP2zB0HMai9GUxBu4GITaJgZk7/dTdbMSqeYAmOIY0NEiy/EoTNnKrkfoUZY6pJ9SCWlArBWZ0yBxoVWoA7DeHtJjaLEntf5z+G2049BJsPOvvrOcXRfkKbfzup0wAAAAASUVORK5CYII=) no-repeat;
+  background-size: 10px;
+  display: inline-block;
+  margin-right: 5px
+}
+
+.sku-num.points-num {
+  width: 50% !important
+}
+
+.snap-container {
+  padding: 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  text-align: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: #fff
+}
+
+.snap-container .snap-warning {
+  height: 40px;
+  padding-top: 10px;
+  background: #FFF7CC
+}
+
+.snap-container .snap-history {
+  line-height: 1;
+  font-size: 12px;
+  margin-bottom: 10px;
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding-left: 25px;
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  background-position: 0 center;
+  background-image: url("/v2/image/wap/showcase/goods/snap.png");
+  text-align: left
+}
+
+.snap-container .snap-history-alert {
+  color: #333
+}
+
+.snap-container .snap-history-time {
+  color: #999;
+  margin-top: 5px
+}
+
+.snap-container .btn-detail {
+  width: 255px;
+  font-size: 14px;
+  background-color: #FF4444;
+  border-color: #FF4444;
+  display: block;
+  margin: 0 auto
+}
+
+.snap-body.body-fixed-bottom {
+  padding-bottom: 100px
+}
+
+.snap-body.body-fixed-bottom .contact-seller {
+  bottom: 103px
+}
+
+.snap-body.body-fixed-bottom .stock-detail {
+  font-size: 14px;
+  color: #333;
+  line-height: 1
+}
+
+.snap-body.body-fixed-bottom .stock-detail dl {
+  text-align: left;
+  margin: 12px 0
+}
+
+.snap-body.body-fixed-bottom .order-snap-sku {
+  padding: 10px 12px;
+  font-size: 14px
+}
+
+.snap-body.body-fixed-bottom .order-snap-sku .order-snap-sku-item {
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.snap-body.body-fixed-bottom .order-snap-sku .order-snap-sku-item:not(:last-child) {
+  margin-bottom: 8px
+}
+
+.virtual-ticket-info {
+  padding: 12px 10px;
+  background-color: #fff8f2
+}
+
+.virtual-ticket-info .valid-period,
+.virtual-ticket-info .use-tips {
+  line-height: 16px
+}
+
+.activity-intro.bale-intro {
+  background-color: rgba(255, 102, 0, 0.05);
+  position: relative;
+  margin-top: 10px
+}
+
+.activity-intro.bale-intro .block-item:first-child {
+  border: 0
+}
+
+.activity-intro.bale-intro .title {
+  line-height: 22px;
+  display: inline;
+  padding: 0;
+  text-align: left;
+  font-size: 14px
+}
+
+.activity-intro.bale-intro .view-detail {
+  line-height: 22px;
+  padding-right: 15px;
+  font-size: 14px
+}
+
+.share-it {
+  border-color: #d13600 !important;
+  background-color: #d13600 !important;
+  background-image: url("/v2/image/fenxiao/activity/phone/77/share.png");
+  background-repeat: no-repeat;
+  background-size: 17px 13px;
+  background-position: 7px center;
+  padding-left: 20px
+}
+
+@media (min-width: 375px) {
+  .share-it {
+    background-position: 14px center
+  }
+}
+
+@media (min-width: 414px) {
+  .share-it {
+    background-size: 17px 13px;
+    background-position: 20px center
+  }
+}
+
+.wakeup-app {
+  position: fixed;
+  top: -60px;
+  left: 0;
+  z-index: 100;
+  background-color: #ECECEC;
+  width: 100%;
+  height: 60px;
+  cursor: pointer;
+  text-align: center;
+  overflow: hidden;
+  -webkit-transition: all .5s linear;
+  -moz-transition: all .5s linear;
+  transition: all .5s linear
+}
+
+.wakeup-app .close {
+  float: left;
+  width: 40px;
+  height: 60px;
+  position: relative;
+  cursor: pointer
+}
+
+.wakeup-app .close:after {
+  position: absolute;
+  display: block;
+  content: '×';
+  width: 18px;
+  height: 18px;
+  font-size: 14px;
+  line-height: 16px;
+  border-radius: 9px;
+  color: #fff;
+  background-color: #DDDEDF;
+  top: 50%;
+  left: 50%;
+  margin-top: -9px;
+  margin-left: -9px
+}
+
+.wakeup-app .app-icon {
+  float: left;
+  width: 60px;
+  height: 60px;
+  background-image: url("/v2/image/wap/weixin_share_default_logo.png");
+  background-size: 80% 80%;
+  background-repeat: no-repeat;
+  background-position: center center
+}
+
+.wakeup-app .description {
+  float: left;
+  text-align: left;
+  padding: 5px 0 5px 3px
+}
+
+.wakeup-app .description .title {
+  margin: 6px 0
+}
+
+.wakeup-app .description .meta {
+  color: #999;
+  line-height: 1;
+  font-size: 12px;
+  letter-spacing: 1px
+}
+
+.wakeup-app .btn {
+  float: right;
+  margin-top: 12px;
+  margin-right: 12px;
+  padding: 8px 8px;
+  border-color: #FC5959;
+  background-color: #FC5959;
+  letter-spacing: 1px
+}
+
+.wakeup-app-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: #000;
+  opacity: 0.8;
+  z-index: 101
+}
+
+.wakeup-app-opentip {
+  position: fixed;
+  height: 144px;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  z-index: 102
+}
+
+.wakeup-app-opentip .lay {
+  width: 100%;
+  height: 120px;
+  background-color: #f9f9f9;
+  border-radius: 0 0 8px 8px;
+  background: #f9f9f9 url("/v2/image/wap/opentip.png") 100% 4px no-repeat;
+  background-size: 127px auto
+}
+
+.wakeup-app-opentip .note {
+  float: right;
+  margin: 39px 58px 0 0;
+  width: 160px;
+  line-height: 20px
+}
+
+.wakeup-app-opentip .note h3 {
+  font-size: 20px;
+  margin-bottom: 6px;
+  font-weight: normal
+}
+
+.wakeup-app-opentip .note p {
+  font-size: 14px
+}
+
+.ui-viewport-640 .wakeup-app {
+  top: -102px;
+  height: 102px
+}
+
+.ui-viewport-640 .wakeup-app .close {
+  width: 68px;
+  height: 102px
+}
+
+.ui-viewport-640 .wakeup-app .close:after {
+  width: 30.6px;
+  height: 30.6px;
+  font-size: 23.8px;
+  line-height: 27.2px;
+  border-radius: 15.3px;
+  margin-top: -15.3px;
+  margin-left: -15.3px
+}
+
+.ui-viewport-640 .wakeup-app .app-icon {
+  width: 102px;
+  height: 102px
+}
+
+.ui-viewport-640 .wakeup-app .description {
+  padding: 8.5px 0 8.5px 5.1px
+}
+
+.ui-viewport-640 .wakeup-app .description .title {
+  margin: 10.2px 0;
+  font-size: 25.5px;
+  line-height: 30.6px
+}
+
+.ui-viewport-640 .wakeup-app .description .meta {
+  line-height: 1;
+  font-size: 20.4px;
+  letter-spacing: 1.7px
+}
+
+.ui-viewport-640 .wakeup-app .btn {
+  margin-top: 20.4px;
+  margin-right: 20.4px;
+  padding: 13.6px 13.6px;
+  letter-spacing: 1.7px;
+  font-size: 20.4px
+}
+
+.ui-viewport-640 .wakeup-app-opentip {
+  height: 244.8px;
+  left: 17px;
+  right: 17px
+}
+
+.ui-viewport-640 .wakeup-app-opentip .lay {
+  height: 204px;
+  border-radius: 0 0 13.6px 13.6px;
+  background: #f9f9f9 url("/v2/image/wap/opentip.png") 100% 6.8px no-repeat;
+  background-size: 215.9px auto
+}
+
+.ui-viewport-640 .wakeup-app-opentip .note {
+  margin: 66.3px 98.6px 0 0;
+  width: 272px;
+  line-height: 34px
+}
+
+.ui-viewport-640 .wakeup-app-opentip .note h3 {
+  font-size: 34px;
+  margin-bottom: 10.2px
+}
+
+.ui-viewport-640 .wakeup-app-opentip .note p {
+  font-size: 23.8px
+}
+
+.swp {
+  position: relative;
+  height: 100%
+}
+
+.bottom-fix {
+  padding: 0
+}
diff --git a/src/pages/goods/goods.html b/src/pages/goods/goods.html
new file mode 100644
index 0000000..3508099
--- /dev/null
+++ b/src/pages/goods/goods.html
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html class="" lang="zh-cmn-Hans">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="keywords" content="有赞,移动电商服务平台">
+  <meta name="description" content="">
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="format-detection" content="telephone=no">
+  <meta http-equiv="cleartype" content="on">
+  <meta name="referrer" content="always">
+  <link rel="shortcut icon" href="https://b.yzcdn.cn/v2/image/yz_fc.ico">
+  <title>商品详情</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link rel="stylesheet" href="./css/goods_common.css">
+  <link rel="stylesheet" href="./css/goods_custom.css">
+  <link rel="stylesheet" href="./css/goods.css">
+  <link rel="stylesheet" href="./css/goods_theme.css">
+  <link rel="stylesheet" href="./css/goods_mars.css">
+  <link rel="stylesheet" href="./css/goods_sku.css">
+</head>
+
+<body class=" body-fixed-bottom
+            default-theme">
+  <div class="container wap-goods internal-purchase" style="min-height: 617px;">
+    <div class="content no-sidebar">
+      <div class="content-body">
+        <div class="custom-image-swiper custom-goods-swiper js-swp swp">
+          <div class="swiper-wrapper js-swp-wrap" style="height: 375px;" data-height="320">
+            <div class="swp-page" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; transform: translate3d(-9999px, 0px, 0px);">
+              <img class="" src="https://img.yzcdn.cn/upload_files/2017/07/12/FkSvYz8FLLD9-t0smXO43hF6ov7S.jpg?imageView2/2/w/980/h/980/q/75/format/webp">
+            </div>
+            <div class="swp-page" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; transform: translate3d(-375px, 0px, 0px);">
+              <img class="js-res-load" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FvBRA_j6wl7CBVuNHQPl7FHkj0b1.jpg?imageView2/2/w/980/h/980/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FvBRA_j6wl7CBVuNHQPl7FHkj0b1.jpg?imageView2/2/w/980/h/980/q/75/format/webp">
+            </div>
+            <div class="swp-page page-in-view" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; transform: translate3d(0px, 0px, 0px);">
+              <img class="js-res-load" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FpetvOfbRCRmyeg32DBunok9Uvmo.jpg?imageView2/2/w/980/h/980/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FpetvOfbRCRmyeg32DBunok9Uvmo.jpg?imageView2/2/w/980/h/980/q/75/format/webp">
+            </div>
+            <div class="swp-page" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; transform: translate3d(375px, 0px, 0px);">
+              <img class="js-res-load" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FqYpph8-5qfY-sCecemc7LTZb2O2.jpg?imageView2/2/w/980/h/980/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FqYpph8-5qfY-sCecemc7LTZb2O2.jpg?imageView2/2/w/980/h/980/q/75/format/webp">
+            </div>
+            <div class="swp-page" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; transform: translate3d(-9999px, 0px, 0px);">
+              <img class="js-res-load" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FmgpyGwZqitXF7LWnVzmHHmCVfB4.jpg?imageView2/2/w/980/h/980/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FmgpyGwZqitXF7LWnVzmHHmCVfB4.jpg?imageView2/2/w/980/h/980/q/75/format/webp">
+            </div>
+          </div>
+          <div class="swiper-pagination js-swiper-pagination">
+            <ul class="swp-thumbnail-list">
+              <li class="swiper-pagination-switch"></li>
+              <li class="swiper-pagination-switch"></li>
+              <li class="swiper-pagination-switch swiper-active-switch"></li>
+              <li class="swiper-pagination-switch"></li>
+              <li class="swiper-pagination-switch"></li>
+            </ul>
+          </div>
+        </div>
+        <script id="resize-img-script-used"></script>
+        <div class="goods-header">
+          <h2 class="title">寻找田野|最正宗的上海南汇8424 得奖最多奥运会指定西瓜1只/箱 9-11斤</h2>
+          <span class="hide js-add-wish js-wish-animate wish-add  font-size-12 tag tag-redf30 pull-right">
+                喜欢
+            </span>
+          <div class="goods-price ">
+            <div class="current-price">
+              <span>¥</span><i class="js-goods-price price">98.00</i>
+            </div>
+            <span class="btn btn-blue btn-retail hide js-retail-btn">门店有售</span>
+            <div class="original-price">
+              108 </div>
+          </div>
+          <hr class="with-margin-l">
+          <div class="stock-detail">
+            <dl>
+              <dt>运费:</dt>
+              <dd class="js-postage-desc" data-postage="免运费">
+                免运费 </dd>
+            </dl>
+            <dl>
+              <dt>剩余:</dt>
+              <dd>450</dd>
+            </dl>
+            <dl>
+              <dt>销量:</dt>
+              <dd>50</dd>
+            </dl>
+          </div>
+        </div>
+        <div class="sku-detail adv-opts">
+          <div class="sku-detail-inner adv-opts-inner">
+            <dl class="sku-group select-sku js-select-sku">
+              <dt><span class="js-sku-label">选择</span>：</dt>
+              <dd class="js-sku-value">
+                <span class="sku-item">净含量</span> </dd>
+            </dl>
+          </div>
+        </div>
+        <div class="js-store-info">
+          <div class="block block-list goods-store">
+            <div class="custom-store block-item ">
+              <a class="custom-store-link clearfix" href="https://h5.youzan.com/v2/home/cz0mk59k">
+                <div class="custom-store-img"></div>
+                <div class="custom-store-name">
+                  寻找田野 </div>
+                <span class="custom-store-enter">进入店铺</span>
+              </a>
+            </div>
+            <a class="offline-store block-item js-retail-store hide">
+              <span class="offline-store-img"></span>
+              <span class="offline-store-name">线下门店</span>
+              <div class="offline-store-branch js-retail-store-name"></div>
+            </a>
+            <div class="renzheng block-item">
+              <span class="js-rz-item-alert rz-item" data-type="team_certificate_company">
+                <span class="rz-name font-size-12 c-gray-darker">企业认证</span>
+              </span>
+              <span class="js-rz-item-alert rz-item" data-type="is_secured_transactions">
+                <span class="rz-name font-size-12 c-gray-darker">担保交易</span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <a class="js-package-buy-block hide"></a>
+        <div class="js-detail-container" style="margin-top: 10px;">
+          <div class="js-tabber-container goods-detail">
+            <div class="js-tabber tabber tabber-n2 clearfix orange">
+              <button data-type="goods" class="active">
+                商品详情 </button>
+              <button data-type="sales">
+                本店成交 </button>
+            </div>
+            <div class="js-tabber-content">
+              <div class="js-part hide" data-type="sales">
+                <div class="js-traderecord-list block-list-traderecord">
+                  <div class="list-header">
+                    <span class="col-1">买家</span>
+                    <span class="col-2 center">成交时间</span>
+                    <span class="col-3 center">数量</span>
+                  </div>
+                  <div class="js-list b-list block block-list">
+                  </div>
+                </div>
+              </div>
+              <div class="js-part js-goods-detail goods-tabber-c" data-type="goods">
+                <div class="js-components-container components-container">
+                  <div class="custom-richtext js-lazy-container js-view-image-list">
+                    <p><img data-origin-width="720" data-origin-height="713" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FhU7lMPonHtR8qP4zP4aIKRVkObr.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FhU7lMPonHtR8qP4zP4aIKRVkObr.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="494" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FvYqk840X0ubXwFE6Nh0unihqIKm.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FvYqk840X0ubXwFE6Nh0unihqIKm.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="916" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FvIfNYewmohf3b3V2yA_hr6whV-A.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FvIfNYewmohf3b3V2yA_hr6whV-A.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="656" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FlYJPxbAgmkKjWtvLxwqjUMJHUG3.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FlYJPxbAgmkKjWtvLxwqjUMJHUG3.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="513" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FmpaiyW8GbpV2I2QKwm7stoRQkOJ.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FmpaiyW8GbpV2I2QKwm7stoRQkOJ.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="691" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/Fs5rqsKzMe7qIHhuQAqyM1lcjmfB.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/Fs5rqsKzMe7qIHhuQAqyM1lcjmfB.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="531" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/Foor6_Ipc-Lo9eOX_H_a8g4kWPRW.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/Foor6_Ipc-Lo9eOX_H_a8g4kWPRW.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="932" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FuuNBFbA_vMYmI6FFbNOemmDX9bd.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FuuNBFbA_vMYmI6FFbNOemmDX9bd.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="707" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FotgIfOUlMtvhtH0dhRLlmpKJLv7.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FotgIfOUlMtvhtH0dhRLlmpKJLv7.jpg!730x0.jpg"></p>
+                  </div>
+                  <div class="price-intro">
+                    <h4>划线价格说明<i class="icon-arrow"></i></h4>
+                    <p>划线价格：划线的价格可能是商品的专柜价、吊牌价、正品零售价、指导价、曾经展示过的销售价等，仅供您参考。</p>
+                    <p>未划线价格：未划线的价格是商品的销售标价，具体的成交价格可能因会员使用优惠券、积分等发生变化，最终以订单结算价格为准。 </p>
+                    <p>*此说明仅当出现价格比较时有效。若这件商品针对划线价格进行了特殊说明，以特殊说明为准。</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="js-bottom-opts js-footer-auto-ele stick-bottom">
+          <div class="stick-bottom-icons">
+            <a href="javascript:;" class="js-yz-im icons icons-im ">店主</a>
+            <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" class="js-call-im icons icons-home">店铺</a>
+            <a href="javascript:;" class="js-yz-zan icons icons-zan ">收藏</a>
+          </div>
+          <div class="stick-bottom-btns">
+            <!-- 尚未开售 -->
+            <div class="btn-cart">
+              <a href="https://h5.youzan.com/v2/showcase/goods?alias=1y7n2wi58q1as&amp;source=yzapp&amp;f_platform=yzapp&amp;reft=1499937523785&amp;spm=mars20003" class="js-add-cart">加入购物车</a>
+            </div>
+            <div class="btn-buy">
+              <a href="javascript:;" class="js-buy-it">立即购买</a>
+            </div>
+          </div>
+        </div>
+        <!-- <div id="right-icon" class="js-right-icon hide">
+          <div class="js-right-icon-container right-icon-container clearfix">
+            <a id="global-cart" href="https://h5.youzan.com/v2/trade/cart?kdt_id=16546132" class="icon hide" style="">
+              <p class="icon-img"></p>
+              <p class="icon-txt">购物车</p>
+            </a>
+            <a class="js-show-more-btn icon show-more-btn hide"></a>
+          </div>
+        </div> -->
+        <div id="right-icon" class="js-right-icon ">
+          <div class="js-right-icon-container right-icon-container clearfix">
+            <a id="global-cart" href="https://h5.youzan.com/v2/trade/cart?kdt_id=16546132" class="icon new s0" style="">
+              <p class="icon-img"></p>
+              <p class="icon-txt">购物车</p>
+            </a>
+            <a class="js-show-more-btn icon show-more-btn "></a>
+          </div>
+        </div>
+        <div class="js-recommend">
+          <p class="center font-size-14 c-black" style="padding: 5px 0;margin-top: 10px;">更多精选商品</p>
+          <div class="js-recommend-goods-list">
+            <ul class="js-goods-list sc-goods-list pic clearfix size-1 " data-size="1" data-showtype="card" style="visibility: visible;">
+              <!-- 商品区域 -->
+              <!-- 展现类型判断 -->
+              <li class="js-goods-card goods-card small-pic card ">
+                <a href="https://h5.youzan.com/v2/goods/2ov83y79gkn38" class="js-goods link clearfix" target="_blank" data-goods-id="343086880" title="【28号陆续发货】寻找田野|青海有机鲜枸杞 营养价值高安全无农残 吃水果一样吃枸杞">
+                  <div class="photo-block" data-width="750" data-height="750" style="background-color: rgb(255, 255, 255);">
+                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/11/FoN0SazpvslhoiiyuHETeyWHqzTE.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/11/FoN0SazpvslhoiiyuHETeyWHqzTE.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                  </div>
+                  <div class="info clearfix info-title info-price btn0">
+                    <p class=" goods-title ">【28号陆续发货】寻找田野|青海有机鲜枸杞 营养价值高安全无农残 吃水果一样吃枸杞</p>
+                    <p class="goods-sub-title c-black hide"></p>
+                    <p class="goods-price">
+                      <em>¥88.00</em>
+                    </p>
+                    <p class="goods-price-taobao  hide"></p>
+                  </div>
+                </a>
+              </li>
+              <li class="js-goods-card goods-card small-pic card ">
+                <a href="https://h5.youzan.com/v2/goods/2g06s483u55no" class="js-goods link clearfix" target="_blank" data-goods-id="342718779" title="【米饭版和牛肉版】小龙坎方便火锅 只要一瓶矿泉水就能吃的地道四川火锅">
+                  <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
+                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/04/FidWCdQxsEMojh63W8GK016mwPAo.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/04/FidWCdQxsEMojh63W8GK016mwPAo.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                  </div>
+                  <div class="info clearfix info-title info-price btn0">
+                    <p class=" goods-title ">【米饭版和牛肉版】小龙坎方便火锅 只要一瓶矿泉水就能吃的地道四川火锅</p>
+                    <p class="goods-sub-title c-black hide">不用火，不用电，一瓶矿泉水就能吃地道四川火锅</p>
+                    <p class="goods-price">
+                      <em>¥28.00</em>
+                    </p>
+                    <p class="goods-price-taobao  hide"></p>
+                  </div>
+                </a>
+              </li>
+              <li class="js-goods-card goods-card small-pic card ">
+                <a href="https://h5.youzan.com/v2/goods/1y8wz9sm8da8k" class="js-goods link clearfix" target="_blank" data-goods-id="342676309" title="寻找田野|绍兴黄酒 良宵 2012年古法手工原浆半干黄酒 礼盒装 送礼佳品">
+                  <div class="photo-block" data-width="750" data-height="750" style="background-color: rgb(255, 255, 255);">
+                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/04/Fq1yXSOb84HmElu-Qgrm65EmAeIz.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/04/Fq1yXSOb84HmElu-Qgrm65EmAeIz.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                  </div>
+                  <div class="info clearfix info-title info-price btn0">
+                    <p class=" goods-title ">寻找田野|绍兴黄酒 良宵 2012年古法手工原浆半干黄酒 礼盒装 送礼佳品</p>
+                    <p class="goods-sub-title c-black hide"></p>
+                    <p class="goods-price">
+                      <em>¥128.00</em>
+                    </p>
+                    <p class="goods-price-taobao  hide"></p>
+                  </div>
+                </a>
+              </li>
+              <li class="js-goods-card goods-card small-pic card ">
+                <a href="https://h5.youzan.com/v2/goods/27082kgcgmrqs" class="js-goods link clearfix" target="_blank" data-goods-id="342108270" title="寻找田野|新疆库车小白杏 400g*4盒  长在树上的白色蜂蜜">
+                  <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FhxXtAXp1pEauruMKjw2QZCuCjbQ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FhxXtAXp1pEauruMKjw2QZCuCjbQ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                  </div>
+                  <div class="info clearfix info-title info-price btn0">
+                    <p class=" goods-title ">寻找田野|新疆库车小白杏 400g*4盒 长在树上的白色蜂蜜</p>
+                    <p class="goods-sub-title c-black hide"></p>
+                    <p class="goods-price">
+                      <em>¥118.00</em>
+                    </p>
+                    <p class="goods-price-taobao ">138</p>
+                  </div>
+                </a>
+              </li>
+              <li class="js-goods-card goods-card small-pic card ">
+                <a href="https://h5.youzan.com/v2/goods/2fnugsg7z7xo4" class="js-goods link clearfix" target="_blank" data-goods-id="341654863" title="寻找田野|无锡阳山水蜜桃 可以吸着吃的水蜜桃 单果200g礼盒装顺丰直达">
+                  <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FvDOdNLYTkgPg8_LC16vBTKUkpDp.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FvDOdNLYTkgPg8_LC16vBTKUkpDp.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                  </div>
+                  <div class="info clearfix info-title info-price btn0">
+                    <p class=" goods-title ">寻找田野|无锡阳山水蜜桃 可以吸着吃的水蜜桃 单果200g礼盒装顺丰直达</p>
+                    <p class="goods-sub-title c-black hide"></p>
+                    <p class="goods-price">
+                      <em>¥178.00</em>
+                    </p>
+                    <p class="goods-price-taobao  hide"></p>
+                  </div>
+                </a>
+              </li>
+              <li class="js-goods-card goods-card small-pic card ">
+                <a href="https://h5.youzan.com/v2/goods/2ocrgu7fw6dic" class="js-goods link clearfix" target="_blank" data-goods-id="340716475" title="认养一头牛 安全无添加的好牛奶/酸奶">
+                  <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
+                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/06/14/FlAhOUgjHk6uwBhTmMW95hHPlVJh.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/06/14/FlAhOUgjHk6uwBhTmMW95hHPlVJh.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                  </div>
+                  <div class="info clearfix info-title info-price btn0">
+                    <p class=" goods-title ">认养一头牛 安全无添加的好牛奶/酸奶</p>
+                    <p class="goods-sub-title c-black hide"></p>
+                    <p class="goods-price">
+                      <em>¥60.00</em>
+                    </p>
+                    <p class="goods-price-taobao  hide"></p>
+                  </div>
+                </a>
+              </li>
+              <li class="js-goods-card goods-card small-pic card ">
+                <a href="https://h5.youzan.com/v2/goods/365anhqcodi84" class="js-goods link clearfix" target="_blank" data-goods-id="339552343" title="新西兰进口佳沛绿奇异果  多规格包邮 单果90g--110g">
+                  <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
+                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/06/02/FlFNqGPuFKS_DlTAoJTcX9VEDv_4.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/06/02/FlFNqGPuFKS_DlTAoJTcX9VEDv_4.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                  </div>
+                  <div class="info clearfix info-title info-price btn0">
+                    <p class=" goods-title ">新西兰进口佳沛绿奇异果 多规格包邮 单果90g--110g</p>
+                    <p class="goods-sub-title c-black hide"></p>
+                    <p class="goods-price">
+                      <em>¥35.00</em>
+                    </p>
+                    <p class="goods-price-taobao  hide"></p>
+                  </div>
+                </a>
+              </li>
+              <li class="js-goods-card goods-card small-pic card ">
+                <a href="https://h5.youzan.com/v2/goods/3f2rgi8pm8xgk" class="js-goods link clearfix" target="_blank" data-goods-id="339441682" title="四杰克系列葡萄酒 五星酒庄出品 750ML">
+                  <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/Fh2E3KeB4j0rAOdILQAC52F_B4hb.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/Fh2E3KeB4j0rAOdILQAC52F_B4hb.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                  </div>
+                  <div class="info clearfix info-title info-price btn0">
+                    <p class=" goods-title ">四杰克系列葡萄酒 五星酒庄出品 750ML</p>
+                    <p class="goods-sub-title c-black hide"></p>
+                    <p class="goods-price">
+                      <em>¥220.00</em>
+                    </p>
+                    <p class="goods-price-taobao  hide"></p>
+                  </div>
+                </a>
+              </li>
+              <li class="js-goods-card goods-card small-pic card ">
+                <a href="https://h5.youzan.com/v2/goods/273xg8phauxvo" class="js-goods link clearfix" target="_blank" data-goods-id="339414742" title="寻找田野|墨西哥进口牛油果 单果140g--180g  6个装 包邮">
+                  <div class="photo-block" data-width="1080" data-height="1080" style="background-color: rgb(255, 255, 255);">
+                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FuDDKJmd-yfvmaDUfk-PO-yETRwZ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FuDDKJmd-yfvmaDUfk-PO-yETRwZ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                  </div>
+                  <div class="info clearfix info-title info-price btn0">
+                    <p class=" goods-title ">寻找田野|墨西哥进口牛油果 单果140g--180g 6个装 包邮</p>
+                    <p class="goods-sub-title c-black hide"></p>
+                    <p class="goods-price">
+                      <em>¥98.00</em>
+                    </p>
+                    <p class="goods-price-taobao  hide"></p>
+                  </div>
+                </a>
+              </li>
+              <li class="js-goods-card goods-card small-pic card ">
+                <a href="https://h5.youzan.com/v2/goods/36a5xxtuihz10" class="js-goods link clearfix" target="_blank" data-goods-id="338917983" title="花园系列葡萄酒 五星酒庄出品 750ML">
+                  <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FoCENpKklzLyD5VpWVEtS0_jbGc8.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FoCENpKklzLyD5VpWVEtS0_jbGc8.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                  </div>
+                  <div class="info clearfix info-title info-price btn0">
+                    <p class=" goods-title ">花园系列葡萄酒 五星酒庄出品 750ML</p>
+                    <p class="goods-sub-title c-black hide"></p>
+                    <p class="goods-price">
+                      <em>¥268.00</em>
+                    </p>
+                    <p class="goods-price-taobao  hide"></p>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <p class="center" style="margin: 10px 0 20px;">
+            <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" class="center btn btn-white btn-xsmall font-size-14 " style="padding:8px 26px;">进店逛逛&gt;</a>
+          </p>
+        </div>
+      </div>
+      <div id="shop-nav"></div>
+    </div>
+  </div>
+  <div class="js-footer" style="min-height: 1px;">
+    <div>
+      <div class="footer">
+        <div class="copyright">
+          <div class="ft-links">
+            <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" target="_blank">店铺主页</a>
+            <a href="https://h5.youzan.com/v2/showcase/usercenter?kdt_id=16546132" target="_blank">会员中心</a>
+            <a href="javascript:;" class="js-open-follow">关注我们</a>
+            <a href="https://h5.youzan.com/v2/showcase/cert" target="_blank">店铺信息</a>
+            <!-- 第三方app隐藏topbar时，需要在底部显示购物记录入口 -->
+          </div>
+          <div class="ft-copyright " style="background-image: url(https://img.yzcdn.cn/upload_files/2017/06/16/FgtL3QzprXTGrVPaolozNT08Xs2K.png);">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;">
+    <div id="trans-tooltip">
+      <div id="tip-left-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png&quot;);"></div>
+      <div id="tip-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png&quot;) repeat-x;"></div>
+      <div id="tip-right-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png&quot;);"></div>
+      <div id="tip-right" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png&quot;) repeat-y;"></div>
+      <div id="tip-right-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png&quot;);"></div>
+      <div id="tip-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png&quot;) repeat-x;"></div>
+      <div id="tip-left-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png&quot;);"></div>
+      <div id="tip-left" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png&quot;);"></div>
+      <div id="trans-content"></div>
+    </div>
+    <div id="tip-arrow-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png&quot;);"></div>
+    <div id="tip-arrow-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png&quot;);"></div>
+  </div>
+  <div class="search-bar" style="display:none;">
+    <form class="search-form" action="https://h5.youzan.com/v2/search" method="GET">
+      <input type="search" class="search-input" placeholder="搜索商品" name="q" value="">
+      <input type="hidden" name="kdt_id" value="16546132"><a class="js-search-cancel search-cancel" href="javascript:;">取消</a><span class="search-icon"></span><span class="close-icon hide"></span></form>
+    <div class="history-wrap center">
+      <ul class="history-list search-recom-list js-history-list clearfix"></ul><a class="tag tag-clear js-tag-clear c-gray-darker hide" href="javascript:;">清除历史搜索</a></div>
+  </div>
+  <div id="yFzBKP9GDL" style="height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; transition: none 0.2s ease; opacity: 1; display: none;"></div>
+  <div id="QfEqtDbeK9" class="sku-layout sku-box-shadow popup" style="overflow: hidden; position: absolute; z-index: 1000; background: white; bottom: 0px; left: 0px; right: 0px; visibility: visible; transform: translate3d(0px, 0px, 0px); transition: all 300ms ease; opacity: 1; display: none;">
+    <div class="sku-layout-title name-card sku-name-card">
+      <div class="thumb"><img class="js-goods-thumb goods-thumb" src="https://img.yzcdn.cn/upload_files/2017/07/12/FkSvYz8FLLD9-t0smXO43hF6ov7S.jpg?imageView2/2/w/100/h/100/q/75/format/webp?imageView2/2/w/100/h/100/q/75/format/webp" alt=""></div>
+      <div class="detail goods-base-info clearfix">
+        <p class="title c-black ellipsis">寻找田野|最正宗的上海南汇8424 得奖最多奥运会指定西瓜1只/箱 9-11斤</p>
+        <div class="goods-price clearfix">
+          <div class="current-price pull-left c-black">
+            <span class="price-name pull-left font-size-14 c-orange">¥</span><i class="js-goods-price price font-size-16 vertical-middle c-orange">98.00</i>
+          </div>
+          <div class="original-price vertical-middle font-size-14 line-through">108</div>
+        </div>
+      </div>
+      <div class="js-cancel sku-cancel">
+        <div class="cancel-img"></div>
+      </div>
+    </div>
+    <div class="sku-detail adv-opts hotel-checkin-select" style="border: none; margin: 0; display: none;">
+      <div class="sku-detail-inner adv-opts-inner-addons">
+        <dl class="sku-group select-sku js-select-checkin-date">
+          <dt>时间：</dt>
+          <dd class="js-checkin-date-value">选择入住时间</dd>
+        </dl>
+      </div>
+    </div>
+    <div class="adv-opts layout-content" style="max-height: 554px;">
+      <div class="goods-models js-sku-views block block-list border-top-0">
+        <dl class="clearfix block-item sku-list-container">
+          <dt class="model-title sku-sel-title">
+            <label>净含量：</label>
+          </dt>
+          <dd>
+            <ul class="model-list sku-sel-list">
+              <li class="tag sku-tag pull-left ellipsis active">4500g-5000g</li>
+            </ul>
+          </dd>
+        </dl>
+        <dl class="clearfix block-item">
+          <dt class="sku-num pull-left">
+            <label>购买数量：</label>
+          </dt>
+          <dd class="sku-quantity-contaienr">
+            <dl class="clearfix">
+              <div class="quantity">
+                <button class="minus disabled" type="button" disabled="true"></button>
+                <input type="text" class="txt" pattern="[0-9]*" value="1">
+                <button class="plus" type="button"></button>
+                <div class="response-area response-area-minus"></div>
+                <div class="response-area response-area-plus"></div>
+              </div>
+            </dl>
+          </dd>
+          <dt class="other-info">
+            <div class="stock">剩余450件
+            </div>
+          </dt>
+        </dl>
+        <div class="block-item block-item-messages" style="display: none;">
+        </div>
+      </div>
+      <!-- <div class="bottom-padding"></div> -->
+      <div class="confirm-action content-foot clearfix">
+        <!-- 加入购物车 -->
+        <div class="big-btn-1-1" style="display: none;">
+          <a href="javascript:;" class="js-confirm-it big-btn red-btn main-btn">加入购物车</a>
+        </div>
+        <!-- 立即购买 -->
+        <div class="big-btn-1-1">
+          <a href="javascript:;" class="js-confirm-it big-btn red-btn main-btn">下一步</a>
+        </div>
+        <!-- 选择规格 -->
+        <div class="big-btn-2-1" style="display: none;">
+          <a href="javascript:;" class="js-mutiBtn-confirm cart big-btn orange-btn vice-btn">加入购物车</a>
+          <a href="javascript:;" class="js-mutiBtn-confirm confirm big-btn red-btn main-btn">立即购买</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="motify" style="display: none;">
+    <div class="motify-inner">已成功添加到购物车</div>
+  </div>
+</body>
+
+</html>
diff --git a/src/pages/goods/goods.js b/src/pages/goods/goods.js
new file mode 100644
index 0000000..a5abe25
--- /dev/null
+++ b/src/pages/goods/goods.js
@@ -0,0 +1,6 @@
+import './goods_common.css'
+import './goods_custom.css'
+import './goods.css'
+import './goods_theme.css'
+import './goods_mars.css'
+import './goods_sku.css'
\ No newline at end of file
diff --git a/src/pages/goods/goods_base.css b/src/pages/goods/goods_base.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/goods/goods_common.css b/src/pages/goods/goods_common.css
new file mode 100644
index 0000000..77d7ab2
--- /dev/null
+++ b/src/pages/goods/goods_common.css
@@ -0,0 +1,1173 @@
+ @charset "UTF-8";
+  .container,
+  body {
+    background-color: #f8f8f8
+  }
+  
+  a,
+  body {
+    color: #333
+  }
+  
+  .clearfix,
+  .container .content {
+    zoom: 1
+  }
+  
+  .copyright .ft-links~.ft-copyright,
+  hr {
+    border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line.png) 2 stretch
+  }
+  
+  .btn,
+  .fixed-icon,
+  dd,
+  div,
+  dt,
+  li,
+  span {
+    cursor: pointer
+  }
+  
+  * {
+    -webkit-tap-highlight-color: transparent
+  }
+  
+  a,
+  abbr,
+  acronym,
+  address,
+  applet,
+  article,
+  aside,
+  audio,
+  b,
+  big,
+  blockquote,
+  body,
+  canvas,
+  caption,
+  center,
+  cite,
+  code,
+  dd,
+  del,
+  details,
+  dfn,
+  div,
+  dl,
+  dt,
+  em,
+  embed,
+  fieldset,
+  figcaption,
+  figure,
+  footer,
+  form,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  header,
+  hgroup,
+  html,
+  i,
+  iframe,
+  img,
+  ins,
+  kbd,
+  label,
+  legend,
+  li,
+  mark,
+  menu,
+  nav,
+  object,
+  ol,
+  output,
+  p,
+  pre,
+  q,
+  ruby,
+  s,
+  samp,
+  section,
+  small,
+  span,
+  strike,
+  strong,
+  sub,
+  summary,
+  sup,
+  table,
+  tbody,
+  td,
+  tfoot,
+  th,
+  thead,
+  time,
+  tr,
+  tt,
+  u,
+  ul,
+  var,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline
+  }
+  
+  html {
+    line-height: 1;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    font-family: Arial, Helvetica, "STHeiti STXihei", "Microsoft YaHei", Tohoma
+  }
+  
+  ol,
+  ul {
+    list-style: none
+  }
+  
+  table {
+    border-collapse: collapse;
+    border-spacing: 0
+  }
+  
+  caption,
+  td,
+  th {
+    font-weight: 400;
+    vertical-align: middle
+  }
+  
+  blockquote,
+  q {
+    quotes: none
+  }
+  
+  blockquote:after,
+  blockquote:before,
+  q:after,
+  q:before {
+    content: "";
+    content: none
+  }
+  
+  .arrow-right::after,
+  .clearfix:after,
+  .container .content:after {
+    content: ''
+  }
+  
+  a img {
+    border: none
+  }
+  
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section,
+  summary {
+    display: block
+  }
+  
+  body {
+    -webkit-backface-visibility: hidden
+  }
+  
+  body.body-fixed-bottom {
+    padding-bottom: 50px
+  }
+  
+  strong {
+    font-weight: 700
+  }
+  
+  a {
+    background: 0 0;
+    text-decoration: none
+  }
+  
+  h1 {
+    font-size: 2em;
+    margin: .67em 0
+  }
+  
+  h2 {
+    font-size: 18px;
+    line-height: 22px
+  }
+  
+  h3 {
+    font-size: 15px;
+    line-height: 18px
+  }
+  
+  [type=number],
+  [type=text],
+  [type=password],
+  [type=email],
+  [type=search],
+  button,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: 100%;
+    margin: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none
+  }
+  
+  .c-orange {
+    color: #f60!important
+  }
+  
+  .c-orange-dark {
+    color: #f15a0c!important
+  }
+  
+  .c-green {
+    color: #06bf04!important
+  }
+  
+  .c-wx-green {
+    color: #4b0!important
+  }
+  
+  .c-red {
+    color: #ed5050!important
+  }
+  
+  .c-pink {
+    color: #ee614b!important
+  }
+  
+  .c-white {
+    color: #fff!important
+  }
+  
+  .c-gray-light {
+    color: #e5e5e5!important
+  }
+  
+  .c-gray {
+    color: #c9c9c9!important
+  }
+  
+  .c-gray-dark {
+    color: #999!important
+  }
+  
+  .c-gray-darker {
+    color: #666!important
+  }
+  
+  .c-black {
+    color: #333!important
+  }
+  
+  .c-yellow {
+    color: #f09000!important
+  }
+  
+  .c-light-yellow {
+    color: #fcff00!important
+  }
+  
+  .c-blue {
+    color: #38f!important
+  }
+  
+  hr {
+    margin: 10px 0;
+    border: 0;
+    -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line.png) 2 stretch;
+    -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line.png) 2 stretch;
+    border-top: 2px solid #e5e5e5
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    hr {
+      border-top-width: 1px
+    }
+  }
+  
+  hr.margin-0 {
+    margin: 0
+  }
+  
+  hr.left-10 {
+    margin-left: 10px
+  }
+  
+  .relative {
+    position: relative
+  }
+  
+  .font-size-12 {
+    font-size: 12px!important
+  }
+  
+  .font-size-14 {
+    font-size: 14px!important
+  }
+  
+  .font-size-16 {
+    font-size: 16px!important
+  }
+  
+  .font-size-18 {
+    font-size: 18px!important
+  }
+  
+  .font-size-20 {
+    font-size: 20px!important
+  }
+  
+  .font-size-22 {
+    font-size: 22px!important
+  }
+  
+  .font-size-24 {
+    font-size: 24px!important
+  }
+  
+  .font-size-26 {
+    font-size: 26px!important
+  }
+  
+  .font-size-28 {
+    font-size: 28px!important
+  }
+  
+  .ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
+  }
+  
+  .border-bottom-none {
+    border-bottom: 0!important
+  }
+  
+  .border-top-none {
+    border-top: 0!important
+  }
+  
+  .link,
+  .link:active,
+  .link:hover,
+  .link:link,
+  .link:visited {
+    color: #07d
+  }
+  
+  .clearfix:after {
+    display: table;
+    clear: both
+  }
+  
+  .pull-left {
+    float: left
+  }
+  
+  .pull-right {
+    float: right
+  }
+  
+  .show {
+    display: block
+  }
+  
+  .hide {
+    display: none!important;
+    visibility: hidden
+  }
+  
+  .center,
+  .text-center {
+    text-align: center
+  }
+  
+  .text-left {
+    text-align: left
+  }
+  
+  .text-right {
+    text-align: right
+  }
+  
+  .btn,
+  .btn-block,
+  .copyright,
+  .footer,
+  .fullscreen-guide {
+    text-align: center
+  }
+  
+  .loading {
+    background-image: url(https://b.yzcdn.cn/v2/image/loader.gif)!important;
+    background-repeat: no-repeat!important;
+    background-position: center center!important;
+    background-size: 16px 16px
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .loading {
+      background-image: url(https://b.yzcdn.cn/v2/image/loader@2x.gif)!important
+    }
+  }
+  
+  .with-bs-bottom,
+  .with-bs-top {
+    background: url(https://b.yzcdn.cn/v2/image/wap/bottom_line.png) left top no-repeat;
+    background-size: 100% 1px
+  }
+  
+  .with-bs-bottom {
+    background-position: left bottom
+  }
+  
+  .arrow-right::after {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    border-top: 2px solid #cbc9cc;
+    border-right: 2px solid #cbc9cc;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    top: 50%;
+    right: 3px;
+    margin-top: -5px
+  }
+  
+  .content,
+  .wrapper {
+    margin: 0 auto
+  }
+  
+  .wrapper {
+    width: 320px
+  }
+  
+  .container .content:after {
+    display: table;
+    clear: both
+  }
+  
+  .copyright {
+    background-color: #f8f8f8;
+    color: #999;
+    font-size: 12px;
+    line-height: 16px
+  }
+  
+  .copyright .ft-links {
+    padding: 15px
+  }
+  
+  .copyright .ft-links>a {
+    margin: 0 6px;
+    color: #333
+  }
+  
+  .copyright .ft-links~.ft-copyright {
+    -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line.png) 2 stretch;
+    -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line.png) 2 stretch;
+    border-top: 2px solid #e5e5e5
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .copyright .ft-links~.ft-copyright {
+      border-top-width: 1px
+    }
+  }
+  
+  .copyright .ft-copyright {
+    padding: 50px 0 20px;
+    margin: 0 15px;
+    font-size: 12px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/common/logo_v3@2x.png) center 15px no-repeat;
+    background-size: 110px 30px
+  }
+  
+  .copyright .ft-copyright>a {
+    padding-top: 45px;
+    color: #ccc
+  }
+  
+  .copyright .ft-copyright .yz-logo {
+    padding-left: 14px;
+    position: relative
+  }
+  
+  .copyright .ft-copyright .yz-logo::before {
+    content: '';
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAkCAMAAACpD3pbAAAAb1BMVEUAAADLy8vKysrLy8vLy8vLy8vLy8vLy8vMzMzOzs7Ly8vLy8vMzMzQ0NDLy8vLy8vLy8vLy8vLy8vMzMzOzs7Pz8/S0tLLy8vKysrLy8vKysrLy8vLy8vLy8vMzMzNzc3Nzc3R0dHLy8vMzMzKysrwyZpuAAAAJHRSTlMAoqm+ZfvtjEA4z65xCebgxJmGUjMdGPPm2tW0p5OQSSkQdl8nEAN1AAAAwUlEQVQ4y6XQyRaDIAyF4bQgivNsnbXN+z9jj7CoUsLGf/udLHLhWj2kTAJZj4jeRmmDRxPFgeKQYq54oHhWzCjOFUeEJp3iguAaVSXBseaYYKb5Y9fdO18nm2yNr3XCX6JQHPPyM4do9jIWpTkxjo39fIMuAyWlRfW8TbXCA21lIJlAfMDTygIyRJpzQBe/3SzdXLu5usNe6+QRnOzf4sDFKQc7i7yI1wbgj1M286CFX57mKRt9LncwW7o+KgMg+gJYeFH82wegJQAAAABJRU5ErkJggg==) no-repeat;
+    background-size: 10px 12px;
+    width: 10px;
+    height: 12px;
+    position: absolute;
+    bottom: 1px;
+    left: 0
+  }
+  
+  .copyright .pf-copyright {
+    display: block;
+    background: url(https://b.yzcdn.cn/v2/image/pf/ui/copyright.png) center 20px no-repeat;
+    background-size: 73px 24px
+  }
+  
+  .footer {
+    margin: 0;
+    padding: 0;
+    min-height: 1px;
+    line-height: 16px;
+    background-color: #f8f8f8
+  }
+  
+  .footer .link-icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-bottom: -3px;
+    margin-right: 10px;
+    background-image: url(data:image/png;base64,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);
+    background-repeat: no-repeat;
+    background-size: 16px
+  }
+  
+  .footer .link-title {
+    font-size: 16px
+  }
+  
+  .full-screen .footer {
+    margin-top: 0
+  }
+  
+  .btn {
+    display: inline-block;
+    border-radius: 3px;
+    padding: 5px 4px;
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.5;
+    -webkit-appearance: none;
+    background-color: #fff;
+    border: 1px solid #e5e5e5;
+    color: #999
+  }
+  
+  .fullscreen-guide.hide,
+  .motify {
+    display: none
+  }
+  
+  .btn-disabled,
+  .btn[disabled] {
+    background-color: #c9c9c9!important;
+    background-image: none!important;
+    border: 1px solid transparent!important;
+    color: #fff!important
+  }
+  
+  .btn-disabled:active,
+  .btn[disabled]:active {
+    background-color: #c9c9c9!important;
+    background-image: none!important;
+    border: 1px solid #bcbcbc!important
+  }
+  
+  .btn-default {
+    color: #999;
+    background-color: #fff;
+    border: 1px solid #e5e5e5
+  }
+  
+  .btn-action-secondary {
+    color: #fff;
+    background-color: #f85;
+    border-color: #f85
+  }
+  
+  .btn-action-primary {
+    color: #fff;
+    background-color: #f44;
+    border-color: #f44
+  }
+  
+  .btn-blue {
+    color: #fff;
+    background-color: #38f;
+    border-color: #38f
+  }
+  
+  .btn-gray-dark {
+    color: #333;
+    background-color: #999;
+    border-color: #999
+  }
+  
+  .btn-green {
+    color: #fff;
+    background-color: #06bf04;
+    border-color: #03b401
+  }
+  
+  .btn-wx-green {
+    color: #fff;
+    background-color: #4b0;
+    border-color: #4b0
+  }
+  
+  .btn-red {
+    color: #fff;
+    background-color: #ed5050;
+    border-color: #ed5050
+  }
+  
+  .btn-pink {
+    color: #fff;
+    background-color: #ee614b;
+    border-color: #ee614b
+  }
+  
+  .btn-white {
+    color: #333;
+    background-color: #fff;
+    border-color: #e5e5e5
+  }
+  
+  .btn-yellow {
+    color: #fff;
+    background-color: #f09000;
+    border-color: #f09000
+  }
+  
+  .btn-grayeee {
+    color: #999;
+    background-color: #eee;
+    border-color: 1px solid #ebebeb
+  }
+  
+  .btn-orange {
+    color: #fff;
+    border-color: #f60;
+    background-color: #f60
+  }
+  
+  .btn-orange-dark {
+    color: #fff;
+    border-color: #f15a0c;
+    background-color: #f15a0c
+  }
+  
+  .btn-block {
+    width: 100%;
+    padding: 11px 10px;
+    font-size: 16px;
+    line-height: 16px;
+    border-radius: 4px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+  }
+  
+  .btn-xsmall,
+  .btn-xxsmall {
+    line-height: 14px;
+    width: auto;
+    font-size: 12px
+  }
+  
+  .btn-xsmall {
+    padding: 8px 10px
+  }
+  
+  .btn-xxsmall {
+    padding: 4px 10px
+  }
+  
+  .btn-l,
+  .motify {
+    font-size: 14px
+  }
+  
+  .btn-l {
+    padding: 9px 4px
+  }
+  
+  .btn-opt {
+    min-width: 50px
+  }
+  
+  .motify {
+    position: fixed;
+    top: 35%;
+    left: 50%;
+    width: 220px;
+    padding: 0;
+    margin: 0 0 0 -110px;
+    z-index: 9999;
+    background: rgba(0, 0, 0, .8);
+    color: #fff;
+    line-height: 1.5em;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
+  }
+  
+  .motify .motify-inner {
+    padding: 10px;
+    text-align: center;
+    word-wrap: break-word
+  }
+  
+  .motify p {
+    margin: 0 0 5px
+  }
+  
+  .motify p:last-of-type {
+    margin-bottom: 0
+  }
+  
+  .fullscreen-guide {
+    z-index: 2000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .9)
+  }
+  
+  .fullscreen-guide .guide-close {
+    position: absolute;
+    top: 0;
+    left: 10px;
+    font-size: 40px;
+    color: #fff;
+    cursor: pointer
+  }
+  
+  .fullscreen-guide .guide-arrow {
+    position: absolute;
+    top: 2px;
+    right: 15px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/guide_arrow.png) top left no-repeat;
+    width: 47px;
+    height: 44px
+  }
+  
+  .fullscreen-guide .guide-inner {
+    padding-top: 48px;
+    width: 320px;
+    margin: 0 auto
+  }
+  
+  .fullscreen-guide .step {
+    width: 260px;
+    display: inline-block;
+    text-align: left;
+    margin-bottom: 15px
+  }
+  
+  .follow-guide .guide-inner-title {
+    color: #fff;
+    border-bottom: 1px solid #666;
+    padding-bottom: 20px;
+    font-size: 18px;
+    font-weight: 400
+  }
+  
+  .follow-guide .wxid {
+    display: inline-block;
+    text-align: left;
+    margin-bottom: 20px;
+    font-size: 18px
+  }
+  
+  .follow-guide .wxid .hasno-mp-weixin {
+    width: 200px;
+    height: 200px;
+    margin-top: 20px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/cannot_follow@2x.png) no-repeat;
+    background-size: cover
+  }
+  
+  .follow-guide .wxid strong {
+    padding: 1px 5px;
+    background-color: #fff;
+    color: #000;
+    border-radius: 4px
+  }
+  
+  .follow-guide .guide-text {
+    color: #fff;
+    font-size: 16px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #666
+  }
+  
+  .follow-guide .guide-text-title {
+    color: #fff;
+    margin: 15px 0;
+    font-size: 20px
+  }
+  
+  .follow-guide .guide-text-step {
+    text-align: left;
+    padding-left: 56px;
+    color: #fff;
+    margin-bottom: 10px;
+    font-size: 16px
+  }
+  
+  .follow-guide .step-1,
+  .follow-guide .step-2,
+  .follow-guide .step-3 {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+  }
+  
+  .follow-guide .step-1 {
+    height: 29px
+  }
+  
+  .follow-guide .step-2 {
+    margin-bottom: 10px;
+    height: 64px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/step_2.png) no-repeat
+  }
+  
+  .follow-guide .step-3 {
+    margin-top: 10px;
+    height: 68px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/step_3.png) no-repeat
+  }
+  
+  .follow-guide .quick-subscribe {
+    margin: 140px 15px 0;
+    padding: 10px;
+    background: #fff;
+    border: 2px solid #f2f2f2;
+    border-radius: 10px
+  }
+  
+  .follow-guide .quick-subscribe h2 {
+    font-size: 14px;
+    border-bottom: 1px solid #f2f2f2;
+    padding-bottom: 20px;
+    margin: 12px 0
+  }
+  
+  .follow-guide .quick-subscribe .btn {
+    font-size: 14px;
+    background: #4b0;
+    color: #fff;
+    display: inline-block;
+    line-height: 38px;
+    padding: 0 26px;
+    border-radius: 4px
+  }
+  
+  #right-icon,
+  .fixed-icon {
+    border-radius: 26px;
+    position: fixed;
+    right: 6px;
+    width: 50px
+  }
+  
+  .fuck-taobao .step-1 {
+    height: 29px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/step_1.png) no-repeat
+  }
+  
+  .fuck-taobao .step-2 {
+    height: 86px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/ftios_step_2.png) no-repeat
+  }
+  
+  .fuck-taobao .step-and-2 {
+    height: 62px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/ftand_step_2.png) no-repeat
+  }
+  
+  .fav-guide .step-1 {
+    height: 29px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/step_1.png) no-repeat
+  }
+  
+  .fav-guide .step-2 {
+    height: 86px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/fav_step_2.png) no-repeat
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (-o-min-device-pixel-ratio:3 / 2),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .fullscreen-guide .guide-arrow {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/guide_arrow@2x.png);
+      background-size: 47px 44px
+    }
+    .follow-guide .step-2 {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/step_2@2x.png);
+      background-size: 260px 64px
+    }
+    .follow-guide .step-3 {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/step_3@2x.png);
+      background-size: 260px 68px
+    }
+    .fuck-taobao .step-1 {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/step_1@2x.png);
+      background-size: 260px 29px
+    }
+    .fuck-taobao .step-2 {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/ftios_step_2@2x.png);
+      background-size: 248px 86px
+    }
+    .fuck-taobao .step-and-2 {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/ftand_step_2@2x.png);
+      background-size: 260px 62px
+    }
+    .fav-guide .step-1 {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/step_1@2x.png);
+      background-size: 260px 29px
+    }
+    .fav-guide .step-2 {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/fav_step_2@2x.png);
+      background-size: 260px 86px
+    }
+    .share-guide .step-1 {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/step_1@2x.png);
+      background-size: 260px 29px
+    }
+    .share-guide .step-2 {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/share_step_2@2x.png);
+      background-size: 260px 86px
+    }
+  }
+  
+  a#global-cart {
+    z-index: 10
+  }
+  
+  a#global-cart .icon-img {
+    background: url(https://b.yzcdn.cn/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png) -202px -4px no-repeat;
+    background-size: 300px 150px
+  }
+  
+  a#global-cart.hide {
+    display: none
+  }
+  
+  a#global-cart.new .icon-img {
+    background-position: -250px -4px
+  }
+  
+  .no-text a#global-cart {
+    background: url(https://b.yzcdn.cn/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png) no-repeat;
+    background-size: 300px 150px
+  }
+  
+  .no-text a#global-cart.s0 {
+    background-position: -200px -100px
+  }
+  
+  .no-text a#global-cart.s1 {
+    background-position: -150px -100px
+  }
+  
+  .no-text a#global-cart.s2 {
+    background-position: -100px -100px
+  }
+  
+  .no-text a#global-cart.s3 {
+    background-position: -50px -100px
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .no-text a#global-cart,
+    a#global-cart .icon-img {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png)
+    }
+    a#global-cart .icon-img {
+      background-position: -200px -7px
+    }
+    a#global-cart.new .icon-img {
+      background-position: -250px -7px
+    }
+  }
+  
+  .fixed-icon {
+    height: 50px;
+    bottom: 52px;
+    z-index: 70
+  }
+  
+  .ds-btn {
+    bottom: 115px
+  }
+  
+  .ds-btn .icon-img {
+    height: 100%;
+    background-image: url(https://b.yzcdn.cn/v2/image/wap/right_icon/icons_sprite/icons_sprite_e4444b6200.png);
+    background-repeat: no-repeat;
+    background-size: 300px 150px;
+    background-position: -250px -100px
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .ds-btn .icon-img {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_6b9819545.png)
+    }
+  }
+  
+  a#global-wish {
+    z-index: 10;
+    display: block
+  }
+  
+  #right-icon.no-text .icon-img,
+  #right-icon.no-text .icon-txt,
+  a#global-wish.hide {
+    display: none
+  }
+  
+  a#global-wish .icon-img {
+    background: url(https://b.yzcdn.cn/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png) -2px -4px no-repeat;
+    background-size: 300px 150px
+  }
+  
+  a#global-wish.new .icon-img {
+    background-position: -45px -7px
+  }
+  
+  .no-text a#global-wish {
+    background: url(https://b.yzcdn.cn/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png) -150px -50px;
+    background-size: 300px 150px
+  }
+  
+  .no-text a#global-wish.new {
+    background-position: -200px -50px
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .no-text a#global-wish,
+    a#global-wish .icon-img {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png)
+    }
+    a#global-wish .icon-img {
+      background-position: 3px -7px
+    }
+  }
+  
+  #right-icon {
+  height: 50px;
+  width: 50px;
+  border-radius: 26px;
+  /*border: 1px solid #e1e1e1;*/
+  position: fixed;
+  bottom: 52px;
+  right: 6px;
+  z-index: 30;
+  overflow: hidden;
+  -webkit-transition: width ease-in-out .3s;
+  -moz-transition: width ease-in-out .3s;
+  transition: width ease-in-out .3s;
+  /*background-color: white;*/
+  background-clip: padding-box
+}
+
+#right-icon .right-icon-container {
+  position: absolute;
+  height: 50px;
+  right: 0px;
+  top: 0px
+}
+
+#right-icon .icon {
+  float: left;
+  width: 50px;
+  height: 50px
+}
+
+#right-icon .show-more-btn {
+  background-image: url("https://b.yzcdn.cn/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png");
+  background-repeat: no-repeat;
+  background-size: 300px 150px;
+  background-position: 1px -50px
+}
+
+#right-icon .show-more-btn.new {
+  background-position: -99px -50px
+}
+
+#right-icon .icon-img {
+  /*height: 32px*/
+  height: 50px;
+}
+
+#right-icon .icon-txt {
+  line-height: 18px;
+  font-size: 12px;
+  text-align: center;
+  color: #9f9f9f
+}
+
+#right-icon.show {
+  padding-left: 12px
+}
+
+#right-icon.show .show-more-btn {
+  background-position: -49px -50px
+}
+
+#right-icon.no-text {
+  border: 0px none;
+  background-color: transparent
+}
+
+#right-icon.no-text .icon-txt,
+#right-icon.no-text .icon-img {
+  display: none
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  #right-icon .show-more-btn {
+    background-image: url("https://b.yzcdn.cn/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png")
+  }
+}
diff --git a/src/pages/goods/goods_custom.css b/src/pages/goods/goods_custom.css
new file mode 100644
index 0000000..e1366c3
--- /dev/null
+++ b/src/pages/goods/goods_custom.css
@@ -0,0 +1,3816 @@
+
+  .custom-image img,
+  .custom-image-swiper .swiper-slide a img {
+    max-width: 100%;
+    height: auto
+  }
+  
+  .custom-image-single {
+    position: relative
+  }
+  
+  .custom-image-single img {
+    width: 100%;
+    float: left
+  }
+  
+  .custom-image .title,
+  .custom-image-single .title,
+  .custom-image-swiper .title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: left;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 5px 10px;
+    z-index: 10;
+    background-color: rgba(51, 51, 51, .8);
+    color: #fff;
+    font-size: 14px;
+    line-height: 1.5
+  }
+  
+  .custom-image a[href="javascript:;"],
+  .custom-image a[href="javascript:void(0);"],
+  .custom-image-single a[href="javascript:;"],
+  .custom-image-single a[href="javascript:void(0);"],
+  .custom-image-swiper a[href="javascript:;"],
+  .custom-image-swiper a[href="javascript:void(0);"] {
+    cursor: default
+  }
+  
+  .custom-image-swiper {
+    width: 100%;
+    position: relative
+  }
+  
+  .custom-image-swiper .swiper-slide a {
+    display: block;
+    position: relative;
+    text-align: center;
+    width: 320px
+  }
+  
+  .custom-image-swiper-single .swiper-slide {
+    float: none
+  }
+  
+  .custom-image {
+    padding: 0 5px;
+    margin: 0;
+    font-size: 12px
+  }
+  
+  .custom-image li {
+    margin: 5px auto;
+    position: relative;
+    min-height: 40px
+  }
+  
+  .custom-image a {
+    display: block
+  }
+  
+  .custom-image img {
+    display: block;
+    margin: 0 auto
+  }
+  
+  .custom-image .custom-image-small {
+    width: 50%;
+    height: 152.5px;
+    float: left;
+    overflow: hidden;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding-left: 0;
+    padding-right: 2px
+  }
+  
+  .custom-image .custom-image-small a {
+    width: 100%;
+    height: 100%
+  }
+  
+  .custom-image .custom-image-small div {
+    width: 100%;
+    height: 100%;
+    position: relative
+  }
+  
+  .custom-image .custom-image-small div img {
+    width: 100%;
+    height: auto
+  }
+  
+  .custom-image .custom-image-small:nth-child(2n) {
+    padding-left: 2px;
+    padding-right: 0
+  }
+  
+  .custom-image .custom-image-small.custom-image-rectangle {
+    padding: 0 5px;
+    height: 110px
+  }
+  
+  .custom-richtext img,
+  .custom-richtext ol {
+    width: auto!important
+  }
+  
+  .custom-richtext {
+    padding: 10px 10px 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    font-size: 16px;
+    color: #333;
+    line-height: 1.5;
+    overflow: hidden;
+    text-align: left;
+    word-wrap: break-word;
+    position: relative
+  }
+  
+  .custom-richtext img+br {
+    display: block;
+    padding: 4px 0;
+    content: ' '
+  }
+  
+  .custom-richtext p {
+    margin: 0 0 1em
+  }
+  
+  .custom-richtext .Powered-by-XIUMI p {
+    margin: 0
+  }
+  
+  .custom-richtext a {
+    color: #07d
+  }
+  
+  .custom-richtext img {
+    background: 0 0;
+    max-width: 100%!important;
+    min-height: 1px;
+    vertical-align: bottom
+  }
+  
+  .custom-richtext ol,
+  .custom-richtext ul {
+    list-style-position: inside;
+    padding-left: 0
+  }
+  
+  .custom-richtext blockquote {
+    padding: 0 0 0 15px;
+    margin: 0 0 18px;
+    border-left: 5px solid #EEE
+  }
+  
+  .custom-richtext em,
+  .custom-richtext i {
+    font-style: italic
+  }
+  
+  .custom-richtext b,
+  .custom-richtext strong {
+    font-weight: 700
+  }
+  
+  .custom-richtext .selectTdClass {
+    background-color: #edf5fa!important
+  }
+  
+  .custom-richtext table.noBorderTable caption,
+  .custom-richtext table.noBorderTable td,
+  .custom-richtext table.noBorderTable th {
+    border: 1px dashed #ddd!important
+  }
+  
+  .custom-richtext table {
+    margin-bottom: 10px;
+    border-collapse: collapse;
+    display: table;
+    width: auto!important
+  }
+  
+  .custom-richtext td,
+  .custom-richtext th {
+    padding: 5px 10px;
+    border: 1px solid #ddd
+  }
+  
+  .custom-richtext caption {
+    border: 1px dashed #ddd;
+    border-bottom: 0;
+    padding: 3px;
+    text-align: center
+  }
+  
+  .custom-richtext th {
+    border-top: 2px solid #bbb;
+    background: #f7f7f7
+  }
+  
+  .custom-richtext .ue-table-interlace-color-single {
+    background-color: #fcfcfc
+  }
+  
+  .custom-richtext .ue-table-interlace-color-double {
+    background-color: #f7faff
+  }
+  
+  .custom-richtext td p {
+    margin: 0;
+    padding: 0
+  }
+  
+  .custom-richtext .bottom-floating-banner {
+    position: fixed!important;
+    bottom: 0
+  }
+  
+  .custom-richtext-fullscreen {
+    padding: 0;
+    margin-top: 0
+  }
+  
+  @charset "UTF-8";
+  .custom-store {
+    position: relative;
+    padding: 10px;
+    background-color: #fff
+  }
+  
+  .custom-store .custom-store-img {
+    position: absolute;
+    top: 13px;
+    left: 18px;
+    height: 16px;
+    width: 16px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAABRNJREFUaAXtmctrXHUUx+cRQxa2YhNTO8UnbjSkYjOTyUNR2uzCKEKjllYCGvoPhK5cGLsrtVAoFLTNIrEUbbuRJMRUGyg45jURalE33SShiYjURd04ZhI/Zzrn8ps7985M2vl1fMyFH+f8zu88vuf3uufOBAK1pzYD9zUDQS/rzc3NYHt7+8DGxsZ7wWCwhf42Lz3bMmLfIfaPxBlOpVLD9DfdMQsSaGtr24XSedo+t3I1+4C/Sju8sLDwi4kjZHZk5un/48ALRrDtp53PYXRg561ALBY7wrb5JDeahn7Y0NAwmkwmVx2LB8h0d3dH0ul0P5g+IuxDEjoUCh1hFc4qjLAyQiORyBnI7pzsg8XFxeMrKyt3cv0HTiT26urqt+D6i+A9AoAVaF5bWzunYNxb6AUdgI4afLXZEQNAi8EH8hJg4GEdZPbXlK82dWFxMAoudwLVxrrl+LUEtjxlFTaorUCFJ3TL7v5bK0CtkdEp6Ovrq1e+2tTEYmIUXHUmON5yt+g/KbLl5eVWyKLwfk88Ht+zvr7+Bk5/p112F1p+dpQsjxPrAO3Rurq6L+fm5n7w0xX50tLSHh3PYdRu/nsAENd1JJPJvKW8F41Go++gIwkew+lp6pXvqWT3eumaMtERXbERW/EhvkwdN49+n8pMjCLLOwM4/UwVoYM4fs3oO6zI0R2lmSu4C+dXGGt3FF0M4OPofI1YSvbsIz7EV7FYKA7m1KUWMjEG8qrRoaGh0NjYWBLlDjEgmJyJk+Fw+CJb5WeWezcz1o+To8j1jMgqPEFrpqnNWarGUezlY0SCtjCL/bAD8FpA/kp/hdZGkyeN/glijRDrFrGez+2CQcNmNpFIdINz464J8ZRR2tnZ+Rwl7DX6EZUVoVJmRwnaDMBpAu0oousMAfQ2Ce4DoCSRopUVq76+/tWZmZmbjiOYvC0kA6KA81dMJS8eEElmKS6F1vz8/HWSeBG9KS9dl2xKdMVGbMWH+HLpFHSxedkNXpQKVkAt2a/m96dUpjsIJDN+A3qut7d3wlxKteOG6WIl+mmyDZ/KyZewmaWNcFN9p7pKZetOTEz0YjOArBUqK3Kb5pwVkvXE6ikUx2YCfsaiZ/MpB0PBFrIJyIbvf30C5j1uY4ICsr/Hx8ffxvlB9nYU2kj7jfOQol3gMF+EmudtSzisrgAH+lnApwB+gZYAmRxKeX9E6L/O1fs5OvMdHR1PI7unx1oC/LL3DABnAfpSMWSMR3lxzXZ1demNVUy9YMxKArJteEldJtpjEpEtkuHdcpw7P8rvTNu502OIPxa5jJPETl6el6C+t6LoeT1WzgDbRgrBbGEnIGn7uf+vGQDk7Zti+3wFnQJ4mBajHjpA/5KhV5K1sgJEPWhEPukC7wwhvwrwUyog0UPKl0utJAAouW2yD1un6Iwy/oXqyiooXy61kgAzuVMBNDY23lDeizY1NTkfM6adl66XzEoCzKSWzIHJyck/vQKrzBw37XS8FLWSQKmglRz/fyRAVfhIJWetHF/8YLC9HL1iK/CHOuDF4/wqoDLblBdhqxHDwWLIsmyxBLLfs6JFSXDUbWi7z4F2PuS5nX7yi+ebAPfzsBrhLME2+vR+ii71VYpKTUSsM+i9qbok4GBRmVLf2gPQQV71V6A9qlwlOs1frD0k4Vly+66AGNDepX1TJeASdpp22A+8KPiugAzqQ5H1PisxgCPrf3oTo+Sf24qrRmszUIEZ+BsXxgP8QCOEqgAAAABJRU5ErkJggg==) no-repeat;
+    background-size: 16px 16px
+  }
+  
+  .custom-store .custom-store-link {
+    display: block
+  }
+  
+  .custom-store .custom-store-name {
+    float: left;
+    padding: 0 0 0 26px;
+    height: 22px;
+    line-height: 22px;
+    font-size: 14px;
+    color: #333;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+  }
+  
+  .custom-store .custom-store-enter {
+    float: right;
+    height: 14px;
+    line-height: 14px;
+    margin: 4px 0;
+    font-size: 14px;
+    color: #999;
+    padding-right: 15px
+  }
+  
+  .custom-store .custom-store-branch {
+    color: #999;
+    font-size: 12px;
+    margin-top: 5px
+  }
+  
+  .custom-store::after {
+    content: '';
+    position: absolute;
+    top: 16px;
+    right: 10px;
+    width: 6px;
+    height: 12px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAMAAAD57OxYAAAAPFBMVEUAAACZmZmlpaWampqZmZmampqampqampqampqbm5ubm5ucnJyZmZmfn5+bm5uZmZmampqampqbm5uZmZnmDXU5AAAAE3RSTlMA8Qjo3dHCn4lPPi8jGA+ysXRhTrGNsAAAAFxJREFUGNNl0EcOwCAMRNEUekv5979r2Bgr4BVPQrbH27/Cq+8H4oCHPQmOqysPOTiLqFkwVVQN2CYqJ7hDlHe4BVvq8kMRCCv0mzZYW+tQXUcXnSNoOI09H2StDz/YBU9Q8POZAAAAAElFTkSuQmCC) no-repeat;
+    background-size: 6px 12px
+  }
+  
+  .custom-store.border {
+    -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    border-top: 2px solid #e5e5e5;
+    border-bottom: 2px solid #e5e5e5
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .custom-store.border {
+      border-top-width: 1px;
+      border-bottom-width: 1px
+    }
+  }
+  
+  .custom-store.border:last-child {
+    border-bottom: 2px solid #e5e5e5
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .custom-store.border:last-child {
+      border-bottom-width: 1px
+    }
+  }
+  
+  @charset "UTF-8";
+  .sc-goods-list.pic .goods-card.big-pic.card .link,
+  .sc-goods-list.pic .goods-card.small-pic.card .link,
+  .sc-goods-list.pic .goods-card.small-pic.promotion .link,
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic,
+  .sc-goods-list.pic.waterfall .goods-card.small-pic .link {
+    -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch
+  }
+  
+  .sc-goods-list {
+    font-size: 12px;
+    padding: 5px;
+    list-style: none;
+    margin: 0
+  }
+  
+  .sc-goods-list .goods-card {
+    position: relative;
+    margin: 0 5px
+  }
+  
+  .sc-goods-list .link {
+    display: block;
+    background: #fff;
+    min-height: 100px
+  }
+  
+  .sc-goods-list .info.info-no-price p.goods-price-taobao,
+  .sc-goods-list .info.info-no-title p.goods-title {
+    display: none!important
+  }
+  
+  .sc-goods-list .photo-block {
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+    background-color: #f8f8f8;
+    background-size: 6px 6px
+  }
+  
+  .sc-goods-list .photo-block img {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    vertical-align: bottom;
+    max-width: 100%
+  }
+  
+  .sc-goods-list .info {
+    position: relative
+  }
+  
+  .sc-goods-list .info p {
+    margin: 0
+  }
+  
+  .sc-goods-list .info p.goods-title {
+    line-height: 1.3;
+    overflow: hidden;
+    color: #333
+  }
+  
+  .sc-goods-list .info p.goods-sub-title {
+    word-break: break-all;
+    line-height: 16px;
+    padding-top: 0;
+    color: #666;
+    white-space: normal
+  }
+  
+  .sc-goods-list .info p.goods-price {
+    font-weight: 700;
+    padding: 0
+  }
+  
+  .sc-goods-list .info p.goods-price>em {
+    font-style: normal;
+    color: #f60
+  }
+  
+  .sc-goods-list .info p.goods-price-taobao {
+    color: #999;
+    font-size: 12px;
+    text-decoration: line-through
+  }
+  
+  .sc-goods-list .info.info-no-price p.goods-price {
+    opacity: 0
+  }
+  
+  .sc-goods-list .buy-tag-space {
+    height: 14px
+  }
+  
+  .sc-goods-list .more-link,
+  .sc-goods-list .more-link:active,
+  .sc-goods-list .more-link:hover,
+  .sc-goods-list .more-link:link,
+  .sc-goods-list .more-link:visited {
+    color: #07d
+  }
+  
+  .sc-goods-list .empty-list .desc {
+    margin-top: 50px;
+    margin-bottom: 50px;
+    font-size: 16px;
+    color: #999
+  }
+  
+  .sc-goods-list .empty-list .tag-home {
+    padding: 0;
+    width: 138px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 14px
+  }
+  
+  .sc-goods-list .sold-out {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    color: #fff;
+    background: url(//dn-kdt-img-test.qbox.me/public_files/2016/06/07/2bdf7cbffa23b7cbef3c4fc292112fee.png) center center no-repeat rgba(0, 0, 0, .3);
+    background-size: auto 40%;
+    text-indent: -999em
+  }
+  
+  .sc-goods-list.pic .goods-card.normal .info .goods-buy,
+  .sc-goods-list.pic .goods-card.normal .info .goods-price-taobao,
+  .sc-goods-list.pic .goods-card.small-pic .info .goods-price-taobao,
+  .sc-goods-list.pic .goods-card.small-pic.normal .info .goods-title,
+  .sc-goods-list.pic .goods-card.small-pic.promotion .info .goods-title {
+    display: none
+  }
+  
+  .sc-goods-list .sold-out em {
+    margin: auto
+  }
+  
+  .sc-goods-list .goods-buy {
+    position: absolute
+  }
+  
+  .sc-goods-list .goods-buy.btn1,
+  .sc-goods-list .goods-buy.btn2,
+  .sc-goods-list .goods-buy.btn3,
+  .sc-goods-list .goods-buy.btn4 {
+    background-image: url(https://b.yzcdn.cn/v2/image/wap/showcase-1416814739063.png);
+    background-repeat: no-repeat
+  }
+  
+  .sc-goods-list .goods-buy.btn1 {
+    right: 10px;
+    bottom: 8px;
+    height: 25px;
+    width: 30px;
+    background-position: 0 0
+  }
+  
+  .sc-goods-list .goods-buy.btn1.ajax-loading {
+    right: 12px;
+    bottom: 10px
+  }
+  
+  .sc-goods-list .goods-buy.btn2 {
+    right: 10px;
+    bottom: 8px;
+    height: 20px;
+    width: 20px;
+    background-position: 0 -88px
+  }
+  
+  .sc-goods-list .goods-buy.btn2.ajax-loading {
+    right: 12px;
+    bottom: 10px
+  }
+  
+  .sc-goods-list .goods-buy.btn3 {
+    right: 1px;
+    bottom: 8px;
+    height: 25px;
+    width: 40px;
+    background-position: 0 -25px
+  }
+  
+  .sc-goods-list .goods-buy.btn3.ajax-loading {
+    right: 12px;
+    bottom: 10px
+  }
+  
+  .sc-goods-list .goods-buy.btn4 {
+    right: 10px;
+    bottom: 8px;
+    height: 20px;
+    width: 37px;
+    background-position: 0 -68px
+  }
+  
+  .sc-goods-list .goods-buy.btn4.ajax-loading {
+    right: 22px;
+    bottom: 10px
+  }
+  
+  .sc-goods-list .goods-buy.ajax-loading {
+    background-image: url(https://b.yzcdn.cn/v2/image/wap/common/loading.gif);
+    width: 16px;
+    height: 16px;
+    background-size: 16px 16px;
+    background-position: top left
+  }
+  
+  .sc-goods-list .buy-response {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 70px;
+    width: 70px;
+    opacity: 0
+  }
+  
+  .sc-goods-list .goods-wish {
+    position: absolute;
+    top: 0;
+    right: 10px;
+    width: 34px;
+    height: 23px;
+    background-position: 0 -9px;
+    background-repeat: no-repeat;
+    background-size: 34px 74px
+  }
+  
+  .sc-goods-list .goods-wish.added-wish {
+    background-position: 0 -41px
+  }
+  
+  .sc-goods-list .goods-wish.btn-wish {
+    background-image: url(https://b.yzcdn.cn/v2/image/wap/goods_list/wish_list.png)
+  }
+  
+  .sc-goods-list .wish-response {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50px;
+    height: 50px;
+    opacity: 0
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .sc-goods-list .goods-buy.btn1,
+    .sc-goods-list .goods-buy.btn2,
+    .sc-goods-list .goods-buy.btn3,
+    .sc-goods-list .goods-buy.btn4 {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/showcase2x-1416814739063.png);
+      background-repeat: no-repeat;
+      background-size: 40px auto
+    }
+    .sc-goods-list .goods-buy.btn4 {
+      background-position: 0 -50px
+    }
+    .sc-goods-list .goods-buy.ajax-loading {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/common/loading.gif);
+      background-size: 16px 16px;
+      background-position: top left
+    }
+    .sc-goods-list .goods-wish.btn-wish {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/goods_list/wish_list@2x.png)
+    }
+    .sc-goods-list .goods-wish.added-wish {
+      background-position: 0 -40px
+    }
+  }
+  
+  .sc-goods-list.pic .goods-card {
+    margin: 10px 0
+  }
+  
+  .sc-goods-list.pic .goods-card .info {
+    padding-left: 4px;
+    margin-top: 10px
+  }
+  
+  .sc-goods-list.pic .goods-card .info .goods-title {
+    margin-bottom: 5px
+  }
+  
+  .sc-goods-list.pic .goods-card .info .goods-price {
+    float: left;
+    margin: 0 10px 10px 0
+  }
+  
+  .sc-goods-list.pic .goods-wish {
+    top: 5px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic .photo-block img {
+    position: relative;
+    max-height: 500px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic .sold-out {
+    background-size: auto 34%
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic {
+    width: 50%;
+    float: left
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic .photo-block {
+    height: 143px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic .info {
+    font-size: 13px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic .info .goods-title {
+    height: 32px;
+    overflow: hidden;
+    word-break: break-word
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic .goods-buy.btn3 {
+    right: 1px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic .goods-buy.btn3.ajax-loading {
+    right: 12px
+  }
+  
+  .sc-goods-list.pic .goods-card.normal .photo-block {
+    width: 100%
+  }
+  
+  .sc-goods-list.pic .goods-card.normal .info {
+    position: absolute;
+    height: 22px;
+    bottom: 0;
+    right: 10px;
+    margin: 5px 0;
+    padding-left: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    background: rgba(0, 0, 0, .4);
+    background-clip: border-box;
+    border-radius: 2px
+  }
+  
+  .sc-goods-list.pic .goods-card.normal .info .goods-title {
+    float: left;
+    margin: 0;
+    padding-left: 10px;
+    max-width: 70%;
+    line-height: 22px;
+    color: #fff;
+    text-overflow: ellipsis;
+    white-space: nowrap
+  }
+  
+  .sc-goods-list.pic .goods-card.normal .info .goods-price {
+    color: #fff;
+    margin: 0;
+    float: right;
+    max-width: 70px;
+    overflow: hidden;
+    line-height: 22px;
+    height: 22px;
+    padding: 0 5px
+  }
+  
+  .sc-goods-list.pic .goods-card.normal .info .goods-price em {
+    color: #fff
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.normal .photo-block img {
+    max-width: 100%;
+    max-height: 192px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.normal .link {
+    position: relative;
+    margin: 5px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.normal .info {
+    width: auto
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal {
+    width: 100%
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal .link {
+    margin: 5px 0
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal .photo-block {
+    min-height: 100px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal .info {
+    left: 10px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal .info.info-no-title {
+    left: auto
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal.has-sub-title .info,
+  .sc-goods-list.pic .goods-card.big-pic.normal.has-sub-title .link {
+    background-color: #f9f9f9
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal.has-sub-title .info {
+    position: relative;
+    height: auto;
+    left: 0;
+    right: 0
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal.has-sub-title .info .goods-title {
+    color: #333;
+    font-size: 14px;
+    font-weight: 700;
+    min-width: 10px;
+    min-height: 22px;
+    padding-left: 0
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal.has-sub-title .info .goods-price {
+    position: absolute;
+    right: 0;
+    top: 0
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal.has-sub-title .info .goods-price em {
+    color: #f60;
+    font-size: 14px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal.has-sub-title .info .goods-sub-title {
+    clear: both
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.normal.has-sub-title .info.info-no-title.info-price {
+    padding-top: 22px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card {
+    margin: 8px 0;
+    width: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .link {
+    margin: 0 4px;
+    border-top: 2px solid #e5e5e5;
+    border-right: 2px solid #e5e5e5;
+    border-bottom: 2px solid #e5e5e5;
+    border-left: 2px solid #e5e5e5
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .sc-goods-list.pic .goods-card.big-pic.card .link {
+      border-width: 1px
+    }
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .photo-block {
+    min-height: 100px;
+    margin: 4px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .info {
+    margin-left: 4px;
+    padding-right: 8px;
+    min-height: 34px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .info .goods-title {
+    font-size: 14px;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 85%
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .info .goods-sub-title {
+    width: 100%;
+    margin-bottom: 6px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .info .goods-price {
+    font-size: 15px;
+    margin-top: 2px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .info .goods-price-taobao {
+    line-height: 17px;
+    padding-top: 2px;
+    padding-bottom: 8px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .info.info-no-price {
+    min-height: 28px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.info-title.info-no-price.btn1 {
+    bottom: 9px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.info-title.info-no-price.btn1.ajax-loading {
+    bottom: 13.5px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.info-title.info-no-price.btn2 {
+    bottom: 8px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.info-title.info-no-price.btn2.ajax-loading {
+    bottom: 11.5px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.info-title.info-no-price.btn4.ajax-loading {
+    bottom: 10.5px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn1 {
+    bottom: 10px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn1.ajax-loading {
+    bottom: 16.5px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn2 {
+    bottom: 12px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn2.ajax-loading {
+    bottom: 14.5px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn3 {
+    bottom: 10px;
+    right: 1px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn3.ajax-loading {
+    bottom: 13px;
+    right: 10px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn4 {
+    bottom: 10px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn4.ajax-loading {
+    bottom: 13.5px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card.has-sub-title .info.info-no-price .goods-sub-title {
+    padding-bottom: 35px
+  }
+  
+  .sc-goods-list.pic .goods-card.big-pic.card.has-sub-title .info.btn0 .goods-sub-title {
+    padding-bottom: 0
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.card {
+    max-height: 230px;
+    margin: 4px 0
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.card .link {
+    border-top: 2px solid #e5e5e5;
+    border-right: 2px solid #e5e5e5;
+    border-bottom: 2px solid #e5e5e5;
+    border-left: 2px solid #e5e5e5;
+    margin: 0 4px
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .sc-goods-list.pic .goods-card.small-pic.card .link {
+      border-width: 1px
+    }
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.card .photo-block img {
+    max-height: 100%
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.card .info {
+    min-height: 25px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.card .info .goods-price {
+    margin-top: 5px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.card .goods-buy.btn2,
+  .sc-goods-list.pic .goods-card.small-pic.card .goods-buy.btn2.ajax-loading {
+    bottom: 8px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.card .goods-buy.btn4 {
+    right: 12px;
+    bottom: 8px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.card .goods-buy.btn4.ajax-loading {
+    right: 16px;
+    bottom: 8px
+  }
+  
+  .sc-goods-list.pic .photo-block img {
+    max-height: 192px;
+    max-width: 100%
+  }
+  
+  .sc-goods-list.pic.waterfall .goods-card.small-pic {
+    width: 100%;
+    margin: 0
+  }
+  
+  .sc-goods-list.pic.waterfall .goods-card.small-pic .link {
+    border-top: 2px solid #e5e5e5;
+    border-right: 2px solid #e5e5e5;
+    border-bottom: 2px solid #e5e5e5;
+    border-left: 2px solid #e5e5e5;
+    margin: 4px
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .sc-goods-list.pic.waterfall .goods-card.small-pic .link {
+      border-width: 1px
+    }
+  }
+  
+  .sc-goods-list.pic.waterfall .goods-card.small-pic .photo-block {
+    height: auto;
+    min-height: 100px
+  }
+  
+  .sc-goods-list.pic.waterfall .goods-card.small-pic .photo-block img {
+    position: relative;
+    height: auto
+  }
+  
+  .sc-goods-list.pic.waterfall .goods-card.small-pic .info .goods-title {
+    height: auto;
+    max-height: 32px
+  }
+  
+  .sc-goods-list.pic.waterfall .goods-card.small-pic .info .goods-price {
+    margin-top: 5px;
+    margin-bottom: 11px
+  }
+  
+  .sc-goods-list.pic.waterfall .goods-wish {
+    top: 10px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.promotion {
+    max-height: 220px;
+    margin: 0
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.promotion .link {
+    border-top: 2px solid #e5e5e5;
+    border-right: 2px solid #e5e5e5;
+    border-bottom: 2px solid #e5e5e5;
+    border-left: 2px solid #e5e5e5;
+    margin: 4px;
+    position: relative
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .sc-goods-list.pic .goods-card.small-pic.promotion .link {
+      border-width: 1px
+    }
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.promotion .info {
+    height: 40px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding-top: 4px;
+    margin-top: 0;
+    background-color: #fff
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.promotion .info .goods-price {
+    font-size: 16px;
+    line-height: 16px;
+    margin-bottom: 3px;
+    overflow: hidden;
+    white-space: nowrap
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.promotion .info .goods-price em {
+    color: #ff495b
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.promotion .info .goods-price-taobao {
+    display: block;
+    clear: left;
+    text-decoration: line-through;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: 12px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.promotion .buy-response,
+  .sc-goods-list.pic .goods-card.small-pic.promotion .goods-buy {
+    right: 0;
+    bottom: 0;
+    width: 47px;
+    height: 40px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 7px 10px;
+    color: #fff;
+    font-size: 13px;
+    line-height: 13px
+  }
+  
+  .sc-goods-list.pic .goods-card.small-pic.promotion .goods-buy {
+    background: #ff495b
+  }
+  
+  .sc-goods-list.pic.size-2 .goods-card.big-pic.card {
+    margin: 4px 0
+  }
+  
+  .sc-goods-list.size-2 .goods-card.big-pic {
+    float: left
+  }
+  
+  .sc-goods-list.pic.size-4 {
+    padding: 5px 15px 0;
+    background-color: #fff
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic {
+    border-bottom: 2px solid #e5e5e5
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .sc-goods-list.pic.size-4 .goods-card.multi-pic {
+      border-bottom-width: 1px
+    }
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic:last-child,
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic:last-of-type {
+    margin-bottom: 0;
+    border-bottom: none;
+    -webkit-border-image: none;
+    -moz-border-image: none;
+    border-image: none
+  }
+  
+  .sc-goods-list.list .goods-card.card,
+  .sc-goods-list.list .goods-card.normal {
+    -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .goods-title {
+    font-size: 14px;
+    font-weight: 700;
+    color: #222;
+    line-height: 1.6;
+    margin-bottom: 2px;
+    word-break: break-word
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .sub-goods-title {
+    font-size: 12px;
+    color: #888;
+    line-height: 1.6;
+    margin-bottom: 8px;
+    word-break: break-word
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .photo-block {
+    float: none;
+    background-color: #fff;
+    margin: 0 0 20px;
+    height: auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .photo-block .photo-block-sep {
+    width: 4px
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .photo-block .phote-block-item {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -moz-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .photo-block .phote-block-item:before {
+    content: ' ';
+    display: block;
+    padding-top: 100%
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .photo-block .phote-block-item img {
+    max-width: 100%;
+    max-height: 100%
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic.single-pic .photo-block {
+    display: block
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic.single-pic .phote-block-item {
+    text-align: left
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic.single-pic .phote-block-item:before {
+    content: ' ';
+    display: none;
+    padding-top: 0
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic.single-pic .phote-block-item img {
+    position: static;
+    max-height: 175px
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .goods-operate {
+    position: relative;
+    margin: 0 45px 10px 0;
+    padding-right: 16px;
+    height: 16px
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .goods-operate .goods-price {
+    color: #999;
+    font-size: 12px
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .goods-operate .goods-share {
+    width: 20px;
+    height: 16px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-size: 51px 30px;
+    background-image: url(https://b.yzcdn.cn/v2/image/wap/showcase_e270134134.png)
+  }
+  
+  .sc-goods-list.pic.size-4 .goods-card.multi-pic .goods-buy.btn1 {
+    right: 5px;
+    bottom: 7px
+  }
+  
+  .sc-goods-list.list .goods-card .photo-block {
+    float: left;
+    margin-right: 13px;
+    width: 125px;
+    height: 125px
+  }
+  
+  .sc-goods-list.list .goods-card .photo-block img {
+    max-width: 125px;
+    max-height: 125px
+  }
+  
+  .sc-goods-list.list .goods-card .info {
+    height: 125px
+  }
+  
+  .sc-goods-list.list .goods-card .info .goods-title {
+    font-size: 14px;
+    max-height: 52px;
+    margin-bottom: 12px
+  }
+  
+  .sc-goods-list.list .goods-card .info .goods-price {
+    font-size: 15px;
+    margin-bottom: 8px
+  }
+  
+  .sc-goods-list.list .goods-card .info .goods-wish {
+    left: 88px;
+    right: auto
+  }
+  
+  .sc-goods-list.list .goods-card .info .wish-response {
+    left: 76px;
+    right: auto
+  }
+  
+  .sc-goods-list.list .goods-card .goods-buy.btn1 {
+    bottom: 2px
+  }
+  
+  .sc-goods-list.list .goods-card .goods-buy.btn1.ajax-loading {
+    bottom: 6.5px
+  }
+  
+  .sc-goods-list.list .goods-card .goods-buy.btn2 {
+    bottom: 3px
+  }
+  
+  .sc-goods-list.list .goods-card .goods-buy.btn2.ajax-loading {
+    bottom: 5.5px
+  }
+  
+  .sc-goods-list.list .goods-card .goods-buy.btn3 {
+    bottom: 0;
+    right: -7px
+  }
+  
+  .sc-goods-list.list .goods-card .goods-buy.btn3.ajax-loading {
+    bottom: 3px;
+    right: 10px
+  }
+  
+  .sc-goods-list.list .goods-card .goods-buy.btn4 {
+    bottom: 3px
+  }
+  
+  .sc-goods-list.list .goods-card .goods-buy.btn4.ajax-loading {
+    bottom: 6.5px
+  }
+  
+  .sc-goods-list.list .goods-card .sold-out {
+    background-size: auto 50%
+  }
+  
+  .sc-goods-list.list .goods-card.normal {
+    border-bottom: 2px solid #e5e5e5;
+    padding: 10px 0
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .sc-goods-list.pic.size-4 .goods-card.multi-pic .goods-operate .goods-share {
+      background-image: url(https://b.yzcdn.cn/v2/image/wap/showcase@2x_e270134134.png)
+    }
+    .sc-goods-list.list .goods-card.normal {
+      border-bottom-width: 1px
+    }
+  }
+  
+  .sc-goods-list.list .goods-card.normal .link {
+    background: 0 0
+  }
+  
+  .sc-goods-list.list .goods-card.normal .goods-title {
+    padding-top: 2px
+  }
+  
+  .sc-goods-list.list .goods-card.card {
+    padding: 5px 0 5px 5px;
+    margin: 8px;
+    border-top: 2px solid #e5e5e5;
+    border-right: 2px solid #e5e5e5;
+    border-bottom: 2px solid #e5e5e5;
+    border-left: 2px solid #e5e5e5;
+    background: #fff
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .sc-goods-list.list .goods-card.card {
+      border-width: 1px
+    }
+  }
+  
+  .sc-goods-list.list .goods-card.card .goods-title {
+    padding: 5px 6px 0 0
+  }
+  
+  .empty-list {
+    font-size: 14px;
+    display: block;
+    text-align: center;
+    padding: 30px 10px;
+    color: #999
+  }
+  
+  .empty-list h4 {
+    font-size: 16px;
+    margin-bottom: 10px;
+    color: #666
+  }
+  
+  .empty-list div {
+    margin-bottom: 20px
+  }
+  
+  .empty-list .empty-list-content,
+  .empty-list .empty-list-header {
+    margin-bottom: 0
+  }
+  
+  .empty-list .empty-list-content {
+    margin-top: 20px
+  }
+  
+  .empty-list .empty-list-content .home-page {
+    padding: 8px 30px
+  }
+  
+  .sc-goods-list .text-center {
+    line-height: 1.5
+  }
+  
+  @charset "UTF-8";
+  .share-mp-info,
+  .share-mp-info a,
+  .share-mp-info em,
+  .share-mp-info i {
+    color: #999
+  }
+  
+  .search-bar .tag.tag-clear,
+  .search-form .search-input {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box
+  }
+  
+  .search-bar .search-recom-list li p,
+  .share-mp-info .page-mp-info,
+  .share-mp-info i {
+    white-space: nowrap;
+    text-overflow: ellipsis
+  }
+  
+  .custom-richtext b,
+  .custom-richtext strong,
+  .search-bar .search-recom-list li p b {
+    font-weight: 700
+  }
+  
+  .share-mp-info {
+    position: relative;
+    background: #1e1d22;
+    font-size: 0;
+    line-height: 0;
+    padding: 1px 176px 1px 1px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex
+  }
+  
+  .share-mp-info em,
+  .share-mp-info i {
+    vertical-align: middle;
+    font-style: normal
+  }
+  
+  .share-mp-info i {
+    overflow: hidden
+  }
+  
+  .share-mp-info img.mp-image {
+    vertical-align: middle;
+    margin-right: 3px;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .25);
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25)
+  }
+  
+  .share-mp-info .links,
+  .share-mp-info .page-mp-info {
+    font-size: 14px;
+    line-height: 24px;
+    color: #999
+  }
+  
+  .share-mp-info .page-mp-info {
+    display: block;
+    padding: 4px 0 4px 10px;
+    overflow: hidden;
+    vertical-align: top
+  }
+  
+  .share-mp-info .page-mp-info+.page-mp-info {
+    overflow: visible
+  }
+  
+  .custom-richtext,
+  .homepage-footer,
+  .search-bar,
+  .swiper-container,
+  .swp .swiper-wrapper,
+  .swp .swp-page,
+  .wakeup-app {
+    overflow: hidden
+  }
+  
+  .share-mp-info .links {
+    position: absolute;
+    top: 6px;
+    right: 10px;
+    display: inline-block
+  }
+  
+  .share-mp-info .links a {
+    margin-right: 8px
+  }
+  
+  .share-mp-info .links a:last-child {
+    margin-right: 0
+  }
+  
+  .share-mp-info .links .mp-homepage {
+    margin-left: 0
+  }
+  
+  .share-mp-info .links .follow-mp {
+    padding-right: 10px;
+    -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    border-right: 2px solid #e5e5e5
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .share-mp-info .links .follow-mp {
+      border-right-width: 1px
+    }
+  }
+  
+  .share-mp-info .mp-search {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    width: 25px;
+    height: 27px
+  }
+  
+  .share-mp-info .mp-search::before {
+    content: '';
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 12px;
+    height: 12px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAACampqcnJyampqampqampqZmZmoqKiZmZmZmZmampqZmZmampqZmZmampqZmZmZmZmZmZkjvjFoAAAAEXRSTlMAVkSc5Yk3DPPc2aVR7M/GUP5yJZQAAACPSURBVCjPhZFZEgMhCEQFcRl1tvtfNoBJMFNFpb8antWohCnordbWIfxqbPdb21j76V6UnP5ChpYxl5Kj2k+a5BNOjyRzpgc5pH0lUoHaLjk2UNK6usYuG8hcNnWVXTFQuKwe2L2o0xseveui88DD+5Jkn/gQ/Ce2qCN9ia12PyOyM/LQJJdHKDjEwKqLCF/tMQ6H98ej5gAAAABJRU5ErkJggg==) no-repeat;
+    background-size: 12px 12px
+  }
+  
+  .share-mp-info .no-search-icon {
+    padding-right: 105px
+  }
+  
+  .share-mp-info .no-search-icon .links {
+    padding-left: 0
+  }
+  
+  .search-form {
+    position: relative;
+    padding: 7px 10px;
+    background-color: #efefef
+  }
+  
+  .search-form .search-input {
+    width: 100%;
+    height: 30px;
+    padding-left: 30px;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    box-sizing: border-box;
+    outline-width: 0;
+    font-size: 14px
+  }
+  
+  .search-form .search-input:focus {
+    -webkit-appearance: none
+  }
+  
+  .search-form .search-cancel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 55px;
+    text-align: center;
+    line-height: 44px;
+    font-size: 16px;
+    color: #666
+  }
+  
+  .search-form .search-icon {
+    position: absolute;
+    top: 6px;
+    left: 12px;
+    width: 30px;
+    height: 30px
+  }
+  
+  .search-form .search-icon::after,
+  .search-form .search-icon::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%
+  }
+  
+  .search-form .search-icon::before {
+    margin-top: -7px;
+    margin-left: -8px;
+    width: 10px;
+    height: 10px;
+    border: 1px solid #a3a3a3;
+    background: 0 0;
+    border-radius: 12px
+  }
+  
+  .search-form .search-icon::after {
+    margin-top: 2px;
+    margin-left: 3px;
+    width: 2px;
+    height: 7px;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    background-color: #a3a3a3
+  }
+  
+  .search-form .close-icon {
+    position: absolute;
+    top: 2px;
+    right: 55px;
+    height: 40px;
+    width: 40px;
+    border-radius: 100px;
+    background: #a3a3a3;
+    -webkit-transform: scale(.42);
+    -moz-transform: scale(.42);
+    -ms-transform: scale(.42);
+    transform: scale(.42);
+    -webkit-tap-highlight-color: transparent
+  }
+  
+  .search-form .close-icon::after,
+  .search-form .close-icon::before {
+    content: '';
+    height: 6px;
+    width: 28px;
+    display: block;
+    background: #fff;
+    border-radius: 10px;
+    position: absolute;
+    top: 17px;
+    left: 6px;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg)
+  }
+  
+  .search-form .close-icon::after {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg)
+  }
+  
+  .search-bar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    background-color: #fff
+  }
+  
+  .search-bar .search-form {
+    padding-right: 55px
+  }
+  
+  .search-bar .history-list {
+    padding: 10px
+  }
+  
+  .search-bar .history-list li {
+    float: left;
+    border: 1px solid #ddd;
+    padding: 5px;
+    margin: 0 10px 10px 0;
+    color: #666;
+    border-radius: 3px;
+    text-align: center;
+    font-size: 14px;
+    line-height: 18px
+  }
+  
+  .search-bar .search-recom-list li {
+    float: left;
+    width: 50%;
+    padding: 0;
+    margin: 0;
+    border: none;
+    border-bottom: 1px solid #ddd;
+    text-align: left;
+    border-radius: 0;
+    font-size: 14px;
+    line-height: 30px
+  }
+  
+  .search-bar .search-recom-list li p {
+    padding: 5px;
+    word-break: keep-all;
+    overflow: hidden
+  }
+  
+  .shop-detail,
+  .shop-name,
+  .weixin-no {
+    word-break: break-all
+  }
+  
+  .search-bar .tag.tag-clear {
+    width: 145px;
+    height: 40px;
+    margin-top: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    border: 1px solid #666;
+    box-sizing: border-box
+  }
+  
+  .custom-paginations,
+  .custom-richtext {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box
+  }
+  
+  .content-body {
+    position: relative;
+    z-index: 10
+  }
+  
+  .more-wrap {
+    padding: 0 10px
+  }
+  
+  .more-wrap .more {
+    display: inline-block;
+    background-color: #f2f2f2;
+    height: 30px;
+    width: 100%;
+    margin: 10px 0;
+    line-height: 30px;
+    font-size: 14px;
+    color: #09F;
+    text-align: center;
+    border: 0;
+    -webkit-border-radius: 5px;
+    -webkit-background-clip: padding-box;
+    -moz-border-radius: 5px;
+    -moz-background-clip: padding;
+    border-radius: 5px;
+    background-clip: padding-box;
+    cursor: pointer
+  }
+  
+  .custom-paginations-container {
+    height: 30px;
+    padding: 20px 0 10px
+  }
+  
+  .custom-paginations {
+    margin: 0 auto;
+    border-radius: 4px;
+    font-size: 0;
+    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+    width: 310px;
+    box-sizing: border-box;
+    border: 1px solid #ddd
+  }
+  
+  .custom-paginations a {
+    padding: 4px 12px;
+    line-height: 20px;
+    font-size: 16px;
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
+    color: #09F;
+    border-right: 1px solid #ddd
+  }
+  
+  .custom-paginations .custom-paginations-last,
+  .custom-paginations .custom-paginations-next {
+    border-right-width: 0
+  }
+  
+  .custom-paginations a:active,
+  .custom-paginations a:hover {
+    background-color: #F9F9F9
+  }
+  
+  .custom-paginations .disabled {
+    color: #999;
+    cursor: default;
+    background-color: transparent
+  }
+  
+  .custom-paginations .custom-paginations-page {
+    width: 100px
+  }
+  
+  .custom-paginations .custom-paginations-next,
+  .custom-paginations .custom-paginations-prev {
+    width: 129px
+  }
+  
+  .custom-category-list {
+    list-style: decimal inside;
+    font-size: 16px;
+    margin: 0;
+    padding: 0 15px
+  }
+  
+  .custom-category-list li {
+    margin-bottom: 5px
+  }
+  
+  .custom-category-list a {
+    color: #09F
+  }
+  
+  .homepage-footer {
+    position: absolute;
+    bottom: -80px;
+    height: 80px;
+    width: 100%;
+    background-color: #2D3132
+  }
+  
+  .feature-content .footer {
+    position: relative;
+    z-index: 9
+  }
+  
+  .content-sidebar {
+    display: none;
+    position: fixed;
+    top: 0;
+    width: 180px;
+    padding-left: 19px;
+    margin-left: 550px;
+    margin-top: 200px
+  }
+  
+  .sidebar-section {
+    border: 1px solid #e4e4e4;
+    border-radius: 5px;
+    margin-bottom: 20px
+  }
+  
+  .sidebar-section .sidebar-title {
+    border-radius: 5px 5px 0 0;
+    margin: 0;
+    font-size: 16px;
+    font-weight: 700;
+    border-bottom: 1px solid #e4e4e4;
+    padding: 8px 10px;
+    background-color: #F2F2F2
+  }
+  
+  .sidebar-section .admin-opts {
+    background-color: #fff;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-radius: 5px
+  }
+  
+  .sidebar-section .admin-opts li a {
+    display: block;
+    padding: 5px 10px;
+    border-bottom: 1px solid #e4e4e4
+  }
+  
+  .sidebar-section .admin-opts li .active,
+  .sidebar-section .admin-opts li a:hover {
+    background-color: #F2F2F2
+  }
+  
+  .sidebar-section .admin-opts li:first-of-type {
+    border-radius: 5px 5px 0 0
+  }
+  
+  .sidebar-section .admin-opts .last {
+    border-radius: 0 0 5px 5px
+  }
+  
+  .sidebar-section .admin-opts .last>a {
+    border-bottom: 0 none
+  }
+  
+  .headerbar {
+    background-color: #efefef;
+    border-bottom: 1px solid #c1c1c1
+  }
+  
+  .headerbar li,
+  .headerbar ul {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    list-style: none
+  }
+  
+  .headerbar a {
+    display: block;
+    line-height: 28px;
+    text-align: center;
+    padding: 0 12px;
+    border-radius: 2px
+  }
+  
+  .headerbar a.active {
+    color: #fff;
+    background: #798499
+  }
+  
+  .qrcode-info,
+  .shop-info {
+    background-color: #fff
+  }
+  
+  .headerbar .headerbar-wrap {
+    position: relative;
+    width: 760px;
+    margin: 0 auto;
+    text-align: center
+  }
+  
+  .headerbar .headerbar-preview {
+    padding: 6px
+  }
+  
+  .headerbar .headerbar-reedit {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 5px 11px 5px 0
+  }
+  
+  .headerbar .headerbar-reedit a {
+    background: #fff;
+    color: #414141;
+    border: 1px solid #ccc;
+    padding: 0 20px
+  }
+  
+  .shop-detail {
+    margin: 10px;
+    padding-bottom: 10px;
+    font-size: 12px;
+    color: #666;
+    border-bottom: 1px dashed #ccc
+  }
+  
+  .shop-info {
+    margin-bottom: 0
+  }
+  
+  .shop-card {
+    border: 0;
+    display: table;
+    margin-bottom: 10px;
+    padding: 0 10px
+  }
+  
+  .shop-name {
+    margin: 0 0 0 10px
+  }
+  
+  .table-cell {
+    display: table-cell;
+    vertical-align: middle
+  }
+  
+  .shop-img {
+    border-radius: 30px;
+    width: 60px;
+    height: 60px
+  }
+  
+  .weixin-no,
+  .weixin-title {
+    font-size: 12px;
+    color: #666;
+    margin: 5px 0
+  }
+  
+  .weixin-no {
+    color: #999;
+    margin: 0 0 10px
+  }
+  
+  .qr-code {
+    min-height: 162px;
+    margin: 0
+  }
+  
+  .swiper-container {
+    margin: 0 auto;
+    position: relative;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+    z-index: 1
+  }
+  
+  .swiper-wrapper {
+    position: relative;
+    width: 100%;
+    -webkit-transition-duration: 0s;
+    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transition-timing-function: ease;
+    -moz-transition-duration: 0s;
+    -moz-transform: translate3d(0, 0, 0);
+    -moz-transition-timing-function: ease;
+    -o-transition-property: -o-transform, left, top;
+    -o-transition-duration: 0s;
+    -o-transition-timing-function: ease;
+    -o-transform: translate(0, 0);
+    -ms-transition-property: -ms-transform, left, top;
+    -ms-transition-duration: 0s;
+    -ms-transform: translate3d(0, 0, 0);
+    -ms-transition-timing-function: ease;
+    -webkit-transition-property: left, top, -webkit-transform;
+    -moz-transition-property: transform, left, top, -moz-transform;
+    transition-property: transform, left, top;
+    transition-property: transform, left, top, -webkit-transform, -moz-transform;
+    transition-duration: 0s;
+    transform: translate3d(0, 0, 0);
+    transition-timing-function: ease
+  }
+  
+  .swiper-free-mode>.swiper-wrapper {
+    -webkit-transition-timing-function: ease-out;
+    -moz-transition-timing-function: ease-out;
+    transition-timing-function: ease-out;
+    margin: 0 auto
+  }
+  
+  .swiper-slide {
+    float: left
+  }
+  
+  .swiper-wp8-horizontal {
+    -ms-touch-action: pan-y
+  }
+  
+  .swiper-wp8-vertical {
+    -ms-touch-action: pan-x
+  }
+  
+  .swiper-pagination {
+    margin: 0;
+    text-align: center;
+    position: absolute;
+    bottom: 5px;
+    width: 100%;
+    z-index: 1
+  }
+  
+  .swiper-pagination-switch {
+    display: inline-block;
+    margin: 7px 4px 0;
+    width: 5px;
+    height: 5px;
+    background: url(https://b.yzcdn.cn/v2/image/pagination.png) -1px -1px no-repeat;
+    cursor: pointer
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .swiper-pagination-switch {
+      background-image: url(https://b.yzcdn.cn/v2/image/pagination@2x.png);
+      background-position: 0 0;
+      background-size: 5px 10px
+    }
+  }
+  
+  .swiper-active-switch {
+    background-position: -1px -8px
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .swiper-active-switch {
+      background-image: url(https://b.yzcdn.cn/v2/image/pagination@2x.png);
+      background-position: 0 -5px;
+      background-size: 5px 10px
+    }
+  }
+  
+  .swp .swp-page {
+    display: none;
+    width: 100%;
+    height: 100%;
+    text-align: center
+  }
+  
+  .swp .swp-page img {
+    max-width: 100%
+  }
+  
+  .swp .swp-page:first-child {
+    display: block
+  }
+  
+  .full-screen .container {
+    background: 0 0
+  }
+  
+  .full-screen .header {
+    display: none
+  }
+  
+  .custom-store .custom-store-name img {
+    width: 31px;
+    vertical-align: middle
+  }
+  
+  .custom-richtext img,
+  .custom-richtext ol {
+    width: auto!important
+  }
+  
+  .custom-richtext {
+    padding: 10px 10px 0;
+    box-sizing: border-box;
+    font-size: 16px;
+    color: #333;
+    line-height: 1.5;
+    text-align: left;
+    word-wrap: break-word;
+    position: relative
+  }
+  
+  .custom-richtext img+br {
+    display: block;
+    padding: 4px 0;
+    content: ' '
+  }
+  
+  .custom-richtext p {
+    margin: 0 0 1em
+  }
+  
+  .custom-richtext .Powered-by-XIUMI p {
+    margin: 0
+  }
+  
+  .custom-richtext a {
+    color: #07d
+  }
+  
+  .custom-richtext img {
+    background: 0 0;
+    max-width: 100%!important;
+    min-height: 1px;
+    vertical-align: bottom
+  }
+  
+  .custom-richtext ol,
+  .custom-richtext ul {
+    list-style-position: inside;
+    padding-left: 0
+  }
+  
+  .custom-richtext blockquote {
+    padding: 0 0 0 15px;
+    margin: 0 0 18px;
+    border-left: 5px solid #EEE
+  }
+  
+  .custom-richtext em,
+  .custom-richtext i {
+    font-style: italic
+  }
+  
+  .custom-richtext .selectTdClass {
+    background-color: #edf5fa!important
+  }
+  
+  .custom-richtext table.noBorderTable caption,
+  .custom-richtext table.noBorderTable td,
+  .custom-richtext table.noBorderTable th {
+    border: 1px dashed #ddd!important
+  }
+  
+  .custom-richtext table {
+    margin-bottom: 10px;
+    border-collapse: collapse;
+    display: table;
+    width: auto!important
+  }
+  
+  .custom-richtext td,
+  .custom-richtext th {
+    padding: 5px 10px;
+    border: 1px solid #ddd
+  }
+  
+  .custom-richtext caption {
+    border: 1px dashed #ddd;
+    border-bottom: 0;
+    padding: 3px;
+    text-align: center
+  }
+  
+  .custom-richtext th {
+    border-top: 2px solid #bbb;
+    background: #f7f7f7
+  }
+  
+  .custom-richtext .ue-table-interlace-color-single {
+    background-color: #fcfcfc
+  }
+  
+  .custom-richtext .ue-table-interlace-color-double {
+    background-color: #f7faff
+  }
+  
+  .custom-richtext td p {
+    margin: 0;
+    padding: 0
+  }
+  
+  .custom-richtext .bottom-floating-banner {
+    position: fixed!important;
+    bottom: 0
+  }
+  
+  .custom-richtext-fullscreen {
+    padding: 0;
+    margin-top: 0
+  }
+  
+  .close-business-widget {
+    position: relative
+  }
+  
+  .close-business-widget .close-business-box {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    width: 78px;
+    height: 115px;
+    background-image: url(https://b.yzcdn.cn/v2/image/wap/icons/close_business.png);
+    background-repeat: auto;
+    background-size: 100%;
+    color: #fff;
+    z-index: 999;
+    text-align: center
+  }
+  
+  .close-business-widget .close-business-box .status-content {
+    padding-top: 25px
+  }
+  
+  .close-business-widget .close-business-box .status-header {
+    font-size: 12px;
+    height: 26px;
+    line-height: 26px;
+    margin-bottom: 8px
+  }
+  
+  .close-business-widget .close-business-box .status-info {
+    font-size: 8px;
+    text-align: left;
+    padding-left: 15px;
+    margin-top: 2px;
+    width: 80px
+  }
+  
+  .action-container,
+  .tag,
+  .wakeup-app {
+    text-align: center
+  }
+  
+  .close-business-widget .close-business-box .status-single {
+    padding-top: 30px
+  }
+  
+  @media (min-width:360px) {
+    .custom-image-swiper .swiper-slide a {
+      width: 360px
+    }
+    .custom-image .custom-image-small {
+      height: 172.5px
+    }
+    .custom-image .custom-image-small.custom-image-rectangle {
+      height: 124.71px
+    }
+    .custom-link-link .title,
+    .custom-nav-title {
+      width: 315px
+    }
+    .custom-store-name {
+      max-width: 236.25px
+    }
+    .custom-showcase-wrap .custom-showcase {
+      width: 360px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-big {
+      width: 239.67px;
+      height: 239.67px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-small {
+      width: 119.33px;
+      height: 119.33px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-big {
+      width: 240px!important
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-small {
+      width: 120px!important
+    }
+    .custom-showcase-wrap-1 .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-small {
+      width: 119.33px;
+      height: 119.33px
+    }
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-small {
+      width: 120px!important
+    }
+    .custom-cube td {
+      width: 90px
+    }
+    .custom-cube li {
+      width: 90px;
+      height: 90px
+    }
+    .custom-cube li img {
+      max-width: 90px;
+      max-height: 90px
+    }
+    .tpl-11-11 .tpl-11-11-banner,
+    .tpl-shop-header,
+    .tpl-wxd-header {
+      height: 112.5px
+    }
+    .custom-coupon li {
+      width: 107px
+    }
+    .custom-shop-banner,
+    .custom-shop-banner2 {
+      height: 270px
+    }
+    .custom-shop-banner-inner h1 {
+      font-size: 16px
+    }
+    .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner-inner img {
+      width: 101.25px;
+      height: 101.25px
+    }
+    .custom-shop-banner-inner .desc {
+      font-size: 12px
+    }
+    .custom-shop-banner1 .custom-shop-banner,
+    .custom-shop-banner3 .custom-shop-banner {
+      height: 202.5px
+    }
+    .custom-shop-banner1 .custom-shop-banner-inner,
+    .custom-shop-banner3 .custom-shop-banner-inner {
+      margin-top: -40.5px
+    }
+    .custom-shop-banner1 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner1 .custom-shop-banner-inner img,
+    .custom-shop-banner3 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner3 .custom-shop-banner-inner img {
+      width: 67.5px;
+      height: 67.5px
+    }
+    .custom-shop-banner4 .custom-shop-banner {
+      height: 135px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner4 .custom-shop-banner-inner img {
+      width: 57.6px;
+      height: 57.6px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .desc,
+    .custom-shop-banner4 .custom-shop-banner-inner h1 {
+      left: 72.1px
+    }
+    .custom-level {
+      min-height: 112.5px
+    }
+    .custom-home-nav .tabber-inner {
+      width: 67.5px
+    }
+    .sc-goods-list.pic.size-4 .goods-card.multi-pic.single-pic .phote-block-item img {
+      max-height: 196.88px
+    }
+    .wrapper {
+      width: 360px;
+      margin: 0 auto
+    }
+    .content {
+      width: 100%;
+      margin: 0 auto
+    }
+    .edui-faked-video {
+      width: 100%;
+      height: 255px
+    }
+    .sc-goods-list.pic .goods-card.small-pic .photo-block {
+      height: 164px
+    }
+    .sc-goods-list.pic .goods-card.small-pic.card {
+      max-height: 258.75px
+    }
+    .custom-nav-title {
+      width: 280px
+    }
+    .custom-paginations {
+      width: 350px
+    }
+    .custom-paginations .custom-paginations-page {
+      width: 120px
+    }
+    .custom-paginations .custom-paginations-next,
+    .custom-paginations .custom-paginations-prev {
+      width: 148px
+    }
+    .custom-recommend-goods-list li {
+      width: 106px;
+      height: 106px
+    }
+    .custom-recommend-goods-list img {
+      max-width: 106px;
+      max-height: 106px
+    }
+  }
+  
+  @media (min-width:375px) {
+    .custom-image-swiper .swiper-slide a {
+      width: 375px
+    }
+    .custom-image .custom-image-small {
+      height: 180px
+    }
+    .custom-image .custom-image-small.custom-image-rectangle {
+      height: 130.38px
+    }
+    .custom-link-link .title,
+    .custom-nav-title {
+      width: 328.13px
+    }
+    .custom-store-name {
+      max-width: 246.09px
+    }
+    .custom-showcase-wrap .custom-showcase {
+      width: 375px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-big {
+      width: 249.67px;
+      height: 249.67px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-small {
+      width: 124.33px;
+      height: 124.33px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-big {
+      width: 250px!important
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-small {
+      width: 125px!important
+    }
+    .custom-showcase-wrap-1 .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-small {
+      width: 124.33px;
+      height: 124.33px
+    }
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-small {
+      width: 125px!important
+    }
+    .custom-coupon li {
+      width: 112px
+    }
+    .custom-cube td {
+      width: 93.75px
+    }
+    .custom-cube li {
+      width: 93.75px;
+      height: 93.75px
+    }
+    .custom-cube li img {
+      max-width: 93.75px;
+      max-height: 93.75px
+    }
+    .custom-cube2-table-wrapper .custom-cube2-table {
+      width: 376px;
+      margin: 0 auto
+    }
+    .custom-shop-banner,
+    .custom-shop-banner2 {
+      height: 281.25px
+    }
+    .custom-shop-banner-inner h1 {
+      font-size: 16px
+    }
+    .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner-inner img {
+      width: 105.47px;
+      height: 105.47px
+    }
+    .custom-shop-banner-inner .desc {
+      font-size: 14px
+    }
+    .custom-shop-banner1 .custom-shop-banner,
+    .custom-shop-banner3 .custom-shop-banner {
+      height: 210.94px
+    }
+    .custom-shop-banner1 .custom-shop-banner-inner,
+    .custom-shop-banner3 .custom-shop-banner-inner {
+      margin-top: -42.19px
+    }
+    .custom-shop-banner1 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner1 .custom-shop-banner-inner img,
+    .custom-shop-banner3 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner3 .custom-shop-banner-inner img {
+      width: 70.31px;
+      height: 70.31px
+    }
+    .custom-shop-banner3 .custom-shop-banner-inner h1 {
+      font-size: 18px
+    }
+    .custom-shop-banner3 .custom-shop-banner-inner .desc {
+      font-size: 12px
+    }
+    .custom-shop-banner4 .custom-shop-banner {
+      height: 140.63px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner4 .custom-shop-banner-inner img {
+      width: 60px;
+      height: 60px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .desc,
+    .custom-shop-banner4 .custom-shop-banner-inner h1 {
+      left: 74.69px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner h1 {
+      font-size: 18px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .desc {
+      font-size: 14px
+    }
+    .custom-level {
+      min-height: 117.19px
+    }
+    .custom-home-nav .tabber-inner {
+      width: 70.31px
+    }
+    .sc-goods-list.pic.size-4 .goods-card.multi-pic.single-pic .phote-block-item img {
+      max-height: 205.08px
+    }
+    .sc-goods-list.pic .goods-card.small-pic .photo-block {
+      height: 172px
+    }
+    .sc-goods-list.pic .goods-card.small-pic.card {
+      max-height: 269.53px
+    }
+    .trade-review-list .review-profile .review-avatar-container {
+      width: 334px
+    }
+    .report-detail-container .review-item .img-container,
+    .review-detail-container .review-item .img-container {
+      margin-left: -5px
+    }
+    .report-detail-container .review-item .img-container img,
+    .review-detail-container .review-item .img-container img {
+      width: 115px;
+      height: 115px;
+      margin-left: 5px
+    }
+    .report-detail-container .review-item .seller-reply,
+    .review-detail-container .review-item .seller-reply {
+      padding: 10px 8px
+    }
+    .report-detail-container .review-item .seller-reply .reply-image,
+    .review-detail-container .review-item .seller-reply .reply-image {
+      width: 109px;
+      height: 109px
+    }
+  }
+  
+  @media (min-width:411px) {
+    .custom-image .custom-image-small {
+      height: 198px
+    }
+    .custom-showcase-wrap .custom-showcase {
+      width: 411px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-big {
+      width: 273.67px;
+      height: 273.67px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-small {
+      width: 136.33px;
+      height: 136.33px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-big {
+      width: 274px!important
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-small {
+      width: 137px!important
+    }
+    .custom-showcase-wrap-1 .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-small {
+      width: 136.33px;
+      height: 136.33px
+    }
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-small {
+      width: 137px!important
+    }
+  }
+  
+  @media (min-width:414px) {
+    .custom-image-swiper .swiper-slide a {
+      width: 414px
+    }
+    .custom-image .custom-image-small {
+      height: 199.5px
+    }
+    .custom-image .custom-image-small.custom-image-rectangle {
+      height: 145.12px
+    }
+    .custom-link-link .title,
+    .custom-nav-title {
+      width: 362.25px
+    }
+    .custom-store-name {
+      max-width: 271.69px
+    }
+    .custom-showcase-wrap .custom-showcase {
+      width: 414px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-big {
+      width: 275.67px;
+      height: 275.67px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-small {
+      width: 137.33px;
+      height: 137.33px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-big {
+      width: 276px!important
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-small {
+      width: 138px!important
+    }
+    .custom-showcase-wrap-1 .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-small {
+      width: 137.33px;
+      height: 137.33px
+    }
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-small {
+      width: 138px!important
+    }
+    .custom-cube td {
+      width: 103.5px
+    }
+    .custom-cube li {
+      width: 103.5px;
+      height: 103.5px
+    }
+    .custom-cube li img {
+      max-width: 103.5px;
+      max-height: 103.5px
+    }
+    .custom-cube2-table-wrapper .custom-cube2-table {
+      width: 416px
+    }
+    .tpl-11-11 .tpl-11-11-banner,
+    .tpl-shop-header,
+    .tpl-wxd-header {
+      height: 129.38px
+    }
+    .custom-coupon li {
+      width: 125px
+    }
+    .custom-shop-banner,
+    .custom-shop-banner2 {
+      height: 310.5px
+    }
+    .custom-shop-banner-inner h1 {
+      font-size: 18px
+    }
+    .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner-inner img {
+      width: 116.44px;
+      height: 116.44px
+    }
+    .custom-shop-banner-inner .desc {
+      font-size: 14px
+    }
+    .custom-shop-banner1 .custom-shop-banner,
+    .custom-shop-banner3 .custom-shop-banner {
+      height: 232.88px
+    }
+    .custom-shop-banner1 .custom-shop-banner-inner,
+    .custom-shop-banner3 .custom-shop-banner-inner {
+      margin-top: -46.58px
+    }
+    .custom-shop-banner1 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner1 .custom-shop-banner-inner img,
+    .custom-shop-banner3 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner3 .custom-shop-banner-inner img {
+      width: 77.63px;
+      height: 77.63px
+    }
+    .custom-shop-banner3 .custom-shop-banner-inner h1 {
+      font-size: 20px
+    }
+    .custom-shop-banner3 .custom-shop-banner-inner .desc {
+      font-size: 12px
+    }
+    .custom-shop-banner4 .custom-shop-banner {
+      height: 155.25px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner4 .custom-shop-banner-inner img {
+      width: 66.24px;
+      height: 66.24px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .desc,
+    .custom-shop-banner4 .custom-shop-banner-inner h1 {
+      left: 81.42px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner h1 {
+      font-size: 20px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .desc {
+      font-size: 14px
+    }
+    .custom-level {
+      min-height: 129.38px
+    }
+    .custom-home-nav .tabber-inner {
+      width: 77.63px
+    }
+    .sc-goods-list.pic.size-4 .goods-card.multi-pic.single-pic .phote-block-item img {
+      max-height: 226.41px
+    }
+    .sc-goods-list.pic .goods-card.small-pic .photo-block {
+      height: 190px
+    }
+    .sc-goods-list.pic .goods-card.small-pic.promotion {
+      max-height: 240px
+    }
+    .sc-goods-list.pic .goods-card.small-pic.card {
+      max-height: 280px
+    }
+    .trade-review-list .review-profile .review-avatar-container {
+      width: 378px
+    }
+    .trade-review-list .review-profile .profiles {
+      margin-left: -7px
+    }
+    .trade-review-list .review-profile .image-circle,
+    .trade-review-list .review-profile .name-circle {
+      margin-left: 7px
+    }
+    .report-detail-container .review-item .img-container img,
+    .review-detail-container .review-item .img-container img {
+      width: 94px;
+      height: 94px
+    }
+    .report-detail-container .review-item .seller-reply,
+    .review-detail-container .review-item .seller-reply {
+      padding: 10px
+    }
+    .report-detail-container .review-item .seller-reply .reply-image,
+    .review-detail-container .review-item .seller-reply .reply-image {
+      width: 89px;
+      height: 89px
+    }
+  }
+  
+  @media (min-width:435px) {
+    .custom-image .custom-image-small {
+      height: 210px
+    }
+    .custom-showcase-wrap .custom-showcase {
+      width: 435px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-big {
+      width: 289.67px;
+      height: 289.67px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-small {
+      width: 144.33px;
+      height: 144.33px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-big {
+      width: 290px!important
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-small {
+      width: 145px!important
+    }
+    .custom-showcase-wrap-1 .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-small {
+      width: 144.33px;
+      height: 144.33px
+    }
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-small {
+      width: 145px!important
+    }
+  }
+  
+  @media (min-width:540px) {
+    .custom-image-swiper .swiper-slide a {
+      width: 540px
+    }
+    .custom-image {
+      width: 525px;
+      padding: 0 7.5px
+    }
+    .custom-image li {
+      width: 520px;
+      margin: 2.5px
+    }
+    .custom-image img {
+      max-width: 520px
+    }
+    .custom-image .custom-image-small {
+      width: 170px;
+      height: 165px;
+      margin: 2.5px
+    }
+    .custom-image .custom-image-small img {
+      max-width: 170px
+    }
+    .custom-image .custom-image-small .title {
+      width: 170px
+    }
+    .custom-image .custom-image-small.custom-image-rectangle {
+      width: 50%;
+      height: 192.73px;
+      margin: 0
+    }
+    .custom-store-name {
+      max-width: 354.38px
+    }
+    .custom-showcase-wrap .custom-showcase {
+      width: 540px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-big {
+      width: 359.67px;
+      height: 359.67px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-small {
+      width: 179.33px;
+      height: 179.33px
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-big {
+      width: 360px!important
+    }
+    .custom-showcase-wrap-0 .custom-showcase-without-space .custom-showcase-small {
+      width: 180px!important
+    }
+    .custom-showcase-wrap-1 .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-small {
+      width: 179.33px;
+      height: 179.33px
+    }
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-big,
+    .custom-showcase-wrap-1 .custom-showcase-without-space .custom-showcase-small {
+      width: 180px!important
+    }
+    .custom-cube td {
+      width: 135px
+    }
+    .custom-cube li {
+      width: 135px;
+      height: 135px
+    }
+    .tpl-11-11 .tpl-11-11-banner,
+    .tpl-shop-header,
+    .tpl-wxd-header {
+      height: 168.75px
+    }
+    .custom-cube li img {
+      max-width: 135px;
+      max-height: 135px
+    }
+    .custom-cube2-table-wrapper .custom-cube2-table {
+      width: 532px
+    }
+    .tpl-weixin img {
+      max-width: 540px
+    }
+    .tpl-weixin .tpl-weixin-list {
+      margin: 0 0 0 -155px
+    }
+    .tpl-weixin .tpl-weixin-list-item {
+      width: 150px
+    }
+    .tpl-weixin .tpl-weixin-list-item-1 {
+      left: -1000px;
+      top: -1000px
+    }
+    .tpl-weixin .tpl-weixin-list-item-1.done {
+      left: 0;
+      top: 0
+    }
+    .tpl-weixin .tpl-weixin-list-item-2 {
+      left: 1000px;
+      top: -1000px
+    }
+    .tpl-weixin .tpl-weixin-list-item-2.done {
+      left: 160px;
+      top: 0
+    }
+    .tpl-weixin .tpl-weixin-list-item-3 {
+      left: -1000px;
+      top: 1000px
+    }
+    .tpl-weixin .tpl-weixin-list-item-3.done {
+      left: 0;
+      top: 49px
+    }
+    .tpl-weixin .tpl-weixin-list-item-4 {
+      left: 1000px;
+      top: 1000px
+    }
+    .tpl-weixin .tpl-weixin-list-item-4.done {
+      left: 160px;
+      top: 49px
+    }
+    .custom-coupon li {
+      width: 167.33px
+    }
+    .custom-shop-banner,
+    .custom-shop-banner2 {
+      height: 405px
+    }
+    .custom-shop-banner-inner h1 {
+      font-size: 20px
+    }
+    .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner-inner img {
+      width: 151.88px;
+      height: 151.88px
+    }
+    .custom-shop-banner-inner .desc {
+      font-size: 18px
+    }
+    .custom-shop-banner1 .custom-shop-banner,
+    .custom-shop-banner3 .custom-shop-banner {
+      height: 303.75px
+    }
+    .custom-shop-banner1 .custom-shop-banner-inner,
+    .custom-shop-banner3 .custom-shop-banner-inner {
+      margin-top: -60.75px
+    }
+    .custom-shop-banner1 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner1 .custom-shop-banner-inner img,
+    .custom-shop-banner3 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner3 .custom-shop-banner-inner img {
+      width: 101.25px;
+      height: 101.25px
+    }
+    .custom-shop-banner3 .custom-shop-banner-inner h1 {
+      font-size: 22px
+    }
+    .custom-shop-banner3 .custom-shop-banner-inner .desc {
+      font-size: 16px
+    }
+    .custom-shop-banner4 .custom-shop-banner {
+      height: 202.5px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .custom-shop-banner-logo,
+    .custom-shop-banner4 .custom-shop-banner-inner img {
+      width: 86.4px;
+      height: 86.4px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .desc,
+    .custom-shop-banner4 .custom-shop-banner-inner h1 {
+      left: 103.15px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner h1 {
+      bottom: 32px;
+      font-size: 22px
+    }
+    .custom-shop-banner4 .custom-shop-banner-inner .desc {
+      font-size: 18px
+    }
+    .custom-level {
+      min-height: 168.75px
+    }
+    .custom-home-nav .tabber-inner {
+      width: 101.25px
+    }
+    .sc-goods-list.pic.size-4 .goods-card.multi-pic.single-pic .phote-block-item img {
+      max-height: 295.31px
+    }
+    .content,
+    .wrapper {
+      width: 540px;
+      margin: 0 auto
+    }
+    .external-buy {
+      display: block
+    }
+    .bottom-fix {
+      display: none
+    }
+    .buy-guide {
+      margin: 0 -10px
+    }
+    .buy-guide .guide-cont {
+      width: auto
+    }
+    .buy-guide .pic-wrapper {
+      float: right
+    }
+    .nav-on-bottom {
+      border-left-width: 1px;
+      border-right-width: 1px
+    }
+    .custom-paginations .custom-paginations-last,
+    .custom-paginations .custom-paginations-next {
+      border-right-width: 0
+    }
+    .edui-faked-video {
+      width: 520px;
+      height: 300px
+    }
+    .sc-goods-list.pic li.goods-card.small-pic.card,
+    .sc-goods-list.pic li.goods-card.small-pic.promotion {
+      max-height: 253px;
+      width: 176px
+    }
+    .sc-goods-list.pic li.goods-card.small-pic.card .photo-block,
+    .sc-goods-list.pic li.goods-card.small-pic.promotion .photo-block {
+      height: 176px
+    }
+    .sc-goods-list.pic li.goods-card.small-pic.card .photo-block img,
+    .sc-goods-list.pic li.goods-card.small-pic.promotion .photo-block img {
+      max-height: 176px
+    }
+    .sc-goods-list.pic.waterfall li.goods-card.small-pic {
+      width: 176px
+    }
+    .sc-goods-list.pic li.goods-card.big-pic.normal {
+      float: left;
+      margin: 2.5px;
+      width: 345px
+    }
+    .sc-goods-list.pic li.goods-card.big-pic.normal .photo-block {
+      width: 345px;
+      height: 345px
+    }
+    .sc-goods-list.pic li.goods-card.big-pic.card .photo-block,
+    .sc-goods-list.pic li.goods-card.big-pic.promotion .photo-block {
+      width: 352px;
+      height: 298px
+    }
+    .sc-goods-list.pic li.goods-card.big-pic.card .photo-block img,
+    .sc-goods-list.pic li.goods-card.big-pic.promotion .photo-block img {
+      max-height: 298px;
+      max-width: 352px
+    }
+    .sc-goods-list.pic li.goods-card.big-pic.card .info .goods-title,
+    .sc-goods-list.pic li.goods-card.big-pic.promotion .info .goods-title {
+      width: 240px
+    }
+    .sc-goods-list.pic li.goods-card.small-pic.normal {
+      margin: 2.5px;
+      width: 171px
+    }
+    .sc-goods-list.pic li.goods-card.small-pic.normal .link {
+      margin: 0
+    }
+    .sc-goods-list.pic li.goods-card.small-pic.normal .photo-block {
+      width: 171px;
+      height: 171px
+    }
+    .sc-goods-list.pic li.goods-card.small-pic.normal .photo-block img {
+      max-height: 171px
+    }
+    .sc-goods-list.pic.size-0 .goods-card.big-pic.normal {
+      margin: 5px;
+      width: 255px
+    }
+    .sc-goods-list.pic.size-0 .goods-card.big-pic.normal .photo-block {
+      width: 255px;
+      height: 255px
+    }
+    .sc-goods-list.pic.size-0 .goods-card.big-pic.normal .photo-block img {
+      max-height: 255px;
+      max-width: 255px
+    }
+    .sc-goods-list.pic.size-0 .goods-card.big-pic.card {
+      float: left;
+      width: 263px
+    }
+    .sc-goods-list.pic.size-0 .goods-card.big-pic.card .photo-block {
+      width: 245px;
+      height: 245px
+    }
+    .sc-goods-list.pic.size-0 .goods-card.big-pic.card .photo-block img {
+      max-height: 245px;
+      max-width: 245px
+    }
+    .sc-goods-list.pic.size-2 .goods-card.big-pic.card {
+      width: 364px
+    }
+    .sc-goods-list.pic.size-2 .goods-card.big-pic.card .photo-block {
+      width: 346px;
+      height: 346px
+    }
+    .sc-goods-list.pic.size-2 .goods-card.big-pic.card .photo-block img {
+      max-height: 346px;
+      max-width: 346px
+    }
+    .sc-goods-list.pic.size-2 .goods-card.big-pic.card .info.info-only-title {
+      height: 114px
+    }
+    .sc-goods-list.pic.size-2 .goods-card.big-pic.card .info.info-big-title {
+      height: 112px
+    }
+    .sc-goods-list.pic.size-2 .goods-card.big-pic.card .info.info-notitle {
+      height: 38px
+    }
+    .sc-goods-list.pic.size-2 .goods-card.small-pic.card {
+      width: 156px;
+      max-height: 244px
+    }
+    .sc-goods-list.pic.size-2 .goods-card.small-pic.card .photo-block {
+      height: 125px
+    }
+    .sc-goods-list.pic.size-2 .goods-card.small-pic.card .photo-block img {
+      max-height: 100%
+    }
+    .sc-goods-list.pic.size-2 .goods-card.big-pic.normal .link {
+      margin-left: 0;
+      margin-right: 0
+    }
+    .sc-goods-list.pic.size-2 .goods-card.small-pic.normal {
+      margin: 2px 2px 2px 6px
+    }
+    .custom-nav-title {
+      width: 462px
+    }
+    .custom-nav-two-col {
+      width: 270px
+    }
+    .custom-nav-two-col .custom-nav-title {
+      width: 255px
+    }
+    .custom-link-link .title {
+      width: 480px
+    }
+    .custom-link .custom-link-two-col {
+      width: 270px
+    }
+    .custom-paginations {
+      width: 530px
+    }
+    .custom-paginations .custom-paginations-page {
+      width: 210px
+    }
+    .custom-paginations .custom-paginations-next,
+    .custom-paginations .custom-paginations-prev {
+      width: 238px
+    }
+    .custom-recommend-goods-list li {
+      width: 166px;
+      height: 166px
+    }
+    .custom-recommend-goods-list img {
+      max-width: 166px;
+      max-height: 166px
+    }
+    .custom-tag-list .custom-tag-list-menu-block,
+    .custom-tag-list .custom-tag-list-menu-block li a {
+      width: 120px
+    }
+    .custom-tag-list .custom-tag-list-goods {
+      width: 418px
+    }
+    .custom-tag-list .custom-tag-list-goods .custom-tag-list-title {
+      width: 408px
+    }
+    .custom-tag-list .custom-tag-list-goods .custom-tag-list-goods-detail .custom-tag-list-goods-title {
+      width: 340px
+    }
+    .wuxi-center-body .content {
+      max-width: 540px
+    }
+    .wuxi-center-body .footer {
+      width: 100%
+    }
+    .wuxi-center-body .footer .copyright {
+      width: 540px;
+      margin: 0 auto
+    }
+  }
+  
+  @media (min-width:760px) {
+    .wrapper {
+      width: 760px;
+      margin: 0 auto
+    }
+    .content {
+      width: 750px;
+      margin: 30px auto 0
+    }
+    .content-body {
+      width: 540px;
+      padding: 10px;
+      border: 1px solid #ddd
+    }
+    .content.no-sidebar .content-body {
+      margin: 0 auto
+    }
+    .content-sidebar {
+      display: block;
+      position: fixed;
+      top: 0;
+      width: 180px;
+      padding-left: 19px;
+      margin-left: 550px;
+      margin-top: 60px
+    }
+    .footer {
+      width: 760px;
+      margin: 20px auto 0
+    }
+    .footer .copyright {
+      width: 574px;
+      margin: 0
+    }
+    .sidebar-section {
+      border: 1px solid #e4e4e4;
+      border-radius: 5px;
+      margin-bottom: 20px
+    }
+    .sidebar-section .sidebar-title {
+      border-radius: 5px 5px 0 0;
+      margin: 0;
+      font-size: 16px;
+      font-weight: 700;
+      border-bottom: 1px solid #e4e4e4;
+      padding: 8px 10px;
+      background-color: #F2F2F2
+    }
+    .sidebar-section .admin-opts {
+      background-color: #fff;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      border-radius: 5px
+    }
+    .sidebar-section .admin-opts li a {
+      display: block;
+      padding: 5px 10px;
+      border-bottom: 1px solid #e4e4e4
+    }
+    .sidebar-section .admin-opts li .active,
+    .sidebar-section .admin-opts li a:hover {
+      background-color: #F2F2F2
+    }
+    .sidebar-section .admin-opts li:first-of-type {
+      border-radius: 5px 5px 0 0
+    }
+    .sidebar-section .admin-opts .last {
+      border-radius: 0 0 5px 5px
+    }
+    .sidebar-section .admin-opts .last>a {
+      border-bottom: 0 none
+    }
+    .shop-detail {
+      margin: 10px;
+      padding-bottom: 10px;
+      font-size: 12px;
+      color: #666;
+      border-bottom: 1px dashed #ccc;
+      line-height: 1.6
+    }
+    .shop-info {
+      background-color: #fff;
+      margin-bottom: 0
+    }
+    .shop-card {
+      border: 0;
+      display: table;
+      margin-bottom: 10px;
+      padding: 0 10px
+    }
+    .shop-name {
+      margin: 0 0 0 10px
+    }
+    .table-cell {
+      display: table-cell;
+      vertical-align: middle
+    }
+    .shop-img {
+      border-radius: 30px;
+      width: 60px;
+      height: 60px
+    }
+    .weixin-no,
+    .weixin-title {
+      font-size: 12px;
+      color: #666;
+      margin: 5px 0
+    }
+    .weixin-no {
+      color: #999;
+      margin: 0 0 10px
+    }
+    .qr-code {
+      margin: 0
+    }
+    .sku-detail .qrcode-buy {
+      display: block
+    }
+  }
+  
+  @media (min-width:800px) {
+    .content {
+      width: 760px;
+      margin: 30px auto 20px
+    }
+    .content-body {
+      -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
+      box-shadow: 0 2px 10px rgba(0, 0, 0, .1)
+    }
+    .content-sidebar {
+      margin-left: 560px
+    }
+    .footer .copyright {
+      width: 562px
+    }
+    .admin .bottom-fix {
+      display: none
+    }
+    .custom-richtext .bottom-floating-banner {
+      width: 500px!important
+    }
+  }
+  
+  .tag {
+    display: inline-block;
+    background-color: transparent;
+    border: 1px solid #e5e5e5;
+    border-radius: 3px;
+    margin: 0;
+    color: #999;
+    font-size: 12px;
+    line-height: 12px;
+    padding: 4px
+  }
+  
+  .tag-big {
+    font-size: 14px;
+    line-height: 18px
+  }
+  
+  .tag.tag-green {
+    color: #06bf04;
+    border-color: #0c3
+  }
+  
+  .tag.tag-orange,
+  .tag.tag-orangef60 {
+    color: #f60;
+    border-color: #f60
+  }
+  
+  .tag.tag-white {
+    color: #333;
+    border-color: #bbb
+  }
+  
+  .tag.tag-blue {
+    color: #38f;
+    border-color: #38f
+  }
+  
+  .tag.tag-red {
+    color: #ed5050;
+    border-color: #ed5050
+  }
+  
+  .tag.tag-pink {
+    color: #ee614b;
+    border-color: #ee614b
+  }
+  
+  .tag.disabled {
+    background-color: #ddd!important;
+    background-image: none!important;
+    border: 1px solid transparent!important;
+    color: #fff!important
+  }
+  
+  .wrapper-form .form-item {
+    position: relative;
+    margin-top: 10px
+  }
+  
+  .wrapper-form .form-item label {
+    position: absolute;
+    top: 1px;
+    left: 10px;
+    line-height: 45px;
+    z-index: 1;
+    color: #666
+  }
+  
+  .wrapper-form .form-item input,
+  .wrapper-form .form-item textarea {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%;
+    line-height: 18px;
+    padding: 12px 10px 12px 68px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 14px;
+    outline: 0;
+    opacity: 1;
+    -webkit-appearance: none
+  }
+  
+  .wrapper-form .form-item input[disabled=disabled] {
+    background: #f8f8f8
+  }
+  
+  .wrapper-form .form-item:first-child {
+    margin-top: 0
+  }
+  
+  .btn-1-1,
+  .btn-2-1,
+  .btn-3-1 {
+    display: inline-block;
+    padding: 0 3px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+  }
+  
+  .btn-1-1 .btn,
+  .btn-1-1 .tag,
+  .btn-2-1 .btn,
+  .btn-2-1 .tag,
+  .btn-3-1 .btn,
+  .btn-3-1 .tag {
+    width: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+  }
+  
+  .btn-1-1 {
+    width: 100%;
+    padding-left: 0
+  }
+  
+  .btn-1-1 .btn,
+  .btn-1-1 .tag {
+    width: 50%!important
+  }
+  
+  .btn-2-1 {
+    width: 49.5%
+  }
+  
+  .btn-3-1 {
+    width: 33.3%
+  }
+  
+  .action-container {
+    padding: 0 10px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 0
+  }
+  
+  .action-container>div,
+  .action-container>div:last-child {
+    margin-bottom: 0
+  }
+  
+  .action-container>.btn,
+  .action-container>button {
+    margin-bottom: 10px
+  }
+  
+  .action-container>.btn:last-child,
+  .action-container>button:last-child {
+    margin-bottom: 0
+  }
+  
+  .popout-box .header {
+    position: relative;
+    margin-bottom: 10px;
+    -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+    border-bottom: 2px solid #e5e5e5
+  }
+  
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
+  only screen and (min--moz-device-pixel-ratio:1.5),
+  only screen and (min-device-pixel-ratio:1.5) {
+    .popout-box .header {
+      border-bottom-width: 1px
+    }
+  }
+  
+  .popout-box .header h2 {
+    margin-bottom: 16px;
+    line-height: 16px;
+    font-size: 16px
+  }
+  
+  .popout-box .action-container {
+    margin: 10px 0 0;
+    padding: 0
+  }
+  
+  .popout-box .action-container .btn.btn-block {
+    font-size: 14px
+  }
+  
+  .popout-login .wrapper-form {
+    padding-top: 10px
+  }
+  
+  .popout-login .wrapper-form .verify-image {
+    position: absolute;
+    right: 0;
+    top: 7px;
+    width: 80px;
+    height: 30px
+  }
+  
+  .popout-login .wrapper-form .btn-auth-code {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 80px;
+    padding: 15px 4px;
+    border-radius: 5px
+  }
+  
+  .popout-login .wrapper-form .txt-cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0
+  }
+  
+  .popout-login .wrapper-form .txt-cover-half {
+    right: 90px
+  }
+  
+  .popout-login .wrapper-form .error {
+    margin-top: 10px;
+    word-break: break-word
+  }
+  
+  .popout-login .bottom-tips {
+    padding-top: 16px;
+    font-size: 0
+  }
+  
+  .popout-login .bottom-tips .inline-item {
+    padding: 0 10px;
+    border-right: 1px solid #e5e5e5;
+    font-size: 12px
+  }
+  
+  .popout-login .bottom-tips .inline-item:last-child {
+    padding-right: 0;
+    border-right: 0 none
+  }
+  
+  .wakeup-app {
+    position: fixed;
+    top: -60px;
+    left: 0;
+    z-index: 100;
+    background-color: #ECECEC;
+    width: 100%;
+    height: 60px;
+    cursor: pointer;
+    -webkit-transition: all .5s linear;
+    -moz-transition: all .5s linear;
+    transition: all .5s linear
+  }
+  
+  .wakeup-app .close {
+    float: left;
+    width: 40px;
+    height: 60px;
+    position: relative;
+    cursor: pointer
+  }
+  
+  .wakeup-app .close:after {
+    position: absolute;
+    display: block;
+    content: '×';
+    width: 18px;
+    height: 18px;
+    font-size: 14px;
+    line-height: 16px;
+    border-radius: 9px;
+    color: #fff;
+    background-color: #DDDEDF;
+    top: 50%;
+    left: 50%;
+    margin-top: -9px;
+    margin-left: -9px
+  }
+  
+  .wakeup-app .app-icon {
+    float: left;
+    width: 60px;
+    height: 60px;
+    background-image: url(https://b.yzcdn.cn/v2/image/wap/weixin_share_default_logo.png);
+    background-size: 80% 80%;
+    background-repeat: no-repeat;
+    background-position: center center
+  }
+  
+  .wakeup-app .description {
+    float: left;
+    text-align: left;
+    padding: 5px 0 5px 3px
+  }
+  
+  .wakeup-app .description .title {
+    margin: 6px 0
+  }
+  
+  .wakeup-app .description .meta {
+    color: #999;
+    line-height: 1;
+    font-size: 12px;
+    letter-spacing: 1px
+  }
+  
+  .wakeup-app .btn {
+    float: right;
+    margin-top: 12px;
+    margin-right: 12px;
+    padding: 8px;
+    border-color: #FC5959;
+    background-color: #FC5959;
+    letter-spacing: 1px
+  }
+  
+  .wakeup-app-mask {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    opacity: .8;
+    z-index: 101
+  }
+  
+  .wakeup-app-opentip {
+    position: fixed;
+    height: 144px;
+    top: 0;
+    left: 10px;
+    right: 10px;
+    z-index: 102
+  }
+  
+  .wakeup-app-opentip .lay {
+    width: 100%;
+    height: 120px;
+    border-radius: 0 0 8px 8px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/opentip.png) 100% 4px no-repeat #f9f9f9;
+    background-size: 127px auto
+  }
+  
+  .wakeup-app-opentip .note {
+    float: right;
+    margin: 39px 58px 0 0;
+    width: 160px;
+    line-height: 20px
+  }
+  
+  .wakeup-app-opentip .note h3 {
+    font-size: 20px;
+    margin-bottom: 6px;
+    font-weight: 400
+  }
+  
+  .wakeup-app-opentip .note p {
+    font-size: 14px
+  }
+  
+  .ui-viewport-640 .wakeup-app {
+    top: -102px;
+    height: 102px
+  }
+  
+  .ui-viewport-640 .wakeup-app .close {
+    width: 68px;
+    height: 102px
+  }
+  
+  .ui-viewport-640 .wakeup-app .close:after {
+    width: 30.6px;
+    height: 30.6px;
+    font-size: 23.8px;
+    line-height: 27.2px;
+    border-radius: 15.3px;
+    margin-top: -15.3px;
+    margin-left: -15.3px
+  }
+  
+  .ui-viewport-640 .wakeup-app .app-icon {
+    width: 102px;
+    height: 102px
+  }
+  
+  .ui-viewport-640 .wakeup-app .description {
+    padding: 8.5px 0 8.5px 5.1px
+  }
+  
+  .ui-viewport-640 .wakeup-app .description .title {
+    margin: 10.2px 0;
+    font-size: 25.5px;
+    line-height: 30.6px
+  }
+  
+  .ui-viewport-640 .wakeup-app .description .meta {
+    line-height: 1;
+    font-size: 20.4px;
+    letter-spacing: 1.7px
+  }
+  
+  .ui-viewport-640 .wakeup-app .btn {
+    margin-top: 20.4px;
+    margin-right: 20.4px;
+    padding: 13.6px;
+    letter-spacing: 1.7px;
+    font-size: 20.4px
+  }
+  
+  .ui-viewport-640 .wakeup-app-opentip {
+    height: 244.8px;
+    left: 17px;
+    right: 17px
+  }
+  
+  .ui-viewport-640 .wakeup-app-opentip .lay {
+    height: 204px;
+    border-radius: 0 0 13.6px 13.6px;
+    background: url(https://b.yzcdn.cn/v2/image/wap/opentip.png) 100% 6.8px no-repeat #f9f9f9;
+    background-size: 215.9px auto
+  }
+  
+  .ui-viewport-640 .wakeup-app-opentip .note {
+    margin: 66.3px 98.6px 0 0;
+    width: 272px;
+    line-height: 34px
+  }
+  
+  .ui-viewport-640 .wakeup-app-opentip .note h3 {
+    font-size: 34px;
+    margin-bottom: 10.2px
+  }
+  
+  .ui-viewport-640 .wakeup-app-opentip .note p {
+    font-size: 23.8px
+  }
+  
+  .fuwu-hover-container {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, .4);
+    color: #fff;
+    padding: 10px 0;
+    margin: 0;
+    font-size: 14px
+  }
+  
+  .fuwu-hover-container p {
+    padding: 5px 10px;
+    font-size: 14px
+  }
+  
+  .fuwu-hover-container a {
+    border: none;
+    border-radius: 0;
+    padding: 5px 9px;
+    margin-right: 10px;
+    font-size: 14px
+  }
\ No newline at end of file
diff --git a/src/pages/goods/goods_mars.css b/src/pages/goods/goods_mars.css
new file mode 100644
index 0000000..064b218
--- /dev/null
+++ b/src/pages/goods/goods_mars.css
@@ -0,0 +1,375 @@
+.mj-float-nav {
+  position: fixed;
+  right: 15px;
+  bottom: 126px;
+  z-index: 999;
+  background-color: #333;
+  opacity: 0.9;
+  border-radius: 32px;
+  width: 47px;
+  height: 47px;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+  -webkit-box-shadow: 0px 0px 3px #000;
+  box-shadow: 0px 0px 3px #000;
+  overflow: hidden
+}
+
+.mj-float-nav [class^=icon-],
+.mj-float-nav [class^=icon-]::before {
+  background: url("/v2/image/yzapp/h5/fixed_menu.png") no-repeat;
+  background-size: 46px 144px
+}
+
+.mj-float-nav .icon-dot {
+  position: absolute;
+  width: 47px;
+  height: 47px;
+  right: 0;
+  top: 0;
+  background-position: 0px -97px;
+  background-color: inherit;
+  border-radius: 50%;
+  opacity: inherit;
+  z-index: 1000
+}
+
+.mj-float-nav .nav-content {
+  position: absolute;
+  width: 188px;
+  top: 0px;
+  right: 19px;
+  background-color: inherit;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-top-left-radius: 23px;
+  border-bottom-left-radius: 23px;
+  z-index: 999
+}
+
+.mj-float-nav .nav-content a {
+  display: inline-block;
+  width: 24px;
+  color: #eee;
+  font-size: 10px;
+  background: none;
+  text-align: center
+}
+
+.mj-float-nav .nav-content a:before {
+  content: ' ';
+  display: block;
+  width: 18px;
+  height: 18px;
+  margin: 0 auto 6px auto
+}
+
+.mj-float-nav .icon-home::before {
+  background-position: 0px 0px
+}
+
+.mj-float-nav .icon-category::before {
+  background-position: 0px -17px
+}
+
+.mj-float-nav .icon-user::before {
+  background-position: 0px -33px
+}
+
+.mj-float-nav .icon-close {
+  position: absolute;
+  left: 16px;
+  top: 13px;
+  width: 20px;
+  height: 20px;
+  background-position: 0px 0px
+}
+
+.mj-float-nav ul {
+  position: relative;
+  width: 188px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 6px 18px 3px 18px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.mj-float-nav li {
+  display: inline-block;
+  width: 30px;
+  margin-right: 26px;
+  text-align: center
+}
+
+.mj-float-nav li:last-child {
+  margin-right: 0px
+}
+
+.mj-float-nav.open {
+  width: 208px;
+  -webkit-box-shadow: none;
+  box-shadow: none
+}
+
+.mj-float-nav.open .icon-dot {
+  background-position: 0px -51px
+}
+
+html,
+body {
+  -webkit-tap-highlight-color: transparent
+}
+
+.stick-bottom {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  font-size: 12px;
+  line-height: 16px;
+  height: 50px;
+  z-index: 100;
+  background-color: #fff
+}
+
+.stick-bottom-icons {
+  float: left;
+  width: 38.4%;
+  font-size: 0px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .stick-bottom-icons {
+    border-top-width: 1px
+  }
+}
+
+.stick-bottom-icons .icons {
+  width: 32.5%;
+  height: 50px;
+  display: inline-block;
+  line-height: 75px;
+  text-align: center;
+  font-size: 10px;
+  background-repeat: no-repeat;
+  background-size: 19px 19px;
+  background-position: center 8px;
+  color: #828282;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-right: 2px solid #e5e5e5
+}
+
+@media (max-width: 320px) {
+  .stick-bottom-icons .icons {
+    width: 40px
+  }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .stick-bottom-icons .icons {
+    border-right-width: 1px
+  }
+}
+
+.stick-bottom-icons .icons:last-child {
+  border-right: 0
+}
+
+.stick-bottom-icons .icons-im {
+  background-image: url("https://b.yzcdn.cn/v2/image/yzapp/icons/icon-enabled-im@3x.png")
+}
+
+.stick-bottom-icons .icons-im.disabled {
+  background-image: url("/v2/image/yzapp/icons/icon-disabled-im@3x.png");
+  color: #c0c0c0
+}
+
+.stick-bottom-icons .icons-home {
+  background-image: url("https://b.yzcdn.cn/v2/image/yzapp/icons/icon-store@3x.png")
+}
+
+.stick-bottom-icons .icons-zan {
+  background-image: url("https://b.yzcdn.cn/v2/image/yzapp/h5/collect@3x.png")
+}
+
+.stick-bottom-icons .icons-zaned {
+  background-image: url("/v2/image/yzapp/h5/yi-collect@3x.png")
+}
+
+.stick-bottom-btns {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 50px;
+  line-height: 50px
+}
+
+.stick-bottom-btns .btn-cart {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  background: #ff8855;
+  text-align: center;
+  padding: 0
+}
+
+.stick-bottom-btns .btn-buy {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  background: #ff4444;
+  text-align: center;
+  padding: 0
+}
+
+.stick-bottom-btns .btn-2-1-new {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  color: #fff;
+  text-align: center;
+  padding: 0
+}
+
+.stick-bottom-btns .btn-2-1-new.disabled {
+  background: #c9c9c9
+}
+
+.stick-bottom-btns .background-red {
+  background: #ed5050
+}
+
+.stick-bottom-btns .background-pink {
+  background: #ee614b
+}
+
+.stick-bottom-btns a {
+  color: #fff;
+  font-size: 16px
+}
+
+.stick-bottom-btns .f16 {
+  font-size: 16px
+}
+
+.stick-bottom-btns .btn-1-1,
+.stick-bottom-btns .btn-2-1,
+.stick-bottom-btns .btn-3-1 {
+  padding: 0;
+  text-align: center;
+  padding: 0;
+  color: #fff;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1
+}
+
+.stick-bottom-btns .tag {
+  height: 36px;
+  line-height: 24px;
+  padding: 5px 4px;
+  font-size: 12px
+}
+
+.stick-bottom-btns .btn {
+  float: left;
+  height: 36px;
+  line-height: 22px;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.stick-bottom-btns .btn-1-1 .btn {
+  width: 100% !important
+}
+
+.stick-bottom-btns .orange-dark {
+  background: #f15a0c
+}
+
+.stick-bottom-btns .btn-1-1 .disabled {
+  background-color: #c9c9c9 !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  color: #fff !important
+}
+
+#right-icon {
+  bottom: 68px;
+  right: 15px
+}
+
+a#global-cart {
+  z-index: 10
+}
+
+a#global-cart .icon-img {
+  background: url("https://b.yzcdn.cn/v2/image/yzapp/h5/cart1@2x.png") no-repeat;
+  background-position: 0 0;
+  background-size: 100% 100%
+}
+
+a#global-cart.hide {
+  display: none
+}
+
+a#global-cart.new .icon-img {
+  background-position: 0 0
+}
+
+.no-text a#global-cart {
+  background: url("https://b.yzcdn.cn/v2/image/yzapp/h5/cart1@2x.png") no-repeat;
+  background-size: 100% 100%
+}
+
+.no-text a#global-cart.s0,
+.no-text a#global-cart.s1,
+.no-text a#global-cart.s2,
+.no-text a#global-cart.s3 {
+  background-position: 0 0
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  a#global-cart .icon-img {
+    background-position: 0 0;
+    background-image: url("https://b.yzcdn.cn/v2/image/yzapp/h5/cart1@2x.png")
+  }
+  a#global-cart.new .icon-img {
+    background-position: 0 0
+  }
+  .no-text a#global-cart {
+    background-image: url("https://b.yzcdn.cn/v2/image/yzapp/h5/cart1@2x.png")
+  }
+}
diff --git a/src/pages/goods/goods_sku.css b/src/pages/goods/goods_sku.css
new file mode 100644
index 0000000..0616a3d
--- /dev/null
+++ b/src/pages/goods/goods_sku.css
@@ -0,0 +1,1492 @@
+@charset "UTF-8";
+.block,
+.block-item {
+  display: block;
+  overflow: hidden;
+  border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch
+}
+
+.quantity,
+.quantity .txt,
+.quantity button,
+.sku-layout .vertical-middle {
+  vertical-align: middle
+}
+
+.block,
+.block p,
+.block-item {
+  overflow: hidden
+}
+
+.quantity .txt,
+.quantity button,
+.tag {
+  text-align: center;
+  margin: 0
+}
+
+.block,
+.block-item,
+.sku-layout .block-item,
+.sku-layout-title,
+.sku-message dl {
+  border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch
+}
+
+.image-input-trigger,
+.quantity .txt {
+  -webkit-tap-highlight-color: transparent
+}
+
+.block-item {
+  position: relative;
+  padding: 10px;
+  line-height: 1.5;
+  border: 0;
+  -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .block-item {
+    border-top-width: 1px
+  }
+}
+
+.block-item .btn-auth-code {
+  position: absolute;
+  top: 6px;
+  right: 0;
+  height: 30px;
+  line-height: 30px;
+  padding-left: 7px;
+  padding-right: 7px;
+  font-weight: 700
+}
+
+.block-item .verify-image {
+  position: absolute;
+  width: 80px;
+  height: 30px;
+  right: 10px;
+  top: 7px
+}
+
+.block,
+.quantity,
+.quantity .minus {
+  position: relative
+}
+
+.block-item.border-none {
+  border-top: 0
+}
+
+.block-item ul {
+  padding-right: 50px
+}
+
+.block-item ul em {
+  color: #999
+}
+
+.block-item h4.block-item-title {
+  line-height: 22px;
+  float: left;
+  margin-right: 10px
+}
+
+.block {
+  -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  border-bottom: 2px solid #e5e5e5;
+  margin: 10px 0;
+  background-color: #fff;
+  font-size: 14px
+}
+
+.block.top-0,
+.block:first-child {
+  margin-top: 0
+}
+
+.quantity,
+.tag {
+  display: inline-block
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .block {
+    border-top-width: 1px;
+    border-bottom-width: 1px
+  }
+}
+
+.block.border-0,
+.block.border-top-0 {
+  border-top: 0
+}
+
+.block.border-0,
+.block.border-bottom-0 {
+  border-bottom: 0
+}
+
+.block.bottom-0 {
+  margin-bottom: 0
+}
+
+.block .bottom {
+  padding: 10px;
+  height: 18px;
+  line-height: 18px
+}
+
+.block .bottom .price {
+  float: right;
+  color: #f60
+}
+
+.block.block-list {
+  margin: 0;
+  padding: 0 0 0 10px;
+  list-style: none;
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.block.block-list.margin-top-normal {
+  margin-top: 20px
+}
+
+.block-list.wf {
+  padding-left: 0
+}
+
+.block-list.wf .b-list {
+  padding-left: 10px;
+  background-color: #fff
+}
+
+.block-list>.block-item {
+  padding: 10px 10px 10px 0
+}
+
+.block-list>.block-item:first-child {
+  border-top: 0 none
+}
+
+.block.block-list+.block.block-list {
+  margin-top: 12px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (-o-min-device-pixel-ratio:3 / 2),
+only screen and (min-device-pixel-ratio:1.5) {
+  .block.block-list li span.clear {
+    background: url(https://b.yzcdn.cn/v2/image/wap/icon_clear@2x.png) center center no-repeat;
+    background-size: 100%
+  }
+}
+
+.tag {
+  background-color: transparent;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  color: #999;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 4px
+}
+
+.tag-big {
+  font-size: 14px;
+  line-height: 18px
+}
+
+.tag.tag-green {
+  color: #06bf04;
+  border-color: #0c3
+}
+
+.tag.tag-orange,
+.tag.tag-orangef60 {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-white {
+  color: #333;
+  border-color: #bbb
+}
+
+.tag.tag-blue {
+  color: #38f;
+  border-color: #38f
+}
+
+.tag.tag-red {
+  color: #ed5050;
+  border-color: #ed5050
+}
+
+.tag.tag-pink {
+  color: #ee614b;
+  border-color: #ee614b
+}
+
+.tag.disabled {
+  background-color: #ddd!important;
+  background-image: none!important;
+  border: 1px solid transparent!important;
+  color: #fff!important
+}
+
+.quantity {
+  font-size: 0
+}
+
+.quantity input[type=number]::-webkit-outer-spin-button {
+  margin: 0
+}
+
+.quantity button {
+  border: 2px solid #eee;
+  font-size: 16px;
+  line-height: 10px;
+  font-weight: 700;
+  color: #666;
+  padding: 5px;
+  outline: 0!important;
+  width: 26px;
+  height: 30px;
+  text-indent: -9999px;
+  overflow: hidden
+}
+
+.quantity .txt {
+  font-size: 14px;
+  width: 24px;
+  height: 18px;
+  border-radius: 0
+}
+
+.quantity .minus::before,
+.quantity .plus::before {
+  width: 8px;
+  height: 2px;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background-color: #6c6c6c;
+  bottom: 0;
+  content: ''
+}
+
+.quantity .txt:focus {
+  border-color: #eee
+}
+
+.quantity .minus {
+  border-radius: 4px 0 0 4px;
+  border-right: 0 none
+}
+
+.quantity .minus::before {
+  position: absolute
+}
+
+.quantity .plus {
+  position: relative;
+  border-left: 0 none;
+  border-radius: 0 4px 4px 0
+}
+
+.quantity .plus::before {
+  position: absolute
+}
+
+.quantity .plus::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  content: '';
+  width: 2px;
+  height: 8px;
+  background-color: #6c6c6c
+}
+
+.quantity .minus.disabled::before,
+.quantity .plus.disabled::after,
+.quantity .plus.disabled::before {
+  background-color: #ddd
+}
+
+.quantity .response-area {
+  width: 42px;
+  height: 42px;
+  top: -7px;
+  position: absolute
+}
+
+.name-card,
+.name-card .thumb {
+  position: relative;
+  overflow: hidden
+}
+
+.quantity .response-area-plus {
+  right: -5px
+}
+
+.quantity .response-area-minus {
+  left: -5px
+}
+
+.name-card {
+  margin-left: 0;
+  width: auto;
+  padding: 5px 0
+}
+
+.name-card .thumb {
+  width: 60px;
+  height: 60px;
+  float: left;
+  margin-left: auto;
+  margin-right: auto;
+  background-size: cover
+}
+
+.name-card .thumb img {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%
+}
+
+.name-card a:active,
+.name-card a:hover {
+  text-decoration: none
+}
+
+.name-card .detail {
+  margin-left: 68px;
+  width: auto;
+  position: relative
+}
+
+.name-card .detail h3 {
+  margin-top: 1px;
+  color: #333;
+  font-size: 12px;
+  line-height: 16px;
+  width: 100%
+}
+
+.name-card .detail p {
+  position: relative;
+  font-size: 12px;
+  line-height: 16px;
+  white-space: nowrap;
+  margin: 0 0 2px;
+  color: #ccc
+}
+
+.name-card .detail a {
+  display: block
+}
+
+.name-card .detail .l2-ellipsis {
+  max-height: 34px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical
+}
+
+.name-card .btn-goods-link {
+  bottom: 8px;
+  right: 10px;
+  position: absolute;
+  line-height: 14px;
+  font-size: 12px
+}
+
+.name-card.name-card-3col {
+  padding: 8px 85px 8px 0
+}
+
+.name-card.name-card-3col .right-col {
+  position: absolute;
+  right: 0;
+  top: 8px;
+  width: 78px;
+  padding-right: 10px;
+  font-size: 12px
+}
+
+.name-card.name-card-3col .right-col .price {
+  font-size: 14px;
+  color: #515151;
+  text-align: right;
+  line-height: 16px
+}
+
+.name-card.name-card-3col .right-col .num {
+  font-weight: 200;
+  text-align: right;
+  margin-top: 3px;
+  padding: 0;
+  color: #555
+}
+
+.name-card.name-card-3col .right-col .num .num-txt {
+  padding: 0;
+  line-height: 22px;
+  color: #515151
+}
+
+.name-card.name-card-3col .right-col .order-state {
+  font-size: 13px;
+  text-align: right
+}
+
+.sku-layout {
+  background-color: #f8f8f8
+}
+
+.sku-layout .line-through {
+  display: inline-block;
+  text-decoration: line-through;
+  line-height: 23px
+}
+
+.sku-layout .block-item {
+  border: 0;
+  -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .sku-layout .block-item {
+    border-top-width: 1px
+  }
+}
+
+.sku-layout .block-item:first-child {
+  border-top: 0 none
+}
+
+.sku-box-shadow {
+  -webkit-box-shadow: 0 -1px 14px rgba(0, 0, 0, .9);
+  box-shadow: 0 -1px 14px rgba(0, 0, 0, .9)
+}
+
+.sku-layout-title {
+  -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-bottom: 2px solid #e5e5e5;
+  border-top-width: 0;
+  position: static;
+  padding: 10px 0;
+  margin-left: 10px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .sku-layout-title {
+    border-bottom-width: 1px
+  }
+}
+
+.sku-layout-title .thumb {
+  width: 50px;
+  height: 50px;
+  border: 1px solid #eee;
+  border-radius: 2px
+}
+
+.sku-layout-title .goods-base-info {
+  margin-left: 60px
+}
+
+.sku-layout-title .goods-base-info .title {
+  padding-right: 52px;
+  margin-bottom: 5px;
+  font-size: 14px;
+  line-height: 22px
+}
+
+.sku-layout-title .goods-base-info .goods-price {
+  padding: 0 55px 0 0
+}
+
+.sku-layout-title .goods-base-info .current-price {
+  line-height: 20px
+}
+
+.sku-layout-title .goods-base-info .current-price .price-name {
+  padding-top: 1px
+}
+
+.sku-layout-title .goods-base-info .current-price .price-tag {
+  padding: 0 5px;
+  margin-left: 5px;
+  line-height: 16px;
+  font-size: 10px;
+  border-radius: 2px
+}
+
+.sku-layout-title .goods-base-info .old-price,
+.sku-layout-title .goods-base-info .original-price {
+  color: #999
+}
+
+.sku-layout-title .goods-base-info .original-price {
+  display: none
+}
+
+.sku-layout-title .goods-base-info .old-price {
+  display: block;
+  margin: 5px 0 0 2px;
+  font-size: 10px;
+  line-height: 12px
+}
+
+.sku-layout .sku-cancel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 10px
+}
+
+.sku-layout .sku-cancel .cancel-img {
+  height: 22px;
+  width: 22px;
+  background-image: url(https://b.yzcdn.cn/v2/image/wap/sku/icon_close.png);
+  background-size: 22px 22px
+}
+
+.sku-layout .goods-models .sku-list-container {
+  padding: 10px 0 0;
+  border: 0
+}
+
+.sku-layout .sku-sel-title {
+  margin-bottom: 10px;
+  font-size: 13px
+}
+
+.sku-layout .sku-sel-list {
+  zoom: 1;
+  padding-left: 0;
+  margin-bottom: 0
+}
+
+.sku-layout .sku-sel-list:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.sku-layout .sku-tag {
+  position: relative;
+  margin-right: 10px;
+  min-width: 32px;
+  max-width: 180px;
+  line-height: 16px;
+  padding: 5px 9px;
+  margin-bottom: 10px;
+  color: #333;
+  border-color: #999
+}
+
+.sku-layout .sku-tag.unavailable {
+  border-color: #e5e5e5;
+  color: #cacaca;
+  background-color: #eee;
+  cursor: not-allowed
+}
+
+.sku-layout .sku-tag.active {
+  color: #fff;
+  background-color: #f60;
+  border-color: #f60
+}
+
+.sku-layout .sku-num {
+  line-height: 29px
+}
+
+.sku-layout .other-info {
+  line-height: 14px
+}
+
+.sku-layout .stock {
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 12px
+}
+
+.sku-layout .quota {
+  display: inline-block;
+  font-size: 12px;
+  color: #f15a0c
+}
+
+.sku-layout .quantity {
+  float: right
+}
+
+.sku-layout .quantity .minus {
+  border-radius: 2px 0 0 2px
+}
+
+.sku-layout .quantity .minus.disabled {
+  background-color: #f8f8f8;
+  border-color: #e8e8e8 #999 #e8e8e8 #e8e8e8
+}
+
+.sku-layout .quantity .minus.disabled::before {
+  background-color: #bbb
+}
+
+.sku-layout .quantity .plus {
+  border-radius: 0 2px 2px 0
+}
+
+.sku-layout .quantity .plus.disabled {
+  background-color: #f8f8f8;
+  border-color: #e8e8e8 #e8e8e8 #e8e8e8 #999
+}
+
+.sku-layout .quantity .plus.disabled::after,
+.sku-layout .quantity .plus.disabled::before {
+  background-color: #bbb
+}
+
+.sku-layout .quantity .txt {
+  width: 33px;
+  height: 25px;
+  padding: 1px;
+  border: 1px solid #999;
+  border-width: 1px 0;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  color: #666
+}
+
+.sku-layout .quantity .txtCover {
+  position: absolute;
+  top: 0;
+  left: 37px;
+  bottom: 0;
+  right: 37px
+}
+
+.sku-layout .quantity .minus,
+.sku-layout .quantity .plus {
+  width: 37px;
+  height: 29px;
+  background-color: #fff;
+  border: 1px solid #999
+}
+
+.sku-layout .quantity .minus::before,
+.sku-layout .quantity .plus::before {
+  height: 1px;
+  width: 9px;
+  background-color: #666
+}
+
+.sku-layout .quantity .minus::after,
+.sku-layout .quantity .plus::after {
+  width: 1px;
+  height: 9px;
+  background-color: #666
+}
+
+sup.required {
+  color: red!important
+}
+
+.block-list .block-item.block-item-messages {
+  padding: 0;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent
+}
+
+.sku-message dl {
+  -webkit-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  -moz-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .sku-message dl {
+    border-top-width: 1px
+  }
+}
+
+.sku-message dl:first-child {
+  border: 0
+}
+
+.sku-message dt {
+  width: 70px;
+  position: relative
+}
+
+.sku-message dt .required {
+  position: absolute;
+  left: -7px;
+  font-size: 14px
+}
+
+.sku-message dt label {
+  display: inline-block;
+  line-height: 44px
+}
+
+.sku-message dt .multi-label {
+  padding-bottom: 0
+}
+
+.sku-message .comment-wrapper {
+  margin-left: 90px;
+  padding-right: 5px;
+  position: relative
+}
+
+.sku-message .comment-wrapper .txt,
+.sku-message .comment-wrapper .txta {
+  padding: 12px 0;
+  line-height: 20px;
+  width: 97%;
+  border: 0;
+  outline: 0;
+  -webkit-appearance: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.sku-message .comment-wrapper .txta {
+  -webkit-transition: height .3s ease-in-out;
+  -moz-transition: height .3s ease-in-out;
+  transition: height .3s ease-in-out;
+  line-height: 20px;
+  padding: 0;
+  margin-top: 12px;
+  height: 20px;
+  margin-bottom: 6px;
+  resize: none
+}
+
+.sku-message .comment-wrapper .focus-texta {
+  height: 52px
+}
+
+.cancel-input {
+  background: url(https://b.yzcdn.cn/v2/image/wap/sku/icon_close.png) center no-repeat;
+  height: 44px;
+  width: 44px;
+  background-size: 16px 16px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: none
+}
+
+.goods-models.js-sku-views.block.block-list {
+  margin-bottom: 10px
+}
+
+.image-input-trigger {
+  padding: 0 10px;
+  height: 24px;
+  line-height: 24px;
+  margin: 15px 0
+}
+
+.image-input-trigger .select-photo::before,
+.image-input-trigger .take-photo::before {
+  content: '';
+  position: relative;
+  display: inline-block;
+  margin-right: 5px;
+  width: 14px;
+  height: 12px;
+  background-size: 14px 12px
+}
+
+.image-input-trigger .take-photo {
+  margin-right: 10px
+}
+
+.image-input-trigger .take-photo::before {
+  top: 1px;
+  background-image: url(https://b.yzcdn.cn/v2/image/wap/sku/icon_camera.png)
+}
+
+.image-input-trigger .select-photo::before {
+  top: 2px;
+  margin-left: 10px;
+  background-image: url(https://b.yzcdn.cn/v2/image/wap/sku/icon_img.png)
+}
+
+.img-tip {
+  display: block;
+  margin-top: -10px;
+  font-size: 12px;
+  color: #999
+}
+
+.image-input-show {
+  margin-bottom: 8px;
+  height: 60px
+}
+
+.image-input-show img {
+  margin-right: 5px;
+  width: 60px;
+  height: 60px;
+  vertical-align: text-bottom
+}
+
+.photo-input {
+  position: absolute;
+  opacity: 0;
+  height: 40px;
+  width: 175px;
+  left: 0;
+  top: 0
+}
+
+.sku-layout {
+  -webkit-overflow-scrolling: touch
+}
+
+.sku-layout .layout-content {
+  overflow-y: scroll;
+  line-height: 20px;
+  background-color: #f8f8f8
+}
+
+.sku-layout .content-foot {
+  font-size: 0
+}
+
+.sku-layout .content-foot .half-button {
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 50%
+}
+
+.sku-layout .content-foot .half-button:first-child {
+  padding-right: 5px
+}
+
+.sku-layout .content-foot .half-button:last-child {
+  padding-left: 5px
+}
+
+.sku-layout .content-foot .btn-buy,
+.sku-layout .content-foot .btn-cart,
+.sku-layout .content-foot .btn-next {
+  padding: 8px;
+  line-height: 17px;
+  font-size: 14px
+}
+
+@font-face {
+  font-family: iconfont;
+  src: url(https://b.yzcdn.cn/youzan-icon/font/iconfont-0.1.eot?t=1481088669367);
+  src: url(https://b.yzcdn.cn/youzan-icon/font/iconfont-0.1.eot?t=1481088669367#iefix) format("embedded-opentype"), url(https://b.yzcdn.cn/youzan-icon/font/iconfont-0.1.woff?t=1481088669367) format("woff"), url(https://b.yzcdn.cn/youzan-icon/font/iconfont-0.1.ttf?t=1481088669367) format("truetype"), url(https://b.yzcdn.cn/youzan-icon/font/iconfont-0.1.svg?t=1481088669367#iconfont) format("svg")
+}
+
+.iconfont {
+  font-family: iconfont!important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: .2px;
+  -moz-osx-font-smoothing: grayscale
+}
+
+.new-btn,
+.new-btn .desc {
+  font-size: 10px;
+  text-align: center
+}
+
+.icon-certificate:before {
+  content: "\e602"
+}
+
+.icon-search:before {
+  content: "\e603"
+}
+
+.icon-gift:before {
+  content: "\e604"
+}
+
+.icon-cancel:before {
+  content: "\e605"
+}
+
+.icon-left-arrow:before {
+  content: "\e606"
+}
+
+.icon-shopping-cart:before {
+  content: "\e607"
+}
+
+.icon-location:before {
+  content: "\e608"
+}
+
+.icon-service:before {
+  content: "\e609"
+}
+
+.icon-store:before {
+  content: "\e60a"
+}
+
+.orange-btn {
+  background: #f85;
+  color: #fff;
+  position: relative
+}
+
+.orange-btn::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  -moz-transform: scale(.5);
+  -ms-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border-top: 1px solid #E57A4C
+}
+
+.disabled-btn::after,
+.red-btn::after {
+  content: "";
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  -moz-transform: scale(.5);
+  -ms-transform: scale(.5);
+  pointer-events: none;
+  top: 0;
+  left: 0
+}
+
+.orange-btn:active {
+  background: #DD6F44
+}
+
+.red-btn {
+  background: #f44;
+  color: #fff;
+  position: relative
+}
+
+.red-btn::after {
+  position: absolute;
+  box-sizing: border-box;
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  border-top: 1px solid #E53D3D
+}
+
+.red-btn:active {
+  background: #D43333
+}
+
+.disabled-btn {
+  background: #e5e5e5;
+  color: #999;
+  position: relative
+}
+
+.disabled-btn::after {
+  position: absolute;
+  box-sizing: border-box;
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  border-top: 1px solid #cdcdcd
+}
+
+.buy-cart::after,
+.service::after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-transform: scale(.5);
+  -moz-transform: scale(.5);
+  -ms-transform: scale(.5)
+}
+
+.warning-bar {
+  margin: 0;
+  height: 35px;
+  line-height: 35px;
+  background: #FFF7CC!important
+}
+
+.big-btn,
+.new-btn {
+  height: 50px;
+  float: left
+}
+
+.new-btn {
+  line-height: 50px;
+  background-color: #fff
+}
+
+.new-btn:active {
+  background-color: #F8F8F8
+}
+
+.new-btn .desc {
+  position: absolute;
+  line-height: normal;
+  left: 0;
+  bottom: 5px;
+  width: 100%;
+  color: #666
+}
+
+.big-btn {
+  line-height: 50px;
+  font-size: 16px;
+  padding: 0;
+  border: none;
+  vertical-align: top
+}
+
+.buy-cart-msg::before,
+.service-msg::before {
+  border-radius: 8px;
+  background: #f44;
+  z-index: 2
+}
+
+.buy-cart::after,
+.gift::after,
+.service::after {
+  content: "";
+  pointer-events: none;
+  border-top: 1px solid rgba(0, 0, 0, .1);
+  border-right: 1px solid rgba(0, 0, 0, .1)
+}
+
+.big-btn-1-1 {
+  overflow: hidden;
+  text-align: center
+}
+
+.big-btn-1-1 .big-btn {
+  width: 100%
+}
+
+.big-btn-2-1 {
+  font-size: 0;
+  overflow: hidden;
+  text-align: center
+}
+
+.big-btn-2-1 .big-btn {
+  width: 50%
+}
+
+.buy-cart {
+  position: relative
+}
+
+.buy-cart::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top
+}
+
+.buy-cart .icon-shopping-cart {
+  display: block;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 18px;
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  margin-left: -10px;
+  color: #666
+}
+
+.buy-cart-msg::before {
+  content: "";
+  height: 8px;
+  width: 8px;
+  position: absolute;
+  top: 7px;
+  left: 50%;
+  margin-left: 7px
+}
+
+.service {
+  position: relative
+}
+
+.service::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top
+}
+
+.gift::after,
+.point::after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-transform: scale(.5);
+  -moz-transform: scale(.5);
+  -ms-transform: scale(.5)
+}
+
+.service .icon-service {
+  display: block;
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 20px;
+  color: #f44;
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  margin-left: -10px
+}
+
+.service-msg::before {
+  content: "";
+  height: 8px;
+  width: 8px;
+  position: absolute;
+  top: 7px;
+  left: 50%;
+  margin-left: 7px
+}
+
+.gift {
+  position: relative
+}
+
+.gift::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top
+}
+
+.gift .icon-gift {
+  display: block;
+  width: 20px;
+  height: 20px;
+  font-size: 18px;
+  line-height: 20px;
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  margin-left: -10px;
+  color: #666
+}
+
+.point::after,
+.promotion::after {
+  content: "";
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  pointer-events: none;
+  border-top: 1px solid rgba(0, 0, 0, .1);
+  border-right: 1px solid rgba(0, 0, 0, .1)
+}
+
+.point {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAoCAMAAACo9wirAAAAY1BMVEUAAABpaWloaGhmZmZmZmZnZ2dycnJnZ2dnZ2dmZmZmZmZnZ2dtbW1ra2toaGhmZmZmZmZlZWVmZmZmZmZnZ2dmZmZpaWlmZmZoaGhmZmZmZmZmZmZmZmZnZ2dkZGRmZmZmZmYJ5zNiAAAAIHRSTlMAGVzpy8YH+sDv4NoVEQ705Luok4ptKF9MsX94VUgzS+0p87kAAAD3SURBVDjL7ZRJrsMgEEQZDBgDnqfMdf9T/v6xpYTEFllmkbcAS1UGuqUu9jlc9I2TxkjX9IK/qnpQiFCDftYHCVSH0zx6rf04nw4VIIfH4TmgztEf+qyAnK+6Qz2zN+YabnFkyALbIJDwvwsUJdukLCBoy2ndQSCnVYLvtgYyaUhekXzkWibfvICE5aOA6d/13qDgi6EGUHUhalJXAajvBq2gWhCyOV7Gshwvx0aCaEnQZJjgAvOtRYRtPQsOExnUWua1y6wBYWzWXZ/KtPBsBw/76+R2Jw1gvrWTu6OXHN70+McBclsC5LYGSDqCYvj0CLGJs4/5AxbWIm2lZulWAAAAAElFTkSuQmCC);
+  background-size: 18px;
+  background-repeat: no-repeat;
+  background-position: 50% 7px;
+  position: relative
+}
+
+.point::after {
+  position: absolute;
+  box-sizing: border-box;
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top
+}
+
+.promotion {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAY1BMVEUAAAD/RET/RET/RET/RUX/RUX/RET/Rkb/Rkb/R0f/UFD/VVX/WVn/RUX/RUX/RUX/RET/RUX/RUX/RET/RUX/RUX/RET/Rkb/RET/Rkb/Rkb/Rkb/R0f/R0f/RUX/RET/RET/klPVAAAAIHRSTlMAnffs3LSZPyIZEAkFZe7q48vIv6OUg4BwbVdQSEE0LcnOiicAAAG2SURBVFjD7dfJbsIwFEbha2eeGFvm4bz/UzZ0E1VQ/7d0hcTZREjRJ5I4jm3v3r1O1325zrNo3215kEepwvzn2dunoEN+f/b279B5ya1Y7E5129ujggOqC8Zm4djZrwU0VGVA3LRmaScIaIhA2Zh0LAn1n8DiYg4nDd2cVeNx0tAAfHQeJw1VcXTM46ShOoOV6/8IqICF6/4I6Ay4npeCllB6HAUdIHrGoYRy2DgcCVUwa7WjoQDB40xtH0NzODqdSXo0P0PsnM4k2X17KJTjqoSdcHyt4SQcXznUwvGVQSscXxF64TwHaaeHqC9NO9ZCpm+2dqyGXD9+7dgJ1npAasd2UOpXRDtWwF6/tNrpIlw908ggxs8R5uaa2ML0W5yvptoh5bQzqExO/rrN9yhSnyNdE+Fgpj6QuhKW40F8snUX4DwexSJC1iym4ZtY1si6FWS1jYmFluoD4vTon176daPDYCK9GG1WwKdy9PL4srg5vWDkgr0pgSiuS28h2k0EMnGf1aamO4YZY0XiuYttVt/Wp10RubVMjGe58ZvK795T/1Z0ah6qf26OY5avy/3V3r17mb4A97lDYil581IAAAAASUVORK5CYII=);
+  background-size: 24px;
+  background-repeat: no-repeat;
+  background-position: 50% 5px;
+  position: relative
+}
+
+.promotion::after {
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: scale(.5);
+  -moz-transform: scale(.5);
+  -ms-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top
+}
+
+.big-mini-btn-1-1,
+.big-mini-btn-2-1,
+.mini-btn-1-1,
+.mini-btn-2-1,
+.mini-btn-3-1 {
+  font-size: 0;
+  padding: 0
+}
+
+@media screen and (min-width:768px) {
+  .mini-btn-1-1 {
+    float: left;
+    width: 70px
+  }
+  .mini-btn-1-1 .new-btn {
+    width: 70px
+  }
+  .mini-btn-2-1 {
+    float: left;
+    width: 120px
+  }
+  .mini-btn-2-1 .new-btn {
+    width: 60px
+  }
+  .mini-btn-3-1 {
+    float: left;
+    width: 129px
+  }
+  .mini-btn-3-1 .new-btn {
+    width: 43px
+  }
+  .presale-btn {
+    position: relative
+  }
+  .presale-btn .left-desc-btn {
+    position: absolute;
+    left: 10px!important
+  }
+  .presale-btn .right-buy-btn {
+    right: 10px!important
+  }
+}
+
+@media screen and (max-width:321px) {
+  .mini-btn-1-1 {
+    float: left;
+    width: 70px
+  }
+  .mini-btn-1-1 .new-btn {
+    width: 70px
+  }
+  .mini-btn-2-1 {
+    float: left;
+    width: 120px
+  }
+  .mini-btn-2-1 .new-btn {
+    width: 60px
+  }
+  .mini-btn-3-1 {
+    float: left;
+    width: 129px
+  }
+  .mini-btn-3-1 .new-btn {
+    width: 43px
+  }
+  .presale-btn {
+    position: relative
+  }
+  .presale-btn .left-desc-btn {
+    position: absolute;
+    left: 10px!important
+  }
+  .presale-btn .right-buy-btn {
+    right: 10px!important
+  }
+}
+
+@media screen and (min-width:321px) and (max-width:413px) {
+  .mini-btn-1-1 {
+    float: left;
+    width: 70px
+  }
+  .mini-btn-1-1 .new-btn {
+    width: 70px
+  }
+  .mini-btn-2-1 {
+    float: left;
+    width: 140px
+  }
+  .mini-btn-2-1 .new-btn {
+    width: 70px
+  }
+  .mini-btn-3-1 {
+    float: left;
+    width: 144px
+  }
+  .mini-btn-3-1 .new-btn {
+    width: 48px
+  }
+}
+
+@media screen and (min-width:413px) and (max-width:767px) {
+  .mini-btn-1-1 {
+    float: left;
+    width: 80px
+  }
+  .mini-btn-1-1 .new-btn {
+    width: 80px
+  }
+  .mini-btn-2-1 {
+    float: left;
+    width: 160px
+  }
+  .mini-btn-2-1 .new-btn {
+    width: 80px
+  }
+  .mini-btn-3-1 {
+    float: left;
+    width: 174px
+  }
+  .mini-btn-3-1 .new-btn {
+    width: 58px
+  }
+}
+
+.sku-layout .content-foot {
+  padding: 0!important;
+  width: 100%!important
+}
+
+.sku-layout .layout-content {
+  border: none!important
+}
+
+.bottom-fix {
+  border-top: 0;
+  bottom: -1px
+}
+
+.presale-btn {
+  position: relative
+}
+
+.presale-btn .left-desc-btn {
+  font-size: 10px;
+  position: absolute;
+  left: 8%
+}
+
+.presale-btn .multi-line {
+  height: 30px;
+  margin-top: 10px;
+  line-height: 15px;
+  text-align: left
+}
+
+.presale-btn .right-buy-btn {
+  position: absolute;
+  right: 8%
+}
diff --git a/src/pages/goods/goods_theme.css b/src/pages/goods/goods_theme.css
new file mode 100644
index 0000000..2a032a6
--- /dev/null
+++ b/src/pages/goods/goods_theme.css
@@ -0,0 +1,108 @@
+@charset "UTF-8";
+  .default-theme .main-btn::after,
+  .default-theme .vice-btn::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    -webkit-perspective: 1000;
+    -webkit-backface-visibility: hidden;
+    pointer-events: none;
+    border-top: 1px solid rgba(0, 0, 0, .1)
+  }
+  
+  .default-theme .main-btn {
+    background-color: #F44;
+    color: #fff
+  }
+  
+  .default-theme .main-btn::after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transform: scale(.5);
+    -moz-transform: scale(.5);
+    -ms-transform: scale(.5);
+    transform: scale(.5);
+    -webkit-transform-origin: left top;
+    -moz-transform-origin: left top;
+    -ms-transform-origin: left top;
+    transform-origin: left top
+  }
+  
+  .default-theme .main-btn:active {
+    background: #ff1b1b
+  }
+  
+  .default-theme .vice-btn {
+    background-color: #F85;
+    color: #fff
+  }
+  
+  .default-theme .vice-btn::after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transform: scale(.5);
+    -moz-transform: scale(.5);
+    -ms-transform: scale(.5);
+    transform: scale(.5);
+    -webkit-transform-origin: left top;
+    -moz-transform-origin: left top;
+    -ms-transform-origin: left top;
+    transform-origin: left top
+  }
+  
+  .default-theme .vice-btn:active {
+    background: #ff6b2c
+  }
+  
+  .default-theme .current-price,
+  .default-theme .price-sub {
+    color: #F44!important
+  }
+  
+  .default-theme .goods-detail .tabber {
+    color: #F44;
+    border-bottom: 1px solid #F44
+  }
+  
+  .default-theme .goods-detail .tabber .item button.active {
+    color: #fff
+  }
+  
+  .default-theme .goods-detail .tabber button.active {
+    color: #F44;
+    border-bottom: 1px solid #F44
+  }
+  
+  .default-theme .commit-bill-btn,
+  .default-theme .pay-bill-btn,
+  .default-theme .sku-layout .sku-list-container .active {
+    background-color: #F44;
+    border-color: #F44
+  }
+  
+  .default-theme .trade-review-list .review-rate-tabber button.active {
+    background-color: #F44
+  }
+  
+  .default-theme .sku-layout .current-price .price-name,
+  .default-theme .sku-layout .current-price i {
+    color: #F44!important
+  }
+  
+  .default-theme .sku-layout .other-info .quota {
+    color: #F44
+  }
+  
+  .default-theme .theme-price-color {
+    color: #F44!important
+  }
+  
+  .default-theme .sc-goods-list .info p.goods-price>em,
+  .default-theme .service .icon-service {
+    color: #F44
+  }
\ No newline at end of file
diff --git a/src/pages/member/member.css b/src/pages/member/member.css
new file mode 100644
index 0000000..67420ea
--- /dev/null
+++ b/src/pages/member/member.css
@@ -0,0 +1,956 @@
+.block-item {
+  position: relative;
+  display: block;
+  padding: 10px;
+  line-height: 1.5;
+  border: 0;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  overflow: hidden
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .block-item {
+    border-top-width: 1px
+  }
+}
+
+.block-item .btn-auth-code {
+  position: absolute;
+  top: 6px;
+  right: 0;
+  height: 30px;
+  line-height: 30px;
+  padding-left: 7px;
+  padding-right: 7px;
+  font-weight: bold
+}
+
+.block-item .verify-image {
+  position: absolute;
+  width: 80px;
+  height: 30px;
+  right: 10px;
+  top: 7px
+}
+
+.block-item.border-none {
+  border-top: 0
+}
+
+.block-item ul {
+  padding-right: 50px
+}
+
+.block-item ul em {
+  color: #999
+}
+
+.block-item h4.block-item-title {
+  line-height: 22px;
+  float: left;
+  margin-right: 10px
+}
+
+.block {
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5;
+  border-bottom: 2px solid #e5e5e5;
+  overflow: hidden;
+  margin: 10px 0;
+  background-color: #fff;
+  display: block;
+  position: relative;
+  font-size: 14px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .block {
+    border-top-width: 1px;
+    border-bottom-width: 1px
+  }
+}
+
+.block.top-0 {
+  margin-top: 0
+}
+
+.block.bottom-0 {
+  margin-bottom: 0
+}
+
+.block.border-top-0 {
+  border-top: 0
+}
+
+.block.border-bottom-0 {
+  border-bottom: 0
+}
+
+.block.border-0 {
+  border-top: 0;
+  border-bottom: 0
+}
+
+.block:first-child {
+  margin-top: 0
+}
+
+.block .bottom {
+  padding: 10px;
+  height: 18px;
+  line-height: 18px
+}
+
+.block .bottom .price {
+  float: right;
+  color: #f60
+}
+
+.block p {
+  overflow: hidden
+}
+
+.block.block-list {
+  margin: 0;
+  padding: 0;
+  padding-left: 10px;
+  list-style: none;
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.block.block-list.margin-top-normal {
+  margin-top: 20px
+}
+
+.block-list.wf {
+  padding-left: 0
+}
+
+.block-list.wf .b-list {
+  padding-left: 10px;
+  background-color: #fff
+}
+
+.block-list>.block-item {
+  padding: 10px 10px 10px 0
+}
+
+.block-list>.block-item:first-child {
+  border-top: 0px none
+}
+
+.block.block-list+.block.block-list {
+  margin-top: 12px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (-o-min-device-pixel-ratio: 3 / 2),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .block.block-list li span.clear {
+    background: url("/v2/image/wap/icon_clear@2x.png") center center no-repeat;
+    background-size: 100%
+  }
+}
+
+.form {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  padding-left: 10px;
+  padding-right: 10px;
+  list-style: none;
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.form.mg-top-20 {
+  margin-top: 20px
+}
+
+.form.mg-bottom-20 {
+  margin-bottom: 20px
+}
+
+.form .block-item.no-top-border {
+  border-top-width: 0px
+}
+
+.form>.block-item:first-child {
+  border-top: 0px none
+}
+
+.form .block-item {
+  display: table;
+  width: 100%;
+  padding: 0
+}
+
+.form .block-item label {
+  display: table-cell;
+  width: 90px;
+  line-height: 28px;
+  padding: 10px 0
+}
+
+.form .block-item textarea,
+.form .block-item input,
+.form .block-item select,
+.form .block-item a,
+.form .block-item span {
+  display: table-cell;
+  overflow: hidden;
+  padding: 10px 0;
+  min-height: 28px;
+  line-height: 28px;
+  font-size: 14px
+}
+
+.form .block-item textarea,
+.form .block-item input,
+.form .block-item select {
+  width: 99%;
+  background-color: #fff;
+  border: 0px none;
+  outline: none
+}
+
+.form .block-item textarea {
+  height: 50px;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  resize: none
+}
+
+.form .block-item:last-child {
+  border-bottom: 0px none
+}
+
+.circular {
+  border-radius: 320px
+}
+
+.circular.nested {
+  position: relative
+}
+
+.circular.nested .circular {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto
+}
+
+body.has-bottom-nav {
+  padding-bottom: 51px
+}
+
+.mj-bottom-nav {
+  position: fixed;
+  width: 100%;
+  height: 50px;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 999;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .mj-bottom-nav {
+    border-top-width: 1px
+  }
+}
+
+.mj-bottom-nav ul {
+  position: relative;
+  height: 100%;
+  zoom: 1
+}
+
+.mj-bottom-nav ul:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.mj-bottom-nav li {
+  display: block;
+  float: left;
+  width: 25%;
+  height: 100%
+}
+
+.mj-bottom-nav a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding-top: 8px;
+  text-align: center;
+  font-size: 10px
+}
+
+.mj-bottom-nav [class^="icon-"] {
+  display: block;
+  width: 22px;
+  height: 22px;
+  margin: auto;
+  margin-bottom: 4px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% auto
+}
+
+.mj-bottom-nav .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .icon-cart {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .icon-user {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .active a {
+  color: #ff6366
+}
+
+.mj-bottom-nav .active .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .active .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.mj-bottom-nav .active .icon-cart {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABMJJREFUeAHtWs2PFEUU7+qZHUWcxY/swesEo0j8hIs3FENCOHmYDRv+As/EgzEmaDSeTOTEwXAzWZjJ7kII2YuHvWCMAUXQNbDJEi7Augo4w7q7dE8Xv9dMLVU93duzUzU4tVQnu1WvXtV7r3793qvqqvE89zgEHAIOAYeAQ8Ah4BBwCGghwOTRwdjYl4zzjz3GSnL7pqhz3sI8bnPGzvEw/LxUr1+U56UAEY6NNcAsyx02ZZ3z/yLO95ZOnvxJzM8XFSo550dRrFAl808eYGudsWcYY9/K5iseITOy6vCaG+C9lMW3ph0v++Lc3FO7L1wIyGbFI7qZBI3vpt/A92EsFCCQrRsGAon0t4GfZHcG/i132zAQURRtCiC4513SAsILw80RGpz/ogXEad+fw4qyLAuxsY5VQg+I0Xq9Bbf63cbJyzaHQaAHBAkDmraHx92nJybmZWA2nCxpcOR5VidMePSvMghU7wkIFkV2e0QUKWHRMxCNZvNyvAVPwmoJHTFmBogXp6cb2Fhds2TenWYmEiV16Ck0aKDFW+2lrycmrtIc5KdnIICElQmTXuCRON/LMGh4BJZQK4HAwVNHfiBIevaIIAisXDnSEqUWEFsmJ68jPP5VHWzwKRzVmfUImjKE2uUVnK/+ePPmbNrr6jk0YmGWJUz69H5vZiY0DgQEW5UwcU6ZGhYEjK5HWBUaOFQ6n+YN2kBcbzT+QMJMdbUshf9bO+417vv+mSz9Wh7x8vT0KsLjSpbwQWpHYv/q2fHxhSybilmMbtsRdxQeO9v98YXu3Y/rnCevClQaA9tjHha6/ZPyPG8J3noLL+pPfC0fH6rVTin6EoQ2EByHucz3D8VyOb9WPHFie0KHFaRWaMQz9H05YVb+2b9/2IqZJ4zUBmJlZeXREgr3HN627c2EDitIbSDKU1N/USyK2SIm3xZ1m0ptIGiymPxaePiMvWUTAMJWI0BA2Fp44Hv/yQUCn7ZrQGBN3Hl+164hgbQtpRmPkE+18WubNyoV6/KEESBOR9FVJMxF8fZZofBdUK2+e2vfvq2ibdBLdXenYW1w8OAXWD0/6xCBpIE2+v0S7Tqpjqsy9rCMiZx/6o7zkb1iJ9nJF7JJ3zK21seGxsc/ydFCt3dmnrsHDjy/tVz+Afa9Y0aiMSnRZBiW6M52PYlGQoMUPHf27J1mq/U+HOBTvJKfESoL+FtdT/lj4EWw4XgeCGSHMY9Yb1JHEucer1Writ6RxUWFLjebCr2lUlHo0r17Cl1cXlbpkZGYXpifV34etJ6NjucQUBFQXEplmaNq1Wrhw2LxMCSO4oLlFWRyOsypTYXhN93Er7DElBwhTy77DkRsfKFAq8keWTHVkVhnplqtD7oBw5ScpA2CNrZqCIHJkjwhDQTqR+1tT0kO66BNyekQ3G7oOxDQM5qlvN2exxfD8/rl8YWc1LLvQFBOSNXcbszji7F5/fL4Qk5W2Xcg2okxSz9dG3Z1Cp7XL4+faUCb0XcgoKeWY0QeXwzP65fHF3JSy74DQUskrQ5p2uNVA/w0XrLNlJykXEEXRKVfZX12lr++Y8f3r/r+EnS8gFgehhtfRv0ols6Pulk6yTZTckiWexwCDgGHgEPAIaCHwAMJYdPtuf90jwAAAABJRU5ErkJggg==")
+}
+
+.mj-bottom-nav .active .icon-user {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABLNJREFUeAHtW0toE1EUnZekrfVT1IVWqS1CiwvFLir4wUItCEI3Wp02deVOcFEUVyJCFn5WRdCFC0FQEZtEW0EFF4IFPxutohZ1UXGhbaB+UCm2zWee545BsFhyZ3JnGHEehCaZM+fce3Lnzbw7U8MIR+hA6EDoQOhA6ADXAcUFSuAShhE5appbjEhkp6FUCzhXIoCVxK0NYxx/xg2thw3LunEinX6UMAyLtvkxfDHiXVvbvLoVK3ohdhhJLWMmNgFz+j5kMmdWDw1NM/dxDfPciHxX125UwGlUwCpXUWr9HhVyKJZKXXe1P3OnCBPnBqZy8fgJIxq95toEUiUDwWFz4ZObQDj7eEWs8vH4VSTRzQmCjdE6Gevv7wEeR43s8KQi8OsdFzeB8oaxNresBzabeEXYcwIdDl6OQmGP9JwhWhF0drAnRi9NIG5MvraWoI6oEXSKtCc3wQD/SoUJ1Nb660Z3X4oZkcDvhOOMrhN8GaSVgKaUmNgckTPNrSoWuy8VGIdH5/OtFen0Aw62FEbMUfuyuZSa9Ha6VBcackb8WjsIhcWkEdSUM6K4eGKmIAWzF2wSZGJGYLIRC4qbmKSmmBHc4EVxSoldaosZUewniOZZikxrnSmF4W4XMwKC1Fjxe4hpyhlBnSW/h6CmnBFor/ntA7X0pDTFjKAeI4KakAqMwTNR1GRAS0PEjEig0Uo9xtKSMgjSIk0ZNsFFCwVEjVZ0od9LBTcnDzRsrTkBzjeIVQRJ291mNFqdh+FwD2hId7ZFjaB0qHOE8/tJh6mx4cQt3Z0icbFl+KxMwuZt0RBN3WbJyrArwaMOtpcV8btA/pUbPF4dGr+NoDfhLb8/7DCMBE7XQb0JPCvU8GPoQOjALwc8nSwnTHPhkmh0I9YFa5XW9bj504BXPd7TMxLVeF+NS/L5xR9jGp9n8Hka+M/4bkwpNYbT5pil9Rt893heMvm2iBX/I2rEvba2WOvy5TuQUAcC3wzydXgfFYta6y/gfYLXnVw2279gYECsQyViRLa7uxlE+1QkshdJc5+IKdcfFIq+p5W6/DCTubJtaChfDmFZRvzo7KyrrKzsw6/eVU4Q5e4LQ16jSdNbkUrddcvlygg6BLbW1h7GMXwMwgvcikvvB0MGpwuF/YvS6Y9OuR0b8aSlpaK5qSkJE3Y5FfMDj/nj5dTkZHvNzZufnOg5MqJYCWRCpxMRv7GojBdTMzPtNYODdPZhDUf9iNba2otBN4GyRozrq6uqbiUcdODYFYGHw3ZBYYBlb0BAlmUdqEwmz3HCYVcETlOnOIRBwkSUOpIyTdZ1DMuIXE9PO0pnTZCSZMWCR4w6o9EdHCzLCBB1cMiCiEElb+fExTNC6y0cskBitN7EiYtlBGbhBg5ZEDE4pFnPgLOMQIJLgpgkKyallnJwXCO+c8gCidH6KyculhG4UhvhkAURg8nyKSculhFoltzmkAURowqF85y4WEY8Hx09i8XMKw5hkDCo5Du4Pch6hoJlxIbh4ZyVze4G8bMgJVoilvT3b9/Y/y/CXmuQqL0Eb2w8iDWHiVNqE75aXCIYvzd/RuWOaMu6gDXGJb/FQ73QgdCB0IHQgf/FgZ+UQn2ZrGr7bgAAAABJRU5ErkJggg==")
+}
+
+.tag {
+  display: inline-block;
+  background-color: transparent;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  text-align: center;
+  margin: 0;
+  color: #999;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 4px
+}
+
+.tag-big {
+  font-size: 14px;
+  line-height: 18px
+}
+
+.tag.tag-green {
+  color: #06bf04;
+  border-color: #0c3
+}
+
+.tag.tag-orange {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-orangef60 {
+  color: #f60;
+  border-color: #f60
+}
+
+.tag.tag-white {
+  color: #333;
+  border-color: #bbb
+}
+
+.tag.tag-blue {
+  color: #38f;
+  border-color: #38f
+}
+
+.tag.tag-red {
+  color: #ed5050;
+  border-color: #ed5050
+}
+
+.tag.tag-pink {
+  color: #ee614b;
+  border-color: #ee614b
+}
+
+.tag.disabled {
+  background-color: #ddd !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  color: #fff !important
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.wrapper-form .form-item {
+  position: relative;
+  margin-top: 10px
+}
+
+.wrapper-form .form-item label {
+  position: absolute;
+  top: 1px;
+  left: 10px;
+  line-height: 45px;
+  z-index: 1;
+  color: #666
+}
+
+.wrapper-form .form-item textarea,
+.wrapper-form .form-item input {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  line-height: 18px;
+  padding: 12px 10px 12px 68px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 14px;
+  outline: none;
+  opacity: 1;
+  -webkit-appearance: none
+}
+
+.wrapper-form .form-item input[disabled='disabled'] {
+  background: #f8f8f8
+}
+
+.wrapper-form .form-item:first-child {
+  margin-top: 0
+}
+
+.btn-1-1,
+.btn-2-1,
+.btn-3-1 {
+  display: inline-block;
+  padding: 0 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn,
+.btn-2-1 .tag,
+.btn-2-1 .btn,
+.btn-3-1 .tag,
+.btn-3-1 .btn {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-1-1 {
+  width: 100%;
+  padding-left: 0
+}
+
+.btn-1-1 .tag,
+.btn-1-1 .btn {
+  width: 50% !important
+}
+
+.btn-2-1 {
+  width: 49.5%
+}
+
+.btn-3-1 {
+  width: 33.3%
+}
+
+.action-container {
+  padding: 0 10px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 0
+}
+
+.action-container>div {
+  margin-bottom: 0
+}
+
+.action-container>div:last-child {
+  margin-bottom: 0
+}
+
+.action-container>button,
+.action-container>.btn {
+  margin-bottom: 10px
+}
+
+.action-container>button:last-child,
+.action-container>.btn:last-child {
+  margin-bottom: 0
+}
+
+.popout-box .header {
+  position: relative;
+  margin-bottom: 10px;
+  -webkit-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  -moz-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .popout-box .header {
+    border-bottom-width: 1px
+  }
+}
+
+.popout-box .header h2 {
+  margin-bottom: 16px;
+  line-height: 16px;
+  font-size: 16px
+}
+
+.popout-box .action-container {
+  margin: 10px 0 0 0;
+  padding: 0
+}
+
+.popout-box .action-container .btn.btn-block {
+  font-size: 14px
+}
+
+.popout-login .wrapper-form {
+  padding-top: 10px
+}
+
+.popout-login .wrapper-form .verify-image {
+  position: absolute;
+  right: 0px;
+  top: 7px;
+  width: 80px;
+  height: 30px
+}
+
+.popout-login .wrapper-form .btn-auth-code {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 80px;
+  padding: 15px 4px;
+  border-radius: 5px
+}
+
+.popout-login .wrapper-form .txt-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0
+}
+
+.popout-login .wrapper-form .txt-cover-half {
+  right: 90px
+}
+
+.popout-login .wrapper-form .error {
+  margin-top: 10px;
+  word-break: break-word
+}
+
+.popout-login .bottom-tips {
+  padding-top: 16px;
+  font-size: 0
+}
+
+.popout-login .bottom-tips .inline-item {
+  padding: 0 10px;
+  border-right: 1px solid #e5e5e5;
+  font-size: 12px
+}
+
+.popout-login .bottom-tips .inline-item:last-child {
+  padding-right: 0px;
+  border-right: 0px none
+}
+
+.user-infos {
+  position: relative;
+  height: 90px;
+  padding: 15px 0 15px 15px;
+  margin-bottom: 0;
+  background-color: #FC5050;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.user-infos .avatar {
+  width: 60px;
+  height: 60px;
+  margin-right: 16px
+}
+
+.user-infos .avatar .img {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover
+}
+
+.user-infos .desc {
+  padding-top: 14px;
+  line-height: 20px;
+  color: #fff
+}
+
+.user-infos .desc a {
+  color: #fff
+}
+
+.user-infos .icon-right {
+  position: relative;
+  padding-right: 24px
+}
+
+.user-infos .icon-right:after {
+  position: absolute;
+  display: block;
+  content: ' ';
+  width: 10px;
+  height: 10px;
+  top: 5px;
+  right: 0;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAKdJREFUOBG11EkKg0AUhGFvETQOkE22uT8EvUTmwZuk81enVy7zyoKiV348aX1V5U5KaUdH2lpsoIkqTxpHQXr6oorQLjypkIJxZNyCtmAPiUQTW9At0F0iedPe8foN0E0isaE12DWTP3RwTCr0UtCZ04IegD4FHUNTgmzouWAz5/8T8vBqWOyWF5NZsdifspjMgp1Alfi2ATlmyrgP94BasvHlypf/BVBXOkBd6HAIAAAAAElFTkSuQmCC");
+  background-size: 100% auto
+}
+
+.order-related .other-shop {
+  font-size: 12px
+}
+
+.order-related .other-shop a {
+  color: #07d
+}
+
+.order-related {
+  margin-bottom: 12px
+}
+
+.order-related .uc-order {
+  width: 100%;
+  padding: 10px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: #fff
+}
+
+.order-related .uc-order p {
+  line-height: 20px
+}
+
+.order-related .uc-order.list-horizon {
+  padding: 10px 0
+}
+
+.order-related .uc-order.list-horizon>li {
+  display: inline-block;
+  width: 20%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  float: left
+}
+
+.order-related .uc-order.list-horizon .link {
+  display: block;
+  padding: 42px 0 10px;
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  background-position: center 12px
+}
+
+.order-related .uc-order.list-horizon .title-num {
+  position: absolute;
+  left: 50%;
+  top: 2px;
+  height: 16px;
+  line-height: 16px;
+  padding: 0 5px;
+  margin-left: 1px;
+  border-radius: 10px;
+  border: 2px solid #fff;
+  font-size: 10px;
+  color: #fff;
+  background-color: #f76161
+}
+
+.order-related .uc-order.list-horizon .link-topay {
+  background-image: url("https://b.yzcdn.cn/v2/image/wap/uc/order_list/icon_topay@2x.png")
+}
+
+.order-related .uc-order.list-horizon .link-totuan {
+  background-image: url("https://b.yzcdn.cn/v2/image/wap/uc/order_list/icon_daijiedan@2x.png")
+}
+
+.order-related .uc-order.list-horizon .link-tosend {
+  background-image: url("https://b.yzcdn.cn/v2/image/wap/uc/order_list/icon_tosend@2x.png")
+}
+
+.order-related .uc-order.list-horizon .link-send {
+  background-image: url("https://b.yzcdn.cn/v2/image/wap/uc/order_list/icon_send@2x.png")
+}
+
+.order-related .uc-order.list-horizon .link-sign {
+  background-image: url("https://b.yzcdn.cn/v2/image/wap/uc/order_list/icon_sign@2x.png")
+}
+
+.order-related .uc-order.list-horizon .link-rights {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAB6xJREFUaAXVmXls1EUUx3sf1AoeHK0RbURMQU5PjkCkGrDVEknUYIhBTDhaoBCrhVAQARWSmlKhFPijIQZpqBGtSCVgURIKoglWRIh41CO0WCIi1Zbefr6//Gazbbd79XCZZPbNvHnz5l3zZnZ+QUHXeQnuCfmXLFkS2dDQMDE4OHga/MZSB6m2tbUJhoGvBV6mf572OdoH4+Lijq5du7aZdreK3wqweEh1dfWTCJWGBFOoUT5KcgVlDjC/JD4+vgR+jT7Ot8h9VoCFoqqqql5k9jLqMHFBkFYEqQAeAZaHhIRUga5pbW2tCQsLCwEf39LSEk8/nnYiNKmMj9Zcu1QCs3fs2FHEeJtBegN9UiAtLW0ighQiwD02858QdnN0dPSe3Nzcy94saGgWL16c0NjYOJP+POooG38qNDQ0q6Cg4FND5wl6pcDy5cuj6+rq3oDZUoSXRc9Q1wwZMkSub/W0iLtxOxTnwHc9dENFC+8c9kiWN7w9KrBo0aKbcL1idQKMm4FvErMbYO5XzHaljBJBU1NTBmtJkQjWKo2IiJi9ZcuWq13NEd6tAvPnz4+D0SGEvhfaSuJ51rZt2yrcMezuGGtOhsc+6kDqOUI0efv27b/QdllCXGJBZmRkDAaUS3iUOIM1Jve28JJl586dx8LDwx+geZqaiEdK8c6NGnNVXCpAeITV19fvZUIC9SRWmLJ161Zllj4p+fn5v+LtSSxmKcFmL9JecbW4SyRpciPEU7H8BYRPJSv85Wpyb+Lw9j94IpU1LhEFyZw5m1yt12kPsGkfJ1WWQtyEAlPJzSdcTewrnL0nylgvghT7WMcU284DxcXFocRcji3cyv9beMmhPYEh16iNYTfhjXZGD9OAKWVlZXMhGEH/R+rbBu8tXLBgwQFo+7PhnyL9XXKex0YcSCx/AO5vDJPiPOapDb/N3LV0ZRnPGrOBe8wchwfYJLrLvKYB4n4VmjcZIh9gfwwwicU+k8BmntrCaQxcf4P3FmKMBryw2qbXGRRh5joUYJMks8BtDFQQZ+8ZAl+gLA/9d9SRRgkjvHAas2lo+lY4mXcz41tqAklGVxCrOBSg96wwWP8dtPXpQmVx4kdhExkZ+QhNhxJShL4lvMY6hpaZ6wlidV1ZCkWHfO0VyMzMjMH6TzAmwYtF5G/pqAR8ui28kQXvlaiNrCkoZO1fywO1tbUPg++HZsc4ti+YCf5CKYEnp8GvXLU7lneWgcO0kr4OtwGE/FSNWVqg2VdkiBzy7LtC9kTBEDXw0b3G72JntcFYPJ2kctJmtB84mjqdWmYpgMWu0nmZ6nPRIiyQ7PNEewIeKnWTVvvB+z5IyznQ3sKTa9hTZzUV/AhB502sfp8XBNG+c1mIjBkoaK4QryD81/RvFzFwuAVdzuwhJFazhMP97U5PX9kvXLjwQW4Iu5iXaOaiwJ947lbLAyz0OaFQIUJDEEiQ/fQl4TPO9kaLZMNxsYImhCaAGIOWx1FkI4dPpAYDqbBPG7D4CrKbnm++oR6XfNYmplOLArfQDwVmEWupeGOuNA8kJSSLLZPenqxiPHBZPRRZAdDDk/4JBaw3JKsplgew+nkQdwN/V6zhgXX0X5I3OB8eoq3rQZfFUyo1m9mZAcZylz6dSd22TQidQ9gUmCYq1piRxaL76OeD/9ctBz8H4dtl+nTHEmPdz/gL7IVs/VO0FABxkJoJT/2Fs66t9sknYo+lq4PIWL67adRZAGTMpT+ZEP8QeNjaA3popXOFOlovZsCALCQWXff1n6IuNjbWykKWAtzsmgmXA5KamHdcVdUPsPIM8iBq8Mc5OTlWaJsspIPBuqpCMA+FHPhAUQD5ggmb52159hq5HILqiRtkJXUUV9U5hiBQIK8lTyPLWKx/gZDXq4lVHApgdb11ZguLtusD6TQmGYRj/dctiYOCXkXWa3bbcZWw+mSTIhqnqEP10GqI/IVYS5ay9pa/POx5S4HD4Hc2KSlplzOvTrdEXPUo7y+HIZJHkkiBx5wn9HWbvK97mrJkOH+4ksn9nzjL4Aghg9TLF5rqcSuCui89Pf0OM9bXkLQ5iDX1QhIumToKL3k6KSCkPi7Y7h/Y3NxcwpeZG4Tvy8JHlZux/H6qcv9RZFrpav1OIWSI2MQ3cif6gr7+RJzWQ6tejc14b0IO03jOo0OsMRJD/hwVFTUxLy/vD1drdqmAiHHhnex+bUQpcYk6q7f3BGuOY833WSuBqoes6axZDXRZ3CqgGfIE1ijClfrj3sglajXeyLMvfS6Z+oMkNUbw4paNxVeylr4tn2CtFF3Y3PHzqIAmw1zfhPUynGkz+40FVhOXuxnTi5nfRbwvXrw4E97rqPoapE+2eTExMav48lnvibFXChgmdordRH+8jZOLC/ViZj86GVKPUJuUr0DPES7LIL5LExD+e1LlPD5uWBc1j0w0xxsiZxqsE0xu1hP3BmqC09hpBPiIcX2Yq0KQKtpVZLFW+kqHgxBWH7p1m0yijmHcyoLgfqC/GY8W4hHHKQvOY/FZAcORhRSzM1lc7k8BP8CMeQmvMfcotAUIvh9+foWi3wo4C8niYfZb5QyUSUSw4Ywrj+vpQ1f1GqCpFeCP8Nf1eE8nAmeZrpv2f1hra3Tnv1pQAAAAAElFTkSuQmCC")
+}
+
+.order-related .uc-order.list-horizon .title-info {
+  text-align: center;
+  line-height: 20px
+}
+
+.order-related .block.block-list.list-vertical>a.link {
+  padding-left: 38px;
+  padding-right: 28px
+}
+
+.order-related .block.block-list.list-vertical>a.link::before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 5px;
+  width: 26px;
+  height: 26px;
+  background-image: url("https://img.yzcdn.cn/public_files/2016/10/20/e43d97b09839ed5ed872d5c5e6bc9400.png");
+  background-repeat: no-repeat;
+  background-size: 18px 364px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .order-related .block.block-list.list-vertical>a.link::before {
+    background-image: url("https://img.yzcdn.cn/public_files/2016/10/20/e43d97b09839ed5ed872d5c5e6bc9400.png")
+  }
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-order::before {
+  background-position: 4px 3px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-favior::before {
+  background-position: 4px -25px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-shop::before {
+  background-position: 4px -52px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-bought::before {
+  background-position: 4px -80px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-history::before {
+  background-position: 4px -108px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-coupon::before {
+  background-position: 4px -136px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-luckymoney::before {
+  background-position: 4px -164px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-backs::before {
+  background-position: 4px -192px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-ecard::before {
+  background-position: 4px -220px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-setting::before {
+  background-position: 4px -248px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-help::before {
+  background-position: 4px -305px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-join::before {
+  background-position: 4px -278px
+}
+
+.order-related .block.block-list.list-vertical>a.link.ico-card::before {
+  background-position: 4px -334px
+}
+
+.order-related .block.block-list.list-vertical>a.link p::after {
+  content: '';
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-top: 2px solid #cbc9cc;
+  border-right: 2px solid #cbc9cc;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: 16px;
+  right: 12px
+}
+
+.order-related .block.block-list.list-vertical>a.link .present-num {
+  float: right;
+  color: #f60;
+  font-size: 13px
+}
+
+.setting .block.block-list>a.link {
+  padding-left: 0;
+  padding-right: 28px
+}
+
+.setting .block.block-list>a.link p::after {
+  content: '';
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-top: 2px solid #cbc9cc;
+  border-right: 2px solid #cbc9cc;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: 50%;
+  margin-top: -4px;
+  right: 12px
+}
+
+.addresses .block.block-list>a.link {
+  padding-left: 28px;
+  padding-right: 28px
+}
+
+.addresses .block-item.default:before {
+  content: ' ';
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  background: url("/v2/image/wap/icon_check_circle_checked@2x.png") center center no-repeat;
+  background-size: 100% auto
+}
diff --git a/src/pages/member/member.html b/src/pages/member/member.html
new file mode 100644
index 0000000..ca2be7f
--- /dev/null
+++ b/src/pages/member/member.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html class="" lang="zh-cmn-Hans">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="keywords" content="有赞,移动电商服务平台">
+  <meta name="description" content="">
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="format-detection" content="telephone=no">
+  <meta http-equiv="cleartype" content="on">
+  <meta name="referrer" content="always">
+  <link rel="shortcut icon" href="https://b.yzcdn.cn/v2/image/yz_fc.ico">
+  <title>我</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <!-- <link rel="stylesheet" href="./css/member_base.css"> -->
+  <!-- <link rel="stylesheet" href="./css/member.css"> -->
+</head>
+
+<body class=" ">
+  <div class="container " style="min-height: 581px;">
+    <div class="content">
+      <div class="user-infos">
+        <div class="pull-left avatar">
+          <div class="img" style="background-image: url(https://img.yzcdn.cn/upload_files/no_pic.png?imageView2/2/w/280/h/280/q/75/format/webp);"></div>
+        </div>
+        <div class="pull-left desc">
+          <p>tonyfree</p>
+        </div>
+      </div>
+      <div class="order-related">
+        <ul class="uc-order list-horizon clearfix js-order-overview">
+          <li>
+            <a class="link clearfix relative link-topay" data-for="topay" href="https://h5.youzan.com/v2/trade/record/alllist?type=topay" target="_blank">
+              <p class="title-info c-black font-size-12">待付款</p>
+            </a>
+          </li>
+          <li>
+            <a class="link clearfix relative link-totuan" data-for="totuan" href="https://h5.youzan.com/v2/trade/record/alllist?type=totuan" target="_blank">
+              <p class="title-info c-black font-size-12">待接单</p>
+            </a>
+          </li>
+          <li>
+            <a class="link clearfix relative link-tosend" data-for="tosend" href="https://h5.youzan.com/v2/trade/record/alllist?type=tosend" target="_blank">
+              <p class="title-info c-black font-size-12">待发货</p>
+            </a>
+          </li>
+          <li>
+            <a class="link clearfix relative link-send" data-for="send" href="https://h5.youzan.com/v2/trade/record/alllist?type=send" target="_blank">
+              <p class="title-info c-black font-size-12">待收货</p>
+            </a>
+          </li>
+          <li>
+            <a class="link clearfix relative link-rights" href="https://h5.youzan.com/v2/trade/record/rightsOrder" target="_blank">
+              <p class="title-info c-black font-size-12">退款/维权</p>
+            </a>
+          </li>
+        </ul>
+        <div class="block block-list list-vertical">
+          <a class="block-item link clearfix ico-order" href="https://h5.youzan.com/v2/trade/record/alllist?type=all" target="_blank">
+            <p class="title-info c-black font-size-14">全部订单</p>
+          </a>
+        </div>
+        <div class="block block-list list-vertical">
+          <a class="block-item link clearfix ico-favior js-login" href="https://maijia.youzan.com/mars/collect/goods" target="_blank">
+            <p class="title-info c-black font-size-14">收藏的商品</p>
+          </a>
+          <a class="block-item link clearfix ico-shop js-login" href="https://maijia.youzan.com/mars/collect/shop" target="_blank">
+            <p class="title-info c-black font-size-14">收藏的店铺</p>
+          </a>
+          <a class="block-item link clearfix ico-bought js-login" href="https://maijia.youzan.com/mars/record/bought" target="_blank">
+            <p class="title-info c-black font-size-14">我买过的</p>
+          </a>
+          <a class="block-item link clearfix ico-history js-login" href="https://maijia.youzan.com/mars/record/goodsbrowse" target="_blank">
+            <p class="title-info c-black font-size-14">我的浏览记录</p>
+          </a>
+        </div>
+        <div class="block block-list list-vertical">
+          <a class="block-item link clearfix ico-card" href="https://maijia.youzan.com/mars/record/MemberCard" target="_blank">
+            <p class="title-info c-black font-size-14">我的会员卡</p>
+          </a>
+          <a class="block-item link clearfix ico-coupon" href="https://h5.youzan.com/v2/ump/promocard/crosssite?empty_redirect=yzapp" target="_blank">
+            <p class="title-info c-black font-size-14">我的优惠券</p>
+          </a>
+          <a class="block-item link clearfix ico-luckymoney hide" href="https://h5.youzan.com/v2/trade/record/luckymoney?f_platform=yzapp" target="_blank">
+            <p class="title-info c-black font-size-14">我的红包</p>
+          </a>
+          <a class="block-item link clearfix ico-backs" href="https://h5.youzan.com/v2/trade/record/backs?f_platform=yzapp" target="_blank">
+            <p class="title-info c-black font-size-14">我的返现</p>
+          </a>
+        </div>
+        <div class="block block-list list-vertical">
+          <a class="block-item link clearfix ico-setting js-login" href="https://h5.youzan.com/v2/buyer/member/setting" target="_blank">
+            <p class="title-info c-black font-size-14">个人设置</p>
+          </a>
+          <a class="block-item link clearfix ico-help" href="http://bbs.youzan.com/home.php?mod=space&amp;do=thread&amp;view=me&amp;order=lastpost&amp;mobile=2&amp;fid=85&amp;filter=common&amp;in_app_type=weixin" target="_blank">
+            <p class="title-info c-black font-size-14">联系有赞客服</p>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="footer" style="min-height: 86px;">
+    <div class="copyright">
+      <div class="ft-copyright ">
+        <a href="https://www.youzan.com/?from_source=support_logo">有赞提供技术支持</a> </div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/src/pages/member/member.js b/src/pages/member/member.js
new file mode 100644
index 0000000..78e860a
--- /dev/null
+++ b/src/pages/member/member.js
@@ -0,0 +1,2 @@
+import './member_base.css'
+import './member.css'
\ No newline at end of file
diff --git a/src/pages/member/member_base.css b/src/pages/member/member_base.css
new file mode 100644
index 0000000..50fce7a
--- /dev/null
+++ b/src/pages/member/member_base.css
@@ -0,0 +1,1161 @@
+* {
+  -webkit-tap-highlight-color: transparent
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline
+}
+
+html {
+  line-height: 1
+}
+
+ol,
+ul {
+  list-style: none
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0
+}
+
+caption,
+th,
+td {
+  font-weight: normal;
+  vertical-align: middle
+}
+
+q,
+blockquote {
+  quotes: none
+}
+
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: "";
+  content: none
+}
+
+a img {
+  border: none
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+  display: block
+}
+
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  font-family: Arial, Helvetica, "STHeiti STXihei", "Microsoft YaHei", Tohoma
+}
+
+body {
+  color: #333;
+  background-color: #f8f8f8;
+  -webkit-backface-visibility: hidden
+}
+
+body.body-fixed-bottom {
+  padding-bottom: 50px
+}
+
+.container {
+  background-color: #f8f8f8
+}
+
+strong {
+  font-weight: bold
+}
+
+a {
+  color: #333;
+  background: transparent;
+  text-decoration: none
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0
+}
+
+h2 {
+  font-size: 18px;
+  line-height: 22px
+}
+
+h3 {
+  font-size: 15px;
+  line-height: 18px
+}
+
+button,
+[type='number'],
+[type='text'],
+[type='password'],
+[type='email'],
+[type='search'],
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  margin: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none
+}
+
+div,
+span,
+li,
+dt,
+dd {
+  cursor: pointer
+}
+
+.c-orange {
+  color: #f60 !important
+}
+
+.c-orange-dark {
+  color: #f15a0c !important
+}
+
+.c-green {
+  color: #06bf04 !important
+}
+
+.c-wx-green {
+  color: #4b0 !important
+}
+
+.c-red {
+  color: #ed5050 !important
+}
+
+.c-pink {
+  color: #ee614b !important
+}
+
+.c-white {
+  color: #fff !important
+}
+
+.c-gray-light {
+  color: #e5e5e5 !important
+}
+
+.c-gray {
+  color: #c9c9c9 !important
+}
+
+.c-gray-dark {
+  color: #999 !important
+}
+
+.c-gray-darker {
+  color: #666 !important
+}
+
+.c-black {
+  color: #333 !important
+}
+
+.c-yellow {
+  color: #f09000 !important
+}
+
+.c-light-yellow {
+  color: #fcff00 !important
+}
+
+.c-blue {
+  color: #38f !important
+}
+
+hr {
+  margin: 10px 0;
+  border: 0;
+  -webkit-border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  -moz-border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  hr {
+    border-top-width: 1px
+  }
+}
+
+hr.margin-0 {
+  margin: 0
+}
+
+hr.left-10 {
+  margin-left: 10px
+}
+
+.relative {
+  position: relative
+}
+
+.font-size-12 {
+  font-size: 12px !important
+}
+
+.font-size-14 {
+  font-size: 14px !important
+}
+
+.font-size-16 {
+  font-size: 16px !important
+}
+
+.font-size-18 {
+  font-size: 18px !important
+}
+
+.font-size-20 {
+  font-size: 20px !important
+}
+
+.font-size-22 {
+  font-size: 22px !important
+}
+
+.font-size-24 {
+  font-size: 24px !important
+}
+
+.font-size-26 {
+  font-size: 26px !important
+}
+
+.font-size-28 {
+  font-size: 28px !important
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.border-bottom-none {
+  border-bottom: 0 !important
+}
+
+.border-top-none {
+  border-top: 0 !important
+}
+
+.link {
+  color: #07d
+}
+
+.link:link,
+.link:hover,
+.link:visited,
+.link:active {
+  color: #07d
+}
+
+.clearfix {
+  zoom: 1
+}
+
+.clearfix:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.pull-left {
+  float: left
+}
+
+.pull-right {
+  float: right
+}
+
+.show {
+  display: block
+}
+
+.hide {
+  display: none !important;
+  visibility: hidden
+}
+
+.center,
+.text-center {
+  text-align: center
+}
+
+.text-left {
+  text-align: left
+}
+
+.text-right {
+  text-align: right
+}
+
+.loading {
+  background-image: url("/v2/image/loader.gif") !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+  background-size: 16px 16px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .loading {
+    background-image: url("/v2/image/loader@2x.gif") !important
+  }
+}
+
+.with-bs-top,
+.with-bs-bottom {
+  background: url("/v2/image/wap/bottom_line.png") left top no-repeat;
+  background-size: 100% 1px
+}
+
+.with-bs-bottom {
+  background-position: left bottom
+}
+
+.arrow-right::after {
+  content: '';
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-top: 2px solid #cbc9cc;
+  border-right: 2px solid #cbc9cc;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: 50%;
+  right: 3px;
+  margin-top: -5px
+}
+
+.wrapper {
+  width: 320px;
+  margin: 0 auto
+}
+
+.content {
+  margin: 0 auto
+}
+
+.container .content {
+  zoom: 1
+}
+
+.container .content:after {
+  content: '';
+  display: table;
+  clear: both
+}
+
+.copyright {
+  background-color: #f8f8f8;
+  color: #999;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center
+}
+
+.copyright .ft-links {
+  padding: 15px
+}
+
+.copyright .ft-links>a {
+  margin: 0 6px;
+  color: #333
+}
+
+.copyright .ft-links ~ .ft-copyright {
+  -webkit-border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  -moz-border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .copyright .ft-links ~ .ft-copyright {
+    border-top-width: 1px
+  }
+}
+
+.copyright .ft-copyright {
+  padding: 50px 0 20px;
+  margin: 0 15px;
+  font-size: 12px;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUoAAABaCAMAAADpVu8YAAAAilBMVEUAAADAwMS/v8PBwcTHx8jx8f/AwMTAwMbAwMfAwMTOzs/AwMTAwMTBwcTCwsbAwMTAwMTBwcXAwMS/v8TAwMTBwcTAwMTAwMTBwcbExMnBwcXAwMTAwMTAwMPCwsfAwMTAwMTAwMTAwMTAwMTAwMTAwMXAwMTOztDAwMTBwcTCwsXAwMTBwcW/v8NHotAJAAAALXRSTlMA+8lLFwKjLx/hC9aCk0fysX2H56mWxkQ6ElaLZd0m7JzPv3ZvXrYG9480rj/OuHTBAAAE7ElEQVR42uzY23KqMBiG4S9KVLAuVGApCm5Q1Gq/+7+9xSYuWwpKx56YyXPCP2OO3kmMAsMwDMMwDMMwDMMwDMMwDMMwDL3s45MdDGA8LWJubVo+b8vCAcaTpGDpDOM5AyoR2ptEf1ay5dIgeEdVNwiCFXTTpbL/WX4R4oGw6G2T/FR9lc4GwDvJLnSzo5KitZRkB4/sSVrVlD0y1jVlj0oXrfkkp3hAxmSCSkrrRE51TTmkMkdbR7fN8pSkfbkIkodLxkdmRHI7HtvFI7eENhxBZYW2FnkkifvCNSsAnAUrttDGjFcW2jq0ON/ywCogHFLjlBNeSTSYdyoESbtTb6dK9kgxnWRcksWwg9Mh15NcNtAvphTaSKi4985zextkyv23BPDl2ul75AKAntfO0aUS/2pKHKfJsZoSYW8EbVPOeNX53ZTKLaWib8oRrw5oIq3PIpLibDVxUOjPrtZ5tXK0ulfFxaXmGfRgV1I+JLdq692XsMaOtY7QQZ//ra2i1GC+mAR+0EeDYlMOTMpv3nnjBZskFiyJOWo5XqtNCd/LrEkKzxMkXS+T2pk1M175sHOxhAYcl03GqLUsMg/qSFQNyuz+l7+Z3bwkMM/7Qh8RG3VQZy7YqI+KIldQTRmR3GqXUg7ZKEENJ+ZPUr6R3F1TWqkfIhOQ7N1SWistznfKZiPU2PAnKaVN8qNM6f8VxYzwRHJxSzmle8HLCz0229/5rR6Pq7y6lHv1AsmnEgHyQnIoVcrywyFenTzwjgW+6Rc3Msk3VPVqUi4EyRTYCeZEZ7rCMV94OqNMyZ3zcSITvLijz3siVA1sZpKWKZ2lIOmrb4U4WISA7A5JujOolMoGr+1f+3bYpRoQx3H8R1GopqTuEkpU1vF//2/vYu8mkp3u8WDnmM8j1Tk9+B5mpokwoF5PA5hrVSUPfCk3x+pLbuWh489RmZRvXr9ehHTnQ1TTyWa9wYr6WWgy91TYTm2+lJlKxBK03LzP7B7b2FaMTzGncC25bqmwfDeleaWCkldrdJvjAtd820U46TeDuE5U4Eq5xiN3X5X0gEN10Na9rsSC+ukQV8qdMsaD0LovkGzqMsKUxJ0yRO3CqKAkkCn/I6WBWkal1LvvZzCrLe1JqXQbTUr16WfLByqci6E6ZYRup7GkjNBsqbv4Yr+bUkW33VhSHtEwAwZIGTuOE48uJWloGCKly4joc3QpmYbX2+gHs83hSWlT4WN0Ka94waZOHClzhYii8Y2Vq8FT5owK+ehSGhg6pZdSs91F13Vx94T4U1pAz1i53bex7pRxmqZXFKY6lSITEHMfaNizkn8Gb3M3jErWFFgy9ZTkJoTHmzIYMGW4ZFQ5u0BMFcU6XQR/fI03pT5UyjCO6Itia8CMUS1YTgS+x4UzZTDHKwf+lHNvF9C3KENJC72DqtA35ghb8+eUiuXEqxveS2ka7ZSrxdqgWnDRUHMnu/rDoy3mld6bku13fmaixJ3SVUtHaqfU6cHZ09CW2UE9x4noVUpjvfBCDTXelDDo2xwPpoz+sRYhun3sGJU8iOg5pRLpSe6ihT/l6cVNRgkV2DWZoYfpR8L+Dd5IeTwfLrMb3uOrqnpBbaVW9ksXDZqz82cafpTrgq4xA6ooC8wnYo72v8af4Hhe+pmgJ4IkSZIkSZIkSZIkSZIkSZIkSUP6C1RC724Kv/DFAAAAAElFTkSuQmCC") no-repeat center 17px;
+  background-size: 110px 30px
+}
+
+.copyright .ft-copyright>a {
+  padding-top: 45px;
+  color: #bfbfc3
+}
+
+.copyright .ft-copyright .yz-logo {
+  padding-left: 14px;
+  position: relative
+}
+
+.copyright .ft-copyright .yz-logo::before {
+  content: '';
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAkCAMAAACpD3pbAAAAb1BMVEUAAADLy8vKysrLy8vLy8vLy8vLy8vLy8vMzMzOzs7Ly8vLy8vMzMzQ0NDLy8vLy8vLy8vLy8vLy8vMzMzOzs7Pz8/S0tLLy8vKysrLy8vKysrLy8vLy8vLy8vMzMzNzc3Nzc3R0dHLy8vMzMzKysrwyZpuAAAAJHRSTlMAoqm+ZfvtjEA4z65xCebgxJmGUjMdGPPm2tW0p5OQSSkQdl8nEAN1AAAAwUlEQVQ4y6XQyRaDIAyF4bQgivNsnbXN+z9jj7CoUsLGf/udLHLhWj2kTAJZj4jeRmmDRxPFgeKQYq54oHhWzCjOFUeEJp3iguAaVSXBseaYYKb5Y9fdO18nm2yNr3XCX6JQHPPyM4do9jIWpTkxjo39fIMuAyWlRfW8TbXCA21lIJlAfMDTygIyRJpzQBe/3SzdXLu5usNe6+QRnOzf4sDFKQc7i7yI1wbgj1M286CFX57mKRt9LncwW7o+KgMg+gJYeFH82wegJQAAAABJRU5ErkJggg==) no-repeat;
+  background-size: 10px 12px;
+  width: 10px;
+  height: 12px;
+  position: absolute;
+  bottom: 1px;
+  left: 0
+}
+
+.copyright .pf-copyright {
+  display: block;
+  background: url("/v2/image/pf/ui/copyright.png") no-repeat center 20px;
+  background-size: 73px 24px
+}
+
+.footer {
+  margin: 0;
+  padding: 0;
+  min-height: 1px;
+  text-align: center;
+  line-height: 16px;
+  background-color: #f8f8f8
+}
+
+.footer .link-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-bottom: -3px;
+  margin-right: 10px;
+  background-image: url("data:image/png;base64,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");
+  background-repeat: no-repeat;
+  background-size: 16px
+}
+
+.footer .link-title {
+  font-size: 16px
+}
+
+.full-screen .footer {
+  margin-top: 0
+}
+
+.btn {
+  display: inline-block;
+  border-radius: 3px;
+  padding: 5px 4px;
+  text-align: center;
+  margin: 0;
+  font-size: 12px;
+  cursor: pointer;
+  line-height: 1.5;
+  -webkit-appearance: none;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+  color: #999
+}
+
+.btn-disabled,
+.btn[disabled] {
+  background-color: #c9c9c9 !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  color: #fff !important
+}
+
+.btn-disabled:active,
+.btn[disabled]:active {
+  background-color: #c9c9c9 !important;
+  background-image: none !important;
+  border: 1px solid #bcbcbc !important
+}
+
+.btn-default {
+  color: #999;
+  background-color: #fff;
+  border: 1px solid #e5e5e5
+}
+
+.btn-action-secondary {
+  color: #fff;
+  background-color: #f85;
+  border-color: #f85
+}
+
+.btn-action-primary {
+  color: #fff;
+  background-color: #f44;
+  border-color: #f44
+}
+
+.btn-blue {
+  color: #fff;
+  background-color: #38f;
+  border-color: #38f
+}
+
+.btn-gray-dark {
+  color: #333;
+  background-color: #999;
+  border-color: #999
+}
+
+.btn-green {
+  color: #fff;
+  background-color: #06bf04;
+  border-color: #03b401
+}
+
+.btn-wx-green {
+  color: #fff;
+  background-color: #4b0;
+  border-color: #4b0
+}
+
+.btn-red {
+  color: #fff;
+  background-color: #ed5050;
+  border-color: #ed5050
+}
+
+.btn-pink {
+  color: #fff;
+  background-color: #ee614b;
+  border-color: #ee614b
+}
+
+.btn-white {
+  color: #333;
+  background-color: #fff;
+  border-color: #e5e5e5
+}
+
+.btn-yellow {
+  color: #fff;
+  background-color: #f09000;
+  border-color: #f09000
+}
+
+.btn-grayeee {
+  color: #999;
+  background-color: #eee;
+  border-color: 1px solid #ebebeb
+}
+
+.btn-orange {
+  color: #fff;
+  border-color: #f60;
+  background-color: #f60
+}
+
+.btn-orange-dark {
+  color: #fff;
+  border-color: #f15a0c;
+  background-color: #f15a0c
+}
+
+.btn-block {
+  text-align: center;
+  width: 100%;
+  padding: 11px 10px;
+  font-size: 16px;
+  line-height: 16px;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.btn-xsmall {
+  padding: 8px 10px;
+  line-height: 14px;
+  width: auto;
+  font-size: 12px
+}
+
+.btn-xxsmall {
+  padding: 4px 10px;
+  line-height: 14px;
+  width: auto;
+  font-size: 12px
+}
+
+.btn-l {
+  padding: 9px 4px;
+  font-size: 14px
+}
+
+.btn-opt {
+  min-width: 50px
+}
+
+.motify {
+  display: none;
+  position: fixed;
+  top: 35%;
+  left: 50%;
+  width: 220px;
+  padding: 0;
+  margin: 0 0 0 -110px;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.5em;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
+}
+
+.motify .motify-inner {
+  padding: 10px;
+  text-align: center;
+  word-wrap: break-word
+}
+
+.motify p {
+  margin: 0 0 5px
+}
+
+.motify p:last-of-type {
+  margin-bottom: 0
+}
+
+.fullscreen-guide {
+  z-index: 2000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  text-align: center
+}
+
+.fullscreen-guide.hide {
+  display: none
+}
+
+.fullscreen-guide .guide-close {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  font-size: 40px;
+  color: #fff;
+  cursor: pointer
+}
+
+.fullscreen-guide .guide-arrow {
+  position: absolute;
+  top: 2px;
+  right: 15px;
+  background: url("/v2/image/wap/guide_arrow.png") top left no-repeat;
+  width: 47px;
+  height: 44px
+}
+
+.fullscreen-guide .guide-inner {
+  padding-top: 48px;
+  width: 320px;
+  margin: 0 auto
+}
+
+.fullscreen-guide .step {
+  width: 260px;
+  display: inline-block;
+  text-align: left;
+  margin-bottom: 15px
+}
+
+.follow-guide .guide-inner-title {
+  color: #fff;
+  border-bottom: 1px solid #666;
+  padding-bottom: 20px;
+  font-size: 18px;
+  font-weight: normal
+}
+
+.follow-guide .wxid {
+  display: inline-block;
+  text-align: left;
+  margin-bottom: 20px;
+  font-size: 18px
+}
+
+.follow-guide .wxid .hasno-mp-weixin {
+  width: 200px;
+  height: 200px;
+  margin-top: 20px;
+  background: url("/v2/image/wap/cannot_follow@2x.png") no-repeat;
+  background-size: cover
+}
+
+.follow-guide .wxid strong {
+  padding: 1px 5px;
+  background-color: #fff;
+  color: #000;
+  border-radius: 4px
+}
+
+.follow-guide .guide-text {
+  color: #fff;
+  font-size: 16px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #666
+}
+
+.follow-guide .guide-text-title {
+  color: #fff;
+  margin: 15px 0;
+  font-size: 20px
+}
+
+.follow-guide .guide-text-step {
+  text-align: left;
+  padding-left: 56px;
+  color: #fff;
+  margin-bottom: 10px;
+  font-size: 16px
+}
+
+.follow-guide .step-1,
+.follow-guide .step-2,
+.follow-guide .step-3 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none
+}
+
+.follow-guide .step-1 {
+  height: 29px
+}
+
+.follow-guide .step-2 {
+  margin-bottom: 10px;
+  height: 64px;
+  background: url("/v2/image/wap/step_2.png") no-repeat
+}
+
+.follow-guide .step-3 {
+  margin-top: 10px;
+  height: 68px;
+  background: url("/v2/image/wap/step_3.png") no-repeat
+}
+
+.follow-guide .quick-subscribe {
+  margin: 140px 15px 0;
+  padding: 10px;
+  background: #fff;
+  border: 2px solid #f2f2f2;
+  border-radius: 10px
+}
+
+.follow-guide .quick-subscribe h2 {
+  font-size: 14px;
+  border-bottom: 1px solid #f2f2f2;
+  padding-bottom: 20px;
+  margin: 12px 0
+}
+
+.follow-guide .quick-subscribe .btn {
+  font-size: 14px;
+  background: #4b0;
+  color: #fff;
+  display: inline-block;
+  line-height: 38px;
+  padding: 0 26px;
+  border-radius: 4px
+}
+
+.fuck-taobao .step-1 {
+  height: 29px;
+  background: url("/v2/image/wap/step_1.png") no-repeat
+}
+
+.fuck-taobao .step-2 {
+  height: 86px;
+  background: url("/v2/image/wap/ftios_step_2.png") no-repeat
+}
+
+.fuck-taobao .step-and-2 {
+  height: 62px;
+  background: url("/v2/image/wap/ftand_step_2.png") no-repeat
+}
+
+.fav-guide .step-1 {
+  height: 29px;
+  background: url("/v2/image/wap/step_1.png") no-repeat
+}
+
+.fav-guide .step-2 {
+  height: 86px;
+  background: url("/v2/image/wap/fav_step_2.png") no-repeat
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (-o-min-device-pixel-ratio: 3 / 2),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .fullscreen-guide .guide-arrow {
+    background-image: url("/v2/image/wap/guide_arrow@2x.png");
+    background-size: 47px 44px
+  }
+  .follow-guide .step-2 {
+    background-image: url("/v2/image/wap/step_2@2x.png");
+    background-size: 260px 64px
+  }
+  .follow-guide .step-3 {
+    background-image: url("/v2/image/wap/step_3@2x.png");
+    background-size: 260px 68px
+  }
+  .fuck-taobao .step-1 {
+    background-image: url("/v2/image/wap/step_1@2x.png");
+    background-size: 260px 29px
+  }
+  .fuck-taobao .step-2 {
+    background-image: url("/v2/image/wap/ftios_step_2@2x.png");
+    background-size: 248px 86px
+  }
+  .fuck-taobao .step-and-2 {
+    background-image: url("/v2/image/wap/ftand_step_2@2x.png");
+    background-size: 260px 62px
+  }
+  .fav-guide .step-1 {
+    background-image: url("/v2/image/wap/step_1@2x.png");
+    background-size: 260px 29px
+  }
+  .fav-guide .step-2 {
+    background-image: url("/v2/image/wap/fav_step_2@2x.png");
+    background-size: 260px 86px
+  }
+  .share-guide .step-1 {
+    background-image: url("/v2/image/wap/step_1@2x.png");
+    background-size: 260px 29px
+  }
+  .share-guide .step-2 {
+    background-image: url("/v2/image/wap/share_step_2@2x.png");
+    background-size: 260px 86px
+  }
+}
+
+a#global-cart {
+  z-index: 10
+}
+
+a#global-cart .icon-img {
+  background: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png") no-repeat;
+  background-position: -202px -4px;
+  background-size: 300px 150px
+}
+
+a#global-cart.hide {
+  display: none
+}
+
+a#global-cart.new .icon-img {
+  background-position: -250px -4px
+}
+
+.no-text a#global-cart {
+  background: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png") no-repeat;
+  background-size: 300px 150px
+}
+
+.no-text a#global-cart.s0 {
+  background-position: -200px -100px
+}
+
+.no-text a#global-cart.s1 {
+  background-position: -150px -100px
+}
+
+.no-text a#global-cart.s2 {
+  background-position: -100px -100px
+}
+
+.no-text a#global-cart.s3 {
+  background-position: -50px -100px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  a#global-cart .icon-img {
+    background-position: -200px -7px;
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png")
+  }
+  a#global-cart.new .icon-img {
+    background-position: -250px -7px
+  }
+  .no-text a#global-cart {
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png")
+  }
+}
+
+.fixed-icon {
+  height: 50px;
+  width: 50px;
+  border-radius: 26px;
+  position: fixed;
+  bottom: 52px;
+  right: 6px;
+  z-index: 70;
+  cursor: pointer
+}
+
+.ds-btn {
+  bottom: 115px
+}
+
+.ds-btn .icon-img {
+  height: 100%;
+  background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_e4444b6200.png");
+  background-repeat: no-repeat;
+  background-size: 300px 150px;
+  background-position: -250px -100px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  .ds-btn .icon-img {
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_6b9819545.png")
+  }
+}
+
+a#global-wish {
+  z-index: 10;
+  display: block
+}
+
+a#global-wish .icon-img {
+  background: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png") no-repeat;
+  background-position: -2px -4px;
+  background-size: 300px 150px
+}
+
+a#global-wish.hide {
+  display: none
+}
+
+a#global-wish.new .icon-img {
+  background-position: -45px -7px
+}
+
+.no-text a#global-wish {
+  background: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png");
+  background-position: -150px -50px;
+  background-size: 300px 150px
+}
+
+.no-text a#global-wish.new {
+  background-position: -200px -50px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  a#global-wish .icon-img {
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png");
+    background-position: 3px -7px
+  }
+  .no-text a#global-wish {
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png")
+  }
+}
+
+#right-icon {
+  height: 50px;
+  width: 50px;
+  border-radius: 26px;
+  border: 1px solid #e1e1e1;
+  position: fixed;
+  bottom: 52px;
+  right: 6px;
+  z-index: 30;
+  overflow: hidden;
+  -webkit-transition: width ease-in-out .3s;
+  -moz-transition: width ease-in-out .3s;
+  transition: width ease-in-out .3s;
+  background-color: white;
+  background-clip: padding-box
+}
+
+#right-icon .right-icon-container {
+  position: absolute;
+  height: 50px;
+  right: 0px;
+  top: 0px
+}
+
+#right-icon .icon {
+  float: left;
+  width: 50px;
+  height: 50px
+}
+
+#right-icon .show-more-btn {
+  background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite_29025c38a6.png");
+  background-repeat: no-repeat;
+  background-size: 300px 150px;
+  background-position: 1px -50px
+}
+
+#right-icon .show-more-btn.new {
+  background-position: -99px -50px
+}
+
+#right-icon .icon-img {
+  height: 32px
+}
+
+#right-icon .icon-txt {
+  line-height: 18px;
+  font-size: 12px;
+  text-align: center;
+  color: #9f9f9f
+}
+
+#right-icon.show {
+  padding-left: 12px
+}
+
+#right-icon.show .show-more-btn {
+  background-position: -49px -50px
+}
+
+#right-icon.no-text {
+  border: 0px none;
+  background-color: transparent
+}
+
+#right-icon.no-text .icon-txt,
+#right-icon.no-text .icon-img {
+  display: none
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (min--moz-device-pixel-ratio: 1.5),
+only screen and (min-device-pixel-ratio: 1.5) {
+  #right-icon .show-more-btn {
+    background-image: url("/v2/image/wap/right_icon/icons_sprite/icons_sprite@2x_29025c38a6.png")
+  }
+}
diff --git a/src/pages/search/search.css b/src/pages/search/search.css
new file mode 100644
index 0000000..b6fb479
--- /dev/null
+++ b/src/pages/search/search.css
@@ -0,0 +1,1151 @@
+.wakeup-app {
+  position: fixed;
+  top: -60px;
+  left: 0;
+  z-index: 100;
+  background-color: #ececec;
+  width: 100%;
+  height: 60px;
+  cursor: pointer;
+  text-align: center;
+  overflow: hidden;
+  transition: all .5s linear
+}
+
+.wakeup-app .close {
+  float: left;
+  width: 40px;
+  height: 60px;
+  position: relative;
+  cursor: pointer
+}
+
+.wakeup-app .close:after {
+  position: absolute;
+  display: block;
+  content: "\D7";
+  width: 18px;
+  height: 18px;
+  font-size: 14px;
+  line-height: 16px;
+  border-radius: 9px;
+  color: #fff;
+  background-color: #dddedf;
+  top: 50%;
+  left: 50%;
+  margin-top: -9px;
+  margin-left: -9px
+}
+
+.wakeup-app .app-icon {
+  float: left;
+  width: 60px;
+  height: 60px;
+  background-image: url("/v2/image/wap/weixin_share_default_logo.png");
+  background-size: 80% 80%;
+  background-repeat: no-repeat;
+  background-position: 50%
+}
+
+.wakeup-app .description {
+  float: left;
+  text-align: left;
+  padding: 5px 0 5px 3px
+}
+
+.wakeup-app .description .title {
+  margin: 6px 0;
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 400
+}
+
+.wakeup-app .description .meta {
+  color: #999;
+  line-height: 1;
+  font-size: 12px;
+  letter-spacing: 1px
+}
+
+.wakeup-app .btn {
+  float: right;
+  margin-top: 12px;
+  margin-right: 12px;
+  padding: 8px;
+  border-color: #fc5959;
+  background-color: #fc5959;
+  letter-spacing: 1px
+}
+
+.wakeup-app-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: #000;
+  opacity: .8;
+  z-index: 101
+}
+
+.wakeup-app-opentip {
+  position: fixed;
+  height: 144px;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  z-index: 102
+}
+
+.wakeup-app-opentip .lay {
+  width: 100%;
+  height: 120px;
+  background-color: #f9f9f9;
+  border-radius: 0 0 8px 8px;
+  background: #f9f9f9 url("/v2/image/wap/opentip.png") 100% 4px no-repeat;
+  background-size: 127px auto
+}
+
+.wakeup-app-opentip .note {
+  float: right;
+  margin: 39px 58px 0 0;
+  width: 160px;
+  line-height: 20px
+}
+
+.wakeup-app-opentip .note h3 {
+  font-size: 20px;
+  margin-bottom: 6px;
+  font-weight: 400
+}
+
+.wakeup-app-opentip .note p {
+  font-size: 14px
+}
+
+.bottom-nav {
+  position: fixed;
+  width: 100%;
+  height: 50px;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 999;
+  -o-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-top: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .bottom-nav {
+    border-top-width: 1px
+  }
+}
+
+.bottom-nav ul {
+  position: relative;
+  height: 100%;
+  zoom: 1
+}
+
+.bottom-nav ul:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.bottom-nav li {
+  display: block;
+  float: left;
+  width: 25%;
+  height: 100%
+}
+
+.bottom-nav a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding-top: 8px;
+  text-align: center;
+  font-size: 10px
+}
+
+.bottom-nav [class^=icon-] {
+  display: block;
+  width: 22px;
+  height: 22px;
+  margin: auto;
+  margin-bottom: 4px;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: 100% auto
+}
+
+.bottom-nav .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-cart {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-user {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .icon-sign {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAodJREFUWAntmL1uE0EQx88fQnbrDomCN0gewQVSFOhSRRSU9DQ4yPhbyHEKpLRpSIfkhgpo/QQIKj9AkGhQChrbKez8/9HN6mRjZca+27sEVrLmvDs789vZub27CYL/LSMRaLfbn/mLG8dqt2gAeGrQtaia7OYtlrOge+eAc9GoDQaDR9Pp9AR91cVi8TA65vs6l8v9gs9RqVR6XavVfop/B0zYyWTyAwMVGcyIvCyXyzsC7W66MLIVrOwrVvVSFAQad/OC15BukTK2jVxnN9ztM+z0fsj2nH6iOVxlx99g2e+7MWBkCf1Wxb8DlpxdjqwopiGFRdjI4FJCAfQF6XKTFgpdi4rJrhoYufbMQqHVtdp1KaF1kLbeSoTlrk0bbJ3/exHhWM/ZdZHS9i/v+J2LcCaAh8PhA23EUwfudDon4/H4T6/Xe6KBXjklNJPi0gHsezzFXsHeVT6f/62xm1qEo7B4gh7U6/XvmQVehm21WupvRe8R3gaWO+AVeFtYr8BxwHoDjgvWBNzv9x93u90dTrK0OGHpV53Ds9ns03w+/wboF1rguGFNwDgrz7lAQH/QQCcBawLGWXmKp9EbDXRSsCZgKjebzePboJOENQPfBp00LP1v9PLDSCOPA+RzP8zpAC8xu/Iiw3cDy+OWINqmPiWWDUbTA6DnPmDJsDEwJxO6UCi8BSw/q+ZJRpb+2LYCpoFGo/EO0EfFYvEwqTSgH2kb5bBMFgnogVwnLV2EsZ2sxwasGibtVGtfWISN8xwwrkfsQGnzTBT5P60m5dbQ/0g4XEqw0o2C9h5uoH3IC9QDRCcVCQbxe0k2+eMizNImK90I/8foFoiib0kGskSr774Z/k1/1yIEXsFMVT4vAAAAAElFTkSuQmCC")
+}
+
+.bottom-nav .active a {
+  color: #ff6366
+}
+
+.bottom-nav .active .icon-home {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .active .icon-category {
+  background-image: url("data:image/png;base64,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")
+}
+
+.bottom-nav .active .icon-cart {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABMJJREFUeAHtWs2PFEUU7+qZHUWcxY/swesEo0j8hIs3FENCOHmYDRv+As/EgzEmaDSeTOTEwXAzWZjJ7kII2YuHvWCMAUXQNbDJEi7Augo4w7q7dE8Xv9dMLVU93duzUzU4tVQnu1WvXtV7r3793qvqqvE89zgEHAIOAYeAQ8Ah4BBwCGghwOTRwdjYl4zzjz3GSnL7pqhz3sI8bnPGzvEw/LxUr1+U56UAEY6NNcAsyx02ZZ3z/yLO95ZOnvxJzM8XFSo550dRrFAl808eYGudsWcYY9/K5iseITOy6vCaG+C9lMW3ph0v++Lc3FO7L1wIyGbFI7qZBI3vpt/A92EsFCCQrRsGAon0t4GfZHcG/i132zAQURRtCiC4513SAsILw80RGpz/ogXEad+fw4qyLAuxsY5VQg+I0Xq9Bbf63cbJyzaHQaAHBAkDmraHx92nJybmZWA2nCxpcOR5VidMePSvMghU7wkIFkV2e0QUKWHRMxCNZvNyvAVPwmoJHTFmBogXp6cb2Fhds2TenWYmEiV16Ck0aKDFW+2lrycmrtIc5KdnIICElQmTXuCRON/LMGh4BJZQK4HAwVNHfiBIevaIIAisXDnSEqUWEFsmJ68jPP5VHWzwKRzVmfUImjKE2uUVnK/+ePPmbNrr6jk0YmGWJUz69H5vZiY0DgQEW5UwcU6ZGhYEjK5HWBUaOFQ6n+YN2kBcbzT+QMJMdbUshf9bO+417vv+mSz9Wh7x8vT0KsLjSpbwQWpHYv/q2fHxhSybilmMbtsRdxQeO9v98YXu3Y/rnCevClQaA9tjHha6/ZPyPG8J3noLL+pPfC0fH6rVTin6EoQ2EByHucz3D8VyOb9WPHFie0KHFaRWaMQz9H05YVb+2b9/2IqZJ4zUBmJlZeXREgr3HN627c2EDitIbSDKU1N/USyK2SIm3xZ1m0ptIGiymPxaePiMvWUTAMJWI0BA2Fp44Hv/yQUCn7ZrQGBN3Hl+164hgbQtpRmPkE+18WubNyoV6/KEESBOR9FVJMxF8fZZofBdUK2+e2vfvq2ibdBLdXenYW1w8OAXWD0/6xCBpIE2+v0S7Tqpjqsy9rCMiZx/6o7zkb1iJ9nJF7JJ3zK21seGxsc/ydFCt3dmnrsHDjy/tVz+Afa9Y0aiMSnRZBiW6M52PYlGQoMUPHf27J1mq/U+HOBTvJKfESoL+FtdT/lj4EWw4XgeCGSHMY9Yb1JHEucer1Writ6RxUWFLjebCr2lUlHo0r17Cl1cXlbpkZGYXpifV34etJ6NjucQUBFQXEplmaNq1Wrhw2LxMCSO4oLlFWRyOsypTYXhN93Er7DElBwhTy77DkRsfKFAq8keWTHVkVhnplqtD7oBw5ScpA2CNrZqCIHJkjwhDQTqR+1tT0kO66BNyekQ3G7oOxDQM5qlvN2exxfD8/rl8YWc1LLvQFBOSNXcbszji7F5/fL4Qk5W2Xcg2okxSz9dG3Z1Cp7XL4+faUCb0XcgoKeWY0QeXwzP65fHF3JSy74DQUskrQ5p2uNVA/w0XrLNlJykXEEXRKVfZX12lr++Y8f3r/r+EnS8gFgehhtfRv0ols6Pulk6yTZTckiWexwCDgGHgEPAIaCHwAMJYdPtuf90jwAAAABJRU5ErkJggg==")
+}
+
+.bottom-nav .active .icon-user {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABGdBTUEAALGPC/xhBQAABLNJREFUeAHtW0toE1EUnZekrfVT1IVWqS1CiwvFLir4wUItCEI3Wp02deVOcFEUVyJCFn5WRdCFC0FQEZtEW0EFF4IFPxutohZ1UXGhbaB+UCm2zWee545BsFhyZ3JnGHEehCaZM+fce3Lnzbw7U8MIR+hA6EDoQOhA6ADXAcUFSuAShhE5appbjEhkp6FUCzhXIoCVxK0NYxx/xg2thw3LunEinX6UMAyLtvkxfDHiXVvbvLoVK3ohdhhJLWMmNgFz+j5kMmdWDw1NM/dxDfPciHxX125UwGlUwCpXUWr9HhVyKJZKXXe1P3OnCBPnBqZy8fgJIxq95toEUiUDwWFz4ZObQDj7eEWs8vH4VSTRzQmCjdE6Gevv7wEeR43s8KQi8OsdFzeB8oaxNresBzabeEXYcwIdDl6OQmGP9JwhWhF0drAnRi9NIG5MvraWoI6oEXSKtCc3wQD/SoUJ1Nb660Z3X4oZkcDvhOOMrhN8GaSVgKaUmNgckTPNrSoWuy8VGIdH5/OtFen0Aw62FEbMUfuyuZSa9Ha6VBcackb8WjsIhcWkEdSUM6K4eGKmIAWzF2wSZGJGYLIRC4qbmKSmmBHc4EVxSoldaosZUewniOZZikxrnSmF4W4XMwKC1Fjxe4hpyhlBnSW/h6CmnBFor/ntA7X0pDTFjKAeI4KakAqMwTNR1GRAS0PEjEig0Uo9xtKSMgjSIk0ZNsFFCwVEjVZ0od9LBTcnDzRsrTkBzjeIVQRJ291mNFqdh+FwD2hId7ZFjaB0qHOE8/tJh6mx4cQt3Z0icbFl+KxMwuZt0RBN3WbJyrArwaMOtpcV8btA/pUbPF4dGr+NoDfhLb8/7DCMBE7XQb0JPCvU8GPoQOjALwc8nSwnTHPhkmh0I9YFa5XW9bj504BXPd7TMxLVeF+NS/L5xR9jGp9n8Hka+M/4bkwpNYbT5pil9Rt893heMvm2iBX/I2rEvba2WOvy5TuQUAcC3wzydXgfFYta6y/gfYLXnVw2279gYECsQyViRLa7uxlE+1QkshdJc5+IKdcfFIq+p5W6/DCTubJtaChfDmFZRvzo7KyrrKzsw6/eVU4Q5e4LQ16jSdNbkUrddcvlygg6BLbW1h7GMXwMwgvcikvvB0MGpwuF/YvS6Y9OuR0b8aSlpaK5qSkJE3Y5FfMDj/nj5dTkZHvNzZufnOg5MqJYCWRCpxMRv7GojBdTMzPtNYODdPZhDUf9iNba2otBN4GyRozrq6uqbiUcdODYFYGHw3ZBYYBlb0BAlmUdqEwmz3HCYVcETlOnOIRBwkSUOpIyTdZ1DMuIXE9PO0pnTZCSZMWCR4w6o9EdHCzLCBB1cMiCiEElb+fExTNC6y0cskBitN7EiYtlBGbhBg5ZEDE4pFnPgLOMQIJLgpgkKyallnJwXCO+c8gCidH6KyculhG4UhvhkAURg8nyKSculhFoltzmkAURowqF85y4WEY8Hx09i8XMKw5hkDCo5Du4Pch6hoJlxIbh4ZyVze4G8bMgJVoilvT3b9/Y/y/CXmuQqL0Eb2w8iDWHiVNqE75aXCIYvzd/RuWOaMu6gDXGJb/FQ73QgdCB0IHQgf/FgZ+UQn2ZrGr7bgAAAABJRU5ErkJggg==")
+}
+
+::-webkit-scrollbar {
+  display: none
+}
+
+body,
+html {
+  -webkit-tap-highlight-color: transparent
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden
+}
+
+.container {
+  background-color: #f4f4f4
+}
+
+.with-bottom-nav {
+  padding-bottom: 50px;
+  box-sizing: border-box
+}
+
+.center-img {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+  width: 60px;
+  height: 60px
+}
+
+.center-img img {
+  max-width: 100%;
+  max-height: 100%;
+  border: 0;
+  vertical-align: middle
+}
+
+.goods-item {
+  background: #fff
+}
+
+.goods-item .thumb {
+  margin-bottom: 6px;
+  text-align: center;
+  background-color: #f4f4f4;
+  position: relative
+}
+
+.goods-item .thumb:after {
+  content: " ";
+  display: block;
+  padding-top: 100%
+}
+
+.goods-item .thumb img {
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  max-width: 100%;
+  max-height: 100%
+}
+
+.goods-item .thumb .sell-out {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: url("https://b.yzcdn.cn/v2/image/yzapp/h5/2listicon_shouqing@2x.png") no-repeat 50%;
+  background-size: 40% auto;
+  background-color: rgba(0, 0, 0, .3)
+}
+
+.goods-item .thumb .sell-out-34 {
+  background-size: 34% auto
+}
+
+.goods-item .thumb .sell-out-50 {
+  background-size: 50% auto
+}
+
+.goods-item .thumb .sell-out-60 {
+  background-size: 60% auto
+}
+
+.goods-item .detail .title {
+  padding-bottom: 8px;
+  font-size: 12px;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.goods-item .detail .price {
+  padding-bottom: 8px;
+  font-size: 14px;
+  color: #ff525e
+}
+
+.container {
+  overflow-y: hidden;
+  position: relative;
+  box-sizing: border-box
+}
+
+.content {
+  overflow-y: auto
+}
+
+.content,
+.custom-search {
+  box-sizing: border-box;
+  width: 100%
+}
+
+.custom-search {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 6px 15px;
+  background-color: #fafafa;
+  z-index: 1001;
+  -o-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .custom-search {
+    border-bottom-width: 1px
+  }
+}
+
+.custom-search form {
+  margin: 0;
+  position: relative;
+  background: #fff;
+  overflow: hidden;
+  box-sizing: border-box
+}
+
+.custom-search form:before {
+  z-index: 1;
+  border-radius: 8px;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border: 1px solid #e5e5e5
+}
+
+.custom-search form::-webkit-input-placeholder {
+  color: #d7d7d7
+}
+
+.custom-search form .custom-search-input {
+  margin: 0;
+  padding: 0 10px 0 40px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border-radius: 0;
+  height: 32px;
+  width: 100%;
+  box-sizing: border-box;
+  border: 0 none;
+  outline: none;
+  font-size: 14px;
+  box-shadow: 0 0 0 0
+}
+
+.custom-search .cancel {
+  display: none
+}
+
+.custom-search.focus {
+  zoom: 1
+}
+
+.custom-search.focus:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.custom-search.focus form {
+  float: left;
+  width: 88%;
+  margin-right: 8px
+}
+
+.custom-search.focus .cancel {
+  display: block;
+  float: left;
+  line-height: 32px;
+  font-size: 14px;
+  color: #666
+}
+
+.icon-custom-search {
+  position: absolute;
+  top: 0;
+  left: 2px;
+  border: 0 none;
+  height: 32px;
+  line-height: 32px;
+  width: 37px;
+  padding: 0;
+  color: #fff;
+  font-size: 14px;
+  text-indent: -9999px;
+  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAAXNSR0IArs4c6QAAA2xJREFUWAnNV79rU1EUTh4NsYNImyHYTk4lCSUtRFRIkQri1hR0chX/gE4uHTK4OLnr7qTQuImDiIFWDNgQkpLJKZUOaRCHpqQ2ft/lnsvNa9/L68uj+iCcH/ec73zv3HvfvYnF/pMnHoRHs9lcRty64zgrw+FwHvqcztuPx+Od09PTL7C3crncd+2/sPAlAgKPUPw5UBcCIrdBahOE3gaMN2HnEqnX6zcSicQbvO1tE3kBBV3bGQwGj/P5/I+gaWeI7O3t3QXQO5BICQjsHuwKZAWyhbfe5xi6NQdfDr41yBLkjJXThf0wk8l8Fp+fHCGiSXwEQEIn9VH05dHR0YtCofDLD6hWq12bnp5+BnIbiLvCWJAbAOt+EDKGiJ6Ob0iUTnROTk7WFxcXa34E3GONRqMwNTW1BT8XNcl0MU03x02TI0B6TRgSx8fHty5KgljMYS7UDm2+GLGp+z2KCHcHEmRh9tmJpaUlBeSX7DXGXGJgvM8YYrOGVzz9iojeoiqOayJMJ9xFiEEs8ds1xGdLR3+s1HcC89njwrQDJtGJRUyNsaBrnQvJjrCF6kELK+N2h8QGkcQiphVralk+paJjzoo4wd5OEvdEEpjvBcCuJT6RDgLVNqMD7FsyEJUEZlOw7FriE8mpkQMsJl9MGYxCujBNLTe22jVuZ5R2r9czH010Z+iFTSLq3GAA5tCTsRfAOH8qlbouMZian6K7pQOW5sOFwKw7YFIbmDnBsGuJT6SDOeSlRj0ILIkelQTmmmDZtcQnklPDA0o9YF/iKSr2pJJYxLRwTC3Lp1RHX+/atMB+hke5OyisTSxi6vy231VS7Rq0bFOKYcFu8CgXO6wkBrEk364hPluardVqtbbBXk7gDo/ysCfw7u7ufDKZ/IpCcifZyWazd+zCbt18R3jHxHx2dYACCtMZ5tgkNJ5TrVavuovbtukInVFfFe1CeMntw8PDB8Vi8bftF32ECJ0hLs9ZTGmJu8NamLwi9mGru6sU8yNzhgiTIvo78RRXxFcgM7I2vMicS0TegNc7rPzQf7C4LmZnZz8EIeNLxCK0DD3UX86gZAIREUJhpR+Zg4ODe6urq32zfcMWCZLHncIdw/Vhx3PK0un0E/ouhQgL+ZBJXioRmwx03mP/4Pep2+2+5tg/e8rl8shs/AUCtdXXCXeHEgAAAABJRU5ErkJggg==") 50% no-repeat;
+  background-size: 16px 16px;
+  border-radius: 5px 0 0 5px
+}
+
+.custom-search-type-selection-btn {
+  position: absolute;
+  top: 6px;
+  left: 15px;
+  border: 0 none;
+  font-size: 14px;
+  color: #666;
+  height: 32px;
+  padding-right: 12px;
+  padding-left: 12px;
+  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAAINJREFUGBljnDlz5gIGBoZ4ICYGLGQCqsoC4mtEqAapyWIEKZw3b57W79+/TwOZXCA+FvCNlZXVNCkp6RrIBgYQg5GRMRuLQrAQSA6kBsQBawAx0tLSFgCphSA2GlgIlQMLwzVAFaH7B+xuZAPAfkAWQPIPA8zdyPJY2bNmzUoAYWySAB1bJ40myOHYAAAAAElFTkSuQmCC") no-repeat 100%;
+  background-size: 6px, 4px;
+  display: none
+}
+
+.custom-search-type-selection-btn-focus {
+  display: block
+}
+
+.custom-search-button {
+  position: absolute;
+  top: 0;
+  left: 2px;
+  border: 0 none;
+  height: 32px;
+  line-height: 32px;
+  width: 37px;
+  padding: 0;
+  color: #fff;
+  font-size: 14px;
+  text-indent: -9999px;
+  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAAXNSR0IArs4c6QAAA2xJREFUWAnNV79rU1EUTh4NsYNImyHYTk4lCSUtRFRIkQri1hR0chX/gE4uHTK4OLnr7qTQuImDiIFWDNgQkpLJKZUOaRCHpqQ2ft/lnsvNa9/L68uj+iCcH/ec73zv3HvfvYnF/pMnHoRHs9lcRty64zgrw+FwHvqcztuPx+Od09PTL7C3crncd+2/sPAlAgKPUPw5UBcCIrdBahOE3gaMN2HnEqnX6zcSicQbvO1tE3kBBV3bGQwGj/P5/I+gaWeI7O3t3QXQO5BICQjsHuwKZAWyhbfe5xi6NQdfDr41yBLkjJXThf0wk8l8Fp+fHCGiSXwEQEIn9VH05dHR0YtCofDLD6hWq12bnp5+BnIbiLvCWJAbAOt+EDKGiJ6Ob0iUTnROTk7WFxcXa34E3GONRqMwNTW1BT8XNcl0MU03x02TI0B6TRgSx8fHty5KgljMYS7UDm2+GLGp+z2KCHcHEmRh9tmJpaUlBeSX7DXGXGJgvM8YYrOGVzz9iojeoiqOayJMJ9xFiEEs8ds1xGdLR3+s1HcC89njwrQDJtGJRUyNsaBrnQvJjrCF6kELK+N2h8QGkcQiphVralk+paJjzoo4wd5OEvdEEpjvBcCuJT6RDgLVNqMD7FsyEJUEZlOw7FriE8mpkQMsJl9MGYxCujBNLTe22jVuZ5R2r9czH010Z+iFTSLq3GAA5tCTsRfAOH8qlbouMZian6K7pQOW5sOFwKw7YFIbmDnBsGuJT6SDOeSlRj0ILIkelQTmmmDZtcQnklPDA0o9YF/iKSr2pJJYxLRwTC3Lp1RHX+/atMB+hke5OyisTSxi6vy231VS7Rq0bFOKYcFu8CgXO6wkBrEk364hPluardVqtbbBXk7gDo/ysCfw7u7ufDKZ/IpCcifZyWazd+zCbt18R3jHxHx2dYACCtMZ5tgkNJ5TrVavuovbtukInVFfFe1CeMntw8PDB8Vi8bftF32ECJ0hLs9ZTGmJu8NamLwi9mGru6sU8yNzhgiTIvo78RRXxFcgM7I2vMicS0TegNc7rPzQf7C4LmZnZz8EIeNLxCK0DD3UX86gZAIREUJhpR+Zg4ODe6urq32zfcMWCZLHncIdw/Vhx3PK0un0E/ouhQgL+ZBJXioRmwx03mP/4Pep2+2+5tg/e8rl8shs/AUCtdXXCXeHEgAAAABJRU5ErkJggg==") 50% no-repeat;
+  background-size: 16px 16px;
+  border-radius: 5px 0 0 5px
+}
+
+.custom-search-icon {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABqUlEQVR42r3WzyvDcRzH8Y+vOHDkpBwpB46k3MwOfu0wLvgDyEEp/8DOrjat5MSJs7i4O7CaWClqshxELphf81QO65Vv7+++37ZXPVprfT7Py7e+c5VKxY+HMWSQwzMYn3xHBjF4cLXy+2ESFwiyC0xGDbdiE2G2idagYY0eIMoOJB4onMV/u0IKcQxgBIs4wjd02VrCE9C9YxXNcD6GcQPdRJCwh3M5WEYcLoBO6IN4Ds8Kx6BbM2KqB69yR8wKp+XANVrgarQu92xY4RM5kIILoVfuObXCJTkwChfSQ9U9j1b4U8L9EcL56ous8BOqNxQhXARj3GuFcxJeDhntwFfVPWdWOCPh45DhJbknbYXjYJEesHYU5Y64FfZwKYdu0RUw2oQdOX8Jzwr/moaugD4j2oZd6KZqeTttQVdGBoNogvvTjRWUoNsL8z4+hN/eUMQzrJWRtMIa30aY7UNfq0krrBIoIMgKSMDhM2jc+pc5jizyeAHjk+/IYlye3gWf+IwRjsKOa7ge5qHxD8xIuLFxCTc0nqhHTM1B46W6RjWu4UaZxR3uMfUDvUqknv4oBC4AAAAASUVORK5CYII=") no-repeat 50%;
+  background-size: 15px;
+  height: 15px;
+  width: 15px;
+  display: inline-block;
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: transparent
+}
+
+.search-content {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding-left: 10px;
+  background: #fff;
+  z-index: 1000;
+  box-sizing: border-box;
+  padding-top: 45px
+}
+
+.search-content .title {
+  margin-top: 14px;
+  font-size: 14px;
+  font-weight: 700
+}
+
+.search-content .suggest {
+  -o-border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-image: url("https://b.yzcdn.cn/v2/image/wap/border-line-2.png") 2 stretch;
+  border-bottom: 2px solid #e5e5e5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .search-content .suggest {
+    border-bottom-width: 1px
+  }
+}
+
+.search-content .suggest span {
+  display: block;
+  padding: 16px 0;
+  font-size: 12px;
+  color: #666
+}
+
+.search-content .clean-wrap {
+  margin-top: 30px
+}
+
+.search-content .clean-history {
+  position: relative;
+  display: block;
+  width: 140px;
+  margin: auto;
+  padding: 10px 24px;
+  color: #666;
+  font-size: 14px;
+  text-align: center;
+  box-sizing: border-box
+}
+
+.search-content .clean-history:before {
+  border-radius: 4px;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border: 1px solid #e5e5e5
+}
+
+.search-type-dropdown-menu {
+  width: 120px;
+  position: absolute;
+  top: 32px;
+  left: 15px;
+  border-radius: 2px;
+  z-index: 1001;
+  display: none
+}
+
+.search-type-goods {
+  padding: 12px
+}
+
+.search-type-goods span {
+  font-size: 16px;
+  color: silver;
+  margin-left: 14px;
+  display: inline-block;
+  vertical-align: middle
+}
+
+.search-type-shop {
+  padding: 12px
+}
+
+.search-type-shop span {
+  font-size: 16px;
+  color: silver;
+  margin-left: 14px;
+  display: inline-block;
+  vertical-align: middle
+}
+
+.search-type-dropdown-menu-divider {
+  background: #666;
+  height: 1px
+}
+
+.search-type-dropdown-menu-indicator {
+  height: 12px;
+  display: block
+}
+
+.search-type-dropdown-menu-indicator i {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 10px 12px;
+  border-color: transparent transparent #4e4e4e;
+  margin-left: 17px
+}
+
+.drop-menu-content {
+  background: #4e4e4e;
+  border-radius: 4px
+}
+
+.icon-goods {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAmCAYAAACh1knUAAAAAXNSR0IArs4c6QAAA7RJREFUWAntmE1oU0EQx5ukSQ0ahWhTjU0b8GIPoviBJ8WiIKLoxQ/ai3r0E4SCVIWK4EEUFDx4EnqQCoKHtqC9WMWeKvYkaKGKTRrT2pqARCsxX/7m5W1I0iR9rUnooQvbeTs7M///m53dt2lNzRJppoXwCAQCrYlE4go+O+kNRXy/ox9JpVL3vV7vYBGbOWrDRHw+XxfeXQBoPiaTKTknGgrmzaJnPoW41dzcfFPG8zVDRPRMvAIkCsBVq9Xa43a7fxQKHgwG18VisTbm7tBXWCyW/Y2Nja8L2S5YRzb6xsfHU8jLRp2xvaT79Bvx0dJowFBqokYyYcBWM8H2qW67w4iPUSINUhPFlqMQkNjqdVSsqHPcjBLJcarEYMkQqTX4drIVF9MM++VsXzkjJiYmziHPgtqCXLkY9GI+1Mxv5j4Rt5vz5ZFeQ5p5hggENiaTyR6M9mYFimU9l+PRqoJAYogzpp0zJiA6bWkAN/n9fo0EBl/oHfS3Ho8nrBzLIXlZJ1h76PdE8rkQzH1gpU9pSJzXD5/PMzMzjnKAlooxPT29igNvTDAFW2y1XQMrqQn5PnTU19dH5LmSzeVy/RIswVDYavu2iNJsNg+JrEaDiMJKYwsorGR3xCicUDVICIZefzEdO7001QIvhaOWppRNVeaWieSneTkjRTPCvs58d/KNKjXOxtSWBkWI/VwbCoVWVwo0P65gCaZgy5yqkaAMotGoW2Q1WhaWhq2IfBXweDy+rRokdKytOpaGrZbmpSi5jxzTJysuFBZLMyBgKiN9KORad5gfU2srzULuJWAcEUx6n+BpRJqamoIUTi9jB8tzXSYq2bgQXSO+3Hv6+fh9EyyVkRqbzdYJuwS6C1xYtstkJRoZlzq8qGN1KowMEX4QjZKVB0zYMOrlFrVeGZVLTk1Nuci4ZL6O/pAL9EcVO+cQg4iFq9sA8gAGo1xuj5K6MWX8P5K4myhQ+R3cwosOUg4HkXEVM5MRUejpOol8z3AzjsMEaINYDmHlbESKLzFOId9hLyRGuAmeyCYhcQoCUNV2Cuox8/LvBSE4Qr9rt9tfGL3TyiV8dnb2EO4dkNilx3kGiTNk+Y+Ms1tBIsoAQu0Qus3Yq+v+QmiYZz9ykoxFdb0mAKkDdAMDD3I3UmpBmg/7G9TEk/Rw7t+SRMScgDZSe5rH4zy3IjM/kmS+RIsB/ob559RDN885pPP95iWS7RAOh9dEIpEt6OSbJG+u3liZCdgkPehwOD44nc6famI++Q/zQ4iwYYqv+AAAAABJRU5ErkJggg==") no-repeat 50%;
+  background-size: contain
+}
+
+.icon-goods,
+.icon-shop {
+  height: 19px;
+  width: 18px;
+  vertical-align: middle;
+  display: inline-block
+}
+
+.icon-shop {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAkCAYAAADl9UilAAAAAXNSR0IArs4c6QAABJJJREFUWAntmE1oXFUUxztvMjZGrTUqk0yM0KikXVgltaglEMSV1FWl2IXtoi3YTVftRsGNIi4UN7oolBbaWnHhyo1UqFIIqPSDfoGGagv5mCEpJLFp0iRmMv7+N/c83pt5U/LCCCJ5cObce87/nPN/5968e9s1a/6jT+Z+vIaGhh5saWnJ3Q+zUt/MzMzfnZ2d9+rF1xAbGxt7eG5u7oNKpfIOQYV6gQ2yFzOZzFe5XO7Dtra26WjOGDHIrKVL/QBe8qA5tMQ9JHkEjGLueFNUrfOTGp/Foe8Sv+hxa9ESPRfoXi/+sNaS2f8ODg4eQipICYJ9JGkyQLFY3Oh9t8wW1d5XidpsjO+i/CMjI9vMptyqgb3kYw+ZTzqITmD8rjMGwX7e4BzzBfMvLi5u9uOrZluuDoLgirCQecFilFs18O2XzWqbPyQ2PDz8CoHP4Sh2dHR8bwDTEHNJSZSaGHkdMcthOaV9raJqi4P5QmIE7ZER5qcR2weGk9065oqEjmUMiHUvgw47ZmGqhZzW3Dho7IjB9gGcb8vAc2pJ1fxa0hV3jIzPUyv2B+eruJriIC6yOWK08E0MrTgus+7XPDhUExMT6/F34p+h9X+EjmUOyDlO7DA5HqLWs9Vhqqna4iAu8ttS7tYE50np6mdqasqW8TqYmmWuxteZuy1AvHU+BovUdlwCGD4O0+04ynzovo6h/SSSLPX+snzUsNhEYqotDuIiTgEbbhfBOnbO5PP5UUtUpa1jqfeX5bFPBvUsl7mc9rXPMMmJUwDLHfIQmLiM8oHpkeZtVkyMHNaxl5Ur6TEO4hRQbJNAGH9MAuMX5kX5CLheD+P9QCt2zMSghUJhkHidDPnx8fFHY04/MQ7k2KiOuc2McV0SuFQq9QB0fyRgn07CcNS45QGXYX+8loTB3ie/fNPT068mYYyDXkDEfhBofn7+UwLDs1G2ycnJxxYWFo5orIe1/1K3j6XZ0q/mskdsRyER2+B+ftQw1Pmcs/cJm0tjy4mDxuKkN3wK4yXkSQy/I9/i0xHRjd6N1vdtAK0P3wakxPwUcgvbBmQPtjbkT2z6VvWhtQr9jG8y7mLcy1hN+AmtldmCTDI/gQwwLmDfiXQzv430uNbCfku5XD6GI/amBOj5rqmp6SB+ETsC5nVnjfyQ6CzTA9lstkiH32d8GInuNV1nPgP3cXNz8/rZ2dkvyPMWttiD/wo59rEfLzpi8gLMslfeQH/DVHvqPeQXvsq/osPHX4e2YngGUZfOgzkXAhhoc1N8M0vcxb65CZmrra2tf0UxXHW2Eqtr0CeIzstdOtDR5SguHPu7UeK9KgQ1cFCvnvtra2CdhqVaJZa2lasdW+1Y2g6kxa/usf9vxzirxvR2o6Oj+bRvmRZvNaxmNL5mj3GI/ywAd6OPdLBHwY0cK7dqKKfVjOYPbxdm5Aq0iavLJebNiO5Tuucnn/gWlF5nIaNbbxcyy7Wqh6vOb9E0NcTkhFwv96/jBOv/Mv61h5e+wf1rL6T6q4skEhMIUgH3/W66p1tlQ5eU3GW6NNDe3j5Abvdvjmpi/wB5ZEDU0fjP7wAAAABJRU5ErkJggg==") no-repeat 50%;
+  background-size: contain
+}
+
+.list-finished,
+.loading-more {
+  width: 100%;
+  padding: 20px 10px;
+  vertical-align: middle;
+  text-align: center;
+  color: #999;
+  font-size: 12px;
+  line-height: 20px;
+  box-sizing: border-box
+}
+
+.list-finished span,
+.loading-more span {
+  display: inline-block;
+  margin-top: 10px;
+  width: 16px;
+  height: 16px;
+  background: url("/v2/image/loader.gif") no-repeat 50%;
+  background-size: 16px 16px
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .list-finished span,
+  .loading-more span {
+    background-image: url("/v2/image/loader@2x.gif")
+  }
+}
+
+.empty-item-block {
+  padding: 30px;
+  text-align: center
+}
+
+.empty-item-block .empty-item-title {
+  line-height: 60px
+}
+
+.empty-item-block .empty-item-go {
+  margin-top: 20px;
+  display: inline-block!important;
+  padding: 8px 20px;
+  border: 1px solid #ff5050;
+  color: #ff5050;
+  border-radius: 3px
+}
+
+.img-wrap {
+  width: 100%;
+  position: relative;
+  padding-top: 100%;
+  background-color: #e3e2e2
+}
+
+.img-wrap img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto
+}
+
+.switch-show-type {
+  padding: 10px;
+  text-align: right
+}
+
+.switch-show-type a {
+  padding: 0 5px
+}
+
+.switch-show-type a.active {
+  color: #999
+}
+
+.mt20 li:first-child,
+.record-broswe-block .record-time {
+  padding-top: 20px
+}
+
+.record-broswe-block ul {
+  background-color: #fff
+}
+
+.record-broswe-block .record-time,
+.record-broswe-block li {
+  padding-left: 10px;
+  margin-bottom: 5px
+}
+
+.record-broswe-block li {
+  position: relative;
+  margin-bottom: 3px
+}
+
+.record-broswe-block li .img-wrap {
+  float: left;
+  width: 100px;
+  height: 100px;
+  padding-top: 0
+}
+
+.record-broswe-block li .detail {
+  height: 105px;
+  margin-left: 115px;
+  box-sizing: border-box;
+  padding: 10px 15px 0 0;
+  -o-border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-bottom: 2px solid #fe6573
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .record-broswe-block li .detail {
+    border-bottom-width: 1px
+  }
+}
+
+.record-broswe-block li .detail .title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin-bottom: 20px;
+  font-size: 16px
+}
+
+.record-broswe-block li .detail .price {
+  font-size: 18px;
+  color: #ff525e
+}
+
+.store-item-block {
+  display: block;
+  padding-top: 10px;
+  margin-top: 20px;
+  background-color: #fff;
+  -o-border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-image: url("/v2/image/wap/border-line.png") 2 stretch;
+  border-top: 2px solid #fe6573;
+  border-bottom: 2px solid #fe6573
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:1.5),
+only screen and (min--moz-device-pixel-ratio:1.5),
+only screen and (min-device-pixel-ratio:1.5) {
+  .store-item-block {
+    border-top-width: 1px;
+    border-bottom-width: 1px
+  }
+}
+
+.store-item-block .store-item-header {
+  padding: 0 10px 10px
+}
+
+.store-item-block .store-item-header .store-logo {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 1px solid #d8d8d8
+}
+
+.store-item-block .store-item-header .store-logo img {
+  width: 100%;
+  border-radius: 30px
+}
+
+.store-item-block .store-item-header .store-info {
+  margin-left: 58px
+}
+
+.store-item-block .store-item-header .store-info .store-name {
+  position: relative;
+  margin-bottom: 6px;
+  padding-top: 5px
+}
+
+.store-item-block .store-item-header .store-info .store-name:after {
+  content: " ";
+  clear: both;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  overflow: hidden
+}
+
+.store-item-block .store-item-header .store-info .store-name .store-name-text {
+  display: block;
+  float: left;
+  vertical-align: middle;
+  font-size: 16px;
+  padding-bottom: 2px
+}
+
+.store-item-block .store-item-header .store-info .store-name .ouath-icon {
+  display: block;
+  float: left;
+  vertical-align: middle;
+  margin-left: 10px;
+  width: 14px;
+  height: 14px;
+  background: url("/v2/image/yzapp/h5/icon_attestation@2x.png") no-repeat 50%;
+  background-size: auto 100%
+}
+
+.store-item-block .store-item-content {
+  padding: 0 15px
+}
+
+.store-item-block .store-item-content li {
+  position: relative;
+  width: 32%;
+  margin-right: 2%;
+  float: left;
+  background: #fff;
+  margin-bottom: 15px;
+  box-sizing: border-box
+}
+
+.store-item-block .store-item-content li:nth-child(3n) {
+  margin-right: 0
+}
+
+.store-item-block .store-item-content li .img-wrap {
+  height: 0;
+  padding-top: 100%;
+  position: relative
+}
+
+.store-item-block .store-item-content li .img-wrap img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  max-width: 100%;
+  max-height: 100%
+}
+
+.store-item-block .store-item-content.feeds-single-img li {
+  width: auto;
+  margin-right: 0
+}
+
+.store-item-block .store-item-content.feeds-single-img li .img-wrap {
+  height: auto;
+  padding-top: 0;
+  position: static
+}
+
+.store-item-block .store-item-content.feeds-single-img li .img-wrap img {
+  position: static
+}
+
+.store-item-block .store-btn-goto {
+  float: right;
+  font-size: 12px;
+  margin-top: 10px;
+  margin-right: 6px;
+  color: #ff6c6c
+}
+
+.none-float {
+  float: none!important
+}
+
+.btn-goto-shop {
+  position: relative;
+  padding: 6px 10px
+}
+
+.btn-goto-shop:after {
+  border-radius: 5px;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  border: 1px solid #fe6573
+}
+
+.search-store-item-block {
+  margin-top: 10px
+}
+
+@media (min-width:320px) {
+  .store-item-block .store-item-header .store-info .store-name-text {
+    max-width: 170px
+  }
+}
+
+.tabs {
+  position: fixed;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  height: 45px;
+  top: 0;
+  background: #fff;
+  color: #333;
+  border-bottom: 1px solid #eee;
+  text-align: center;
+  z-index: 100
+}
+
+.tabs .tab-name {
+  width: 50%;
+  height: 45px;
+  font-size: 16px;
+  line-height: 45px
+}
+
+.tabs .tab-name.active {
+  color: #fc5959;
+  border-bottom: 1px solid #fc5959
+}
+
+.tab-content {
+  margin-top: 66px
+}
+
+.membercards-list-block {
+  padding: 28px 10px
+}
+
+.membercards-list-block .membercard-item {
+  width: 100%;
+  height: 68px;
+  box-sizing: border-box;
+  border-radius: 6px 6px 0 0;
+  background-color: #55bd47;
+  margin-bottom: 15px;
+  position: relative;
+  -webkit-tap-highlight-color: transparent
+}
+
+.membercards-list-block .avatar {
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  left: 20px;
+  top: 12px;
+  background: #fff;
+  border-radius: 50%
+}
+
+.membercards-list-block .info {
+  margin: 0 78px
+}
+
+.membercards-list-block .shop-name {
+  color: #fff;
+  font-size: 16px;
+  line-height: 66px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis
+}
+
+.membercards-list-block .card-num-block {
+  display: inline;
+  height: 20px;
+  position: absolute;
+  top: 24px;
+  right: 20px;
+  padding: 0 10px
+}
+
+.membercards-list-block .card-num-block:after {
+  border-radius: 20px;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(.5);
+  transform: scale(.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  pointer-events: none;
+  border: 1px solid #fff
+}
+
+.membercards-list-block .cross {
+  color: #fff;
+  font-size: 9px
+}
+
+.membercards-list-block .card-num {
+  color: #fff;
+  font-size: 11px
+}
+
+.go-to-top {
+  display: none;
+  position: fixed;
+  right: 15px;
+  bottom: 60px;
+  width: 60px;
+  height: 60px;
+  background: url("data:image/png;base64,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") no-repeat 50%;
+  background-size: 46px
+}
+
+.with-top-search {
+  padding-top: 45px
+}
+
+.search-wrap {
+  padding: 10px 7px;
+  font-size: 0
+}
+
+.search-wrap .goods-item {
+  width: 49%;
+  margin-bottom: 10px;
+  display: inline-block
+}
+
+.search-wrap .goods-item:nth-child(odd) {
+  margin-right: 2%
+}
+
+.search-wrap .goods-item .thumb {
+  position: relative;
+  margin: 0 0 10px;
+  background: #fff
+}
+
+.search-wrap .goods-item .thumb:after {
+  content: " ";
+  display: block;
+  padding-top: 100%
+}
+
+.search-wrap .goods-item .thumb img {
+  position: absolute;
+  margin: auto;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0
+}
+
+.search-wrap .goods-item .detail {
+  padding: 0 7px;
+  font-size: 14px
+}
+
+.search-wrap .goods-item .title {
+  font-size: 14px
+}
+
+.search-wrap .goods-item .meta {
+  margin-bottom: 10px
+}
+
+.search-wrap .goods-item .price {
+  margin-right: 20px
+}
+
+.search-wrap .goods-item .ship {
+  color: silver;
+  font-size: 12px;
+  line-height: 14px
+}
+
+.search-shop-wrap {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0
+}
diff --git a/src/pages/search/search.html b/src/pages/search/search.html
new file mode 100644
index 0000000..1b73970
--- /dev/null
+++ b/src/pages/search/search.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html class="no-js " lang="zh-CN">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <link rel="dns-prefetch" href="https://dn-kdt-img.qbox.me/">
+  <link rel="dns-prefetch" href="https://img.yzcdn.cn/">
+  <link rel="dns-prefetch" href="https://b.yzcdn.cn/">
+  <link rel="dns-prefetch" href="https://su.yzcdn.cn/">
+  <link rel="dns-prefetch" href="https://h5.youzan.com/v2/">
+  <link rel="dns-prefetch" href="https://h5.youzan.com/">
+  <meta name="keywords" content="有赞,移动电商服务平台">
+  <meta name="description" content="有赞是帮助商家在微信上搭建微信商城的平台，提供店铺、商品、订单、物流、消息和客户的管理模块，同时还提供丰富的营销应用和活动插件。">
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="format-detection" content="telephone=no">
+  <meta http-equiv="cleartype" content="on">
+  <link rel="shortcut icon" href="https://b.yzcdn.cn/v2/image/yz_fc.ico">
+  <title>列表</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <!-- <link rel="stylesheet" href="./css/common.css"> -->
+  <!-- <link rel="stylesheet" href="./css/search.css"> -->
+</head>
+
+<body class=" " style="min-height: 667px;">
+  <div class="container with-top-search" style="min-height: 667px;">
+    <div class="custom-search js-search-bar">
+      <form>
+        <input type="search" class="custom-search-input" autocomplete="off" name="keyword" value="水果" placeholder="搜索更赞的商品" style="padding-left: 66px;">
+        <span class="icon-custom-search"></span>
+      </form>
+      <button class="custom-search-type-selection-btn custom-search-type-selection-btn-focus">商品</button>
+      <span class="cancel">取消</span>
+      <div class="search-type-dropdown-menu" style="display: none;">
+        <span class="search-type-dropdown-menu-indicator">
+            <i></i>
+        </span>
+        <div class="drop-menu-content">
+          <div class="search-type-goods">
+            <i class="icon-goods"></i>
+            <span>商品</span>
+          </div>
+          <div class="search-type-dropdown-menu-divider"></div>
+          <div class="search-type-shop">
+            <i class="icon-shop"></i>
+            <span>店铺</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="search-content" style="display: none;"></div>
+    <div class="content">
+      <div class="search-wrap js-waterfull-wrap">
+        <ul class="js-list">
+          <li class="goods-item">
+            <a href="https://h5.youzan.com/v2/showcase/goods?alias=2755moo9i2r1c&amp;source=yzapp&amp;f_platform=yzapp">
+              <div class="thumb">
+                <img src="https://img.yzcdn.cn/upload_files/2017/07/10/FoIdS7VgL1S1ENyDVzfhcLP95p69.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+                <i class="sell-out"></i>
+              </div>
+              <div class="detail">
+                <div class="title">简箪黄花梨 当季新鲜水果 现摘现发 无农药化肥 清甜多汁 包邮</div>
+                <div class="meta relative">
+                  <span class="price">￥58.00</span>
+                  <span class="ship pull-right">包邮</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li class="goods-item">
+            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3nhv9sp2f6unq&amp;source=yzapp&amp;f_platform=yzapp">
+              <div class="thumb">
+                <img src="https://img.yzcdn.cn/upload_files/2017/06/15/Fr-J04A30J54iEaIvTUXx5wXNKgL.JPG?imageView2/2/w/320/h/0/q/75/format/jpg">
+              </div>
+              <div class="detail">
+                <div class="title">家绿本地密桃新桃子 优质新鲜水蜜 甜 多汁多水果 肉桃子味美</div>
+                <div class="meta relative">
+                  <span class="price">￥70.00</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li class="goods-item">
+            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3eu57n8o8j8fq&amp;source=yzapp&amp;f_platform=yzapp">
+              <div class="thumb">
+                <img src="https://img.yzcdn.cn/upload_files/2017/06/12/FkZbfkOBNIfq8QSa87plvDrKQ0Zg.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+              </div>
+              <div class="detail">
+                <div class="title">【丰巢】美人玉甜瓜 2个装约5斤 包邮</div>
+                <div class="meta relative">
+                  <span class="price">￥68.00</span>
+                  <span class="ship pull-right">包邮</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li class="goods-item">
+            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3f59as51m3aqz&amp;source=yzapp&amp;f_platform=yzapp">
+              <div class="thumb">
+                <img src="https://img.yzcdn.cn/upload_files/2017/04/25/FoBVT3v_GYPWPyFurwxWQrRpM6TK.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+              </div>
+              <div class="detail">
+                <div class="title">[有赞拼团]越南百香果 水果新鲜 进口百香果 新鲜到货 口味酸爽香甜鸡蛋果西番莲 3斤（约22个）</div>
+                <div class="meta relative">
+                  <span class="price">￥49.80</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li class="goods-item">
+            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3ne68zss2epa3&amp;source=yzapp&amp;f_platform=yzapp">
+              <div class="thumb">
+                <img src="https://img.yzcdn.cn/upload_files/2017/06/30/FnihZl3zPdeLI_seLNZ2NpxG7FOL.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+              </div>
+              <div class="detail">
+                <div class="title">【预售新品特价周一发货】台湾热卖新鲜水果牛奶玉米 生吃甜脆玉米(200~300g/根)</div>
+                <div class="meta relative">
+                  <span class="price">￥9.80</span>
+                  <span class="ship pull-right">包邮</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li class="goods-item">
+            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3f5ba3f30kral&amp;source=yzapp&amp;f_platform=yzapp">
+              <div class="thumb">
+                <img src="https://img.yzcdn.cn/upload_files/2017/06/12/FisS14aI6JUAvtuKSrlSZKiQB_Tg.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+              </div>
+              <div class="detail">
+                <div class="title">【直接吃】泰国进口金枕榴莲 1个装 新鲜水果 绵密细致 柔滑不腻 包邮</div>
+                <div class="meta relative">
+                  <span class="price">￥149.00</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li class="goods-item">
+            <a href="https://h5.youzan.com/v2/showcase/goods?alias=1y8x8bt8yvmkf&amp;source=yzapp&amp;f_platform=yzapp">
+              <div class="thumb">
+                <img src="https://img.yzcdn.cn/upload_files/2017/04/19/FttQJRHIeES_P-cMffX4UQAylrkT.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+              </div>
+              <div class="detail">
+                <div class="title">土楼红美人香蕉孕妇水果首选 宝宝辅食必备</div>
+                <div class="meta relative">
+                  <span class="price">￥69.90</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li class="goods-item">
+            <a href="https://h5.youzan.com/v2/showcase/goods?alias=35wor09clvg3p&amp;source=yzapp&amp;f_platform=yzapp">
+              <div class="thumb">
+                <img src="https://img.yzcdn.cn/upload_files/2016/10/15/Fvn5kcyVxEY3ZBuIFUbOpTFILrl3.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+              </div>
+              <div class="detail">
+                <div class="title">【砀山特产--新鲜水果罐头，黄桃、草莓、香梨、蜜桔、葡萄、什锦六味可选】</div>
+                <div class="meta relative">
+                  <span class="price">￥128.00</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li class="goods-item">
+            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3eu8vj2ox5amo&amp;source=yzapp&amp;f_platform=yzapp">
+              <div class="thumb">
+                <img src="https://img.yzcdn.cn/upload_files/2017/06/09/FsOp3LXcRizSgi7itSawF39o0Lqv.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
+              </div>
+              <div class="detail">
+                <div class="title">越南进口火龙果白心 新鲜水果果肉饱满火龙果5斤 5-9个</div>
+                <div class="meta relative">
+                  <span class="price">￥49.00</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li class="goods-item">
+            <a href="https://h5.youzan.com/v2/showcase/goods?alias=2xhlbiamlpof7&amp;source=yzapp&amp;f_platform=yzapp">
+              <div class="thumb">
+                <img src="https://img.yzcdn.cn/upload_files/2017/04/27/FveERRIfmzfv5h6uIHm9BXJCIY-l.png?imageView2/2/w/320/h/0/q/75/format/png">
+              </div>
+              <div class="detail">
+                <div class="title">【美国品种】5斤凤梨新鲜水果 海南三亚金菠萝</div>
+                <div class="meta relative">
+                  <span class="price">￥59.90</span>
+                </div>
+              </div>
+            </a>
+          </li>
+        </ul>
+        <div class="list-finished">已经没有更多了</div>
+      </div>
+    </div>
+    <div class="go-to-top" style="display: block; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"></div>
+  </div>
+</body>
+
+</html>
diff --git a/src/pages/search/search.js b/src/pages/search/search.js
new file mode 100644
index 0000000..569720e
--- /dev/null
+++ b/src/pages/search/search.js
@@ -0,0 +1,2 @@
+import 'css/common.css'
+import './search.css'
\ No newline at end of file

From 6d9103b5c257fdc02467f822c5549c717c5e63b7 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Tue, 15 Aug 2017 23:53:37 +0800
Subject: [PATCH 12/15] add api,mixin,toTop

---
 src/modules/js/api.js            |   3 +-
 src/modules/js/mixin.js          |  15 ++++
 src/pages/category/category.html |   6 +-
 src/pages/category/category.js   |  17 ++--
 src/pages/search/search.html     | 135 ++-----------------------------
 src/pages/search/search.js       |  37 ++++++++-
 6 files changed, 72 insertions(+), 141 deletions(-)
 create mode 100644 src/modules/js/mixin.js

diff --git a/src/modules/js/api.js b/src/modules/js/api.js
index f4a1e5a..3ce2752 100644
--- a/src/modules/js/api.js
+++ b/src/modules/js/api.js
@@ -3,7 +3,8 @@ let url = {
   banner: '/index/banner',
   topList: '/category/topList',
   subList: '/category/subList',
-  rank: '/category/rank'
+  rank: '/category/rank',
+  searchList: '/search/list'
 }
 
 //开发环境和真实环境的切换
diff --git a/src/modules/js/mixin.js b/src/modules/js/mixin.js
new file mode 100644
index 0000000..62e6713
--- /dev/null
+++ b/src/modules/js/mixin.js
@@ -0,0 +1,15 @@
+let mixin = {
+  filters: {
+    currency(price) {
+      let priceStr = '' + price
+      if (priceStr.indexOf('.') > -1) {
+        let arr = priceStr.split('.')
+        return arr[0] + '.' + (arr[1] + '0').substr(0, 2)
+      } else {
+        return priceStr + '.00'
+      }
+    }
+  }
+}
+
+export default mixin
\ No newline at end of file
diff --git a/src/pages/category/category.html b/src/pages/category/category.html
index 42afe81..3024e38 100644
--- a/src/pages/category/category.html
+++ b/src/pages/category/category.html
@@ -65,6 +65,7 @@
         </div>
         <div class="class-category">
           <div id="scroll-main-wrap" class="main-content">
+            <!-- 综合排行  -->
             <div id="scroll-main-content" class="js-main-content inner-content" style="height: 943px; transform: translate3d(0px, 0px, 0px); " v-if="topIndex==0&&rankData">
               <div class="hot-wrap">
                 <div class="hot-goods">
@@ -81,7 +82,7 @@
                         </div>
                         <div class="detail">
                           <div class="title">{{list.name}}</div>
-                          <div class="price">￥{{list.price | number}}</div>
+                          <div class="price">￥{{list.price | currency}}</div>
                           <div class="recommend">
                             <span>推荐值:</span>
                             <span>{{list.recommend}}</span>
@@ -121,11 +122,13 @@
                 </div>
               </div>
             </div>
+            <!-- 其他一级分类  -->
             <div id="scroll-main-content" class="js-main-content inner-content" style="height: 534px; transform: translate3d(0px, 0px, 0px); " v-if="topIndex>0&&subData">
               <h3 class="category-title">热门品牌 </h3>
               <ul class="category-content">
                 <li class="category-item js-category-item" :data-item-id="list.id" :data-item-name="list.name" 
                   v-for="list in subData.brandList"
+                  @click="toSearch(list)"
                 >
                   <img :src="list.image" :alt="list.name" class="category-img">
                   <span class="category-item-name">
@@ -136,6 +139,7 @@ <h3 class="category-title"> 热门分类  </h3>
               <ul class="category-content">
                 <li class="category-item js-category-item" :data-item-id="list.id" :data-item-name="list.name" 
                   v-for="list in subData.categoryList"
+                  @click="toSearch(list)"
                 >
                   <img :src="list.image" :alt="list.name" class="category-img">
                   <span class="category-item-name">
diff --git a/src/pages/category/category.js b/src/pages/category/category.js
index 4510b6a..9cc6f7b 100644
--- a/src/pages/category/category.js
+++ b/src/pages/category/category.js
@@ -7,6 +7,8 @@ import url from 'js/api.js'
 
 import Foot from 'components/Foot.vue'
 
+import mixin from 'js/mixin.js'
+
 new Vue({
   el: '#app',
   data: {
@@ -41,20 +43,13 @@ new Vue({
       axios.post(url.rank).then(res => {
         this.rankData = res.data.data
       })
+    },
+    toSearch(list) {
+      location.href = `search.html?keyword=${list.name}&id=${list.id}`
     }
   },
   components: {
     Foot
   },
-  filters: {
-    number(price) {
-      let priceStr = '' + price
-      if (priceStr.indexOf('.') > -1) {
-        let arr = priceStr.split('.')
-        return arr[0] + '.' + (arr[1] + '0').substr(0,2)
-      } else {
-        return priceStr + '.00'
-      }
-    }
-  }
+  mixins: [mixin]
 })
\ No newline at end of file
diff --git a/src/pages/search/search.html b/src/pages/search/search.html
index 1b73970..6d1dcce 100644
--- a/src/pages/search/search.html
+++ b/src/pages/search/search.html
@@ -23,7 +23,7 @@
 </head>
 
 <body class=" " style="min-height: 667px;">
-  <div class="container with-top-search" style="min-height: 667px;">
+  <div class="container with-top-search" style="min-height: 667px;" @touchmove="move">
     <div class="custom-search js-search-bar">
       <form>
         <input type="search" class="custom-search-input" autocomplete="off" name="keyword" value="水果" placeholder="搜索更赞的商品" style="padding-left: 66px;">
@@ -52,145 +52,26 @@
     <div class="content">
       <div class="search-wrap js-waterfull-wrap">
         <ul class="js-list">
-          <li class="goods-item">
-            <a href="https://h5.youzan.com/v2/showcase/goods?alias=2755moo9i2r1c&amp;source=yzapp&amp;f_platform=yzapp">
+           <li class="goods-item" v-for="list in searchList">
+            <a :href="'goods.html?id='+ list.id ">
               <div class="thumb">
-                <img src="https://img.yzcdn.cn/upload_files/2017/07/10/FoIdS7VgL1S1ENyDVzfhcLP95p69.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-                <i class="sell-out"></i>
+                <img :src="list.image">
+                <i class="sell-out" v-if="list.isOut"></i>
               </div>
               <div class="detail">
-                <div class="title">简箪黄花梨 当季新鲜水果 现摘现发 无农药化肥 清甜多汁 包邮</div>
+                <div class="title">{{list.name}}</div>
                 <div class="meta relative">
-                  <span class="price">￥58.00</span>
+                  <span class="price">￥{{list.price | currency}}</span>
                   <span class="ship pull-right">包邮</span>
                 </div>
               </div>
             </a>
           </li>
-          <li class="goods-item">
-            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3nhv9sp2f6unq&amp;source=yzapp&amp;f_platform=yzapp">
-              <div class="thumb">
-                <img src="https://img.yzcdn.cn/upload_files/2017/06/15/Fr-J04A30J54iEaIvTUXx5wXNKgL.JPG?imageView2/2/w/320/h/0/q/75/format/jpg">
-              </div>
-              <div class="detail">
-                <div class="title">家绿本地密桃新桃子 优质新鲜水蜜 甜 多汁多水果 肉桃子味美</div>
-                <div class="meta relative">
-                  <span class="price">￥70.00</span>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li class="goods-item">
-            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3eu57n8o8j8fq&amp;source=yzapp&amp;f_platform=yzapp">
-              <div class="thumb">
-                <img src="https://img.yzcdn.cn/upload_files/2017/06/12/FkZbfkOBNIfq8QSa87plvDrKQ0Zg.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-              </div>
-              <div class="detail">
-                <div class="title">【丰巢】美人玉甜瓜 2个装约5斤 包邮</div>
-                <div class="meta relative">
-                  <span class="price">￥68.00</span>
-                  <span class="ship pull-right">包邮</span>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li class="goods-item">
-            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3f59as51m3aqz&amp;source=yzapp&amp;f_platform=yzapp">
-              <div class="thumb">
-                <img src="https://img.yzcdn.cn/upload_files/2017/04/25/FoBVT3v_GYPWPyFurwxWQrRpM6TK.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-              </div>
-              <div class="detail">
-                <div class="title">[有赞拼团]越南百香果 水果新鲜 进口百香果 新鲜到货 口味酸爽香甜鸡蛋果西番莲 3斤（约22个）</div>
-                <div class="meta relative">
-                  <span class="price">￥49.80</span>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li class="goods-item">
-            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3ne68zss2epa3&amp;source=yzapp&amp;f_platform=yzapp">
-              <div class="thumb">
-                <img src="https://img.yzcdn.cn/upload_files/2017/06/30/FnihZl3zPdeLI_seLNZ2NpxG7FOL.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-              </div>
-              <div class="detail">
-                <div class="title">【预售新品特价周一发货】台湾热卖新鲜水果牛奶玉米 生吃甜脆玉米(200~300g/根)</div>
-                <div class="meta relative">
-                  <span class="price">￥9.80</span>
-                  <span class="ship pull-right">包邮</span>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li class="goods-item">
-            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3f5ba3f30kral&amp;source=yzapp&amp;f_platform=yzapp">
-              <div class="thumb">
-                <img src="https://img.yzcdn.cn/upload_files/2017/06/12/FisS14aI6JUAvtuKSrlSZKiQB_Tg.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-              </div>
-              <div class="detail">
-                <div class="title">【直接吃】泰国进口金枕榴莲 1个装 新鲜水果 绵密细致 柔滑不腻 包邮</div>
-                <div class="meta relative">
-                  <span class="price">￥149.00</span>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li class="goods-item">
-            <a href="https://h5.youzan.com/v2/showcase/goods?alias=1y8x8bt8yvmkf&amp;source=yzapp&amp;f_platform=yzapp">
-              <div class="thumb">
-                <img src="https://img.yzcdn.cn/upload_files/2017/04/19/FttQJRHIeES_P-cMffX4UQAylrkT.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-              </div>
-              <div class="detail">
-                <div class="title">土楼红美人香蕉孕妇水果首选 宝宝辅食必备</div>
-                <div class="meta relative">
-                  <span class="price">￥69.90</span>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li class="goods-item">
-            <a href="https://h5.youzan.com/v2/showcase/goods?alias=35wor09clvg3p&amp;source=yzapp&amp;f_platform=yzapp">
-              <div class="thumb">
-                <img src="https://img.yzcdn.cn/upload_files/2016/10/15/Fvn5kcyVxEY3ZBuIFUbOpTFILrl3.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-              </div>
-              <div class="detail">
-                <div class="title">【砀山特产--新鲜水果罐头，黄桃、草莓、香梨、蜜桔、葡萄、什锦六味可选】</div>
-                <div class="meta relative">
-                  <span class="price">￥128.00</span>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li class="goods-item">
-            <a href="https://h5.youzan.com/v2/showcase/goods?alias=3eu8vj2ox5amo&amp;source=yzapp&amp;f_platform=yzapp">
-              <div class="thumb">
-                <img src="https://img.yzcdn.cn/upload_files/2017/06/09/FsOp3LXcRizSgi7itSawF39o0Lqv.jpg?imageView2/2/w/320/h/0/q/75/format/jpg">
-              </div>
-              <div class="detail">
-                <div class="title">越南进口火龙果白心 新鲜水果果肉饱满火龙果5斤 5-9个</div>
-                <div class="meta relative">
-                  <span class="price">￥49.00</span>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li class="goods-item">
-            <a href="https://h5.youzan.com/v2/showcase/goods?alias=2xhlbiamlpof7&amp;source=yzapp&amp;f_platform=yzapp">
-              <div class="thumb">
-                <img src="https://img.yzcdn.cn/upload_files/2017/04/27/FveERRIfmzfv5h6uIHm9BXJCIY-l.png?imageView2/2/w/320/h/0/q/75/format/png">
-              </div>
-              <div class="detail">
-                <div class="title">【美国品种】5斤凤梨新鲜水果 海南三亚金菠萝</div>
-                <div class="meta relative">
-                  <span class="price">￥59.90</span>
-                </div>
-              </div>
-            </a>
-          </li>
         </ul>
         <div class="list-finished">已经没有更多了</div>
       </div>
     </div>
-    <div class="go-to-top" style="display: block; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"></div>
+    <div class="go-to-top" v-show="show" style="display: block; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"></div>
   </div>
 </body>
 
diff --git a/src/pages/search/search.js b/src/pages/search/search.js
index 569720e..82af459 100644
--- a/src/pages/search/search.js
+++ b/src/pages/search/search.js
@@ -1,2 +1,37 @@
 import 'css/common.css'
-import './search.css'
\ No newline at end of file
+import './search.css'
+
+import Vue from 'vue'
+import axios from 'axios'
+import url from 'js/api.js'
+import qs from 'qs'
+
+import mixin from 'js/mixin.js'
+
+let {keyword, id} = qs.parse(location.search.substr(1))
+
+new Vue({
+  el: '.container',
+  data: {
+    searchList: null,
+    show: false
+  },
+  created() {
+    this.getsearchList()
+  },
+  methods: {
+    getsearchList() {
+      axios.post(url.searchList, {keyword, id}).then(res => {
+        this.searchList = res.data.lists
+      })
+    },
+    move() {
+      if(document.body.scrollTop > 100) {
+        this.show = true
+      } else {
+        this.show = false
+      }
+    }
+  },
+  mixins: [mixin]
+})
\ No newline at end of file

From e18ba5f63d20ddd6e0b8bce283b08701e8a692f1 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Wed, 16 Aug 2017 00:57:10 +0800
Subject: [PATCH 13/15] add toTop animate

---
 package.json                 | 1 +
 src/pages/search/search.html | 2 +-
 src/pages/search/search.js   | 4 ++++
 yarn.lock                    | 4 ++++
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cfb94b5..6ee584f 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "mint-ui": "^2.2.9",
     "qs": "^6.5.0",
     "swiper": "^3.4.2",
+    "velocity-animate": "^1.5.0",
     "vue": "^2.3.3",
     "vue-router": "^2.6.0"
   },
diff --git a/src/pages/search/search.html b/src/pages/search/search.html
index 6d1dcce..70a8f06 100644
--- a/src/pages/search/search.html
+++ b/src/pages/search/search.html
@@ -71,7 +71,7 @@
         <div class="list-finished">已经没有更多了</div>
       </div>
     </div>
-    <div class="go-to-top" v-show="show" style="display: block; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"></div>
+    <div class="go-to-top" v-show="show" @click="toTop" style="display: block; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"></div>
   </div>
 </body>
 
diff --git a/src/pages/search/search.js b/src/pages/search/search.js
index 82af459..0b84673 100644
--- a/src/pages/search/search.js
+++ b/src/pages/search/search.js
@@ -5,6 +5,7 @@ import Vue from 'vue'
 import axios from 'axios'
 import url from 'js/api.js'
 import qs from 'qs'
+import Velocity from 'velocity-animate'
 
 import mixin from 'js/mixin.js'
 
@@ -31,6 +32,9 @@ new Vue({
       } else {
         this.show = false
       }
+    },
+    toTop() {
+      Velocity(document.body, "scroll", { duration: 1000 })
     }
   },
   mixins: [mixin]
diff --git a/yarn.lock b/yarn.lock
index ea3e15c..347d30b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3967,6 +3967,10 @@ vary@~1.1.1:
   version "1.1.1"
   resolved "http://registry.npm.taobao.org/vary/download/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
 
+velocity-animate@^1.5.0:
+  version "1.5.0"
+  resolved "http://registry.npm.taobao.org/velocity-animate/download/velocity-animate-1.5.0.tgz#fc8771d8dfe1136ff02a707e10fbb0957c4b030f"
+
 vendors@^1.0.0:
   version "1.0.1"
   resolved "http://registry.npm.taobao.org/vendors/download/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"

From b55be8ca06482318bc041f3a43e47889c1b166a3 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Sat, 19 Aug 2017 04:48:20 +0800
Subject: [PATCH 14/15] create lesson04

---
 src/components/Swipe.vue             |  18 +-
 src/modules/js/api.js                |   5 +-
 src/pages/category/category.html     |   2 +-
 src/pages/goods/goods.html           | 834 ++++++++++++++-------------
 src/pages/goods/goods.js             | 114 +++-
 src/pages/goods/goods_transition.css |   7 +
 src/pages/index/index.html           |   2 +-
 7 files changed, 548 insertions(+), 434 deletions(-)
 create mode 100644 src/pages/goods/goods_transition.css

diff --git a/src/components/Swipe.vue b/src/components/Swipe.vue
index 47970c6..f3aaab5 100644
--- a/src/components/Swipe.vue
+++ b/src/components/Swipe.vue
@@ -22,14 +22,9 @@ export default {
     lists: {
       type: Array,
       required: true
-    },
-    name: {}
-  },
-  created() {
-    // console.log('created: ',document.querySelectorAll('.swiper-slide'))
+    }
   },
   mounted() {
-    // console.log('mounted: ',document.querySelectorAll('.swiper-slide'))
     this.init()
   },
   methods: {
@@ -39,16 +34,7 @@ export default {
         pagination: '.swiper-pagination'
       })
     }
-  },
-  // watch: {
-  //   lists(val,oldVal) {
-  //     console.log(val,oldVal)
-  //     console.log('before nextTick: ',document.querySelectorAll('.swiper-slide'))
-  //     this.$nextTick(() => {
-  //       console.log('after nextTick: ',document.querySelectorAll('.swiper-slide'))
-  //     })
-  //   }
-  // }
+  }
 }
 </script>
 
diff --git a/src/modules/js/api.js b/src/modules/js/api.js
index 3ce2752..df7e9f4 100644
--- a/src/modules/js/api.js
+++ b/src/modules/js/api.js
@@ -4,7 +4,10 @@ let url = {
   topList: '/category/topList',
   subList: '/category/subList',
   rank: '/category/rank',
-  searchList: '/search/list'
+  searchList: '/search/list',
+  details: '/goods/details',
+  deal: '/goods/deal',
+  cartAdd: '/cart/add'
 }
 
 //开发环境和真实环境的切换
diff --git a/src/pages/category/category.html b/src/pages/category/category.html
index 3024e38..97c5e36 100644
--- a/src/pages/category/category.html
+++ b/src/pages/category/category.html
@@ -75,7 +75,7 @@
                   </div>
                   <ul>
                     <li class="goods-item" v-for="(list,index) in rankData.hotGoods">
-                      <a href="https://h5.youzan.com/v2/showcase/goods?alias=27cjv5wdsb4to&amp;source=yzapp&amp;f_platform=yzapp">
+                      <a :href="'goods.html?id='+list.id">
                         <div class="thumb badge center-img">
                           <img :src="list.image">
                           <span class="num">{{index+1}}</span>
diff --git a/src/pages/goods/goods.html b/src/pages/goods/goods.html
index 3508099..0682e79 100644
--- a/src/pages/goods/goods.html
+++ b/src/pages/goods/goods.html
@@ -13,166 +13,133 @@
   <link rel="shortcut icon" href="https://b.yzcdn.cn/v2/image/yz_fc.ico">
   <title>商品详情</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link rel="stylesheet" href="./css/goods_common.css">
-  <link rel="stylesheet" href="./css/goods_custom.css">
-  <link rel="stylesheet" href="./css/goods.css">
-  <link rel="stylesheet" href="./css/goods_theme.css">
-  <link rel="stylesheet" href="./css/goods_mars.css">
-  <link rel="stylesheet" href="./css/goods_sku.css">
+  <!-- <link rel="stylesheet" href="./css/goods_common.css"> -->
+  <!-- <link rel="stylesheet" href="./css/goods_custom.css"> -->
+  <!-- <link rel="stylesheet" href="./css/goods.css"> -->
+  <!-- <link rel="stylesheet" href="./css/goods_theme.css"> -->
+  <!-- <link rel="stylesheet" href="./css/goods_mars.css"> -->
+  <!-- <link rel="stylesheet" href="./css/goods_sku.css"> -->
 </head>
 
-<body class=" body-fixed-bottom
-            default-theme">
-  <div class="container wap-goods internal-purchase" style="min-height: 617px;">
-    <div class="content no-sidebar">
-      <div class="content-body">
-        <div class="custom-image-swiper custom-goods-swiper js-swp swp">
-          <div class="swiper-wrapper js-swp-wrap" style="height: 375px;" data-height="320">
-            <div class="swp-page" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; transform: translate3d(-9999px, 0px, 0px);">
-              <img class="" src="https://img.yzcdn.cn/upload_files/2017/07/12/FkSvYz8FLLD9-t0smXO43hF6ov7S.jpg?imageView2/2/w/980/h/980/q/75/format/webp">
-            </div>
-            <div class="swp-page" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; transform: translate3d(-375px, 0px, 0px);">
-              <img class="js-res-load" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FvBRA_j6wl7CBVuNHQPl7FHkj0b1.jpg?imageView2/2/w/980/h/980/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FvBRA_j6wl7CBVuNHQPl7FHkj0b1.jpg?imageView2/2/w/980/h/980/q/75/format/webp">
-            </div>
-            <div class="swp-page page-in-view" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; transform: translate3d(0px, 0px, 0px);">
-              <img class="js-res-load" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FpetvOfbRCRmyeg32DBunok9Uvmo.jpg?imageView2/2/w/980/h/980/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FpetvOfbRCRmyeg32DBunok9Uvmo.jpg?imageView2/2/w/980/h/980/q/75/format/webp">
-            </div>
-            <div class="swp-page" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; transform: translate3d(375px, 0px, 0px);">
-              <img class="js-res-load" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FqYpph8-5qfY-sCecemc7LTZb2O2.jpg?imageView2/2/w/980/h/980/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FqYpph8-5qfY-sCecemc7LTZb2O2.jpg?imageView2/2/w/980/h/980/q/75/format/webp">
-            </div>
-            <div class="swp-page" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; transform: translate3d(-9999px, 0px, 0px);">
-              <img class="js-res-load" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FmgpyGwZqitXF7LWnVzmHHmCVfB4.jpg?imageView2/2/w/980/h/980/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FmgpyGwZqitXF7LWnVzmHHmCVfB4.jpg?imageView2/2/w/980/h/980/q/75/format/webp">
-            </div>
-          </div>
-          <div class="swiper-pagination js-swiper-pagination">
-            <ul class="swp-thumbnail-list">
-              <li class="swiper-pagination-switch"></li>
-              <li class="swiper-pagination-switch"></li>
-              <li class="swiper-pagination-switch swiper-active-switch"></li>
-              <li class="swiper-pagination-switch"></li>
-              <li class="swiper-pagination-switch"></li>
-            </ul>
-          </div>
-        </div>
-        <script id="resize-img-script-used"></script>
-        <div class="goods-header">
-          <h2 class="title">寻找田野|最正宗的上海南汇8424 得奖最多奥运会指定西瓜1只/箱 9-11斤</h2>
-          <span class="hide js-add-wish js-wish-animate wish-add  font-size-12 tag tag-redf30 pull-right">
+<body class=" body-fixed-bottom default-theme">
+  <div id="app" v-if="details">
+    <div class="container wap-goods internal-purchase" style="min-height: 617px;">
+      <div class="content no-sidebar">
+        <div class="content-body">
+          <swipe :lists="swipeLists"></swipe>
+
+          <div class="goods-header">
+            <h2 class="title">{{details.title}}</h2>
+            <span class="hide js-add-wish js-wish-animate wish-add  font-size-12 tag tag-redf30 pull-right">
                 喜欢
             </span>
-          <div class="goods-price ">
-            <div class="current-price">
-              <span>¥</span><i class="js-goods-price price">98.00</i>
+            <div class="goods-price ">
+              <div class="current-price">
+                <span>¥</span><i class="js-goods-price price">{{details.price | currency}}</i>
+              </div>
+              <span class="btn btn-blue btn-retail hide js-retail-btn">门店有售</span>
+              <div class="original-price">
+                {{details.originalPrice | currency}} </div>
+            </div>
+            <hr class="with-margin-l">
+            <div class="stock-detail">
+              <dl>
+                <dt>运费:</dt>
+                <dd class="js-postage-desc" data-postage="免运费">
+                  {{details.postage}} </dd>
+              </dl>
+              <dl>
+                <dt>剩余:</dt>
+                <dd>{{details.remain}}</dd>
+              </dl>
+              <dl>
+                <dt>销量:</dt>
+                <dd>{{details.sales}}</dd>
+              </dl>
             </div>
-            <span class="btn btn-blue btn-retail hide js-retail-btn">门店有售</span>
-            <div class="original-price">
-              108 </div>
-          </div>
-          <hr class="with-margin-l">
-          <div class="stock-detail">
-            <dl>
-              <dt>运费:</dt>
-              <dd class="js-postage-desc" data-postage="免运费">
-                免运费 </dd>
-            </dl>
-            <dl>
-              <dt>剩余:</dt>
-              <dd>450</dd>
-            </dl>
-            <dl>
-              <dt>销量:</dt>
-              <dd>50</dd>
-            </dl>
-          </div>
-        </div>
-        <div class="sku-detail adv-opts">
-          <div class="sku-detail-inner adv-opts-inner">
-            <dl class="sku-group select-sku js-select-sku">
-              <dt><span class="js-sku-label">选择</span>：</dt>
-              <dd class="js-sku-value">
-                <span class="sku-item">净含量</span> </dd>
-            </dl>
           </div>
-        </div>
-        <div class="js-store-info">
-          <div class="block block-list goods-store">
-            <div class="custom-store block-item ">
-              <a class="custom-store-link clearfix" href="https://h5.youzan.com/v2/home/cz0mk59k">
-                <div class="custom-store-img"></div>
-                <div class="custom-store-name">
-                  寻找田野 </div>
-                <span class="custom-store-enter">进入店铺</span>
-              </a>
+          <div class="sku-detail adv-opts">
+            <div class="sku-detail-inner adv-opts-inner">
+              <dl class="sku-group select-sku js-select-sku" @click="chooseSku(1)">
+                <dt><span class="js-sku-label">选择</span>：</dt>
+                <dd class="js-sku-value">
+                  <span class="sku-item">净含量</span> </dd>
+              </dl>
             </div>
-            <a class="offline-store block-item js-retail-store hide">
+          </div>
+          <div class="js-store-info">
+            <div class="block block-list goods-store">
+              <div class="custom-store block-item ">
+                <a class="custom-store-link clearfix" href="https://h5.youzan.com/v2/home/cz0mk59k">
+                  <div class="custom-store-img"></div>
+                  <div class="custom-store-name">
+                    {{details.storeName}} </div>
+                  <span class="custom-store-enter">进入店铺</span>
+                </a>
+              </div>
+              <a class="offline-store block-item js-retail-store hide">
               <span class="offline-store-img"></span>
               <span class="offline-store-name">线下门店</span>
               <div class="offline-store-branch js-retail-store-name"></div>
             </a>
-            <div class="renzheng block-item">
-              <span class="js-rz-item-alert rz-item" data-type="team_certificate_company">
-                <span class="rz-name font-size-12 c-gray-darker">企业认证</span>
-              </span>
-              <span class="js-rz-item-alert rz-item" data-type="is_secured_transactions">
-                <span class="rz-name font-size-12 c-gray-darker">担保交易</span>
-              </span>
+              <div class="renzheng block-item">
+                <span class="js-rz-item-alert rz-item" v-for="item in details.identification">
+                  <span class="rz-name font-size-12 c-gray-darker">{{item}}</span>
+                </span>
+              </div>
             </div>
           </div>
-        </div>
-        <a class="js-package-buy-block hide"></a>
-        <div class="js-detail-container" style="margin-top: 10px;">
-          <div class="js-tabber-container goods-detail">
-            <div class="js-tabber tabber tabber-n2 clearfix orange">
-              <button data-type="goods" class="active">
-                商品详情 </button>
-              <button data-type="sales">
-                本店成交 </button>
-            </div>
-            <div class="js-tabber-content">
-              <div class="js-part hide" data-type="sales">
-                <div class="js-traderecord-list block-list-traderecord">
-                  <div class="list-header">
-                    <span class="col-1">买家</span>
-                    <span class="col-2 center">成交时间</span>
-                    <span class="col-3 center">数量</span>
-                  </div>
-                  <div class="js-list b-list block block-list">
-                  </div>
-                </div>
+          <a class="js-package-buy-block hide"></a>
+          <div class="js-detail-container" style="margin-top: 10px;">
+            <div class="js-tabber-container goods-detail">
+              <div class="js-tabber tabber tabber-n2 clearfix orange">
+                <button data-type="goods" :class="{active:tabIndex===index}" v-for="(item,index) in detailTab" @click="changeTabIndex(index)">
+                {{item}} </button>
               </div>
-              <div class="js-part js-goods-detail goods-tabber-c" data-type="goods">
-                <div class="js-components-container components-container">
-                  <div class="custom-richtext js-lazy-container js-view-image-list">
-                    <p><img data-origin-width="720" data-origin-height="713" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FhU7lMPonHtR8qP4zP4aIKRVkObr.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FhU7lMPonHtR8qP4zP4aIKRVkObr.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="494" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FvYqk840X0ubXwFE6Nh0unihqIKm.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FvYqk840X0ubXwFE6Nh0unihqIKm.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="916" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FvIfNYewmohf3b3V2yA_hr6whV-A.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FvIfNYewmohf3b3V2yA_hr6whV-A.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="656" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FlYJPxbAgmkKjWtvLxwqjUMJHUG3.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FlYJPxbAgmkKjWtvLxwqjUMJHUG3.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="513" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FmpaiyW8GbpV2I2QKwm7stoRQkOJ.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FmpaiyW8GbpV2I2QKwm7stoRQkOJ.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="691" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/Fs5rqsKzMe7qIHhuQAqyM1lcjmfB.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/Fs5rqsKzMe7qIHhuQAqyM1lcjmfB.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="531" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/Foor6_Ipc-Lo9eOX_H_a8g4kWPRW.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/Foor6_Ipc-Lo9eOX_H_a8g4kWPRW.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="932" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FuuNBFbA_vMYmI6FFbNOemmDX9bd.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FuuNBFbA_vMYmI6FFbNOemmDX9bd.jpg!730x0.jpg"><img data-origin-width="720" data-origin-height="707" class="js-richtext-img-lazy js-view-image-item" src="https://img.yzcdn.cn/upload_files/2017/05/15/FotgIfOUlMtvhtH0dhRLlmpKJLv7.jpg?imageView2/2/w/730/h/0/q/75/format/webp" data-src="https://img.yzcdn.cn/upload_files/2017/05/15/FotgIfOUlMtvhtH0dhRLlmpKJLv7.jpg!730x0.jpg"></p>
-                  </div>
-                  <div class="price-intro">
-                    <h4>划线价格说明<i class="icon-arrow"></i></h4>
-                    <p>划线价格：划线的价格可能是商品的专柜价、吊牌价、正品零售价、指导价、曾经展示过的销售价等，仅供您参考。</p>
-                    <p>未划线价格：未划线的价格是商品的销售标价，具体的成交价格可能因会员使用优惠券、积分等发生变化，最终以订单结算价格为准。 </p>
-                    <p>*此说明仅当出现价格比较时有效。若这件商品针对划线价格进行了特殊说明，以特殊说明为准。</p>
+              <div class="js-tabber-content">
+                <div class="js-part" v-show="tabIndex==1" data-type="sales">
+                  <div class="js-traderecord-list block-list-traderecord">
+                    <div class="list-header">
+                      <span class="col-1">买家</span>
+                      <span class="col-2 center">成交时间</span>
+                      <span class="col-3 center">数量</span>
+                    </div>
+                    <div class="js-list b-list block block-list">
+                      <div class="block-item" v-for="list in dealLists">
+                        <span class="col-1 c-gray-darker">{{list.buyer}}</span>
+                        <span class="col-2 c-gray-dark center">{{list.time}}</span>
+                        <span class="col-3 c-gray-darker center">{{list.num}}</span>
+                      </div>
+                    </div>
                   </div>
                 </div>
+                <div class="js-part js-goods-detail goods-tabber-c" data-type="goods" v-html="details.description" v-show="tabIndex==0">
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="js-bottom-opts js-footer-auto-ele stick-bottom">
-          <div class="stick-bottom-icons">
-            <a href="javascript:;" class="js-yz-im icons icons-im ">店主</a>
-            <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" class="js-call-im icons icons-home">店铺</a>
-            <a href="javascript:;" class="js-yz-zan icons icons-zan ">收藏</a>
-          </div>
-          <div class="stick-bottom-btns">
-            <!-- 尚未开售 -->
-            <div class="btn-cart">
-              <a href="https://h5.youzan.com/v2/showcase/goods?alias=1y7n2wi58q1as&amp;source=yzapp&amp;f_platform=yzapp&amp;reft=1499937523785&amp;spm=mars20003" class="js-add-cart">加入购物车</a>
+          <div class="js-bottom-opts js-footer-auto-ele stick-bottom">
+            <div class="stick-bottom-icons">
+              <a href="javascript:;" class="js-yz-im icons icons-im ">店主</a>
+              <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" class="js-call-im icons icons-home">店铺</a>
+              <a href="javascript:;" class="js-yz-zan icons icons-zan ">收藏</a>
             </div>
-            <div class="btn-buy">
-              <a href="javascript:;" class="js-buy-it">立即购买</a>
+            <div class="stick-bottom-btns">
+              <div class="btn-cart">
+                <a class="js-add-cart" @click="chooseSku(2)">加入购物车</a>
+              </div>
+              <div class="btn-buy">
+                <a href="javascript:;" class="js-buy-it" @click="chooseSku(3)">立即购买</a>
+              </div>
             </div>
+            <!-- 商品是否已售罄  -->
+            <!-- <div class="stick-bottom-btns">
+              <div class="btn-1-1">
+                <div class="disabled f16">商品已售罄</div>
+              </div>
+            </div> -->
           </div>
-        </div>
-        <!-- <div id="right-icon" class="js-right-icon hide">
+          <!-- <div id="right-icon" class="js-right-icon hide">
           <div class="js-right-icon-container right-icon-container clearfix">
             <a id="global-cart" href="https://h5.youzan.com/v2/trade/cart?kdt_id=16546132" class="icon hide" style="">
               <p class="icon-img"></p>
@@ -181,301 +148,340 @@ <h4>划线价格说明<i class="icon-arrow"></i></h4>
             <a class="js-show-more-btn icon show-more-btn hide"></a>
           </div>
         </div> -->
-        <div id="right-icon" class="js-right-icon ">
-          <div class="js-right-icon-container right-icon-container clearfix">
-            <a id="global-cart" href="https://h5.youzan.com/v2/trade/cart?kdt_id=16546132" class="icon new s0" style="">
-              <p class="icon-img"></p>
-              <p class="icon-txt">购物车</p>
-            </a>
-            <a class="js-show-more-btn icon show-more-btn "></a>
+          <div id="right-icon" class="js-right-icon " v-show="isAddCart">
+            <div class="js-right-icon-container right-icon-container clearfix">
+              <a id="global-cart" href="https://h5.youzan.com/v2/trade/cart?kdt_id=16546132" class="icon new s0" style="">
+                <p class="icon-img"></p>
+                <p class="icon-txt">购物车</p>
+              </a>
+              <a class="js-show-more-btn icon show-more-btn "></a>
+            </div>
           </div>
-        </div>
-        <div class="js-recommend">
-          <p class="center font-size-14 c-black" style="padding: 5px 0;margin-top: 10px;">更多精选商品</p>
-          <div class="js-recommend-goods-list">
-            <ul class="js-goods-list sc-goods-list pic clearfix size-1 " data-size="1" data-showtype="card" style="visibility: visible;">
-              <!-- 商品区域 -->
-              <!-- 展现类型判断 -->
-              <li class="js-goods-card goods-card small-pic card ">
-                <a href="https://h5.youzan.com/v2/goods/2ov83y79gkn38" class="js-goods link clearfix" target="_blank" data-goods-id="343086880" title="【28号陆续发货】寻找田野|青海有机鲜枸杞 营养价值高安全无农残 吃水果一样吃枸杞">
-                  <div class="photo-block" data-width="750" data-height="750" style="background-color: rgb(255, 255, 255);">
-                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/11/FoN0SazpvslhoiiyuHETeyWHqzTE.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/11/FoN0SazpvslhoiiyuHETeyWHqzTE.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
-                  </div>
-                  <div class="info clearfix info-title info-price btn0">
-                    <p class=" goods-title ">【28号陆续发货】寻找田野|青海有机鲜枸杞 营养价值高安全无农残 吃水果一样吃枸杞</p>
-                    <p class="goods-sub-title c-black hide"></p>
-                    <p class="goods-price">
-                      <em>¥88.00</em>
-                    </p>
-                    <p class="goods-price-taobao  hide"></p>
-                  </div>
-                </a>
-              </li>
-              <li class="js-goods-card goods-card small-pic card ">
-                <a href="https://h5.youzan.com/v2/goods/2g06s483u55no" class="js-goods link clearfix" target="_blank" data-goods-id="342718779" title="【米饭版和牛肉版】小龙坎方便火锅 只要一瓶矿泉水就能吃的地道四川火锅">
-                  <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
-                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/04/FidWCdQxsEMojh63W8GK016mwPAo.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/04/FidWCdQxsEMojh63W8GK016mwPAo.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
-                  </div>
-                  <div class="info clearfix info-title info-price btn0">
-                    <p class=" goods-title ">【米饭版和牛肉版】小龙坎方便火锅 只要一瓶矿泉水就能吃的地道四川火锅</p>
-                    <p class="goods-sub-title c-black hide">不用火，不用电，一瓶矿泉水就能吃地道四川火锅</p>
-                    <p class="goods-price">
-                      <em>¥28.00</em>
-                    </p>
-                    <p class="goods-price-taobao  hide"></p>
-                  </div>
-                </a>
-              </li>
-              <li class="js-goods-card goods-card small-pic card ">
-                <a href="https://h5.youzan.com/v2/goods/1y8wz9sm8da8k" class="js-goods link clearfix" target="_blank" data-goods-id="342676309" title="寻找田野|绍兴黄酒 良宵 2012年古法手工原浆半干黄酒 礼盒装 送礼佳品">
-                  <div class="photo-block" data-width="750" data-height="750" style="background-color: rgb(255, 255, 255);">
-                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/04/Fq1yXSOb84HmElu-Qgrm65EmAeIz.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/04/Fq1yXSOb84HmElu-Qgrm65EmAeIz.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
-                  </div>
-                  <div class="info clearfix info-title info-price btn0">
-                    <p class=" goods-title ">寻找田野|绍兴黄酒 良宵 2012年古法手工原浆半干黄酒 礼盒装 送礼佳品</p>
-                    <p class="goods-sub-title c-black hide"></p>
-                    <p class="goods-price">
-                      <em>¥128.00</em>
-                    </p>
-                    <p class="goods-price-taobao  hide"></p>
-                  </div>
-                </a>
-              </li>
-              <li class="js-goods-card goods-card small-pic card ">
-                <a href="https://h5.youzan.com/v2/goods/27082kgcgmrqs" class="js-goods link clearfix" target="_blank" data-goods-id="342108270" title="寻找田野|新疆库车小白杏 400g*4盒  长在树上的白色蜂蜜">
-                  <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
-                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FhxXtAXp1pEauruMKjw2QZCuCjbQ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FhxXtAXp1pEauruMKjw2QZCuCjbQ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
-                  </div>
-                  <div class="info clearfix info-title info-price btn0">
-                    <p class=" goods-title ">寻找田野|新疆库车小白杏 400g*4盒 长在树上的白色蜂蜜</p>
-                    <p class="goods-sub-title c-black hide"></p>
-                    <p class="goods-price">
-                      <em>¥118.00</em>
-                    </p>
-                    <p class="goods-price-taobao ">138</p>
-                  </div>
-                </a>
-              </li>
-              <li class="js-goods-card goods-card small-pic card ">
-                <a href="https://h5.youzan.com/v2/goods/2fnugsg7z7xo4" class="js-goods link clearfix" target="_blank" data-goods-id="341654863" title="寻找田野|无锡阳山水蜜桃 可以吸着吃的水蜜桃 单果200g礼盒装顺丰直达">
-                  <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
-                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FvDOdNLYTkgPg8_LC16vBTKUkpDp.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FvDOdNLYTkgPg8_LC16vBTKUkpDp.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
-                  </div>
-                  <div class="info clearfix info-title info-price btn0">
-                    <p class=" goods-title ">寻找田野|无锡阳山水蜜桃 可以吸着吃的水蜜桃 单果200g礼盒装顺丰直达</p>
-                    <p class="goods-sub-title c-black hide"></p>
-                    <p class="goods-price">
-                      <em>¥178.00</em>
-                    </p>
-                    <p class="goods-price-taobao  hide"></p>
-                  </div>
-                </a>
-              </li>
-              <li class="js-goods-card goods-card small-pic card ">
-                <a href="https://h5.youzan.com/v2/goods/2ocrgu7fw6dic" class="js-goods link clearfix" target="_blank" data-goods-id="340716475" title="认养一头牛 安全无添加的好牛奶/酸奶">
-                  <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
-                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/06/14/FlAhOUgjHk6uwBhTmMW95hHPlVJh.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/06/14/FlAhOUgjHk6uwBhTmMW95hHPlVJh.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
-                  </div>
-                  <div class="info clearfix info-title info-price btn0">
-                    <p class=" goods-title ">认养一头牛 安全无添加的好牛奶/酸奶</p>
-                    <p class="goods-sub-title c-black hide"></p>
-                    <p class="goods-price">
-                      <em>¥60.00</em>
-                    </p>
-                    <p class="goods-price-taobao  hide"></p>
-                  </div>
-                </a>
-              </li>
-              <li class="js-goods-card goods-card small-pic card ">
-                <a href="https://h5.youzan.com/v2/goods/365anhqcodi84" class="js-goods link clearfix" target="_blank" data-goods-id="339552343" title="新西兰进口佳沛绿奇异果  多规格包邮 单果90g--110g">
-                  <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
-                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/06/02/FlFNqGPuFKS_DlTAoJTcX9VEDv_4.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/06/02/FlFNqGPuFKS_DlTAoJTcX9VEDv_4.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
-                  </div>
-                  <div class="info clearfix info-title info-price btn0">
-                    <p class=" goods-title ">新西兰进口佳沛绿奇异果 多规格包邮 单果90g--110g</p>
-                    <p class="goods-sub-title c-black hide"></p>
-                    <p class="goods-price">
-                      <em>¥35.00</em>
-                    </p>
-                    <p class="goods-price-taobao  hide"></p>
-                  </div>
-                </a>
-              </li>
-              <li class="js-goods-card goods-card small-pic card ">
-                <a href="https://h5.youzan.com/v2/goods/3f2rgi8pm8xgk" class="js-goods link clearfix" target="_blank" data-goods-id="339441682" title="四杰克系列葡萄酒 五星酒庄出品 750ML">
-                  <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
-                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/Fh2E3KeB4j0rAOdILQAC52F_B4hb.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/Fh2E3KeB4j0rAOdILQAC52F_B4hb.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
-                  </div>
-                  <div class="info clearfix info-title info-price btn0">
-                    <p class=" goods-title ">四杰克系列葡萄酒 五星酒庄出品 750ML</p>
-                    <p class="goods-sub-title c-black hide"></p>
-                    <p class="goods-price">
-                      <em>¥220.00</em>
-                    </p>
-                    <p class="goods-price-taobao  hide"></p>
-                  </div>
-                </a>
-              </li>
-              <li class="js-goods-card goods-card small-pic card ">
-                <a href="https://h5.youzan.com/v2/goods/273xg8phauxvo" class="js-goods link clearfix" target="_blank" data-goods-id="339414742" title="寻找田野|墨西哥进口牛油果 单果140g--180g  6个装 包邮">
-                  <div class="photo-block" data-width="1080" data-height="1080" style="background-color: rgb(255, 255, 255);">
-                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FuDDKJmd-yfvmaDUfk-PO-yETRwZ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FuDDKJmd-yfvmaDUfk-PO-yETRwZ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
-                  </div>
-                  <div class="info clearfix info-title info-price btn0">
-                    <p class=" goods-title ">寻找田野|墨西哥进口牛油果 单果140g--180g 6个装 包邮</p>
-                    <p class="goods-sub-title c-black hide"></p>
-                    <p class="goods-price">
-                      <em>¥98.00</em>
-                    </p>
-                    <p class="goods-price-taobao  hide"></p>
-                  </div>
-                </a>
-              </li>
-              <li class="js-goods-card goods-card small-pic card ">
-                <a href="https://h5.youzan.com/v2/goods/36a5xxtuihz10" class="js-goods link clearfix" target="_blank" data-goods-id="338917983" title="花园系列葡萄酒 五星酒庄出品 750ML">
-                  <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
-                    <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FoCENpKklzLyD5VpWVEtS0_jbGc8.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FoCENpKklzLyD5VpWVEtS0_jbGc8.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
-                  </div>
-                  <div class="info clearfix info-title info-price btn0">
-                    <p class=" goods-title ">花园系列葡萄酒 五星酒庄出品 750ML</p>
-                    <p class="goods-sub-title c-black hide"></p>
-                    <p class="goods-price">
-                      <em>¥268.00</em>
-                    </p>
-                    <p class="goods-price-taobao  hide"></p>
-                  </div>
-                </a>
-              </li>
-            </ul>
+          <div class="js-recommend">
+            <p class="center font-size-14 c-black" style="padding: 5px 0;margin-top: 10px;">更多精选商品</p>
+            <div class="js-recommend-goods-list">
+              <ul class="js-goods-list sc-goods-list pic clearfix size-1 " data-size="1" data-showtype="card" style="visibility: visible;">
+                <!-- 商品区域 -->
+                <!-- 展现类型判断 -->
+                <li class="js-goods-card goods-card small-pic card ">
+                  <a href="https://h5.youzan.com/v2/goods/2ov83y79gkn38" class="js-goods link clearfix" target="_blank" data-goods-id="343086880"
+                    title="【28号陆续发货】寻找田野|青海有机鲜枸杞 营养价值高安全无农残 吃水果一样吃枸杞">
+                    <div class="photo-block" data-width="750" data-height="750" style="background-color: rgb(255, 255, 255);">
+                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/11/FoN0SazpvslhoiiyuHETeyWHqzTE.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        src="https://img.yzcdn.cn/upload_files/2017/07/11/FoN0SazpvslhoiiyuHETeyWHqzTE.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        style="">
+                    </div>
+                    <div class="info clearfix info-title info-price btn0">
+                      <p class=" goods-title ">【28号陆续发货】寻找田野|青海有机鲜枸杞 营养价值高安全无农残 吃水果一样吃枸杞</p>
+                      <p class="goods-sub-title c-black hide"></p>
+                      <p class="goods-price">
+                        <em>¥88.00</em>
+                      </p>
+                      <p class="goods-price-taobao  hide"></p>
+                    </div>
+                  </a>
+                </li>
+                <li class="js-goods-card goods-card small-pic card ">
+                  <a href="https://h5.youzan.com/v2/goods/2g06s483u55no" class="js-goods link clearfix" target="_blank" data-goods-id="342718779"
+                    title="【米饭版和牛肉版】小龙坎方便火锅 只要一瓶矿泉水就能吃的地道四川火锅">
+                    <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
+                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/04/FidWCdQxsEMojh63W8GK016mwPAo.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        src="https://img.yzcdn.cn/upload_files/2017/07/04/FidWCdQxsEMojh63W8GK016mwPAo.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        style="">
+                    </div>
+                    <div class="info clearfix info-title info-price btn0">
+                      <p class=" goods-title ">【米饭版和牛肉版】小龙坎方便火锅 只要一瓶矿泉水就能吃的地道四川火锅</p>
+                      <p class="goods-sub-title c-black hide">不用火，不用电，一瓶矿泉水就能吃地道四川火锅</p>
+                      <p class="goods-price">
+                        <em>¥28.00</em>
+                      </p>
+                      <p class="goods-price-taobao  hide"></p>
+                    </div>
+                  </a>
+                </li>
+                <li class="js-goods-card goods-card small-pic card ">
+                  <a href="https://h5.youzan.com/v2/goods/1y8wz9sm8da8k" class="js-goods link clearfix" target="_blank" data-goods-id="342676309"
+                    title="寻找田野|绍兴黄酒 良宵 2012年古法手工原浆半干黄酒 礼盒装 送礼佳品">
+                    <div class="photo-block" data-width="750" data-height="750" style="background-color: rgb(255, 255, 255);">
+                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/04/Fq1yXSOb84HmElu-Qgrm65EmAeIz.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        src="https://img.yzcdn.cn/upload_files/2017/07/04/Fq1yXSOb84HmElu-Qgrm65EmAeIz.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        style="">
+                    </div>
+                    <div class="info clearfix info-title info-price btn0">
+                      <p class=" goods-title ">寻找田野|绍兴黄酒 良宵 2012年古法手工原浆半干黄酒 礼盒装 送礼佳品</p>
+                      <p class="goods-sub-title c-black hide"></p>
+                      <p class="goods-price">
+                        <em>¥128.00</em>
+                      </p>
+                      <p class="goods-price-taobao  hide"></p>
+                    </div>
+                  </a>
+                </li>
+                <li class="js-goods-card goods-card small-pic card ">
+                  <a href="https://h5.youzan.com/v2/goods/27082kgcgmrqs" class="js-goods link clearfix" target="_blank" data-goods-id="342108270"
+                    title="寻找田野|新疆库车小白杏 400g*4盒  长在树上的白色蜂蜜">
+                    <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FhxXtAXp1pEauruMKjw2QZCuCjbQ.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        src="https://img.yzcdn.cn/upload_files/2017/07/12/FhxXtAXp1pEauruMKjw2QZCuCjbQ.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        style="">
+                    </div>
+                    <div class="info clearfix info-title info-price btn0">
+                      <p class=" goods-title ">寻找田野|新疆库车小白杏 400g*4盒 长在树上的白色蜂蜜</p>
+                      <p class="goods-sub-title c-black hide"></p>
+                      <p class="goods-price">
+                        <em>¥118.00</em>
+                      </p>
+                      <p class="goods-price-taobao ">138</p>
+                    </div>
+                  </a>
+                </li>
+                <li class="js-goods-card goods-card small-pic card ">
+                  <a href="https://h5.youzan.com/v2/goods/2fnugsg7z7xo4" class="js-goods link clearfix" target="_blank" data-goods-id="341654863"
+                    title="寻找田野|无锡阳山水蜜桃 可以吸着吃的水蜜桃 单果200g礼盒装顺丰直达">
+                    <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FvDOdNLYTkgPg8_LC16vBTKUkpDp.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        src="https://img.yzcdn.cn/upload_files/2017/07/12/FvDOdNLYTkgPg8_LC16vBTKUkpDp.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        style="">
+                    </div>
+                    <div class="info clearfix info-title info-price btn0">
+                      <p class=" goods-title ">寻找田野|无锡阳山水蜜桃 可以吸着吃的水蜜桃 单果200g礼盒装顺丰直达</p>
+                      <p class="goods-sub-title c-black hide"></p>
+                      <p class="goods-price">
+                        <em>¥178.00</em>
+                      </p>
+                      <p class="goods-price-taobao  hide"></p>
+                    </div>
+                  </a>
+                </li>
+                <li class="js-goods-card goods-card small-pic card ">
+                  <a href="https://h5.youzan.com/v2/goods/2ocrgu7fw6dic" class="js-goods link clearfix" target="_blank" data-goods-id="340716475"
+                    title="认养一头牛 安全无添加的好牛奶/酸奶">
+                    <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
+                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/06/14/FlAhOUgjHk6uwBhTmMW95hHPlVJh.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        src="https://img.yzcdn.cn/upload_files/2017/06/14/FlAhOUgjHk6uwBhTmMW95hHPlVJh.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        style="">
+                    </div>
+                    <div class="info clearfix info-title info-price btn0">
+                      <p class=" goods-title ">认养一头牛 安全无添加的好牛奶/酸奶</p>
+                      <p class="goods-sub-title c-black hide"></p>
+                      <p class="goods-price">
+                        <em>¥60.00</em>
+                      </p>
+                      <p class="goods-price-taobao  hide"></p>
+                    </div>
+                  </a>
+                </li>
+                <li class="js-goods-card goods-card small-pic card ">
+                  <a href="https://h5.youzan.com/v2/goods/365anhqcodi84" class="js-goods link clearfix" target="_blank" data-goods-id="339552343"
+                    title="新西兰进口佳沛绿奇异果  多规格包邮 单果90g--110g">
+                    <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
+                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/06/02/FlFNqGPuFKS_DlTAoJTcX9VEDv_4.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        src="https://img.yzcdn.cn/upload_files/2017/06/02/FlFNqGPuFKS_DlTAoJTcX9VEDv_4.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        style="">
+                    </div>
+                    <div class="info clearfix info-title info-price btn0">
+                      <p class=" goods-title ">新西兰进口佳沛绿奇异果 多规格包邮 单果90g--110g</p>
+                      <p class="goods-sub-title c-black hide"></p>
+                      <p class="goods-price">
+                        <em>¥35.00</em>
+                      </p>
+                      <p class="goods-price-taobao  hide"></p>
+                    </div>
+                  </a>
+                </li>
+                <li class="js-goods-card goods-card small-pic card ">
+                  <a href="https://h5.youzan.com/v2/goods/3f2rgi8pm8xgk" class="js-goods link clearfix" target="_blank" data-goods-id="339441682"
+                    title="四杰克系列葡萄酒 五星酒庄出品 750ML">
+                    <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/Fh2E3KeB4j0rAOdILQAC52F_B4hb.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        src="https://img.yzcdn.cn/upload_files/2017/07/12/Fh2E3KeB4j0rAOdILQAC52F_B4hb.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        style="">
+                    </div>
+                    <div class="info clearfix info-title info-price btn0">
+                      <p class=" goods-title ">四杰克系列葡萄酒 五星酒庄出品 750ML</p>
+                      <p class="goods-sub-title c-black hide"></p>
+                      <p class="goods-price">
+                        <em>¥220.00</em>
+                      </p>
+                      <p class="goods-price-taobao  hide"></p>
+                    </div>
+                  </a>
+                </li>
+                <li class="js-goods-card goods-card small-pic card ">
+                  <a href="https://h5.youzan.com/v2/goods/273xg8phauxvo" class="js-goods link clearfix" target="_blank" data-goods-id="339414742"
+                    title="寻找田野|墨西哥进口牛油果 单果140g--180g  6个装 包邮">
+                    <div class="photo-block" data-width="1080" data-height="1080" style="background-color: rgb(255, 255, 255);">
+                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FuDDKJmd-yfvmaDUfk-PO-yETRwZ.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        src="https://img.yzcdn.cn/upload_files/2017/07/12/FuDDKJmd-yfvmaDUfk-PO-yETRwZ.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        style="">
+                    </div>
+                    <div class="info clearfix info-title info-price btn0">
+                      <p class=" goods-title ">寻找田野|墨西哥进口牛油果 单果140g--180g 6个装 包邮</p>
+                      <p class="goods-sub-title c-black hide"></p>
+                      <p class="goods-price">
+                        <em>¥98.00</em>
+                      </p>
+                      <p class="goods-price-taobao  hide"></p>
+                    </div>
+                  </a>
+                </li>
+                <li class="js-goods-card goods-card small-pic card ">
+                  <a href="https://h5.youzan.com/v2/goods/36a5xxtuihz10" class="js-goods link clearfix" target="_blank" data-goods-id="338917983"
+                    title="花园系列葡萄酒 五星酒庄出品 750ML">
+                    <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FoCENpKklzLyD5VpWVEtS0_jbGc8.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        src="https://img.yzcdn.cn/upload_files/2017/07/12/FoCENpKklzLyD5VpWVEtS0_jbGc8.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
+                        style="">
+                    </div>
+                    <div class="info clearfix info-title info-price btn0">
+                      <p class=" goods-title ">花园系列葡萄酒 五星酒庄出品 750ML</p>
+                      <p class="goods-sub-title c-black hide"></p>
+                      <p class="goods-price">
+                        <em>¥268.00</em>
+                      </p>
+                      <p class="goods-price-taobao  hide"></p>
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <p class="center" style="margin: 10px 0 20px;">
+              <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" class="center btn btn-white btn-xsmall font-size-14 "
+                style="padding:8px 26px;">进店逛逛&gt;</a>
+            </p>
           </div>
-          <p class="center" style="margin: 10px 0 20px;">
-            <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" class="center btn btn-white btn-xsmall font-size-14 " style="padding:8px 26px;">进店逛逛&gt;</a>
-          </p>
         </div>
+        <div id="shop-nav"></div>
       </div>
-      <div id="shop-nav"></div>
     </div>
-  </div>
-  <div class="js-footer" style="min-height: 1px;">
-    <div>
-      <div class="footer">
-        <div class="copyright">
-          <div class="ft-links">
-            <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" target="_blank">店铺主页</a>
-            <a href="https://h5.youzan.com/v2/showcase/usercenter?kdt_id=16546132" target="_blank">会员中心</a>
-            <a href="javascript:;" class="js-open-follow">关注我们</a>
-            <a href="https://h5.youzan.com/v2/showcase/cert" target="_blank">店铺信息</a>
-            <!-- 第三方app隐藏topbar时，需要在底部显示购物记录入口 -->
-          </div>
-          <div class="ft-copyright " style="background-image: url(https://img.yzcdn.cn/upload_files/2017/06/16/FgtL3QzprXTGrVPaolozNT08Xs2K.png);">
+    <div class="js-footer" style="min-height: 1px;">
+      <div>
+        <div class="footer">
+          <div class="copyright">
+            <div class="ft-links">
+              <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" target="_blank">店铺主页</a>
+              <a href="https://h5.youzan.com/v2/showcase/usercenter?kdt_id=16546132" target="_blank">会员中心</a>
+              <a href="javascript:;" class="js-open-follow">关注我们</a>
+              <a href="https://h5.youzan.com/v2/showcase/cert" target="_blank">店铺信息</a>
+              <!-- 第三方app隐藏topbar时，需要在底部显示购物记录入口 -->
+            </div>
+            <div class="ft-copyright " style="background-image: url(https://img.yzcdn.cn/upload_files/2017/06/16/FgtL3QzprXTGrVPaolozNT08Xs2K.png);">
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;">
-    <div id="trans-tooltip">
-      <div id="tip-left-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png&quot;);"></div>
-      <div id="tip-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png&quot;) repeat-x;"></div>
-      <div id="tip-right-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png&quot;);"></div>
-      <div id="tip-right" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png&quot;) repeat-y;"></div>
-      <div id="tip-right-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png&quot;);"></div>
-      <div id="tip-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png&quot;) repeat-x;"></div>
-      <div id="tip-left-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png&quot;);"></div>
-      <div id="tip-left" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png&quot;);"></div>
-      <div id="trans-content"></div>
-    </div>
-    <div id="tip-arrow-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png&quot;);"></div>
-    <div id="tip-arrow-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png&quot;);"></div>
-  </div>
-  <div class="search-bar" style="display:none;">
-    <form class="search-form" action="https://h5.youzan.com/v2/search" method="GET">
-      <input type="search" class="search-input" placeholder="搜索商品" name="q" value="">
-      <input type="hidden" name="kdt_id" value="16546132"><a class="js-search-cancel search-cancel" href="javascript:;">取消</a><span class="search-icon"></span><span class="close-icon hide"></span></form>
-    <div class="history-wrap center">
-      <ul class="history-list search-recom-list js-history-list clearfix"></ul><a class="tag tag-clear js-tag-clear c-gray-darker hide" href="javascript:;">清除历史搜索</a></div>
-  </div>
-  <div id="yFzBKP9GDL" style="height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; transition: none 0.2s ease; opacity: 1; display: none;"></div>
-  <div id="QfEqtDbeK9" class="sku-layout sku-box-shadow popup" style="overflow: hidden; position: absolute; z-index: 1000; background: white; bottom: 0px; left: 0px; right: 0px; visibility: visible; transform: translate3d(0px, 0px, 0px); transition: all 300ms ease; opacity: 1; display: none;">
-    <div class="sku-layout-title name-card sku-name-card">
-      <div class="thumb"><img class="js-goods-thumb goods-thumb" src="https://img.yzcdn.cn/upload_files/2017/07/12/FkSvYz8FLLD9-t0smXO43hF6ov7S.jpg?imageView2/2/w/100/h/100/q/75/format/webp?imageView2/2/w/100/h/100/q/75/format/webp" alt=""></div>
-      <div class="detail goods-base-info clearfix">
-        <p class="title c-black ellipsis">寻找田野|最正宗的上海南汇8424 得奖最多奥运会指定西瓜1只/箱 9-11斤</p>
-        <div class="goods-price clearfix">
-          <div class="current-price pull-left c-black">
-            <span class="price-name pull-left font-size-14 c-orange">¥</span><i class="js-goods-price price font-size-16 vertical-middle c-orange">98.00</i>
-          </div>
-          <div class="original-price vertical-middle font-size-14 line-through">108</div>
-        </div>
-      </div>
-      <div class="js-cancel sku-cancel">
-        <div class="cancel-img"></div>
+    <div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;">
+      <div id="trans-tooltip">
+        <div id="tip-left-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png&quot;);"></div>
+        <div id="tip-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png&quot;) repeat-x;"></div>
+        <div id="tip-right-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png&quot;);"></div>
+        <div id="tip-right" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png&quot;) repeat-y;"></div>
+        <div id="tip-right-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png&quot;);"></div>
+        <div id="tip-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png&quot;) repeat-x;"></div>
+        <div id="tip-left-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png&quot;);"></div>
+        <div id="tip-left" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png&quot;);"></div>
+        <div id="trans-content"></div>
       </div>
+      <div id="tip-arrow-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png&quot;);"></div>
+      <div id="tip-arrow-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png&quot;);"></div>
     </div>
-    <div class="sku-detail adv-opts hotel-checkin-select" style="border: none; margin: 0; display: none;">
-      <div class="sku-detail-inner adv-opts-inner-addons">
-        <dl class="sku-group select-sku js-select-checkin-date">
-          <dt>时间：</dt>
-          <dd class="js-checkin-date-value">选择入住时间</dd>
-        </dl>
-      </div>
+    <div class="search-bar" style="display:none;">
+      <form class="search-form" action="https://h5.youzan.com/v2/search" method="GET">
+        <input type="search" class="search-input" placeholder="搜索商品" name="q" value="">
+        <input type="hidden" name="kdt_id" value="16546132"><a class="js-search-cancel search-cancel" href="javascript:;">取消</a>
+        <span class="search-icon"></span><span class="close-icon hide"></span></form>
+      <div class="history-wrap center">
+        <ul class="history-list search-recom-list js-history-list clearfix"></ul><a class="tag tag-clear js-tag-clear c-gray-darker hide" href="javascript:;">清除历史搜索</a></div>
     </div>
-    <div class="adv-opts layout-content" style="max-height: 554px;">
-      <div class="goods-models js-sku-views block block-list border-top-0">
-        <dl class="clearfix block-item sku-list-container">
-          <dt class="model-title sku-sel-title">
-            <label>净含量：</label>
-          </dt>
-          <dd>
-            <ul class="model-list sku-sel-list">
-              <li class="tag sku-tag pull-left ellipsis active">4500g-5000g</li>
-            </ul>
-          </dd>
-        </dl>
-        <dl class="clearfix block-item">
-          <dt class="sku-num pull-left">
-            <label>购买数量：</label>
-          </dt>
-          <dd class="sku-quantity-contaienr">
-            <dl class="clearfix">
-              <div class="quantity">
-                <button class="minus disabled" type="button" disabled="true"></button>
-                <input type="text" class="txt" pattern="[0-9]*" value="1">
-                <button class="plus" type="button"></button>
-                <div class="response-area response-area-minus"></div>
-                <div class="response-area response-area-plus"></div>
+    <!-- 阴影层 -->
+    <div id="yFzBKP9GDL" style="height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; transition: none 0.2s ease; opacity: 1;"
+      v-show="showSku" @click="showSku=false"></div>
+    <transition name="fade">
+      <div id="QfEqtDbeK9" class="sku-layout sku-box-shadow popup" style="overflow: hidden; position: fixed; z-index: 1000; background: white; bottom: 0px; left: 0px; right: 0px; visibility: visible;"
+        v-show="showSku">
+        <div class="sku-layout-title name-card sku-name-card">
+          <div class="thumb"><img class="js-goods-thumb goods-thumb" src="https://img.yzcdn.cn/upload_files/2017/07/12/FkSvYz8FLLD9-t0smXO43hF6ov7S.jpg?imageView2/2/w/100/h/100/q/75/format/webp?imageView2/2/w/100/h/100/q/75/format/webp"
+              alt=""></div>
+          <div class="detail goods-base-info clearfix">
+            <p class="title c-black ellipsis">寻找田野|最正宗的上海南汇8424 得奖最多奥运会指定西瓜1只/箱 9-11斤</p>
+            <div class="goods-price clearfix">
+              <div class="current-price pull-left c-black">
+                <span class="price-name pull-left font-size-14 c-orange">¥</span><i class="js-goods-price price font-size-16 vertical-middle c-orange">98.00</i>
               </div>
-            </dl>
-          </dd>
-          <dt class="other-info">
-            <div class="stock">剩余450件
+              <div class="original-price vertical-middle font-size-14 line-through">108</div>
             </div>
-          </dt>
-        </dl>
-        <div class="block-item block-item-messages" style="display: none;">
-        </div>
-      </div>
-      <!-- <div class="bottom-padding"></div> -->
-      <div class="confirm-action content-foot clearfix">
-        <!-- 加入购物车 -->
-        <div class="big-btn-1-1" style="display: none;">
-          <a href="javascript:;" class="js-confirm-it big-btn red-btn main-btn">加入购物车</a>
+          </div>
+          <div class="js-cancel sku-cancel" @click="showSku=false">
+            <div class="cancel-img"></div>
+          </div>
         </div>
-        <!-- 立即购买 -->
-        <div class="big-btn-1-1">
-          <a href="javascript:;" class="js-confirm-it big-btn red-btn main-btn">下一步</a>
+        <div class="sku-detail adv-opts hotel-checkin-select" style="border: none; margin: 0; display: none;">
+          <div class="sku-detail-inner adv-opts-inner-addons">
+            <dl class="sku-group select-sku js-select-checkin-date">
+              <dt>时间：</dt>
+              <dd class="js-checkin-date-value">选择入住时间</dd>
+            </dl>
+          </div>
         </div>
-        <!-- 选择规格 -->
-        <div class="big-btn-2-1" style="display: none;">
-          <a href="javascript:;" class="js-mutiBtn-confirm cart big-btn orange-btn vice-btn">加入购物车</a>
-          <a href="javascript:;" class="js-mutiBtn-confirm confirm big-btn red-btn main-btn">立即购买</a>
+        <div class="adv-opts layout-content" style="max-height: 554px;">
+          <div class="goods-models js-sku-views block block-list border-top-0">
+            <dl class="clearfix block-item sku-list-container" v-for="sku in details.skuList">
+              <dt class="model-title sku-sel-title">
+                <label>{{sku.title}}：</label>
+              </dt>
+              <dd>
+                <ul class="model-list sku-sel-list">
+                  <li class="tag sku-tag pull-left ellipsis" :class="{active:item.active}" v-for="(item,index) in sku.lists" @click="chooseTag(item,index,sku.lists)">{{item.tag}}</li>
+                </ul>
+              </dd>
+            </dl>
+            <dl class="clearfix block-item">
+              <dt class="sku-num pull-left">
+                <label>购买数量：</label>
+              </dt>
+              <dd class="sku-quantity-contaienr">
+                <dl class="clearfix">
+                  <div class="quantity">
+                    <button class="minus " type="button" :class="{disabled:skuNum===1}"></button>
+                    <input type="text" class="txt" pattern="[0-9]*" :value="skuNum">
+                    <button class="plus" type="button"></button>
+                    <div class="response-area response-area-minus" @click="changeSkuNum(-1)"></div>
+                    <div class="response-area response-area-plus" @click="changeSkuNum(1)"></div>
+                  </div>
+                </dl>
+              </dd>
+              <dt class="other-info">
+                <div class="stock">剩余450件
+                </div>
+              </dt>
+            </dl>
+            <div class="block-item block-item-messages" style="display: none;">
+            </div>
+          </div>
+          <!-- <div class="bottom-padding"></div> -->
+          <div class="confirm-action content-foot clearfix">
+            <!-- 加入购物车 -->
+            <div class="big-btn-1-1" v-show="skuType==2">
+              <a href="javascript:;" class="js-confirm-it big-btn red-btn main-btn" @click="addCart">加入购物车</a>
+            </div>
+            <!-- 立即购买 -->
+            <div class="big-btn-1-1" v-show="skuType==3">
+              <a href="javascript:;" class="js-confirm-it big-btn red-btn main-btn">下一步</a>
+            </div>
+            <!-- 选择规格 -->
+            <div class="big-btn-2-1" v-show="skuType==1">
+              <a href="javascript:;" class="js-mutiBtn-confirm cart big-btn orange-btn vice-btn" @click="addCart">加入购物车</a>
+              <a href="javascript:;" class="js-mutiBtn-confirm confirm big-btn red-btn main-btn">立即购买</a>
+            </div>
+          </div>
         </div>
       </div>
+    </transition>
+    <div class="motify" :style="{display: showAddMessage?'block':'none'}">
+      <div class="motify-inner">已成功添加到购物车</div>
     </div>
   </div>
-  <div class="motify" style="display: none;">
-    <div class="motify-inner">已成功添加到购物车</div>
-  </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/pages/goods/goods.js b/src/pages/goods/goods.js
index a5abe25..45c133a 100644
--- a/src/pages/goods/goods.js
+++ b/src/pages/goods/goods.js
@@ -3,4 +3,116 @@ import './goods_custom.css'
 import './goods.css'
 import './goods_theme.css'
 import './goods_mars.css'
-import './goods_sku.css'
\ No newline at end of file
+import './goods_sku.css'
+import './goods_transition.css'
+
+import Vue from 'vue'
+import url from 'js/api.js'
+import axios from 'axios'
+import mixin from 'js/mixin.js'
+import qs from 'qs'
+import Swipe from 'components/Swipe.vue'
+
+console.log(Swipe)
+
+let { id } = qs.parse(location.search.substr(1))
+
+let detailTab = ['商品详情', '本店成交']
+
+new Vue({
+  el: '#app',
+  data: {
+    details: null,
+    detailTab,
+    tabIndex: 0,
+    dealLists: null,
+    swipeLists: [],
+    showSku: false,
+    skuType: 1,
+    skuNum: 1,
+    isAddCart: false,
+    showAddMessage: false
+  },
+  created() {
+    this.getDetails()
+  },
+  methods: {
+    getDetails() {
+      axios.post(url.details, { id }).then(res => {
+        // 先修改数据结构，再赋值
+        let data = res.data.data
+        data.skuList.forEach(sku => {
+          let lists = []
+          sku.lists.forEach(item => {
+            lists.push({
+              active: false,
+              tag: item
+            })
+          })
+          sku.lists = lists
+        })
+
+        this.details = data
+        this.details.imgs.forEach(item => {
+          this.swipeLists.push({
+            clickUrl: '',
+            image: item
+          })
+        })
+      })
+    },
+    changeTabIndex(index) {
+      this.tabIndex = index
+      if (index) {
+        this.getDeal()
+      }
+    },
+    getDeal() {
+      axios.post(url.deal, { id }).then(res => {
+        this.dealLists = res.data.data.lists
+      })
+    },
+    chooseSku(type) {
+      this.showSku = true
+      this.skuType = type
+    },
+    chooseTag(item, index, arr) {
+      if (item.active) {
+        item.active = false
+      } else {
+        arr.forEach((cur, i) => {
+          cur.active = i === index
+        })
+      }
+    },
+    changeSkuNum(num) {
+      if (num < 0 && this.skuNum === 1) return
+      this.skuNum += num
+    },
+    addCart() {
+      axios(url.cartAdd, {id, number: this.skuNum}).then(res => {
+        if(res.data.status === 200 ){
+          this.isAddCart = true
+          this.showSku = false
+          this.showAddMessage = true
+          setTimeout(() => {
+            this.showAddMessage = false
+          },1000)
+        }
+      })
+    }
+  },
+  components: {
+    Swipe
+  },
+  watch: {
+    showSku(val) {
+      document.body.style.overflow = val ? 'hidden' : 'auto'
+      document.body.style.height = val ? '100%' : 'auto'
+      document.querySelector('html').style.overflow = val ? 'hidden' : 'auto'
+      document.querySelector('html').style.height = val ? '100%' : 'auto'
+    }
+  },
+  mixins: [mixin]
+})
+
diff --git a/src/pages/goods/goods_transition.css b/src/pages/goods/goods_transition.css
new file mode 100644
index 0000000..467d287
--- /dev/null
+++ b/src/pages/goods/goods_transition.css
@@ -0,0 +1,7 @@
+.fade-enter-active, .fade-leave-active {
+  transition: all 300ms ease;
+  transform: translateY(0);
+}
+.fade-enter, .fade-leave-to  {
+  transform: translateY(100%);
+}
diff --git a/src/pages/index/index.html b/src/pages/index/index.html
index 88e6948..750d36e 100644
--- a/src/pages/index/index.html
+++ b/src/pages/index/index.html
@@ -69,7 +69,7 @@
               infinite-scroll-distance="10">
               <li v-for="list in lists" :key="list.id">
                 <div class="goods-item">
-                  <a href="https://h5.youzan.com/v2/showcase/goods?alias=2fwig6rnqfq6m&amp;source=yzapp&amp;f_platform=yzapp">
+                  <a :href="'goods.html?id='+list.id">
                     <div class="thumb img-box">
                       <img class="fadeIn" v-bind:src="list.img">
                     </div>

From 33ad1df61dbf0168c3154f6a22f877c9d14df542 Mon Sep 17 00:00:00 2001
From: tony <fangtao_2008@163.com>
Date: Sun, 20 Aug 2017 22:57:23 +0800
Subject: [PATCH 15/15] add v-cloak

---
 src/pages/goods/goods.css  |   2 +-
 src/pages/goods/goods.html | 787 ++++++++++++++++++-------------------
 2 files changed, 381 insertions(+), 408 deletions(-)

diff --git a/src/pages/goods/goods.css b/src/pages/goods/goods.css
index be25078..2e9061e 100644
--- a/src/pages/goods/goods.css
+++ b/src/pages/goods/goods.css
@@ -2595,7 +2595,7 @@ only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
   .list-finished span,
   .loading-more span {
-    background-image: url("/v2/image/loader@2x.gif")
+    background-image: url("https://b.yzcdn.cn/v2/image/loader@2x.gif")
   }
 }
 
diff --git a/src/pages/goods/goods.html b/src/pages/goods/goods.html
index 0682e79..b2a324d 100644
--- a/src/pages/goods/goods.html
+++ b/src/pages/goods/goods.html
@@ -19,127 +19,132 @@
   <!-- <link rel="stylesheet" href="./css/goods_theme.css"> -->
   <!-- <link rel="stylesheet" href="./css/goods_mars.css"> -->
   <!-- <link rel="stylesheet" href="./css/goods_sku.css"> -->
+  <style>
+    [v-cloak] {
+      display: none;
+    }
+  </style>
 </head>
 
 <body class=" body-fixed-bottom default-theme">
-  <div id="app" v-if="details">
-    <div class="container wap-goods internal-purchase" style="min-height: 617px;">
-      <div class="content no-sidebar">
-        <div class="content-body">
-          <swipe :lists="swipeLists"></swipe>
-
-          <div class="goods-header">
-            <h2 class="title">{{details.title}}</h2>
-            <span class="hide js-add-wish js-wish-animate wish-add  font-size-12 tag tag-redf30 pull-right">
+  <div id="app" v-cloak>
+    <div v-if="details" >
+      <div class="container wap-goods internal-purchase" style="min-height: 617px;">
+        <div class="content no-sidebar">
+          <div class="content-body">
+            <swipe :lists="swipeLists"></swipe>
+            <div class="goods-header">
+              <h2 class="title">{{details.title}}</h2>
+              <span class="hide js-add-wish js-wish-animate wish-add  font-size-12 tag tag-redf30 pull-right">
                 喜欢
             </span>
-            <div class="goods-price ">
-              <div class="current-price">
-                <span>¥</span><i class="js-goods-price price">{{details.price | currency}}</i>
+              <div class="goods-price ">
+                <div class="current-price">
+                  <span>¥</span><i class="js-goods-price price">{{details.price | currency}}</i>
+                </div>
+                <span class="btn btn-blue btn-retail hide js-retail-btn">门店有售</span>
+                <div class="original-price">
+                  {{details.originalPrice | currency}} </div>
+              </div>
+              <hr class="with-margin-l">
+              <div class="stock-detail">
+                <dl>
+                  <dt>运费:</dt>
+                  <dd class="js-postage-desc" data-postage="免运费">
+                    {{details.postage}} </dd>
+                </dl>
+                <dl>
+                  <dt>剩余:</dt>
+                  <dd>{{details.remain}}</dd>
+                </dl>
+                <dl>
+                  <dt>销量:</dt>
+                  <dd>{{details.sales}}</dd>
+                </dl>
               </div>
-              <span class="btn btn-blue btn-retail hide js-retail-btn">门店有售</span>
-              <div class="original-price">
-                {{details.originalPrice | currency}} </div>
-            </div>
-            <hr class="with-margin-l">
-            <div class="stock-detail">
-              <dl>
-                <dt>运费:</dt>
-                <dd class="js-postage-desc" data-postage="免运费">
-                  {{details.postage}} </dd>
-              </dl>
-              <dl>
-                <dt>剩余:</dt>
-                <dd>{{details.remain}}</dd>
-              </dl>
-              <dl>
-                <dt>销量:</dt>
-                <dd>{{details.sales}}</dd>
-              </dl>
-            </div>
-          </div>
-          <div class="sku-detail adv-opts">
-            <div class="sku-detail-inner adv-opts-inner">
-              <dl class="sku-group select-sku js-select-sku" @click="chooseSku(1)">
-                <dt><span class="js-sku-label">选择</span>：</dt>
-                <dd class="js-sku-value">
-                  <span class="sku-item">净含量</span> </dd>
-              </dl>
             </div>
-          </div>
-          <div class="js-store-info">
-            <div class="block block-list goods-store">
-              <div class="custom-store block-item ">
-                <a class="custom-store-link clearfix" href="https://h5.youzan.com/v2/home/cz0mk59k">
-                  <div class="custom-store-img"></div>
-                  <div class="custom-store-name">
-                    {{details.storeName}} </div>
-                  <span class="custom-store-enter">进入店铺</span>
-                </a>
+            <div class="sku-detail adv-opts">
+              <div class="sku-detail-inner adv-opts-inner">
+                <dl class="sku-group select-sku js-select-sku" @click="chooseSku(1)">
+                  <dt><span class="js-sku-label">选择</span>：</dt>
+                  <dd class="js-sku-value">
+                    <span class="sku-item">净含量</span> </dd>
+                </dl>
               </div>
-              <a class="offline-store block-item js-retail-store hide">
+            </div>
+            <div class="js-store-info">
+              <div class="block block-list goods-store">
+                <div class="custom-store block-item ">
+                  <a class="custom-store-link clearfix" href="https://h5.youzan.com/v2/home/cz0mk59k">
+                    <div class="custom-store-img"></div>
+                    <div class="custom-store-name">
+                      {{details.storeName}} </div>
+                    <span class="custom-store-enter">进入店铺</span>
+                  </a>
+                </div>
+                <a class="offline-store block-item js-retail-store hide">
               <span class="offline-store-img"></span>
               <span class="offline-store-name">线下门店</span>
               <div class="offline-store-branch js-retail-store-name"></div>
             </a>
-              <div class="renzheng block-item">
-                <span class="js-rz-item-alert rz-item" v-for="item in details.identification">
+                <div class="renzheng block-item">
+                  <span class="js-rz-item-alert rz-item" v-for="item in details.identification">
                   <span class="rz-name font-size-12 c-gray-darker">{{item}}</span>
-                </span>
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-          <a class="js-package-buy-block hide"></a>
-          <div class="js-detail-container" style="margin-top: 10px;">
-            <div class="js-tabber-container goods-detail">
-              <div class="js-tabber tabber tabber-n2 clearfix orange">
-                <button data-type="goods" :class="{active:tabIndex===index}" v-for="(item,index) in detailTab" @click="changeTabIndex(index)">
-                {{item}} </button>
-              </div>
-              <div class="js-tabber-content">
-                <div class="js-part" v-show="tabIndex==1" data-type="sales">
-                  <div class="js-traderecord-list block-list-traderecord">
-                    <div class="list-header">
-                      <span class="col-1">买家</span>
-                      <span class="col-2 center">成交时间</span>
-                      <span class="col-3 center">数量</span>
-                    </div>
-                    <div class="js-list b-list block block-list">
-                      <div class="block-item" v-for="list in dealLists">
-                        <span class="col-1 c-gray-darker">{{list.buyer}}</span>
-                        <span class="col-2 c-gray-dark center">{{list.time}}</span>
-                        <span class="col-3 c-gray-darker center">{{list.num}}</span>
+            <a class="js-package-buy-block hide"></a>
+            <div class="js-detail-container" style="margin-top: 10px;">
+              <div class="js-tabber-container goods-detail">
+                <div class="js-tabber tabber tabber-n2 clearfix orange">
+                  <button data-type="goods" :class="{active:tabIndex===index}" v-for="(item,index) in detailTab" @click="changeTabIndex(index)">
+                    {{item}} </button>
+                </div>
+                <div class="js-tabber-content">
+                  <div class="js-part" v-show="tabIndex==1" data-type="sales">
+                    <div class="js-traderecord-list block-list-traderecord">
+                      <div class="list-header">
+                        <span class="col-1">买家</span>
+                        <span class="col-2 center">成交时间</span>
+                        <span class="col-3 center">数量</span>
+                      </div>
+                      <div class="js-list b-list block block-list">
+                        <div class="block-item" v-for="list in dealLists">
+                          <span class="col-1 c-gray-darker">{{list.buyer}}</span>
+                          <span class="col-2 c-gray-dark center">{{list.time}}</span>
+                          <span class="col-3 c-gray-darker center">{{list.num}}</span>
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div class="js-part js-goods-detail goods-tabber-c" data-type="goods" v-html="details.description" v-show="tabIndex==0">
+                  <div class="js-part js-goods-detail goods-tabber-c" data-type="goods" v-html="details.description" v-show="tabIndex==0">
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="js-bottom-opts js-footer-auto-ele stick-bottom">
-            <div class="stick-bottom-icons">
-              <a href="javascript:;" class="js-yz-im icons icons-im ">店主</a>
-              <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" class="js-call-im icons icons-home">店铺</a>
-              <a href="javascript:;" class="js-yz-zan icons icons-zan ">收藏</a>
-            </div>
-            <div class="stick-bottom-btns">
-              <div class="btn-cart">
-                <a class="js-add-cart" @click="chooseSku(2)">加入购物车</a>
+            <div class="js-bottom-opts js-footer-auto-ele stick-bottom">
+              <div class="stick-bottom-icons">
+                <a href="javascript:;" class="js-yz-im icons icons-im ">店主</a>
+                <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" class="js-call-im icons icons-home">店铺</a>
+                <a href="javascript:;" class="js-yz-zan icons icons-zan ">收藏</a>
               </div>
-              <div class="btn-buy">
-                <a href="javascript:;" class="js-buy-it" @click="chooseSku(3)">立即购买</a>
+              <div class="stick-bottom-btns">
+                <div class="btn-cart">
+                  <a class="js-add-cart" @click="chooseSku(2)">加入购物车</a>
+                </div>
+                <div class="btn-buy">
+                  <a href="javascript:;" class="js-buy-it" @click="chooseSku(3)">立即购买</a>
+                </div>
               </div>
-            </div>
-            <!-- 商品是否已售罄  -->
-            <!-- <div class="stick-bottom-btns">
+              <!-- 商品是否已售罄  -->
+              <!-- <div class="stick-bottom-btns">
               <div class="btn-1-1">
                 <div class="disabled f16">商品已售罄</div>
               </div>
             </div> -->
-          </div>
-          <!-- <div id="right-icon" class="js-right-icon hide">
+            </div>
+            <!-- <div id="right-icon" class="js-right-icon hide">
           <div class="js-right-icon-container right-icon-container clearfix">
             <a id="global-cart" href="https://h5.youzan.com/v2/trade/cart?kdt_id=16546132" class="icon hide" style="">
               <p class="icon-img"></p>
@@ -148,340 +153,308 @@ <h2 class="title">{{details.title}}</h2>
             <a class="js-show-more-btn icon show-more-btn hide"></a>
           </div>
         </div> -->
-          <div id="right-icon" class="js-right-icon " v-show="isAddCart">
-            <div class="js-right-icon-container right-icon-container clearfix">
-              <a id="global-cart" href="https://h5.youzan.com/v2/trade/cart?kdt_id=16546132" class="icon new s0" style="">
-                <p class="icon-img"></p>
-                <p class="icon-txt">购物车</p>
-              </a>
-              <a class="js-show-more-btn icon show-more-btn "></a>
+            <div id="right-icon" class="js-right-icon " v-show="isAddCart">
+              <div class="js-right-icon-container right-icon-container clearfix">
+                <a id="global-cart" href="https://h5.youzan.com/v2/trade/cart?kdt_id=16546132" class="icon new s0" style="">
+                  <p class="icon-img"></p>
+                  <p class="icon-txt">购物车</p>
+                </a>
+                <a class="js-show-more-btn icon show-more-btn "></a>
+              </div>
             </div>
-          </div>
-          <div class="js-recommend">
-            <p class="center font-size-14 c-black" style="padding: 5px 0;margin-top: 10px;">更多精选商品</p>
-            <div class="js-recommend-goods-list">
-              <ul class="js-goods-list sc-goods-list pic clearfix size-1 " data-size="1" data-showtype="card" style="visibility: visible;">
-                <!-- 商品区域 -->
-                <!-- 展现类型判断 -->
-                <li class="js-goods-card goods-card small-pic card ">
-                  <a href="https://h5.youzan.com/v2/goods/2ov83y79gkn38" class="js-goods link clearfix" target="_blank" data-goods-id="343086880"
-                    title="【28号陆续发货】寻找田野|青海有机鲜枸杞 营养价值高安全无农残 吃水果一样吃枸杞">
-                    <div class="photo-block" data-width="750" data-height="750" style="background-color: rgb(255, 255, 255);">
-                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/11/FoN0SazpvslhoiiyuHETeyWHqzTE.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        src="https://img.yzcdn.cn/upload_files/2017/07/11/FoN0SazpvslhoiiyuHETeyWHqzTE.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        style="">
-                    </div>
-                    <div class="info clearfix info-title info-price btn0">
-                      <p class=" goods-title ">【28号陆续发货】寻找田野|青海有机鲜枸杞 营养价值高安全无农残 吃水果一样吃枸杞</p>
-                      <p class="goods-sub-title c-black hide"></p>
-                      <p class="goods-price">
-                        <em>¥88.00</em>
-                      </p>
-                      <p class="goods-price-taobao  hide"></p>
-                    </div>
-                  </a>
-                </li>
-                <li class="js-goods-card goods-card small-pic card ">
-                  <a href="https://h5.youzan.com/v2/goods/2g06s483u55no" class="js-goods link clearfix" target="_blank" data-goods-id="342718779"
-                    title="【米饭版和牛肉版】小龙坎方便火锅 只要一瓶矿泉水就能吃的地道四川火锅">
-                    <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
-                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/04/FidWCdQxsEMojh63W8GK016mwPAo.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        src="https://img.yzcdn.cn/upload_files/2017/07/04/FidWCdQxsEMojh63W8GK016mwPAo.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        style="">
-                    </div>
-                    <div class="info clearfix info-title info-price btn0">
-                      <p class=" goods-title ">【米饭版和牛肉版】小龙坎方便火锅 只要一瓶矿泉水就能吃的地道四川火锅</p>
-                      <p class="goods-sub-title c-black hide">不用火，不用电，一瓶矿泉水就能吃地道四川火锅</p>
-                      <p class="goods-price">
-                        <em>¥28.00</em>
-                      </p>
-                      <p class="goods-price-taobao  hide"></p>
-                    </div>
-                  </a>
-                </li>
-                <li class="js-goods-card goods-card small-pic card ">
-                  <a href="https://h5.youzan.com/v2/goods/1y8wz9sm8da8k" class="js-goods link clearfix" target="_blank" data-goods-id="342676309"
-                    title="寻找田野|绍兴黄酒 良宵 2012年古法手工原浆半干黄酒 礼盒装 送礼佳品">
-                    <div class="photo-block" data-width="750" data-height="750" style="background-color: rgb(255, 255, 255);">
-                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/04/Fq1yXSOb84HmElu-Qgrm65EmAeIz.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        src="https://img.yzcdn.cn/upload_files/2017/07/04/Fq1yXSOb84HmElu-Qgrm65EmAeIz.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        style="">
-                    </div>
-                    <div class="info clearfix info-title info-price btn0">
-                      <p class=" goods-title ">寻找田野|绍兴黄酒 良宵 2012年古法手工原浆半干黄酒 礼盒装 送礼佳品</p>
-                      <p class="goods-sub-title c-black hide"></p>
-                      <p class="goods-price">
-                        <em>¥128.00</em>
-                      </p>
-                      <p class="goods-price-taobao  hide"></p>
-                    </div>
-                  </a>
-                </li>
-                <li class="js-goods-card goods-card small-pic card ">
-                  <a href="https://h5.youzan.com/v2/goods/27082kgcgmrqs" class="js-goods link clearfix" target="_blank" data-goods-id="342108270"
-                    title="寻找田野|新疆库车小白杏 400g*4盒  长在树上的白色蜂蜜">
-                    <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
-                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FhxXtAXp1pEauruMKjw2QZCuCjbQ.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        src="https://img.yzcdn.cn/upload_files/2017/07/12/FhxXtAXp1pEauruMKjw2QZCuCjbQ.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        style="">
-                    </div>
-                    <div class="info clearfix info-title info-price btn0">
-                      <p class=" goods-title ">寻找田野|新疆库车小白杏 400g*4盒 长在树上的白色蜂蜜</p>
-                      <p class="goods-sub-title c-black hide"></p>
-                      <p class="goods-price">
-                        <em>¥118.00</em>
-                      </p>
-                      <p class="goods-price-taobao ">138</p>
-                    </div>
-                  </a>
-                </li>
-                <li class="js-goods-card goods-card small-pic card ">
-                  <a href="https://h5.youzan.com/v2/goods/2fnugsg7z7xo4" class="js-goods link clearfix" target="_blank" data-goods-id="341654863"
-                    title="寻找田野|无锡阳山水蜜桃 可以吸着吃的水蜜桃 单果200g礼盒装顺丰直达">
-                    <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
-                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FvDOdNLYTkgPg8_LC16vBTKUkpDp.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        src="https://img.yzcdn.cn/upload_files/2017/07/12/FvDOdNLYTkgPg8_LC16vBTKUkpDp.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        style="">
-                    </div>
-                    <div class="info clearfix info-title info-price btn0">
-                      <p class=" goods-title ">寻找田野|无锡阳山水蜜桃 可以吸着吃的水蜜桃 单果200g礼盒装顺丰直达</p>
-                      <p class="goods-sub-title c-black hide"></p>
-                      <p class="goods-price">
-                        <em>¥178.00</em>
-                      </p>
-                      <p class="goods-price-taobao  hide"></p>
-                    </div>
-                  </a>
-                </li>
-                <li class="js-goods-card goods-card small-pic card ">
-                  <a href="https://h5.youzan.com/v2/goods/2ocrgu7fw6dic" class="js-goods link clearfix" target="_blank" data-goods-id="340716475"
-                    title="认养一头牛 安全无添加的好牛奶/酸奶">
-                    <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
-                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/06/14/FlAhOUgjHk6uwBhTmMW95hHPlVJh.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        src="https://img.yzcdn.cn/upload_files/2017/06/14/FlAhOUgjHk6uwBhTmMW95hHPlVJh.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        style="">
-                    </div>
-                    <div class="info clearfix info-title info-price btn0">
-                      <p class=" goods-title ">认养一头牛 安全无添加的好牛奶/酸奶</p>
-                      <p class="goods-sub-title c-black hide"></p>
-                      <p class="goods-price">
-                        <em>¥60.00</em>
-                      </p>
-                      <p class="goods-price-taobao  hide"></p>
-                    </div>
-                  </a>
-                </li>
-                <li class="js-goods-card goods-card small-pic card ">
-                  <a href="https://h5.youzan.com/v2/goods/365anhqcodi84" class="js-goods link clearfix" target="_blank" data-goods-id="339552343"
-                    title="新西兰进口佳沛绿奇异果  多规格包邮 单果90g--110g">
-                    <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
-                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/06/02/FlFNqGPuFKS_DlTAoJTcX9VEDv_4.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        src="https://img.yzcdn.cn/upload_files/2017/06/02/FlFNqGPuFKS_DlTAoJTcX9VEDv_4.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        style="">
-                    </div>
-                    <div class="info clearfix info-title info-price btn0">
-                      <p class=" goods-title ">新西兰进口佳沛绿奇异果 多规格包邮 单果90g--110g</p>
-                      <p class="goods-sub-title c-black hide"></p>
-                      <p class="goods-price">
-                        <em>¥35.00</em>
-                      </p>
-                      <p class="goods-price-taobao  hide"></p>
-                    </div>
-                  </a>
-                </li>
-                <li class="js-goods-card goods-card small-pic card ">
-                  <a href="https://h5.youzan.com/v2/goods/3f2rgi8pm8xgk" class="js-goods link clearfix" target="_blank" data-goods-id="339441682"
-                    title="四杰克系列葡萄酒 五星酒庄出品 750ML">
-                    <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
-                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/Fh2E3KeB4j0rAOdILQAC52F_B4hb.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        src="https://img.yzcdn.cn/upload_files/2017/07/12/Fh2E3KeB4j0rAOdILQAC52F_B4hb.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        style="">
-                    </div>
-                    <div class="info clearfix info-title info-price btn0">
-                      <p class=" goods-title ">四杰克系列葡萄酒 五星酒庄出品 750ML</p>
-                      <p class="goods-sub-title c-black hide"></p>
-                      <p class="goods-price">
-                        <em>¥220.00</em>
-                      </p>
-                      <p class="goods-price-taobao  hide"></p>
-                    </div>
-                  </a>
-                </li>
-                <li class="js-goods-card goods-card small-pic card ">
-                  <a href="https://h5.youzan.com/v2/goods/273xg8phauxvo" class="js-goods link clearfix" target="_blank" data-goods-id="339414742"
-                    title="寻找田野|墨西哥进口牛油果 单果140g--180g  6个装 包邮">
-                    <div class="photo-block" data-width="1080" data-height="1080" style="background-color: rgb(255, 255, 255);">
-                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FuDDKJmd-yfvmaDUfk-PO-yETRwZ.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        src="https://img.yzcdn.cn/upload_files/2017/07/12/FuDDKJmd-yfvmaDUfk-PO-yETRwZ.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        style="">
-                    </div>
-                    <div class="info clearfix info-title info-price btn0">
-                      <p class=" goods-title ">寻找田野|墨西哥进口牛油果 单果140g--180g 6个装 包邮</p>
-                      <p class="goods-sub-title c-black hide"></p>
-                      <p class="goods-price">
-                        <em>¥98.00</em>
-                      </p>
-                      <p class="goods-price-taobao  hide"></p>
-                    </div>
-                  </a>
-                </li>
-                <li class="js-goods-card goods-card small-pic card ">
-                  <a href="https://h5.youzan.com/v2/goods/36a5xxtuihz10" class="js-goods link clearfix" target="_blank" data-goods-id="338917983"
-                    title="花园系列葡萄酒 五星酒庄出品 750ML">
-                    <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
-                      <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FoCENpKklzLyD5VpWVEtS0_jbGc8.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        src="https://img.yzcdn.cn/upload_files/2017/07/12/FoCENpKklzLyD5VpWVEtS0_jbGc8.jpg?imageView2/2/w/280/h/280/q/75/format/webp"
-                        style="">
-                    </div>
-                    <div class="info clearfix info-title info-price btn0">
-                      <p class=" goods-title ">花园系列葡萄酒 五星酒庄出品 750ML</p>
-                      <p class="goods-sub-title c-black hide"></p>
-                      <p class="goods-price">
-                        <em>¥268.00</em>
-                      </p>
-                      <p class="goods-price-taobao  hide"></p>
-                    </div>
-                  </a>
-                </li>
-              </ul>
+            <div class="js-recommend">
+              <p class="center font-size-14 c-black" style="padding: 5px 0;margin-top: 10px;">更多精选商品</p>
+              <div class="js-recommend-goods-list">
+                <ul class="js-goods-list sc-goods-list pic clearfix size-1 " data-size="1" data-showtype="card" style="visibility: visible;">
+                  <!-- 商品区域 -->
+                  <!-- 展现类型判断 -->
+                  <li class="js-goods-card goods-card small-pic card ">
+                    <a href="https://h5.youzan.com/v2/goods/2ov83y79gkn38" class="js-goods link clearfix" target="_blank" data-goods-id="343086880" title="【28号陆续发货】寻找田野|青海有机鲜枸杞 营养价值高安全无农残 吃水果一样吃枸杞">
+                      <div class="photo-block" data-width="750" data-height="750" style="background-color: rgb(255, 255, 255);">
+                        <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/11/FoN0SazpvslhoiiyuHETeyWHqzTE.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/11/FoN0SazpvslhoiiyuHETeyWHqzTE.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                      </div>
+                      <div class="info clearfix info-title info-price btn0">
+                        <p class=" goods-title ">【28号陆续发货】寻找田野|青海有机鲜枸杞 营养价值高安全无农残 吃水果一样吃枸杞</p>
+                        <p class="goods-sub-title c-black hide"></p>
+                        <p class="goods-price">
+                          <em>¥88.00</em>
+                        </p>
+                        <p class="goods-price-taobao  hide"></p>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="js-goods-card goods-card small-pic card ">
+                    <a href="https://h5.youzan.com/v2/goods/2g06s483u55no" class="js-goods link clearfix" target="_blank" data-goods-id="342718779" title="【米饭版和牛肉版】小龙坎方便火锅 只要一瓶矿泉水就能吃的地道四川火锅">
+                      <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
+                        <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/04/FidWCdQxsEMojh63W8GK016mwPAo.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/04/FidWCdQxsEMojh63W8GK016mwPAo.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                      </div>
+                      <div class="info clearfix info-title info-price btn0">
+                        <p class=" goods-title ">【米饭版和牛肉版】小龙坎方便火锅 只要一瓶矿泉水就能吃的地道四川火锅</p>
+                        <p class="goods-sub-title c-black hide">不用火，不用电，一瓶矿泉水就能吃地道四川火锅</p>
+                        <p class="goods-price">
+                          <em>¥28.00</em>
+                        </p>
+                        <p class="goods-price-taobao  hide"></p>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="js-goods-card goods-card small-pic card ">
+                    <a href="https://h5.youzan.com/v2/goods/1y8wz9sm8da8k" class="js-goods link clearfix" target="_blank" data-goods-id="342676309" title="寻找田野|绍兴黄酒 良宵 2012年古法手工原浆半干黄酒 礼盒装 送礼佳品">
+                      <div class="photo-block" data-width="750" data-height="750" style="background-color: rgb(255, 255, 255);">
+                        <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/04/Fq1yXSOb84HmElu-Qgrm65EmAeIz.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/04/Fq1yXSOb84HmElu-Qgrm65EmAeIz.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                      </div>
+                      <div class="info clearfix info-title info-price btn0">
+                        <p class=" goods-title ">寻找田野|绍兴黄酒 良宵 2012年古法手工原浆半干黄酒 礼盒装 送礼佳品</p>
+                        <p class="goods-sub-title c-black hide"></p>
+                        <p class="goods-price">
+                          <em>¥128.00</em>
+                        </p>
+                        <p class="goods-price-taobao  hide"></p>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="js-goods-card goods-card small-pic card ">
+                    <a href="https://h5.youzan.com/v2/goods/27082kgcgmrqs" class="js-goods link clearfix" target="_blank" data-goods-id="342108270" title="寻找田野|新疆库车小白杏 400g*4盒  长在树上的白色蜂蜜">
+                      <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                        <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FhxXtAXp1pEauruMKjw2QZCuCjbQ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FhxXtAXp1pEauruMKjw2QZCuCjbQ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                      </div>
+                      <div class="info clearfix info-title info-price btn0">
+                        <p class=" goods-title ">寻找田野|新疆库车小白杏 400g*4盒 长在树上的白色蜂蜜</p>
+                        <p class="goods-sub-title c-black hide"></p>
+                        <p class="goods-price">
+                          <em>¥118.00</em>
+                        </p>
+                        <p class="goods-price-taobao ">138</p>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="js-goods-card goods-card small-pic card ">
+                    <a href="https://h5.youzan.com/v2/goods/2fnugsg7z7xo4" class="js-goods link clearfix" target="_blank" data-goods-id="341654863" title="寻找田野|无锡阳山水蜜桃 可以吸着吃的水蜜桃 单果200g礼盒装顺丰直达">
+                      <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                        <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FvDOdNLYTkgPg8_LC16vBTKUkpDp.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FvDOdNLYTkgPg8_LC16vBTKUkpDp.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                      </div>
+                      <div class="info clearfix info-title info-price btn0">
+                        <p class=" goods-title ">寻找田野|无锡阳山水蜜桃 可以吸着吃的水蜜桃 单果200g礼盒装顺丰直达</p>
+                        <p class="goods-sub-title c-black hide"></p>
+                        <p class="goods-price">
+                          <em>¥178.00</em>
+                        </p>
+                        <p class="goods-price-taobao  hide"></p>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="js-goods-card goods-card small-pic card ">
+                    <a href="https://h5.youzan.com/v2/goods/2ocrgu7fw6dic" class="js-goods link clearfix" target="_blank" data-goods-id="340716475" title="认养一头牛 安全无添加的好牛奶/酸奶">
+                      <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
+                        <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/06/14/FlAhOUgjHk6uwBhTmMW95hHPlVJh.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/06/14/FlAhOUgjHk6uwBhTmMW95hHPlVJh.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                      </div>
+                      <div class="info clearfix info-title info-price btn0">
+                        <p class=" goods-title ">认养一头牛 安全无添加的好牛奶/酸奶</p>
+                        <p class="goods-sub-title c-black hide"></p>
+                        <p class="goods-price">
+                          <em>¥60.00</em>
+                        </p>
+                        <p class="goods-price-taobao  hide"></p>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="js-goods-card goods-card small-pic card ">
+                    <a href="https://h5.youzan.com/v2/goods/365anhqcodi84" class="js-goods link clearfix" target="_blank" data-goods-id="339552343" title="新西兰进口佳沛绿奇异果  多规格包邮 单果90g--110g">
+                      <div class="photo-block" data-width="0" data-height="0" style="background-color: rgb(255, 255, 255);">
+                        <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/06/02/FlFNqGPuFKS_DlTAoJTcX9VEDv_4.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/06/02/FlFNqGPuFKS_DlTAoJTcX9VEDv_4.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                      </div>
+                      <div class="info clearfix info-title info-price btn0">
+                        <p class=" goods-title ">新西兰进口佳沛绿奇异果 多规格包邮 单果90g--110g</p>
+                        <p class="goods-sub-title c-black hide"></p>
+                        <p class="goods-price">
+                          <em>¥35.00</em>
+                        </p>
+                        <p class="goods-price-taobao  hide"></p>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="js-goods-card goods-card small-pic card ">
+                    <a href="https://h5.youzan.com/v2/goods/3f2rgi8pm8xgk" class="js-goods link clearfix" target="_blank" data-goods-id="339441682" title="四杰克系列葡萄酒 五星酒庄出品 750ML">
+                      <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                        <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/Fh2E3KeB4j0rAOdILQAC52F_B4hb.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/Fh2E3KeB4j0rAOdILQAC52F_B4hb.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                      </div>
+                      <div class="info clearfix info-title info-price btn0">
+                        <p class=" goods-title ">四杰克系列葡萄酒 五星酒庄出品 750ML</p>
+                        <p class="goods-sub-title c-black hide"></p>
+                        <p class="goods-price">
+                          <em>¥220.00</em>
+                        </p>
+                        <p class="goods-price-taobao  hide"></p>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="js-goods-card goods-card small-pic card ">
+                    <a href="https://h5.youzan.com/v2/goods/273xg8phauxvo" class="js-goods link clearfix" target="_blank" data-goods-id="339414742" title="寻找田野|墨西哥进口牛油果 单果140g--180g  6个装 包邮">
+                      <div class="photo-block" data-width="1080" data-height="1080" style="background-color: rgb(255, 255, 255);">
+                        <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FuDDKJmd-yfvmaDUfk-PO-yETRwZ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FuDDKJmd-yfvmaDUfk-PO-yETRwZ.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                      </div>
+                      <div class="info clearfix info-title info-price btn0">
+                        <p class=" goods-title ">寻找田野|墨西哥进口牛油果 单果140g--180g 6个装 包邮</p>
+                        <p class="goods-sub-title c-black hide"></p>
+                        <p class="goods-price">
+                          <em>¥98.00</em>
+                        </p>
+                        <p class="goods-price-taobao  hide"></p>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="js-goods-card goods-card small-pic card ">
+                    <a href="https://h5.youzan.com/v2/goods/36a5xxtuihz10" class="js-goods link clearfix" target="_blank" data-goods-id="338917983" title="花园系列葡萄酒 五星酒庄出品 750ML">
+                      <div class="photo-block" data-width="800" data-height="800" style="background-color: rgb(255, 255, 255);">
+                        <img class="goods-photo js-goods-lazy" data-src="https://img.yzcdn.cn/upload_files/2017/07/12/FoCENpKklzLyD5VpWVEtS0_jbGc8.jpg?imageView2/2/w/280/h/280/q/75/format/webp" src="https://img.yzcdn.cn/upload_files/2017/07/12/FoCENpKklzLyD5VpWVEtS0_jbGc8.jpg?imageView2/2/w/280/h/280/q/75/format/webp" style="">
+                      </div>
+                      <div class="info clearfix info-title info-price btn0">
+                        <p class=" goods-title ">花园系列葡萄酒 五星酒庄出品 750ML</p>
+                        <p class="goods-sub-title c-black hide"></p>
+                        <p class="goods-price">
+                          <em>¥268.00</em>
+                        </p>
+                        <p class="goods-price-taobao  hide"></p>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <p class="center" style="margin: 10px 0 20px;">
+                <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" class="center btn btn-white btn-xsmall font-size-14 " style="padding:8px 26px;">进店逛逛&gt;</a>
+              </p>
             </div>
-            <p class="center" style="margin: 10px 0 20px;">
-              <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" class="center btn btn-white btn-xsmall font-size-14 "
-                style="padding:8px 26px;">进店逛逛&gt;</a>
-            </p>
           </div>
+          <div id="shop-nav"></div>
         </div>
-        <div id="shop-nav"></div>
       </div>
-    </div>
-    <div class="js-footer" style="min-height: 1px;">
-      <div>
-        <div class="footer">
-          <div class="copyright">
-            <div class="ft-links">
-              <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" target="_blank">店铺主页</a>
-              <a href="https://h5.youzan.com/v2/showcase/usercenter?kdt_id=16546132" target="_blank">会员中心</a>
-              <a href="javascript:;" class="js-open-follow">关注我们</a>
-              <a href="https://h5.youzan.com/v2/showcase/cert" target="_blank">店铺信息</a>
-              <!-- 第三方app隐藏topbar时，需要在底部显示购物记录入口 -->
-            </div>
-            <div class="ft-copyright " style="background-image: url(https://img.yzcdn.cn/upload_files/2017/06/16/FgtL3QzprXTGrVPaolozNT08Xs2K.png);">
+      <div class="js-footer" style="min-height: 1px;">
+        <div>
+          <div class="footer">
+            <div class="copyright">
+              <div class="ft-links">
+                <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=16546132" target="_blank">店铺主页</a>
+                <a href="https://h5.youzan.com/v2/showcase/usercenter?kdt_id=16546132" target="_blank">会员中心</a>
+                <a href="javascript:;" class="js-open-follow">关注我们</a>
+                <a href="https://h5.youzan.com/v2/showcase/cert" target="_blank">店铺信息</a>
+                <!-- 第三方app隐藏topbar时，需要在底部显示购物记录入口 -->
+              </div>
+              <div class="ft-copyright " style="background-image: url(https://img.yzcdn.cn/upload_files/2017/06/16/FgtL3QzprXTGrVPaolozNT08Xs2K.png);">
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;">
-      <div id="trans-tooltip">
-        <div id="tip-left-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png&quot;);"></div>
-        <div id="tip-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png&quot;) repeat-x;"></div>
-        <div id="tip-right-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png&quot;);"></div>
-        <div id="tip-right" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png&quot;) repeat-y;"></div>
-        <div id="tip-right-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png&quot;);"></div>
-        <div id="tip-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png&quot;) repeat-x;"></div>
-        <div id="tip-left-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png&quot;);"></div>
-        <div id="tip-left" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png&quot;);"></div>
-        <div id="trans-content"></div>
+      <div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;">
+        <div id="trans-tooltip">
+          <div id="tip-left-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png&quot;);"></div>
+          <div id="tip-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png&quot;) repeat-x;"></div>
+          <div id="tip-right-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png&quot;);"></div>
+          <div id="tip-right" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png&quot;) repeat-y;"></div>
+          <div id="tip-right-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png&quot;);"></div>
+          <div id="tip-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png&quot;) repeat-x;"></div>
+          <div id="tip-left-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png&quot;);"></div>
+          <div id="tip-left" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png&quot;);"></div>
+          <div id="trans-content"></div>
+        </div>
+        <div id="tip-arrow-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png&quot;);"></div>
+        <div id="tip-arrow-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png&quot;);"></div>
       </div>
-      <div id="tip-arrow-bottom" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png&quot;);"></div>
-      <div id="tip-arrow-top" style="background: url(&quot;chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png&quot;);"></div>
-    </div>
-    <div class="search-bar" style="display:none;">
-      <form class="search-form" action="https://h5.youzan.com/v2/search" method="GET">
-        <input type="search" class="search-input" placeholder="搜索商品" name="q" value="">
-        <input type="hidden" name="kdt_id" value="16546132"><a class="js-search-cancel search-cancel" href="javascript:;">取消</a>
-        <span class="search-icon"></span><span class="close-icon hide"></span></form>
-      <div class="history-wrap center">
-        <ul class="history-list search-recom-list js-history-list clearfix"></ul><a class="tag tag-clear js-tag-clear c-gray-darker hide" href="javascript:;">清除历史搜索</a></div>
-    </div>
-    <!-- 阴影层 -->
-    <div id="yFzBKP9GDL" style="height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; transition: none 0.2s ease; opacity: 1;"
-      v-show="showSku" @click="showSku=false"></div>
-    <transition name="fade">
-      <div id="QfEqtDbeK9" class="sku-layout sku-box-shadow popup" style="overflow: hidden; position: fixed; z-index: 1000; background: white; bottom: 0px; left: 0px; right: 0px; visibility: visible;"
-        v-show="showSku">
-        <div class="sku-layout-title name-card sku-name-card">
-          <div class="thumb"><img class="js-goods-thumb goods-thumb" src="https://img.yzcdn.cn/upload_files/2017/07/12/FkSvYz8FLLD9-t0smXO43hF6ov7S.jpg?imageView2/2/w/100/h/100/q/75/format/webp?imageView2/2/w/100/h/100/q/75/format/webp"
-              alt=""></div>
-          <div class="detail goods-base-info clearfix">
-            <p class="title c-black ellipsis">寻找田野|最正宗的上海南汇8424 得奖最多奥运会指定西瓜1只/箱 9-11斤</p>
-            <div class="goods-price clearfix">
-              <div class="current-price pull-left c-black">
-                <span class="price-name pull-left font-size-14 c-orange">¥</span><i class="js-goods-price price font-size-16 vertical-middle c-orange">98.00</i>
+      <div class="search-bar" style="display:none;">
+        <form class="search-form" action="https://h5.youzan.com/v2/search" method="GET">
+          <input type="search" class="search-input" placeholder="搜索商品" name="q" value="">
+          <input type="hidden" name="kdt_id" value="16546132"><a class="js-search-cancel search-cancel" href="javascript:;">取消</a>
+          <span class="search-icon"></span><span class="close-icon hide"></span></form>
+        <div class="history-wrap center">
+          <ul class="history-list search-recom-list js-history-list clearfix"></ul><a class="tag tag-clear js-tag-clear c-gray-darker hide" href="javascript:;">清除历史搜索</a></div>
+      </div>
+      <!-- 阴影层 -->
+      <div id="yFzBKP9GDL" style="height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; transition: none 0.2s ease; opacity: 1;" v-show="showSku" @click="showSku=false"></div>
+      <transition name="fade">
+        <div id="QfEqtDbeK9" class="sku-layout sku-box-shadow popup" style="overflow: hidden; position: fixed; z-index: 1000; background: white; bottom: 0px; left: 0px; right: 0px; visibility: visible;" v-show="showSku">
+          <div class="sku-layout-title name-card sku-name-card">
+            <div class="thumb"><img class="js-goods-thumb goods-thumb" src="https://img.yzcdn.cn/upload_files/2017/07/12/FkSvYz8FLLD9-t0smXO43hF6ov7S.jpg?imageView2/2/w/100/h/100/q/75/format/webp?imageView2/2/w/100/h/100/q/75/format/webp" alt=""></div>
+            <div class="detail goods-base-info clearfix">
+              <p class="title c-black ellipsis">寻找田野|最正宗的上海南汇8424 得奖最多奥运会指定西瓜1只/箱 9-11斤</p>
+              <div class="goods-price clearfix">
+                <div class="current-price pull-left c-black">
+                  <span class="price-name pull-left font-size-14 c-orange">¥</span><i class="js-goods-price price font-size-16 vertical-middle c-orange">98.00</i>
+                </div>
+                <div class="original-price vertical-middle font-size-14 line-through">108</div>
               </div>
-              <div class="original-price vertical-middle font-size-14 line-through">108</div>
             </div>
-          </div>
-          <div class="js-cancel sku-cancel" @click="showSku=false">
-            <div class="cancel-img"></div>
-          </div>
-        </div>
-        <div class="sku-detail adv-opts hotel-checkin-select" style="border: none; margin: 0; display: none;">
-          <div class="sku-detail-inner adv-opts-inner-addons">
-            <dl class="sku-group select-sku js-select-checkin-date">
-              <dt>时间：</dt>
-              <dd class="js-checkin-date-value">选择入住时间</dd>
-            </dl>
-          </div>
-        </div>
-        <div class="adv-opts layout-content" style="max-height: 554px;">
-          <div class="goods-models js-sku-views block block-list border-top-0">
-            <dl class="clearfix block-item sku-list-container" v-for="sku in details.skuList">
-              <dt class="model-title sku-sel-title">
-                <label>{{sku.title}}：</label>
-              </dt>
-              <dd>
-                <ul class="model-list sku-sel-list">
-                  <li class="tag sku-tag pull-left ellipsis" :class="{active:item.active}" v-for="(item,index) in sku.lists" @click="chooseTag(item,index,sku.lists)">{{item.tag}}</li>
-                </ul>
-              </dd>
-            </dl>
-            <dl class="clearfix block-item">
-              <dt class="sku-num pull-left">
-                <label>购买数量：</label>
-              </dt>
-              <dd class="sku-quantity-contaienr">
-                <dl class="clearfix">
-                  <div class="quantity">
-                    <button class="minus " type="button" :class="{disabled:skuNum===1}"></button>
-                    <input type="text" class="txt" pattern="[0-9]*" :value="skuNum">
-                    <button class="plus" type="button"></button>
-                    <div class="response-area response-area-minus" @click="changeSkuNum(-1)"></div>
-                    <div class="response-area response-area-plus" @click="changeSkuNum(1)"></div>
-                  </div>
-                </dl>
-              </dd>
-              <dt class="other-info">
-                <div class="stock">剩余450件
-                </div>
-              </dt>
-            </dl>
-            <div class="block-item block-item-messages" style="display: none;">
+            <div class="js-cancel sku-cancel" @click="showSku=false">
+              <div class="cancel-img"></div>
             </div>
           </div>
-          <!-- <div class="bottom-padding"></div> -->
-          <div class="confirm-action content-foot clearfix">
-            <!-- 加入购物车 -->
-            <div class="big-btn-1-1" v-show="skuType==2">
-              <a href="javascript:;" class="js-confirm-it big-btn red-btn main-btn" @click="addCart">加入购物车</a>
+          <div class="sku-detail adv-opts hotel-checkin-select" style="border: none; margin: 0; display: none;">
+            <div class="sku-detail-inner adv-opts-inner-addons">
+              <dl class="sku-group select-sku js-select-checkin-date">
+                <dt>时间：</dt>
+                <dd class="js-checkin-date-value">选择入住时间</dd>
+              </dl>
             </div>
-            <!-- 立即购买 -->
-            <div class="big-btn-1-1" v-show="skuType==3">
-              <a href="javascript:;" class="js-confirm-it big-btn red-btn main-btn">下一步</a>
+          </div>
+          <div class="adv-opts layout-content" style="max-height: 554px;">
+            <div class="goods-models js-sku-views block block-list border-top-0">
+              <dl class="clearfix block-item sku-list-container" v-for="sku in details.skuList">
+                <dt class="model-title sku-sel-title">
+                  <label>{{sku.title}}：</label>
+                </dt>
+                <dd>
+                  <ul class="model-list sku-sel-list">
+                    <li class="tag sku-tag pull-left ellipsis" :class="{active:item.active}" v-for="(item,index) in sku.lists" @click="chooseTag(item,index,sku.lists)">{{item.tag}}</li>
+                  </ul>
+                </dd>
+              </dl>
+              <dl class="clearfix block-item">
+                <dt class="sku-num pull-left">
+                  <label>购买数量：</label>
+                </dt>
+                <dd class="sku-quantity-contaienr">
+                  <dl class="clearfix">
+                    <div class="quantity">
+                      <button class="minus " type="button" :class="{disabled:skuNum===1}"></button>
+                      <input type="text" class="txt" pattern="[0-9]*" :value="skuNum">
+                      <button class="plus" type="button"></button>
+                      <div class="response-area response-area-minus" @click="changeSkuNum(-1)"></div>
+                      <div class="response-area response-area-plus" @click="changeSkuNum(1)"></div>
+                    </div>
+                  </dl>
+                </dd>
+                <dt class="other-info">
+                  <div class="stock">剩余450件
+                  </div>
+                </dt>
+              </dl>
+              <div class="block-item block-item-messages" style="display: none;">
+              </div>
             </div>
-            <!-- 选择规格 -->
-            <div class="big-btn-2-1" v-show="skuType==1">
-              <a href="javascript:;" class="js-mutiBtn-confirm cart big-btn orange-btn vice-btn" @click="addCart">加入购物车</a>
-              <a href="javascript:;" class="js-mutiBtn-confirm confirm big-btn red-btn main-btn">立即购买</a>
+            <!-- <div class="bottom-padding"></div> -->
+            <div class="confirm-action content-foot clearfix">
+              <!-- 加入购物车 -->
+              <div class="big-btn-1-1" v-show="skuType==2">
+                <a href="javascript:;" class="js-confirm-it big-btn red-btn main-btn" @click="addCart">加入购物车</a>
+              </div>
+              <!-- 立即购买 -->
+              <div class="big-btn-1-1" v-show="skuType==3">
+                <a href="javascript:;" class="js-confirm-it big-btn red-btn main-btn">下一步</a>
+              </div>
+              <!-- 选择规格 -->
+              <div class="big-btn-2-1" v-show="skuType==1">
+                <a href="javascript:;" class="js-mutiBtn-confirm cart big-btn orange-btn vice-btn" @click="addCart">加入购物车</a>
+                <a href="javascript:;" class="js-mutiBtn-confirm confirm big-btn red-btn main-btn">立即购买</a>
+              </div>
             </div>
           </div>
         </div>
+      </transition>
+      <div class="motify" :style="{display: showAddMessage?'block':'none'}">
+        <div class="motify-inner">已成功添加到购物车</div>
       </div>
-    </transition>
-    <div class="motify" :style="{display: showAddMessage?'block':'none'}">
-      <div class="motify-inner">已成功添加到购物车</div>
     </div>
+    <div class="loading-more" v-if="!details"><span></span></div>
   </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>