399 lines
10 KiB
HTML
399 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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="./css/video-js.min.css" />
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> -->
|
|
<!-- <script src="./js/hls.js@latest.js"></script> -->
|
|
<link
|
|
href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<!--播放器脚本文件-->
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>
|
|
|
|
<script src="./js/msg.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
background: #fff;
|
|
/* padding: 0 15px; */
|
|
}
|
|
.videoBox {
|
|
width: 100%;
|
|
/* height: 300px; */
|
|
position: relative;
|
|
}
|
|
.content {
|
|
/* padding: 20px 40px; */
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.subTitle {
|
|
border-left: 4px solid #33907d;
|
|
padding-left: 10px;
|
|
color: #33907d;
|
|
font-weight: bold;
|
|
/* border-color: ; */
|
|
margin-bottom: 10px;
|
|
}
|
|
.tip {
|
|
font-size: 12px;
|
|
/* color: #d1d1d1; */
|
|
color: rgba(255, 255, 255, 0.3);
|
|
font-weight: 500;
|
|
padding-left: 10px;
|
|
}
|
|
.layer {
|
|
/* display: flex;
|
|
justify-content: space-between;
|
|
padding: 15px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
border-left: 1px solid #33907d;
|
|
border-bottom: 1px solid #33907d;
|
|
margin-bottom: 10px;
|
|
box-shadow: 0px 1px 5px 0px; */
|
|
display: flex;
|
|
/* justify-content: center; */
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
padding: 15px;
|
|
width: 100%;
|
|
/* height: 130px; */
|
|
/* background: url("./img/layer.png") no-repeat; */
|
|
background: linear-gradient(
|
|
-58deg,
|
|
rgba(255, 255, 255, 0.14) 0%,
|
|
rgba(255, 255, 255, 0.09) 51%,
|
|
rgba(255, 255, 255, 0.15) 100%
|
|
);
|
|
border-radius: 19px;
|
|
background-size: 100%;
|
|
color: #fff;
|
|
position: relative;
|
|
|
|
/* margin: 15px; */
|
|
}
|
|
.layer_colume {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: linear-gradient(
|
|
-58deg,
|
|
rgba(255, 255, 255, 0.14) 0%,
|
|
rgba(255, 255, 255, 0.09) 51%,
|
|
rgba(255, 255, 255, 0.15) 100%
|
|
);
|
|
background-size: cover;
|
|
border-radius: 19px;
|
|
width: 100%;
|
|
/* padding: 30px; */
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
/* padding: 15px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
border-left: 1px solid #33907d;
|
|
border-bottom: 1px solid #33907d;
|
|
margin-bottom: 10px;
|
|
box-shadow: 0px 1px 5px 0px; */
|
|
}
|
|
.status {
|
|
border-radius: 40px;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: content-box;
|
|
background: #c2f9e8;
|
|
color: #478f79;
|
|
font-size: 18px;
|
|
}
|
|
.isNormal {
|
|
font-size: 16px;
|
|
/* font-weight: bold; */
|
|
margin-bottom: 10px;
|
|
}
|
|
.join {
|
|
font-size: 12px;
|
|
color: #d1d1d1;
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
.icon_user {
|
|
background: url("./img/account.png") no-repeat;
|
|
width: 16px;
|
|
height: 16px;
|
|
display: inline-block;
|
|
padding-right: 5px;
|
|
}
|
|
.chosen {
|
|
display: flex;
|
|
}
|
|
.choseItem {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0 50px;
|
|
}
|
|
.zhedang {
|
|
/* background: black; */
|
|
background: url("./img/mask.png");
|
|
width: 200px;
|
|
height: 100px;
|
|
position: absolute;
|
|
right: 0;
|
|
z-index: 1;
|
|
bottom: 4px;
|
|
}
|
|
body {
|
|
background: url("./img/detail_bg.jpg") no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.text_dwxx {
|
|
background: url("./img/text_dwxx.png") no-repeat;
|
|
background-size: 100%;
|
|
width: 85px;
|
|
height: 27px;
|
|
}
|
|
.text_yldgc {
|
|
background: url("./img/text_yldgc.png") no-repeat;
|
|
background-size: 100%;
|
|
width: 108.5px;
|
|
height: 27px;
|
|
margin-top: 38px;
|
|
}
|
|
.icon_position1 {
|
|
background: url("./img/icon_position2.png") no-repeat;
|
|
background-size: 100%;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: inline-block;
|
|
}
|
|
.name {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.roll {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 5px 15px;
|
|
box-sizing: border-box;
|
|
}
|
|
.rollItem {
|
|
/* background: url("./img/btn_roll_bg1.png") no-repeat; */
|
|
background: rgba(255, 255, 255, 0.18);
|
|
border-radius: 8px;
|
|
background-size: 100%;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
display: flex;
|
|
/* padding: 15px; */
|
|
margin-right: 34px;
|
|
margin-top: 12px;
|
|
margin-bottom: 27px;
|
|
padding: 10px 5px;
|
|
box-sizing: border-box;
|
|
width: 50%;
|
|
/* width: 176.5px;
|
|
height: 68.5px; */
|
|
}
|
|
.rollItem:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.success {
|
|
background: url("./img/icon_sucess.png") no-repeat;
|
|
background-size: 100%;
|
|
width: 28.5px;
|
|
height: 27px;
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
}
|
|
.error {
|
|
background: url("./img/icon_wrong.png") no-repeat;
|
|
background-size: 100%;
|
|
width: 28.5px;
|
|
height: 27px;
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
}
|
|
.btn_status {
|
|
background: rgba(255, 255, 255, 0.18);
|
|
width: 98.5px;
|
|
height: 43px;
|
|
border-radius: 22px;
|
|
display: flex;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.rollItemOption {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 12px;
|
|
}
|
|
.rollItemPercent {
|
|
border-left: 1px solid #fff;
|
|
padding-left: 12px;
|
|
}
|
|
.abs {
|
|
position: absolute;
|
|
bottom: -25px;
|
|
left: 0;
|
|
}
|
|
.refresh {
|
|
font-size: 16px;
|
|
border-radius: 6px;
|
|
border: 0;
|
|
width: 66px;
|
|
}
|
|
.err {
|
|
color: #e21e1e;
|
|
}
|
|
/*
|
|
.vjs-error .vjs-error-display {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(29, 29, 61, 0.6);
|
|
background-image: url("../../../assets/img/icon_no_video.png");
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
.vjs-error .vjs-error-display:before {
|
|
display: none;
|
|
}
|
|
|
|
.vjs-error .vjs-error-display:after {
|
|
color: #8483c5;
|
|
content: "取流失败";
|
|
font-family: PingFangSC, PingFangSC-Regular;
|
|
font-size: 20px;
|
|
left: 0;
|
|
margin-top: -0.5em;
|
|
position: absolute;
|
|
text-shadow: 0.05em 0.05em 0.1em #000;
|
|
text-align: center;
|
|
top: 75%;
|
|
vertical-align: middle;
|
|
width: 100%;
|
|
}
|
|
.vjs-modal-dialog-content {
|
|
display: none;
|
|
}
|
|
.video-js .vjs-loading-bar {
|
|
background: #f00;
|
|
height: 10px;
|
|
}
|
|
|
|
|
|
.video-js .vjs-loading-bar .vjs-progress-control {
|
|
animation-duration: 5s;
|
|
}
|
|
|
|
|
|
.video-js .vjs-loading-bar .vjs-loading-bar {
|
|
position: relative;
|
|
}
|
|
|
|
.video-js .vjs-loading-bar .vjs-loading-bar::after {
|
|
content: none;
|
|
}*/
|
|
</style>
|
|
<script src="./js/jquery.min.js"></script>
|
|
<script src="./js/api.js"></script>
|
|
<script src="./js/video.min.js"></script>
|
|
<script>
|
|
var parameterValue;
|
|
|
|
$(function () {
|
|
parameterValue = getParameterByName("id");
|
|
console.log(parameterValue);
|
|
getInfo(parameterValue);
|
|
});
|
|
function getParameterByName(name) {
|
|
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
|
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
|
results = regex.exec(location.search);
|
|
return results === null
|
|
? ""
|
|
: decodeURIComponent(results[1].replace(/\+/g, " "));
|
|
}
|
|
// function initHls() {}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- <div class="status"></div> -->
|
|
<!-- <div class="videoBox"> -->
|
|
<video
|
|
id="player-container-id"
|
|
style="width: 100%"
|
|
height="210"
|
|
muted
|
|
autoplay
|
|
preload="auto"
|
|
playsinline
|
|
webkit-playsinline
|
|
></video>
|
|
<!-- </div> -->
|
|
|
|
<!-- <div class="videoBox">
|
|
<video
|
|
webkit-playsinline="true"
|
|
playsinline="true"
|
|
x5-playsinline
|
|
preload="auto"
|
|
src=""
|
|
id="myVideo"
|
|
autoplay
|
|
style="width: 100% !important; height: 100% !important"
|
|
muted
|
|
></video>
|
|
<script>
|
|
var player = videojs("myVideo");
|
|
</script>
|
|
</div> -->
|
|
<div class="content">
|
|
<!-- <div class="text_dwxx"></div>
|
|
<div class="layer">
|
|
<div class="name">
|
|
<i class="icon_position1"></i> <span>达州区</span>
|
|
</div>
|
|
<span class="btn_status">正常</span>
|
|
<div class="tip abs">网络问题可能导致视频加载失败，请重新进</div>
|
|
</div>
|
|
|
|
<div class="text_yldgc"></div>
|
|
<div class="layer_colume">
|
|
<div style="margin-top: 22px">该点位是否正常通行?</div>
|
|
<div class="tip"><span>0</span>人已参与</div>
|
|
<div class="roll">
|
|
<div class="rollItem">
|
|
<div class="rollItemOption"><i class="success"></i> 是</div>
|
|
<div class="rollItemPercent">50%</div>
|
|
</div>
|
|
<div class="rollItem">
|
|
<div class="rollItemOption"><i class="error"></i> 否</div>
|
|
<div class="rollItemPercent">50%</div>
|
|
</div>
|
|
</div>
|
|
<div class="tip abs">共查数据每2小时更新一次</div>
|
|
</div> -->
|
|
</div>
|
|
</body>
|
|
</html>
|