邓平艺
4 years ago
16 changed files with 1392 additions and 105 deletions
-
4common/styles/theme.css
-
14components/index-banner/index-banner.vue
-
8components/index-nav/index-nav.less
-
113components/index-nav/index-nav.vue
-
77components/lf-indexFind/lf-indexFind.vue
-
82components/lf-indexShopMatrix/lf-indexShopMatrix.vue
-
94components/lf-shopGoodsCard/lf-shopGoodsCard.vue
-
2components/lf-tabbar/lf-tabbar-box.vue
-
14components/lf-tabbar/lf-tabbar.vue
-
9pages.json
-
445pages/index/category/category.vue
-
225pages/index/category/testdata.js
-
181pages/index/classification/classification - 副本.vue
-
129pages/index/classification/classification.vue
-
96pages/index/index/index.vue
-
2store/index.js
@ -0,0 +1,77 @@ |
|||||
|
<template> |
||||
|
<scroll-view class="find-scroll" :scroll-x="true"> |
||||
|
<view class="find-content"> |
||||
|
<view class="find-item" :class="{'max-item': index == 0}" v-for="(item, index) in 5" :key="index"> |
||||
|
<image class="img" src="https://picsum.photos/200/300"></image> |
||||
|
<view class="lf-line-2 info">南边开，风儿吹，北边放，花儿开，西边来，春归去，东边来，北边跑</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 10rpx;"></view> |
||||
|
</scroll-view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
current: 0 |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.find-scroll{ |
||||
|
padding: 30rpx 32rpx; |
||||
|
width: 750rpx; |
||||
|
height: max-content; |
||||
|
box-sizing: border-box; |
||||
|
.find-content{ |
||||
|
display: flex; |
||||
|
width: max-content; |
||||
|
align-items: center; |
||||
|
padding: 10rpx 0 0 10rpx; |
||||
|
} |
||||
|
.find-item{ |
||||
|
width: 380rpx; |
||||
|
height: 480rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
||||
|
margin-right: 20rpx; |
||||
|
.img{ |
||||
|
width: 380rpx; |
||||
|
height: 380rpx; |
||||
|
background-color: #D8D8D8; |
||||
|
} |
||||
|
.info{ |
||||
|
padding: 10rpx; |
||||
|
width: 380rpx; |
||||
|
height: 100rpx; |
||||
|
box-sizing: border-box; |
||||
|
font-size: 24rpx; |
||||
|
line-height: 1.8; |
||||
|
} |
||||
|
} |
||||
|
.max-item{ |
||||
|
height: 563rpx; |
||||
|
width: 425rpx; |
||||
|
.img{ |
||||
|
width: 425rpx; |
||||
|
height: 425rpx; |
||||
|
} |
||||
|
.info{ |
||||
|
width: 425rpx; |
||||
|
height: 138rpx; |
||||
|
padding: 20rpx; |
||||
|
font-size: 26rpx; |
||||
|
line-height: 2.1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,82 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view class="item" v-for="(item, index) in 16" :key="index"> |
||||
|
<image class="bg-img" src="https://picsum.photos/200/300"></image> |
||||
|
<view class="shop"> |
||||
|
<image src="../../static/recommend-r.png"></image> |
||||
|
<view class="lf-line-1">DIOR迪奥</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
width: 750rpx; |
||||
|
height: max-content; |
||||
|
box-sizing: border-box; |
||||
|
padding: 30rpx 32rpx; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.item{ |
||||
|
width: 165rpx; |
||||
|
height: 165rpx; |
||||
|
border: 1rpx solid #979797; |
||||
|
margin-right: 9rpx; |
||||
|
position: relative; |
||||
|
&:nth-child(4n){ |
||||
|
margin-right: 0rpx; |
||||
|
} |
||||
|
&:nth-child(n+5){ |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
.bg-img{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.shop{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba(0,0,0,0.1); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
&>image{ |
||||
|
width: 70rpx; |
||||
|
height: 70rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #FFFFFF; |
||||
|
} |
||||
|
&>view{ |
||||
|
font-size: 24rpx; |
||||
|
color: #FFFFFF; |
||||
|
margin-top: 4rpx; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,94 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view class="shop"> |
||||
|
<image class="img" src="https://picsum.photos/seed/picsum/200/300" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
<scroll-view class="scroll-view" :scroll-x="true"> |
||||
|
<view class="scroll-content"> |
||||
|
<view class="goods-item" v-for="(item, index) in 5" :key="index"> |
||||
|
<image class="goods-img"></image> |
||||
|
<view class="goods-info"> |
||||
|
<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view> |
||||
|
<view>￥0.5</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="goods-item"> |
||||
|
<view class="more-box"> |
||||
|
<text>查看更多</text> |
||||
|
<text class="lf-iconfont icon--2 lf-text-vertical"></text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
width: 750rpx; |
||||
|
height: max-content; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0rpx 32rpx; |
||||
|
.shop{ |
||||
|
width: 100%; |
||||
|
height: 245rpx; |
||||
|
.img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.scroll-view{ |
||||
|
height: 280rpx; |
||||
|
width: 100%; |
||||
|
margin-top: 20rpx; |
||||
|
.scroll-content{ |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
.goods-item{ |
||||
|
margin-right: 15rpx; |
||||
|
width: 180rpx; |
||||
|
} |
||||
|
.goods-img{ |
||||
|
width: 180rpx; |
||||
|
height: 180rpx; |
||||
|
background-color: #EEEEEE; |
||||
|
} |
||||
|
.goods-info{ |
||||
|
text-align: center; |
||||
|
color: #222222; |
||||
|
&>view:nth-child(1n){ |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
&>view:nth-child(2n){ |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
.more-box{ |
||||
|
width: 180rpx; |
||||
|
height: 180rpx; |
||||
|
background-color: #EEEEEE; |
||||
|
text-align: center; |
||||
|
line-height: 180rpx; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,445 @@ |
|||||
|
<template> |
||||
|
<view class="centent"> |
||||
|
<lf-nav :title="['分类','品牌'][current]" bgColor="#fff" :search="current == 0" @changeHeight="e => nav_height = e"></lf-nav> |
||||
|
<view class="tabs"> |
||||
|
<view class="lf-tab" |
||||
|
:style="{width: 100 / tabs.length +'%'}" |
||||
|
:class="{'tab-active': current == index}" |
||||
|
v-for="(item, index) in tabs" :key="index" |
||||
|
@click="current = index">{{ item.name }} |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 分类 --> |
||||
|
<view class="page" v-if="current == 0"> |
||||
|
<scroll-view class="left_view p_r" scroll-y :style="{ height: autoHeight }"> |
||||
|
<block v-for="(item, index) in dataArr" :key="index"> |
||||
|
<view :class="[left_selectIndex == index ? 'left_item_s' : '', 'left_item']" :id="'left_' + index" @click="leftTap({ item, index })">{{ item.name }}</view> |
||||
|
</block> |
||||
|
<view class="seletItem" :style="{ top: left_selectIndex * 60 - 19 + 'px' }"></view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<scroll-view @scroll="rightScroll" class="right_view" scroll-y :style="{ height: autoHeight }" :scroll-into-view="'left_' + right_selectIndex" scroll-with-animation> |
||||
|
<block v-for="(item, index) in dataArr" :key="index"> |
||||
|
<view :ref="'left_' + index" class="right_item " :id="'left_' + index"> |
||||
|
<text class="right_item_title ">{{ item.name }}</text> |
||||
|
<view class="right_item_view"> |
||||
|
<view class="item" v-for="(item, index) in item.subArr" :key="index" @click="rightTap(item)"> |
||||
|
<image :src="item.img" :style="{ width: '100%', height: subItemW + 'px', background: '#999999' }"></image> |
||||
|
<text class="lf-font-24">{{ item.name }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
<view class="" :style="{ height: 'calc('+ scrollH / 2 +'px)' }"><!-- 站位 --></view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
<!-- 品牌 --> |
||||
|
<view class="brand" v-else-if="current == 1" :style="{height: autoHeight}"> |
||||
|
<!-- 筛选 --> |
||||
|
<view class="lf-filter-box"> |
||||
|
<view class="lf-filter" :class="{'lf-filter-after': filter_active == ''}"> |
||||
|
<view :class="{'filter-active': filter_active == 'floor'}" @click="filter_active = 'floor'">楼层</view> |
||||
|
<view :class="{'filter-active': filter_active == 'class'}" @click="filter_active = 'class'">分类</view> |
||||
|
</view> |
||||
|
<view class="filter-modal-mask" :style="{height: otherHeight}" v-if="filter_active != ''" @click="filter_active = ''"> |
||||
|
<view class="filter-modal"> |
||||
|
<view class="filter-item" v-for="(item, index) in 6" :key="index">{{ '哈哈'+ item }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 内容 --> |
||||
|
<scroll-view class="brand-scroll" :scroll-into-view="scrollAnchorId" :scroll-y="true" :style="{height: otherHeight}"> |
||||
|
<view class="lf-flex brand-item" :id="'anchor-'+ index" v-for="(item, index) in point_list" :key="index"> |
||||
|
<image class="img" src="https://picsum.photos/200"></image> |
||||
|
<view class="info"> |
||||
|
<view class="lf-font-36 lf-font-bold lf-color-black">luckin coffee 瑞幸咖啡 {{ item }}</view> |
||||
|
<view class="lf-font-24 lf-color-gray">餐饮·美食｜18件在售</view> |
||||
|
<view class="lf-font-24"> |
||||
|
<text class="lf-iconfont icon--1 lf-font-24"></text> |
||||
|
<text class="lf-color-gray lf-m-l-10">L2</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<!-- 锚点定位 --> |
||||
|
<view class="fixed-point" @touchmove="pointTouchmove"> |
||||
|
<view class="point-item" @click="pointClick" :id="'point-'+index" :style="{height: 100 / 26 +'%'}" v-for="(item, index) in point_list" :key="index">{{ item }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<lf-tabbar></lf-tabbar> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import lfNav from '@/components/lf-nav/lf-nav.vue'; |
||||
|
import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue'; |
||||
|
import testdata from './testdata.js'; |
||||
|
let app = getApp(); |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
scrollH: 0, |
||||
|
subItemW: 0, |
||||
|
left_selectIndex: 0, |
||||
|
right_selectIndex: 0, |
||||
|
ttscrollH: 0, //总高度 |
||||
|
placeholderH: 0, //占位高度 |
||||
|
heighArr: [], |
||||
|
dataArr: testdata, |
||||
|
current: 1, |
||||
|
nav_height: 0, |
||||
|
tabs: [{ |
||||
|
name: '分类' |
||||
|
},{ |
||||
|
name: '品牌' |
||||
|
}], |
||||
|
filter_active: '', |
||||
|
point_list: [], |
||||
|
scrollAnchorId: '' |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
autoHeight(){ |
||||
|
return `calc(${this.scrollH}px - 50px - ${this.nav_height}px - 90rpx)`; |
||||
|
}, |
||||
|
otherHeight(){ |
||||
|
return `calc(${this.scrollH}px - 50px - ${this.nav_height}px - 90rpx - 105rpx)`; |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
lfNav, |
||||
|
lfTabbar |
||||
|
}, |
||||
|
onLoad() { |
||||
|
// https://ext.dcloud.net.cn/plugin?id=5031 |
||||
|
let info = uni.getSystemInfoSync(); |
||||
|
|
||||
|
let self = this; |
||||
|
self.scrollH = info.screenHeight; |
||||
|
self.subItemW = parseInt((info.screenWidth * (2 / 3) - 15 * 2 - 24) / 3); |
||||
|
setTimeout(function() { |
||||
|
self.computerH(); |
||||
|
}, 100); |
||||
|
this.createAtoZ(); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 生成A-Z的大写字母 |
||||
|
createAtoZ(){ |
||||
|
let point_list = []; |
||||
|
for(var i=0; i<26; i++){ |
||||
|
point_list.push(String.fromCharCode(65+i)); |
||||
|
} |
||||
|
this.point_list = point_list; |
||||
|
}, |
||||
|
pointTouchmove(event){ |
||||
|
console.log(event); |
||||
|
}, |
||||
|
pointClick(event){ |
||||
|
let index = (event.target.id).replace('point-', ''); |
||||
|
let letter = this.point_list[index]; |
||||
|
this.scrollAnchorId = ''; |
||||
|
this.$msg(letter); |
||||
|
this.$nextTick(() => { |
||||
|
this.scrollAnchorId = 'anchor-'+ index; |
||||
|
}) |
||||
|
}, |
||||
|
leftTap: function(e) { |
||||
|
this.left_selectIndex = e.index; |
||||
|
this.right_selectIndex = e.index; |
||||
|
}, |
||||
|
// 右边点击 |
||||
|
rightTap: function() { |
||||
|
uni.showModal({ |
||||
|
title: '点击了', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
}, |
||||
|
rightScroll: function(e) { |
||||
|
let scrollH = e.detail.scrollTop + 30; |
||||
|
let cc = this.ttscrollH - this.scrollH; |
||||
|
|
||||
|
let a = 0; |
||||
|
let findInx = this.heighArr.findIndex(function(itemH, i) { |
||||
|
a = a + itemH; |
||||
|
return a > scrollH; |
||||
|
}); |
||||
|
// if (scrollH >= cc) { |
||||
|
// return; |
||||
|
// } |
||||
|
this.left_selectIndex = findInx; |
||||
|
}, |
||||
|
// 计算高度 |
||||
|
computerH: function() { |
||||
|
this.ttscrollH = 0; |
||||
|
for (let item of this.dataArr) { |
||||
|
let title_lineH = 49; //rpx |
||||
|
let subNum = item.subArr.length; |
||||
|
let subImgH = this.subItemW; //rpx |
||||
|
let subTitleH = 40; //rpx |
||||
|
let rowSpecH = 8; //rpx |
||||
|
let rowN = subNum % 3; |
||||
|
let rowSpecNum = parseInt(subNum / 3) + parseInt(rowN > 0 ? 1 : 0); |
||||
|
let totalRpx = title_lineH + (subImgH + subTitleH) * rowSpecNum + rowSpecH * (rowSpecNum - 1); |
||||
|
this.heighArr.push(totalRpx); |
||||
|
this.ttscrollH = this.ttscrollH + totalRpx; |
||||
|
} |
||||
|
|
||||
|
// this.placeholderH = this.scrollH - this.heighArr[this.heighArr.length - 1]; |
||||
|
|
||||
|
//以下方法也可以 |
||||
|
// let self=this |
||||
|
// var selectorQuery = uni.createSelectorQuery() |
||||
|
// selectorQuery.selectAll('.right_item').boundingClientRect(data => { |
||||
|
// self.heighArr = data.map(item => { |
||||
|
// return { |
||||
|
// top: Math.round(item.top), |
||||
|
// height: Math.round(item.height) |
||||
|
// } |
||||
|
// }) |
||||
|
// }).exec() |
||||
|
// console.log('ttscrollH',this.$refs.left_0) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.page { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 2fr; |
||||
|
grid-template-rows: auto; |
||||
|
position: absolute; |
||||
|
left: 0rpx; |
||||
|
right: 0rpx; |
||||
|
overflow: hidden; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.left_view { |
||||
|
background-color: #f4f8f8; |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
// 蒙版 |
||||
|
.seletItem { |
||||
|
height: 98px; |
||||
|
position: absolute; |
||||
|
top: 0rpx; |
||||
|
left: 0rpx; |
||||
|
z-index: 10; |
||||
|
right: 0rpx; |
||||
|
// background-color: rgba(255, 255, 255, 0.3); |
||||
|
transition: top 0.2s linear; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
&::before { |
||||
|
content: ''; |
||||
|
width: 6rpx; |
||||
|
height: 60%; |
||||
|
background-color: #15716E; |
||||
|
left: 0rpx; |
||||
|
} |
||||
|
} |
||||
|
.left_item { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 60px; |
||||
|
margin-bottom: 0rpx; |
||||
|
position: relative; |
||||
|
font-size: 28rpx; |
||||
|
box-sizing: border-box; |
||||
|
color: #555555; |
||||
|
} |
||||
|
.left_item_s { |
||||
|
background-color: #ffffff; |
||||
|
color: #15716E; |
||||
|
font-weight: bold; |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right_view { |
||||
|
background-color: #ffffff; |
||||
|
padding: 0rpx 12px; |
||||
|
box-sizing: border-box; |
||||
|
.right_item { |
||||
|
.right_item_title { |
||||
|
display: block; |
||||
|
box-sizing: border-box; |
||||
|
line-height: 49px; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
color: #15716E; |
||||
|
} |
||||
|
.right_item_view { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
grid-template-rows: auto; |
||||
|
grid-gap: 8px 15px; |
||||
|
box-sizing: border-box; |
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-flow: column nowrap; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
text { |
||||
|
color: #333; |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tabs{ |
||||
|
width: 750rpx; |
||||
|
height: 90rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
border-bottom: 1rpx solid #e5e5e5; |
||||
|
background-color: #FFFFFF; |
||||
|
.lf-tab{ |
||||
|
// width: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #777777; |
||||
|
position: relative; |
||||
|
&.tab-active{ |
||||
|
color: #15716E; |
||||
|
} |
||||
|
&.tab-active::after{ |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 50%; |
||||
|
width: 80rpx; |
||||
|
height: 10rpx; |
||||
|
background-color: #15716E; |
||||
|
border-radius: 10rpx 10rpx 0 0; |
||||
|
margin-left: -40rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.lf-filter-box{ |
||||
|
height: 105rpx; |
||||
|
width: 750rpx; |
||||
|
background-color: #F4F8F8; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
.lf-filter{ |
||||
|
width: 300rpx; |
||||
|
height: 65rpx; |
||||
|
border-radius: 33rpx; |
||||
|
border: 1rpx solid #15716E; |
||||
|
color: #15716E; |
||||
|
font-size: 24rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
&.lf-filter-after::after{ |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 12rpx; |
||||
|
left: calc(50% - 1rpx); |
||||
|
width: 2rpx; |
||||
|
height: 40rpx; |
||||
|
background-color: #15716E; |
||||
|
} |
||||
|
&>view{ |
||||
|
height: 100%; |
||||
|
width: 50%; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.filter-active{ |
||||
|
background-color: #15716E; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
.filter-modal-mask{ |
||||
|
position: absolute; |
||||
|
top: 105rpx; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
background-color: rgba(0,0,0,0.5); |
||||
|
.filter-modal{ |
||||
|
width: 750rpx; |
||||
|
height: max-content; |
||||
|
padding: 60rpx 32rpx; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #FFFFFF; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.filter-item{ |
||||
|
width: 215rpx; |
||||
|
height: 65rpx; |
||||
|
border-radius: 10rpx; |
||||
|
border: 1rpx solid #555555; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #555555; |
||||
|
margin-right: 21rpx; |
||||
|
&:nth-child(3n){ |
||||
|
margin-right: 0rpx; |
||||
|
} |
||||
|
&:nth-child(n+4){ |
||||
|
margin-top: 21rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.brand-scroll{ |
||||
|
padding: 0rpx 32rpx; |
||||
|
box-sizing: border-box; |
||||
|
width: 750rpx; |
||||
|
.brand-item{ |
||||
|
margin-bottom: 60rpx; |
||||
|
&:nth-child(1n){ |
||||
|
margin-top: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
.img{ |
||||
|
width: 150rpx; |
||||
|
height: 150rpx; |
||||
|
border-radius: 4rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
.info{ |
||||
|
width: 514rpx; |
||||
|
height: 150rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
} |
||||
|
.brand{ |
||||
|
position: relative; |
||||
|
} |
||||
|
.fixed-point{ |
||||
|
position: fixed; |
||||
|
right: 0; |
||||
|
top: 18vh; |
||||
|
height: 70vh; |
||||
|
width: 57rpx; |
||||
|
background-color: rgba(0,0,0,0.3); |
||||
|
border-radius: 30rpx 0rpx 0rpx 30rpx; |
||||
|
padding: 14rpx 0rpx; |
||||
|
.point-item{ |
||||
|
font-size: 24rpx; |
||||
|
color: #FFFFFF; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,225 @@ |
|||||
|
export default [{ |
||||
|
name: '面部护肤', |
||||
|
subArr: [{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '香水彩妆', |
||||
|
subArr: [{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '精致洗护', |
||||
|
subArr: [{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称2' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '国际精品', |
||||
|
subArr: [{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '水果2' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '服装内衣', |
||||
|
subArr: [{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '悲剧2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '悲剧2' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '首饰配饰', |
||||
|
subArr: [{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '名称' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '服装内衣', |
||||
|
subArr: [{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '悲剧2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '悲剧2' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '服装内衣', |
||||
|
subArr: [{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '悲剧2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '悲剧2' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '滴滴滴等', |
||||
|
subArr: [{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '悲剧2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '悲剧2' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '好好说说', |
||||
|
subArr: [{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '悲剧2' |
||||
|
}, |
||||
|
{ |
||||
|
img: 'https://picsum.photos/200', |
||||
|
name: '悲剧2' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
@ -0,0 +1,181 @@ |
|||||
|
<template> |
||||
|
<view style="height: 100%;"> |
||||
|
<lf-nav title="分类"></lf-nav> |
||||
|
<view id="classification" style="height: 100%;"> |
||||
|
<view :class="classData.type == 'upper_lower' ? '' : 'hiddens'" style="height: 100%;"> |
||||
|
<view v-if="init && classData.type == 'upper_lower'"> |
||||
|
<view class="class__banner" v-if="classData.CategoryListAd && classData.CategoryListAd.length"> |
||||
|
<swiper :style="{height:imgHeight+'px'}" indicator-dots="true" autoplay="true" circular="true"> |
||||
|
<swiper-item v-for="(item,index) in classData.CategoryListAd" :key="index"> |
||||
|
<image mode="widthFix" @load="imgLoad" :src="item.image" :data-url="item.link" @tap="jumpItem"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
<view class="class__item_box"> |
||||
|
<view class="class__item" v-for="(item,index) in classData.CategoryList" :key="index"> |
||||
|
<view class="img_item" :data-url="item.link" @tap="jumpItem"> |
||||
|
<image :src="item.image"></image> |
||||
|
<view class="img_text"> |
||||
|
<view class="text_top"> |
||||
|
<view class="text_line"></view> |
||||
|
<view class="text_content"> |
||||
|
{{item.name}} |
||||
|
</view> |
||||
|
<view class="text_line"></view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="text_btn"> |
||||
|
查看全部 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="class__tag"> |
||||
|
<view class="tag__item" v-for="(items,idx) in item.items" :key="idx"> |
||||
|
<view class="tag_flex" :data-url="items.link" @tap="jumpItem"> |
||||
|
<view class="tag_img"> |
||||
|
<image :src="items.image"></image> |
||||
|
</view> |
||||
|
<view class="tag_text"> |
||||
|
{{items.name}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view v-if="init && classData.type == 'left_right'" style="height: 100%;"> |
||||
|
<view class="classifical" style="height: 100%;"> |
||||
|
<view class="left-menu"> |
||||
|
<view class="item" :class="activeIndex == key ? 'active' : ''" v-for="(i,key) in classData.CategoryList" :key="key" |
||||
|
@tap="change" :data-index="key">{{i.name}}</view> |
||||
|
</view> |
||||
|
<view class="right-content" style="height: 100%;"> |
||||
|
<view class="title" @tap="jumpItem" :data-url="classData.CategoryList[activeIndex].link"> |
||||
|
<span>{{classData.CategoryList[activeIndex].name}}</span> |
||||
|
<span class="iconfont icon--xiangyoujiantou"></span> |
||||
|
</view> |
||||
|
<view v-for="(item,index) in classData.CategoryList" :key="index" v-show="activeIndex == index"> |
||||
|
<view class="list"> |
||||
|
<view class="list-item" v-for="(list,idx) in item.items" :key="idx" @tap="jumpItem" :data-url="list.link"> |
||||
|
<view class="photo"> |
||||
|
<image :src="list.image" mode="widthFix"></image> |
||||
|
</view> |
||||
|
<view class="txt">{{list.name}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<lf-tabbar></lf-tabbar> |
||||
|
</view> |
||||
|
|
||||
|
</template> |
||||
|
<script> |
||||
|
import { |
||||
|
pageLogin, |
||||
|
getUrl, |
||||
|
config |
||||
|
} from '@/common/js/utils.js'; |
||||
|
import lfNav from '@/components/lf-nav/lf-nav.vue'; |
||||
|
import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue'; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
lfNav, |
||||
|
lfTabbar |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
classData: '', |
||||
|
screenWidth: '', |
||||
|
activeIndex: 0, |
||||
|
init: false, |
||||
|
imgHeight:'' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
onLoad() { |
||||
|
this.classificationList(); |
||||
|
wx.getSystemInfo({ |
||||
|
success: res => { |
||||
|
this.screenWidth = res.screenWidth; |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
methods: { |
||||
|
//切换menu |
||||
|
change(e) { |
||||
|
var activeIndex = e.currentTarget.dataset.index; |
||||
|
this.activeIndex = activeIndex; |
||||
|
}, |
||||
|
|
||||
|
jumpItem(e) { |
||||
|
var url = e.currentTarget.dataset.url; |
||||
|
wx.navigateTo({ |
||||
|
url: url |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
imgLoad(e) { |
||||
|
var height = e.detail.height; |
||||
|
var width = e.detail.width; |
||||
|
var ratio = width / height; |
||||
|
var screenWidth = this.screenWidth; |
||||
|
this.imgHeight = screenWidth / ratio; |
||||
|
}, |
||||
|
|
||||
|
classificationList() { |
||||
|
wx.showLoading({ |
||||
|
title: '加载中', |
||||
|
mask: true |
||||
|
}); |
||||
|
this.$http.get({ |
||||
|
api: 'api/home/getHomeCategoryList' |
||||
|
}).then(res => { |
||||
|
if (res.statusCode == 200) { |
||||
|
res = res.data; |
||||
|
if (res.status) { |
||||
|
this.init = true; |
||||
|
this.classData = res.data; |
||||
|
} else { |
||||
|
wx.showModal({ |
||||
|
content: '请求失败', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
} else { |
||||
|
wx.showModal({ |
||||
|
content: '请求失败', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
wx.hideLoading(); |
||||
|
}, err => { |
||||
|
wx.showModal({ |
||||
|
content: '请求失败', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
wx.hideLoading(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style rel="stylesheet/less" lang="less"> |
||||
|
@import "classification"; |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue