| | |
| | | {{ group.productSuite }} |
| | | </th> |
| | | </tr> |
| | | <tr class="sub-header"> |
| | | <th>销售形式</th> |
| | | <th |
| | | </thead> |
| | | <tbody> |
| | | <tr> |
| | | <td class="feature-label">销售形式</td> |
| | | <td |
| | | v-for="priceItem in tabData" |
| | | :key="priceItem.id" |
| | | :colspan="getColspan(priceItem)" |
| | | class="feature-value" |
| | | > |
| | | {{ getSalesFormText(priceItem.salesForm) }} |
| | | </th> |
| | | </td> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | <tr> |
| | | <td class="feature-label">客户对象</td> |
| | | <td |
| | |
| | | class="price-item" |
| | | > |
| | | <div class="price-lable-icon"> |
| | | <el-icon class="price-icon currency"><Money /></el-icon> |
| | | <span class="price-icon currency">¥</span> |
| | | <span class="price-label">货币</span> |
| | | </div> |
| | | <span class="price-value currency">{{ formatNumber(priceItem.currencyAmount) }} / {{ getPriceUnitText(priceItem.priceUnit) }}</span> |
| | |
| | | <table class="suite-table"> |
| | | <thead> |
| | | <tr> |
| | | <th class="th-left">详情</th> |
| | | <th class="th-left">规格</th> |
| | | <th class="th-left">单价</th> |
| | | <th class="th-center">数量</th> |
| | | <th class="th-center">年限</th> |
| | | <th class="th-center">操作</th> |
| | | <th class="th-detail">详情</th> |
| | | <th class="th-spec">规格</th> |
| | | <th class="th-price">单价</th> |
| | | <th class="th-quantity">数量</th> |
| | | <th class="th-years">年限</th> |
| | | <th class="th-action">操作</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | |
| | | </td> |
| | | <td class="cell-spec cell-spec-gg"> |
| | | <div class="spec-line-gg"> |
| | | <div class="spec-line">销售形式:{{ getSalesFormText(suite.salesForm) }}</div> |
| | | <div class="spec-line">客户对象:{{ getCustomerObjectText(suite.customerObject) }}</div> |
| | | <div class="spec-line">销售形式:<span class="spec-value">{{ getSalesFormText(suite.salesForm) }}</span></div> |
| | | <div class="spec-line">客户对象:<span class="spec-value">{{ getCustomerObjectText(suite.customerObject) }}</span></div> |
| | | </div> |
| | | <div class="spec-line-gg"> |
| | | <div class="spec-line">账户数量:{{ suite.accountQuantityUnlimited ? '不限' : suite.accountQuantity }}</div> |
| | | <div class="spec-line">并发节点数:{{ suite.concurrentNodeQuantityUnlimited ? '不限' : suite.concurrentNodeQuantity }}</div> |
| | | <div class="spec-line">账户数量:<span class="spec-value">{{ suite.accountQuantityUnlimited ? '不限' : suite.accountQuantity }}</span></div> |
| | | <div class="spec-line">并发节点数:<span class="spec-value">{{ suite.concurrentNodeQuantityUnlimited ? '不限' : suite.concurrentNodeQuantity }}</span></div> |
| | | </div> |
| | | |
| | | </td> |
| | |
| | | :max="999" |
| | | :controls="true" |
| | | size="large" |
| | | class="quantity-input" |
| | | @change="(value) => handleQuantityChange(suite.id, value?value:1)" |
| | | /> |
| | | </td> |
| | |
| | | :max="100" |
| | | :controls="true" |
| | | size="large" |
| | | class="duration-input" |
| | | :disabled="suite.priceType === 'FREE'" |
| | | @change="(value) => handleDurationChange(suite.id, value?value:1)" |
| | | /> |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .default-main { |
| | | padding: 20px; |
| | | background-color: #f5f5f5; |
| | | min-height: 100vh; |
| | | position: relative; |
| | | z-index: 1; |
| | | } |
| | | |
| | | // 全局表头文字大小调整 |
| | | :deep(.el-table__header) { |
| | | th { |
| | | .cell { |
| | | font-size: 14px !important; |
| | | font-weight: 700; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .search-card { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .mt15 { |
| | | margin-top: 15px; |
| | | } |
| | | |
| | | .price-viewer-container { |
| | | .pricing-table-container { |
| | | .pricing-tabs { |
| | | :deep(.el-tabs__header) { |
| | | margin-bottom: 12px; |
| | | margin-bottom: 2px; |
| | | } |
| | | /* 居中 tabs 导航 */ |
| | | :deep(.el-tabs__nav-wrap) { |
| | |
| | | margin: 0 auto; |
| | | border: none !important; |
| | | } |
| | | /* 卡片型 tabs 美化为圆角胶囊效果 */ |
| | | /* 普通 tabs 样式 */ |
| | | :deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) { |
| | | border: none; |
| | | border-radius: 0; |
| | | background: transparent; |
| | | box-shadow: none; |
| | | display: flex; |
| | | gap: 8px; |
| | | } |
| | | :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) { |
| | | border: none; |
| | | } |
| | | :deep(.el-tabs__item) { |
| | | border-radius: 999px; |
| | | padding: 8px 18px; |
| | | margin: 0 6px; |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 6px; |
| | | margin: 0; |
| | | padding: 14px 24px; |
| | | color: #606266; |
| | | background: #f6f8fb; |
| | | background: #fff; |
| | | transition: all .2s ease; |
| | | font-size: 14px; |
| | | font-weight: 500; |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
| | | |
| | | &:hover { |
| | | border-color: #409eff; |
| | | box-shadow: 0 4px 8px rgba(64, 158, 255, 0.15); |
| | | } |
| | | } |
| | | :deep(.el-tabs__item:hover) { |
| | | color: #3a7afe; |
| | | background: #eff4ff; |
| | | color: #409eff; |
| | | background: #f5f7fa; |
| | | } |
| | | :deep(.el-tabs__item.is-active) { |
| | | font-weight: 600; |
| | | color: #fff; |
| | | background: #3a7afe; |
| | | box-shadow: 0 6px 16px rgba(58, 122, 254, 0.25); |
| | | color: #409eff; |
| | | background: #ecf5ff; |
| | | border-color: #409eff; |
| | | box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2); |
| | | |
| | | &::after { |
| | | content: ''; |
| | | position: absolute; |
| | | bottom: -1px; |
| | | left: 0; |
| | | right: 0; |
| | | height: 3px; |
| | | background: #409eff; |
| | | border-radius: 0 0 6px 6px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .pricing-table-wrapper { |
| | | overflow-x: auto; |
| | | background: #fff; |
| | | border-radius: 12px; |
| | | box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); |
| | | padding: 8px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
| | | padding: 0; |
| | | border: 1px solid #e4e7ed; |
| | | margin-top: 2px; |
| | | |
| | | .pricing-table { |
| | | width: 100%; |
| | | border-collapse: separate; |
| | | border-spacing: 0; |
| | | border-collapse: collapse; |
| | | background: #fff; |
| | | border-radius: 10px; |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 8px; |
| | | overflow: visible; |
| | | |
| | | // 统一所有单元格样式 |
| | | th, td { |
| | | border-bottom: 1px solid #eef2f7; |
| | | border-right: 1px solid #f3f5f7; |
| | | padding: 12px 14px; |
| | | border-top: 1px solid #e4e7ed !important; |
| | | border-bottom: 1px solid #e4e7ed !important; |
| | | border-left: none !important; |
| | | border-right: none !important; |
| | | padding: 8px 10px; |
| | | text-align: center; |
| | | vertical-align: middle; |
| | | font-size: 14px; |
| | | line-height: 1.5; |
| | | color: #303133; |
| | | background: #fff; |
| | | transition: all 0.2s ease; |
| | | } |
| | | |
| | | // 第一列样式 |
| | | tr th:first-child, td:first-child{ |
| | | font-weight: 700; |
| | | color: #303133; |
| | | background: #f8fafc; |
| | | text-align: left; |
| | | padding-left: 16px; |
| | | } |
| | | |
| | | // 表头样式 |
| | | th { |
| | | background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%); |
| | | font-weight: 600; |
| | | color: #303133; |
| | | border-bottom: 2px solid #e4e7ed !important; |
| | | border-left: none !important; |
| | | border-right: none !important; |
| | | position: relative; |
| | | } |
| | | |
| | | .feature-column { |
| | | width: 120px; |
| | | background-color: #f5f7fa; |
| | | width: 140px; |
| | | min-width: 140px; |
| | | } |
| | | |
| | | .sub-header { |
| | | th { |
| | | background-color: #f8fafc; |
| | | font-weight: 500; |
| | | font-size: 13px; |
| | | color: #606266; |
| | | } |
| | | } |
| | | // 子表头样式已移除,销售形式行现在是普通行 |
| | | |
| | | // 功能标签样式 |
| | | .feature-label { |
| | | background-color: #f5f7fa; |
| | | font-weight: 500; |
| | | color: #606266; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | color: #303133; |
| | | text-align: left; |
| | | background: #f8fafc; |
| | | border-right: none !important; |
| | | } |
| | | |
| | | // 功能值样式 |
| | | .feature-value { |
| | | color: #303133; |
| | | background: #fff; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | // 行悬停效果 |
| | | tbody tr:hover td { |
| | | background: #fafcff; |
| | | background: #f0f7ff; |
| | | border-color: #b3d8ff !important; |
| | | } |
| | | |
| | | // 偶数行背景 |
| | | tbody tr:nth-child(even) td { |
| | | background: #fafbfc; |
| | | } |
| | | |
| | | tbody tr:nth-child(even):hover td { |
| | | background: #e6f3ff; |
| | | } |
| | | |
| | | // 强制确保最后一行有完整的边框 |
| | | tbody tr:last-child td { |
| | | border-bottom: 1px solid #e4e7ed !important; |
| | | } |
| | | |
| | | // 强制确保所有单元格都有完整的边框 |
| | | tbody td { |
| | | border: 1px solid #e4e7ed !important; |
| | | } |
| | | |
| | | // 特别处理表格底部边框 |
| | | tbody tr:last-child { |
| | | border-bottom: 1px solid #e4e7ed !important; |
| | | } |
| | | |
| | | // 使用更具体的选择器确保边框显示 |
| | | .pricing-table tbody tr:last-child td { |
| | | border-bottom: 1px solid #e4e7ed !important; |
| | | } |
| | | |
| | | // 确保表格本身有完整的边框 |
| | | .pricing-table { |
| | | border: 1px solid #e4e7ed !important; |
| | | } |
| | | |
| | | // 特别处理套件选择行的边框 |
| | | .pricing-table tbody tr:last-child .feature-label, |
| | | .pricing-table tbody tr:last-child .feature-value { |
| | | border-bottom: 1px solid #e4e7ed !important; |
| | | } |
| | | |
| | | // 确保所有行都有完整的边框 |
| | | .pricing-table tbody tr td { |
| | | border-top: 1px solid #e4e7ed !important; |
| | | border-bottom: 1px solid #e4e7ed !important; |
| | | border-left: none !important; |
| | | border-right: none !important; |
| | | } |
| | | |
| | | .order-methods { |
| | |
| | | |
| | | .price-info { |
| | | display: flex; |
| | | flex-direction: column; /* 竖排 */ |
| | | gap: 10px; |
| | | flex-direction: column; |
| | | gap: 8px; |
| | | align-items: center; |
| | | |
| | | .price-item { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | gap: 6px; |
| | | padding: 10px 12px; |
| | | padding: 6px 10px; |
| | | border: 1px solid #f0f2f5; |
| | | border-radius: 10px; |
| | | border-radius: 6px; |
| | | background: #fff; |
| | | box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02); |
| | | |
| | | .price-lable-icon{ |
| | | display: flex; |
| | | gap: 6px; |
| | | align-items: center; |
| | | gap: 4px; |
| | | } |
| | | |
| | | .price-label { |
| | | font-size: 12px; |
| | | color: #909399; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .price-value { |
| | | font-weight: 600; |
| | | font-size: 18px; |
| | | font-size: 16px; |
| | | white-space: nowrap; |
| | | |
| | | &.points { |
| | | color: #e7900d; |
| | | } |
| | |
| | | color: #67c23a; |
| | | } |
| | | } |
| | | .price-icon.points { color: #e6a23c; } |
| | | .price-icon.currency { color: #16a34a; } |
| | | |
| | | .price-icon.points { |
| | | color: #e6a23c; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .price-icon.currency { |
| | | color: #16a34a; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | font-family: "Microsoft YaHei", "PingFang SC", sans-serif; |
| | | } |
| | | } |
| | | |
| | | .add-checkbox { |
| | |
| | | |
| | | .no-price-data { |
| | | text-align: center; |
| | | padding: 40px 0; |
| | | padding: 60px 0; |
| | | background: #fff; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | .price-value.agreement { |
| | |
| | | } |
| | | |
| | | .order-header-card { |
| | | :deep(.el-card__body) { padding: 10px; } |
| | | .basic-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 16px;} |
| | | .grid-item { font-size: 16px; color:#606266; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| | | .label { color:#606266; } |
| | | :deep(.el-card__body) { padding: 16px; } |
| | | .basic-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px;} |
| | | .grid-item { |
| | | font-size: 14px; |
| | | color:#606266; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | line-height: 1; |
| | | } |
| | | .label { color:#606266; font-weight: 500; } |
| | | .value { color:#303133; } |
| | | .value.strong { font-weight: 600; } |
| | | margin-bottom: 20px; |
| | | margin-bottom: 10px; |
| | | margin-top: 10px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
| | | } |
| | | |
| | | .points-info-card { |
| | |
| | | |
| | | .selected-suites-card { |
| | | :deep(.el-card__body) { padding: 8px; } |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
| | | } |
| | | |
| | | .suite-table-wrapper { overflow-x: auto; width: 100%; } |
| | |
| | | border-collapse: collapse; |
| | | background: #fff; |
| | | table-layout: fixed; |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); |
| | | } |
| | | .suite-table th, |
| | | .suite-table td { |
| | | border: 1px solid #e4e7ed; |
| | | padding: 6px 8px; |
| | | padding: 8px 10px; |
| | | vertical-align: middle; |
| | | font-size: 16px; |
| | | font-size: 14px; |
| | | line-height: 1.5; |
| | | color: #303133; |
| | | background: #fff; |
| | | transition: all 0.2s ease; |
| | | text-align: center; |
| | | } |
| | | .suite-table thead th { background: #f0f2f5; color: #303133; font-weight: 600; font-size: 16px;} |
| | | |
| | | .table-toolbar { display:flex; justify-content: space-between; align-items:center; padding: 4px 0 8px; } |
| | | .toolbar-left { display:flex; align-items:center; gap: 12px; width: 100%;justify-content: space-between;} |
| | | .toolbar-right { display:flex; align-items:center; gap: 12px; } |
| | | .summary-info { font-size: 14px; color: #606266; } |
| | | .summary-count { color: #409eff; font-weight: 600; } |
| | | .summary-points { color: #e6a23c; font-weight: 600; } |
| | | .suite-table thead th { |
| | | background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%); |
| | | color: #303133; |
| | | font-weight: 600; |
| | | font-size: 14px; |
| | | border-bottom: 2px solid #e4e7ed; |
| | | position: relative; |
| | | } |
| | | |
| | | .suite-table .th-left { text-align: center; width: 21%;} |
| | | .suite-table .th-center { text-align: center; } |
| | | .suite-table tbody tr:hover td { |
| | | background: #f0f7ff; |
| | | border-color: #b3d8ff; |
| | | } |
| | | |
| | | .suite-table tbody tr:nth-child(even) td { |
| | | background: #fafbfc; |
| | | } |
| | | |
| | | .suite-table tbody tr:nth-child(even):hover td { |
| | | background: #e6f3ff; |
| | | } |
| | | |
| | | // 确保套件表格最后一行有完整的边框 |
| | | .suite-table tbody tr:last-child td { |
| | | border-bottom: 1px solid #e4e7ed; |
| | | } |
| | | |
| | | // 确保套件表格所有单元格都有完整的边框 |
| | | .suite-table tbody td { |
| | | border: 1px solid #e4e7ed; |
| | | } |
| | | |
| | | .table-toolbar { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 12px 16px; |
| | | background: #f8fafc; |
| | | border-top: 1px solid #e4e7ed; |
| | | border-radius: 0 0 8px 8px; |
| | | } |
| | | .toolbar-left { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 16px; |
| | | width: 100%; |
| | | justify-content: space-between; |
| | | } |
| | | .toolbar-right { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | } |
| | | .summary-info { |
| | | font-size: 14px; |
| | | color: #606266; |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | .summary-count { |
| | | color: #409eff; |
| | | font-weight: 600; |
| | | background: #ecf5ff; |
| | | padding: 4px 8px; |
| | | border-radius: 4px; |
| | | } |
| | | .summary-points { |
| | | color: #e6a23c; |
| | | font-weight: 600; |
| | | background: #fdf6ec; |
| | | padding: 4px 8px; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .suite-table .th-detail { text-align: center; width: 25%;} |
| | | .suite-table .th-spec { text-align: center; width: 25%;} |
| | | .suite-table .th-price { text-align: center; width: 18%;} |
| | | .suite-table .th-quantity { text-align: center; width: 12%;} |
| | | .suite-table .th-years { text-align: center; width: 12%;} |
| | | .suite-table .th-action { text-align: center; width: 8%;} |
| | | |
| | | // 详情、规格、价格列的内容左对齐 |
| | | .suite-table .cell-detail, |
| | | .suite-table .cell-spec, |
| | | .suite-table .cell-price { |
| | | text-align: left !important; |
| | | } |
| | | |
| | | .cell-detail .detail-content { display: inline-flex; align-items: center; gap: 8px; } |
| | | .suite-name { font-weight: 600; color: #303133; } |
| | | .cell-spec .spec-line { color: #606266; font-size: 16px; line-height: 20px; } |
| | | .cell-spec-gg {display: flex; flex-direction: column; gap: 16px; |
| | | .cell-spec .spec-line { |
| | | color: #606266; |
| | | font-size: 13px; |
| | | line-height: 18px; |
| | | padding: 2px 0; |
| | | |
| | | // 规格列中数值的统一颜色 |
| | | .spec-value { |
| | | color: #409eff; |
| | | font-weight: 500; |
| | | } |
| | | } |
| | | .cell-spec-gg { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 12px; |
| | | |
| | | .spec-line-gg{ |
| | | display: flex; |
| | | gap: 30px; |
| | | gap: 24px; |
| | | } |
| | | } |
| | | .cell-price .price-inline { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } |
| | | .cell-price .price-tag.points { color: #E6A23C; font-weight: 600; } |
| | | .cell-price .price-tag.currency { color: #F56C6C; font-weight: 600; } |
| | | .cell-price .price-free { color: #67C23A; font-weight: 600; } |
| | | .cell-price .price-agreement { color: #409EFF; } |
| | | .cell-price .price-inline { |
| | | display: inline-flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | white-space: nowrap; |
| | | } |
| | | .cell-price .price-tag.points { |
| | | color: #E6A23C; |
| | | font-weight: 600; |
| | | background: #fdf6ec; |
| | | padding: 4px 8px; |
| | | border-radius: 4px; |
| | | } |
| | | .cell-price .price-tag.currency { |
| | | color: #F56C6C; |
| | | font-weight: 600; |
| | | background: #fef0f0; |
| | | padding: 4px 8px; |
| | | border-radius: 4px; |
| | | } |
| | | .cell-price .price-free { |
| | | color: #67C23A; |
| | | font-weight: 600; |
| | | background: #f0f9ff; |
| | | padding: 4px 8px; |
| | | border-radius: 4px; |
| | | } |
| | | .cell-price .price-agreement { |
| | | color: #409EFF; |
| | | background: #ecf5ff; |
| | | padding: 4px 8px; |
| | | border-radius: 4px; |
| | | } |
| | | .cell-summary .summary-item { font-size: 14px; color: #606266; line-height: 1.5; } |
| | | |
| | | .order-status-panel { |
| | | .steps-wrapper { padding: 6px 8px 0 8px; } |
| | | .result-text { text-align: center; margin: 18px 0 12px; font-size: 18px; color: #303133; } |
| | | .steps-wrapper { |
| | | padding: 20px 16px; |
| | | background: #fff; |
| | | border-radius: 8px 8px 0 0; |
| | | border-bottom: 1px solid #e4e7ed; |
| | | } |
| | | .result-text { |
| | | text-align: center; |
| | | margin: 24px 0 20px; |
| | | font-size: 18px; |
| | | color: #303133; |
| | | font-weight: 500; |
| | | } |
| | | .order-info-card { |
| | | :deep(.el-card__body) { padding: 0; } |
| | | border-radius: 0 0 8px 8px; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
| | | } |
| | | .order-info-title { |
| | | background: #f5f7fa; |
| | | padding: 12px 16px; |
| | | background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%); |
| | | padding: 16px 20px; |
| | | font-weight: 600; |
| | | border-bottom: 1px solid #ebeef5; |
| | | border-bottom: 1px solid #e4e7ed; |
| | | color: #303133; |
| | | } |
| | | .order-info-table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | |
| | | td { |
| | | padding: 12px 16px; |
| | | border-bottom: 1px solid #ebeef5; |
| | | padding: 10px 12px; |
| | | border-bottom: 1px solid #e4e7ed; |
| | | border-right: 1px solid #e4e7ed; |
| | | vertical-align: middle; |
| | | font-size: 14px; |
| | | line-height: 1.5; |
| | | color: #303133; |
| | | background: #fff; |
| | | transition: all 0.2s ease; |
| | | } |
| | | .label { width: 120px; color: #606266; } |
| | | .value { color: #303133; } |
| | | .link { text-align: right; } |
| | | |
| | | td:last-child { |
| | | border-right: none; |
| | | } |
| | | |
| | | tr:last-child td { |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .label { |
| | | width: 120px; |
| | | color: #606266; |
| | | font-weight: 500; |
| | | background: #f8fafc; |
| | | text-align: center; |
| | | } |
| | | |
| | | .value { |
| | | color: #303133; |
| | | background: #fff; |
| | | } |
| | | |
| | | .link { |
| | | text-align: right; |
| | | background: #fff; |
| | | } |
| | | |
| | | tr:hover td { |
| | | background: #f0f7ff; |
| | | border-color: #b3d8ff; |
| | | } |
| | | |
| | | tr:nth-child(even) td { |
| | | background: #fafbfc; |
| | | } |
| | | |
| | | tr:nth-child(even):hover td { |
| | | background: #e6f3ff; |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .order-summary .summary-value.highlight{ color:#409eff; } |
| | | .order-summary .summary-value.total{ color:#e6a23c; } |
| | | .order-summary .summary-value.currency{ color:#f56c6c; } |
| | | .footer { display: flex; flex-direction: row-reverse; margin-right: 50px; gap: 50px; margin-top: 20px;} |
| | | .footer { |
| | | display: flex; |
| | | flex-direction: row-reverse; |
| | | margin-right: 50px; |
| | | gap: 20px; |
| | | margin-top: 10px; |
| | | padding: 10px 0; |
| | | |
| | | .el-button { |
| | | border-radius: 6px; |
| | | font-weight: 500; |
| | | padding: 12px 24px; |
| | | |
| | | &.el-button--primary { |
| | | background: linear-gradient(135deg, #409eff 0%, #3a7afe 100%); |
| | | border: none; |
| | | box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3); |
| | | |
| | | &:hover { |
| | | background: linear-gradient(135deg, #66b1ff 0%, #5a8cff 100%); |
| | | box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4); |
| | | } |
| | | } |
| | | |
| | | &:not(.el-button--primary) { |
| | | border: 1px solid #dcdfe6; |
| | | background: #fff; |
| | | |
| | | &:hover { |
| | | border-color: #409eff; |
| | | color: #409eff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 确保页面整体层级正确 |
| | | :deep(.el-card) { |
| | | position: relative; |
| | | z-index: 1; |
| | | } |
| | | |
| | | // 修复可能的全局z-index冲突 |
| | | :deep(.el-table__body-wrapper) { |
| | | z-index: 1 !important; |
| | | } |
| | | |
| | | :deep(.el-table__header-wrapper) { |
| | | z-index: 1 !important; |
| | | } |
| | | |
| | | // 数量和年限输入框样式 |
| | | .quantity-input, |
| | | .duration-input { |
| | | width: 100px !important; |
| | | height: 35px !important; |
| | | |
| | | :deep(.el-input__wrapper) { |
| | | padding: 0 8px !important; |
| | | } |
| | | |
| | | :deep(.el-input__inner) { |
| | | width: 30px !important; |
| | | text-align: center !important; |
| | | min-width: 30px !important; |
| | | max-width: 30px !important; |
| | | } |
| | | |
| | | :deep(.el-input-number__decrease), |
| | | :deep(.el-input-number__increase) { |
| | | width: 32px !important; |
| | | height: 32px !important; |
| | | } |
| | | } |
| | | |
| | | // 使用更强的选择器确保样式生效 |
| | | .suite-table .quantity-input, |
| | | .suite-table .duration-input { |
| | | :deep(.el-input__inner) { |
| | | width: 40px !important; |
| | | text-align: center !important; |
| | | min-width: 40px !important; |
| | | max-width: 40px !important; |
| | | box-sizing: border-box !important; |
| | | } |
| | | } |
| | | |
| | | // 全局样式覆盖,确保输入框内部宽度生效 |
| | | :deep(.el-input-number.quantity-input .el-input__inner), |
| | | :deep(.el-input-number.duration-input .el-input__inner) { |
| | | width: 40px !important; |
| | | text-align: center !important; |
| | | min-width: 40px !important; |
| | | max-width: 40px !important; |
| | | box-sizing: border-box !important; |
| | | } |
| | | </style> |