You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1430 lines
30 KiB

  1. /* ==================== Tailwind CSS 配置 ==================== */
  2. @layer tailwind-base, semi, tailwind-components, tailwind-utils;
  3. @layer tailwind-base {
  4. @tailwind base;
  5. }
  6. @layer tailwind-components {
  7. @tailwind components;
  8. }
  9. @layer tailwind-utils {
  10. @tailwind utilities;
  11. }
  12. /* ==================== 全局基础样式 ==================== */
  13. :root {
  14. --sidebar-width: 180px;
  15. --sidebar-width-collapsed: 60px;
  16. --sidebar-current-width: var(--sidebar-width);
  17. }
  18. body.sidebar-collapsed {
  19. --sidebar-current-width: var(--sidebar-width-collapsed);
  20. }
  21. body {
  22. font-family: Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei',
  23. sans-serif;
  24. color: var(--semi-color-text-0);
  25. background-color: var(--semi-color-bg-0);
  26. }
  27. .app-layout {
  28. height: 100vh;
  29. height: 100dvh;
  30. }
  31. .app-sider {
  32. height: calc(100vh - 64px);
  33. height: calc(100dvh - 64px);
  34. }
  35. code {
  36. font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  37. monospace;
  38. }
  39. /* ==================== 布局相关样式 ==================== */
  40. .semi-layout::-webkit-scrollbar,
  41. .semi-layout-content::-webkit-scrollbar,
  42. .semi-sider::-webkit-scrollbar {
  43. display: none;
  44. width: 0;
  45. height: 0;
  46. }
  47. .semi-layout,
  48. .semi-layout-content,
  49. .semi-sider {
  50. -ms-overflow-style: none;
  51. scrollbar-width: none;
  52. }
  53. /* ==================== 导航和侧边栏样式 ==================== */
  54. .semi-navigation-item {
  55. margin-bottom: 4px !important;
  56. padding: 4px 12px !important;
  57. }
  58. .semi-navigation-sub-title {
  59. padding: 0 !important;
  60. }
  61. .semi-navigation-item-icon {
  62. justify-items: center;
  63. align-items: center;
  64. }
  65. .semi-navigation-item-icon-info {
  66. margin-right: 0;
  67. }
  68. .sidebar-nav .semi-navigation-item-text {
  69. flex: 1;
  70. min-width: 0;
  71. }
  72. .semi-navigation-item,
  73. .semi-navigation-sub-title {
  74. height: 100% !important;
  75. }
  76. .semi-navigation-item-collapsed {
  77. height: 44px !important;
  78. }
  79. #root
  80. > section
  81. > header
  82. > section
  83. > div
  84. > div
  85. > div
  86. > div.semi-navigation-header-list-outer
  87. > div.semi-navigation-list-wrapper
  88. > ul
  89. > div
  90. > a
  91. > li
  92. > span {
  93. font-weight: 600 !important;
  94. }
  95. /* 自定义侧边栏样式 */
  96. .sidebar-container {
  97. height: 100%;
  98. display: flex;
  99. flex-direction: column;
  100. min-height: 0;
  101. transition: width 0.3s ease;
  102. background: var(--semi-color-bg-0);
  103. }
  104. .sidebar-nav {
  105. flex: 1;
  106. width: 100%;
  107. background: var(--semi-color-bg-0);
  108. height: 100%;
  109. overflow-x: hidden;
  110. border-right: none;
  111. overflow-y: auto;
  112. min-height: 0;
  113. -webkit-overflow-scrolling: touch;
  114. scrollbar-width: none;
  115. -ms-overflow-style: none;
  116. }
  117. .sidebar-nav::-webkit-scrollbar {
  118. display: none;
  119. }
  120. /* 侧边栏导航项样式 */
  121. .sidebar-nav-item {
  122. border-radius: 6px;
  123. margin: 3px 8px;
  124. transition: all 0.15s ease;
  125. padding: 8px 12px;
  126. }
  127. .sidebar-nav-item:hover {
  128. background-color: rgba(var(--semi-blue-0), 0.08);
  129. color: var(--semi-color-primary);
  130. }
  131. .sidebar-nav-item-selected {
  132. background-color: rgba(var(--semi-blue-0), 0.12);
  133. color: var(--semi-color-primary);
  134. font-weight: 500;
  135. }
  136. /* 图标容器样式 */
  137. .sidebar-icon-container {
  138. width: 22px;
  139. height: 22px;
  140. display: flex;
  141. align-items: center;
  142. justify-content: center;
  143. margin-right: 10px;
  144. transition: all 0.2s ease;
  145. }
  146. .sidebar-sub-icon-container {
  147. width: 18px;
  148. height: 18px;
  149. display: flex;
  150. align-items: center;
  151. justify-content: center;
  152. margin-right: 10px;
  153. margin-left: 1px;
  154. transition: all 0.2s ease;
  155. }
  156. /* 分割线样式 */
  157. .sidebar-divider {
  158. margin: 4px 8px;
  159. opacity: 0.15;
  160. }
  161. /* 分组标签样式 */
  162. .sidebar-group-label {
  163. padding: 4px 15px 8px;
  164. color: var(--semi-color-text-2);
  165. font-size: 12px;
  166. text-transform: uppercase;
  167. letter-spacing: 0.5px;
  168. opacity: 0.8;
  169. }
  170. /* 底部折叠按钮 */
  171. .sidebar-collapse-button {
  172. display: flex;
  173. justify-content: center;
  174. align-items: center;
  175. padding: 12px;
  176. margin-top: auto;
  177. cursor: pointer;
  178. background-color: var(--semi-color-bg-0);
  179. position: sticky;
  180. bottom: 0;
  181. z-index: 10;
  182. box-shadow: 0 -10px 10px -5px var(--semi-color-bg-0);
  183. backdrop-filter: blur(4px);
  184. border-top: 1px solid rgba(var(--semi-grey-0), 0.08);
  185. }
  186. .sidebar-collapse-button-inner {
  187. width: 28px;
  188. height: 28px;
  189. border-radius: 9999px;
  190. display: flex;
  191. align-items: center;
  192. justify-content: center;
  193. background-color: var(--semi-color-fill-0);
  194. transition: all 0.2s ease;
  195. }
  196. .sidebar-collapse-icon-container {
  197. display: inline-block;
  198. transition: transform 0.3s ease;
  199. }
  200. /* 侧边栏区域容器 */
  201. .sidebar-section {
  202. padding-top: 12px;
  203. }
  204. @media (max-width: 767px) {
  205. .sidebar-container {
  206. background: var(--semi-color-bg-1);
  207. border-right: 1px solid var(--semi-color-border);
  208. }
  209. .sidebar-nav {
  210. background: var(--semi-color-bg-1);
  211. }
  212. .sidebar-collapse-button {
  213. background-color: var(--semi-color-bg-1);
  214. box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1);
  215. }
  216. }
  217. /* ==================== 聊天界面样式 ==================== */
  218. .semi-chat {
  219. padding-top: 0 !important;
  220. padding-bottom: 0 !important;
  221. height: 100%;
  222. max-width: 100% !important;
  223. width: 100% !important;
  224. overflow: hidden !important;
  225. }
  226. .semi-chat-chatBox {
  227. max-width: 100% !important;
  228. overflow: hidden !important;
  229. }
  230. .semi-chat-chatBox-wrap {
  231. max-width: 100% !important;
  232. overflow: hidden !important;
  233. }
  234. .semi-chat-chatBox-content {
  235. min-width: auto;
  236. word-break: break-word;
  237. max-width: 100% !important;
  238. overflow-wrap: break-word !important;
  239. }
  240. .semi-chat-content {
  241. max-width: 100% !important;
  242. overflow: hidden !important;
  243. }
  244. .semi-chat-list {
  245. max-width: 100% !important;
  246. overflow-x: hidden !important;
  247. }
  248. .semi-chat-container {
  249. overflow-x: hidden !important;
  250. }
  251. .semi-chat-chatBox-action {
  252. column-gap: 0 !important;
  253. }
  254. .semi-chat-inputBox-clearButton.semi-button .semi-icon {
  255. font-size: 20px !important;
  256. }
  257. /* 隐藏所有聊天相关区域的滚动条 */
  258. .semi-chat::-webkit-scrollbar,
  259. .semi-chat-chatBox::-webkit-scrollbar,
  260. .semi-chat-chatBox-wrap::-webkit-scrollbar,
  261. .semi-chat-chatBox-content::-webkit-scrollbar,
  262. .semi-chat-content::-webkit-scrollbar,
  263. .semi-chat-list::-webkit-scrollbar,
  264. .semi-chat-container::-webkit-scrollbar {
  265. display: none;
  266. }
  267. .semi-chat,
  268. .semi-chat-chatBox,
  269. .semi-chat-chatBox-wrap,
  270. .semi-chat-chatBox-content,
  271. .semi-chat-content,
  272. .semi-chat-list,
  273. .semi-chat-container {
  274. -ms-overflow-style: none;
  275. scrollbar-width: none;
  276. }
  277. /* ==================== 组件特定样式 ==================== */
  278. /* SelectableButtonGroup */
  279. .sbg-button .semi-button-content {
  280. min-width: 0 !important;
  281. }
  282. .sbg-content {
  283. display: flex;
  284. align-items: center;
  285. gap: 4px;
  286. width: 100%;
  287. min-width: 0;
  288. }
  289. .sbg-ellipsis {
  290. flex: 1;
  291. min-width: 0;
  292. overflow: hidden;
  293. white-space: nowrap;
  294. text-overflow: ellipsis;
  295. }
  296. /* Tabs组件样式 */
  297. .semi-tabs-content {
  298. padding: 0 !important;
  299. height: calc(100% - 40px) !important;
  300. flex: 1 !important;
  301. }
  302. .semi-tabs-content .semi-tabs-pane {
  303. height: 100% !important;
  304. overflow: hidden !important;
  305. }
  306. .semi-tabs-content .semi-tabs-pane > div {
  307. height: 100% !important;
  308. }
  309. /* 表格样式 */
  310. .tableShow {
  311. display: revert;
  312. }
  313. .tableHiddle {
  314. display: none !important;
  315. }
  316. /* 页脚样式 */
  317. .custom-footer {
  318. font-size: 1.1em;
  319. }
  320. /* 卡片内容容器通用样式 */
  321. .card-content-container {
  322. position: relative;
  323. }
  324. .card-content-fade-indicator {
  325. position: absolute;
  326. bottom: 0;
  327. left: 0;
  328. right: 0;
  329. height: 30px;
  330. background: linear-gradient(transparent, var(--semi-color-bg-1));
  331. pointer-events: none;
  332. z-index: 1;
  333. opacity: 0;
  334. transition: opacity 0.3s ease;
  335. }
  336. /* ==================== 调试面板特定样式 ==================== */
  337. .debug-panel .semi-tabs {
  338. height: 100% !important;
  339. display: flex !important;
  340. flex-direction: column !important;
  341. }
  342. .debug-panel .semi-tabs-bar {
  343. flex-shrink: 0 !important;
  344. }
  345. .debug-panel .semi-tabs-content {
  346. flex: 1 !important;
  347. overflow: hidden !important;
  348. }
  349. /* ==================== 滚动条样式统一管理 ==================== */
  350. /* 通用隐藏滚动条工具类 */
  351. .scrollbar-hide {
  352. -ms-overflow-style: none;
  353. /* IE and Edge */
  354. scrollbar-width: none;
  355. /* Firefox */
  356. }
  357. .scrollbar-hide::-webkit-scrollbar {
  358. width: 0 !important;
  359. height: 0 !important;
  360. display: none !important;
  361. /* Chrome, Safari, Opera */
  362. }
  363. /* 表格滚动条样式 */
  364. .semi-table-body::-webkit-scrollbar {
  365. width: 6px;
  366. height: 6px;
  367. }
  368. .semi-table-body::-webkit-scrollbar-thumb {
  369. background: rgba(var(--semi-grey-2), 0.3);
  370. border-radius: 2px;
  371. }
  372. .semi-table-body::-webkit-scrollbar-thumb:hover {
  373. background: rgba(var(--semi-grey-2), 0.5);
  374. }
  375. .semi-table-body::-webkit-scrollbar-track {
  376. background: transparent;
  377. }
  378. /* 侧边抽屉滚动条样式 */
  379. .semi-sidesheet-body::-webkit-scrollbar {
  380. width: 6px;
  381. height: 6px;
  382. }
  383. .semi-sidesheet-body::-webkit-scrollbar-thumb {
  384. background: rgba(var(--semi-grey-2), 0.3);
  385. border-radius: 2px;
  386. }
  387. .semi-sidesheet-body::-webkit-scrollbar-thumb:hover {
  388. background: rgba(var(--semi-grey-2), 0.5);
  389. }
  390. .semi-sidesheet-body::-webkit-scrollbar-track {
  391. background: transparent;
  392. }
  393. /* 隐藏内容区域滚动条 */
  394. .pricing-scroll-hide,
  395. .model-test-scroll,
  396. .card-content-scroll,
  397. .model-settings-scroll,
  398. .thinking-content-scroll,
  399. .custom-request-textarea .semi-input,
  400. .custom-request-textarea textarea,
  401. .notice-content-scroll {
  402. -ms-overflow-style: none;
  403. scrollbar-width: none;
  404. }
  405. .pricing-scroll-hide::-webkit-scrollbar,
  406. .model-test-scroll::-webkit-scrollbar,
  407. .card-content-scroll::-webkit-scrollbar,
  408. .model-settings-scroll::-webkit-scrollbar,
  409. .thinking-content-scroll::-webkit-scrollbar,
  410. .custom-request-textarea .semi-input::-webkit-scrollbar,
  411. .custom-request-textarea textarea::-webkit-scrollbar,
  412. .notice-content-scroll::-webkit-scrollbar {
  413. display: none;
  414. }
  415. /* 图片列表滚动条样式 */
  416. .image-list-scroll::-webkit-scrollbar {
  417. width: 6px;
  418. height: 6px;
  419. }
  420. .image-list-scroll::-webkit-scrollbar-thumb {
  421. background: var(--semi-color-tertiary-light-default);
  422. border-radius: 3px;
  423. }
  424. .image-list-scroll::-webkit-scrollbar-thumb:hover {
  425. background: var(--semi-color-tertiary);
  426. }
  427. .image-list-scroll::-webkit-scrollbar-track {
  428. background: transparent;
  429. }
  430. /* ==================== 同步倍率 - 渠道选择器 ==================== */
  431. .components-transfer-source-item,
  432. .components-transfer-selected-item {
  433. display: flex;
  434. align-items: center;
  435. padding: 8px;
  436. }
  437. .semi-transfer-left-list,
  438. .semi-transfer-right-list {
  439. -ms-overflow-style: none;
  440. scrollbar-width: none;
  441. }
  442. .semi-transfer-left-list::-webkit-scrollbar,
  443. .semi-transfer-right-list::-webkit-scrollbar {
  444. display: none;
  445. }
  446. .components-transfer-source-item .semi-checkbox,
  447. .components-transfer-selected-item .semi-checkbox {
  448. display: flex;
  449. align-items: center;
  450. width: 100%;
  451. }
  452. .components-transfer-source-item .semi-avatar,
  453. .components-transfer-selected-item .semi-avatar {
  454. margin-right: 12px;
  455. flex-shrink: 0;
  456. }
  457. .components-transfer-source-item .info,
  458. .components-transfer-selected-item .info {
  459. flex: 1;
  460. overflow: hidden;
  461. display: flex;
  462. flex-direction: column;
  463. justify-content: center;
  464. }
  465. .components-transfer-source-item .name,
  466. .components-transfer-selected-item .name {
  467. font-weight: 500;
  468. white-space: nowrap;
  469. overflow: hidden;
  470. text-overflow: ellipsis;
  471. }
  472. .components-transfer-source-item .email,
  473. .components-transfer-selected-item .email {
  474. font-size: 12px;
  475. color: var(--semi-color-text-2);
  476. display: flex;
  477. align-items: center;
  478. }
  479. .components-transfer-selected-item .semi-icon-close {
  480. margin-left: 8px;
  481. cursor: pointer;
  482. color: var(--semi-color-text-2);
  483. }
  484. .components-transfer-selected-item .semi-icon-close:hover {
  485. color: var(--semi-color-text-0);
  486. }
  487. /* ==================== 未读通知闪光效果 ==================== */
  488. @keyframes sweep-shine {
  489. 0% {
  490. background-position: 200% 0;
  491. }
  492. 100% {
  493. background-position: -200% 0;
  494. }
  495. }
  496. .shine-text {
  497. background: linear-gradient(
  498. 90deg,
  499. currentColor 0%,
  500. currentColor 40%,
  501. rgba(255, 255, 255, 0.9) 50%,
  502. currentColor 60%,
  503. currentColor 100%
  504. );
  505. background-size: 200% 100%;
  506. -webkit-background-clip: text;
  507. background-clip: text;
  508. -webkit-text-fill-color: transparent;
  509. animation: sweep-shine 4s linear infinite;
  510. }
  511. .dark .shine-text {
  512. background: linear-gradient(
  513. 90deg,
  514. currentColor 0%,
  515. currentColor 40%,
  516. #facc15 50%,
  517. currentColor 60%,
  518. currentColor 100%
  519. );
  520. background-size: 200% 100%;
  521. -webkit-background-clip: text;
  522. background-clip: text;
  523. -webkit-text-fill-color: transparent;
  524. }
  525. /* ==================== ScrollList 定制样式 ==================== */
  526. .semi-scrolllist,
  527. .semi-scrolllist * {
  528. -ms-overflow-style: none;
  529. /* IE, Edge */
  530. scrollbar-width: none;
  531. /* Firefox */
  532. background: transparent !important;
  533. }
  534. .semi-scrolllist::-webkit-scrollbar,
  535. .semi-scrolllist *::-webkit-scrollbar {
  536. width: 0 !important;
  537. height: 0 !important;
  538. display: none !important;
  539. }
  540. .semi-scrolllist-body {
  541. padding: 1px !important;
  542. }
  543. .semi-scrolllist-list-outer {
  544. padding-right: 0 !important;
  545. }
  546. /* ==================== Banner 背景模糊球 ==================== */
  547. .blur-ball {
  548. position: absolute;
  549. width: 360px;
  550. height: 360px;
  551. border-radius: 50%;
  552. filter: blur(120px);
  553. pointer-events: none;
  554. z-index: -1;
  555. }
  556. .blur-ball-indigo {
  557. background: #6366f1;
  558. /* indigo-500 */
  559. top: 40px;
  560. left: 50%;
  561. transform: translateX(-50%);
  562. opacity: 0.5;
  563. }
  564. .blur-ball-teal {
  565. background: #14b8a6;
  566. /* teal-400 */
  567. top: 200px;
  568. left: 30%;
  569. opacity: 0.4;
  570. }
  571. /* 浅色主题下让模糊球更柔和 */
  572. html:not(.dark) .blur-ball-indigo {
  573. opacity: 0.25;
  574. }
  575. html:not(.dark) .blur-ball-teal {
  576. opacity: 0.2;
  577. }
  578. /* ==================== 卡片马卡龙模糊球(类封装) ==================== */
  579. /* 使用方式:给容器加上 with-pastel-balls 类即可,无需在 JSX 中插入额外节点 */
  580. .with-pastel-balls {
  581. position: relative;
  582. overflow: hidden;
  583. /* 默认变量(明亮模式) */
  584. --pb1: #ffd1dc;
  585. /* 粉 */
  586. --pb2: #e5d4ff;
  587. /* 薰衣草 */
  588. --pb3: #d1fff6;
  589. /* 薄荷 */
  590. --pb4: #ffe5d9;
  591. /* 桃 */
  592. --pb-opacity: 0.55;
  593. --pb-blur: 60px;
  594. }
  595. .with-pastel-balls::before {
  596. content: '';
  597. position: absolute;
  598. inset: 0;
  599. pointer-events: none;
  600. z-index: 0;
  601. background: radial-gradient(
  602. circle at -5% -10%,
  603. var(--pb1) 0%,
  604. transparent 60%
  605. ),
  606. radial-gradient(circle at 105% -10%, var(--pb2) 0%, transparent 55%),
  607. radial-gradient(circle at 5% 110%, var(--pb3) 0%, transparent 55%),
  608. radial-gradient(circle at 105% 110%, var(--pb4) 0%, transparent 50%);
  609. filter: blur(var(--pb-blur));
  610. opacity: var(--pb-opacity);
  611. transform: translateZ(0);
  612. }
  613. /* 暗黑模式下更柔和的色彩和透明度 */
  614. html.dark .with-pastel-balls {
  615. /* 使用与明亮模式一致的“刚才那组”马卡龙色,但整体更柔和 */
  616. --pb1: #ffd1dc;
  617. /* 粉 */
  618. --pb2: #e5d4ff;
  619. /* 薰衣草 */
  620. --pb3: #d1fff6;
  621. /* 薄荷 */
  622. --pb4: #ffe5d9;
  623. /* 桃 */
  624. --pb-opacity: 0.36;
  625. --pb-blur: 65px;
  626. }
  627. /* 暗黑模式下用更柔和的混合模式避免突兀的高亮 */
  628. html.dark .with-pastel-balls::before {
  629. mix-blend-mode: screen;
  630. }
  631. /* ==================== 表格卡片滚动设置 ==================== */
  632. .table-scroll-card {
  633. display: flex;
  634. flex-direction: column;
  635. height: calc(100vh - 110px);
  636. max-height: calc(100vh - 110px);
  637. }
  638. .table-scroll-card .semi-card-body {
  639. flex: 1 1 auto;
  640. overflow-y: auto;
  641. }
  642. .table-scroll-card .semi-card-body::-webkit-scrollbar {
  643. width: 6px;
  644. }
  645. .table-scroll-card .semi-card-body::-webkit-scrollbar-thumb {
  646. background: rgba(var(--semi-grey-2), 0.3);
  647. border-radius: 2px;
  648. }
  649. .table-scroll-card .semi-card-body::-webkit-scrollbar-thumb:hover {
  650. background: rgba(var(--semi-grey-2), 0.5);
  651. }
  652. .table-scroll-card .semi-card-body::-webkit-scrollbar-track {
  653. background: transparent;
  654. }
  655. @media (max-width: 767px) {
  656. .table-scroll-card {
  657. height: calc(100vh - 77px);
  658. max-height: calc(100vh - 77px);
  659. }
  660. }
  661. /* ==================== 模型定价页面布局 ==================== */
  662. .pricing-layout {
  663. height: calc(100vh - 60px);
  664. overflow: hidden;
  665. margin-top: 60px;
  666. }
  667. .pricing-sidebar {
  668. width: clamp(280px, 24vw, 520px) !important;
  669. min-width: clamp(280px, 24vw, 520px) !important;
  670. max-width: clamp(280px, 24vw, 520px) !important;
  671. height: calc(100vh - 60px);
  672. background-color: var(--semi-color-bg-0);
  673. overflow: auto;
  674. }
  675. .pricing-content {
  676. height: calc(100vh - 60px);
  677. background-color: var(--semi-color-bg-0);
  678. display: flex;
  679. flex-direction: column;
  680. }
  681. .pricing-pagination-divider {
  682. border-color: var(--semi-color-border);
  683. }
  684. .pricing-content-mobile {
  685. height: 100%;
  686. display: flex;
  687. flex-direction: column;
  688. overflow: auto;
  689. }
  690. .pricing-search-header {
  691. padding: 0.5rem;
  692. background-color: var(--semi-color-bg-0);
  693. flex-shrink: 0;
  694. position: sticky;
  695. top: 0;
  696. z-index: 5;
  697. }
  698. .pricing-view-container {
  699. flex: 1;
  700. overflow: auto;
  701. }
  702. .pricing-view-container-mobile {
  703. flex: 1;
  704. overflow: auto;
  705. min-height: 0;
  706. }
  707. /* ==================== semi-ui 组件自定义样式 ==================== */
  708. .semi-card-header,
  709. .semi-card-body {
  710. padding: 10px !important;
  711. }
  712. /* ==================== 使用日志: channel affinity tag ==================== */
  713. .semi-tag.channel-affinity-tag {
  714. border: 1px solid rgba(var(--semi-cyan-5), 0.35);
  715. background-color: rgba(var(--semi-cyan-5), 0.15);
  716. color: rgba(var(--semi-cyan-9), 1);
  717. cursor: help;
  718. transition:
  719. background-color 120ms ease,
  720. border-color 120ms ease,
  721. box-shadow 120ms ease;
  722. }
  723. .semi-tag.channel-affinity-tag:hover {
  724. background-color: rgba(var(--semi-cyan-5), 0.22);
  725. border-color: rgba(var(--semi-cyan-5), 0.6);
  726. box-shadow: 0 0 0 2px rgba(var(--semi-cyan-5), 0.18);
  727. }
  728. .semi-tag.channel-affinity-tag:active {
  729. background-color: rgba(var(--semi-cyan-5), 0.28);
  730. }
  731. .semi-tag.channel-affinity-tag .channel-affinity-tag-content {
  732. display: inline-flex;
  733. align-items: center;
  734. gap: 0.25rem;
  735. }
  736. /* ==================== 自定义圆角样式 ==================== */
  737. .semi-radio,
  738. .semi-tagInput,
  739. .semi-input-textarea-wrapper,
  740. .semi-navigation-sub-title,
  741. .semi-chat-inputBox-sendButton,
  742. .semi-page-item,
  743. .semi-navigation-item,
  744. .semi-tag-closable,
  745. .semi-input-wrapper,
  746. .semi-tabs-tab-button,
  747. .semi-select,
  748. .semi-button,
  749. .semi-datepicker-range-input {
  750. border-radius: 10px !important;
  751. }
  752. /* ==================== 首页 Snap 滚动样式 ==================== */
  753. .home-snap-container {
  754. height: 100vh;
  755. height: 100dvh;
  756. overflow-y: auto;
  757. overflow-x: hidden;
  758. scroll-snap-type: y mandatory;
  759. scroll-behavior: smooth;
  760. -webkit-overflow-scrolling: touch;
  761. }
  762. .home-snap-container::-webkit-scrollbar {
  763. width: 0;
  764. display: none;
  765. }
  766. .home-snap-section {
  767. min-height: 100vh;
  768. min-height: 100dvh;
  769. scroll-snap-align: start;
  770. scroll-snap-stop: always;
  771. display: flex;
  772. flex-direction: column;
  773. justify-content: center;
  774. position: relative;
  775. overflow: hidden;
  776. }
  777. /* Hero Section 特殊处理 - 不强制全屏 */
  778. .home-snap-section-hero {
  779. min-height: max(100vh, fit-content);
  780. min-height: max(100dvh, fit-content);
  781. }
  782. /* 模型广场 Section - 允许超出 */
  783. .home-snap-section-pricing {
  784. min-height: 100vh;
  785. min-height: 100dvh;
  786. scroll-snap-align: start;
  787. scroll-snap-stop: always;
  788. }
  789. /* ==================== 首页 Hero Section 样式 ==================== */
  790. .hero-gradient-bg {
  791. background: radial-gradient(
  792. ellipse 80% 50% at 50% -20%,
  793. rgba(99, 102, 241, 0.15),
  794. transparent 50%
  795. );
  796. }
  797. .hero-blur-ball-1 {
  798. position: absolute;
  799. width: 420px;
  800. height: 420px;
  801. border-radius: 50%;
  802. filter: blur(100px);
  803. pointer-events: none;
  804. background: radial-gradient(circle, rgba(99, 102, 241, 0.45) 0%, transparent 70%);
  805. top: -96px;
  806. left: -128px;
  807. opacity: 0.35;
  808. }
  809. .hero-blur-ball-2 {
  810. position: absolute;
  811. width: 360px;
  812. height: 360px;
  813. border-radius: 50%;
  814. filter: blur(100px);
  815. pointer-events: none;
  816. background: radial-gradient(circle, rgba(20, 184, 166, 0.4) 0%, transparent 70%);
  817. bottom: -80px;
  818. right: -96px;
  819. opacity: 0.28;
  820. }
  821. /* 浅色主题下降低透明度 */
  822. html:not(.dark) .hero-blur-ball-1 {
  823. opacity: 0.2;
  824. }
  825. html:not(.dark) .hero-blur-ball-2 {
  826. opacity: 0.15;
  827. }
  828. /* ==================== 功能卡片样式 ==================== */
  829. .feature-card-container {
  830. position: relative;
  831. max-width: 360px;
  832. margin: 0 auto;
  833. }
  834. .feature-card-container::before {
  835. content: '';
  836. position: absolute;
  837. inset: 0;
  838. border-radius: 32px;
  839. opacity: 0.5;
  840. filter: blur(48px);
  841. background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(20, 184, 166, 0.25));
  842. z-index: 0;
  843. }
  844. .feature-card {
  845. position: relative;
  846. z-index: 1;
  847. display: flex;
  848. flex-direction: column;
  849. gap: 20px;
  850. padding: 24px;
  851. border-radius: 28px;
  852. border: 1px solid var(--semi-color-border);
  853. background-color: var(--semi-color-bg-0);
  854. backdrop-filter: blur(16px);
  855. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  856. }
  857. .feature-card-item {
  858. display: flex;
  859. flex-direction: column;
  860. gap: 8px;
  861. padding: 16px 20px;
  862. border-radius: 16px;
  863. border: 1px solid var(--semi-color-border);
  864. background-color: var(--semi-color-bg-0);
  865. transition: all 0.3s ease;
  866. cursor: default;
  867. }
  868. .feature-card-item:hover {
  869. transform: translateY(-4px);
  870. box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
  871. }
  872. .feature-card-icon {
  873. width: 40px;
  874. height: 40px;
  875. display: flex;
  876. align-items: center;
  877. justify-content: center;
  878. border-radius: 12px;
  879. background-color: rgba(99, 102, 241, 0.14);
  880. color: var(--semi-color-primary);
  881. transition: transform 0.3s ease;
  882. }
  883. .feature-card-item:hover .feature-card-icon {
  884. transform: scale(1.05);
  885. }
  886. /* ==================== 价值卡片样式 ==================== */
  887. .value-card {
  888. position: relative;
  889. display: flex;
  890. flex-direction: column;
  891. gap: 20px;
  892. padding: 24px;
  893. border-radius: 16px;
  894. border: 1px solid var(--semi-color-border);
  895. background-color: var(--semi-color-bg-0);
  896. transition: all 0.3s ease;
  897. overflow: hidden;
  898. }
  899. .value-card::before {
  900. content: '';
  901. position: absolute;
  902. inset: 0;
  903. background: radial-gradient(120% 100% at 50% 0%, rgba(99, 102, 241, 0.18), transparent);
  904. opacity: 0;
  905. transition: opacity 0.3s ease;
  906. pointer-events: none;
  907. z-index: 0;
  908. }
  909. .value-card::after {
  910. content: '';
  911. position: absolute;
  912. top: -40px;
  913. left: 32px;
  914. right: 32px;
  915. height: 112px;
  916. border-radius: 50%;
  917. background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.25), transparent, transparent);
  918. opacity: 0;
  919. transition: opacity 0.3s ease;
  920. pointer-events: none;
  921. z-index: 0;
  922. }
  923. .value-card:hover {
  924. transform: translateY(-4px);
  925. box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  926. }
  927. .value-card:hover::before,
  928. .value-card:hover::after {
  929. opacity: 1;
  930. }
  931. .value-card-icon {
  932. position: relative;
  933. z-index: 1;
  934. width: 48px;
  935. height: 48px;
  936. display: flex;
  937. align-items: center;
  938. justify-content: center;
  939. border-radius: 16px;
  940. background-color: rgba(99, 102, 241, 0.16);
  941. color: var(--semi-color-primary);
  942. transition: all 0.3s ease;
  943. }
  944. .value-card:hover .value-card-icon {
  945. transform: scale(1.1) rotate(3deg);
  946. }
  947. .value-card-icon-blue {
  948. background-color: rgba(14, 165, 233, 0.16);
  949. }
  950. .value-card-icon-teal {
  951. background-color: rgba(20, 184, 166, 0.16);
  952. }
  953. .value-card-icon-purple {
  954. background-color: rgba(129, 140, 248, 0.18);
  955. }
  956. /* ==================== 工作流卡片样式 ==================== */
  957. .workflow-card {
  958. position: relative;
  959. display: flex;
  960. flex-direction: column;
  961. gap: 12px;
  962. padding: 24px;
  963. border-radius: 16px;
  964. border: 1px solid var(--semi-color-border);
  965. background-color: var(--semi-color-bg-0);
  966. transition: all 0.3s ease;
  967. overflow: hidden;
  968. }
  969. .workflow-card::before {
  970. content: '';
  971. position: absolute;
  972. top: 0;
  973. left: 0;
  974. width: 3px;
  975. height: 100%;
  976. background: linear-gradient(to bottom, rgba(99, 102, 241, 0.45), rgba(20, 184, 166, 0.45), transparent);
  977. opacity: 0;
  978. transition: opacity 0.3s ease;
  979. }
  980. .workflow-card:hover::before {
  981. opacity: 1;
  982. }
  983. .workflow-card:hover {
  984. box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
  985. }
  986. .workflow-step-number {
  987. font-size: 12px;
  988. font-weight: 600;
  989. text-transform: uppercase;
  990. letter-spacing: 0.1em;
  991. color: var(--semi-color-text-2);
  992. }
  993. /* ==================== 伙伴 Logo 样式 ==================== */
  994. .partner-logo-container {
  995. display: flex;
  996. flex-wrap: wrap;
  997. justify-content: center;
  998. gap: 16px;
  999. }
  1000. .partner-logo {
  1001. display: flex;
  1002. align-items: center;
  1003. justify-content: center;
  1004. width: 112px;
  1005. height: 64px;
  1006. border-radius: 16px;
  1007. border: 1px solid var(--semi-color-border);
  1008. background-color: var(--semi-color-bg-0);
  1009. transition: all 0.3s ease;
  1010. cursor: pointer;
  1011. }
  1012. .partner-logo:hover {
  1013. transform: translateY(-8px);
  1014. box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  1015. }
  1016. /* Logo 浮动动画 */
  1017. @keyframes partner-float {
  1018. 0%, 100% {
  1019. transform: translateY(0) scale(1);
  1020. }
  1021. 50% {
  1022. transform: translateY(-6px) scale(1.05);
  1023. }
  1024. }
  1025. .partner-logo-animated {
  1026. animation: partner-float 3s ease-in-out infinite;
  1027. }
  1028. /* 错开动画时间 */
  1029. .partner-logo:nth-child(1) { animation-delay: 0s; }
  1030. .partner-logo:nth-child(2) { animation-delay: 0.2s; }
  1031. .partner-logo:nth-child(3) { animation-delay: 0.4s; }
  1032. .partner-logo:nth-child(4) { animation-delay: 0.6s; }
  1033. .partner-logo:nth-child(5) { animation-delay: 0.8s; }
  1034. .partner-logo:nth-child(6) { animation-delay: 1s; }
  1035. .partner-logo:nth-child(7) { animation-delay: 1.2s; }
  1036. .partner-logo:nth-child(8) { animation-delay: 1.4s; }
  1037. .partner-logo:nth-child(9) { animation-delay: 1.6s; }
  1038. .partner-logo:nth-child(10) { animation-delay: 1.8s; }
  1039. .partner-logo:nth-child(11) { animation-delay: 2s; }
  1040. .partner-logo:nth-child(12) { animation-delay: 2.2s; }
  1041. .partner-logo:hover {
  1042. animation-play-state: paused;
  1043. }
  1044. /* ==================== 统计数据卡片样式 ==================== */
  1045. .stat-card {
  1046. display: flex;
  1047. flex-direction: column;
  1048. gap: 4px;
  1049. padding: 12px 16px;
  1050. border-radius: 16px;
  1051. border: 1px dashed rgba(99, 102, 241, 0.25);
  1052. background-color: rgba(99, 102, 241, 0.05);
  1053. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  1054. }
  1055. .stat-card-value {
  1056. font-size: 1.5rem;
  1057. font-weight: 600;
  1058. color: var(--semi-color-text-0);
  1059. line-height: 1.2;
  1060. }
  1061. @media (min-width: 768px) {
  1062. .stat-card-value {
  1063. font-size: 1.875rem;
  1064. }
  1065. }
  1066. .stat-card-label {
  1067. font-size: 12px;
  1068. text-transform: uppercase;
  1069. letter-spacing: 0.05em;
  1070. color: var(--semi-color-text-2);
  1071. }
  1072. /* ==================== CTA Section 样式 ==================== */
  1073. .cta-section {
  1074. position: relative;
  1075. overflow: hidden;
  1076. }
  1077. .cta-section::before {
  1078. content: '';
  1079. position: absolute;
  1080. inset: 0;
  1081. background: radial-gradient(circle at center top, rgba(99, 102, 241, 0.25), transparent 60%);
  1082. opacity: 0.4;
  1083. pointer-events: none;
  1084. }
  1085. .cta-section::after {
  1086. content: '';
  1087. position: absolute;
  1088. inset: 0;
  1089. background: radial-gradient(circle at 20% -10%, rgba(20, 184, 166, 0.25), transparent 55%);
  1090. pointer-events: none;
  1091. }
  1092. /* ==================== 标签样式 ==================== */
  1093. .hero-tag {
  1094. display: inline-flex;
  1095. align-items: center;
  1096. padding: 4px 16px;
  1097. border-radius: 9999px;
  1098. border: 1px solid rgba(99, 102, 241, 0.35);
  1099. background-color: rgba(99, 102, 241, 0.12);
  1100. color: var(--semi-color-primary);
  1101. font-size: 12px;
  1102. font-weight: 500;
  1103. letter-spacing: 0.1em;
  1104. text-transform: uppercase;
  1105. }
  1106. /* ==================== API URL 输入框样式 ==================== */
  1107. .api-url-card {
  1108. max-width: 480px;
  1109. padding: 16px;
  1110. border-radius: 24px;
  1111. border: 1px solid var(--semi-color-border);
  1112. background-color: var(--semi-color-bg-0);
  1113. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  1114. backdrop-filter: blur(8px);
  1115. }
  1116. @media (min-width: 768px) {
  1117. .api-url-card {
  1118. padding: 24px;
  1119. }
  1120. }
  1121. /* ==================== 首页 Footer 样式 ==================== */
  1122. .home-footer {
  1123. padding: 48px 24px;
  1124. background-color: var(--semi-color-bg-0);
  1125. border-top: 1px solid var(--semi-color-border);
  1126. /* Footer 不需要强制全屏高度 */
  1127. min-height: auto !important;
  1128. /* 内容高度自适应,允许超出 */
  1129. height: auto !important;
  1130. }
  1131. @media (min-width: 768px) {
  1132. .home-footer {
  1133. padding: 64px 96px;
  1134. }
  1135. }
  1136. .home-footer-link {
  1137. color: var(--semi-color-text-1);
  1138. font-size: 14px;
  1139. transition: color 0.2s ease;
  1140. white-space: nowrap;
  1141. }
  1142. .home-footer-link:hover {
  1143. color: var(--semi-color-primary);
  1144. }
  1145. /* ==================== 响应式调整 ==================== */
  1146. @media (max-width: 1023px) {
  1147. .hero-grid {
  1148. grid-template-columns: 1fr;
  1149. gap: 48px;
  1150. }
  1151. .feature-card-container {
  1152. max-width: 100%;
  1153. }
  1154. }
  1155. @media (max-width: 767px) {
  1156. .home-snap-section {
  1157. min-height: auto;
  1158. padding: 80px 0;
  1159. }
  1160. .home-snap-section-hero {
  1161. min-height: 100vh;
  1162. min-height: 100dvh;
  1163. }
  1164. .partner-logo {
  1165. width: 88px;
  1166. height: 56px;
  1167. }
  1168. .partner-logo-container {
  1169. gap: 12px;
  1170. }
  1171. }
  1172. /* ==================== 工具链卡片 hover-glow 效果 ==================== */
  1173. .hover-glow-amber {
  1174. position: relative;
  1175. transition: all 0.5s ease;
  1176. }
  1177. .hover-glow-amber::before {
  1178. content: '';
  1179. position: absolute;
  1180. inset: 0;
  1181. border-radius: inherit;
  1182. background: radial-gradient(circle at center, rgba(251, 191, 36, 0.15), transparent 70%);
  1183. opacity: 0;
  1184. transition: opacity 0.5s ease;
  1185. pointer-events: none;
  1186. }
  1187. .hover-glow-amber:hover::before {
  1188. opacity: 1;
  1189. }
  1190. .hover-glow-amber:hover {
  1191. box-shadow: 0 0 40px rgba(251, 191, 36, 0.2);
  1192. }
  1193. .hover-glow-blue {
  1194. position: relative;
  1195. transition: all 0.5s ease;
  1196. }
  1197. .hover-glow-blue::before {
  1198. content: '';
  1199. position: absolute;
  1200. inset: 0;
  1201. border-radius: inherit;
  1202. background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15), transparent 70%);
  1203. opacity: 0;
  1204. transition: opacity 0.5s ease;
  1205. pointer-events: none;
  1206. }
  1207. .hover-glow-blue:hover::before {
  1208. opacity: 1;
  1209. }
  1210. .hover-glow-blue:hover {
  1211. box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
  1212. }
  1213. .hover-glow-purple {
  1214. position: relative;
  1215. transition: all 0.5s ease;
  1216. }
  1217. .hover-glow-purple::before {
  1218. content: '';
  1219. position: absolute;
  1220. inset: 0;
  1221. border-radius: inherit;
  1222. background: radial-gradient(circle at center, rgba(168, 85, 247, 0.15), transparent 70%);
  1223. opacity: 0;
  1224. transition: opacity 0.5s ease;
  1225. pointer-events: none;
  1226. }
  1227. .hover-glow-purple:hover::before {
  1228. opacity: 1;
  1229. }
  1230. .hover-glow-purple:hover {
  1231. box-shadow: 0 0 40px rgba(168, 85, 247, 0.2);
  1232. }