@@ -196,16 +208,16 @@ export default {
// 页面主体
.page-body {
display: flex;
+ gap: 20px;
+ align-items: stretch;
max-width: 1400px;
padding: 20px;
margin: 0 auto;
- gap: 20px;
}
// 二级菜单
.secondary-nav {
- background: #fff;
- border-bottom: 1px solid #eee;
+ border-bottom: none;
}
.secondary-nav-content {
@@ -213,60 +225,53 @@ export default {
align-items: center;
justify-content: space-between;
max-width: 1400px;
- padding: 0 20px;
+ padding: 20px 20px 0;
margin: 0 auto;
}
.nav-tabs {
display: flex;
- gap: 8px;
+ gap: 40px;
+ width: 596px;
+ height: 42px;
+}
+
+.nav-right {
+ display: flex;
+ align-items: center;
+ gap: 20px;
}
.nav-tab {
position: relative;
- padding: 12px 20px;
- font-size: 14px;
- color: #666;
+ min-width: max-content;
+ height: 42px;
+ padding: 8px 16px;
+ font-size: 18px;
+ font-weight: 500;
+ color: #003B1A;
cursor: pointer;
background: transparent;
- border: none;
- border-bottom: 2px solid transparent;
+ border-radius: 32px;
transition: all 0.3s;
- &::after {
- position: absolute;
- bottom: 0;
- left: 50%;
- width: 0;
- height: 2px;
- background: linear-gradient(90deg, #009a29, #48C666);
- border-radius: 1px;
- content: '';
- transform: translateX(-50%);
- transition: all 0.3s ease;
- }
-
&:hover {
color: #009a29;
-
- &::after {
- width: 60%;
- }
}
&.active {
- color: #009a29;
-
- &::after {
- width: 100%;
- }
+ background: #8CFFCE;
+ box-shadow: inset 0 0 0 1px #00B96B;
}
}
.publish-btn {
- padding: 8px 24px;
- font-size: 14px;
- font-weight: 500;
+ width: 220px;
+ height: 42px;
+ line-height: 26px;
+ padding: 8px 16px;
+ font-size: 18px;
+ font-weight: 400;
color: #fff;
cursor: pointer;
background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
@@ -285,10 +290,22 @@ export default {
}
}
+.nav-right {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.list-count {
+ font-size: 14px;
+ font-weight: 400;
+ color: #6B8575;
+}
+
// 左侧筛选栏
.sidebar {
position: sticky;
- top: 104px;
+ // top: 104px;
width: 220px;
height: fit-content;
min-width: 220px;
@@ -412,62 +429,82 @@ export default {
}
}
-// 右侧内容区
-.content-area {
+// 右侧卡片列表
+.card-list {
flex: 1;
min-width: 0;
}
-// 数据库卡片网格
-.card-grid {
+// 服务卡片网格
+.service-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
- gap: 20px;
+ gap: 24px;
}
-.database-card {
+.service-card {
position: relative;
display: flex;
flex-direction: column;
- padding: 24px;
+ overflow: hidden;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
- &::before {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 3px;
- background: linear-gradient(90deg, #009a29, #48C666);
- content: '';
- transform: scaleX(0);
- transform-origin: left;
- transition: transform 0.3s ease;
- }
-
- &:hover {
- transform: translateY(-4px);
- box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15);
-
- &::before {
- transform: scaleX(1);
- }
+ &.highlight-card {
+ animation: highlight-pulse 3s ease-out;
}
}
.card-header {
- margin-bottom: 12px;
+ position: relative;
+ padding: 16px;
+ height: 70px;
+
+ &::after {
+ position: absolute;
+ right: 16px;
+ bottom: -6px;
+ left: 16px;
+ height: 1px;
+ background: #E8F0EC;
+ content: '';
+ }
}
-.card-title {
- margin-bottom: 12px;
- font-size: 18px;
- font-weight: 600;
- line-height: 1.4;
- color: #1a1a1a;
+.card-title-box {
+ display: flex;
+ justify-content: space-between;
+}
+
+.card-title-text {
+ flex: 1;
+ min-width: 0;
+}
+
+.card-title-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 8px;
+}
+
+.card-title-main {
+ flex: 1;
+ overflow: hidden;
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 24px;
+ color: #003B1A;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.card-title-sub {
+ display: flex;
+ gap: 12px;
+ justify-content: space-between;
}
.card-tags {
@@ -477,10 +514,11 @@ export default {
}
.tag {
- display: inline-block;
- padding: 4px 10px;
- font-size: 12px;
- font-weight: 500;
+ padding: 2px 8px;
+ font-size: 13px;
+ font-weight: 400;
+ color: #00B96B;
+ background: #EEFAE2;
border-radius: 4px;
}
@@ -504,34 +542,72 @@ export default {
background: #fff3e0;
}
+.card-content {
+ padding: 16px;
+}
+
.card-desc {
- margin-bottom: 20px;
+ display: block;
+ height: 70px;
+ overflow: hidden;
font-size: 14px;
line-height: 1.6;
color: #666;
- flex: 1;
+ text-overflow: ellipsis;
+ -webkit-line-clamp: 3;
}
.card-footer {
+ position: relative;
display: flex;
align-items: center;
justify-content: space-between;
+ padding: 14px 16px;
+ height: 64px;
+
+ &::before {
+ position: absolute;
+ top: 0;
+ right: 16px;
+ left: 16px;
+ height: 1px;
+ background: #E8F0EC;
+ content: '';
+ }
}
-.price-tag {
- padding: 4px 12px;
- font-size: 14px;
- font-weight: 600;
+.card-price-info {
+ display: flex;
+ align-items: baseline;
+}
+
+.card-actions {
+ display: flex;
+ height: 32px;
+ padding: 6px 12px;
border-radius: 4px;
+ border: 1px solid #00b96b;
+ color: #00b96b;
+ font-size: 14px;
+ font-weight: 400;
+
+ &:hover {
+ background: rgba(0, 154, 41, 0.1);
+ cursor: pointer;
+ }
+}
+
+.price-value {
+ font-size: 20px;
+ font-weight: 600;
+ color: #FF4D4F;
&.free {
color: #2e7d32;
- background: #e8f5e9;
}
&.paid {
color: #e65100;
- background: #fff3e0;
}
}