gypsy-crm-frontend-vu/components/cwg-pc-header.vue

<template>
	<uni-nav-bar
		:leftWidth="0"
		:rightWidth="0"
		:statusBar="true"
		:fixed="true"
		:height="55"
		:border="false"
	>
		<view class="cwg-pc-header bg-body">
			<!-- 左侧 -->
			<view class="left">
				<cwg-icon
					:name="!sidebarVisible ? 'crm-bars-staggered' : 'cwg-close'"
					color="#97A1C0"
					@click="openLeftDrawer"
				/>
			</view>

			<!-- 中间 Logo -->
			<view class="center-logo" v-if="!isMobile">
				<image
					v-if="!isDark"
					class="logo-img"
					src="/static/images/vu/logo-full.svg"
					mode="widthFix"
					alt="logo"
				/>

				<image
					v-else
					class="logo-img"
					src="/static/images/vu/logo-full-white.svg"
					mode="widthFix"
					alt="logo"
				/>
			</view>

			<!-- 右侧 -->
			<view class="right">
				<cwg-download />
				<cwg-notice />
				<cwg-right-drawer />
			</view>
		</view>
	</uni-nav-bar>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import useGlobalStore from '@/stores/use-global-store'
import { useWindowWidth } from '@/composables/useWindowWidth'
const windowWidth = useWindowWidth(300)
const isMobile = computed(() => windowWidth.value <= 768)
const globalStore = useGlobalStore()

const isDark = computed(() => globalStore.theme === 'dark')

defineProps({
	sidebarVisible: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits<{
	(e: 'open-right-drawer'): void
	(e: 'open-left-drawer'): void
}>()

function openLeftDrawer() {
	emit('open-left-drawer')
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.cwg-pc-header {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100vw;
	height: px2rpx(55);

	padding: 0 px2rpx(16);
	box-sizing: border-box;

	background-color: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid var(--bs-border-color);
}

/* 左右区域 */
.left,
.right {
	display: flex;
	align-items: center;
	z-index: 2;
}

/* 中间 Logo 真正居中 */
.center-logo {
	position: absolute;

	left: 50%;
	top: 50%;

	transform: translate(-50%, -50%);

	display: flex;
	align-items: center;
	justify-content: center;

	pointer-events: none;
}

/* Logo */
.logo-img {
	width: px2rpx(120);
	display: block;
}

/* 通知红点 */
.bell .dot {
	position: absolute;
	top: 0;
	right: -2px;

	width: 7px;
	height: 7px;

	background: #27ae60;
	border-radius: 50%;
	display: inline-block;
}

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

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