From 60741b1f5c977fb41598b38ebbe25f1395870576 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com> Date: Wed, 1 Dec 2021 22:21:40 +0800 Subject: [PATCH] =?UTF-8?q?nav=E5=AF=BC=E8=88=AA=E6=8D=A2=E5=9B=9E?= =?UTF-8?q?=E5=8E=9F=E6=9D=A5=E7=9A=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/index-nav/index-nav.less | 11 +- components/index-nav/index-nav.vue | 115 ++------------- components/index-nav/index-nav仿天美.less | 40 ++++++ components/index-nav/index-nav仿天美.vue | 140 +++++++++++++++++++ 4 files changed, 192 insertions(+), 114 deletions(-) create mode 100644 components/index-nav/index-nav仿天美.less create mode 100644 components/index-nav/index-nav仿天美.vue 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