<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>