优化解决方案卡片样式和交互效果

- 卡片宽度从 120px 增加到 150px
- 移除初始状态的圆角，悬停时添加圆角
- 顶部添加 60x60 图标（使用 ::after 伪元素）
- 标题位置调整，避免悬停时顶到内容
- 悬停时图标移到左上角，标题在图标右侧
- 内容区域顶部留出 100px 空间避免覆盖图标和标题
- 优化 z-index 层级关系

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

css/index.css

@@ -1153,10 +1153,9 @@
 
 /* 竖向长方形卡片 */
 .resolve-card {
-  width: 120px;
+  width: 150px;
   height: 400px;
   position: relative;
-  border-radius: 16px;
   overflow: hidden;
   transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1173,16 +1172,60 @@
   background: rgba(15, 23, 42, 0.7);
   backdrop-filter: blur(16px);
   border: 1px solid rgba(148, 163, 184, 0.15);
-  border-radius: 16px;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  padding-top: 40px;
   transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* 卡片顶部图标 */
+.resolve-card-inner::after {
+  content: '';
+  position: absolute;
+  top: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 60px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+}
+
+/* 为不同卡片设置不同图标 */
+.resolve-card:nth-child(1) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(2) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(3) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(4) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(5) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(6) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(7) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
 /* 卡片发光边框效果 */
 .resolve-card-inner::before {
   content: '';
@@ -1191,7 +1234,6 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-radius: 16px;
   padding: 1px;
   background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(99, 102, 241, 0.3));
   -webkit-mask:
@@ -1214,6 +1256,7 @@
   transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 2;
   position: relative;
+  margin-top: 140px;
 }
 
 /* 内容区域 - 默认隐藏 */
@@ -1223,7 +1266,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  padding: 32px 24px;
+  padding: 100px 24px 32px 24px;
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1267,20 +1310,29 @@
     0 0 50px rgba(56, 189, 248, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
   border-color: rgba(56, 189, 248, 0.4);
+  border-radius: 16px;
 }
 
 .resolve-card:hover .resolve-card-inner::before {
   opacity: 1;
 }
 
+/* 悬停时图标移到左上角 */
+.resolve-card:hover .resolve-card-inner::after {
+  top: 30px;
+  left: 30px;
+  transform: translateX(0);
+}
+
 /* 悬停时标题变为横向并移到顶部 */
 .resolve-card:hover .resolve-card-title {
   writing-mode: horizontal-tb;
   text-orientation: mixed;
   letter-spacing: 2px;
   position: absolute;
-  top: 32px;
+  top: 42px;
-  left: 24px;
+  left: 100px;
+  margin-top: 0;
   color: #38BDF8;
   text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
 }