KCGL/inventory-web/src/style.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 组件产生冲突。
*/