menduner/src/layout/personal/slider.vue

<template>
  <div class="slider-box">
    <div v-for="(item, index) in list" :key="index" class="slider-box-item" @click="handleClick(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' })
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: '在线简历' }
]

const handleClick = (index) => {
  // 回到顶部
  if (index === 0) window.scrollTo({ top: 0, behavior: 'smooth' })
}
</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>