<template>
  <BasePage>
    <div class="demand">
      <div class="product">
        <div class="productTitle">
          <span>产品分析</span>
        </div>

        <div class="productList">
          <div class="productItem">
            <img src="/img/productItem1.png" alt="">
            <b class="itemTitle">产品定位</b>
            <div class="itemContent">分析市场与竞品，打造差异化优势以精准吸引用户</div>
          </div>

          <div class="productItem">
            <img src="/img/productItem2.png" alt="">
            <b class="itemTitle">产品目标</b>
            <div class="itemContent">解决痛点，提升体验，带动销量和份额</div>
          </div>

          <div class="productItem">
            <img src="/img/productItem3.png" alt="">
            <b class="itemTitle">需求背景</b>
            <div class="itemContent">洞察需求与技术，打造市场所需产品</div>
          </div>

          <div class="productItem">
            <img src="/img/productItem4.png" alt="">
            <b class="itemTitle">用户群体</b>
            <div class="itemContent">用户画像+行为分析，精准设计产品需求</div>
          </div>

          <div class="productItem">
            <img src="/img/productItem5.png" alt="">
            <b class="itemTitle">使用场景</b>
            <div class="itemContent">场景化分析，优化体验提升满意度</div>
          </div>

          <div class="productItem">
            <img src="/img/productItem6.png" alt="">
            <b class="itemTitle">产品形态</b>
            <div class="itemContent">优化产品设计，提升体验与粘性</div>
          </div>
        </div>

      </div>

      <div class="industry">
        <div class="industryTitle">
          <span>行业分析</span>
        </div>

        <div class="industryList">
          <div class="leftSide">
            <div class="leftItem" @click="changeActive(index)" v-for="(item, index) in leftSide" :key="index"
              :class="{ 'active': active === index }">
              <span>{{ item.title }}</span>
            </div>
          </div>
          <div class="rightSide">
            <div class="rightItem">
              <b>{{ leftSide[active].title }}</b>
              <span>{{ leftSide[active].content }}</span>
            </div>
          </div>

        </div>
      </div>

      <div class="scene">
        <div class="sceneTitle">
          <span>业务场景分析</span>
        </div>

        <div class="sceneList">
          <div class="sceneItem" v-for="(item, index) in sceneList" :key="index">
            <img :src="item.img" alt="">
            <div>
              <b>场景痛点:</b>
              <span>{{ item.pain }}</span>
            </div>

            <div>
              <b>解决方案：
              </b>
              <span>{{ item.solution }}</span>
            </div>

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

<script>
export default {
  name: 'Demand',
  data() {
    return {
      active: 0,
      leftSide: [
        {
          title: '技术开发成本高',
          content: '技术开发成本高，导致企业在短时间内无法满足市场需求，从而影响企业的竞争力。'
        },
        {
          title: '数字人才短缺',
          content: '数字人才短缺，导致企业在技术上无法保持竞争力，从而影响企业的市场份额。'
        },
        {
          title: '流量获取低效',
          content: '流量获取低效，导致企业在市场上无法获得足够的流量，从而影响企业的销售和利润。'
        },
        {
          title: '资金压力大',
          content: '资金压力大，导致企业在资金上无法满足市场需求，从而影响企业的竞争力。'
        },
        {
          title: '合规风险突出',
          content: '合规风险突出，导致企业在法律上无法保持合规，从而影响企业的品牌形象和客户信任。'
        }
      ],
      sceneList: [
        {
          img: '/img/sceneItem1.png',
          pain: '缺流量、技术、运营',
          solution: `- 极速上线小程序 \n - 社交裂变营销 \n - 直播带货陪跑`
        },
        {
          img: '/img/sceneItem2.png',
          pain: '缺流量、技术、运营',
          solution: '- 极速上线小程序 \n - 社交裂变营销 \n - 直播带货陪跑'
        },
        {
          img: '/img/sceneItem3.png',
          pain: '缺流量、技术、运营',
          solution: '- 极速上线小程序 \n - 社交裂变营销 \n - 直播带货陪跑'
        }
      ]
    };
  },
  methods: {
    changeActive(index) {
      this.active = index;
    }
  }
};
</script>