|
|
@@ -3,7 +3,7 @@
|
|
|
|
|
|
/* 项目详情容器 */
|
|
|
.project-detail-container {
|
|
|
- padding: $ios-spacing-lg; // 使用统一的间距变量
|
|
|
+ padding: 2%; // 使用百分比单位
|
|
|
background-color: #f5f7fa;
|
|
|
color: #333;
|
|
|
min-height: 100vh;
|
|
|
@@ -14,10 +14,10 @@
|
|
|
/* 四大板块按钮组 - 位于项目标题区域正下方 */
|
|
|
.sections-toolbar-header {
|
|
|
display: flex;
|
|
|
- gap: 12px;
|
|
|
+ gap: 1%; // 使用百分比间距
|
|
|
width: 100%;
|
|
|
- margin: 20px 0 24px 0;
|
|
|
- padding: 0 24px; /* 与项目详情容器保持一致的左右边距 */
|
|
|
+ margin: 1.5% 0 2% 0; // 使用百分比边距
|
|
|
+ padding: 0 2%; /* 与项目详情容器保持一致的左右边距 */
|
|
|
|
|
|
.section-btn {
|
|
|
flex: 1;
|
|
|
@@ -25,14 +25,14 @@
|
|
|
border: 1px solid $ios-border;
|
|
|
background: $ios-background;
|
|
|
color: $ios-text-primary;
|
|
|
- padding: 12px 16px;
|
|
|
+ padding: 0.9rem 1.2rem; // 使用rem单位
|
|
|
border-radius: $ios-radius-md;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 0.9rem; // 使用rem单位
|
|
|
font-weight: 500;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.2s ease;
|
|
|
text-align: center;
|
|
|
- min-height: 44px;
|
|
|
+ min-height: 3rem; // 使用rem单位
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
@@ -44,22 +44,22 @@
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
- transform: translateY(-1px);
|
|
|
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ transform: translateY(-0.08rem); // 使用rem单位
|
|
|
+ box-shadow: 0 0.3rem 0.9rem rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
&.completed {
|
|
|
background: linear-gradient(135deg, #e6f7e6 0%, #d4edda 100%);
|
|
|
color: $ios-success;
|
|
|
border-color: $ios-success;
|
|
|
- box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
|
|
|
+ box-shadow: 0 0.15rem 0.6rem rgba(40, 167, 69, 0.15);
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
background: linear-gradient(135deg, #e8f0fe 0%, #cce7ff 100%);
|
|
|
color: $ios-primary;
|
|
|
border-color: $ios-primary;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
|
|
|
+ box-shadow: 0 0.15rem 0.6rem rgba(0, 122, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
&.pending {
|
|
|
@@ -337,6 +337,498 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/* 方案确认阶段样式 */
|
|
|
+.proposal-confirm-section {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 24px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .section-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d1d1f;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '✓';
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
|
|
|
+ color: white;
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 14px;
|
|
|
+ box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-indicator {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ background: rgba(52, 199, 89, 0.1);
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid rgba(52, 199, 89, 0.2);
|
|
|
+
|
|
|
+ .progress-text {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #34c759;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '✓';
|
|
|
+ font-size: 12px;
|
|
|
+ color: #34c759;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .requirement-info-display {
|
|
|
+ .info-header {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ h5 {
|
|
|
+ margin: 0 0 4px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d1d1f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-subtitle {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #8e8e93;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); // 使用百分比替代固定像素
|
|
|
+ gap: 1.5%; // 使用百分比间距
|
|
|
+
|
|
|
+ // 色调和材质并排布局
|
|
|
+ .color-material-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 1.5%; // 使用百分比间距
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 1.2%; // 移动端使用更小的百分比间距
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-item,
|
|
|
+ .material-item {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0; // 防止内容溢出
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 空间结构和材质权重并排布局
|
|
|
+ .structure-weight-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 1.5%; // 使用百分比间距
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 1.2%; // 移动端使用更小的百分比间距
|
|
|
+ }
|
|
|
+
|
|
|
+ .structure-item,
|
|
|
+ .weight-item {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0; // 防止内容溢出
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 预设氛围和小图时间并排布局
|
|
|
+ .atmosphere-time-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 1.5%; // 使用百分比间距
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 1.2%; // 移动端使用更小的百分比间距
|
|
|
+ }
|
|
|
+
|
|
|
+ .atmosphere-item,
|
|
|
+ .time-item {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0; // 防止内容溢出
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ background: rgba(0, 122, 255, 0.02);
|
|
|
+ border: 1px solid rgba(0, 122, 255, 0.08);
|
|
|
+ border-radius: 0.8rem; // 使用rem单位
|
|
|
+ padding: 1.2rem; // 使用rem单位
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-0.15rem); // 使用rem单位
|
|
|
+ box-shadow: 0 0.3rem 1.2rem rgba(0, 122, 255, 0.1);
|
|
|
+ border-color: rgba(0, 122, 255, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 0.6rem; // 使用rem单位
|
|
|
+ margin-bottom: 0.9rem; // 使用rem单位
|
|
|
+ font-size: 0.9rem; // 使用rem单位
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d1d1f;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ width: 1rem; // 使用rem单位
|
|
|
+ height: 16px;
|
|
|
+ color: #007aff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-content {
|
|
|
+ .info-value {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1d1d1f;
|
|
|
+ font-weight: 500;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-preview {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .material-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 6px;
|
|
|
+
|
|
|
+ .material-tag {
|
|
|
+ background: rgba(52, 199, 89, 0.1);
|
|
|
+ color: #34c759;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .structure-details {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 4px;
|
|
|
+
|
|
|
+ .structure-item {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #666;
|
|
|
+ padding: 2px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .weight-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ .weight-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6px 12px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
+
|
|
|
+ .weight-label {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #666;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .weight-value {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #007aff;
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(0, 122, 255, 0.1);
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .atmosphere-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ .atmosphere-name {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1d1d1f;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-temp {
|
|
|
+ font-size: 11px;
|
|
|
+ background: rgba(255, 149, 0, 0.1);
|
|
|
+ color: #ff9500;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-estimate {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #007aff;
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(0, 122, 255, 0.1);
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .requirement-pending {
|
|
|
+ text-align: center;
|
|
|
+ padding: 40px 20px;
|
|
|
+ background: rgba(255, 149, 0, 0.02);
|
|
|
+ border: 2px dashed rgba(255, 149, 0, 0.2);
|
|
|
+ border-radius: 12px;
|
|
|
+
|
|
|
+ .pending-icon {
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ color: rgba(255, 149, 0, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ h5 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d1d1f;
|
|
|
+ margin: 0 0 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8e8e93;
|
|
|
+ line-height: 1.4;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 方案确认阶段样式 */
|
|
|
+.proposal-confirm-stage {
|
|
|
+ .requirement-summary-card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 24px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+
|
|
|
+ .header-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+
|
|
|
+ .status-icon {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
|
|
|
+ color: white;
|
|
|
+ box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-text {
|
|
|
+ h3 {
|
|
|
+ margin: 0 0 4px 0;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d1d1f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .subtitle {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #8e8e93;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-indicator {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ background: rgba(52, 199, 89, 0.1);
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid rgba(52, 199, 89, 0.2);
|
|
|
+
|
|
|
+ .progress-text {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #34c759;
|
|
|
+ }
|
|
|
+
|
|
|
+ .check-icon {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #34c759;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .requirement-info-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
|
+ gap: 16px;
|
|
|
+
|
|
|
+ .info-section {
|
|
|
+ background: rgba(0, 122, 255, 0.02);
|
|
|
+ border: 1px solid rgba(0, 122, 255, 0.08);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 16px;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 16px rgba(0, 122, 255, 0.1);
|
|
|
+ border-color: rgba(0, 122, 255, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ .title-icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ background: #007aff;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-text {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d1d1f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-content {
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-label {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #666;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #1d1d1f;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: right;
|
|
|
+ max-width: 60%;
|
|
|
+ word-break: break-word;
|
|
|
+
|
|
|
+ &.highlight {
|
|
|
+ color: #007aff;
|
|
|
+ background: rgba(0, 122, 255, 0.1);
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .completion-placeholder {
|
|
|
+ text-align: center;
|
|
|
+ padding: 40px 20px;
|
|
|
+ background: rgba(255, 149, 0, 0.02);
|
|
|
+ border: 2px dashed rgba(255, 149, 0, 0.2);
|
|
|
+ border-radius: 12px;
|
|
|
+
|
|
|
+ .placeholder-icon {
|
|
|
+ font-size: 48px;
|
|
|
+ color: rgba(255, 149, 0, 0.4);
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .placeholder-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d1d1f;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .placeholder-subtitle {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8e8e93;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
@keyframes modalFadeIn {
|
|
|
from {
|
|
|
opacity: 0;
|
|
|
@@ -828,9 +1320,9 @@
|
|
|
/* 主内容布局 */
|
|
|
.main-content-layout {
|
|
|
display: grid;
|
|
|
- grid-template-columns: 1fr 350px; // 调整为两列：主内容区和右侧栏
|
|
|
- gap: $ios-spacing-lg;
|
|
|
- max-width: calc(100vw - 40px);
|
|
|
+ grid-template-columns: 1fr 28%; // 使用百分比：主内容区和右侧栏(28%)
|
|
|
+ gap: 2%;
|
|
|
+ max-width: 96vw; // 使用视口单位，留出4%边距
|
|
|
margin: 0 auto;
|
|
|
overflow: visible;
|
|
|
align-items: start;
|
|
|
@@ -848,46 +1340,46 @@
|
|
|
|
|
|
.right-column {
|
|
|
padding: 0;
|
|
|
- min-width: 300px;
|
|
|
- max-width: 400px;
|
|
|
+ min-width: 25%; // 使用百分比最小宽度
|
|
|
+ max-width: 32%; // 使用百分比最大宽度
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 响应式设计优化
|
|
|
@media (max-width: 1400px) {
|
|
|
.project-detail-container {
|
|
|
- padding: $ios-spacing-md;
|
|
|
+ padding: 1.5%;
|
|
|
}
|
|
|
|
|
|
.main-content-layout {
|
|
|
- grid-template-columns: 1fr 300px; // 中等屏幕调整
|
|
|
- gap: $ios-spacing-md;
|
|
|
+ grid-template-columns: 1fr 25%; // 中等屏幕调整为25%
|
|
|
+ gap: 1.5%;
|
|
|
}
|
|
|
|
|
|
.horizontal-nav-container {
|
|
|
- margin-bottom: $ios-spacing-md;
|
|
|
- padding: $ios-spacing-sm;
|
|
|
+ margin-bottom: 1.5%;
|
|
|
+ padding: 1%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 1200px) {
|
|
|
.project-detail-container {
|
|
|
- padding: $ios-spacing-sm;
|
|
|
+ padding: 1.2%;
|
|
|
}
|
|
|
|
|
|
.main-content-layout {
|
|
|
- grid-template-columns: 1fr 280px; // 进一步减小右侧栏宽度
|
|
|
- gap: $ios-spacing-sm;
|
|
|
+ grid-template-columns: 1fr 23%; // 进一步减小右侧栏宽度为23%
|
|
|
+ gap: 1.2%;
|
|
|
|
|
|
.right-column {
|
|
|
- min-width: 260px;
|
|
|
- max-width: 320px;
|
|
|
+ min-width: 22%; // 使用百分比
|
|
|
+ max-width: 26%; // 使用百分比
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.horizontal-nav {
|
|
|
.nav-item {
|
|
|
- padding: $ios-spacing-sm $ios-spacing-md;
|
|
|
+ padding: 1% 1.5%;
|
|
|
font-size: $ios-font-size-sm;
|
|
|
}
|
|
|
}
|
|
|
@@ -895,12 +1387,12 @@
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.project-detail-container {
|
|
|
- padding: $ios-spacing-sm;
|
|
|
+ padding: 1%;
|
|
|
}
|
|
|
|
|
|
.main-content-layout {
|
|
|
grid-template-columns: 1fr;
|
|
|
- gap: $ios-spacing-md;
|
|
|
+ gap: 1.5%;
|
|
|
|
|
|
.left-column,
|
|
|
.right-column {
|
0235711