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.
251 lines
8.1 KiB
251 lines
8.1 KiB
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>心脏救助过程</title>
|
|
<link rel="stylesheet" href="./iconfont/iconfont.css">
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
|
<style>
|
|
html,body{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.process_wrap {
|
|
max-width: 393px;
|
|
max-height: 410px;
|
|
overflow: auto hidden;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE 10+ */
|
|
}
|
|
|
|
.process_wrap::-webkit-scrollbar {
|
|
display:none !important;
|
|
width:0;
|
|
height:0 !important;
|
|
color:transparent;
|
|
}
|
|
|
|
.process_title {
|
|
font-size: 16px;
|
|
color: #333;
|
|
margin-top: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.step {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.step p {
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.step .mask {
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background-color: rgba(0, 0, 0, 0.4)
|
|
}
|
|
|
|
.hovericon {
|
|
border-radius: 50%;
|
|
box-shadow: 0px 10px 10px 0px rgb(209, 232, 243);
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
height: 80px;
|
|
}
|
|
|
|
.wancheng {
|
|
position: absolute;
|
|
width: 32px;
|
|
z-index: 999;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -50px;
|
|
margin-left: -16px;
|
|
}
|
|
|
|
#line1,
|
|
#line2 {
|
|
width: 112px;
|
|
margin: 10px;
|
|
margin-top: -60px;
|
|
color: rgb(235, 238, 240);
|
|
}
|
|
|
|
.hoverline-ver {
|
|
color: rgb(176, 184, 200);
|
|
}
|
|
|
|
#line_slant {
|
|
width: 112px;
|
|
/* margin:0 auto; */
|
|
margin-left:140px;
|
|
color: rgb(235, 238, 240);
|
|
transform: translate(-8px, -80px);
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.colorBlue {
|
|
color: #3061D0 !important;
|
|
}
|
|
|
|
.disabled {
|
|
cursor:not-allowed !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="process_wrap">
|
|
<div class="process_title">救助过程</div>
|
|
<div>
|
|
<div class="step">
|
|
<div id="xianchangqueren" style="position:relative;" key="1">
|
|
<img src="./images/finish.png" class="wancheng hidden">
|
|
<span class="mask"></span>
|
|
<img src="./images/xianchangqueren.png" width='80' class="icon">
|
|
<p>第一步<br />现场安全</p>
|
|
</div>
|
|
<div id="line1">
|
|
<i class="iconfont icon-shangbianxiantiao line-ver"></i>
|
|
</div>
|
|
<div id="panduanhujiu" style="position:relative;" key="2">
|
|
<img src="./images/finish.png" class="wancheng hidden">
|
|
<span class="mask"></span>
|
|
<img src="./images/panduanhujiu.png" width='80' class="icon">
|
|
<p>第二步<br />判断呼救</p>
|
|
</div>
|
|
</div>
|
|
<div id="line_slant">
|
|
<i class="iconfont icon-xiebianjiantou line-ver" style="font-size:88px"></i>
|
|
</div>
|
|
<div class="step" style="transform: translateY(-93px);">
|
|
<div id="xinzangfusu" style="position:relative;" key="3">
|
|
<img src="./images/finish.png" class="wancheng hidden">
|
|
<span class="mask"></span>
|
|
<img src="./images/xinzangfusu.png" width="80" class="icon">
|
|
<p>第三步<br />心脏复苏</p>
|
|
</div>
|
|
<div id="line2">
|
|
<i class="iconfont icon-shangbianxiantiao line-ver"></i>
|
|
</div>
|
|
<div id="shiyongaed" style="position:relative;" key="4">
|
|
<img src="./images/finish.png" class="wancheng hidden">
|
|
<span class="mask"></span>
|
|
<img src="./images/shiyongaed.png" width="80" class="icon">
|
|
<p>第四步<br />使用AED</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
let elems = document.querySelectorAll('div[key]');
|
|
|
|
const getIdentifier = () => {
|
|
// const url = window.location.href;
|
|
// let identifier = url.substr(url.lastIndexOf('/') + 1);
|
|
// if (identifier.indexOf('?') !== -1) {
|
|
// identifier = identifier.substr(0, identifier.indexOf('?'))
|
|
// }
|
|
return window.top.location.pathname.split("/").pop();
|
|
}
|
|
|
|
const handleElements = () => {
|
|
for (let i = 0; i < elems?.length; i++) {
|
|
const el = elems[i];
|
|
const key = el.getAttribute("key")
|
|
data?.map(item => {
|
|
if (key == item?.position) {
|
|
|
|
if(data?.[item?.position - 2]?.status == 2 || item?.status == 2 || item?.position == 1){
|
|
if(data?.[item?.position - 2]?.status == 2 && item?.status != 2){ //防止绑定两次相同的点击事件
|
|
el.addEventListener("click", function () {
|
|
window.top.location.href = `https://educoder.net/tasks/${item?.identifier}`
|
|
})
|
|
}
|
|
el.style.cursor="pointer";
|
|
el.addEventListener("mouseover",function(){
|
|
el.getElementsByClassName("mask")[0].classList.add("hidden")
|
|
el.getElementsByTagName('p')[0].classList.add("colorBlue")
|
|
el.getElementsByClassName("icon")[0].classList.add("hovericon")
|
|
})
|
|
el.addEventListener("mouseout",function(){
|
|
if(getIdentifier() != item?.identifier){
|
|
el.getElementsByClassName("mask")[0].classList.remove("hidden")
|
|
el.getElementsByTagName('p')[0].classList.remove("colorBlue")
|
|
}
|
|
el.getElementsByClassName("icon")[0].classList.remove("hovericon")
|
|
})
|
|
}
|
|
else {
|
|
el.getElementsByTagName('span')[0].classList.add("disabled")
|
|
el.getElementsByTagName('span')[0].setAttribute("title","需通过前置步骤才能进入")
|
|
el.getElementsByTagName('p')[0].classList.add("disabled")
|
|
el.getElementsByTagName('p')[0].setAttribute("title","需通过前置步骤才能进入")
|
|
}
|
|
|
|
if(getIdentifier() == item?.identifier && data?.[item?.position - 2]?.status == 2){
|
|
if(item?.position == 2){
|
|
document.getElementById("line1")?.getElementsByClassName("line-ver")[0].classList.add("hoverline-ver")
|
|
}
|
|
if(item?.position == 3){
|
|
document.getElementById("line_slant")?.getElementsByClassName("line-ver")[0].classList.add("hoverline-ver")
|
|
}
|
|
if(item?.position == 4){
|
|
document.getElementById("line2")?.getElementsByClassName("line-ver")[0].classList.add("hoverline-ver")
|
|
}
|
|
}
|
|
if (item?.finished_time) {
|
|
el.addEventListener("click", function () {
|
|
window.top.location.href = `https://educoder.net/tasks/${item?.identifier}`
|
|
})
|
|
el.style.cursor="pointer";
|
|
const wanchengIcon = el.getElementsByClassName("wancheng")[0]
|
|
wanchengIcon.classList.remove("hidden")
|
|
}
|
|
if (getIdentifier() == item?.identifier) {
|
|
const mask = el.getElementsByClassName("mask")[0]
|
|
mask.classList.add("hidden")
|
|
const desc = el.getElementsByTagName('p')[0]
|
|
desc.classList.add("colorBlue")
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
const getData=()=>{
|
|
const id = JSON.parse(sessionStorage.tasksData).myshixun.identifier
|
|
axios.get("https://data.educoder.net/api/myshixuns/"+ id +"/challenges.json", {
|
|
withCredentials: true
|
|
}).then(function (res) {
|
|
data = res?.data || []
|
|
handleElements()
|
|
})
|
|
}
|
|
|
|
let data = [];
|
|
getData();
|
|
// window.addEventListener('message', getData, false);
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |