new

src/common/stylus/base.styl

@@ -11,7 +11,7 @@
     transform : scaleY(0.5)
 
 body, html {
-  line-height 1px
+
   font-weight 200px
   background-color
   font-family 'PingFang SC','STHertiSC-Light','HelveTica-Light', Arial, sans-serif

src/common/stylus/mixin.styl

@@ -9,6 +9,10 @@ border-1px($color)
     width: 100%
     content: ''
 
+border-none()
+  &:after
+    display: none
+
 bg-image($url)
   background-image url($url + "@2x.png")
   @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)

src/components/goods/goods.styl

@@ -0,0 +1,97 @@
+@import "../../common/stylus/mixin.styl"
+.good
+  display flex
+  position absolute
+  width 100%
+  top 174px
+  bottom 46px
+  overflow hidden
+  .menu-wrapper
+    flex 0 0 80px
+    width 80px
+    background #f3f5f7
+    .menu-item
+      display table
+      width 56px
+      height 54px
+      line-height 14px
+      padding 0 12px
+      .icon
+        display inline-block
+        width 12px
+        height 12px
+        vertical-align top
+        margin-right 4px
+        background-size 12px 12px
+        background-repeat no-repeat
+        &.decrease
+          bg-image('decrease_3')
+        &.discount
+          bg-image('discount_3')
+        &.guarantee
+          bg-image('guarantee_3')
+        &.invoice
+          bg-image('invoice_3')
+        &.special
+          bg-image('special_3')
+      .text
+        display table-cell
+        width 56px
+        vertical-align middle
+        border-1px(rgba(7, 17, 27, 0.1))
+        font-size 12px
+  .foods-wrapper
+    flex 1
+    .food-list
+      .title
+        padding-left 14px
+        height 26px
+        line-height 26px
+        border-left 2px solid #d9dde1
+        font-size 12px
+        color rgb(147, 153, 159)
+        background #f3f5f7
+      .food-item
+        display flex
+        margin 18px
+        padding-bottom 18px
+        border-1px(rgba(7, 17, 27, 0.1))
+        &:last-child
+          border-none()
+          margin-bottom 0px
+        .icon
+          flex 0 0 57px
+          margin-right 10px
+        .content
+          flex 1
+          .name
+            margin 2px 0 8px 0
+            font-size 14px
+            line-height 14px
+            height 14px
+            color rgb(7, 17, 27)
+          .desc, .extra
+            font-size 10px
+            line-height 10px
+            color rgb(147, 153, 159)
+          .desc
+            margin-bottom 8px
+          .extra
+            &.count
+              margin-right 12px
+          .price
+            font-weight 700px
+            line-height 24px
+            .now
+              margin-right 8px
+              font-size 14px
+              color rgb(240,20,20)
+            .old
+              font-size 10px
+              color rgb(147, 153, 159)
+              text-decoration line-through
+
+
+
+
+

src/components/goods/goods.vue

@@ -1,12 +1,67 @@
 <template>
-<div>
-  i am goods
-</div>
+  <div class="good">
+    <div class="menu-wrapper">
+      <ul>
+        <li v-for="item in goods" class="menu-item border-1px">
+          <span class="text">
+            <span v-show="item.type>0" class=" icon" :class="classMap[item.type]"></span>{{item.name}}
+          </span>
+        </li>
+      </ul>
+    </div>
+    <div class="foods-wrapper">
+      <ul>
+        <li v-for="item in goods" class="food-list">
+          <h1 class="title">{{item.name}}</h1>
+          <ul>
+            <li v-for="food in item.foods" class="food-item">
+              <div class="icon">
+                <img :src="food.icon" alt="" width="57">
+              </div>
+              <div class="content">
+                <h2 class="name">{{food.name}}</h2>
+                <p class="desc">{{food.description}}</p>
+                <div class="extra">
+                  <span class="count">月售{{food.sellCount}}</span>
+                  <span class="count">好评{{food.rating}}</span>
+                </div>
+                <div class="price">
+                  <span class="now">￥{{food.price}}</span>
+                  <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
-
 <script type="text/ecmascript-6">
-  export default {};
+  const ERR_OK = 0;
+  export default {
+    props: {
+      seller: {
+        type: Object
+      }
+    },
+    data () {
+      return {
+        goods: []
+      };
+    },
+    created() {
+      this.$http.get('/api/goods').then((response) => {
+        response = response.body;
+        if (response.errno === ERR_OK) {
+          this.goods = response.data;
+          console.log(this.goods);
+        }
+      });
+      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
+    }
+  };
 </script>
 <style lang="stylus" rel="stylesheet/stylus">
-
+  @import "goods.styl";
 </style>

src/components/header/header.styl

@@ -111,7 +111,6 @@
     height 100%
     z-index -1
     filter blur(10px)
-
   .detail
     position fixed
     z-index 100
@@ -120,18 +119,101 @@
     width 100%
     height 100%
     overflow auto
-    background rgba(7,17,27,0.8)
-    .detail-wrapper
+    background rgba(7, 17, 27, 0.8)
+    -webkit-backdrop-filter blur(10px)
+    &.fade-enter-active
+          animation: bounce-in .5s;
+    &.fade-leave-active
+      animation: bounce-out .5s;
+    @keyframes bounce-in {
+      0% {
+        transform: scale(0);
+      }
+      50% {
+        transform: scale(1.5);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+    @keyframes bounce-out {
+      0% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.5);
+      }
+      100% {
+        transform: scale(0);
+      }
+    }
+.detail-wrapper
       width 100%
       min-height 100%
       .detail-main
         margin-top 64px
         padding-bottom 64px
         .name
-          line-height  16px
+          line-height 16px
           text-align center
           font-size 16px
           font-weight 700px
+        .star-wrapper
+          margin-top 18px
+          padding 2px 0
+          text-align center
+        .title
+          width 80%
+          display flex
+          margin 28px auto 0 auto
+          .line
+            flex: 1
+            position relative
+            top -6px
+            border-bottom 1px solid rgba(255, 255, 255, 0.2)
+          .text
+            padding 0px 12px
+            font-size 16px
+            font-weight 700px
+        .supports
+          width 80%
+          margin 22px auto
+          .support-item
+            padding 0 12px
+            font-size 0px
+            margin-bottom 12px
+            &:last-child
+              margin-bottom 0px
+            .icon
+              display inline-block
+              width 16px
+              height 16px
+              vertical-align top
+              margin-right 6px
+              background-size 16px 16px
+              background-repeat no-repeat
+              &.decrease
+               bg-image('decrease_2')
+              &.discount
+                bg-image('discount_2')
+              &.guarantee
+                bg-image('guarantee_2')
+              &.invoice
+                bg-image('invoice_2')
+              &.special
+                bg-image('special_2')
+            .text
+              line-height 12px
+              font-size 12px
+              color #ffffff
+        .bulletin
+          width 80%
+          height 200px
+          margin 22px auto
+          .content
+           padding 0 12px
+           line-height 24px
+           font-size 12px
     .detail-close
       position relative
       width 32px

src/components/header/header.vue

@@ -22,26 +22,51 @@
         <i class="icon iconfont icon-zuoyoujiantou"></i>
       </div>
     </div>
-    <div class="bulletin-wrapper">
+    <div class="bulletin-wrapper" @click="showDetail">
       <span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
       <i class="icon iconfont icon-zuoyoujiantou"></i>
     </div>
-    <div class="background" @click="showDetail">
+    <div class="background">
       <img :src="seller.avatar" alt="" class="" width="100%" height="100%">
     </div>
-    <div v-show="detailShow" class="detail" @click="hideDetail">
+    <transition name="fade">
+    <div v-show="detailShow" class="detail" @click="hideDetail" transition="fade">
       <div class="detail-wrapper clearFix">
         <div class="detail-main">
           <h1 class="name">{{seller.name}}</h1>
+          <div class="star-wrapper">
+            <star :size="48" :score="seller.score"></star>
+          </div>
+          <div class="title">
+            <div class="line"></div>
+            <div class="text">优惠信息</div>
+            <div class="line"></div>
+          </div>
+          <ul v-if="seller.supports" class="supports">
+            <li class="support-item" v-for="(item, index) in seller.supports">
+              <span class="icon" :class="classMap[seller.supports[index].type]"></span>
+              <span class="text">{{seller.supports[index].description}}</span>
+            </li>
+          </ul>
+          <div class="title">
+            <div class="line"></div>
+            <div class="text">商家公告</div>
+            <div class="line"></div>
+          </div>
+          <div class="bulletin">
+            <p class="content">{{seller.bulletin}}</p>
+          </div>
         </div>
       </div>
-      <div class="detail-close">
+      <div class="detail-close" @click="hideDetail">
         <i class="iconfont icon-cha"></i>
       </div>
     </div>
+    </transition>
   </div>
 </template>
 <script type="text/ecmascript-6">
+  import star from '../star/star.vue';
   export default {
     props: {
       seller: {
@@ -63,6 +88,9 @@
     },
     created() {
       this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
+    },
+    components: {
+      star
     }
   };
 </script>