入口页面加上侧边

src/views/entrances/components/slider.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="slider-box pt-6">
+    <div v-for="(item, index) in list" :key="index" class="slider-box-item" @click="handleClick(item, index)">
+      <v-btn size="30" class="icons" icon variant="text">
+        <v-icon class="icons" size="30">{{ item.mdi }}</v-icon>
+        <v-tooltip :text="item.tips" location="start" activator="parent">
+          <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>
+        </v-tooltip>
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'personalSlider' })
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const list = [
+  // { mdi: 'mdi-arrow-up-bold', tips: '返回顶部' }, 暂时隐藏，打开：删掉slider-box后面的pt-6
+  { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/static/mendunerCode.jpg' },
+  { mdi: 'mdi-face-agent', tips: '客服' },
+  { mdi: 'mdi-list-box-outline', tips: '在线简历', path: '/recruit/personal/resume' }
+]
+
+const handleClick = (item, index) => {
+  // 回到顶部
+  if (index === 0) window.scrollTo({ top: 0, behavior: 'smooth' })
+  if (item.path) router.push(item.path)
+}
+</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: var(--color-ccc);
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+.tip-text {
+  font-size: 14px;
+  color: var(--color-222);
+}
+</style>

src/views/entrances/index.vue

@@ -3,14 +3,23 @@
   <div style="background-color: var(--default-bgc); height: 100%;">
     <navBar></navBar>
     <m-list></m-list>
+    <Slider class="slider"></Slider>
   </div>
 </template>
 
 <script setup>
+import Slider from './components/slider.vue'
 import navBar from './navBar'
 import MList from './list'
 defineOptions({name: 'entrances-index'})
 
 </script>
 <style lang="scss" scoped>
+.slider {
+  position: fixed;
+  bottom: 50%;
+  right: 24px;
+  translate: 0 50%;
+  z-index: 999;
+}
 </style>