mirror of
https://github.com/ArvinLovegood/go-stock.git
synced 2025-07-19 00:00:09 +08:00
refactor(frontend):优化页面布局和滚动条
- 在 App.vue 中添加全局滚动条样式- 调整 fund.vue 和 stock.vue 中固定元素的位置和宽度 - 在 App.vue 中使用 n-scrollbar 组件包裹 RouterView
This commit is contained in:
parent
e5c4076278
commit
c28151320c
@ -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>
|
||||||
|
@ -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="{
|
||||||
|
@ -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"/> <n-text v-if="addBTN">隐藏</n-text></n-button>-->
|
<!-- <n-button type="error" @click="addBTN=!addBTN" > <n-icon :component="Search"/> <n-text v-if="addBTN">隐藏</n-text></n-button>-->
|
||||||
|
Loading…
x
Reference in New Issue
Block a user