nav导航换回原来的

components/index-nav/index-nav.less

@@ -1,23 +1,14 @@
 .quick-nav{
   background-color: #FFFFFF;
-  margin-top: 20rpx;
   .nav-content{
     display: flex;
     align-items: center;
     flex-wrap:wrap;
     padding: 10px 0 0 0;
-	// width: 890rpx;
-	// width: 1000rpx;
-	
-	width: 1100rpx;
     .nav-item{
       padding:0px 0px 10px 0px;
       // width: 25%;
-      // width: 13.8%;
-	  width: 12.5%;
-	  
-   //    width: 68.97px;
-	  // height: 73px;
+	  width: 20%;
       text-align: center;
       .top-info{
         image{

components/index-nav/index-nav.vue

@@ -1,7 +1,6 @@
 <template>
 <!--快捷导航-->
 <view class="quick-nav" :style="'margin-bottom: ' + meta.margin_bottom + 'px'">
-   <scroll-view :scroll-x="true" class="scroll-view" @scroll="scroll">
    <view class="nav-content">
        <view class="nav-item" v-for="(item, index) in navData" :key="index"  @tap="_jumpImg" :data-src="item.link">
            <view class="top-info">
@@ -10,72 +9,13 @@
            <view class="bottom-info">{{item.name}}</view>
        </view>
    </view>
-   </scroll-view>
-   <view class="indicator">
-	   <view class="percentage" :style="{width: per_width +'%'}"></view>
-   </view>
 </view>
 </template>
 <script>
 
 export default {
   data() {
-    return {
-		list: [{
-			link: '/pages/index/category/category?current=0&type=0',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '面部护肤'
-		},{
-			link: '/pages/index/category/category?current=0&type=3',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '国际精品'
-		},{
-			link: '/pages/point/shoppingMall/shoppingMall',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '积分商城'
-		},{
-			link: '/pages/index/category/category?current=0&type=4',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '服装内衣'
-		},{
-			link: '/pages/index/category/category?current=0&type=6',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '数码家电'
-		},{
-			link: '/pages/index/onlineMall/onlineMall?id=6',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '黄金珠宝'
-		},{
-			link: '/pages/user/member/service',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '会员服务'
-		},{
-			link: '/pages/index/activity/hot',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '活动报名'
-		},{
-			link: '/pages/index/cateringFacilities/cateringFacilities',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '餐饮配套'
-		},{
-			link: '/pages/index/collectCoupons/collectCoupons',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '领券中心'
-		},{
-			link: '/pages/user/my/chatonline',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '在线客服'
-		},{
-			link: '/pages/index/category/category?current=0&type=7',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '鞋履箱包'
-		},{
-			link: '/pages/index/category/category?current=0&type=8',
-			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
-			name: '滋补保健'
-		}],
-		per_width: 14.285 * 5
-	};
+    return {};
   },
 
   props: {
@@ -87,54 +27,21 @@ export default {
 	    type: Object,
 	    value: ""
 	  }  
-   },
-   mounted(){
-	  
    },
     //组件的方法
     methods: {
       _jumpImg(e) {
         var src = e.currentTarget.dataset.src;
-        if (!src || src == 'uto_miniprogram') return this.$msg('敬请期待');
+        if (!src || src == 'uto_miniprogram') return;
         wx.navigateTo({
           url: src
         });
-      },
-	  scroll(event){
-		  // todo 计算优化
-		  if(event.detail.scrollLeft < 112){
-			  this.per_width = 14.285 * 5;
-		  }else{
-			  this.per_width = 0.636 * event.detail.scrollLeft;
-		  }
       }
+
     },
  
 };
 </script>
 <style rel="stylesheet/less" lang="less">
 @import "index-nav";
-.scroll-view{
-	width: 750rpx;
-	height: max-content;
-	padding: 0 32rpx;
-	box-sizing: border-box;
-}
-.indicator{
-	width: 100rpx;
-	height: 10rpx;
-	background-color: #e0e0e0;
-	margin: 0 auto;
-	border-radius: 20rpx;
-	position: relative;
-	overflow: hidden;
-	.percentage{
-		height: 10rpx;
-		background-color: #186c6b;
-		position: absolute;
-		top: 0;
-		left: 0;
-		border-radius: 20rpx;
-	}
-}
 </style>

components/index-nav/index-nav仿天美.less

@@ -0,0 +1,40 @@
+.quick-nav{
+  background-color: #FFFFFF;
+  margin-top: 20rpx;
+  .nav-content{
+    display: flex;
+    align-items: center;
+    flex-wrap:wrap;
+    padding: 10px 0 0 0;
+	// width: 890rpx;
+	// width: 1000rpx;
+	
+	width: 1100rpx;
+    .nav-item{
+      padding:0px 0px 10px 0px;
+      // width: 25%;
+      // width: 13.8%;
+	  width: 12.5%;
+	  
+   //    width: 68.97px;
+	  // height: 73px;
+      text-align: center;
+      .top-info{
+        image{
+          width: 40px;
+          height: 40px;
+          //border-radius: 50%;
+        }
+      }
+      .bottom-info{
+        padding-top: 5px;
+        color: #000000;
+        font-size: 12px;
+        line-height: 18px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

components/index-nav/index-nav仿天美.vue

@@ -0,0 +1,140 @@
+<template>
+<!--快捷导航-->
+<view class="quick-nav" :style="'margin-bottom: ' + meta.margin_bottom + 'px'">
+   <scroll-view :scroll-x="true" class="scroll-view" @scroll="scroll">
+	   <view class="nav-content">
+	       <view class="nav-item" v-for="(item, index) in navData" :key="index"  @tap="_jumpImg" :data-src="item.link">
+	           <view class="top-info">
+	               <image :src="item.image"></image>
+	           </view>
+	           <view class="bottom-info">{{item.name}}</view>
+	       </view>
+	   </view>
+   </scroll-view>
+   <view class="indicator">
+	   <view class="percentage" :style="{width: per_width +'%'}"></view>
+   </view>
+</view>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+		list: [{
+			link: '/pages/index/category/category?current=0&type=0',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '面部护肤'
+		},{
+			link: '/pages/index/category/category?current=0&type=3',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '国际精品'
+		},{
+			link: '/pages/point/shoppingMall/shoppingMall',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '积分商城'
+		},{
+			link: '/pages/index/category/category?current=0&type=4',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '服装内衣'
+		},{
+			link: '/pages/index/category/category?current=0&type=6',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '数码家电'
+		},{
+			link: '/pages/index/onlineMall/onlineMall?id=6',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '黄金珠宝'
+		},{
+			link: '/pages/user/member/service',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '会员服务'
+		},{
+			link: '/pages/index/activity/hot',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '活动报名'
+		},{
+			link: '/pages/index/cateringFacilities/cateringFacilities',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '餐饮配套'
+		},{
+			link: '/pages/index/collectCoupons/collectCoupons',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '领券中心'
+		},{
+			link: '/pages/user/my/chatonline',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '在线客服'
+		},{
+			link: '/pages/index/category/category?current=0&type=7',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '鞋履箱包'
+		},{
+			link: '/pages/index/category/category?current=0&type=8',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '滋补保健'
+		}],
+		per_width: 14.285 * 5
+	};
+  },
+
+  props: {
+	 navData: {
+	    type: Array,
+	    value: ''
+	  },
+	  meta: {
+	    type: Object,
+	    value: ""
+	  }  
+   },
+   mounted(){
+	  
+   },
+    //组件的方法
+    methods: {
+      _jumpImg(e) {
+        var src = e.currentTarget.dataset.src;
+        if (!src || src == 'uto_miniprogram') return this.$msg('敬请期待');
+        wx.navigateTo({
+          url: src
+        });
+      },
+	  scroll(event){
+		  // todo 计算优化
+		  if(event.detail.scrollLeft < 112){
+			  this.per_width = 14.285 * 5;
+		  }else{
+			  this.per_width = 0.636 * event.detail.scrollLeft;
+		  }
+	  }
+    },
+ 
+};
+</script>
+<style rel="stylesheet/less" lang="less">
+@import "index-nav";
+.scroll-view{
+	width: 750rpx;
+	height: max-content;
+	padding: 0 32rpx;
+	box-sizing: border-box;
+}
+.indicator{
+	width: 100rpx;
+	height: 10rpx;
+	background-color: #e0e0e0;
+	margin: 0 auto;
+	border-radius: 20rpx;
+	position: relative;
+	overflow: hidden;
+	.percentage{
+		height: 10rpx;
+		background-color: #186c6b;
+		position: absolute;
+		top: 0;
+		left: 0;
+		border-radius: 20rpx;
+	}
+}
+</style>