<!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,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")
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>