<template>
  <BasePage>
    <div class="development">
      <div class="developmentTitle">
        <span>全渠道端口开发</span>
      </div>

      <div class="portList">
        <div class="portItem pB1" v-for="(item, index) in portItem.slice(0, 2)" :class="'pI' + index" :key="index">
          <img :src="item.img" alt="">
          <b>{{ item.title }}</b>
          <span>{{ item.content }}</span>
        </div>
      </div>

      <div class="portList">
        <div class="portItem pB2" v-for="(item, index) in portItem.slice(2)" :class="'pI2' + index" :key="index">
          <img :src="item.img" alt="">
          <b>{{ item.title }}</b>
          <span>{{ item.content }}</span>
        </div>
      </div>

      <div class="solution">
        <div class="solutionTitle">
          <span>行业解决方案</span>
        </div>

        <div class="solutionList">
          <div class="solutionItem" v-for="(item, index) in solutionItem" :key="index">
            <img v-if="index % 2 !== 0" :src="item.img" alt="">

            <div class="content">
              <b>{{ item.title }}</b>
              <div v-for="line in item.content.split('\n')">
                <p>●</p><span>{{ line }}</span>
              </div>
            </div>

            <img v-if="index % 2 === 0" :src="item.img" alt="">
          </div>
        </div>
      </div>

    </div>
  </BasePage>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      portItem: [
        {
          img: '/img/portItem1.png',
          title: '公众号开发体系',
          content: '微信生态社交裂变设计 \n适用：社交营销与会员管理'
        },
        {
          img: '/img/portItem2.png',
          title: ' 小程序矩阵开发',
          content: '高阶权限·即用即走 \n适用：线下工具场景'
        },
        {
          img: '/img/portItem3.png',
          title: ' APP定制开发',
          content: '双模开发·自主生态 \n适用：高粘性运营'
        },
        {
          img: '/img/portItem4.png',
          title: 'H5跨平台系统',
          content: '多端自适应 \n适用：快速推广'
        },
        {
          img: '/img/portItem5.png',
          title: 'PC端管理系统',
          content: '企业级SEO后台 \n适用：数据与供应链'
        },
      ],
      solutionItem: [
        {
          img: '/img/solutionItem1.png',
          title: '电商新零售体系',
          content: '社交电商（分销+团队奖）\n 跨境电商（多语言+国际付）\n 直播电商（连麦+弹幕）'
        },
        {
          img: '/img/solutionItem2.png',
          title: ' 金融创新模型',
          content: '区块链通证（合约+钱包）\n 众筹抢购（定时+公示）\n绿色积分（返利+联盟）'
        },
        {
          img: '/img/solutionItem3.png',
          title: '实体赋能方案',
          content: '异业联盟（跨店结算+会员互通）\n 智慧门店（扫码购+库存联动）\n 共享平台（LBS+分时计费）'
        },
        {
          img: '/img/solutionItem4.png',
          title: ' 互动营销工具',
          content: '竞拍（荷兰式+自动交割）\n 拼团（成团+防超卖）\n 裂变（阶梯奖+看板）'
        },
      ],
    };
  },
  computed: {

  }
};
</script>
