From a4692cde9f358f1e8add54baa8835dbc8d0b248a Mon Sep 17 00:00:00 2001 From: hrx <18603305412@163.com> Date: Wed, 24 Sep 2025 17:41:04 +0800 Subject: [PATCH] uptada --- f/web-kboss/src/router/index.js | 9 +- .../src/views/product/mainPage/index.vue | 136 ++++++++++++++---- 2 files changed, 111 insertions(+), 34 deletions(-) diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js index b8d18c5..14b428d 100644 --- a/f/web-kboss/src/router/index.js +++ b/f/web-kboss/src/router/index.js @@ -19,7 +19,7 @@ import ShowGpu from "@/views/product/productHome/capitalOnline/productItem/GpuPr import ShowEip from "@/views/product/productHome/capitalOnline/Net/Eip/showEip/index.vue"; import CreateEip from "@/views/product/productHome/capitalOnline/Net/Eip/createEip/index.vue"; import { getHomePath } from '@/views/setting/tools' -import { h } from "vue"; +// import { h } from "vue"; Vue.use(Router); // const originalPush = Router.prototype.push @@ -323,7 +323,7 @@ export const asyncRoutes = [ // meta: {title: "概览", fullPath: "/productHome", noCache: true} // }, - + // 官网 { path: getHomePath() == '/ncmatchHome/index' ? "/ncmatchHome" : "/homePage", component: () => import("@/views/homePage/indexLast.vue"), @@ -366,6 +366,7 @@ export const asyncRoutes = [ }] }, + // 咨询表单 { path: "/consultingMangement", name: 'ConsultingMangement', @@ -380,6 +381,7 @@ export const asyncRoutes = [ } ] }, + // 订单管理 { path: "/product", name: 'product', @@ -1849,7 +1851,8 @@ export const asyncRoutes = [ { path: "*", redirect: "/404", hidden: true, - },]; +},]; + const createRouter = () => new Router({ // mode: 'history', // require service support diff --git a/f/web-kboss/src/views/product/mainPage/index.vue b/f/web-kboss/src/views/product/mainPage/index.vue index 134d41d..fdca5aa 100644 --- a/f/web-kboss/src/views/product/mainPage/index.vue +++ b/f/web-kboss/src/views/product/mainPage/index.vue @@ -25,28 +25,31 @@
到期预警
- - - - - - - - - - + +
+ + + + + + + + + + +
@@ -159,44 +162,68 @@ export default Vue.extend({ .mainBox { background: #f5f7fa; width: 100%; - height: calc(100vh - 80px); + /* 使用视口高度减去一个固定值来适应不同屏幕 */ + height: calc(100vh - 100px); /* 假设顶部导航栏等占 100px */ display: flex; padding: 10px; + padding-bottom: 20px; box-sizing: border-box; gap: 20px; + /* 移除 overflow-x: auto; 防止出现横向滚动条 */ + overflow-y: auto; + /* 确保主容器不产生横向溢出 */ + overflow-x: hidden; } .leftBox { + /* 使用百分比宽度，更适应容器 */ width: 65%; display: flex; flex-direction: column; gap: 20px; + min-width: 0; /* 防止 flex 项目溢出 */ .section { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + /* 移除 flex-shrink: 0; 允许在必要时轻微收缩 */ } } .rightBox { + /* 使用百分比宽度 */ width: 35%; display: flex; flex-direction: column; gap: 20px; + min-width: 0; /* 防止 flex 项目溢出 */ + + .card { + background: white; + border-radius: 10px; + padding: 20px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + /* 移除 flex-shrink: 0; 允许在必要时轻微收缩 */ + } } -.card { - background: white; - border-radius: 10px; - padding: 20px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +/* 表格容器样式，用于处理内部可能的溢出 */ +.table-container { + width: 100%; + overflow-x: auto; /* 表格内部可能出现滚动条 */ + border-radius: 4px; /* 与表格圆角匹配 */ +} + +/* 表格样式微调，确保宽度100% */ +.table-container ::v-deep .el-table { + width: 100% !important; } .recUl { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 使用 auto-fit 和 minmax 实现更好的自适应 */ gap: 15px; list-style: none; padding: 0; @@ -213,6 +240,7 @@ export default Vue.extend({ flex-direction: column; align-items: center; justify-content: center; + min-width: 0; /* 防止内部内容撑开 */ i { font-size: 24px; @@ -229,7 +257,8 @@ export default Vue.extend({ } .overView { - grid-template-columns: repeat(2, 1fr); + /* 覆盖默认的 grid-template-columns */ + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 资源概览项更宽 */ li { cursor: default; @@ -244,16 +273,21 @@ export default Vue.extend({ display: flex; justify-content: space-between; width: 100%; + min-width: 0; /* 防止内部内容撑开 */ .title { font-size: 16px; color: #606266; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .number { font-size: 20px; font-weight: bold; color: #303133; + white-space: nowrap; } } } @@ -274,6 +308,7 @@ export default Vue.extend({ .userImg { margin-right: 20px; + flex-shrink: 0; /* 防止头像被压缩 */ .imgUser { width: 80px; @@ -290,22 +325,30 @@ export default Vue.extend({ } .userBox { - width: calc(100% - 100px); + flex: 1; /* 占据剩余空间 */ + min-width: 0; /* 防止内容溢出 */ h3 { margin-top: 0; margin-bottom: 15px; color: #303133; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .user-info { p { margin: 8px 0; color: #606266; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; i { margin-right: 8px; color: #409eff; + flex-shrink: 0; } } } @@ -317,6 +360,7 @@ export default Vue.extend({ display: flex; justify-content: space-between; align-items: center; + flex-wrap: wrap; /* 在小屏幕上换行 */ .balance { font-size: 28px; @@ -345,10 +389,14 @@ export default Vue.extend({ i { color: #e6a23c; margin-right: 10px; + flex-shrink: 0; } span { color: #606266; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } } @@ -367,8 +415,34 @@ export default Vue.extend({ .table-cell { padding: 8px 0 !important; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* 响应式调整 */ +@media (max-width: 768px) { + .mainBox { + flex-direction: column; + height: auto; + overflow-x: hidden; /* 小屏幕也隐藏横向滚动 */ + } + + .leftBox, .rightBox { + width: 100%; + flex: none; + } + + .recUl { + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + } + + .overView { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + } } +