<template>
  <div class="home">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="/img/home-banner.png" style="width: 100%;" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="question-box">
      <div class="que-item">
        <img src="/img/que-i1.png" alt="">
        <p>如何做好<br>
          痛点调研与报告？</p>
      </div>
      <div class="que-item">
        <img src="/img/que-i2.png" alt="">
        <p>如何提升品牌力？</p>
      </div>
      <div class="que-item">
        <img src="/img/que-i3.png" alt="">
        <p>如何突破<br>
          体验与技术瓶颈？</p>
      </div>
      <div class="que-item">
        <img src="/img/que-i4.png" alt="">
        <p>如何解决支付风控?</p>
      </div>
    </div>

    <div class="service-box">
      <b class="title">产品服务</b>
      <div class="box">
        <div class="service-item" @click="$navigate('/Service/Demand')">
          <img src="/img/service-i1.png" alt="">
          <p>需求分析</p>
        </div>
        <div class="service-item" @click="$navigate('/Service/Model')">
          <img src="/img/service-i2.png" alt="">
          <p>模式设计</p>
        </div>
        <div class="service-item" @click="$navigate('/Service/Development')">
          <img src="/img/service-i3.png" alt="">
          <p>系统开发</p>
        </div>
      </div>
      <div class="mx-auto mt-4">
        <a @click="$navigate('/Service')">
          查看更多<van-icon name="arrow"></van-icon>
        </a>
      </div>


    </div>

    <div class="range-box">
      <div class="range-top">
        <b>
          业务范围
        </b>
        <a class="r" @click="$navigate('/BusinessArea')">
          查看更多<van-icon name="arrow"></van-icon>
        </a>
      </div>

      <div class="range-list mt-4">
        <div class="range-item ri1" @click="$navigate('BusinessArea?active=a')">
          <span>
            本地生活
            <van-icon name="arrow"></van-icon>
          </span>
          <img src="/img/home-i1.png" alt="">
        </div>
        <div class="range-item ri2" @click="$navigate('BusinessArea?active=b')">
          <span>
            教育医疗
            <van-icon name="arrow"></van-icon>
          </span>
          <img src="/img/home-i2.png" alt="">
        </div>
        <div class="range-item ri3" @click="$navigate('BusinessArea?active=c')">
          <span>
            家政服务
            <van-icon name="arrow"></van-icon>
          </span>
          <img src="/img/home-i3.png" alt="">
        </div>
      </div>
    </div>

    <div class="news-box">
      <div class="news-top">
        <b>
          新闻资讯
        </b>
        <a class="r" @click="$navigate('news')">
          查看更多<van-icon name="arrow"></van-icon>
        </a>
      </div>
      <div class="news-list">
        <div class="news-item" v-for="i in newslist" @click="$navigate(`newsdetail?id=${i.id}`)">
          <img :src="i.img" alt="">
          <span>{{ i.title }}</span>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      newslist: [
        {
          id: 1,
          title: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工',
          contect: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工......',
          date: '2025/05/011',
          img: '',
        },
        {
          id: 2,
          title: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工',
          contect: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工......',
          date: '2025/05/011',
          img: '',
        },
        {
          id: 3,
          title: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工',
          contect: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工......',
          date: '2025/05/011',
          img: '',
        },
      ]
    }
  },
  methods: {
  }
}
</script>
