<template>
  <div class="service">
    <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="basebox" :class="i.id % 2 != 1 ? 'right-box' : 'left-box'" v-for="i in servicelist" :key="i.title">
      <img v-if="i.id % 2 == 1" :src="i.img" alt="">
      <div class="rbox">
        <b>{{ i.title }}</b>
        <span>{{ i.desc }}</span>
        <div class="btnbox">
          <button class="know" @click="$navigate(`/Service/${i.name}`)">了解更多</button>
          <button class="ask" @click="showrefer = true">
            产品咨询
          </button>
        </div>
      </div>
      <img v-if="i.id % 2 != 1" :src="i.img" alt="">
    </div>

    <van-popup v-model:show="show" :style="{ width: '90vw', height: '50vw', borderRadius: '2.133vw' }">
      <div class="comfire">
        <img src="/img/circle.png" alt="">
        <b>提交成功</b>
        <button @click="show = false">我知道了</button>
      </div>
    </van-popup>

    <van-action-sheet v-model:show="showrefer" title="产品咨询">
      <div class="content">
        <form action="" class="fm1">
          <label for="name">
            姓名
            <input type="text" id="name" placeholder="请输入您的姓名">
          </label>

          <label for="phone">
            电话
            <input type="text" id="phone" placeholder="请输入您的电话">
          </label>

          <label for="email">
            邮箱
            <input type="text" id="email" placeholder="请输入您的邮箱">
          </label>

          <label for="position">
            职位
            <input type="text" id="position" placeholder="请输入您的职位">
          </label>
        </form>
        <form action="" class="fm2">
          <label for="industry">
            从事行业
            <input type="text" id="industry" placeholder="请输入您的从事行业">
          </label>
          <label for="company">
            公司名称
            <input type="text" id="company" placeholder="请输入您的公司名称">
          </label>

          <label for="type">
            产品类型
            <select name="type" id="type">
              <option value="">请选择咨询的产品</option>
              <option value="model">模式设计</option>
              <option value="develop">系统开发</option>
              <option value="plan">策划运营</option>
              <option value="pay">支付代付</option>
            </select>
          </label>

          <label for="message">
            留言
            <textarea id="message" placeholder="请输入您的留言内容"></textarea>
          </label>
        </form>
        <button @click="show = true, showrefer = false">
          马上提交
        </button>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
export default {
  name: 'Service',
  data() {
    return {
      show: false,
      showrefer: false,
      servicelist: [
        {
          id: 1,
          name: 'Demand',
          img: '/img/ser-i1.png',
          title: '需求分析',
          desc: '基于行业背景、产品特性及市场规模，分析用户需求，评估可行性与可持续性，明确项目定位，为决策提供数据支持'
        },
        {
          id: 2,
          name: 'Model',
          img: '/img/ser-i2.png',
          title: '模式设计',
          desc: '通过需求分析设计商业模式，明确权责划分，优化利益分配，激发团队潜力，推动业务增长'
        },
        {
          id: 3,
          name: 'Development',
          img: '/img/ser-i3.png',
          title: '系统开发',
          desc: '打造多端系统（公众号/小程/APP/H5/PC），灵活适配业务需求，实现互联互通，提升运营效率和用户体验'
        },
        {
          id: 4,
          name: 'Plan',
          img: '/img/ser-i4.png',
          title: '策划运营',
          desc: '提供全案运营支持，包括品牌设计、招商培训、营销活动、股权管理及融资服务，助力项目落地与发展'
        },
        {
          id: 5,
          name: 'Pay',
          img: '/img/ser-i5.png',
          title: '支付代付',
          desc: '提供一站式支付与分账解决方案，集成微信、支付宝、银行等多渠道支付，支持扫码、小程序等场景，并实现高效分润代付，确保安全便捷'
        },
        {
          id: 6,
          name: 'Finance',
          img: '/img/ser-i6.png',
          title: '财税筹划',
          desc: '企业财税优化方案：解决流水过大/税负过高问题，提供合法节税方案，助力降本增效'
        },
        {
          id: 7,
          name: 'Brand',
          img: '/img/ser-i7.png',
          title: '品牌管理',
          desc: '品牌赋能方案：快速构建品牌资产，提升公信力与转化率，驱动业务增长'
        },
        {
          id: 8,
          name: 'Consultation',
          img: '/img/ser-i8.png',
          title: '企业咨询',
          desc: '提供全案运营支持，包括品牌设计、招商培训、营销活动、股权管理及融资服务，助力项目落地与发展'
        },
        {
          id: 9,
          name: 'Resources',
          img: '/img/ser-i9.png',
          title: '资源整接',
          desc: '赋能企业，共创未来。提供供应链、技术、资金等核心支持，助力高效发展。'
        },

      ]
    }
  }
}
</script>
