<template>
|
<view class="home-zones">
|
<view class="c" v-for="(item,index) of list" @click.stop="toDetail(item.id)">
|
<image class="p1 img100 m-t-12" :lazy-load="true" mode="aspectFill"
|
:src="item.bgUrl">
|
</image>
|
<view class="c-txt-1" v-show="false">
|
<view class="title">{{ item.name }}</view>
|
<view class="flex">
|
<view class="desc">查看详情</view>
|
<view class="right m-l-5">
|
<uni-icons class="icon" type="right" color="#C3B8A0" size="12"></uni-icons>
|
</view>
|
|
</view>
|
</view>
|
</view>
|
<view class="c" v-if="false">
|
<image class="p2 img100 m-t-12" :lazy-load="true" mode="aspectFit"
|
src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/52/52deec39e6ff47efb4855cda8766f29e%E8%B7%AF%E5%BE%84%204@2x.png">
|
</image>
|
<view class="c-txt-1" style="top: 60rpx;">
|
<view class="title">特惠专区</view>
|
<view class="flex">
|
<view class="desc">查看详情</view>
|
<view class="right m-l-5">
|
<uni-icons class="icon" type="right" color="#C3B8A0" size="12"></uni-icons>
|
</view>
|
|
</view>
|
</view>
|
</view>
|
<view class="flex m-t-12" v-if="false">
|
<view class="flex1 c m-r-5">
|
<image class="p3 img100" :lazy-load="true" mode="aspectFit"
|
src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/87/8787940a92524d7a9805a9184946cfaf%E4%BD%8D%E5%9B%BE@2x%20(5).png">
|
</image>
|
<view class="c-txt-2">
|
<view class="title">品质专区</view>
|
<view class="flex">
|
<view class="desc">查看详情</view>
|
<view class="right m-l-5">
|
<uni-icons class="icon" type="right" color="#ffffff" size="9"></uni-icons>
|
</view>
|
|
</view>
|
</view>
|
</view>
|
<view class="flex1 c m-l-5">
|
<image class="p4 img100" :lazy-load="true" mode="aspectFit"
|
src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/0e/0eb0917d31e64c849f250b6e0a825b25%E4%BD%8D%E5%9B%BE@2x%20(6).png">
|
</image>
|
<view class="c-txt-2 red">
|
<view class="title">秒杀专区</view>
|
<view class="flex">
|
<view class="desc">查看详情</view>
|
<view class="right m-l-5">
|
<uni-icons class="icon" type="right" color="#ffffff" size="9"></uni-icons>
|
</view>
|
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
list: [],
|
};
|
},
|
methods: {
|
toDetail(id) {
|
uni.navigateTo({
|
url: `/sub_pages/customer/trade/list?zoneId=${id}`
|
})
|
},
|
},
|
mounted() {
|
console.log('init hone zones')
|
this.$http.request('get', '/api/flower/zone/list', {}).then(res => {
|
this.list = res.data || []
|
})
|
},
|
onLoad() {
|
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.home-zones {
|
margin-top: 20rpx;
|
|
.c {
|
position: relative;
|
|
.c-txt-1 {
|
position: absolute;
|
left: 38rpx;
|
top: 40rpx;
|
|
.title {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #FFFFFF;
|
line-height: 50rpx;
|
margin-bottom: 8rpx;
|
}
|
|
.desc {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #FFFFFF;
|
line-height: 40rpx;
|
}
|
|
.right {
|
background: #FFFFFF;
|
border-radius: 50%;
|
width: 28rpx;
|
height: 28rpx;
|
margin-top: 6rpx;
|
position: relative;
|
|
.icon {
|
position: absolute;
|
top: -10rpx;
|
left: 2rpx;
|
}
|
}
|
}
|
|
.c-txt-2 {
|
position: absolute;
|
left: 22rpx;
|
top: 50rpx;
|
|
.title {
|
font-weight: 600;
|
font-size: 28rpx;
|
color: #535FCA;
|
line-height: 40rpx;
|
margin-bottom: 2rpx;
|
}
|
|
.desc {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #535FCA;
|
line-height: 34rpx;
|
}
|
|
.right {
|
background: #535FCA;
|
border-radius: 50%;
|
width: 24rpx;
|
height: 24rpx;
|
margin-top: 6rpx;
|
position: relative;
|
|
.icon {
|
position: absolute;
|
top: -14rpx;
|
left: 4rpx;
|
}
|
}
|
}
|
|
.c-txt-2.red {
|
.title {
|
color: #892E2E;
|
}
|
|
.desc {
|
color: #892E2E;
|
}
|
|
.right {
|
background: #892E2E;
|
}
|
}
|
}
|
|
.p1 {
|
width: 100%;
|
height: 176rpx;
|
}
|
|
.p2 {
|
width: 100%;
|
height: 176rpx;
|
|
}
|
|
.p3 {
|
width: 100%;
|
height: 176rpx;
|
}
|
|
.p4 {
|
width: 100%;
|
height: 176rpx;
|
}
|
}
|
</style>
|
