note-detail.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>巡检记录详情</title>
  6. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
  7. <meta content="yes" name="apple-mobile-web-app-capable" />
  8. <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  9. <meta content="telephone=no" name="format-detection" />
  10. <!-- photoswipe -->
  11. <link rel="stylesheet" href="plugin/photoswipe/photoswipe.css" />
  12. <link rel="stylesheet" href="plugin/photoswipe/default-skin/default-skin.css" />
  13. <!-- 引入YDUI样式 -->
  14. <link rel="stylesheet" href="http://m.ydui.org/css/ydui.css" />
  15. <!-- 引入YDUI自适应解决方案类库 -->
  16. <script src="http://m.ydui.org/js/ydui.flexible.js"></script>
  17. <style>
  18. body{
  19. background-color: #fff;
  20. font-size: 12px;
  21. }
  22. /*#ECF0F1*/
  23. img,video{
  24. max-width: 100%;
  25. }
  26. .blue{
  27. color: #3498DB;
  28. }
  29. .red{
  30. color: #E74C3C;
  31. }
  32. .top{
  33. text-align: center;
  34. margin: 20px;
  35. }
  36. .top div{
  37. margin:0px auto;
  38. }
  39. .top .icon{
  40. text-align: center;
  41. }
  42. .top .icon img{
  43. margin:0px auto;
  44. width: 60px;
  45. margin-bottom: 10px;
  46. }
  47. .top .note-name,.note-time{
  48. font-size: 14px;
  49. line-height: 30px;
  50. color: #2c3e50;
  51. }
  52. .top .name{
  53. font-size: 14px;
  54. color: #7f8c8d;
  55. }
  56. .m-card{
  57. background-color: #fff;
  58. padding: 0 15px;
  59. /*margin-bottom: 5px;*/
  60. }
  61. .m-card .header{
  62. margin: 0 -15px;
  63. line-height: 40px;
  64. border-bottom: 1px solid #ECF0F1;
  65. background-color: #ECF0F1;
  66. font-size: 14px;
  67. }
  68. .m-card .header span{
  69. margin-left: 15px;
  70. border-left: 3px solid #3498DB;
  71. color: #2980B9;
  72. padding: 2px 0px 2px 10px;
  73. }
  74. .m-card .cell-item {
  75. padding-left: 0;
  76. }
  77. .m-card .cell-item:not(:last-child):after {
  78. margin-left: 0;
  79. }
  80. .m-card .m-cell:after {
  81. border-bottom: 1px solid #ECF0F1;
  82. }
  83. .m-card .m-cell{
  84. margin-bottom: 0px;
  85. }
  86. .m-card .m-cell .cell-title{
  87. width: 50%;
  88. color: #333;
  89. font-size: 14px;
  90. margin: 10px 0px;
  91. }
  92. .m-card .m-cell .cell-content{
  93. width: 50%;
  94. color: #525252;
  95. font-size: 12px;
  96. margin: 10px 0px;
  97. }
  98. .m-card .card-box .title{
  99. font-size: 14px;
  100. margin: 10px 0px;
  101. }
  102. .m-card .card-box .content{
  103. padding: 10px;
  104. /* border: 2px dashed #ECF0F1; */
  105. border-width: 2px;
  106. border-style: dashed;
  107. border-color: #ECF0F1;
  108. }
  109. .m-card .card-box .img-list>figure{
  110. /*float: left;*/
  111. display: inline-block;
  112. width: 32.5%;
  113. vertical-align: top;
  114. }
  115. .m-card .card-box .img-list .img-item{
  116. padding-bottom: 100%;
  117. height: 0;
  118. position: relative;
  119. display: inline-block;
  120. width: 100%;
  121. }
  122. .m-card .card-box .img-list .img-item img{
  123. z-index: 0;
  124. height: 100%;
  125. position: absolute;
  126. width: 100%;
  127. height: 100%;
  128. vertical-align: top;
  129. -o-object-fit: cover;
  130. object-fit: cover;
  131. }
  132. .m-card .card-box .content .file-list .file-item{
  133. display: inline-block;
  134. padding: 10px;
  135. width: 32.5%;
  136. vertical-align: top;
  137. text-align: center;
  138. height: 100px;
  139. }
  140. .m-card .card-box .content .file-list .file-item img{
  141. margin: 0 auto;
  142. width: 40px;
  143. }
  144. .m-card .card-box .content .file-list .file-item p{
  145. margin-top: 10px;
  146. width: 100%;
  147. font-size: 14px;
  148. color: #7f8c8d;
  149. overflow: hidden;
  150. text-overflow: ellipsis;
  151. display: -webkit-box;
  152. -webkit-line-clamp: 2;
  153. line-clamp: 2;
  154. -webkit-box-orient: vertical;
  155. }
  156. .m-card .card-box .button{
  157. background-color: #27AE60;
  158. color: #fff;
  159. width: 110px;
  160. padding: 10px;
  161. }
  162. .m-card .card-box .button img{
  163. float: left;
  164. width: 20px;
  165. margin: 0px 5px;
  166. }
  167. .m-card .card-box .button p{
  168. float: left;
  169. line-height: 18px;
  170. font-size: 14px;
  171. }
  172. .clear{
  173. clear: both;
  174. }
  175. .line{
  176. background-color: #ECF0F1;
  177. height: 5px;
  178. }
  179. .note{
  180. border-bottom: 20px solid #ECF0F1;
  181. padding-bottom: 20px;
  182. }
  183. .fileP{
  184. margin-bottom: 20px;
  185. }
  186. .margin08:last-child{
  187. margin-bottom: 0.8rem
  188. }
  189. .noneMargin:last-child{
  190. margin-bottom: 20px
  191. }
  192. </style>
  193. </head>
  194. <body>
  195. <div class="g-flexview">
  196. <!-- 巡检1 -->
  197. <!--<div class="note ">-->
  198. <!--&lt;!&ndash; 开始结束时间 &ndash;&gt;-->
  199. <!--<div class="top recordInfo">-->
  200. <!--<div class="icon"><img src="./img/0001.png"></div>-->
  201. <!--<div class="note-name">机房巡检记录</div>-->
  202. <!--<div class="note-time">2019-05-04 00:00:00</div>-->
  203. <!--<div class="name">周长浩</div>-->
  204. <!--</div>-->
  205. <!--&lt;!&ndash; 状态 &ndash;&gt;-->
  206. <!--<div class="m-card">-->
  207. <!--<div class="header"><span>状态</span></div>-->
  208. <!--<div class="content">-->
  209. <!--<div class="m-cell">-->
  210. <!--<div class="cell-item">-->
  211. <!--<div class="cell-left">巡检状态1</div>-->
  212. <!--<div class="cell-right"><span class="blue">正常</span></div>-->
  213. <!--</div>-->
  214. <!--<div class="cell-item">-->
  215. <!--<div class="cell-left">巡检状态2</div>-->
  216. <!--<div class="cell-right"><span class="red">异常</span></div>-->
  217. <!--</div>-->
  218. <!--</div>-->
  219. <!--</div>-->
  220. <!--</div>-->
  221. <!--&lt;!&ndash; 状态 &ndash;&gt;-->
  222. <!--<div class="m-card">-->
  223. <!--<div class="header"><span>记录</span></div>-->
  224. <!--<div class="content">-->
  225. <!--<div class="m-cell">-->
  226. <!--<div class="cell-item">-->
  227. <!--<div class="cell-title">输入框:</div>-->
  228. <!--<div class="cell-content"><span class="normal">正常</span></div>-->
  229. <!--</div>-->
  230. <!--<div class="cell-item">-->
  231. <!--<div class="cell-title">输入框:</div>-->
  232. <!--<div class="cell-content"><span class="normal">正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常</span></div>-->
  233. <!--</div>-->
  234. <!--<div class="cell-item">-->
  235. <!--<div class="cell-title">治安保卫队矿区巡逻记录:</div>-->
  236. <!--<div class="cell-content"><span class="normal">正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常正常</span></div>-->
  237. <!--</div>-->
  238. <!--</div>-->
  239. <!--<div class="card-box">-->
  240. <!--<div class="title">图片:</div>-->
  241. <!--<div class="content">-->
  242. <!--<div class="my-gallery img-list" data-pswp-uid="1">-->
  243. <!--<figure>-->
  244. <!--<div class="img-dv img-item"><a href="img/demo/1.jpg" data-size="1920x1080"><img src="img/demo/1.jpg"></a></div>-->
  245. <!--&lt;!&ndash; <figcaption style="display:none;">在这里可增加图片描述</figcaption> &ndash;&gt;-->
  246. <!--</figure>-->
  247. <!--<figure>-->
  248. <!--<div class="img-dv img-item"><a href="http://colliery-system.oss-cn-qingdao.aliyuncs.com/83c7458f8c314ebc82e39e8fad9bf52e.png" data-size="1920x1080"><img src="http://colliery-system.oss-cn-qingdao.aliyuncs.com/83c7458f8c314ebc82e39e8fad9bf52e.png"></a></div>-->
  249. <!--</figure>-->
  250. <!--<figure>-->
  251. <!--<div class="img-dv img-item"><a href="img/demo/3.jpg" data-size="1920x1080"><img src="img/demo/3.jpg"></a></div>-->
  252. <!--</figure>-->
  253. <!--<figure>-->
  254. <!--<div class="img-dv img-item"><a href="img/demo/4.jpg" data-size="1920x1080"><img src="img/demo/4.jpg"></a></div>-->
  255. <!--</figure>-->
  256. <!--<figure>-->
  257. <!--<div class="img-dv img-item"><a href="img/demo/5.jpg" data-size="1920x1080"><img src="img/demo/5.jpg"></a></div>-->
  258. <!--</figure>-->
  259. <!--<figure>-->
  260. <!--<div class="img-dv img-item"><a href="img/demo/6.jpg" data-size="1920x1080"><img src="img/demo/6.jpg"></a></div>-->
  261. <!--</figure>-->
  262. <!--<figure>-->
  263. <!--<div class="img-dv img-item"><a href="img/demo/7.jpg" data-size="1920x1080"><img src="img/demo/7.jpg"></a></div>-->
  264. <!--</figure>-->
  265. <!--<figure>-->
  266. <!--<div class="img-dv img-item"><a href="img/demo/8.jpg" data-size="1920x1080"><img src="img/demo/8.jpg"></a></div>-->
  267. <!--</figure>-->
  268. <!--<figure>-->
  269. <!--<div class="img-dv img-item"><a href="img/demo/9.jpg" data-size="1920x1080"><img src="img/demo/9.jpg"></a></div>-->
  270. <!--</figure>-->
  271. <!--</div>-->
  272. <!--</div>-->
  273. <!--</div>-->
  274. <!--<div class="card-box">-->
  275. <!--<div class="title">文件:</div>-->
  276. <!--<div class="content">-->
  277. <!--<div class="file-list">-->
  278. <!--<div class="file-item">-->
  279. <!--<img src="img/office-icon/doc.png">-->
  280. <!--<p>提交材料提交材料提交材料提交材料提交材料.doc</p>-->
  281. <!--</div>-->
  282. <!--<div class="file-item">-->
  283. <!--<img src="img/office-icon/xlsx.png">-->
  284. <!--<p>提交材料.xls</p>-->
  285. <!--</div>-->
  286. <!--<div class="file-item">-->
  287. <!--<img src="img/office-icon/pptx.png">-->
  288. <!--<p>提交材料.doc</p>-->
  289. <!--</div>-->
  290. <!--<div class="file-item">-->
  291. <!--<img src="img/office-icon/files.png">-->
  292. <!--<p>提交材料提交材料提交材料提交材料提交材料.zip</p>-->
  293. <!--</div>-->
  294. <!--<div class="file-item">-->
  295. <!--<img src="img/office-icon/pdf.png">-->
  296. <!--<p>提交材料.pdf</p>-->
  297. <!--</div>-->
  298. <!--</div>-->
  299. <!--</div>-->
  300. <!--</div>-->
  301. <!--<div class="card-box">-->
  302. <!--<div class="title">录音:</div>-->
  303. <!--<div class="button"><img src="img/小喇叭.png"><p>播放录音</p><div class="clear"></div></div>-->
  304. <!--</div>-->
  305. <!--<div class="card-box">-->
  306. <!--<div class="title">视频:</div>-->
  307. <!--<div class="content">-->
  308. <!--<video controls webkit-playsinline="true" class="video">-->
  309. <!--<source src="http://gslb.miaopai.com/stream/yS0whtjQzVtF9jXgoi-FeUWZE9UbQ9dkwn70~w__.mp4">-->
  310. <!--</video>-->
  311. <!--</div>-->
  312. <!--</div>-->
  313. <!--</div>-->
  314. <!--</div>-->
  315. <!--</div>-->
  316. <!--添加记录-->
  317. </div>
  318. <button type="button" class="btn-block btn-primary submitBtn" style="position: fixed;bottom: 0;left:0;z-index:100;margin: 0;height: 0.8rem;line-height: 0.8rem;font-size: 15px;display: none;">提交信息</button>
  319. <!-- photoswipe弹出层 -->
  320. <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  321. <div class="pswp__bg"></div>
  322. <div class="pswp__scroll-wrap">
  323. <div class="pswp__container">
  324. <div class="pswp__item"></div>
  325. <div class="pswp__item"></div>
  326. <div class="pswp__item"></div>
  327. </div>
  328. <div class="pswp__ui pswp__ui--hidden">
  329. <div class="pswp__top-bar">
  330. <div class="pswp__counter"></div>
  331. <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  332. <!--<button class="pswp__button pswp__button--share" title="Share"></button>-->
  333. <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  334. <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  335. <div class="pswp__preloader">
  336. <div class="pswp__preloader__icn">
  337. <div class="pswp__preloader__cut">
  338. <div class="pswp__preloader__donut"></div>
  339. </div>
  340. </div>
  341. </div>
  342. </div>
  343. <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  344. <div class="pswp__share-tooltip"></div>
  345. </div>
  346. <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  347. </button>
  348. <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  349. </button>
  350. <div class="pswp__caption">
  351. <div class="pswp__caption__center"></div>
  352. </div>
  353. </div>
  354. </div>
  355. </div>
  356. <!-- 引入jQuery 2.0+ -->
  357. <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  358. <!-- 引入YDUI脚本 -->
  359. <script src="//m.ydui.org/js/ydui.js"></script>
  360. <script src="plugin/photoswipe/photoswipe.js"></script>
  361. <script src="plugin/photoswipe/photoswipe-ui-default.js"></script>
  362. <script src="../js/cofig.js"></script>
  363. <script src="../js/function.js"></script>
  364. <script src="recordDetaile.js"></script>
  365. <script>
  366. </script>
  367. </body>
  368. </html>