gw/pages/user/index.vue

<template>
  <div class="home">
    <!-- <ModalForm
        formRef={ref}
        width={500}
        onFinish={async (values) => {
          await submit(values);
        }}
        title="申请试用"
        open={open}
      >
        <ProFormText
          fieldProps={{
            addonBefore: (
              <img
                style={{ width: 15, height: 15 }}
                src={require('../../assets/img_home_modal_0.png')}
              />
            ),
          }}
          rules={[{ required: true }]}
          name="companyName"
          placeholder="请输入您的公司名称"
        />
        <ProFormText
          fieldProps={{
            addonBefore: (
              <img
                style={{ width: 15, height: 15 }}
                src={require('../../assets/img_home_modal_1.png')}
              />
            ),
          }}
          rules={[{ required: true }]}
          name="address"
          placeholder="请选择所在城市"
        />
        <ProFormText
          fieldProps={{
            addonBefore: (
              <img
                style={{ width: 15, height: 15 }}
                src={require('../../assets/img_home_modal_2.png')}
              />
            ),
          }}
          rules={[{ required: true }]}
          name="customName"
          placeholder="请输入您的姓名"
        />
        <ProFormText
          fieldProps={{
            addonBefore: (
              <img
                style={{ width: 15, height: 15 }}
                src={require('../../assets/img_home_modal_3.png')}
              />
            ),
          }}
          rules={[{ required: true }]}
          name="phone"
          placeholder="请输入您的联系方式"
        />
        <ProFormText
          fieldProps={{
            addonAfter: (
              <a
                style={{ display: 'inline-block', width: 100 }}
                onClick={() => {
                  if (!result.loading && countdown === 0) {
                    var phone = ref.current?.getFieldValue('phone') as string;
                    if (new RegExp('^1[0-9]{10}$').test(phone)) {
                      result.run(phone);
                    } else {
                      message.error('请输入正确的手机号');
                    }
                  }
                }}
              >
                {countdown === 0 ? '获取验证码' : Math.round(countdown / 1000)}
              </a>
            ),
            addonBefore: (
              <img
                style={{ width: 15, height: 15 }}
                src={require('../../assets/img_home_modal_4.png')}
              />
            ),
          }}
          rules={[{ required: true }]}
          name="verifyCode"
          placeholder="请输入验证码"
        />
      </ModalForm> -->
    <!-- <img class="home-back" src={require('../../assets/img_home.png')} /> -->
    <img src="../../static/image/img_home.png" class="home-back" alt="">
    <div class="home-qa">
      <div class="home-title">为什么选择惠融易客</div>
      <div class="home-title-sub">
        与传统方式相比较,惠融易客的优势又都有哪些?
      </div>
      <div class="home-qa-img-row">
        <div class="container">
          <div v-for="(p, i) in homeList0" :key="i" class="container-row">
            <!-- <a-row :gutter="[24,24]" wrap justify="center">
            <a-col span='10'> -->
            <!-- ../static/image/img_home_ad_0.png -->
            <div class='home-qa-img-row-item'>
              <img :src="require('../../static/image/img_home_qs_0_' + i + '.png')" alt="">
              <!-- <img src="../static/image/img_home_qs_0_0.png" alt=""> -->
              <div class="home-qa-img-row-item-absolute">
                <div class="home-qa-img-row-item-absolute-title">
                  {{ p.title }}
                </div>
                <div class="home-qa-img-row-item-absolute-subtitle">
                  {{ p.content }}
                </div>
              </div>
            </div>
            <!-- </a-col>
          </a-row> -->
          </div>
        </div>
      </div>
      <div class="home-qa-img-row">
        <div class="container">
          <div v-for="(p, i) in homeList1" :key="i" class="container-row">
            <!-- <a-row :gutter="[24,24]" wrap justify="center">
            <a-col span='10'> -->
            <!-- ../static/image/img_home_ad_0.png -->
            <div class='home-qa-img-row-item'>
              <!-- img_home_qs_1_0 -->
              <img :src="require('../../static/image/img_home_qs_1_' + i + '.png')" alt="">
              <!-- <img src="../static/image/img_home_qs_0_0.png" alt=""> -->
              <div class="home-qa-img-row-item-absolute">
                <div class="home-qa-img-row-item-absolute-title">
                  <span>0{{ i + 1 }}</span> {{ p.title }}
                </div>
                <div class="home-qa-img-row-item-absolute-subtitle">
                  {{ p.content }}
                </div>
              </div>
            </div>
            <!-- </a-col>
          </a-row> -->
          </div>
        </div>
      </div>
    </div>
    <div class="home-ad">
      <div>
        <div class="home-title">精准获客</div>
        <div class="home-title-sub">
          多渠道投放对接，帮助企业搭建推广产品矩阵
        </div>
        <div class="home-ad-row">
          <div v-for="(index, i) in 6" :key="i" class="home-row-single">
            <img :src="require('../../static/image/img_home_ad_' + i + '.png')" alt="">
          </div>

        </div>

        <!-- <Row gutter={[100, 24]} >
            {[...Array(6).keys()].map((p) => {
              return (
                <Col span={8}>
                  <img src={require(`../../assets/img_home_ad_${p}.png`)} />
                </Col>
              );
            })}
          </Row> -->
      </div>
    </div>
    <div class="home-static">
      <div class="home-content">
        <div class="home-title">免费试用</div>
        <div class="home-title-sub">
          立即免费试用惠融易客CRM 提升企业业绩
        </div>
        <div class="home-ad-free">
          <div class="home-static-title">
            已加入
          </div>
          <div v-for="(index, i) in freeList" :key="i" class="home-row-single">
            <div class="home-static-num">
              <div class="home-static-num-wrap">{{ index }}</div>
            </div>
          </div>
          <div class="home-static-title">人</div>
        </div>
        <div style='text-align: center;'>
          <a-button class="home-static-btn" shape="round">立即申请试用</a-button>
        </div>
      </div>
    </div>
    <div class="home-qa">
      <div class="home-content">
        <div class="home-title">咨询信息</div>
        <div class="home-title-sub">
          点击了解惠融易客的更多信息
        </div>
        <div class="home-ad-free">
          <div class="ad-free-img">
            <img src="https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
              alt="">
          </div>
          <div class="ad-free-content">
            <div></div>
            <a-divider></a-divider>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="home-bottom">
      <!-- 联系我们 -->
      <div class="contact">
        <span class="contact-1">
          联系我们
        </span>
        <span class="contact-2">不要犹豫，现在就来联系我们吧 !</span>
      </div>
      <!-- 咨询 -->
      <div class="home-consult">
        <!-- 左边 -->
        <div class="consult-tel">
          <div>
            <span>
              <img src="../../static/image/001.png" alt="" class="w-20 h-20">
            </span>
            <span class="color-fff-12">
              咨询： 23232322
            </span>
          </div>
          <div>
            <span>
              <img src="../../static/image/002.png" alt="" class="w-20 h-20">
            </span>
            <span class="color-fff-12">
              客服： 3333 44333 4311
            </span>
          </div>
          <div>
            <span>
              <img src="../../static/image/003.png" alt="" class="w-20 h-20">
            </span>
            <span class="color-fff-12">
              市场： 3333 44333 4311
            </span>
          </div>
          <div>
            <span>
              <img src="../../static/image/004.png" alt="" class="w-20 h-20">
            </span>
            <span class="color-fff-12">
              商务： 3333 44333 4311
            </span>
          </div>
        </div>
        <!-- 二维码 -->
        <div class="consult-code">
          <div class="code-content">
            <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
              关注公众号
            </span>
            <img src="https://img.atobo.com/ProductImg/EWM/UWeb/1/5/4/4/5124/15445124/1.gif" style="width:100px;height:100px" alt="">
          </div>
          <div class="code-content" style="margin: 0 15px 0 45px">
            <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
              iosAPP下载
            </span>
            <img src="https://img.atobo.com/ProductImg/EWM/UWeb/1/5/4/4/5124/15445124/1.gif" style="width:100px;height:100px" alt="">
          </div>
          <div class="code-content">
            <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
              安卓APP下载
            </span>
            <img src="https://img.atobo.com/ProductImg/EWM/UWeb/1/5/4/4/5124/15445124/1.gif" style="width:100px;height:100px" alt="">
          </div>
        </div>
      </div>
      <!-- 地址 -->
      <div class="site color-fff">
        <img src="../../static/image/005.png" class="w-20 h-20 " alt="">
        <span>
          地址  重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
        </span>
      </div>
      <!-- 备案号 -->
      <div class="reference">
        <span>重庆惠融数字科技有限公司版权所有</span>
         <span>
          渝ICP备2023000211号-4
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
    return {
      homeList0: [
        {
          title: '传统获得客效率低，成本高',
          content:
            '3000个白名单里可能只能挖掘出一个意向客户，员工信心不足，线路成本与人工成本均居高不下',
        },
        {
          title: '客户资源易流失',
          content:
            '高价挖掘的意向客户，面临员工离职带走客户和员工飞单的风险，无法形成客户资产，资源全部在业务员手上',
        },
        {
          title: '跨部门沟通成本高',
          content:
            '线下上门客户填写个人信息受法律监管，机构对于各类纸质资料不易保存，上门客户服务情况无法掌握，跨部门沟通成本高',
        },
      ],
      homeList1: [
        {
          title: '轻松获客',
          content: '通过惠融易客推广获客，轻松获取意向客户，有效降低获客成本95%',
        },
        {
          title: '客户管理',
          content:
            '通过惠融易客客户管理系统，科学高效管理企业客户资料，开成公司资产，员工离职一键收回所有权限，客户跟进情况一目了然',
        },
        {
          title: '业务管理',
          content:
            '通过惠融易客客户管理系统记录跟进，客户从上门到成交的各个环节均可清晰化、信息化记录，有效提高效率与服务质量',
        },
      ],
      freeList: ['3', '0', '7', '0', '1', '3', '7', '4'],
    }
  }
}
</script>
<style lang="less">
@import '../../static/index.less';
</style>