GamePortrait/src/components/HallNav.vue

<template>
  <div class="navbar">
    <NavBar :clickable="false">
      <template #left>
        <img
          class="icon"
          @click="logout"
          src="~@/assets/images/icon/back.png"
          alt=""
        />
        <div class="user">
          <div class="name">{{ userInfo.username }}</div>
          <div class="money">{{ userInfo.money }}</div>
        </div>
      </template>
      <template #title>{{ Lang[Type].game_hall }}</template>
      <template #right>
        <img
          class="icon"
          @click="toggleDrop"
          src="~@/assets/images/icon/drop.png"
          alt=""
        />
        <img
          class="icon margin"
          @click="toggleAplayer"
          src="~@/assets/images/icon/music.png"
          alt=""
        />
        <img
          class="icon"
          @click="showMenu"
          src="~@/assets/images/icon/menu.png"
          alt=""
        />
      </template>
    </NavBar>
    <div class="drop-view" v-show="showBnt">
      <div
        @click="checkType('bigway')"
        class="btn animate__animated animated-delay01 animate__bounceIn bigway"
        :class="[{ active: wayType == 'bigway' }, Type]"
      ></div>
      <div
        @click="checkType('allway')"
        class="btn animate__animated animated-delay03 animate__bounceIn allway"
        :class="[{ active: wayType == 'allway' }, Type]"
      ></div>
      <div
        @click="checkType('totle')"
        class="btn animate__animated animated-delay04 animate__bounceIn totle"
        :class="[{ active: wayType == 'totle' }, Type]"
      ></div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from "vue"
import { useStore } from "vuex"
import { NavBar } from "vant"
export default {
  name: "HallNav",
  components: { NavBar },
  setup() {
    const showBnt = ref(false)
    const store = useStore()
    const wayType = computed(() => store.state.config.hallWayType)
    const userInfo = computed(() => store.state.app.userInfo)
    const Type = computed(() => store.state.config.$Type)
    const Lang = computed(() => store.state.config.$lang)
    const showMenu = () => {
      store.commit("config/showMenu", true)
    }
    const toggleDrop = () => {
      showBnt.value = !showBnt.value
    }
    const checkType = (type) => {
      store.commit("config/updateHallWayType", type)
      showBnt.value = false
    }
    const logout = () => {
      const protocol = document.location.protocol
      const hostname = document.location.hostname
      const port = document.location.port
      let url = ""
      if (port) {
        url = `${protocol}//${hostname}:${port}`
      } else {
        url = `${protocol}//${hostname}`
      }
      window.location.href = url
    }
    const toggleAplayer = () => {
      store.commit("config/showAplayer")
    }
    onMounted(() => {
      store.commit("app/updateGameId", 1)
    })

    return {
      Type,
      Lang,
      showBnt,
      wayType,
      userInfo,
      showMenu,
      checkType,
      toggleDrop,
      toggleAplayer,
      logout
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
/* 深色豪华主题 */
$dark-bg: #1a1a1a;
$gold: #c5a059;
$text-primary: #ffffff;
$border-color: #333;

.navbar {
  position: relative;
  background: $dark-bg;
  border-bottom: 1px solid $border-color;
  
  :deep(.van-nav-bar) {
    background: $dark-bg;
    
    &::after {
      display: none;
    }
    
    .van-nav-bar__title {
      color: $text-primary;
      font-weight: 600;
    }
  }
  
  .icon {
    width: 22px;
    filter: brightness(0) invert(1);
    &:active {
      opacity: 0.6;
    }
    &.margin {
      margin: 0 12px;
    }
  }
  
  .user {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    margin-left: 15px;
    text-align: left;
    
    .name {
      padding-left: 20px;
      margin-top: 2px;
      color: $text-primary;
      background: url("~@/assets/images/icon/user.png") left center no-repeat;
      background-size: 14px;
      filter: brightness(0) invert(1);
    }
    
    .money {
      color: $gold;
      padding-left: 20px;
      margin-top: 4px;
      font-weight: 700;
      background: url("~@/assets/images/icon/money.png") left center no-repeat;
      background-size: 14px;
    }
  }
  
  .drop-view {
    position: absolute;
    width: 100px;
    right: 1.9rem;
    top: 50px;
    z-index: 99;
    background: #252525;
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    
    .btn {
      width: 90px;
      height: 34px;
      background-repeat: no-repeat;
      background-size: 100% auto;
      margin: 5px auto;

      &.bigway {
        background-image: url("~@/assets/images/cn_bigway_btn.png");
        &.en,
        &.kr,
        &.yn {
          background-image: url("~@/assets/images/en_bigway_btn.png");
        }
        &.tw {
          background-image: url("~@/assets/images/tw_bigway_btn.png");
        }
      }
      &.allway {
        background-image: url("~@/assets/images/cn_allway_btn.png");
        &.en,
        &.kr,
        &.yn {
          background-image: url("~@/assets/images/en_allway_btn.png");
        }
        &.tw {
          background-image: url("~@/assets/images/tw_allway_btn.png");
        }
      }
      &.totle {
        background-image: url("~@/assets/images/cn_totle_btn.png");
        &.en,
        &.kr,
        &.yn {
          background-image: url("~@/assets/images/en_totle_btn.png");
        }
        &.tw {
          background-image: url("~@/assets/images/tw_totle_btn.png");
        }
      }
      &.active {
        &.bigway {
          background-image: url("~@/assets/images/cn_bigway_active_btn.png");
          &.en,
          &.kr,
          &.yn {
            background-image: url("~@/assets/images/en_bigway_active_btn.png");
          }
          &.tw {
            background-image: url("~@/assets/images/tw_bigway_active_btn.png");
          }
        }
        &.allway {
          background-image: url("~@/assets/images/cn_allway_active_btn.png");
          &.en,
          &.kr,
          &.yn {
            background-image: url("~@/assets/images/en_allway_active_btn.png");
          }
          &.tw {
            background-image: url("~@/assets/images/tw_allway_active_btn.png");
          }
        }
        &.totle {
          background-image: url("~@/assets/images/cn_totle_active_btn.png");
          &.en,
          &.kr,
          &.yn {
            background-image: url("~@/assets/images/en_totle_active_btn.png");
          }
          &.tw {
            background-image: url("~@/assets/images/tw_totle_active_btn.png");
          }
        }
      }
    }
  }
}
</style>