TangJiaWanFeiYi/src/components/menu.vue

<template>
  <div class="bottom-menu">
    <ul class="b-ul">
      <li :class="['b-li',`${idx==currentTimeIdx?'active':''}`]" @click="emit('onClickTimeItem', idx)" v-for="(timeItem, idx) in list" :key="timeItem.id">
        <div></div>
        <p>{{ timeItem.info.textCn }}</p>
      </li>
    </ul>

    <ul class="b-right" >
      <li
        class="br-li"
        @click="emit('onClickMenuItem', rmenu[0])"
      >
        <img :src="bgAudioStatus ? rmenu[0].imgOn : rmenu[0].imgOff" alt="" draggable="false">
      </li>
      <li
        class="br-li"
        @click="emit('onClickMenuItem', item)"
        v-for="item in rmenu.slice(1)" :key="item.id"
      >
        <img :src="item.img" alt="" draggable="false">
      </li>
    </ul>
  </div>
</template>

<script setup>
import { shallowReactive } from "vue"

const props = defineProps({
  list: Array,
  currentTimeIdx:Number,
  bgAudioStatus: Boolean,
})


const emit = defineEmits(['onClickTimeItem','onClickMenuItem'])

const rmenu = shallowReactive([{
  name: '背景音乐',
  imgOn: utils.getImageUrl(`icon_music_on.png`),
  imgOff: utils.getImageUrl(`icon_music_off.png`),
  id: 'bgAudio'
}, {
  name: '帮助',
  img: utils.getImageUrl(`icon_tip.png`),
  id: 'tip'
}, {
  name: '搜索',
  img: utils.getImageUrl(`icon_search.png`),
  id: 'search'
}, {
  name: '主页',
  img: utils.getImageUrl(`icon_home.png`),
  id: 'home'
}
])
</script>

<style lang="scss" scoped>
.bottom-menu {
  --thiscolor: #72928E;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  background: rgba(255, 241, 209, 0.5);
  box-shadow: 0px 0px 50px 0px rgba(206, 186, 141, 0.6), inset 0px 2px 2px 0px rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  .b-ul {
    display: flex;
    width: 80%;
    position: relative;

    &::before {
      border-top: 1px dashed var(--thiscolor);
      width: 90%;
      height: 1px;
      content: '';
      display: inline-block;
      position: absolute;
      top: 0.4rem;
      left: 50%;
      transform: translateX(-50%);
    }

    .b-li {
      text-align: center;
      flex: 1;
      cursor: pointer;
      transition: .2s ease transform;

      >div {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        display: inline-block;
        background: var(--thiscolor);
        position: relative;

        &::after {
          position: absolute;
          width: 200%;
          height: 200%;
          content: '';
          border-radius: 50%;
          display: inline-block;
          border: 1px solid var(--thiscolor);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      >p {
        color: var(--thiscolor);
        font-size: 0.8rem;
        margin-top: 1rem;
      }

      &:hover,&.active {
        transform: scale(1.1);
        --thiscolor: #783435;
      }
    }
  }

  .b-right {
    display: flex;
    width: 20%;
    position: relative;
    justify-content: space-evenly;

    .br-li {
      cursor: pointer;
      width: 2rem;
      >img {
        width: 100%;
      }
    }
  }
}
</style>