init

zhengyiming

2025-07-10 5c33978e9e3e934378d8f2153a2cd919b1cb6ddd

init

 .eslintrc.js

@@ -1,3 +1,6 @@
module.exports = {
  extends: require.resolve('@umijs/max/eslint'),
  rules: {
    '@typescript-eslint/no-unused-vars': 0,
  },
};

 .prettierrc

@@ -4,5 +4,9 @@
  "trailingComma": "all",
  "proseWrap": "never",
  "overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }],
  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"]
  "plugins": [
    "prettier-plugin-organize-imports",
    "prettier-plugin-packagejson"
  ],
  "organizeImportsSkipDestructiveCodeActions": true
}

 .umirc.ts

@@ -6,29 +6,35 @@
  model: {},
  initialState: {},
  request: {},
  mfsu: false,
  qiankun: {
    slave: {},
  },
  base: '/v2/',
  publicPath: '/v2/',
  // layout: {
  //   title: '@umijs/max',
  // },
  routes: [
    {
      path: '/',
      redirect: '/home',
      redirect: '/about',
    },
    {
      name: '首页',
      path: '/home',
      name: '关于大赛',
      path: '/about',
      component: './Home',
    },
    {
      name: '权限演示',
      path: '/access',
      component: './Access',
    },
    {
      name: ' CRUD 示例',
      path: '/table',
      component: './Table',
    },
    // {
    //   name: '权限演示',
    //   path: '/access',
    //   component: './Access',
    // },
    // {
    //   name: ' CRUD 示例',
    //   path: '/table',
    //   component: './Table',
    // },
  ],
  npmClient: 'pnpm',
});

 dist.zip

Binary files differ

 package.json

@@ -1,22 +1,25 @@
{
  "name": "v2",
  "private": true,
  "author": "",
  "scripts": {
    "dev": "max dev",
    "build": "max build",
    "dev": "max dev",
    "format": "prettier --cache --write .",
    "prepare": "husky",
    "postinstall": "max setup",
    "prepare": "husky",
    "setup": "max setup",
    "start": "npm run dev"
  },
  "dependencies": {
    "@ant-design/compatible": "^1.1.2",
    "@ant-design/icons": "^5.0.1",
    "@ant-design/icons": "^5.6.1",
    "@ant-design/pro-components": "^2.4.4",
    "@umijs/max": "^4.4.11",
    "antd": "^4.24.16",
    "classnames": "^2.5.1",
    "enquire-js": "^0.2.1",
    "file-saver": "^2.0.5",
    "rc-banner-anim": "^2.4.5",
    "rc-queue-anim": "^2.0.0",
    "rc-scroll-anim": "^2.7.6",
@@ -24,6 +27,7 @@
    "rc-tween-one": "^2.7.3"
  },
  "devDependencies": {
    "@types/file-saver": "^2.0.7",
    "@types/react": "^18.0.33",
    "@types/react-dom": "^18.0.11",
    "husky": "^9",

 pnpm-lock.yaml

@@ -9,7 +9,7 @@
    specifier: ^1.1.2
    version: 1.1.2(antd@4.24.16)(prop-types@15.8.1)(react-dom@18.3.1)(react@18.3.1)
  '@ant-design/icons':
    specifier: ^5.0.1
    specifier: ^5.6.1
    version: 5.6.1(react-dom@18.3.1)(react@18.3.1)
  '@ant-design/pro-components':
    specifier: ^2.4.4
@@ -20,9 +20,15 @@
  antd:
    specifier: ^4.24.16
    version: 4.24.16(react-dom@18.3.1)(react@18.3.1)
  classnames:
    specifier: ^2.5.1
    version: 2.5.1
  enquire-js:
    specifier: ^0.2.1
    version: 0.2.1
  file-saver:
    specifier: ^2.0.5
    version: 2.0.5
  rc-banner-anim:
    specifier: ^2.4.5
    version: 2.4.5
@@ -40,6 +46,9 @@
    version: 2.7.3

devDependencies:
  '@types/file-saver':
    specifier: ^2.0.7
    version: 2.0.7
  '@types/react':
    specifier: ^18.0.33
    version: 18.3.23
@@ -2343,6 +2352,10 @@
  /@types/estree@1.0.8:
    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
    dev: false

  /@types/file-saver@2.0.7:
    resolution: {integrity: sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==}
    dev: true

  /@types/graceful-fs@4.1.9:
    resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
@@ -5969,6 +5982,10 @@
      flat-cache: 3.2.0
    dev: false

  /file-saver@2.0.5:
    resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
    dev: false

  /fill-range@7.1.1:
    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
    engines: {node: '>=8'}

 src/Home/Feature4.jsx

@@ -45,6 +45,17 @@
        };
    return (
      <div {...props} {...dataSource.wrapper}>
        <OverPack>
          <QueueAnim
            type="bottom"
            leaveReverse
            key="page"
            delay={[0, 100]}
            {...dataSource.titleWrapper}
          >
            {dataSource.titleWrapper.children.map(getChildrenToRender)}
          </QueueAnim>
        </OverPack>
        <OverPack {...dataSource.OverPack} component={Row}>
          <QueueAnim
            key="text"
@@ -54,9 +65,9 @@
            {...dataSource.textWrapper}
            component={Col}
          >
            <div key="title" {...dataSource.titleWrapper}>
            {/* <div key="title" {...dataSource.titleWrapper}>
              {dataSource.titleWrapper.children.map(getChildrenToRender)}
            </div>
            </div> */}
            <QueueAnim
              component="ul"
              key="ul"

 src/Home/Feature5.jsx

@@ -1,8 +1,8 @@
import React from 'react';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Tabs, Row, Col } from 'antd';
import { Icon } from '@ant-design/compatible';
import { Col, Row, Tabs } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import TweenOne from 'rc-tween-one';
import React from 'react';
import { getChildrenToRender } from './utils';

const TabPane = Tabs.TabPane;
@@ -31,7 +31,7 @@
        key={i + 1}
        tab={
          <div className={tag.className}>
            <Icon type={iconChildren} className={icon.className} />
            <img src={iconChildren} className={icon.className} />
            <div {...tagText}>{tagText.children}</div>
          </div>
        }

 src/Home/Footer.jsx

New file
@@ -0,0 +1,113 @@
import Icon, {
  GlobalOutlined,
  IconProvider,
  MailOutlined,
  PhoneOutlined,
} from '@ant-design/icons';
import { Button, Card, Col, Divider, Row, Typography } from 'antd';
// import QRCode from 'qrcode.react';
import EnrollImage1 from '@/assets/home/enroll-01.png';
import EnrollImage2 from '@/assets/home/enroll-02.png';
import IconQrcode from '@/assets/icon-qrcode.jpg';
import { downloadFileByUrl } from '@/utils/common';
import { useCallback } from 'react';

const { Title, Paragraph, Text } = Typography;

export const HomeEnrollFileList2025 = [
  {
    name: '2025年大赛报名表',
    icon: EnrollImage1,
    fileUrl:
      'https://waterdroptest2.oss-cn-hangzhou.aliyuncs.com/NBHRXH/Assets/2025%E5%B9%B4%E5%A4%A7%E8%B5%9B%E6%8A%A5%E5%90%8D%E8%A1%A8.doc',
  },
  {
    name: '2025年大赛商业计划书模板',
    icon: EnrollImage2,
    fileUrl:
      'https://waterdroptest2.oss-cn-hangzhou.aliyuncs.com/NBHRXH/Assets/2025%E5%B9%B4%E5%A4%A7%E8%B5%9B%E5%95%86%E4%B8%9A%E8%AE%A1%E5%88%92%E4%B9%A6%E6%A8%A1%E6%9D%BF.docx',
  },
];

const FooterComponent = () => {
  return (
    <Row gutter={48} justify="center" style={{ paddingTop: 64 }}>
      {/* 联系信息 */}
      <Col xs={24} sm={12} md={8} lg={6}>
        <Title level={4} style={{ marginBottom: 24 }}>
          联系我们
        </Title>
        <div className="contact-item">
          <PhoneOutlined style={{ fontSize: 18, marginRight: 12 }} />
          <Text style={{ fontSize: 16 }}>400-123-4567</Text>
        </div>
        <div className="contact-item">
          <MailOutlined style={{ fontSize: 18, marginRight: 12 }} />
          <Text style={{ fontSize: 16 }}>contact@example.com</Text>
        </div>
        <div className="contact-item">
          <GlobalOutlined style={{ fontSize: 18, marginRight: 12 }} />
          <Text style={{ fontSize: 16 }}>www.example.com</Text>
        </div>
      </Col>

      {/* 二维码 */}
      <Col xs={24} sm={12} md={8} lg={6}>
        <Title level={4} style={{ marginBottom: 24 }}>
          扫码关注
        </Title>
        <Card
          style={{
            width: 160,
            height: 160,
            textAlign: 'center',
            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.09)',
            margin: '0 auto',
          }}
          bodyStyle={{
            padding: 0,
          }}
        >
          {/* <QRCode value="https://www.example.com" size={120} /> */}
          <img src={IconQrcode} style={{ width: '100%', height: '100%' }} />
        </Card>
      </Col>
    </Row>
  );
};

export function FooterApply() {
  const handleDownload = useCallback((fileUrl) => {
    downloadFileByUrl(fileUrl);
  });

  return (
    <Row
      gutter={48}
      justify="center"
      style={{ paddingTop: 64, maxWidth: 1200, margin: '0 auto' }}
    >
      {HomeEnrollFileList2025.map((item, index) => (
        <Col xs={24} sm={12} md={12} lg={12} key={item.fileUrl}>
          <div className="enroll-item">
            <div className="enroll-icon">
              <img src={item.icon} />
            </div>
            <div className="enroll-info">
              <h4 className="enroll-title ellipsis">{item.name}</h4>
              <Button
                type="primary"
                class="download-btn"
                onClick={() => handleDownload(item.fileUrl, item.name)}
              >
                点击下载
              </Button>
            </div>
          </div>
        </Col>
      ))}
    </Row>
  );
}

export default FooterComponent;

 src/Home/data.source.js

@@ -1,3 +1,17 @@
import Jiang1 from '@/assets/home/jiang1.png';
import Jiang2 from '@/assets/home/jiang2.png';
import Jiang3 from '@/assets/home/jiang3.png';
import Jiang4 from '@/assets/home/jiang4.png';
import Step1 from '@/assets/home/step1.png';
import Step2 from '@/assets/home/step2.png';
import Step3 from '@/assets/home/step3.png';
import Step4 from '@/assets/home/step4.png';
import Tab1 from '@/assets/home/tab1.png';
import Tab2 from '@/assets/home/tab2.png';
import Tab3 from '@/assets/home/tab3.png';
import Title from '@/components/Title/Title';
import FooterComponent, { FooterApply } from './Footer';

export const Nav30DataSource = {
  wrapper: { className: 'header3 home-page-wrapper' },
  page: { className: 'home-page' },
@@ -102,22 +116,22 @@
  textWrapper: {
    className: 'banner3-text-wrapper',
    children: [
      {
        name: 'slogan',
        className: 'banner3-slogan mcvci2cuar-editor_css',
        children: '第十届人力资源服务创新创业大赛',
        texty: true,
      },
      { name: 'button', className: 'banner3-button', children: '立即报名' },
      {
        name: 'time',
        className: 'banner3-time mcvcibrmazu-editor_css',
        children: (
          <span>
            <p>中国·宁波</p>
          </span>
        ),
      },
      // {
      //   name: 'slogan',
      //   className: 'banner3-slogan mcvci2cuar-editor_css',
      //   children: '第十届人力资源服务创新创业大赛',
      //   texty: true,
      // },
      // { name: 'button', className: 'banner3-button', children: '立即报名' },
      // {
      //   name: 'time',
      //   className: 'banner3-time mcvcibrmazu-editor_css',
      //   children: (
      //     <span>
      //       <p>中国·宁波</p>
      //     </span>
      //   ),
      // },
    ],
  },
};
@@ -130,19 +144,9 @@
    className: 'title-wrapper',
    children: [
      {
        name: 'image',
        children:
          'https://gw.alipayobjects.com/zos/rmsportal/PiqyziYmvbgAudYfhuBr.svg',
        className: 'title-image',
      },
      {
        name: 'title',
        children: (
          <span>
            <p>关于大赛</p>
          </span>
        ),
        className: 'title-h1',
        children: <Title title="关于大赛" />,
        // className: 'title-h1',
      },
      {
        name: 'content',
@@ -203,19 +207,9 @@
    className: 'title-wrapper',
    children: [
      {
        name: 'image',
        children:
          'https://gw.alipayobjects.com/zos/rmsportal/PiqyziYmvbgAudYfhuBr.svg',
        className: 'title-image',
      },
      {
        name: 'title',
        children: (
          <span>
            <p>参赛指南</p>
          </span>
        ),
        className: 'title-h1',
        children: <Title title="参赛指南" />,
        // className: 'title-h1',
      },
    ],
  },
@@ -231,8 +225,7 @@
          textWrapper: { className: 'text-wrapper' },
          img: {
            className: 'block-img',
            children:
              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
            children: Step1,
          },
          icon: {
            className: 'block-icon',
@@ -287,8 +280,7 @@
          textWrapper: { className: 'text-wrapper' },
          img: {
            className: 'block-img',
            children:
              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
            children: Step2,
          },
          icon: {
            className: 'block-icon',
@@ -329,8 +321,7 @@
          textWrapper: { className: 'text-wrapper' },
          img: {
            className: 'block-img',
            children:
              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
            children: Step3,
          },
          icon: {
            className: 'block-icon',
@@ -371,8 +362,7 @@
          textWrapper: { className: 'text-wrapper' },
          img: {
            className: 'block-img',
            children:
              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
            children: Step4,
          },
          icon: {
            className: 'block-icon',
@@ -426,12 +416,8 @@
    children: [
      {
        name: 'title',
        children: (
          <span>
            <p>参赛资格与条件</p>
          </span>
        ),
        className: 'title-h1',
        children: <Title title="参赛资格与条件"></Title>,
        // className: 'title-h1',
      },
    ],
  },
@@ -508,12 +494,8 @@
    children: [
      {
        name: 'title',
        children: (
          <span>
            <p>参赛范围</p>
          </span>
        ),
        className: 'title-h1',
        children: <Title title="参赛范围" />,
        // className: 'title-h1',
      },
    ],
  },
@@ -533,7 +515,7 @@
            ),
            className: 'content7-tag-name',
          },
          icon: { children: 'mobile' },
          icon: { children: Tab1 },
        },
        content: {
          className: 'content7-content',
@@ -572,7 +554,7 @@
        name: 'block1',
        tag: {
          className: 'content7-tag',
          icon: { children: 'tablet' },
          icon: { children: Tab2 },
          text: {
            className: 'content7-tag-name',
            children: (
@@ -629,7 +611,7 @@
            ),
            className: 'content7-tag-name',
          },
          icon: { children: 'laptop' },
          icon: { children: Tab3 },
        },
        content: {
          className: 'content7-content',
@@ -672,14 +654,9 @@
    children: [
      {
        name: 'title',
        children: (
          <span>
            <span>
              <p>奖项设置</p>
            </span>
          </span>
        ),
        className: 'pricing2-title-h1',
        children: <Title title="奖项设置" />,

        // className: 'pricing2-title-h1',
      },
    ],
  },
@@ -695,8 +672,8 @@
          name: 'empty',
          childWrapper: {
            children: [
              { name: 'name', children: '12' },
              { name: 'content', children: '34' },
              { name: 'name', children: ' ' },
              { name: 'content', children: ' ' },
            ],
          },
        },
@@ -709,15 +686,14 @@
            children: [
              {
                name: 'name',
                className: 'pricing2-table-name',
                children: 'Free',
                className: 'pricing2-table-name-icon',
                children: <img src={Jiang1} />,
              },
              {
                name: 'content',
                className: 'pricing2-table-money',
                children: '¥0',
                name: 'name',
                className: 'pricing2-table-name',
                children: '一等奖',
              },
              { name: 'button', children: { href: '#', children: '免费试用' } },
            ],
          },
        },
@@ -730,15 +706,14 @@
            children: [
              {
                name: 'name',
                className: 'pricing2-table-name',
                children: 'Basic',
                className: 'pricing2-table-name-icon',
                children: <img src={Jiang2} />,
              },
              {
                name: 'content',
                className: 'pricing2-table-money',
                children: '¥550',
                name: 'name',
                className: 'pricing2-table-name',
                children: '二等奖',
              },
              { name: 'button', children: { href: '#', children: '立即购买' } },
            ],
          },
        },
@@ -751,17 +726,13 @@
            children: [
              {
                name: 'name',
                className: 'pricing2-table-name-icon',
                children: <img src={Jiang3} />,
              },
              {
                name: 'name',
                className: 'pricing2-table-name',
                children: 'Pro',
              },
              {
                name: 'content',
                className: 'pricing2-table-money',
                children: '¥2,200',
              },
              {
                name: 'button',
                children: { href: '#', type: 'primary', children: '立即购买' },
                children: '三等奖',
              },
            ],
          },
@@ -775,15 +746,14 @@
            children: [
              {
                name: 'name',
                className: 'pricing2-table-name',
                children: 'Unlimited',
                className: 'pricing2-table-name-icon',
                children: <img src={Jiang4} />,
              },
              {
                name: 'content',
                className: 'pricing2-table-money',
                children: '¥5,600',
                name: 'name',
                className: 'pricing2-table-name',
                children: '优胜奖',
              },
              { name: 'button', children: { href: '#', children: '立即购买' } },
            ],
          },
        },
@@ -797,21 +767,46 @@
            {
              className: 'pricing2-table-content-name',
              name: 'name',
              children: '一等奖',
              children: '综合赛道',
            },
            {
              children: '二等奖',
              children: (
                <span>
                  <p>1名</p>
                  <p>奖金80000元</p>
                </span>
              ),
              name: 'content0',
              className: 'pricing2-table-content',
            },
            {
              children: '三等奖',
              children: (
                <span>
                  <p>2名</p>
                  <p>奖金30000元</p>
                </span>
              ),
              name: 'content1',
              className: 'pricing2-table-content',
            },
            {
              children: '优胜奖',
              children: (
                <span>
                  <p>3名</p>
                  <p>奖金20000元</p>
                </span>
              ),
              name: 'content2',
              className: 'pricing2-table-content',
            },
            {
              children: (
                <span>
                  <p>9名</p>
                  <p>荣誉证书</p>
                </span>
              ),
              name: 'content3',
              className: 'pricing2-table-content',
            },
          ],
@@ -822,18 +817,13 @@
            {
              className: 'pricing2-table-content-name',
              name: 'name',
              children: (
                <span>
                  <p>1名</p>
                  <p>奖金80000元</p>
                </span>
              ),
              children: '人力资源服务业与制造也融合发展专项赛道',
            },
            {
              children: (
                <span>
                  <p>2名</p>
                  <p>奖金30000元</p>
                  <p>1名</p>
                  <p>奖金80000元</p>
                </span>
              ),
              name: 'content0',
@@ -842,8 +832,8 @@
            {
              children: (
                <span>
                  <p>3名</p>
                  <p>奖金20000元</p>
                  <p>2名</p>
                  <p>奖金30000元</p>
                </span>
              ),
              name: 'content1',
@@ -852,11 +842,21 @@
            {
              children: (
                <span>
                  <p>9名</p>
                  <p>荣誉证书</p>
                  <p>2名</p>
                  <p>奖金20000元</p>
                </span>
              ),
              name: 'content2',
              className: 'pricing2-table-content',
            },
            {
              children: (
                <span>
                  <p>5名</p>
                  <p>荣誉证书</p>
                </span>
              ),
              name: 'content3',
              className: 'pricing2-table-content',
            },
          ],
@@ -867,19 +867,14 @@
            {
              className: 'pricing2-table-content-name',
              name: 'name',
              children: (
                <span>
                  <p>1名</p>
                  <p>奖金80000元</p>
                </span>
              ),
              children: '新就业形态专项赛道',
            },
            {
              name: 'content0',
              children: (
                <span>
                  <p>2名</p>
                  <p>奖金30000元</p>
                  <p>1名</p>
                  <p>奖金80000元</p>
                </span>
              ),
              className: 'pricing2-table-content',
@@ -889,48 +884,13 @@
              children: (
                <span>
                  <p>2名</p>
                  <p>奖金20000元</p>
                </span>
              ),
              className: 'pricing2-table-content',
            },
            {
              name: 'content2',
              children: (
                <span>
                  <p>5名</p>
                  <p>荣誉证书</p>
                </span>
              ),
              className: 'pricing2-table-content',
            },
          ],
        },
        {
          name: 'list3',
          children: [
            {
              className: 'pricing2-table-content-name',
              name: 'name',
              children: (
                <span>
                  <p>1名</p>
                  <p>奖金80000元</p>
                </span>
              ),
            },
            {
              children: (
                <span>
                  <p>2名</p>
                  <p>奖金30000元</p>
                </span>
              ),
              name: 'content0',
              className: 'pricing2-table-content',
            },
            {
              name: 'content1',
              name: 'content2',
              children: (
                <span>
                  <p>2名</p>
@@ -940,7 +900,7 @@
              className: 'pricing2-table-content',
            },
            {
              name: 'content2',
              name: 'content3',
              children: (
                <span>
                  <p>5名</p>
@@ -957,38 +917,42 @@
};
export const Content131DataSource = {
  OverPack: {
    className: 'home-page-wrapper content13-wrapper',
    className: 'home-page-wrapper content13-wrapper content131-wrapper',
    playScale: 0.3,
  },
  titleWrapper: {
    className: 'title-wrapper',
    children: [
      {
        name: 'image',
        children:
          'https://gw.alipayobjects.com/zos/rmsportal/PiqyziYmvbgAudYfhuBr.svg',
        className: 'title-image',
      },
      {
        name: 'title',
        children: (
          <span>
            <span>
              <p>联系方式</p>
            </span>
          </span>
        ),
        className: 'title-h1',
        children: <Title title="联系方式" />,
        // className: 'title-h1',
      },
      {
        name: 'content',
        children:
          '特色展台包括 Ant Design 、AntV、AntG、Egg 等明星产品，更有产品专家',
        children: <FooterComponent />,
        className: 'title-content',
      },
    ],
  },
};

export const Content132DataSource = {
  OverPack: {
    className: 'home-page-wrapper content13-wrapper content132-wrapper',
    playScale: 0.3,
  },
  titleWrapper: {
    className: 'title-wrapper',
    children: [
      {
        name: 'content2',
        children: '现场问诊，为你答疑解难',
        name: 'title',
        children: <Title title="大赛报名" />,
        // className: 'title-h1',
      },
      {
        name: 'content',
        children: <FooterApply />,
        className: 'title-content',
      },
    ],

 src/Home/index.jsx

@@ -8,12 +8,14 @@
import Content9 from './Content9';
import Feature4 from './Feature4';
import Feature5 from './Feature5';
import FooterComponent from './Footer';
import Pricing2 from './Pricing2';

import {
  Banner31DataSource,
  Content130DataSource,
  Content131DataSource,
  Content132DataSource,
  Content90DataSource,
  Feature40DataSource,
  Feature50DataSource,
@@ -105,6 +107,13 @@
        dataSource={Content131DataSource}
        isMobile={this.state.isMobile}
      />,
      <Content13
        id="Content13_2"
        key="Content13_2"
        dataSource={Content132DataSource}
        isMobile={this.state.isMobile}
      />,
      // <FooterComponent key="FooterComponent" />,
    ];
    return (
      <div

 src/Home/less/common.less

@@ -1,4 +1,3 @@

// @import "~antd/lib/style/v2-compatible-reset.less";

body {
@@ -40,3 +39,10 @@
  padding: 0;
  margin: 0;
}

.home-page-wrapper {
  &:nth-child(odd) {
    background: url('@/assets/home/page-bg.png') no-repeat;
    background-size: cover;
  }
}

 src/Home/less/content.less

@@ -10,7 +10,8 @@
    margin: auto;
    will-change: transform;
  }
  .title-wrapper > h1, > h1 {
  .title-wrapper > h1,
  > h1 {
    font-size: 32px;
    color: @text-color;
    margin-bottom: 16px;
@@ -22,21 +23,21 @@
}

.@{homepage} {
  padding: 128px 24px;
  padding: 64px 24px;
}

@media screen and (max-width: 767px) {
  .@{homepage}-wrapper {
    .@{homepage} {
      padding: 56px 24px;
      >h1 {
      > h1 {
        font-size: 24px;
        margin: 0 auto 32px;
        &.title-h1 {
          margin-bottom: 8px;
        }
      }
      >p {
      > p {
        margin-bottom: 32px;
      }
    }

 src/Home/less/content13.less

@@ -1,16 +1,16 @@
@content13: content13;
.@{content13}-wrapper {
  height: 664px;
  background: url('https://gw.alipayobjects.com/zos/rmsportal/ZsWYzLOItgeaWDSsXdZd.svg')
    no-repeat bottom;
  height: 654px;
  // background: url('https://gw.alipayobjects.com/zos/rmsportal/ZsWYzLOItgeaWDSsXdZd.svg')
  //   no-repeat bottom;
  background-size: cover;
  background-size: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 96px 0;
  padding: 64px 0;
  &.home-page-wrapper {
    .title-wrapper {
      margin-bottom: 32px;
      margin-bottom: 0;
    }
  }
  .title-content {
@@ -18,8 +18,105 @@
  }
}

.content131-wrapper {
  height: 578px;

  .contact-item {
    display: flex;
    align-items: center;
    padding-left: 64px;
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.content132-wrapper {
  height: 528px;
  .enroll-item {
    display: flex;
    padding: 26px 36px;
    min-width: 0;
    border: #4564ff solid 1px;
    border-radius: 8px;
    flex: 1;
    flex-direction: row;
    .enroll-icon {
      margin-right: 36px;
      img {
        width: 94px;
        height: auto;
      }
    }
    .enroll-info {
      display: flex;
      justify-content: space-around;
      min-width: 0;
      flex: 1;
      flex-direction: column;
      .enroll-title {
        font-size: 20px;
        font-weight: 400;
        color: #1f6cdd;
        &::after {
          display: block;
          margin-top: 18px;
          width: 50px;
          height: 2px;
          border-radius: 1.5px;
          background: #1f6cdd;
          content: ' ';
          transition-duration: 0.5s;
        }
      }
      .download-btn {
        box-sizing: content-box;
        // padding: 0 2em;
        width: 50%;
        font-size: 14px;
        line-height: 2;
        border: 1px solid #73c6f4;
        border-radius: 6px;
        text-align: center;
        color: #ffffff;
        background: #4564ff;
        cursor: pointer;
      }
      &:hover {
        .enroll-title {
          &::after {
            width: 96px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .@{content13}-wrapper {
    padding-bottom: 0;
    padding-bottom: 64px;
  }

  .content131-wrapper {
    height: 776px;
  }

  .content132-wrapper {
    height: 744px;
  }

  .content131-wrapper,
  .content132-wrapper {
    .ant-col + .ant-col {
      margin-top: 36px;
    }

    .contact-item {
      padding-left: 0;
      justify-content: center;
    }
  }
}

 src/Home/less/content9.less

@@ -7,7 +7,9 @@
    overflow: initial;
  }
  .@{content9} {
    min-height: 800px;
    // min-height: 800px;
    height: 1110px;
    box-sizing: content-box;
    padding: 64px 0 0;
  }
  .timeline {
@@ -21,7 +23,7 @@
      width: 0;
      height: ~'calc(100% - 108px)';
      margin: 34px 0;
      border-left: 2px #ebedf0 dashed;
      border-left: 2px #1890ff dashed;
    }
  }
  .block-wrapper {
@@ -78,6 +80,7 @@
      font-size: 14px;
      position: relative;
      min-height: 18px;
      font-weight: bold;
    }
    .block-icon {
      position: absolute;
@@ -87,7 +90,7 @@
    .block-content {
      width: 300px;
      color: #314659;
      font-size: 12px;
      font-size: 14px;
      min-height: 18px;
      word-break: break-all;
    }
@@ -98,6 +101,7 @@
  .@{content9}-wrapper {
    padding-bottom: 0;
    .@{content9} {
      height: 722px;
      padding: 64px 24px;
    }
    .timeline {

 src/Home/less/custom.less

@@ -1,7 +1,10 @@
// @import '~antd/lib/style/themes/default.less';
@import '~antd/lib/style/index.less';
// @import '~antd/lib/style/index.less';
@import '~antd/es/style/themes/default.less';
@import '~antd/dist/antd.less';

@line-color: #e9e9e9;
@primary-color: #3a71ff;

@shadow-color: rgba(0, 0, 0, 0.15);


 src/Home/less/feature4.less

@@ -1,14 +1,16 @@
@content6: content6;
.@{content6}-wrapper {
  min-height: 720px;
  padding-top: 64px;
  .@{content6} {
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 0;

    &-text {
      min-height: 424px;
      >*.queue-anim-leaving {
      > *.queue-anim-leaving {
        position: relative !important;
      }
      .title-h1 {
@@ -49,7 +51,7 @@

@media screen and (max-width: 767px) {
  .@{content6}-wrapper {
    height: 860px;
    height: 1114px;
    overflow: hidden;
    .@{content6} {
      display: block;
@@ -59,8 +61,8 @@
        width: 100%;
      }
      &-text {
        >h1,
        >p {
        > h1,
        > p {
          text-align: center;
        }
        > h1 {

 src/Home/less/feature5.less

@@ -1,17 +1,19 @@
@content7: content7;
.@{content7}-wrapper {
  min-height: 720px;
  height: 802px;
  .@{content7} {
    >h1,
    >p {
    > h1,
    > p {
      text-align: center;
    }
    &-tag {
      & i {
      display: flex;
      align-items: center;
      & i,
      & img {
        width: 12px;
        height: 14px;
        display: inline-block;
        vertical-align: middle;
        display: block;
        margin-right: 5px;
      }
      &-name {
@@ -49,7 +51,7 @@

@media screen and (max-width: 767px) {
  .@{content7}-wrapper {
    min-height: 980px;
    min-height: 1000px;
    overflow: hidden;
    .@{content7} {
      max-width: 100%;

 src/Home/less/pricing2.less

@@ -1,15 +1,15 @@
@pricing2: pricing2;

.@{pricing2}-wrapper {
  min-height: 760px;
  min-height: 500px;

  .@{pricing2} {
    >p {
    > p {
      text-align: center;
    }

    &-content-wrapper {
      min-height: 400px;
      // min-height: 400px;
    }

    &-table-name-block {
@@ -22,6 +22,12 @@
      font-size: 24px;
    }

    &-table-name-icon {
      img {
        width: 48px;
      }
    }

    &-table-money {
      font-size: 16px;
      margin: 8px 0 16px;

 src/assets/common/icon-title-bg.png

 src/assets/home/enroll-01.png

 src/assets/home/enroll-02.png

 src/assets/home/jiang1.png

 src/assets/home/jiang2.png

 src/assets/home/jiang3.png

 src/assets/home/jiang4.png

 src/assets/home/page-bg-mobile.png

 src/assets/home/page-bg.png

 src/assets/home/step1.png

 src/assets/home/step2.png

 src/assets/home/step3.png

 src/assets/home/step4.png

 src/assets/home/tab1.png

 src/assets/home/tab2.png

 src/assets/home/tab3.png

 src/assets/icon-qrcode.jpg

 src/components/Title/Title.less

New file
@@ -0,0 +1,36 @@
.title-card-wrapper {
  margin: 0 auto 60px;
  width: 537px;
  height: 114px;
  text-align: center;
  background-position: center center;
  background-size: cover;
  .title-card-title {
    padding-top: 8px;
    font-size: 42px;
    font-weight: 500;
    color: #00116e;
    line-height: 60px;
  }
}

@media (max-width: 767px) {
  .title-card-wrapper {
    width: 320px;
    height: 96px;
    // .title-card-title {
    //   padding-top: 8px;
    //   font-size: 94px;
    //   line-height: 130px;
    // }
    // &.large {
    //   width: 1546px;
    //   height: 328px;
    //   .title-card-title {
    //     padding-top: 26px;
    //     font-size: 123px;
    //     line-height: 174px;
    //   }
    // }
  }
}

 src/components/Title/Title.tsx

New file
@@ -0,0 +1,31 @@
import IconTitleBg from '@/assets/common/icon-title-bg.png';
import { BasicComponent, ComponentDefaults } from '@/utils/typings';
import classNames from 'classnames';
import * as React from 'react';

import './Title.less';

export type TitleProps = {
  title?: string;
  large?: boolean;
} & BasicComponent;

const defaultProps = {
  ...ComponentDefaults,
};

function Title(props: TitleProps) {
  const { className, children, large, title, ...rest } = props;
  return (
    <div
      className={classNames('title-card-wrapper', className, { large })}
      style={{ backgroundImage: `url(${IconTitleBg})` }}
    >
      <div className="title-card-title">{title}</div>
    </div>
  );
}

Title.defaultProps = defaultProps;

export default Title;

 src/utils/common.ts

New file
@@ -0,0 +1,11 @@
import { saveAs } from 'file-saver';

const regFileName = /(.*\/)*([^.]+).*/gi;
export function downloadFileByUrl(fileUrl: string, fileName?: string) {
  //const suffix = /\.([0-9a-z]+)(?:[\?#]|$)/i.exec(fileUrl)[1];
  const suffix = /\.([0-9a-z]+)(?:[#]|$)/i.exec(fileUrl)?.[1];
  let name = fileName ? fileName : fileUrl.replace(regFileName, '$2');
  name += `.${suffix}`;
  saveAs(`${fileUrl}?timestamp=${new Date().getTime()}`, name);
  return;
}

 src/utils/typings.ts

New file
@@ -0,0 +1,12 @@
import type { CSSProperties, ReactNode } from 'react';

export interface BasicComponent {
  className?: string;
  style?: CSSProperties;
  children?: ReactNode;
}

export const ComponentDefaults = {
  className: '',
  style: {},
};