<template>
  <BasePage>
    <div class="model">
      <div class="modelBox">
        <div class="modelTitle">
          <span>核心模式架构</span>
        </div>

        <div class="coreModel">
          <div class="coreItem allline">
            <div class="coreItemTitle">
              <span>前端获客</span>
            </div>
            <div class="coreItemContent">
              - 社交裂变（拼团/秒杀/红包） <br>
              - 异业联盟<br>
              - 多媒体直播
            </div>

            <div class="coreItemNum">
              <span>1</span>
            </div>
          </div>

          <div class="secondLine">
            <div class="coreItem">
              <div class="coreItemTitle">
                <span>中端转化</span>
              </div>
              <div class="coreItemContent">
                - 绿色积分通证化<br>
                - 多级智能分销<br>
                - 区域代理体系
              </div>

              <div class="coreItemNum">
                <span>2</span>
              </div>
            </div>

            <div class="coreItem">
              <div class="coreItemTitle">
                <span>后端留存</span>
              </div>
              <div class="coreItemContent">
                - 供应链F2C <br>
                - 区块链溯源 <br>
                - 会员分红体系
              </div>

              <div class="coreItemNum">
                <span>3</span>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="modelBox interest">
        <div class="modelTitle">
          <span>动态利益分配方案</span>
        </div>

        <div class="interestModel">
          <div class="interestItem" v-for="(item, index) in interestItem" :key="index">
            <img :src="item.img" alt="">
            <div class="interestTitle">
              <span>{{ item.title }}</span>
            </div>
            <div class="interestContent">
              {{ item.content }}
            </div>
          </div>
        </div>
      </div>

      <div class="modelBox">
        <div class="modelTitle">
          <span>模式创新亮点</span>
        </div>

        <div class="innovateModel">
          <div class="innovateItem" v-for="(item, index) in innovateItem" :key="index">
            <img :src="item.img" alt="">
            <div>
              <div class="innovateTitle">
                <span>{{ item.title }}</span>
              </div>
              <div class="innovateContent">
                <p>
                  <span :style="{ color: item.content.color }">◆</span> {{ item.content[0] }}
                </p>
                <p>
                  <span :style="{ color: item.content.color }">◆</span> {{ item.content[1] }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="modelBox risk">
        <div class="modelTitle">
          <span>风险控制机制</span>
        </div>

        <div class="riskModel">
          <div class="riskItem" v-for="item in riskItem">
            <img :src="item.img" alt="">
            <div class="riskTitle">
              <span>{{ item.title }}</span>
            </div>
            <div class="line" :style="{ backgroundColor: item.color }"></div>
            <div class="riskContent">
              {{ item.content }}
            </div>
          </div>
        </div>
      </div>

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

<script>
export default {
  name: '',
  data() {
    return {
      interestItem: [
        {
          img: '/img/interestItem1.png',
          title: '即时激励',
          content: '订单返现（5-15%）红包奖励',
        },
        {
          img: '/img/interestItem2.png',
          title: '中期激励',
          content: '绿色积分（消费额1:1兑换，可拆分增值）',
        },
        {
          img: '/img/interestItem3.png',
          title: '长期激励',
          content: '通证分红（根据生态贡献值）',
        },
        {
          img: '/img/interestItem4.png',
          title: '特别激励',
          content: '夺宝权益（累计消费兑换稀缺品）',
        },
      ],
      innovateItem: [
        {
          img: '/img/innovateItem1.png',
          title: '双轨制裂变',
          content: {
            0: '社交电商的分享返利 + 直销的团队管理奖',
            1: '设置10级晋升体系，每级解锁新权益',
            color: '#62a3ff',
          }
        },
        {
          img: '/img/innovateItem2.png',
          title: '通证经济设计',
          content: {
            0: '消费积分可1:1兑换为平台通证',
            1: '通证价值：商城抵扣、股权分红、异业兑换',
            color: '#fea200',
          }
        },
        {
          img: '/img/innovateItem3.png',
          title: '实体融合方案',
          content: {
            0: '线上拼团购 + 线下社区门店体验',
            1: '区域代理享有本地商家联盟抽成权',
            color: '#abdd1b',
          }
        },
      ],
      riskItem: [
        {
          img: '/img/riskItem1.png',
          title: '合规设计',
          content: '严格遵循三级分销法律边界',
          color: '#fea200',
        },
        {
          img: '/img/riskItem2.png',
          title: '反薅羊毛',
          content: '区块链地址追踪异常账户',
          color: '#fd6232',
        },
        {
          img: '/img/riskItem3.png',
          title: '熔断机制',
          content: '当日奖励总额不超过平台营收30%',
          color: '#2689f4',
        },
      ],
    };
  },
};
</script>
