<script>
import { ref } from 'vue';

export default {
  setup() {
    const list = ref([
      {
        id: 1,
        title: '软件系统开发',
        desc: '定制化软件开发，满足企业多样化需求，提升运营效率',
        img: '/images/list-i1.png',
      },
      {
        id: 2,
        title: '技术咨询',
        desc: '提供专业的技术咨询服务，助力企业解决复杂技术难题',
        img: '/images/list-i2.png',
      },
      {
        id: 3,
        title: '大数据服务',
        desc: '通过大数据分析与应用，驱动企业决策与业务增长',
        img: '/images/list-i3.png',
      },
      {
        id: 4,
        title: '品牌运营管理',
        desc: '全方位品牌策划与管理，提升品牌价值与市场影响力',
        img: '/images/list-i4.png',
      },
      {
        id: 5,
        title: '市场营销策划',
        desc: '定制化营销策略，帮助企业实现精准获客与业绩增长',
        img: '/images/list-i5.png',
      },
      {
        id: 6,
        title: '产品供应链',
        desc: '优化供应链管理，确保产品高效流通与成本控制',
        img: '/images/list-i6.png',
      },
    ])
    return {
      list,
    };
  },
  methods: {
  },
  data() {
    return {
    };
  }
};

</script>

<template>
  <div class="business">
    <div class="banner">
      <img src="/images/business-banner.png" alt="">
    </div>

    <div class="area">
      <span class="b-font">
        OPERATIONAL AREA
      </span>

      <span class="black-ft">
        业务
        <p class="red-ft">
          领域
        </p>
      </span>

      <div class="list">
        <div class="lbox" v-for="item in list" :key="item.id">
          <img :src="item.img" alt="">
          <span class="l-b-font">{{ item.title }}</span>
          <span class="l-s-font">{{ item.desc }}</span>
        </div>
      </div>

      <div class="scheme">
        <div>
          <p>线下实体商家拓客引流解决方案</p>
          <hr>
          <span>
            商家通过让利活动吸引消费者消费并获得余额，余额激励再次消费，形成良性循环。这不仅提升了客户粘性，还促
            使消费者回流，为商家带来持续客流。同时，通过口碑传播吸引新客户，实现引流和品牌影响力的双重提升，最终达到商家与消费者的双赢。
          </span>
        </div>
      </div>

    </div>

    <div class="commodel">
      <span class="b-font">
        COMMERCIAL MODEL
      </span>

      <span class="black-ft">
        商业
        <p class="red-ft">
          模式
        </p>
      </span>

      <span class="title">
        世界上最伟大的商业模式——
        <b>
          利他
        </b>
      </span>

      <div class="details">
        <span>“利他”商业模式以共赢为核心，通过赋能商家、惠及消费者、成就创业者，构建了
          一个多方受益的商业生态，真正体现了“利他即利己”的核心理念。
        </span>
      </div>

      <div class="example">
        <div class="ebox">
          <span>01</span>
          <hr>
          <b>联盟商家</b>
          <p>
            全国数千万实体商家免费入驻，赠送云拓客系统工具，赋能商家精准引流，快速增收！
          </p>
          <img src="/images/e-i1.png" alt="">
        </div>
        <hr style="width: 1px;height: 435px;background-color: #eaeaea;border: none;">
        <div class="ebox">
          <span>02</span>
          <hr>
          <b>创业者</b>
          <p>
            为创业者提供低门槛、高回报的创业机会，帮助其快速搭建财富通道。
          </p>
          <img src="/images/e-i2.png" alt="">
        </div>
        <hr style="width: 1px;height: 435px;background-color: #eaeaea;border: none;">
        <div class="ebox">
          <span>03</span>
          <hr>
          <b>消费者</b>
          <p>
            为全国十四亿消费者打造一个优质的消费
            渠道，实现自用省钱、分享赚钱。
          </p>
          <img src="/images/e-i3.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>