refactor(frontend):优化页面布局和滚动条

- 在 App.vue 中添加全局滚动条样式- 调整 fund.vue 和 stock.vue 中固定元素的位置和宽度
- 在 App.vue 中使用 n-scrollbar 组件包裹 RouterView
This commit is contained in:
ArvinLovegood 2025-03-20 10:03:58 +08:00
parent e5c4076278
commit c28151320c
3 changed files with 28 additions and 14 deletions

View File

@ -8,7 +8,7 @@ import {
WindowSetPosition, WindowSetPosition,
WindowUnfullscreen WindowUnfullscreen
} from '../wailsjs/runtime' } from '../wailsjs/runtime'
import {h, ref} from "vue"; import {h, onMounted, ref} from "vue";
import { RouterLink } from 'vue-router' import { RouterLink } from 'vue-router'
import {darkTheme, NGradientText, NIcon, NText,} from 'naive-ui' import {darkTheme, NGradientText, NIcon, NText,} from 'naive-ui'
import { import {
@ -17,6 +17,8 @@ import {
ExpandOutline, ExpandOutline,
PowerOutline, LogoGithub, MoveOutline, WalletOutline, StarOutline, AlarmOutline, SparklesOutline, PowerOutline, LogoGithub, MoveOutline, WalletOutline, StarOutline, AlarmOutline, SparklesOutline,
} from '@vicons/ionicons5' } from '@vicons/ionicons5'
const contentStyle = ref("")
const content = ref('数据来源于网络,仅供参考;投资有风险,入市需谨慎') const content = ref('数据来源于网络,仅供参考;投资有风险,入市需谨慎')
const isFullscreen = ref(false) const isFullscreen = ref(false)
const activeKey = ref('stock') const activeKey = ref('stock')
@ -194,11 +196,16 @@ window.onerror = function (msg, source, lineno, colno, error) {
}); });
return true; return true;
}; };
onMounted(()=>{
contentStyle.value="max-height: calc(90vh);overflow: hidden"
})
</script> </script>
<template> <template>
<n-config-provider :theme="darkTheme" ref="containerRef"> <n-config-provider :theme="darkTheme" ref="containerRef" >
<n-message-provider > <n-message-provider >
<n-notification-provider> <n-notification-provider>
<n-modal-provider> <n-modal-provider>
@ -218,17 +225,25 @@ window.onerror = function (msg, source, lineno, colno, error) {
> >
<n-flex justify="center"> <n-flex justify="center">
<n-grid x-gap="12" :cols="1"> <n-grid x-gap="12" :cols="1">
<!--
<n-gi style="position: relative;top:1px;z-index: 19;width: 100%" v-if="telegraph.length>0"> <n-gi style="position: relative;top:1px;z-index: 19;width: 100%" v-if="telegraph.length>0">
<n-marquee :speed="120" >
<n-tag type="warning" v-for="item in telegraph" style="margin-right: 10px">
{{item}}
</n-tag>
<!-- <n-text type="warning"> {{telegraph[0]}}</n-text>-->
</n-marquee>
</n-gi>
<n-gi style="padding-bottom: 70px;padding-top: 5px">
<RouterView />
</n-gi> </n-gi>
-->
<n-gi>
<n-marquee :speed="100" style="position: relative;top:0;z-index: 19;width: 100%" v-if="telegraph.length>0">
<n-tag type="warning" v-for="item in telegraph" style="margin-right: 10px">
{{item}}
</n-tag>
<!-- <n-text type="warning"> {{telegraph[0]}}</n-text>-->
</n-marquee>
<n-scrollbar :style="contentStyle">
<RouterView />
</n-scrollbar>
</n-gi>
<n-gi style="position: fixed;bottom:0;z-index: 9;width: 100%"> <n-gi style="position: fixed;bottom:0;z-index: 9;width: 100%">
<n-card size="small"> <n-card size="small">
<n-menu style="font-size: 18px;" <n-menu style="font-size: 18px;"
@ -240,7 +255,6 @@ window.onerror = function (msg, source, lineno, colno, error) {
</n-card> </n-card>
</n-gi> </n-gi>
</n-grid> </n-grid>
</n-flex> </n-flex>
</n-watermark> </n-watermark>
</n-dialog-provider> </n-dialog-provider>

View File

@ -229,7 +229,7 @@ function blinkBorder(findId){
<n-image :src="data.fenshiURL" /> <n-image :src="data.fenshiURL" />
</n-modal> </n-modal>
<div style="position: fixed;bottom: 18px;right:0;z-index: 10;width: 480px"> <div style="position: fixed;bottom: 18px;right:2px;z-index: 10;width: 400px">
<n-input-group > <n-input-group >
<n-auto-complete v-model:value="data.name" <n-auto-complete v-model:value="data.name"
:input-props="{ :input-props="{

View File

@ -876,7 +876,7 @@ function share(code,name){
</n-card > </n-card >
</n-gi> </n-gi>
</n-grid> </n-grid>
<div style="position: fixed;bottom: 18px;right:0;z-index: 10;width: 460px"> <div style="position: fixed;bottom: 18px;right:2px;z-index: 10;width: 400px">
<!-- <n-card :bordered="false">--> <!-- <n-card :bordered="false">-->
<n-input-group > <n-input-group >
<!-- <n-button type="error" @click="addBTN=!addBTN" > <n-icon :component="Search"/>&nbsp;<n-text v-if="addBTN">隐藏</n-text></n-button>--> <!-- <n-button type="error" @click="addBTN=!addBTN" > <n-icon :component="Search"/>&nbsp;<n-text v-if="addBTN">隐藏</n-text></n-button>-->