menduner/src/layout/personal/slider.vue

<template>
  <div class="slider-box" :style="{'height': getToken() ? '180px' : '92px'}">
    <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/menduner/official-account-code4.jpg" :width="170" style="height: 170px;"></v-img>
            <span class="tips-text">关注menduner公众号</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'
import { getToken } from '@/utils/auth'

const router = useRouter()
const defaultList = [
  { mdi: 'mdi-arrow-up-bold', tips: '返回顶部' },
  { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/menduner/official-account-code4.jpg' }
]
const hasTokenList = [
  { mdi: 'mdi-arrow-up-bold', tips: '返回顶部' },
  { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/menduner/official-account-code4.jpg' },
  { mdi: 'mdi-bell-outline', tips: '通知', path: '/recruit/personal/message' },
  { mdi: 'mdi-list-box-outline', tips: '在线简历', path: '/recruit/personal/personalCenter/resume/online' }
]
const list = getToken() ? hasTokenList : defaultList

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>