uptada
This commit is contained in:
parent
9d7612c647
commit
a4692cde9f
@ -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
|
||||
|
||||
@ -25,28 +25,31 @@
|
||||
|
||||
<div class="section">
|
||||
<div class="bigTitle">到期预警</div>
|
||||
<el-table
|
||||
height="250px"
|
||||
border
|
||||
:data="tableData"
|
||||
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="instanceid" label="资源id" width="180"></el-table-column>
|
||||
<el-table-column prop="status" label="状态">
|
||||
<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="剩余天数">
|
||||
<template slot-scope="scope">
|
||||
<span :class="scope.row.days < 3 ? 'critical' : ''">{{ scope.row.days }}天</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 表格容器用于控制宽度和溢出 -->
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
height="250px"
|
||||
border
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table-header"
|
||||
cell-class-name="table-cell">
|
||||
<el-table-column prop="name" label="名称" min-width="120"></el-table-column>
|
||||
<el-table-column prop="instanceid" label="资源id" min-width="120"></el-table-column>
|
||||
<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="剩余天数" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<span :class="scope.row.days < 3 ? 'critical' : ''">{{ scope.row.days }}天</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user