侧边栏

src/layout/index.vue

@@ -4,24 +4,28 @@
     <div>
       <router-view></router-view>
     </div>
-    <Footers class="footer mt-10"></Footers>
+    <Footers class="mt-10"></Footers>
+    <Slider class="slider"></Slider>
   </div>
 </template>
 
 <script setup>
 import Headers from './personal/navBar.vue'
 import Footers from './personal/footer.vue'
+import Slider from './personal/slider.vue'
 defineOptions({ name: 'layout-index' })
 </script>
 
 <style lang="scss" scoped>
 .parent {
   background-color: var(--default-bgc);
-  // position: relative;
+  position: relative;
 }
-.footer {
-  // position: absolute;
-  // bottom: 0;
-  // left: 0;
+.slider {
+  position: fixed;
+  bottom: 50%;
+  right: 24px;
+  translate: 0 50%;
+  z-index: 999;
 }
 </style>

src/layout/personal/footer.vue

@@ -19,7 +19,7 @@
       </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>
+          <v-img :width="100" cover aspect-ratio="16/9" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" style="height: 100px;"></v-img>
           <div class="mt-2" style="text-align: center;">微信公众号</div>
         </div>
         <div class="ml-5">

src/layout/personal/slider.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="slider-box">
+    <div v-for="item in list" :key="item.mdi" class="slider-box-item">
+      <v-tooltip :text="item.tips" location="start">
+        <template v-slot:activator="{ props }">
+          <v-icon size="30" class="icons" v-bind="props">{{ item.mdi }}</v-icon>
+        </template>
+        <template #default>
+          <div v-if="item.showImg" class="ma-3" style="text-align: center">
+            <v-img cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" :width="170" style="height: 170px;"></v-img>
+            <span class="tips-text">关注门墩儿直聘微信公众号</span>
+          </div>
+          <span v-else>{{ item.tips }}</span>
+        </template>
+      </v-tooltip>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'personalSlider' })
+const list = [
+  { mdi: 'mdi-arrow-up-bold', tips: '返回顶部' },
+  { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/static/mendunerCode.jpg' },
+  { mdi: 'mdi-face-agent', tips: '客服' },
+  { mdi: 'mdi-list-box-outline', tips: '个人简历' }
+]
+</script>
+
+<style lang="scss" scoped>
+.slider-box {
+  width: 44px;
+  height: 180px;
+  background-color: #fff;
+  border-radius: 22px;
+  box-shadow: 0 4px 20px 0 rgba(0,0,0,.06);
+}
+.slider-box-item {
+  width: 44px;
+  height: 44px;
+  padding: 6px 0;
+  text-align: center;
+}
+.icons {
+  color: #ccc;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+.tip-text {
+  font-size: 14px;
+  color: #222;
+}
+</style>

src/router/modules/remaining.js

@@ -9,10 +9,6 @@ const routeArray = [
 ]
 const items = routeArray[type]
 const remainingRouter = [
-  // {
-  //   path: '',
-  //   redirect: '/home'
-  // },
   {
     path: '/login',
     component: () => import('@/views/login/index'),
@@ -40,15 +36,6 @@ const remainingRouter = [
       title: '隐私政策'
     }
   },
-  // {
-  //   path: '/home',
-  //   component: () => import('@/views/Home/index'),
-  //   name: 'home',
-  //   meta: {
-  //     hidden: true,
-  //     title: '首页'
-  //   }
-  // },
   {
     path: '',
     component: Layout,