feat:'官网pc版本修改'

middleware/middleware.js

@@ -0,0 +1,42 @@
+// 遵守pc与移动的命名规范，移动端前面加 m.,就会自动拼接拦截路径,自动响应式匹配pc/移动
+const mobilepath = [
+  '/user/m_user',
+]
+const pcpath = [
+  '/pages/m.index.vue',
+
+]
+export default function ({ isServer, req, redirect, route }) {
+// 这两个只有不同项目不同端口才用得上
+//   let pcOrigin = 'http://sincelocal.aupup.com:9003'
+//   let mobileOrigin = 'http://sincelocal.aupup.com:9004'
+let isMobile = ua => {
+  return !!ua.match(/AppleWebKit.*Mobile.*/)
+}
+let userAgent = req ? req.headers['user-agent'] : navigator.userAgent || ''
+if(!req) return
+// http不能直接写死，要取出来，可能是https
+const request=req?.headers?.referer?.split('://')[0]||'http';
+// console.log(request,'当前的请求头');
+// 如果是移动端，但是确访问了pc的路径
+if (isMobile(userAgent) && pcpath.includes(route.path.toLowerCase())) {
+  console.log('重定向到移动端', req.headers.host, route.fullPath)
+  return redirect(
+    `${request}://${req.headers.host}` +
+      `/m.${route.fullPath.substring(1, route.fullPath.length)}`
+  )
+} else if (
+  !isMobile(userAgent) &&
+  mobilepath.includes(route.path.toLowerCase())
+) {
+  // 如果是pc进了移动
+  // 重定向到pc端
+  console.log('重定向到PC端', req.headers.host, route.fullPath)
+  return redirect(
+    `${request}://${req.headers.host}` +
+      `/${route.fullPath.substring(3, route.fullPath.length)}`
+  )
+}
+//   return isMobile(userAgent) ? '' : redirect(pcOrigin + route.fullPath)
+// 使用redirect 重定向到外链需要加上前缀:http / https
+}

nuxt.config.js

@@ -1,7 +1,7 @@
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    title: 'hrsk-gw1',
+    title: '汇融数科',
     htmlAttrs: {
       lang: 'en'
     },
@@ -23,7 +23,7 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
-    '@/plugins/antd-ui'
+    '@/plugins/antd-ui',
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
@@ -31,11 +31,15 @@ export default {
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
+    '@nuxt/postcss8'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
   ],
+  router: {
+    middleware:'middleware'
+  },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {

package.json

@@ -17,5 +17,9 @@
     "vue": "^2.7.10",
     "vue-server-renderer": "^2.7.10",
     "vue-template-compiler": "^2.7.10"
+  },
+  "devDependencies": {
+    "@nuxt/postcss8": "^1.1.3",
+    "postcss-px-to-viewport": "^1.1.1"
   }
 }

pages/index.vue

@@ -1,200 +1,33 @@
 <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>
+  <!-- <nuxt-link to="/user">首页</nuxt-link> -->
+  <!-- <nuxt-link to="/m_user">首页</nuxt-link> -->
+  <nuxt-child />
 </template>
-
 <script>
+
+
 export default {
-  name: 'IndexPage'
+  data() {
+    return {
+
+    }
+  },
+  beforeMount() {
+    this.goto()
+  },
+  methods: {
+    goto() {
+      var system = {};
+      system.pingtai = /(Win32|Win16|WinCE|Mac68K|MacIntel|MacIntel|MacPPC|Linux mips64)/i.test(navigator.platform);
+      if (system.pingtai) {
+        //电脑
+        console.log('电脑')
+        this.$router.push('/user')
+      } else {
+        //手机
+        console.log('手机')
+      }
+    }
+  }
 }
-</script>
-<style lang="less">
-@import '../static/index.less';
-</style>
+</script>

pages/user/index.vue

@@ -0,0 +1,345 @@
+<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>
+          备案号:dgdf43534534
+        </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>

pages/user/m_user.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>移动端</h1> 
+ </template>

postcss.config.js

@@ -0,0 +1,58 @@
+module.exports = {
+  plugins: {
+    // ...
+    'postcss-px-to-viewport': {
+      // 上面的配置参数
+      // (String) 需要转换的单位，默认为"px"
+      unitToConvert: 'px',
+      // (Number) 设计稿的视口宽度
+      viewportWidth: 750,
+      // (Number) 单位转换后保留的精度
+      unitPrecision: 5,
+      /**
+       * (Array) 能转化为vw的属性列表
+       * 传入特定的CSS属性；
+       * 可以传入通配符""去匹配所有属性，例如：['']；
+       * 在属性的前或后添加"*",可以匹配特定的属性. (例如['position'] 会匹配 background-position-y)
+       * 在特定属性前加 "!"，将不转换该属性的单位 . 例如: ['*', '!letter-spacing']，将不转换letter-spacing
+       * "!" 和 ""可以组合使用， 例如: ['', '!font*']，将不转换font-size以及font-weight等属性
+       */
+      propList: ['*'],
+      // (String) 希望使用的视口单位
+      viewportUnit: 'vw',
+      // (String) 字体使用的视口单位
+      fontViewportUnit: 'vw',
+      /**
+       * (Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+       * 如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配：例如 selectorBlackList 为 ['body'] 的话， 那么 .body-class 就会被忽略
+       * 如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则：例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会
+       */
+      selectorBlackList: [],
+      // (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+      minPixelValue: 1,
+      // (Boolean) 媒体查询里的单位是否需要转换单位
+      mediaQuery: false,
+      // (Boolean) 是否直接更换属性值，而不添加备用属性
+      replace: true,
+      /**
+       * (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+       * 如果值是一个正则表达式，那么匹配这个正则的文件会被忽略
+       * 如果传入的值是一个数组，那么数组里的值必须为正则
+       */
+      exclude: undefined,
+      /**
+       * (Array or Regexp) 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
+       * 如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件
+       * 如果传入的值是一个数组，那么数组里的值必须为正则
+       */
+      include: undefined,
+      // (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+      landscape: false,
+      // (String) 横屏时使用的单位
+      landscapeUnit: 'vw',
+      // (Number) 横屏时使用的视口宽度
+      landscapeWidth: 568
+
+    }
+  }
+}

static/index.less

@@ -1,8 +1,31 @@
 .container {
-  max-width: 1200px;
-  margin: auto;
+  // max-width: 1200px;
+  /* max-width: 1200px; */
+  display: flex;
+  // width: 100%;
+  /* height: 100%; */
+  flex-wrap: wrap;
+  min-height: auto;
+  align-items: center;
+  justify-content: space-between;
+  // margin: 0 169px;
+  // padding: 0 169px ;
+  // margin: auto;
 }
 
+.container-row {
+  // width: 100%;
+  width: 33%;
+  height: auto;
+  // background-color: #5cf;
+}
+
+// @media (max-width: 600px) {
+//   .container-row {
+//     width: 50%;
+//   }
+// }
+
 html,
 body {
   margin: 0;
@@ -14,35 +37,36 @@ body {
   }
 
   .home-title {
-    font-size: 42px;
+    font-size: 18px;
     font-weight: 400;
     text-align: center;
 
     &-sub {
       text-align: center;
-      font-size: 22px;
+      font-size: 12px;
       font-weight: 400;
-      margin-top: 28px;
+      margin-top: 20px;
       color: #888888;
     }
   }
 
   .home-qa {
-    padding: 170px 0;
-
+    padding: 50px 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 
     .home-qa-img-row {
-      margin-top: 103px;
+      margin-top: 20px;
+      // margin: 103px 169px 0;
+      width: 100%;
 
       .home-qa-img-row-item {
-        max-width: 490px;
+        // max-width: 490px;
         position: relative;
 
-        & > img {
+        &>img {
           width: 100%;
           height: 100%;
         }
@@ -60,16 +84,16 @@ body {
           justify-content: space-around;
 
           .home-qa-img-row-item-absolute-title {
-            font-size: 22px;
+            font-size: 14px;
             font-weight: bold;
 
-            & > span {
-              font-size: 50px;
+            &>span {
+              font-size: 40px;
             }
           }
 
           .home-qa-img-row-item-absolute-subtitle {
-            font-size: 14px;
+            font-size: 10px;
             font-weight: 400;
           }
         }
@@ -79,15 +103,24 @@ body {
 
   .home-ad {
     background-color: #f3f5fe;
-    padding-top: 132px;
-    padding-bottom: 160px;
+    padding: 50px;
+    // padding-top: 50px;
+    // padding-bottom: 160px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 
     .home-ad-row {
-      margin-top: 112px;
+      margin-top: 30px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      .home-row-single {
+        width: 30%;
+        margin: 20px 0;
+      }
 
       img {
         width: 100%;
@@ -96,21 +129,27 @@ body {
   }
 
   .home-static {
-    height: 723px;
+    // height: 723px;
     background: linear-gradient(315deg, #496cf2 0%, #7663ff 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-
     color: #fff;
 
+    .home-content {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      margin: 50px 0;
+    }
+
     .home-title {
       color: #fff;
 
       &-sub {
         color: #fff;
-        margin-bottom: 94px;
+        // margin-bottom: 45px;
       }
     }
 
@@ -118,30 +157,102 @@ body {
       display: flex;
       justify-content: center;
       align-items: center;
+      margin: 20px 5px;
 
       &-wrap {
         padding: 0 24px;
         border-radius: 9px;
         background-color: #fff;
         color: #723bed;
-        font-size: 60px;
+        font-size: 30px;
       }
     }
 
     &-title {
-      font-size: 38px;
+      font-size: 16px;
     }
 
     .home-static-btn {
-      margin-top: 38px;
-      height: 50px;
-      border-radius: 50px;
+      // margin-top: 18px;
+      height: 40px;
+      border-radius: 40px;
       color: #723bed;
-      width: 200px;
+      width: 150px;
+      cursor: pointer;
+    }
+
+    .home-ad-free {
+      display: flex;
+      align-items: center;
+      margin: 20px 0;
     }
   }
 }
 
+// 底部
+.home-bottom {
+  width: 100%;
+  background: #1F1D2A;
+  padding: 20px 50px 10px;
+
+  .contact {
+    margin-bottom: 30px;
+    .contact-1 {
+      color: #FFFFFF;
+      font-size: 20px;
+    }
+
+    .contact-2 {
+      font-size: 14px;
+      color: #b4b4b8;
+    }
+  }
+  .home-consult{
+    display: flex;
+    margin-bottom: 40px;
+    .consult-tel{
+      width: 50%;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+    .consult-code{
+      margin-left: 10%;
+      width: 40%;
+      display: flex;
+      .code-content{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+  .reference{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #585667;
+    font-size: 10px;
+    margin: 30px 0;
+  }
+
+
+}
+
 .ant-modal-body {
   padding: 40px !important;
 }
+.color-fff-12{
+  color: #fff;
+  font-size: 12px;
+}
+.color-fff{
+  color: #fff;
+}
+.w-20{
+  width: 20px;
+}
+.h-20{
+  height: 20px;
+}