首页

src/layout/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="parent">
+    <Headers></Headers>
+    <router-view></router-view>
+    <Footers class="footer"></Footers>
+  </div>
+</template>
+
+<script setup>
+import Headers from './personal/navBar.vue'
+import Footers from './personal/footer.vue'
+defineOptions({ name: 'layout-index' })
+</script>
+
+<style lang="scss" scoped>
+.parent {
+  height: 100vh;
+  position: relative;
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+</style>

src/layout/personal/footer.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="box">
+    <div class="top wid d-flex justify-space-between">
+      <div class="left">
+        <h4>联系我们</h4>
+        <div class="mt-5 size second">
+          <div>广州辞图科技有限公司</div>
+          <div class="my-3">公司地址&nbsp;先烈中路100号大院8栋203室</div>
+          <div>服务热线/举报渠道&nbsp;4000000xxx</div>
+        </div>
+      </div>
+      <div class="center">
+        <h4>使用与帮助</h4>
+        <div class="mt-5 size second">
+          <div>协议与规则</div>
+          <div class="my-3">隐私协议</div>
+          <div>使用与帮助</div>
+        </div>
+      </div>
+      <div class="right size d-flex">
+        <div>
+          <v-img :width="100" cover aspect-ratio="16/9" src="https://minio.citupro.com/dev/static/qrcode.png" style="height: 100px;"></v-img>
+          <div class="mt-2" style="text-align: center;">微信公众号</div>
+        </div>
+        <div class="ml-5">
+          <v-img :width="100" cover aspect-ratio="16/9" src="https://minio.citupro.com/dev/static/emw.png" style="height: 100px;"></v-img>
+          <div class="mt-2" style="text-align: center;">小程序</div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom wid mt-7">
+      <span class="size mr-7 second" v-for="(item, i) in list" :key="i">{{ item.label }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'personal-footer' })
+const list = [
+  { label: 'Copyright © 2024招聘人才网', path: '' },
+  { label: '粤ICP备xxxx号-x', path: '' },
+  { label: '粤ICP备xxxx号-x', path: '' },
+  { label: '电子营业执照', path: '', img: '' },
+  { label: '粤公网安管 10110110110', path: '', img: '' },
+  { label: '人力资源服务许可证', path: '' }
+]
+</script>
+
+<style scoped lang="scss">
+.box {
+  width: 100%;
+  height: 225px;
+  color: #fff;
+  background-color: #313438;
+  padding: 30px 0;
+}
+.wid {
+  width: 1184px;
+  max-width: 1184px;
+  margin: auto;
+}
+.size {
+  color: #ffffff80;
+  font-size: 12px;
+}
+.second {
+  cursor: pointer;
+}
+.bottom span:hover {
+  color: var(--default-color);
+}
+.second div:hover {
+  color: var(--default-color);
+}
+</style>

src/views/Home/personal/components/navBar.vue → src/layout/personal/navBar.vue

@@ -3,11 +3,11 @@
     <div
       class="banner"
       density="compact"
-      style="padding-left: 0px;background-color: #00897B;height: 50px;"
+      style="padding-left: 0px;background-color: #00897B;height: 50px;font-size: 14px;"
     >
       <div class="innerBox">
         <div class="nav-logo">
-          <v-img src="../../../../assets/logo.png"  aspect-ratio="16/9" cover :width="90"></v-img>
+          <v-img src="../../assets/logo.png"  aspect-ratio="16/9" cover :width="90" style="height: 40px"></v-img>
         </div>
         <div class="nav-city">
           <p class="nav-city-box">
@@ -19,7 +19,7 @@
         <div class="nav">
           <ul>
             <li v-for="k in list" :key="k.text" class="white--text mt-1">
-              <a href="">{{ k.text }}</a>
+              <a href="" style="font-size: 14px;">{{ k.text }}</a>
             </li>
           </ul>
         </div>

src/router/modules/remaining.js

@@ -1,5 +1,6 @@
 import personal from './personal'
 import enterprise from './enterprise'
+import Layout from '@/layout'
 
 const type  = 0
 const routeArray = [
@@ -8,10 +9,10 @@ const routeArray = [
 ]
 const items = routeArray[type]
 const remainingRouter = [
-  {
-    path: '',
-    redirect: '/home'
-  },
+  // {
+  //   path: '',
+  //   redirect: '/home'
+  // },
   {
     path: '/login',
     component: () => import('@/views/login/index'),
@@ -39,14 +40,27 @@ const remainingRouter = [
       title: '隐私政策'
     }
   },
+  // {
+  //   path: '/home',
+  //   component: () => import('@/views/Home/index'),
+  //   name: 'home',
+  //   meta: {
+  //     hidden: true,
+  //     title: '首页'
+  //   }
+  // },
   {
-    path: '/home',
-    component: () => import('@/views/Home/index'),
-    name: 'home',
-    meta: {
-      hidden: true,
-      title: '首页'
-    }
+    path: '',
+    component: Layout,
+    children: [
+      {
+        path: '/home',
+        component: () => import('@/views/Home/index'),
+        meta: {
+          title: '首页'
+        }
+      }
+    ]
   },
   {
     path: '/register',

src/views/Home/personal/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <div>
-    <NavBar></NavBar>
+  <div class="parent">
     <div>个人用户首页</div>
   </div>
 </template>
+
 <script setup>
-import NavBar from './components/navBar.vue'
 defineOptions({ name:'personal-index'})
 </script>
-<style lang="scss" scoped>
 
+<style lang="scss" scoped>
 </style>