feat: 调整顶部菜单样式以优化用户界面和提升可读性

src/views/example/index.vue

@@ -8,14 +8,14 @@
 			</router-link>
 
 			<div class="top_menu">
-				<div class="item" @click="goLogout">
+				<div :class="['item', { 'login-item': isLogin }]" @click="goLogout">
 					<text>产品</text>
 				</div>
-				<div class="item">
+				<div :class="['item active', { 'login-item': isLogin }]">
 					<text>产品文档</text>
-					<div class="bottom_line"></div>
+					<div v-if="!isLogin" class="bottom_line"></div>
 				</div>
-				<div v-if="!Session.get('token')" class="top_right" @click="goLogin">
+				<div v-if="!isLogin" class="top_right" @click="goLogin">
 					<text>登录</text>
 				</div>
 			</div>
@@ -48,7 +48,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import logo_hol from '/@/assets/logo_hol.png';
 import example1 from '/@/assets/images/example_1.png';
 import example2 from '/@/assets/images/example_2.png';
@@ -128,6 +128,10 @@ const vidoeUrl = ref();
 const title = ref('');
 const poster = ref('');
 
+const isLogin = computed(() => {
+	return !!Session.get('token');
+});
+
 const open = (item) => {
 	if (item.type === 'pdf') {
 		openPdf(item);
@@ -217,7 +221,7 @@ function goLogin() {
 	width: 100%;
 	height: 100vh;
 	overflow: auto !important;
-	background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 60px;
+	background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 56px;
 	background-size: 100% auto;
 }
 
@@ -226,8 +230,8 @@ function goLogin() {
 	justify-content: space-between;
 	align-items: center;
 	background-color: #fff;
-	height: 64px;
-	padding-left: 32px;
+	height: 56px;
+	padding-left: 20px;
 	border-bottom: 1px solid var(--next-border-color-light);
 
 	.home-link {
@@ -369,6 +373,7 @@ function goLogin() {
 .top_menu {
 	height: 100%;
 	display: flex;
+	align-items: center;
 
 	.item {
 		height: 100%;
@@ -379,6 +384,29 @@ function goLogin() {
 		margin-right: 50px;
 	}
 
+	.login-item {
+		display: flex;
+		text-align: center;
+		justify-content: center;
+		margin-right: 20px;
+		text {
+			font-size: 16px;
+			color: #000000;
+			letter-spacing: 0;
+			line-height: 24px;
+			font-weight: 400;
+			cursor: pointer;
+			min-width: 60px;
+			white-space: nowrap;
+		}
+
+		&.active {
+			text {
+				color: #007aff;
+			}
+		}
+	}
+
 	.bottom_line {
 		width: 100%;
 		height: 4px;
@@ -392,7 +420,6 @@ function goLogin() {
 		text-align: center;
 		justify-content: center;
 		align-items: center;
-
 		width: 86px;
 		height: 100%;
 		background: #0779ff;

src/views/pages/homeByLoginout/index.vue

@@ -260,8 +260,8 @@ onUnmounted(() => {
 	display: flex;
 	align-items: center;
 	background-color: #fff;
-	height: 64px;
-	padding: 0 0 0 32px;
+	height: 56px;
+	padding: 0 0 0 20px;
 	border-bottom: 1px solid var(--next-border-color-light);
 	justify-content: space-between;