diff --git a/components/index-nav/index-nav.less b/components/index-nav/index-nav.less index c00f580..83314aa 100644 --- a/components/index-nav/index-nav.less +++ b/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{ diff --git a/components/index-nav/index-nav.vue b/components/index-nav/index-nav.vue index 8a46e01..3a55a5c 100644 --- a/components/index-nav/index-nav.vue +++ b/components/index-nav/index-nav.vue @@ -1,18 +1,13 @@ @@ -20,62 +15,7 @@ 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; - } - } + } + }, }; \ No newline at end of file diff --git a/components/index-nav/index-nav仿天美.less b/components/index-nav/index-nav仿天美.less new file mode 100644 index 0000000..c00f580 --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/components/index-nav/index-nav仿天美.vue b/components/index-nav/index-nav仿天美.vue new file mode 100644 index 0000000..8a46e01 --- /dev/null +++ b/components/index-nav/index-nav仿天美.vue @@ -0,0 +1,140 @@ + + + \ No newline at end of file