zzb
/
csi-financial-front
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
傅光孟 2026-03-30 21:06:57 +08:00
parent 7d91c52204
commit c90c654dc7
2 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/views/example/index.vue
View File

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

4
src/views/pages/homeByLoginout/index.vue
View File

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