a254aae503
将整套 web 源码纳入仓库，并为 web/node_modules、构建产物及本地环境文件配置 .gitignore，同时移除占位用的 assets/.gitkeep。 Co-authored-by: Cursor <cursoragent@cursor.com>
128 lines
3.1 KiB
Vue
128 lines
3.1 KiB
Vue
<template>
|
||
<div class="app-wrapper">
|
||
<Toast position="top-right" />
|
||
<router-view />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import Toast from 'primevue/toast'
|
||
</script>
|
||
|
||
<style>
|
||
/* 1. 清零并锁死 body 级别滚动 */
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#app {
|
||
height: 100%;
|
||
}
|
||
|
||
|
||
.app-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
.layout {
|
||
display: flex;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
padding: 1rem;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
/* 全局设置所有Button为橙色 - 必须在PrimeVue样式之后 */
|
||
/* 覆盖所有可能的按钮变体 */
|
||
button.p-button,
|
||
.p-button,
|
||
button.p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link),
|
||
.p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link) {
|
||
background-color: #3067E5 !important;
|
||
border-color: #3067E5 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
button.p-button:hover,
|
||
.p-button:hover,
|
||
button.p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link):hover,
|
||
.p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link):hover {
|
||
background-color: #3067E5 !important;
|
||
border-color: #3067E5 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
button.p-button:focus,
|
||
.p-button:focus,
|
||
button.p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link):focus,
|
||
.p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link):focus {
|
||
background-color: #3067E5 !important;
|
||
border-color: #3067E5 !important;
|
||
box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.5) !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
button.p-button:active,
|
||
.p-button:active,
|
||
button.p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link):active,
|
||
.p-button:not(.p-button-text):not(.p-button-outlined):not(.p-button-link):active {
|
||
background-color: #f57c00 !important;
|
||
border-color: #f57c00 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* 主要按钮（p-button-primary） */
|
||
button.p-button.p-button-primary,
|
||
.p-button.p-button-primary {
|
||
background-color: #3067E5 !important;
|
||
border-color: #3067E5 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
button.p-button.p-button-primary:hover,
|
||
.p-button.p-button-primary:hover {
|
||
background-color: #3067E5 !important;
|
||
border-color: #3067E5 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* 危险按钮也使用橙色系（深橙色） */
|
||
button.p-button.p-button-danger,
|
||
.p-button.p-button-danger {
|
||
background-color: #ff5722 !important;
|
||
border-color: #ff5722 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
button.p-button.p-button-danger:hover,
|
||
.p-button.p-button-danger:hover {
|
||
background-color: #f4511e !important;
|
||
border-color: #f4511e !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* 文本按钮的悬停效果也使用橙色 */
|
||
button.p-button.p-button-text:hover,
|
||
.p-button.p-button-text:hover {
|
||
background-color: rgba(255, 152, 0, 0.1) !important;
|
||
color: #3067E5 !important;
|
||
}
|
||
|
||
button.p-button.p-button-text:focus,
|
||
.p-button.p-button-text:focus {
|
||
background-color: rgba(255, 152, 0, 0.1) !important;
|
||
color: #3067E5 !important;
|
||
}
|
||
</style> |