diff --git a/css/index.css b/css/index.css index e23b789..c407915 100644 --- a/css/index.css +++ b/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; - left: 24px; + top: 42px; + left: 100px; + margin-top: 0; color: #38BDF8; text-shadow: 0 0 20px rgba(56, 189, 248, 0.5); }