178 lines
4.6 KiB
Vue
178 lines
4.6 KiB
Vue
<template>
|
|
<view class="cloud_entrepot">
|
|
<view class="head-wrapper"></view>
|
|
<view class="town-title">通滩镇里海云仓</view>
|
|
<view class="body-wrapper">
|
|
<block v-for="(item,index) in cloudList" :key="index">
|
|
<view class="item" :style="{'background-image': `url(${item.bg})`}">
|
|
<text class="item-title">{{item.title}}</text>
|
|
<text>{{item.text}}</text>
|
|
<view class="chakan-btn" @click="navigator">查看</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let url = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13';
|
|
export default {
|
|
data() {
|
|
return {
|
|
cloudList: [{
|
|
title: '商超服务云仓服务',
|
|
text: '便捷商超购物，包送到家',
|
|
bg: url + '/shangchao.png'
|
|
},
|
|
{
|
|
title: '农副产品云仓服务',
|
|
text: '瓜果蔬菜线上购买',
|
|
bg: url + '/nongfu.png'
|
|
},
|
|
{
|
|
title: '生活服务云仓服务',
|
|
text: '生活服务样样齐全',
|
|
bg: url + '/shenghuo.png'
|
|
},
|
|
{
|
|
title: '农业生产云仓服务',
|
|
text: '种子化肥送到家',
|
|
bg: url + '/nongye.png'
|
|
},
|
|
{
|
|
title: '物流溯源云仓服务',
|
|
text: '追溯产品源头',
|
|
bg: url + '/wuliu.png'
|
|
},
|
|
{
|
|
title: '坝坝宴云仓服务',
|
|
text: '农家各种酒席宴会',
|
|
bg: url + '/yan.png'
|
|
},
|
|
{
|
|
title: '文娱旅游云仓服务',
|
|
text: '周边好玩景点',
|
|
bg: url + '/shangchao.png'
|
|
},
|
|
{
|
|
title: '民生公益云仓服务',
|
|
text: '扶贫助学项目',
|
|
bg: url + '/minsheng.png'
|
|
},
|
|
{
|
|
title: '医疗保健云仓服务',
|
|
text: '便捷医疗服务',
|
|
bg: url + '/yiliao.png'
|
|
},
|
|
{
|
|
title: '教育培训云仓服务',
|
|
text: '更完善的教育系统',
|
|
bg: url + '/jiaoyu.png'
|
|
},
|
|
{
|
|
title: '装修建筑云仓服务',
|
|
text: '个人家庭商铺装修',
|
|
bg: url + '/zhuangxiu.png'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onShow() {},
|
|
onPullDownRefresh() {
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
methods: {
|
|
navigator() {
|
|
uni.navigateTo({
|
|
url: '/pages/user/index'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cloud_entrepot {
|
|
background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/ycbg.png") no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.head-wrapper {
|
|
height: 485.96rpx;
|
|
width: 100%;
|
|
background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/top.png") no-repeat;
|
|
background-size: cover;
|
|
margin-bottom: 49.12rpx;
|
|
}
|
|
|
|
.town-title {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 50.88rpx;
|
|
color: #fff;
|
|
margin-bottom: 28.07rpx;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 66.67rpx;
|
|
height: 31.58rpx;
|
|
background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/you.png") no-repeat;
|
|
background-size: cover;
|
|
margin-left: 24.56rpx;
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 66.67rpx;
|
|
height: 31.58rpx;
|
|
background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/zuo.png") no-repeat;
|
|
background-size: cover;
|
|
margin-right: 24.56rpx;
|
|
}
|
|
}
|
|
|
|
.body-wrapper {
|
|
width: 694.74rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin: 0 auto;
|
|
|
|
.item {
|
|
width: 336.84rpx;
|
|
height: 100%;
|
|
padding: 24.56rpx 28.07rpx;
|
|
margin-bottom: 21.05rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
text {
|
|
display: block;
|
|
font-size: 24.56rpx;
|
|
color: #999;
|
|
margin-bottom: 14.04rpx;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 31.58rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.chakan-btn {
|
|
width: 114.04rpx;
|
|
height: 49.12rpx;
|
|
font-size: 28.07rpx;
|
|
text-align: center;
|
|
line-height: 49.12rpx;
|
|
color: #fff;
|
|
margin-top: auto;
|
|
background: linear-gradient(90deg, #FE5300 0%, #F84221 100%);
|
|
border-radius: 50px;
|
|
}
|
|
}
|
|
}
|
|
</style> |