<!DOCTYPE html>
<html>

<head>
    <title>防疫管理</title>
    <style>
        html,
        body {
            height: 100%;
            margin:0px;
        }
        .headtool {
            height: 38px;
            margin-bottom:0px;
        }

        .headtool a span{
            margin-top: 2px!important;
            position: relative;
            color: white; 
        }
        a{
            cursor: pointer;
        }

        .main {
            height: calc(100% - 15px);
            border:1px solid #000;
            min-width: 1527px;
        }
<!-- 
        .tablehead_div{
            height: 40px;
            background-color: #61ABDD;
        }

        .tablebody_div{
            height: calc(100% - 55px);
            overflow-y: auto;
        }

         table{
            border-collapse: collapse;
        }

        table tbody{
            table-layout: fixed
        }

        table tbody tr{
            height: 30px;
        }
        table tbody tr:hover{
            background-color: #f2f2f2;
        }
        table tbody td, table th{
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th{
            background-color: #61ABDD;
            height: 40px;
        }
        table tr:nth-child(odd) {
            background: #fff;
        }
        table tr:nth-child(even) {
            background: #F5FAFA;
        } -->

        td.long, th.long{
            width: 308px;
            text-align: center
        }
        td.short, th.short{
             width: 168px;
             text-align: center
        } 

        #editck   div.inputform{
            margin-top: 10px;
            margin-left: 10px;
        }

         #editck   div >input{
           width: 348px;
           height: 25px;
        }
        button{
            width: 70px;
            height: 31px;
            background: #61abdd;
            border-radius: 1.3em;
            cursor: pointer;
        }

        #geometrydiv{
            border: 2px dashed #079bff;
            margin-left: 7px;
            margin-right: 43px;
        }
        
    </style>
    <style>
        select {
        /*清除select默认样式*/
         appearance:none;
         -moz-appearance:none;
         -webkit-appearance:none;
         -ms-appearance:none;
         border:1px solid #CCC;
         width:130px;
         height:34px;
         /*自定义箭头的样式，记得背景一定要加 白色或其他*/
         background:url("../img/select.png") no-repeat scroll right center #fff;
         /*ie下,原默认的箭头样式还是会显示，所以这里把自定义的样式给去除了*/
      }
      input.(type='file', ng-file-select='install($files)',style='opacity:0;filter:alpha(opacity=0);')

      #associatemonitor ul{list-style:none}
      #associatemonitor li{
          list-style:none;
          margin-top: 10px;
      }
      #associatemonitor li:hover{
          background-image: red;
       }
       .zp-div:hover{
            box-shadow: 0 2px 10px rgba(236, 1, 1, 0.2);
            transform: translate3d(0, -2px, 0);
            transition: .5s; 
       }
       .zp-div{
            width:100%;
            height:200px;
            margin-top:5px;
        }
        .zpleft-div{
            width: 48%;
            height: 600px;
            float: left;
            border-right: 1px solid #da7065; 
            overflow-x: hidden;
            overflow-y: auto;
        }
        .zpright-div{
            width: 52%;
            height: 600px;
            float: left;
            overflow: auto;
        }
    </style>
     <link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css"/>
     <link rel="stylesheet" type="text/css" href="/arcgisjsapi/library/3.23/3.23/esri/css/esri.css" />
     <!-- <link rel="stylesheet" type="text/css" href="http://61.155.110.210:7004/arcgis_js_api/library/3.23/3.23/esri/css/esri.css" /> -->    
     <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
     <link href="../bootstrap/css/bootstrap-table.css" rel="stylesheet" />
     <link href="../bootstrap/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
     <link href="../bootstrap/css/fileinput.css" rel="stylesheet" />
     <link rel="stylesheet" href="../css/editarea.css">
    <script src="../js/vue.js"></script>
</head>

<body>
   <div id="vuediv" style="height:100%;margin-left: 5px">
           <!-- <div class="headtool">
        
                 <div class="layui-input-block" style="float:left">
                   <input type="text" name="title" lay-verify="title" autocomplete="off" v-model="searchText" placeholder="筛选" class="layui-input">
                 </div>
            </div> -->
            <div class="main" id="main">
                <!-- <div class="tablehead_div">

                    <table cellspacing="0" cellpadding="0" border="0" >
                        <thead>
                            <tr>
                                <th class="short" style="width: 40px">序号</th>
                                <th class="short">户号</th>
                                <th class="long">姓名</th>
                                <th  class="short">身份证</th>
                                <th  class="short">联系方式</th>
                                <th class="short">隔离时间</th>
                                <th class="short">编辑</th>
                            </tr>
                        </thead>
                    </table>
                </div> -->
            
                <div class="tablebody_div">
                    <table id="areatable" style="color:white"></table>
                    <!-- <table cellspacing="0" cellpadding="0" border="0"  id="monitorId">
                        <tbody>
                            <tr v-for="(item,index) in data_filter ">
                                <td style="text-align:center;width: 40px" class="short" v-text="index+1"></td>
                                <td  class="long"><span v-text="item.name"></span></td>
                                <td class="short"><span  v-text="item.zjhm"></span></td>
                                <td class="short"><span  v-text="item.lxdh"></span></td>
                                <td class="short"><span  v-text="item.lnsj"></span></td>
                                <td  class="short" style="text-align:center;text-decoration:underline">
                                    <a @click="edit(item,index)">编辑图片</a>
                                </td>
                            </tr>
                        </tbody>
                    </table> -->
                </div>
            </div>
   </div>
<!-- //照片上传弹出层 -->
<div class="modal fade" role="dialog" id="photosid" >
    <div class="modal-dialog" role="document" style="width:1200px;">
        <div class="modal-content"> 
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"  style="text-align:center;">照片管理</h4>
            </div>
            <div class="modal-body" style="max-height:700px;overflow-y:auto;" id="zpid"> 
                 <div class="zpleft-div">
                     <div style="height:25px;"><span class="label label-primary">现有照片</span></div>
                    <div class="row">
                        <div v-for="(item,index) in photosj">
                            <div class="col-xs-6 col-md-4" style="height:250px;border: 1px solid #d8bebe;">
                                <div class="zp-div">
                                    <img  v-bind:src="item.src" style="width:100%;height:100%;cursor:pointer;" @click="photoBig(item)" title="点击放大">     
                                </div> 
                                <div style="margin-top:5px;">
                                        <span style="font-size:10px;color:#4ece4e;">{{item.alt}}</span></span>  
                                        <img title="删除照片" uploadUrl="" src="../img/associate_delete.png" @click="deletePhoto(item)" style="height: 14px; cursor: pointer;">                        
                                    <!-- <button type="button" class="btn btn-danger" style="float:right;" @click="deletePhoto(item)">删除</button> -->
                                </div> 
                            </div>  
                        </div>
                    </div>
                 </div>
                 <div class="zpright-div">
                        <div style="height:25px;margin-left:15px;"><span class="label label-warning">待上传照片</span></div>
                        <div class="container kv-main" style="margin-top:-20px;width:590px">
                            <br>
                            <!-- <form enctype="multipart/form-data">                                
                                <div class="form-group">
                                   
                                </div>                                      
                            </form> -->
                            <input id="file-Portrait1"  type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1">
                        </div>                        
                 </div>   
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>                       
            </div>
        </div>
</div>

</body>
<script src="../js/http_request.js"></script>
<script src="../js/jquery-2.2.3.js"></script>
<script src="../js/layui/layui.js"></script>
<script src="../js/exportexcelandprint.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/bootstrap-table.js"></script>
<script src="../bootstrap/js/bootstrap-table-export.js"></script>
<script src="../bootstrap/js/tableExport.js"></script>
<script src="../bootstrap/js/fileinput.js"></script>
<script src="../bootstrap/js/zh.js"></script>
<!-- <script src="../bootstrap/js/fileinput_locale_zh.js"></script> -->
<script src="../js/layui/layui.js"></script>
<script src="../js/terraformer/terraformer.js"></script>
<script src="../js/terraformer/terraformer-wkt-parser.js"></script>
<script src="/arcgisjsapi/library/3.23/3.23/init.js"></script>
<script src="../js/mapInit.js"></script>
<script src="../js/http_request.js"></script>


<script src="../js_src/editfy_src.js"></script>
<script type="text/javascript">
    var dojoConfig = {
        async: true,//这个参数一定要设置，必须要设置true;
        parseOnLoad: true,
        packages: [{ //解释：require(["js/.."],function(){}) 中  js/ 即为 location的值
            name: "bdlib", //对应require引用包里的js
            location: location.pathname.replace(/\/[^/]+$/, "") + "/bdlib" //对应的路径
        }]
    };
</script>
</html>
