96 lines
2.2 KiB
CSS
96 lines
2.2 KiB
CSS
/* inventory-web/src/style.css */
|
||
|
||
/* 1. 保留原有的字体定义，确保文字清晰好看 */
|
||
:root {
|
||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||
line-height: 1.5;
|
||
font-weight: 400;
|
||
|
||
/* 颜色方案配置 */
|
||
color-scheme: light dark;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
|
||
/* 字体渲染优化 */
|
||
font-synthesis: none;
|
||
text-rendering: optimizeLegibility;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* 2. 针对亮色模式的颜色适配 (保留) */
|
||
@media (prefers-color-scheme: light) {
|
||
:root {
|
||
color: #213547;
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
|
||
/* 3. 链接的基本样式 (保留，但通常 RouterLink 会覆盖) */
|
||
a {
|
||
font-weight: 500;
|
||
color: #646cff;
|
||
text-decoration: inherit;
|
||
}
|
||
a:hover {
|
||
color: #535bf2;
|
||
}
|
||
|
||
/* -------------------------------------------------
|
||
【重要修改区域】
|
||
下面的代码是为了修复“无法铺满全屏”的问题
|
||
-------------------------------------------------
|
||
*/
|
||
|
||
/* 4. 全局盒模型修复：防止 padding 撑大元素 */
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 5. 重置 body 和 html */
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
height: 100%; /* 强制高度占满 */
|
||
|
||
/* !!! 删除了原有的 display: flex; place-items: center;
|
||
这是导致你页面缩在中间的罪魁祸首
|
||
*/
|
||
display: block;
|
||
|
||
overflow: hidden; /* 防止最外层出现双滚动条 */
|
||
}
|
||
|
||
/* 6. 重置 #app 挂载点 */
|
||
#app {
|
||
/* !!! 删除了 max-width: 1280px; padding: 2rem; text-align: center;
|
||
这是导致你页面两边留白、无法全屏的原因
|
||
*/
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 注意：原文件中关于 button, .card 的样式已被删除，
|
||
因为你的项目中引入了 Element Plus，
|
||
保留原生 button 样式会和 Element Plus 组件产生冲突。
|
||
*/
|
||
|
||
/* -------------------------------------------------
|
||
移动端/平板端触控优化
|
||
移除300ms延迟，防止双击放大，但保留双指缩放
|
||
-------------------------------------------------
|
||
*/
|
||
a,
|
||
button,
|
||
input,
|
||
textarea,
|
||
select,
|
||
.el-button,
|
||
.el-checkbox,
|
||
.el-switch,
|
||
.el-table__row,
|
||
.el-pagination {
|
||
touch-action: manipulation;
|
||
} |