deepSeekHome.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. .deekSeek {
  2. width: 100%;
  3. /* 使用 fill-available 确保兼容性 */
  4. height: -webkit-fill-available;
  5. height: 100dvh;
  6. /* 新的动态视口单位,推荐使用 */
  7. background: linear-gradient(90.52deg, rgba(24, 126, 255, 1) 1.54%, rgba(23, 66, 255, 1) 99.26%);
  8. padding-bottom: env(safe-area-inset-bottom);
  9. /* 适配底部安全区域 */
  10. &-header {
  11. width: 100%;
  12. height: 60px;
  13. border: 1px solid rgba(24, 126, 255, 0.5);
  14. display: flex;
  15. color: #FFFFFF;
  16. // justify-content: center;
  17. justify-content: space-between;
  18. align-items: center;
  19. overflow-x: auto;
  20. overflow-y: hidden;
  21. box-sizing: border-box;
  22. // position: relative;
  23. background-color: blur(10px);
  24. background: rgba(24, 126, 255, 0.3);
  25. &::before {
  26. content: '';
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. }
  31. }
  32. &-content {
  33. width: 100%;
  34. height: calc(100% - 80px - env(safe-area-inset-bottom));
  35. display: flex;
  36. justify-content: center;
  37. align-items: center;
  38. flex-direction: column;
  39. &-title {
  40. display: flex;
  41. justify-content: center;
  42. margin-bottom: 5px;
  43. img {
  44. width: 200px;
  45. }
  46. }
  47. &-title-sm {
  48. font-size: 20px;
  49. color: #FFFFFF;
  50. @media (max-width: 768px) {
  51. font-size: 16px;
  52. }
  53. @media (max-width: 480px) {
  54. font-size: 14px;
  55. }
  56. }
  57. &-pc {
  58. width: 36%;
  59. min-width: 400px;
  60. height: 78%;
  61. background: #FFFFFF;
  62. border-radius: 12px;
  63. overflow: hidden;
  64. }
  65. &-mobile {
  66. width: 90%;
  67. height: 82%;
  68. background: #FFFFFF;
  69. border-radius: 12px;
  70. overflow: hidden;
  71. }
  72. }
  73. &-menuds {
  74. max-width: 130px;
  75. overflow: hidden;
  76. text-overflow: ellipsis;
  77. white-space: nowrap;
  78. cursor:pointer;
  79. }
  80. }
  81. // 开放平台按钮样式
  82. .open-platform-btn {
  83. @media (max-width: 768px) {
  84. display: none; // 移动端隐藏
  85. }
  86. background: #FFFFFF;
  87. color: #1890FF;
  88. border: 1px solid #1890FF;
  89. border-radius: 6px;
  90. padding: 8px 16px;
  91. font-size: 14px;
  92. font-weight: 500;
  93. cursor: pointer;
  94. transition: all 0.3s ease;
  95. white-space: nowrap;
  96. &:hover {
  97. background: #F0F8FF;
  98. border-color: #40A9FF;
  99. }
  100. &:active {
  101. background: #E6F7FF;
  102. border-color: #1890FF;
  103. }
  104. }