Merge branch 'feature/product' into develop

 <template>
 <template>
+    <top-nav></top-nav>
     <show-box :is-first="true">
     <show-box :is-first="true">
         <image-carousel :goods="entity.goodsList"></image-carousel>
         <image-carousel :goods="entity.goodsList"></image-carousel>
         <div class="title-box">
         <div class="title-box">
             <h1>{{entity.productName}}</h1>
             <h1>{{entity.productName}}</h1>
-
             <i class="price" v-if="entity.productPriceBo.marketPrice > entity.productPriceBo.salesPrice"
             <i class="price" v-if="entity.productPriceBo.marketPrice > entity.productPriceBo.salesPrice"
                :class="{'strike-through': entity.productPriceBo.salesPrice > 0}">{{entity.productPriceBo.formatMarketPrice}}</i>
                :class="{'strike-through': entity.productPriceBo.salesPrice > 0}">{{entity.productPriceBo.formatMarketPrice}}</i>
 
 
@@ -214,6 +214,7 @@
             font-size: 28px;
             font-size: 28px;
             color: #b0b0b0;
             color: #b0b0b0;
         }
         }
+
     }
     }
 
 
     .separator {
     .separator {
@@ -234,6 +235,7 @@
             border: none;
             border: none;
             border-top: 1px solid #eee;
             border-top: 1px solid #eee;
         }
         }
+
     }
     }
 
 
     i.info {
     i.info {
@@ -275,6 +277,7 @@
             &.highlight {
             &.highlight {
                 color: #d0021b;
                 color: #d0021b;
             }
             }
+
         }
         }
     }
     }
 
 
@@ -327,6 +330,7 @@
             line-height: 66px;
             line-height: 66px;
             text-align: center;
             text-align: center;
         }
         }
+
     }
     }
 
 
     .wash-condition {
     .wash-condition {
@@ -353,6 +357,7 @@
             color: #c7c7c7;
             color: #c7c7c7;
             min-width: 100px;
             min-width: 100px;
         }
         }
+
     }
     }
 
 
     .model-avatar {
     .model-avatar {
@@ -424,7 +429,8 @@
         components: {
         components: {
             imageCarousel: require('./image-carousel.vue'),
             imageCarousel: require('./image-carousel.vue'),
             featureSelector: require('component/product/feature-selector.vue'),
             featureSelector: require('component/product/feature-selector.vue'),
-            showBox: require('./show-box.vue')
+            showBox: require('./show-box.vue'),
+            topNav: require('./top-nav.vue'),
         },
         },
         methods: {
         methods: {
             /**
             /**

+<template>
+    <div class="top-nav">
+        <a class="left" href="javascript:alert('TODO');">
+            <span class="icon icon-left"></span>
+        </a>
+
+        <a class="right" href="javascript:alert('TODO');">
+            <span class="icon icon-right"></span>
+        </a>
+    </div>
+</template>
+<style>
+    .top-nav {
+        position: fixed;
+        z-index: 10;
+        font-size: 40px;
+        padding: 30px;
+        width: 100%;
+
+        .left {
+            float: left;
+        }
+
+        .right {
+            float: right;
+        }
+    }
+</style>
+<script></script>