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.
130 lines
5.9 KiB
130 lines
5.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>视频链接</title>
|
|
<style>
|
|
*{ margin:0; padding:0; font-family: "思源黑体"; text-shadow:none; color:#333;}
|
|
body {min-width: 320px; background:#fff;}
|
|
a{ text-decoration:none;outline: none;cursor: pointer;}
|
|
li{ list-style-type:none;}
|
|
input{ outline:none;}
|
|
img{ border:0;outline:none; display:block;}
|
|
.clear {clear: both;height: 0px;overflow: hidden;}
|
|
|
|
|
|
/*滚动条美化*/
|
|
::-webkit-scrollbar { width: 14px; height: 14px; }
|
|
::-webkit-scrollbar-track,
|
|
::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; }
|
|
::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; }
|
|
::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;}
|
|
::-webkit-scrollbar-corner { background: transparent; }
|
|
|
|
body{ background:#F0F1F7;}
|
|
|
|
.header{ height:3.1em; background:#fff; line-height:3.1em; box-shadow:1px 1px 3px rgba(54,55,84,0.1); position:fixed; top:0px; left:0px; right:0px; z-index:9;}
|
|
.header_sbdbt{ text-align:center; color:#222; font-size:1.1em; font-weight:normal;}
|
|
.header_right{ position:absolute; top:0; right:0;}
|
|
.header_right a{ display:inline-block; width:3.1em; height:3.1em; margin-right:0.2em; }
|
|
.header_right a:hover{ background:rgba(54,55,84,0.1);}
|
|
.header_right .wbwz{font-size:0.6em; text-align:center; line-height:1em; color:#777;}
|
|
.header_right .bttn_spym::before{ content:""; display:block; width:1.6em; height:1.6em; background:url(img/resb_sp.png) no-repeat center; background-size:100%; margin:0.2em auto; margin-top:0.3em; }
|
|
.header_right .bttn_ldsb::before{ content:""; display:block; width:1.6em; height:1.6em; background:url(img/resb_ls.png) no-repeat center; background-size:100%; margin:0.2em auto; margin-top:0.3em;}
|
|
|
|
|
|
.conter_nr{ margin-top:3.1em; margin-bottom:6em;}
|
|
.rwsb_jbxx{ background:#fff; margin-bottom:0.8em; padding:0.8em 0.5em;}
|
|
.rwsb_jbxx .rw_jbx{ padding:0.4em; position:relative;}
|
|
.rw_jbx .rw_mc{ width:5em; position:absolute; top:0.4em; left:0.4em; font-size:0.9em; color:#777;}
|
|
.rw_jbx .rw_nr{ margin-left:5em; font-size:0.9em;}
|
|
|
|
.rwsb_box{ background:#fff; margin-bottom:0.8em; padding:0.8em 0.9em;}
|
|
.wcqk{ padding:0.5em 0em; position:relative; border-bottom:1px solid #eee;}
|
|
.wcqk_sx{ margin-right:5em; font-size:0.9em;}
|
|
.dxtx{position:absolute; top:0.4em; right:0.5em;width:3.3em; cursor:pointer;}
|
|
.dxtx_bk{ position:absolute; top:-0.5em; right:0; width:3.2em; height:1.8em; border-radius:2em; border:0.05em solid #eee;}
|
|
.dxtx_zt{ position:absolute; top:-0.5em; left:0; width:1.8em; height:1.8em; border-radius:2em; border:0.05em solid #eee;
|
|
transition: left 1s;-webkit-transition: left 1s;}
|
|
|
|
.dxtx_xz{position:absolute; top:0.4em; right:0.5em;width:3.3em; cursor:pointer;}
|
|
.dxtx_xz .dxtx_zt{left:1.4em; background:#429CFF; border-color:#429CFF;transition: left 1s;-webkit-transition: left 1s;}
|
|
|
|
.wbsrts{ font-size:0.9em; padding:0.5em 0em; margin-top:0.5em;}
|
|
.wbstk{ background:#F0F1F7; padding:0.5em;}
|
|
.wbstk textarea{ display:block; width:100%; height:5em; line-height:1.5em; background:none; border:0; outline:none;}
|
|
|
|
.pzscts{ font-size:0.9em; padding:0.5em 0em;}
|
|
.pf_4{ width:25%; float:left;}
|
|
.scpic{ border:1px solid #eee; height:5em; background-size:cover; background-position:center; background-repeat:no-repeat; margin:0.2em;}
|
|
.sctp{ display:block;border:1px solid #eee; height:5em; background:#fff url(img/resb_add.png); background-size:100%; background-position:center; background-repeat:no-repeat; margin:0.2em;}
|
|
|
|
.footer{position:fixed; bottom:0px; left:0px; right:0px; z-index:9;}
|
|
.bttn_ty{ display:block; margin:0.5em 1em; margin-top:0em; background-image: -webkit-linear-gradient(left,#26A4FF, #2667FF);box-shadow:1px 1px 1em rgba(38,137,255,0.5); color:#fff; border-radius:6em; padding:0.8em 0em; text-align:center;}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<h2 class="header_sbdbt">任务上报</h2>
|
|
<div class="header_right">
|
|
<a href="#" class="bttn_spym"><p class="wbwz">视频</p></a>
|
|
<a href="#" class="bttn_ldsb"><p class="wbwz">历史</p></a>
|
|
</div>
|
|
</div>
|
|
<div class="conter_nr">
|
|
<div class="rwsb_jbxx">
|
|
<div class="rw_jbx">
|
|
<p class="rw_mc">事件名称</p>
|
|
<p class="rw_nr">名称名称名称名称名称名称</p>
|
|
</div>
|
|
<div class="rw_jbx">
|
|
<p class="rw_mc">任务名称</p>
|
|
<p class="rw_nr">中毒事件</p>
|
|
</div>
|
|
<div class="rw_jbx">
|
|
<p class="rw_mc">开始时间</p>
|
|
<p class="rw_nr">2019-01-24 17：46：43</p>
|
|
</div>
|
|
<div class="rw_jbx">
|
|
<p class="rw_mc">截止时间</p>
|
|
<p class="rw_nr">2019-01-24 17：46：43</p>
|
|
</div>
|
|
</div>
|
|
<div class="rwsb_box">
|
|
<div class="wcqk">
|
|
<p class="wcqk_sx">是否完成</p>
|
|
<div class="dxtx">
|
|
<div class="dxtx_bk"></div>
|
|
<div class="dxtx_zt"></div>
|
|
</div>
|
|
</div>
|
|
<p class="wbsrts">最新进展</p>
|
|
<div class="wbstk">
|
|
<textarea></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="rwsb_box">
|
|
<p class="pzscts">拍照上传</p>
|
|
<div class="tplb">
|
|
<div class="pf_4"><div class="scpic" style=" background-image:url(img/logo.png);"></div></div>
|
|
<div class="pf_4"><div class="scpic" style=" background-image:url(img/logo.png);"></div></div>
|
|
<div class="pf_4"><div class="scpic" style=" background-image:url(img/logo.png);"></div></div>
|
|
<div class="pf_4"><a href="#" class="sctp"></a></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer"><a href="#" class="bttn_ty">上报</a></div>
|
|
|
|
<script src="../resourceNew/js/jquery.min.js"></script>
|
|
<script>
|
|
$(function(){
|
|
$(".dxtx").click(function(){
|
|
$(this).toggleClass("dxtx_xz");
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|