first-active.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. <style>
  8. body {
  9. margin: 0;
  10. font-family: PingFang SC, sans-serif;
  11. color: #fff;
  12. }
  13. .container {
  14. width: 100vw;
  15. height: 100vh;
  16. font-size: 9vw;
  17. box-sizing: border-box;
  18. background: url("data:image/png;base64,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")
  19. no-repeat;
  20. overflow: hidden;
  21. position: relative;
  22. background-size: cover;
  23. }
  24. .box {
  25. box-sizing: border-box;
  26. width: 89vw;
  27. height: 91vh;
  28. position: absolute;
  29. top: 3vw;
  30. left: 4vw;
  31. padding: 4vw 7vw;
  32. }
  33. .header {
  34. width: 100%;
  35. line-height: normal;
  36. font-weight: 400;
  37. margin-bottom: 3vw;
  38. }
  39. .content {
  40. width: 100%;
  41. height: calc(100% - 15vw);
  42. box-sizing: border-box;
  43. display: flex;
  44. flex-direction: column;
  45. justify-content: space-evenly;
  46. align-items: flex-start;
  47. font-family: PingFang SC;
  48. font-size: 7.5vw;
  49. /* overflow: hidden; */
  50. position: relative;
  51. }
  52. .active {
  53. color: #31b3fe;
  54. }
  55. .content > div {
  56. width: 100%;
  57. white-space: nowrap;
  58. text-overflow: ellipsis;
  59. overflow: hidden;
  60. }
  61. span {
  62. margin-left: 3vw;
  63. }
  64. .tooltip {
  65. position: absolute;
  66. background-color: rgba(0, 0, 0, 0.9);
  67. color: white;
  68. padding: 5px 10px;
  69. border-radius: 4px;
  70. font-size: 5.5vw;
  71. z-index: 100;
  72. top: 10%;
  73. left: 50%;
  74. transform: translateX(-50%);
  75. width: 100%;
  76. /* white-space: nowrap; */
  77. white-space: normal;
  78. display: none;
  79. }
  80. .show-tooltip:hover .tooltip {
  81. display: block;
  82. }
  83. .tooltip::before {
  84. content: "";
  85. position: absolute;
  86. left: 50%;
  87. bottom: -1.8vw;
  88. transform: translateX(-50%) rotate(45deg);
  89. width: 0px;
  90. height: 0px;
  91. border: 2vw solid rgba(0, 0, 0, 0.9);
  92. border-color: transparent rgba(0, 0, 0, 0.9) rgba(0, 0, 0, 0.9)
  93. transparent;
  94. /* box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); */
  95. }
  96. </style>
  97. </head>
  98. <body>
  99. </body>
  100. <script>
  101. document.addEventListener("DOMContentLoaded", function () {
  102. // 获取课程名称所在的div
  103. const courseDiv = document.getElementById("class-name");
  104. // 获取课程名称的span
  105. const courseSpan = courseDiv.querySelector(".course-name");
  106. // 检测是否有省略号
  107. function hasEllipsis(element) {
  108. console.log(element.offsetWidth, element.scrollWidth);
  109. return element.offsetWidth < element.scrollWidth;
  110. }
  111. console.log(hasEllipsis(courseDiv));
  112. // 只有当有省略号时才添加提示框
  113. if (hasEllipsis(courseDiv)) {
  114. const tooltip = document.createElement("div");
  115. tooltip.className = "tooltip";
  116. tooltip.textContent = courseSpan.textContent;
  117. courseDiv.classList.add("show-tooltip");
  118. courseDiv.appendChild(tooltip);
  119. console.log("已添加提示框");
  120. } else {
  121. console.log("没有添加提示框");
  122. }
  123. });
  124. </script>
  125. </html>