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.
335 lines
8.9 KiB
335 lines
8.9 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 {
|
|
position: relative;
|
|
width: 393px;
|
|
}
|
|
|
|
.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;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.step .mask {
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background-color: rgba(0, 0, 0, 0.4)
|
|
}
|
|
|
|
#xianchangqueren:hover .icon {
|
|
border-radius: 50%;
|
|
box-shadow: 0px 10px 10px 0px rgb(209, 232, 243);
|
|
}
|
|
|
|
#xianchangqueren:hover p {
|
|
color: #3061D0;
|
|
}
|
|
|
|
#xianchangqueren:hover .mask {
|
|
display: none;
|
|
}
|
|
|
|
#panduanhujiu:hover .icon {
|
|
border-radius: 50%;
|
|
box-shadow: 0px 10px 10px 0px rgb(209, 232, 243);
|
|
}
|
|
|
|
#panduanhujiu:hover p {
|
|
color: #3061D0;
|
|
}
|
|
|
|
#panduanhujiu:hover .mask {
|
|
display: none;
|
|
}
|
|
|
|
#xinzangfusu:hover .icon {
|
|
border-radius: 50%;
|
|
box-shadow: 0px 10px 10px 0px rgb(209, 232, 243);
|
|
}
|
|
|
|
#xinzangfusu:hover p {
|
|
color: #3061D0;
|
|
}
|
|
|
|
#xinzangfusu:hover .mask {
|
|
display: none;
|
|
}
|
|
|
|
#shiyongaed:hover .icon {
|
|
border-radius: 50%;
|
|
box-shadow: 0px 10px 10px 0px rgb(209, 232, 243);
|
|
}
|
|
|
|
#shiyongaed:hover p {
|
|
color: #3061D0;
|
|
}
|
|
|
|
#shiyongaed:hover .mask {
|
|
display: none;
|
|
}
|
|
|
|
.icon {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
height: 80px;
|
|
}
|
|
|
|
.wancheng {
|
|
position: absolute;
|
|
width: 32px;
|
|
z-index: 999;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -49px;
|
|
margin-left: -16px;
|
|
}
|
|
|
|
.line1,
|
|
.line2 {
|
|
width: 112px;
|
|
margin: 10px;
|
|
margin-top: -60px;
|
|
color: rgb(235, 238, 240);
|
|
}
|
|
|
|
.line1:hover .line-ver {
|
|
color: rgb(176, 184, 200);
|
|
}
|
|
|
|
.line2:hover .line-ver {
|
|
color: rgb(176, 184, 200);
|
|
}
|
|
|
|
.line_slant:hover .line-ver {
|
|
color: rgb(176, 184, 200);
|
|
}
|
|
|
|
.line_slant {
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-top: -82px;
|
|
margin-left:10px;
|
|
transform: translateX(-70%);
|
|
color: rgb(235, 238, 240);
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.colorBlue {
|
|
color: #3061D0 !important;
|
|
}
|
|
|
|
/* 弹窗样式 */
|
|
.popup {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
left: 50%;
|
|
top: 0;
|
|
width: 380px;
|
|
height: 50px;
|
|
margin-left: -190px;
|
|
background: #FEF0F0;
|
|
border-radius: 4px;
|
|
border: 1px solid #FDE2E2;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #F56C6C;
|
|
}
|
|
|
|
.popup-content {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.close {
|
|
color: #DCDFE6;
|
|
float: right;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<div class="process_title">救助过程</div>
|
|
<div class="process_wrap">
|
|
<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 class="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 class="line_slant">
|
|
<i class="iconfont icon-xiebianjiantou line-ver" style="font-size:88px"></i>
|
|
</div>
|
|
<div class="step">
|
|
<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 class="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>
|
|
|
|
<div id="popup" class="popup">
|
|
<div class="popup-content">
|
|
<i class="iconfont icon-weishezhi" onclick="hidePopup()"></i>
|
|
<p id="tipInfo" style="padding-left:14px;padding-right:90px">请先完成第一步，才能进入下一步</p>
|
|
<span class="close" onclick="hidePopup()">×</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
let elems = document.querySelectorAll('div[key]');
|
|
let tip = document.getElementById("tipInfo");
|
|
const Upper = {
|
|
"1": "一",
|
|
"2": "二",
|
|
"3": "三",
|
|
"4": "四"
|
|
};
|
|
function showPopup() {
|
|
var popup = document.getElementById("popup");
|
|
popup.style.display = "block";
|
|
}
|
|
|
|
function hidePopup() {
|
|
var popup = document.getElementById("popup");
|
|
popup.style.display = "none";
|
|
}
|
|
|
|
|
|
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) {
|
|
el.addEventListener("click", function () {
|
|
if (item?.status == 2 || item?.position ==1 || getIdentifier()== item?.identifier)
|
|
window.top.location.href = `https://educoder.net/tasks/${item?.identifier}`
|
|
else{
|
|
if(data?.[item.position - 2]?.status != 2){
|
|
const step = Upper[item?.position - 1]
|
|
window.top.location.href = `https://educoder.net/tasks/${getIdentifier()}?step=${step}`
|
|
}else{
|
|
window.top.location.href = `https://educoder.net/tasks/${item?.identifier}`
|
|
}
|
|
}
|
|
// else {
|
|
// if (item.position != 1 && data[item.position - 2].status != 2 && getIdentifier() != item
|
|
// .identifier) {
|
|
// const step = Upper[item.position - 1]
|
|
// tip.innerText = `请先完成第${step}步，才能进入下一步`
|
|
// showPopup()
|
|
// }
|
|
// }
|
|
})
|
|
if (item.finished_time) {
|
|
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")
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
let data = [];
|
|
// handleElements()
|
|
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()
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |