From f9e8252790cfe546fb8336e871b9b8db90c3e619 Mon Sep 17 00:00:00 2001
From: Bang Hu <hu_bang@hotmail.com>
Date: 星期三, 03 九月 2025 12:36:24 +0800
Subject: [PATCH] 修改价格查看页面UI
---
components.d.ts | 6
src/views/productManage/productPriceViewer/index.vue | 830 +++++++++++++++++++++++++++++++++++++++++++++--------------
2 files changed, 639 insertions(+), 197 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index eca2ac9..0bbc0c1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,6 +12,7 @@
Editor: typeof import('./src/components/Editor/src/Editor.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
+ ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
@@ -26,11 +27,14 @@
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
+ ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
+ ElRadio: typeof import('element-plus/es')['ElRadio']
+ ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElStep: typeof import('element-plus/es')['ElStep']
@@ -38,6 +42,8 @@
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+ ElTabPane: typeof import('element-plus/es')['ElTabPane']
+ ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElUpload: typeof import('element-plus/es')['ElUpload']
FileInfoPreview: typeof import('./src/components/fileInfoPreview/index.vue')['default']
diff --git a/src/views/productManage/productPriceViewer/index.vue b/src/views/productManage/productPriceViewer/index.vue
index 71022ee..b1b9b8e 100644
--- a/src/views/productManage/productPriceViewer/index.vue
+++ b/src/views/productManage/productPriceViewer/index.vue
@@ -23,18 +23,19 @@
{{ group.productSuite }}
</th>
</tr>
- <tr class="sub-header">
- <th>閿�鍞舰寮�</th>
- <th
- v-for="priceItem in tabData"
- :key="priceItem.id"
- :colspan="getColspan(priceItem)"
- >
- {{ getSalesFormText(priceItem.salesForm) }}
- </th>
- </tr>
</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) }}
+ </td>
+ </tr>
<tr>
<td class="feature-label">瀹㈡埛瀵硅薄</td>
<td
@@ -106,16 +107,16 @@
</div>
<span class="price-value points">{{ formatNumber(priceItem.pointsAmount) }} / {{ getPriceUnitText(priceItem.priceUnit) }}</span>
</div>
- <div
- v-if="priceItem.priceSettings.includes('CURRENCY') && priceItem.currencyAmount > 0"
- class="price-item"
- >
- <div class="price-lable-icon">
- <el-icon class="price-icon currency"><Money /></el-icon>
- <span class="price-label">璐у竵</span>
- </div>
- <span class="price-value currency">{{ formatNumber(priceItem.currencyAmount) }} / {{ getPriceUnitText(priceItem.priceUnit) }}</span>
- </div>
+ <div
+ v-if="priceItem.priceSettings.includes('CURRENCY') && priceItem.currencyAmount > 0"
+ class="price-item"
+ >
+ <div class="price-lable-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>
+ </div>
<div
v-if="priceItem.priceSettings.includes('FREE')"
class="price-item"
@@ -191,12 +192,12 @@
<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>
@@ -209,12 +210,12 @@
</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>
@@ -248,6 +249,7 @@
:max="999"
:controls="true"
size="large"
+ class="quantity-input"
@change="(value) => handleQuantityChange(suite.id, value?value:1)"
/>
</td>
@@ -258,6 +260,7 @@
:max="100"
:controls="true"
size="large"
+ class="duration-input"
:disabled="suite.priceType === 'FREE'"
@change="(value) => handleDurationChange(suite.id, value?value:1)"
/>
@@ -1090,12 +1093,38 @@
</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;
- }
+ .pricing-tabs {
+ :deep(.el-tabs__header) {
+ margin-bottom: 2px;
+ }
/* 灞呬腑 tabs 瀵艰埅 */
:deep(.el-tabs__nav-wrap) {
display: flex;
@@ -1105,95 +1134,185 @@
margin: 0 auto;
border: none !important;
}
- /* 鍗＄墖鍨� tabs 缇庡寲涓哄渾瑙掕兌鍥婃晥鏋� */
- :deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
- border: none;
- }
- :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;
- color: #606266;
- background: #f6f8fb;
- transition: all .2s ease;
- }
- :deep(.el-tabs__item:hover) {
- color: #3a7afe;
- background: #eff4ff;
- }
- :deep(.el-tabs__item.is-active) {
- font-weight: 600;
- color: #fff;
- background: #3a7afe;
- box-shadow: 0 6px 16px rgba(58, 122, 254, 0.25);
- }
+ /* 鏅�� 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: 1px solid #e4e7ed;
+ border-radius: 6px;
+ margin: 0;
+ padding: 14px 24px;
+ color: #606266;
+ 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: #409eff;
+ background: #f5f7fa;
+ }
+ :deep(.el-tabs__item.is-active) {
+ font-weight: 600;
+ 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;
+ .pricing-table-wrapper {
+ overflow-x: auto;
+ background: #fff;
+ 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;
- background: #fff;
- border-radius: 10px;
-
- th, td {
- border-bottom: 1px solid #eef2f7;
- border-right: 1px solid #f3f5f7;
- padding: 12px 14px;
- text-align: center;
- vertical-align: middle;
- font-size: 14px;
- }
- tr th:first-child, td:first-child{
- font-weight: 700;
- color: #303133;
- }
-
- th {
- background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
- font-weight: 600;
- color: #303133;
- }
-
- .feature-column {
- width: 120px;
- background-color: #f5f7fa;
- }
-
- .sub-header {
- th {
- background-color: #f8fafc;
- font-weight: 500;
- font-size: 13px;
- color: #606266;
+ .pricing-table {
+ width: 100%;
+ border-collapse: collapse;
+ background: #fff;
+ border: 1px solid #e4e7ed;
+ border-radius: 8px;
+ overflow: visible;
+
+ // 缁熶竴鎵�鏈夊崟鍏冩牸鏍峰紡
+ th, td {
+ 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;
}
- }
-
- .feature-label {
- background-color: #f5f7fa;
- font-weight: 500;
- color: #606266;
- text-align: center;
- }
-
- .feature-value {
- color: #303133;
- background: #fff;
- }
+
+ // 绗竴鍒楁牱寮�
+ 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: 140px;
+ min-width: 140px;
+ }
+
+ // 瀛愯〃澶存牱寮忓凡绉婚櫎锛岄攢鍞舰寮忚鐜板湪鏄櫘閫氳
+
+ // 鍔熻兘鏍囩鏍峰紡
+ .feature-label {
+ 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;
- }
+ // 琛屾偓鍋滄晥鏋�
+ tbody tr:hover td {
+ 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 {
display: flex;
@@ -1211,49 +1330,64 @@
}
}
- .price-info {
- display: flex;
- flex-direction: column; /* 绔栨帓 */
- gap: 10px;
- align-items: center;
-
- .price-item {
- display: flex;
- align-items: flex-start;
- flex-direction: column;
- gap: 6px;
- padding: 10px 12px;
- border: 1px solid #f0f2f5;
- border-radius: 10px;
- background: #fff;
- box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
- .price-lable-icon{
+ .price-info {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+
+ .price-item {
display: flex;
+ align-items: center;
gap: 6px;
- }
- .price-label {
- font-size: 12px;
- color: #909399;
- }
-
- .price-value {
- font-weight: 600;
- font-size: 18px;
- &.points {
- color: #e7900d;
- }
-
- &.currency {
- color: #10b981;
- }
-
- &.free {
- color: #67c23a;
- }
- }
- .price-icon.points { color: #e6a23c; }
- .price-icon.currency { color: #16a34a; }
- }
+ padding: 6px 10px;
+ border: 1px solid #f0f2f5;
+ border-radius: 6px;
+ background: #fff;
+ box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
+
+ .price-lable-icon {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ }
+
+ .price-label {
+ font-size: 12px;
+ color: #909399;
+ white-space: nowrap;
+ }
+
+ .price-value {
+ font-weight: 600;
+ font-size: 16px;
+ white-space: nowrap;
+
+ &.points {
+ color: #e7900d;
+ }
+
+ &.currency {
+ color: #10b981;
+ }
+
+ &.free {
+ color: #67c23a;
+ }
+ }
+
+ .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 {
margin-top: 4px;
@@ -1280,7 +1414,11 @@
.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 {
@@ -1307,14 +1445,23 @@
}
.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 {
@@ -1333,6 +1480,8 @@
.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%; }
@@ -1341,63 +1490,255 @@
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;
- .spec-line-gg{
- display: flex;
- gap: 30px;
+.cell-spec .spec-line {
+ color: #606266;
+ font-size: 13px;
+ line-height: 18px;
+ padding: 2px 0;
+
+ // 瑙勬牸鍒椾腑鏁板�肩殑缁熶竴棰滆壊
+ .spec-value {
+ color: #409eff;
+ font-weight: 500;
}
}
-.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-spec-gg {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ .spec-line-gg{
+ display: flex;
+ 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;
+ 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;
+ }
}
}
@@ -1407,5 +1748,100 @@
.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>
--
Gitblit v1.8.0