element

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.14",
+    "element-plus": "^2.3.6",
     "pinia": "^2.0.32",
     "postcss-px-to-viewport": "^1.1.1",
     "swiper": "^9.3.2",
@@ -19,6 +20,8 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "sass": "^1.58.3",
+    "unplugin-auto-import": "^0.16.4",
+    "unplugin-vue-components": "^0.25.1",
     "vite": "^4.1.0"
   }
 }

src/components/Bottom.vue

@@ -16,7 +16,7 @@
   right: 0;
   height: $bottom-height;
   background: #ffa18e;
-  z-index: 999;
+  z-index: 200;
   display: flex;
   box-sizing: border-box;
   align-items: center;

src/components/Top.vue

@@ -1,11 +1,21 @@
 <template>
   <div class="top_container">
     <div class="logo_container"></div>
-    <div class="fold_icon"></div>
+    <div class="fold_icon" @click="openDrawer"></div>
+    <el-drawer v-model="drawer" direction="btt" class="drawer">
+      <span>Hi, there!</span>
+    </el-drawer>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+const drawer = ref(false)
+
+const openDrawer = () => {
+  drawer.value = true
+}
+</script>
 
 <style lang="scss" scoped>
 .top_container {
@@ -15,6 +25,10 @@
   align-items: center;
   justify-content: space-between;
   background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
   .logo_container {
     display: flex;
     align-items: center;
@@ -24,5 +38,9 @@
     height: 12px;
     background: #000;
   }
+  .drawer {
+    border-top-right-radius: 20px;
+    border-top-left-radius: 20px;
+  }
 }
 </style>

src/pages/Recruit.vue

@@ -1,10 +1,23 @@
 <template>
-  <div class="recruit_container">recruit</div>
+  <div class="recruit_container">
+    <SubNavigation title="招贤纳士" />
+    <div class="collapse_container">
+      <div class="collapse_header"></div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import SubNavigation from 'cpns/SubNavigation'
+</script>
 
 <style lang="scss" scoped>
 .recruit_container {
+  padding-top: $sub-header-height;
+  .collapse_container {
+    .collapse_header {
+      background: #000;
+    }
+  }
 }
 </style>

vite.config.js

@@ -3,6 +3,9 @@ import { resolve } from 'path'
 import vue from '@vitejs/plugin-vue'
 import autoprefixer from 'autoprefixer'
 import postcsspxtoviewport from 'postcss-px-to-viewport'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -17,7 +20,15 @@ export default defineConfig({
     port: 5173,
     host: '0.0.0.0',
   },
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
   //配置sass
   css: {
     preprocessorOptions: {