uptada

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

f/web-kboss/src/views/product/mainPage/index.vue

@@ -25,6 +25,8 @@
 
       <div class="section">
         <div class="bigTitle">到期预警</div>
+        <!-- 表格容器用于控制宽度和溢出 -->
+        <div class="table-container">
           <el-table
             height="250px"
             border
@@ -32,16 +34,16 @@
             style="width: 100%"
             header-cell-class-name="table-header"
             cell-class-name="table-cell">
-          <el-table-column prop="name" label="名称" width="180"></el-table-column>
+            <el-table-column prop="name" label="名称" min-width="120"></el-table-column>
-          <el-table-column prop="instanceid" label="资源id" width="180"></el-table-column>
+            <el-table-column prop="instanceid" label="资源id" min-width="120"></el-table-column>
-          <el-table-column prop="status" label="状态">
+            <el-table-column prop="status" label="状态" min-width="80">
               <template slot-scope="scope">
                 <el-tag :type="scope.row.status === '即将到期' ? 'warning' : 'danger'">
                   {{ scope.row.status }}
                 </el-tag>
               </template>
             </el-table-column>
-          <el-table-column prop="days" label="剩余天数">
+            <el-table-column prop="days" label="剩余天数" min-width="80">
               <template slot-scope="scope">
                 <span :class="scope.row.days < 3 ? 'critical' : ''">{{ scope.row.days }}天</span>
               </template>
@@ -49,6 +51,7 @@
           </el-table>
         </div>
       </div>
+    </div>
 
     <div class="rightBox">
       <!-- 用户信息 -->
@@ -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 {
+  .card {
     background: white;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    /* 移除 flex-shrink: 0; 允许在必要时轻微收缩 */
+  }
+}
+
+/* 表格容器样式，用于处理内部可能的溢出 */
+.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));
+  }
 }
 </style>
 
 
 
+