feat(products): 实现大公司品牌级产品独立页，包含矩阵功能版本定价与演示
这个提交包含在：
wikiboss
@@ -2173,3 +2173,339 @@ img {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
产品独立页专有样式 (Products Page Modern Style)
|
||||
========================================================================== */
|
||||
|
||||
/* 产品矩阵全景板块 */
|
||||
.nhc-product-matrix-section {
|
||||
padding: 90px 0;
|
||||
}
|
||||
|
||||
.nhc-product-matrix-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.nhc-product-full-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 40px;
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nhc-product-full-card:hover {
|
||||
border-color: rgba(37, 99, 235, 0.35);
|
||||
box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.nhc-product-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.nhc-product-icon-wrap {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.nhc-product-card-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.nhc-product-card-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.nhc-product-module-list {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 28px;
|
||||
border-top: 1px dashed #E2E8F0;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.nhc-product-module-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nhc-product-module-item svg {
|
||||
color: var(--primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nhc-product-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #F1F5F9;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.nhc-product-deploy-type {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* 版本选型对比表格 */
|
||||
.nhc-editions-section {
|
||||
padding: 90px 0;
|
||||
background-color: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.nhc-table-container {
|
||||
overflow-x: auto;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.nhc-editions-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nhc-editions-table th,
|
||||
.nhc-editions-table td {
|
||||
padding: 18px 24px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-right: 1px solid #F1F5F9;
|
||||
}
|
||||
|
||||
.nhc-editions-table th:last-child,
|
||||
.nhc-editions-table td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nhc-editions-table thead th {
|
||||
background: #F8FAFC;
|
||||
font-family: var(--font-serif);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nhc-editions-table thead th.featured {
|
||||
background: #EFF6FF;
|
||||
color: var(--primary);
|
||||
border-top: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.nhc-editions-table tbody tr:hover td {
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
.nhc-editions-table tbody tr:hover td.featured {
|
||||
background: #F0F7FF;
|
||||
}
|
||||
|
||||
.nhc-editions-table td.featured {
|
||||
background: #F8FAFC;
|
||||
}
|
||||
|
||||
.nhc-check-yes {
|
||||
color: #10B981;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nhc-check-no {
|
||||
color: #CBD5E1;
|
||||
}
|
||||
|
||||
/* 部署模式与商业授权板块 */
|
||||
.nhc-pricing-section {
|
||||
padding: 90px 0;
|
||||
}
|
||||
|
||||
.nhc-pricing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 32px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nhc-pricing-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 40px;
|
||||
box-shadow: var(--shadow-subtle);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nhc-pricing-card.featured {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 12px 30px -8px rgba(37, 99, 235, 0.15);
|
||||
}
|
||||
|
||||
.nhc-pricing-card.featured::before {
|
||||
content: "推荐方案";
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 24px;
|
||||
background: var(--primary);
|
||||
color: #FFFFFF;
|
||||
font-size: 11px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nhc-pricing-header {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #F1F5F9;
|
||||
}
|
||||
|
||||
.nhc-pricing-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.nhc-pricing-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.nhc-pricing-features {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nhc-pricing-feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nhc-pricing-feature-item svg {
|
||||
color: var(--primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 预约演示沙箱板块 */
|
||||
.nhc-demo-section {
|
||||
padding: 80px 0;
|
||||
background-color: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.nhc-demo-box {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 48px;
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
box-shadow: var(--shadow-subtle);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nhc-demo-info h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.nhc-demo-info p {
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.nhc-demo-badges {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nhc-demo-badge-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nhc-demo-badge-item svg {
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
/* 响应式微调 */
|
||||
@media (max-width: 1024px) {
|
||||
.nhc-product-matrix-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.nhc-pricing-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.nhc-demo-box {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nhc-product-full-card {
|
||||
padding: 24px;
|
||||
}
|
||||
.nhc-product-module-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.nhc-demo-box {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户