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

<template>
  <header class="cwg-pc-header">
    <div class="left">
      <image class="left-img" src="/static/images/logo-full.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)

  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);
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid #f0f0f0;
    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>