tiantanlin
/
SHDJ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        font-family: PingFang SC, sans-serif;
        color: #fff;
        pointer-events: none;
      }
      .container {
        width: 100vw;
        height: 100vh;
        font-size: 9vw;
        box-sizing: border-box;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAAC2CAYAAACCufKcAAAACXBIWXMAAAsTAAALEwEAmpwYAAAHgUlEQVR4nO3cT4gkZx3G8aeq+s/s6EEDQlYvURJk9xACuUXFHIIiJhBBQnIWAop6cY2rIDm5GEQkOQj5I+Qoix6UNUFIyMGAAQmbvenFJSFxLw4JZLM70z1d5aHqnf7120/vToeZHnvn+4Gierp7lt6a+vZbVdPzFppVaF5xk8eBddEsuD13X5Gt0+18UXYbWEeNpjt/Y5a95/WybyzV7vxxXYav81iAdZAHUIelydaSpJ6mO3mMoQpLr1vHxyXiwHpII0Hc+SeSdrv1JDxedusijRhpFCjVhpCWQbidQomjB/D/Lo4SKYTdbhl166Jb193tJoaRRoqepL6koT5q3lvhfwBYrU8Un5O00301c+6RjxgpjKGkDUna/OzJC6t7pcBqXPvPlQfV7eOaPe8opDYCaXbEGKgNY3OlrxRYvU3NH2bV0uz5Qjy/GEg6cRSvFFihE5o9j97roQxPiucYadQAbmVDTcNIF5YkzV56jYdT/e4bgFvZQO2+Pne11f3iLl2W7R/FKwVWKEVRKesgHkrF33SnJwO3svi7uTRISArHVOHOeEg1Y+f8+XsP7zUCh2f8k7Ofn3zt67dld8dDKIW18s9KxeGkzB7T5MtfOXlwLxVYnfqeez5VbG2NsrvzU4mZBwBkCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMw8ulzbmjws5++eVgvBDhMveeevVy8++7OzZ/ZPX+pf/zFF68s/5KAo1e99toHyzx/qUMpZiLEulowE+FCS40YzESIdbVgJsKFOPkGDMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADMIADGYixLHATISAwUyEgMFMhIDBTITAASAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwCAMwGAmQhwLzEQIGMxECBjMRAgYzEQIHADCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAzCAAxmIsSxwEyEgMFMhIDBTISAwUyEwAEgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMAgDMBgJkIcC8xECBjMRAgYzEQIGMxECBwAwgAMwgAMwgAMwgAMwgAMwgAMwgAMwgAMwgAMwgAMwgAMwgCMpcKoXv8bf4+BtVS+9dYHxTvvXN/v85f62PnwkUf4Cz6spf5Tv7y8zPM5lAIMwgCMPIwmW4Bb2cL9vcyeFG/Xh/+6gCNVa36/lzQfRgpiIml3JS8NODq7avf1FMhMGPEOwsBxkoehbt3Ey7UpiBTFSJJ2Xvjd3at7ncdP9cYbW70Xnn8vv78+dWpz/KMzdx7FazpGRprGkQKRNP09RjyMGnffsKOXLzwzuX7thMajgUajgcbjviaTnuq6VNMUq/0/rLl2exVqmqLbfqWqqj954on7qldf3Sou/3s7Pn30i3On6+2PtnTp4hUV5URlWasoGhVF+8MrCi6O7EdRNCrLWlW1q35/rMFgpP5gpJcvXJe0o3ZfHys7nOrJn1uMJe3o2w/9QdInJW1K2pA0lNTvvo9Lvcsp1G6zSu3260vq6/aTg9G5c6eGjz16MT1x8vC3PlPfdedQp7/wZ139cFvtz2NX03c3oti/WnGflrYlXZN0tfs6bduZc404YuT/QKn2h1mrrSpGUXWPYX8KTcNIUQwkDXTmh3+dXPrXmckDD3y6euWV99XvF6OzZ0/rt8/8SVc//K/abZ/e1dwxMW6sUf6GP43jmmbj2Nuu8QdWabrjD7tlo1sGmo2iFCPGsgpNR4tBt7Tb+Knf3Fd+46GHN+7/6uvjMz++Y/zgNyvdfdfTan9oaUlxzBwL46ZqzR8NjdTGsa3p9k2PTSTVKYz4bpYCmb6rtfcTxceXtm8cMdIbz1BVtaF/vv3z3ksv1buPPnaHvvedJ/XH829r+u7mwmDE2L88jnRxKW3TcXisltSkKKTpD67S9J2tF26XYYnfh/2Jbz5ptEjLQN/9wRf1q6d/rUsX/6Iv3fucZkeLNNwzYiwvnkOnJR2SxvO2SXh8b+eOo0Z8d4sjRAyCKJaTtld600mHpimMdoT++8XH9f3Hf683//G+psfDo7DEk29GjP2LH/uIgcQYmrBuYhhpnS+LgiCO5birUulQNV7pSyeL6Vg4DvczJ4jYl/wjHzGQ/LNSe7/ku9GOvmh0IIiPJ23LNGqkGOJFjUrtDyeNDCmG/IqURBzLyrfXog/L7l2Vctj5D0d+HpdGj3Q7bff4CYR4UhiHfRycue1JAKsVD08XncNJsxHkx8ISYRy6pf60FQciHuOqW+eHrbXmj4WJYoUYMVbPXehQdjse++af/MQKEMbRWHRBI4YR11rwNQ4JYRydZbY9QazY/wBurFQjxYDCfgAAAABJRU5ErkJggg==")
          no-repeat;
        overflow: hidden;
        position: relative;
        background-size: cover;
      }
      .box {
        box-sizing: border-box;
        width: 92vw;
        height: 88vh;
        position: absolute;
        top: 3vw;
        left: 4vw;
        padding: 4vw 7vw;
      }
      .header {
        width: 100%;
        line-height: normal;
        font-weight: 400;
        margin-bottom: 3vw;
      }
      .content {
        width: 100%;
        height: calc(100% - 15vw);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-family: PingFang SC;
        font-size: 7.5vw;
        /* overflow: hidden; */
        position: relative;
      }
      .active {
        color: #31b3fe;
      }
      .content > div {
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      span {
        margin-left: 3vw;
      }
      .tooltip {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 5.5vw;
        z-index: 100;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        /* white-space: nowrap; */
        white-space: normal;
        display: none;
      }
      .course-name {
        pointer-events: auto;
      }
      .show-tooltip:hover .tooltip {
        display: block;
      }
      .tooltip::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -1.8vw;
        transform: translateX(-50%) rotate(45deg);
        width: 0px;
        height: 0px;
        border: 2vw solid rgba(0, 0, 0, 0.9);
        border-color: transparent rgba(0, 0, 0, 0.9) rgba(0, 0, 0, 0.9)
          transparent;
        /* box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); */
      }
    </style>
  </head>
  <body></body>
  <script>
    // document.addEventListener("DOMContentLoaded", function () {
    //   // 获取课程名称所在的div
    //   const courseDiv = document.getElementById("class-name");
    //   // 获取课程名称的span
    //   const courseSpan = courseDiv.querySelector(".course-name");
    //   // console.log(courseSpan.innerText);
    //   courseSpan.title = courseSpan.innerText;
    //   const tooltip = document.createElement("div");
    //   tooltip.className = "tooltip";
    //   tooltip.textContent = courseSpan.textContent;

    //   courseDiv.classList.add("show-tooltip");
    //   courseDiv.appendChild(tooltip);
    //   /* // 检测是否有省略号
    //   function hasEllipsis(element) {
    //     console.log(element.offsetWidth, element.scrollWidth);
    //     return element.offsetWidth < element.scrollWidth;
    //   }
    //   console.log(hasEllipsis(courseDiv));
    //   // 只有当有省略号时才添加提示框
    //   if (hasEllipsis(courseDiv)) {
    //     const tooltip = document.createElement("div");
    //     tooltip.className = "tooltip";
    //     tooltip.textContent = courseSpan.textContent;

    //     courseDiv.classList.add("show-tooltip");
    //     courseDiv.appendChild(tooltip);

    //     console.log("已添加提示框");
    //   } else {
    //     console.log("没有添加提示框");
    //   } */
    // });
  </script>
</html>