You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
3.7 KiB
139 lines
3.7 KiB
<template>
|
|
<view>
|
|
<lf-nav title="活动名称活动名称" :showIcon="true"></lf-nav>
|
|
<view class="cover">
|
|
<image class="img" src="https://picsum.photos/200"></image>
|
|
</view>
|
|
<view>
|
|
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
|
|
</view>
|
|
<view class="goods-list">
|
|
<!-- TODO 此处应为渲染多个lf-waterfall组件 -->
|
|
<lf-waterfall :list="list" ref="uWaterfallFather"></lf-waterfall>
|
|
</view>
|
|
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
|
|
export default {
|
|
components: {
|
|
lfWaterfall
|
|
},
|
|
data(){
|
|
return {
|
|
current: 0,
|
|
tab_list: [{
|
|
name: '综合'
|
|
},{
|
|
name: '销量'
|
|
},{
|
|
name: '价格'
|
|
}],
|
|
list: [
|
|
{
|
|
id: 10,
|
|
original_price: "4111.00",
|
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
|
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
|
|
price: "2412.00",
|
|
product_id: 1008,
|
|
sale: 0,
|
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
|
|
},
|
|
{
|
|
id: 10,
|
|
original_price: "4111.00",
|
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
|
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
|
|
price: "2412.00",
|
|
product_id: 1008,
|
|
sale: 0,
|
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
|
|
},
|
|
{
|
|
id: 10,
|
|
original_price: "4111.00",
|
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
|
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
|
|
price: "2412.00",
|
|
product_id: 1008,
|
|
sale: 0,
|
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
|
|
},
|
|
{
|
|
id: 10,
|
|
original_price: "4111.00",
|
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
|
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
|
|
price: "2412.00",
|
|
product_id: 1008,
|
|
sale: 0,
|
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
|
|
},
|
|
{
|
|
id: 10,
|
|
original_price: "4111.00",
|
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
|
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
|
|
price: "2412.00",
|
|
product_id: 1008,
|
|
sale: 0,
|
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
tabChange(index){
|
|
this.current = index;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.cover{
|
|
width: 750rpx;
|
|
height: 245rpx;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.goods-list{
|
|
padding: 30rpx 32rpx;
|
|
}
|
|
|
|
// tabs样式
|
|
/deep/.u-scroll-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
/deep/.u-scroll-box .u-tab-bar {
|
|
background-color: #15716E!important;
|
|
width: 80rpx!important;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -12rpx;
|
|
}
|
|
|
|
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
|
|
background-color: #15716E!important;
|
|
width: 56rpx!important;
|
|
position: absolute;
|
|
height: 5rpx!important;
|
|
left: 8rpx;
|
|
bottom: -4rpx;
|
|
}
|
|
|
|
/deep/ .u-tab-item {
|
|
font-size: 28rpx!important;
|
|
}
|
|
</style>
|