第一版首页

package-lock.json

@@ -26,6 +26,12 @@
         "@ant-design/icons-svg": "^4.2.1"
       }
     },
+    "@antfu/utils": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.5.1.tgz",
+      "integrity": "sha512-8Afo0+xvYe1K8Wm4xHTymfTkpzy36aaqDvhXIayUwl+mecMG9Xzl3XjXa6swG6Bk8FBeQ646RyvmsYt6+2Be9g==",
+      "dev": true
+    },
     "@babel/code-frame": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
@@ -118,6 +124,32 @@
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
       "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw=="
     },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
     "@npmcli/fs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
@@ -155,12 +187,6 @@
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
       "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ=="
     },
-    "@types/node": {
-      "version": "17.0.31",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.31.tgz",
-      "integrity": "sha512-AR0x5HbXGqkEx9CadRH3EBYx/VkiUgZIhP4wvPn/+5KIsgpNoyFaRlVe0Zlx9gRtg8fA06a9tskE2MSN7TcG4Q==",
-      "dev": true
-    },
     "@types/normalize-package-data": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
@@ -317,6 +343,43 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
       "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
     },
+    "@windicss/config": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/@windicss/config/-/config-1.8.4.tgz",
+      "integrity": "sha512-i4fFGFfZoRess6WMkauykHC3PFd9xKYVx7lSuLfMK7sgo6x3+l4dY42GbsWMHyLqH1sTMfyt1LgfXSIKYJozSA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.3.4",
+        "jiti": "^1.13.0",
+        "windicss": "^3.5.1"
+      }
+    },
+    "@windicss/plugin-utils": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.8.4.tgz",
+      "integrity": "sha512-DqJVwAfzlgd8nYSNlmhXOey32pI8UwH7QiOWdFS/AR2O/q9oLDGHDn97Its/kZdfoyhi8ylwZNP2Pk0H7cihhQ==",
+      "dev": true,
+      "requires": {
+        "@antfu/utils": "^0.5.1",
+        "@windicss/config": "1.8.4",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.2.11",
+        "magic-string": "^0.26.1",
+        "micromatch": "^4.0.5",
+        "windicss": "^3.5.1"
+      },
+      "dependencies": {
+        "magic-string": {
+          "version": "0.26.1",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.1.tgz",
+          "integrity": "sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -994,11 +1057,33 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      }
+    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
+    "fastq": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -1366,6 +1451,12 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
+    "jiti": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.13.0.tgz",
+      "integrity": "sha512-/n9mNxZj/HDSrincJ6RP+L+yXbpnB8FybySBa+IjIaoH9FIxBbrbRT5XUbe8R7zuVM2AQqNMNDDqz0bzx3znOQ==",
+      "dev": true
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -1425,6 +1516,12 @@
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
     },
+    "kolorist": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.5.1.tgz",
+      "integrity": "sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==",
+      "dev": true
+    },
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -1529,6 +1626,22 @@
         "yargs-parser": "^20.2.3"
       }
     },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      }
+    },
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1921,6 +2034,12 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
       "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="
     },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
     "quick-lru": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
@@ -2066,6 +2185,12 @@
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
       "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs="
     },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -2083,6 +2208,15 @@
         "fsevents": "~2.3.2"
       }
     },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -2509,6 +2643,18 @@
         "rollup": "^2.59.0"
       }
     },
+    "vite-plugin-windicss": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.8.4.tgz",
+      "integrity": "sha512-LSZAO8BZn3x406GRbYX5t5ONXXJVdqiQtN1qrznLA/Dy5/NzZVhfcrL6N1qEYYO7HsCDT4pLAjTzObvDnM9Y8A==",
+      "dev": true,
+      "requires": {
+        "@windicss/plugin-utils": "1.8.4",
+        "debug": "^4.3.4",
+        "kolorist": "^1.5.1",
+        "windicss": "^3.5.1"
+      }
+    },
     "vue": {
       "version": "3.2.33",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.33.tgz",
@@ -2578,6 +2724,12 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
+    "windicss": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/windicss/-/windicss-3.5.1.tgz",
+      "integrity": "sha512-E1hYZATcZFci/XhGS0sJAMRxULjnK+glNukE78Ku7xeb3jxgMY55fFOdIrav+GjQCsgR+IZxPq9/DwmO6eyc4Q==",
+      "dev": true
+    },
     "wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

package.json

@@ -20,6 +20,8 @@
     "@vitejs/plugin-vue": "^2.3.1",
     "typescript": "^4.5.4",
     "vite": "^2.9.5",
-    "vue-tsc": "^0.34.7"
+    "vite-plugin-windicss": "^1.8.4",
+    "vue-tsc": "^0.34.7",
+    "windicss": "^3.5.1"
   }
 }

src/App.vue

@@ -1,14 +1,195 @@
 <script setup lang="ts">
+import { onMounted, ref } from 'vue'
+let isTop = ref(true)
+let activeIndex = ref(0)
+let menuList = ref(['首页', '优巨引擎官网', '文档中心', '管理中心'])
+const container = ref()
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScrollY, true)
+})
+function handleScrollY() {
+  console.log('object', container.value.getBoundingClientRect());
+  isTop.value = !container.value.getBoundingClientRect().top
+}
 </script>
 
 <template>
-  <router-view></router-view>
+  <a-layout>
+    <!-- 头部 -->
+    <a-layout-header :class="isTop ? 'header' : 'header header-color'">
+      <div class="head-content">
+        <div class="left">
+          <img v-if="isTop" class="img" src="@/assets/images/1.png" alt="">
+          <img v-else class="img" src="@/assets/images/1-1.png" alt="">
+          <div class="name">优巨引擎·开放平台</div>
+        </div>
+        <div class="right">
+          <div @click="activeIndex = i" class="btn" v-for="(v, i) in menuList" :key="i"
+            :class="activeIndex === i && !isTop ? 'active-btn' : ''">
+            {{ v }}</div>
+          <div class="login">登录</div>
+        </div>
+      </div>
+    </a-layout-header>
+    <!-- 内容 -->
+    <a-layout-content class="">
+      <div ref="container" class="lb-container">
+        <router-view></router-view>
+      </div>
+    </a-layout-content>
+    <!-- 底部 -->
+    <a-layout-footer class="footer">
+      <div class="name">优巨引擎</div>
+      <div class="agreement">
+        <div>开发者服务协议</div>
+        <div>&ensp;|&ensp;</div>
+        <div>用户服务协议</div>
+        <div>&ensp;|&ensp;</div>
+        <div>联系我们</div>
+      </div>
+      <div class="record-number">
+        备案号：苏ICP备2021010118号
+      </div>
+    </a-layout-footer>
+  </a-layout>
 </template>
 
-<style>
+<style lang="scss" scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  color: #FFFFFF;
+  background: none;
+  z-index: 99;
+
+  .head-content {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-width: 600px;
+
+
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .img {
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+      }
+
+      .name {
+        font-size: 16px;
+        font-weight: bold;
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+
+      .btn {
+        font-size: 15px;
+        margin-right: 20px;
+        cursor: pointer;
+      }
+
+      .active-btn {
+        color: #0077EE;
+        font-weight: bold;
+      }
+
+      .login {
+        width: 80px;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        background: linear-gradient(253deg, #84D3FF 0%, #2A4FAC 35%, #0F1E6C 100%);
+        border-radius: 16px 16px 16px 16px;
+        font-size: 14px;
+        color: #FFFFFF;
+        cursor: pointer;
+      }
+    }
+
+  }
+
+  @media (min-width: 544px) {
+    .head-content {
+      max-width: 576px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .head-content {
+      max-width: 720px;
+    }
+  }
+
+  @media (min-width: 992px) {
+    .head-content {
+      max-width: 940px;
+    }
+  }
+
+  @media (min-width: 1900px) {
+    .head-content {
+      max-width: 1500px;
+    }
+  }
+
+}
+
+.header-color {
+  background-color: #ffffff;
+  color: #222222;
+}
+
+.lb-container {
+  min-height: calc(100vh - 110px);
+  background: #020d4a;
+}
+
+.footer {
+  height: 110px;
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  background: #252525;
+  color: #FFFFFF;
+
+  .name {
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+  }
+
+  .agreement,
+  .record-number {
+    display: flex;
+    font-size: 12px;
+    font-weight: 400;
+    cursor: pointer;
+  }
+
+}
 </style>

src/main.ts

@@ -4,6 +4,7 @@ import App from './App.vue'
 import 'ant-design-vue/dist/antd.css';
 import router from './router'
 import store from './store'
+import 'virtual:windi.css'
 const app = createApp(App);
 
 app.use(Antd).use(router).use(store).mount('#app')

src/views/home/index.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import getAssetsFile from '@/util/pubUse'
-let isTop = ref(true)
-let activeIndex = ref(0)
-let menuList = ref(['首页', '优巨引擎官网', '文档中心', '管理中心'])
 let steps = ref([
   {
     name: '步骤一',
@@ -23,358 +20,187 @@ let steps = ref([
   },
 ])
 let partners = ref([])
-onMounted(() => {
-  window.addEventListener('scroll', handleScrollY, true)
-})
-const container = ref()
-function handleScrollY() {
-  isTop.value = !container.value.getBoundingClientRect().top
-}
 </script>
 
 <template>
-  <div :class="isTop ? 'header' : 'header header-color'">
-    <div class="head-content">
-      <div class="left">
-        <img v-if="isTop" class="img" src="@/assets/images/1.png" alt="">
-        <img v-else class="img" src="@/assets/images/1-1.png" alt="">
-        <div class="name">优巨引擎·开放平台</div>
-      </div>
-      <div class="right">
-        <div @click="activeIndex = i" class="btn" v-for="(v, i) in menuList" :key="i"
-          :class="activeIndex === i && !isTop ? 'active-btn' : ''">
-          {{ v }}</div>
-        <div class="login">登录</div>
-      </div>
+  <div class="content">
+    <div class="top-con">
+      <div class="con">与伙伴一起共同成长</div>
+      <div class="con1">优巨引擎开放平台</div>
+      <div class="con2">猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。</div>
     </div>
-  </div>
-  <div class="container" ref="container">
-    <div class="content">
-      <div class="top-con">
-        <div class="con">与伙伴一起共同成长</div>
-        <div class="con1">优巨引擎开放平台</div>
-        <div class="con2">猎豹AI提供丰富的开放能力和成熟的合作机制，助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台，焦距全网生态链。</div>
+    <!-- 接入流程 -->
+    <div class="access-process">
+      <div class="title">
+        <div class="title-en">ACCESS PROCESS</div>
+        <div class="title-ch">接入流程</div>
+        <div class="line"></div>
       </div>
-      <!-- 接入流程 -->
-      <div class="access-process">
-        <div class="title">
-          <div class="title-en">ACCESS PROCESS</div>
-          <div class="title-ch">接入流程</div>
-          <div class="line"></div>
-        </div>
-        <div class="steps">
-          <div class="step" :class="i % 2 === 0 ? 'step1' : ''"
-            :style="`background: url(${getAssetsFile(`4-${i + 1}.png`)}) no-repeat`" v-for="(v, i) in steps" :key="i">
-            <div class="name">{{ v.name }}</div>
-            <div class="tip">{{ v.tip }}</div>
-          </div>
-        </div>
-        <div class="register">立即注册</div>
-        <img class="box" src="@/assets/images/5.png" alt="" srcset="">
-      </div>
-      <!-- 合作伙伴 -->
-      <div class="cooperative-partner">
-        <div class="title">
-          <div class="title-en">COOPERATIVE PARTNER</div>
-          <div class="title-ch">合作伙伴</div>
-          <div class="line"></div>
-        </div>
-        <div class="partners">
-          <img class="partner" :src="getAssetsFile(`7-${i + 1}.png`)" alt="" v-for="(v, i) in 16" :key="i">
+      <div class="steps">
+        <div class="step" :class="i % 2 === 0 ? 'step1' : ''"
+          :style="`background: url(${getAssetsFile(`4-${i + 1}.png`)}) no-repeat`" v-for="(v, i) in steps" :key="i">
+          <div class="name">{{ v.name }}</div>
+          <div class="tip">{{ v.tip }}</div>
         </div>
       </div>
+      <div class="register">立即注册</div>
+      <img class="box" src="@/assets/images/5.png" alt="" srcset="">
     </div>
-    <div class="footer">
-      <div class="name">优巨引擎</div>
-      <div class="agreement">
-        <div>开发者服务协议</div>
-        <div>&ensp;|&ensp;</div>
-        <div>用户服务协议</div>
-        <div>&ensp;|&ensp;</div>
-        <div>联系我们</div>
+    <!-- 合作伙伴 -->
+    <div class="cooperative-partner">
+      <div class="title">
+        <div class="title-en">COOPERATIVE PARTNER</div>
+        <div class="title-ch">合作伙伴</div>
+        <div class="line"></div>
       </div>
-      <div class="record-number">
-        备案号：苏ICP备2021010118号
+      <div class="partners">
+        <img class="partner" :src="getAssetsFile(`7-${i + 1}.png`)" alt="" v-for="(v, i) in 15" :key="i">
       </div>
     </div>
   </div>
-
 </template>
 
 <style lang="scss" scoped >
-.header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 60px;
-  color: #FFFFFF;
-  z-index: 99;
-
-  .head-content {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    min-width: 600px;
-
-
-
-    .left {
-      display: flex;
-      align-items: center;
-
-      .img {
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-      }
-
-      .name {
-        font-size: 16px;
-        font-weight: bold;
-        cursor: pointer;
-        margin-left: 20px;
-      }
-    }
-
-    .right {
-      display: flex;
-      align-items: center;
+.content {
 
-      .btn {
-        font-size: 15px;
-        margin-right: 20px;
-        cursor: pointer;
-      }
-
-      .active-btn {
-        color: #0077EE;
-        font-weight: bold;
-      }
+  .top-con {
+    background: url(@/assets/images/2-1.png) no-repeat;
+    background-position-x: center;
+    height: 900px;
+    padding: 110px 0 0 220px;
+    color: #ffffff;
 
-      .login {
-        width: 80px;
-        height: 32px;
-        line-height: 32px;
-        text-align: center;
-        background: linear-gradient(253deg, #84D3FF 0%, #2A4FAC 35%, #0F1E6C 100%);
-        border-radius: 16px 16px 16px 16px;
-        font-size: 14px;
-        color: #FFFFFF;
-        cursor: pointer;
-      }
+    .con {
+      font-size: 30px;
+      font-weight: bold;
     }
 
-  }
-
-  @media (min-width: 544px) {
-    .head-content {
-      max-width: 576px;
+    .con1 {
+      font-size: 60px;
+      font-weight: bold;
     }
-  }
 
-  @media (min-width: 768px) {
-    .head-content {
-      max-width: 720px;
+    .con2 {
+      width: 600px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 23px;
     }
   }
 
-  @media (min-width: 992px) {
-    .head-content {
-      max-width: 940px;
-    }
-  }
+  .access-process,
+  .cooperative-partner {
+    position: relative;
+    width: 100%;
+    margin-top: -150px;
 
-  @media (min-width: 1900px) {
-    .head-content {
-      max-width: 1500px;
+    .box {
+      position: absolute;
+      top: 0;
+      right: 127px;
     }
-  }
-
-}
-
-.header-color {
-  background-color: #ffffff;
-  color: #222222;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background: #020d4a;
-  min-height: 100vh;
 
-  .content {
-
-    .top-con {
-      background: url(@/assets/images/2-1.png) no-repeat;
-      background-position-x: center;
-      height: 900px;
-      padding: 110px 0 0 220px;
-      color: #ffffff;
+    .title {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
 
-      .con {
-        font-size: 30px;
-        font-weight: bold;
+      .title-en {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 50px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.2);
+        line-height: 59px;
       }
 
-      .con1 {
-        font-size: 60px;
+      .title-ch {
+        margin: 26px 0 10px;
+        font-size: 34px;
         font-weight: bold;
+        color: #FFFFFF;
+        line-height: 40px;
       }
 
-      .con2 {
-        width: 600px;
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 23px;
+      .line {
+        width: 80px;
+        height: 8px;
+        background: #2A4FAC;
+        border-radius: 0px 0px 0px 0px;
       }
     }
 
-    .access-process,
-    .cooperative-partner {
-      position: relative;
-      width: 100%;
-      margin-top: -150px;
-
-      .box {
-        position: absolute;
-        top: 0;
-        right: 127px;
-      }
+    .steps {
+      display: flex;
+      justify-content: space-evenly;
+      color: #ffffff;
+      margin-top: 25px;
+      padding: 0 100px;
 
-      .title {
-        position: relative;
+      .step {
         display: flex;
         flex-direction: column;
         align-items: center;
+        justify-content: flex-end;
+        width: 200px;
+        height: 200px;
+        background-size: 200px !important;
+        cursor: pointer;
 
-        .title-en {
-          position: absolute;
-          left: 50%;
-          transform: translateX(-50%);
-          font-size: 50px;
-          font-weight: 500;
-          color: rgba(255, 255, 255, 0.2);
-          line-height: 59px;
-        }
-
-        .title-ch {
-          margin: 26px 0 10px;
-          font-size: 34px;
+        .name {
+          font-size: 18px;
           font-weight: bold;
-          color: #FFFFFF;
-          line-height: 40px;
+          line-height: 23px;
         }
 
-        .line {
-          width: 80px;
-          height: 8px;
-          background: #2A4FAC;
-          border-radius: 0px 0px 0px 0px;
+        .tip {
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(255, 255, 255, 0.6);
+          line-height: 19px;
+          margin-bottom: 30px;
         }
       }
 
-      .steps {
-        display: flex;
-        justify-content: space-evenly;
-        color: #ffffff;
-        margin-top: 25px;
-        padding: 0 100px;
-
-        .step {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: flex-end;
-          width: 200px;
-          height: 200px;
-          background-size: 200px !important;
-          cursor: pointer;
-
-          .name {
-            font-size: 18px;
-            font-weight: bold;
-            line-height: 23px;
-          }
-
-          .tip {
-            font-size: 14px;
-            font-weight: 400;
-            color: rgba(255, 255, 255, 0.6);
-            line-height: 19px;
-            margin-bottom: 30px;
-          }
-        }
-
-        .step1 {
-          margin-top: 120px;
-        }
-
-      }
-
-      .partners {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        padding: 0 100px 100px;
-
-        .partner {
-          // background-size: 100% 100%;
-          width: 380px;
-          height: 90px;
-          margin-top: 60px;
-        }
+      .step1 {
+        margin-top: 120px;
       }
 
-      .register {
-        width: 200px;
-        height: 60px;
-        background: linear-gradient(253deg, #84D3FF 0%, #2A4FAC 35%, #0F1E6C 100%);
-        border-radius: 10px 10px 10px 10px;
-        font-size: 18px;
-        font-weight: 500;
-        color: #FFFFFF;
-        line-height: 60px;
-        text-align: center;
-        margin: 40px auto 0;
-        cursor: pointer;
-      }
     }
 
-    .cooperative-partner {
-      margin-top: 73px;
+    .partners {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      padding: 0 100px 100px;
+
+      .partner {
+        // background-size: 100% 100%;
+        width: 380px;
+        height: 90px;
+        margin-top: 60px;
+      }
     }
-  }
-
-  .footer {
-    height: 110px;
-    padding: 10px 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-evenly;
-    background: #252525;
-    color: #FFFFFF;
 
-    .name {
+    .register {
+      width: 200px;
+      height: 60px;
+      background: linear-gradient(253deg, #84D3FF 0%, #2A4FAC 35%, #0F1E6C 100%);
+      border-radius: 10px 10px 10px 10px;
       font-size: 18px;
-      font-weight: bold;
-      cursor: pointer;
-    }
-
-    .agreement,
-    .record-number {
-      display: flex;
-      font-size: 12px;
-      font-weight: 400;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 60px;
+      text-align: center;
+      margin: 40px auto 0;
       cursor: pointer;
     }
+  }
 
+  .cooperative-partner {
+    margin-top: 73px;
   }
 }
 </style>

vite.config.ts

@@ -1,10 +1,12 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import WindiCSS from 'vite-plugin-windicss'
 import path from "path"
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue()],
+    vue(),
+    WindiCSS()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "src")