menduner/src/layout/personal/slider.vue

<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-btn size="30" class="icons" variant="text" v-bind="props" :icon="item.mdi"></v-btn>
        </template>
        <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>
    </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>