gypsy-crm-frontend-vu/windows/top-window.vue

<template>
  <header class="cwg-pc-header bg-body" :class="{ 'dark': isDark }">
    <div class="left">
      <image class="left-img" v-if="!isDark" src="/static/images/vu/logo-full.svg" mode="widthFix" alt="logo"
        @click="openLeftDrawer" />
      <image class="left-img" v-else src="/static/images/vu/logo-full-white.svg" mode="widthFix" alt="logo"
        @click="openLeftDrawer" />
    </div>
    <div class="right" v-if="visible">
      <cwg-payment />
      <cwg-system />
      <cwg-language />
      <cwg-notice />
      <cwg-right-drawer />
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { storeToRefs } from 'pinia'
import useUserStore from '@/stores/use-user-store'
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
import useGlobalStore from '@/stores/use-global-store'
const globalStore = useGlobalStore()
const isDark = computed(() => globalStore.theme === 'dark')
const visible = ref(true)

watch(() => userInfo.value, (val) => {
  visible.value = !!val
})
const props = defineProps({
  sidebarVisible: {
    type: Boolean,
    default: false,
  },
})

</script>

<style scoped lang="scss">
.cwg-pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: px2rpx(55);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0 px2rpx(16);
  position: relative;
  z-index: 10;
}

.left {
  display: flex;
  align-items: center;
}


.center {
  flex: 1;
}

.right {
  display: flex;
  align-items: center;
  gap: 0;
}

.bell .dot {
  position: absolute;
  top: 0;
  right: -2px;
  width: 7px;
  height: 7px;
  background: #27ae60;
  border-radius: 50%;
  display: inline-block;
}

.left-img {
  width: px2rpx(120);
}

.avatar .img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eee;
}

.logo .img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
}
</style>