|
|
@@ -1,100 +1,141 @@
|
|
|
<template>
|
|
|
- <uni-nav-bar :leftWidth="0" :rightWidth="0" :statusBar="true" :fixed="true" :height="55" :border="false">
|
|
|
+ <uni-nav-bar
|
|
|
+ :leftWidth="0"
|
|
|
+ :rightWidth="0"
|
|
|
+ :statusBar="true"
|
|
|
+ :fixed="true"
|
|
|
+ :height="55"
|
|
|
+ :border="false"
|
|
|
+ >
|
|
|
<view class="cwg-pc-header bg-body">
|
|
|
- <div class="left">
|
|
|
- <cwg-icon :name="!sidebarVisible ? 'crm-bars-staggered' : 'cwg-close'" color="#97A1C0"
|
|
|
- @click="openLeftDrawer" />
|
|
|
- </div>
|
|
|
- <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">
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <view class="left">
|
|
|
+ <cwg-icon
|
|
|
+ :name="!sidebarVisible ? 'crm-bars-staggered' : 'cwg-close'"
|
|
|
+ color="#97A1C0"
|
|
|
+ @click="openLeftDrawer"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 中间 Logo -->
|
|
|
+ <view class="center-logo">
|
|
|
+ <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 />
|
|
|
- </div>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</uni-nav-bar>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { computed } from 'vue'
|
|
|
import useGlobalStore from '@/stores/use-global-store'
|
|
|
+
|
|
|
const globalStore = useGlobalStore()
|
|
|
+
|
|
|
const isDark = computed(() => globalStore.theme === 'dark')
|
|
|
-const props = defineProps({
|
|
|
+
|
|
|
+defineProps({
|
|
|
sidebarVisible: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
- },
|
|
|
+ }
|
|
|
})
|
|
|
+
|
|
|
const emit = defineEmits<{
|
|
|
- (e: 'open-right-drawer'): void,
|
|
|
+ (e: 'open-right-drawer'): void
|
|
|
(e: 'open-left-drawer'): void
|
|
|
}>()
|
|
|
|
|
|
function openLeftDrawer() {
|
|
|
- emit('open-left-drawer');
|
|
|
+ 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);
|
|
|
- background-color: rgba(255, 255, 255, 0.9);
|
|
|
- border-bottom: 1px solid var(--bs-border-color);
|
|
|
+
|
|
|
padding: 0 px2rpx(16);
|
|
|
box-sizing: border-box;
|
|
|
- // position: fixed;
|
|
|
- // top: 0;
|
|
|
- // left: 0;
|
|
|
- // z-index: 101;
|
|
|
+
|
|
|
+ background-color: rgba(255, 255, 255, 0.9);
|
|
|
+ border-bottom: 1px solid var(--bs-border-color);
|
|
|
}
|
|
|
|
|
|
-.left {
|
|
|
+/* 左右区域 */
|
|
|
+.left,
|
|
|
+.right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ z-index: 2;
|
|
|
}
|
|
|
|
|
|
-.back-arrow {
|
|
|
- color: #e74c3c;
|
|
|
- font-size: 22px;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 16px;
|
|
|
-}
|
|
|
+/* 中间 Logo 真正居中 */
|
|
|
+.center-logo {
|
|
|
+ position: absolute;
|
|
|
|
|
|
-.center {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
|
|
-.right {
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
-.left-img {
|
|
|
- width: px2rpx(120);
|
|
|
-}
|
|
|
-
|
|
|
+/* 头像 */
|
|
|
.avatar .img {
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
@@ -102,10 +143,11 @@ function openLeftDrawer() {
|
|
|
background: #eee;
|
|
|
}
|
|
|
|
|
|
+/* Logo占位 */
|
|
|
.logo .img {
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
border-radius: 50%;
|
|
|
background: #fff;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
