gw/pages/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">
            <!-- <Row gutter={[24, 24]}>
              {homeList0.map((p, i) => {
                return (
                  <Col span={8} key={p.title}>
                    <div class={`home-qa-img-row-item `}>
                      <img
                        src={require(`../../assets/img_home_qs_0_${i}.png`)}
                      />
                      <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>
                  </Col>
                );
              })}
              {homeList1.map((p, i) => {
                return (
                  <Col span={8} key={p.title}>
                    <div class={`home-qa-img-row-item `}>
                      <img
                        src={require(`../../assets/img_home_qs_1_${i}.png`)}
                      />
                      <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>
                  </Col>
                );
              })}
            </Row> -->
          </div>
        </div>
      </div>
      <div class="home-ad">
        <div class="container">
          <div class="home-title">精准获客</div>
          <div class="home-title-sub">
            多渠道投放对接，帮助企业搭建推广产品矩阵
          </div>
          <!-- <Row gutter={[100, 24]} class="home-ad-row">
            {[...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="container">
          <div class="home-title">精准获客</div>
          <div class="home-title-sub">
            多渠道投放对接，帮助企业搭建推广产品矩阵
          </div>
          <!-- <Row align="middle" gutter={32}>
            <Col class="home-static-title">已加入</Col>
            <Col>
              <Row gutter={12}>
                {'1233333'.split('').map((p) => {
                  return (
                    <Col flex={1} class="home-static-num">
                      <div class="home-static-num-wrap">{p}</div>
                    </Col>
                  );
                })}
              </Row>
            </Col>
            <Col class="home-static-title">人</Col>
          </Row> -->
          <div style='text-align: center;'>
            <Button class="home-static-btn">立即申请试用</Button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>
<style lang="less">
@import '../static/index.less';
</style>