<template>
  <div class="app-container" style="padding-top: 20px;height: 120vh; background-color: #fff;padding: 20px; "  >
    <div >
     <div>

       <div style="border-bottom: 1px solid #E6E6E6;margin-bottom: 30px;cursor: pointer;" class="qieht">
         <!-- <p @click="isqie(0)" :class="isgse == 0 ? 'isesf' : ''">地图范围</p> -->
         <!-- <p @click="isqie(1)" :class="isgse == 1 ? 'isesf' : ''">园区地图</p> -->
       </div>

       <el-row style="padding-top: 0;">
         <el-col :span="16">
           <el-col :span="22">
             <div class="topug" >
               <p>考勤规则设置</p>
               <p @click="submitForm">保存</p>
             </div>
           </el-col>
           <el-form ref="form" :model="form" :rules="rules" label-width="70px">
           <el-col :span="20" class="shish">
           </el-col>
           <el-col :span="22">
             <el-form-item label="打卡地点" prop="staffName">
                       <el-input  :disabled="dish" id="tipinput" v-model="form.staffName" placeholder="请输入详细地址" />
            </el-form-item>
           </el-col>
           <el-col :span="22">
             <el-col :span="24" >
               <el-form-item label="打卡时间" prop="kaTimeAmIn" >
                    <div style="display: flex; " class="jisnge">
                      <el-time-picker
                      :disabled="dish"
                      style="width: 160px; margin-right: 10px;"
                          v-model="form.kaTimeAmIn"
                          value-format="HH:mm:ss"
                          format="HH:mm:ss"
                          placeholder="请选择上午上班">
                        </el-time-picker>
                        <el-time-picker
                        :disabled="dish"
                        style="width: 160px;"
                            v-model="form.kaTimePmOut"
                            value-format="HH:mm:ss"
                            format="HH:mm:ss"
                            placeholder="请选择下午下班">
                          </el-time-picker>
                      <div style="display: flex; align-items: center;" class="giet">
                        <span style="font-size: 14px;color: #606266; width: 100px; margin-left: 10px;font-weight: 700;">半径范围</span>
                        <el-input @blur="fanhseg" v-model="form.kaRadius" placeholder="请输入范围" />
                        <span style=" margin-left: 10px; font-weight: 800;font-size: 13px;color: #3D455B;">米</span>
                      </div>
                    </div>
               </el-form-item>
             </el-col>
             <el-col :span="24" v-show="time">
               <el-form-item label="打卡时间" prop="kaTimeAmOut" >
                    <div style="display: flex; " class="jisnge">
                      <el-time-picker
                      :disabled="dish"
                      style="width: 160px; margin-right: 10px;"
                          v-model="form.kaTimeAmOut"
                          value-format="HH:mm:ss"
                          format="HH:mm:ss"
                          placeholder="请选择上午下班">
                        </el-time-picker>
                        </el-time-picker>
                        <el-time-picker
                        :disabled="dish"
                        style="width: 160px;"
                            v-model="form.kaTimePmIn"
                            value-format="HH:mm:ss"
                            format="HH:mm:ss"
                            placeholder="请选择下午上班">
                          </el-time-picker>

                    </div>
               </el-form-item>
             </el-col>
           </el-col>
           <el-col :span="24">
             <el-col :span="8">
               <el-form-item label="拍照打卡" prop="isPhoto">
                 <el-select
                 :disabled="dish"
                   v-model="form.isPhoto"
                   placeholder="拍照打卡"
                   clearable
                 >
                   <el-option
                     v-for="dict in dict.type.sys_yes_no"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
                   />
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="打卡次数" prop="kaNum">
                 <el-select
                 :disabled="dish"
                   v-model="form.kaNum"
                   placeholder="打卡次数"
                   clearable
                   @change="jues"
                 >
                   <el-option
                     v-for="dict in cinume"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
                   />
                 </el-select>
               </el-form-item>
             </el-col>
             <!-- <el-col :span="8">
               <el-form-item label="部门名称" prop="deptId">
                 <treeselect :normalizer="normalizer" v-model="form.deptId" @select="selectDepart" :options="deptOptions" :show-count="true" placeholder="请选择部门名称" />
               </el-form-item>
             </el-col> -->

           </el-col>
           <el-col :span="22" >
             <el-form-item label="地图标点" prop="staffName">
                  <div style="width: 100%;height: 360px;">
                   <div  id="gaode_Map" style="width:100%;height: 100%;">
                    </div>
                  </div>
             </el-form-item>

           </el-col>
           </el-form>
         </el-col>
         <el-col :span="8">
            <el-form ref="form" :model="formt" :rules="rulest" label-width="70px">
                   <el-row v-for="(item,index) in shangwu" :key="index" style="margin: 0;">
                     <div class="topug" style="padding-right: 30px;">
                       <p>特殊规则设置{{(index + 1)}}</p>
                       <!-- <p @click="submitForm">保存</p> -->
                     </div>
                    <el-col :span="24">
                      <el-form-item label="时间范围" prop="isPhoto">
                        <el-date-picker
                        :disabled="dishte"
                        value-format="yyyy-MM-dd"
                              v-model="item.ststmer"
                              type="daterange"
                              align="right"
                              unlink-panels
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="nhsefa(item)"
                              >
                            </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="18">
                      <el-form-item label="部门名称" prop="deptId">
                        <treeselect :check-strictly="true"  multiple :disabled="dishte" v-model="item.depu" @select="selectDepart" :flat="true" @open-change="cnshe(item,index)" @deselect="nghses" :options="deptOptions" :show-count="true" placeholder="请选择部门名称" />
                        <!-- <el-input v-model="form.deptName" placeholder="请输入部门名称" /> -->
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" >
                       <div style="padding: 0 5px; font-size: 12px;display: flex; align-items: center;justify-content: space-between; height: 37px;">
                        <!-- <span>新增</span> -->
                         <img @click="shangwuxin" style="width: 16px; height: 16px;margin-right: 5px;" src="../../../assets/images/icon_kcgl_ht_add.png" alt="" >
                         <img @click="shangwudel(index)" style="width: 16px; height: 16px;" src="../../../assets/images/icon_qjlb_del.png" alt="" >
                         <!-- <span>删除</span> -->
                       </div>
                    </el-col>

                   </el-row>
                   <div style="display: flex;" v-if="dishte == false">
                     <p class="plo" @click="submitFormts">保存</p>
                     <p style="margin-left: 10px; background-color: #e6edff;color: #3f73fd; border: 1px solid #3f73fd;" class="plo" @click="submitForm">
                       取消</p>
                   </div>
            </el-form>
         </el-col>
       </el-row>



     </div>
	</div>


  </div>
</template>
<script>
  //引入缺德地图
  import AMapLoader from '@amap/amap-jsapi-loader'
  window._AMapSecurityConfig = {
      securityJsCode: 'b06df55c66884ce2c9a3f3281c2c5ca9'  //填写你的安全密钥
  }
  import { listConfig, getConfig, delConfig, addConfig, updateConfig,listConfigts, getConfigts, delConfigts, addConfigts, updateConfigts } from "@/api/kaoqin/config";
// import Bscroll from "better-scroll";
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
export default {
  name: "Post",
  dicts: ['sys_normal_disable','sys_yes_no'],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
	  opent:false,
	  bg:null,
    titles:'',
      // 表单参数
      form: {
        kaoqinId: null,
        deptId: null,
        kaAddress: null,
        kaLog: null,
        kaLat: null,
        kaNum: 2,
        kaRadius: null,
        kaSort: null,
        kaTimeAmIn: null,
        kaTimeAmOut: null,
        kaTimePmIn: null,
        kaTimePmOut: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        staffName:null,
        kaLog:null,
        kaLat:null,
        kqLongitude:null,
        kqLatitude:null,
        fanwei:null,
        isPhoto:'N'
      },
      rules:{},
      areaList:[],
          searchData:[],
    isgse:0,
    linkage:true,
    rulest:{},
    visible: false,
          isDetail: false,
          dataForm: {
            kqName: undefined,
            kqLocation: undefined,
            kqLongitude: undefined,
            kqLatitude: undefined,
            kqWorkUnit: undefined,
            cronkqAccredit: [],
            kqValidCardRange: undefined,
          },
          input: "",
          map: null,
          auto: null,
          placeSearch: null,
          lnglat: [],
          markers: [],
          position: {},
          polyEditor :null,
          polygonPaths :[],
          polygonList :[],
          inspectionRouteList :[],
          initFormData :{},
          cndhe:[],
          njki:true,
          // 部门树选项
          deptOptions: undefined,
          cinume:[{'value' : 2,'label':'一天两次'},{'value' : 4,'label':'一天四次'}],
          nhe:false,
          time:false,
          formt:{},
          shangwu:[
            {startTime:null,endTime:null,deptId:null,deptName:null,turw:null,ststmer:null,depu:[]},
            {startTime:null,endTime:null,deptId:null,deptName:null,turw:null,ststmer:null,depu:[]},
            ],
          dish:false, //考勤配置
          dishte:false, //特殊考勤配置
          value2:null,
          turw:[],
          deptOptionsp:[]
     }
  },
  created() {


   if(this.$route.query.id != null){
     if(this.$route.query.nuje == 1){
       // 考勤修改
       this.nhe = true
       this.njki = false
       this.dish = false
       this.dishte = true
       this.getngs()
     }else{
       //特殊
       this.dish = true
       this.dishte = false
       this.getTreeselect()
       this.getTreeselectp()
       this.getngsts()
     }

   }else{
     // 新增
     this.nhe = false
       this.njki = true
       this.dish = false
       this.dishte = false
       this.getTreeselect()
       this.getTreeselectp()
   }
  },
  mounted() {
    if(this.$route.query.id != null){

    }else{
      // 新增
      let sngse = [117.211954, 31.839676]
      this.initMap(sngse)
    }

  },
   beforeDestroy() {

    },
  methods: {
    nhsefa(val){
    console.log(val)
    },
    shangwudel(index){
     this.shangwu.splice(index,1)
    },
    shangwuxin(){
      this.shangwu.push({checkType:null,checkTime:null,checkAddress:null},)
    },
    /** 考勤配值提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.$route.query.id != null) {
            updateConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$router.go(-1)
              // this.getList();
            });
          } else {
            addConfig(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$router.go(-1)
              // this.getList();
            });
          }
        }
      });
    },
    submitFormts(){
       // this.turw
       for(var i=0; i<this.shangwu.length; i++){
         if(this.shangwu[i].ststmer == null ){
           this.$message.error('请输入时间');
           return
         }else{
           if(this.shangwu[i].ststmer.length == 0 ){
             this.$message.error('请输入时间');
             return
           }
         }
         this.shangwu[i].startTime = this.shangwu[i].ststmer[0]
         this.shangwu[i].endTime = this.shangwu[i].ststmer[1]
         if(this.shangwu[i].depu != null){
           // this.shangwu[i].deptId = this.shangwu[i].depu.split(',')
           let sngsu=[]
           for(var u=0;u< this.shangwu[i].depu.length;u++){
             this.deptOptionsp.filter(ry=>{
               console.log(this.shangwu[i].depu)
               if(this.shangwu[i].depu[u] == ry.deptId){
                 let nghse={deptId:ry.deptId,deptName:ry.deptName}
                sngsu.push(nghse)
               }
             })
           }
           let sdeid=[]
           let sdeidname=[]
           sngsu.filter(rou=>{
             sdeid.push(rou.deptId)
             sdeidname.push(rou.deptName)
           })
           this.shangwu[i].deptId = sdeid.join(',')
           this.shangwu[i].deptName = sdeidname.join(',')
           // console.log(sdeid,sdeidname)
            // this.shangwu[i].depu.filter(rut={
            //     for(var u=0;u<this.deptOptionsp.length)
            // })
         }else{
           this.$message.error('请选择部门');
           return
         }
       }
       this.formt.attendanceTimeList = this.shangwu
   // return
      if (this.$route.query.id != null) {
        updateConfigts(this.formt).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.$router.go(-1)
          // this.getList();
        });
      } else {
        addConfigts(this.formt).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.$router.go(-1)
          // this.getList();
        });
      }
    },
    getngs(){
      this.nhe = true
      this.njki = false
      getConfig(this.$route.query.id).then(response => {
        if(response.data.kaNum !== null){
          response.data.kaNum = response.data.kaNum - 0
        }
        if(response.data.kaNum == 2){
          this.time = false
        }
        this.form = response.data;
        this.form.staffName = this.form.kaAddress
        let sngse = [this.form.kaLog, this.form.kaLat]
        this.cndhe = sngse
        this.initMap(sngse)
        setTimeout(() => {
            this.addCircle()
           }, 4000);

        // this.center.lng = this.form.lng
        // this.center.lat = this.form.lat
        this.nameadd = []
        this.hfes = true
        // this.mapCenter = this.form.kaAddress
        this.nhe = true
        // this.makerCenter(this.form.kaAddress)
        this.open = true;
        this.title = "修改考勤规则配置";
      });
    },
    getngsts(){
      getConfigts(this.$route.query.id).then(response => {
        this.shangwu[0] = response.data
        this.$set(this.shangwu[0], 'ststmer', [])
        this.shangwu[0].ststmer.push(response.data.startTime)
        this.shangwu[0].ststmer.push(response.data.endTime)
        this.shangwu[0].depu = []
        this.shangwu[0].depu = response.data.deptId.split(',')
       console.log(this.shangwu[0])
       let sngse = [116.581523, 30.631708]
       this.cndhe = sngse
       this.initMap(sngse)
      })
    },
    jues(e){
       console.log(e);
       if(e==4){
         this.time = true
       }else{
         this.time = false
         this.form.kaTimeAmOut = null
         this.form.kaTimePmIn = null
       }
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselectp() {
      listDept().then(response => {
        this.deptOptionsp = response.data
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    // 地图切换
    isqie(row){
      this.isgse = row
    },
    huoaq(){
     console.log(4,this.areaList)
     if(this.areaList.length !=0){
       // this.areaList
       //   for(let key in people ){
       //       console.log(key+':'+people[key]);
       //   }
     }else{
       this.$message.error('请先选择省市区');
       return
     }
    },
    chesef(){
     console.log(4,this.areaList)
     if(this.areaList.length !=0){
       let sngse = ''
       this.areaList.filter(rou=>{
         for(let key in rou ){
             if(key != ''){
                sngse = sngse + rou[key]
               console.log(key+':'+rou[key]);
               this.form.staffName = sngse
             }
         }
       })
     }else{

     }
    },


    initMap(row) {
    		AMapLoader.reset()
          AMapLoader.load({
            key: "fba818d626f91cf5a13cd61943a7667e",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.AutoComplete', 'AMap.Marker', 'AMap.PlaceSearch', 'AMap.Geolocation',"AMap.Driving","AMap.Walking","AMap.Geocoder","AMap.Scale"],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          }).then((AMap) => {
            console.log(AMap)
            this.map = new AMap.Map("gaode_Map", {  //设置地图容器id
              // mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
              viewMode: "3D",    //是否为3D地图模式
              zoom: 18,           //初始化地图级别
              center: row, //初始化地图中心点位置
              // center: [116.310791, 40.003419], //初始化地图中心点位置
              pitch: 40, // 地图俯仰角度，有效范围 0 度- 83 度
              terrain: true, // 开启地形图
              buildingAnimation: true,//楼块出现是否带动画
              zoomToAccuracy: true,

            });
    		// this.getCenter()
           // this.setMarker(centerLen)
                     // 关键字查询
                     this.searchMap();
                     // 监听鼠标点击事件
                     this.map.on("click", this.clickMapHandler);
          }).catch(e => {
            console.log(e);
          })
    },
    // 关键字查询
        searchMap () {
          // 搜索框自动完成类
          this.auto = new AMap.AutoComplete({
            input: "tipinput", // 使用联想输入的input的id
          });
          //构造地点查询类
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
          });
          // 当选中某条搜索记录时触发
          this.auto.on("select", this.selectSite);
        },
        //选中查询出的记录
        selectSite (e) {
          console.log(e)
          this.circles = []
          if (e.poi.location) {
            this.lnglat = [e.poi.location.lng, e.poi.location.lat];
            this.placeSearch.setCity(e.poi.adcode);
            this.placeSearch.search(e.poi.name); //关键字查询
            let geocoder = new AMap.Geocoder({});
            let that = this;
            geocoder.getAddress(this.lnglat, function (status, result) {
              if (status === "complete" && result.regeocode) {
                console.log(result.regeocode)
                that.province = result.regeocode.addressComponent.province;
                that.city = result.regeocode.addressComponent.city;
                //自己想要赋的值，根据自己的做修改
                // that.$set(that.form, "province", that.province);
                // that.$set(that.form, "city", that.city);
                // that.$set(that.form, "address", e.poi.name);
                that.$set(that.form, "kaAddress", result.regeocode.formattedAddress);
                // that.$set(
                //   that.form,
                //   "coordinate",
                //   e.poi.location.lng + "," + e.poi.location.lat
                // );
                that.form.kaLog = e.poi.location.lng
                that.form.kaLat = e.poi.location.lat
                 console.log(that.form,5)//纬度，经度
                 let sge=[e.poi.location.lng,e.poi.location.lat]
                 let sngse={'center':sge}
                 that.circles.push(sngse)
                 that.cndhe = sge
                 that.initMap(sge)
              } else {
              }
            });
          } else {
            this.$message.error("查询地址失败，请重新输入地址");
          }
        },
        // 点击地图事件获取经纬度，并添加标记
        clickMapHandler (e) {
          this.dataForm.kqLongitude = e.lnglat.getLng();
          this.dataForm.kqLatitude = e.lnglat.getLat();
          this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
          this.setMarker(this.lnglat);
          // 点击地图上的位置，根据经纬度转换成详细地址
          let geocoder = new AMap.Geocoder({});
          let that = this;
          geocoder.getAddress(this.lnglat, function (status, result) {
            if (status === "complete" && result.regeocode) {
              that.dataForm.kqLocation = result.regeocode.formattedAddress;
            } else {
            }
          });
          this.position = {
            longitude: e.lnglat.getLng(),
            latitude: e.lnglat.getLat(),
            address: that.address,
          };

          this.input = that.address; //把查询到的地址赋值到输入框
        },

   //  添加标记
       setMarker (lnglat) {
         this.removeMarker();
         let marker = new AMap.Marker({
           position: lnglat,
         });
         console.log(lnglat,8)
         marker.setMap(this.map);
         this.markers.push(marker);
         this.cndhe = lnglat
         // this.addCircle()
       },
       // 删除之前后的标记点
       removeMarker () {
         if (this.markers) {
           this.map.remove(this.markers);
         }
       },
       fanhseg(){
          this.addCircle()
       },
       addCircle() {
             this.circleList = [];
             console.log(this.circles,this.cndhe)
             // for (let i = 0; i < this.circles.length; i += 1) {
               // let center = this.circles[i].center;
               let circle = new AMap.Circle({
                 center: this.cndhe,
                 radius: this.form.kaRadius, // 半径
                 strokeColor: "#F33", // 线颜色
                 // strokeColor: this.rgb(),  // 线颜色
                 zIndex: 101,
                 strokeOpacity: 1, //线透明度
                 strokeWeight: 3, //线粗细度
                 bubble: true, // 是否将覆盖物的鼠标或touch等事件冒泡到地图上
                 fillColor: "#7c7cfb", //填充颜色
                 fillOpacity: 0.35 //填充透明度
               });
               circle.setMap(this.map);
               this.circleList.push(circle);
               this.map.setFitView([circle]);
                     // var circleEditor = new AMap.CircleEditor(this.map, circle);
             // }
           },
           // 部门选中
      selectDepart(val){
        console.log(val,this.shangwu)
        // this.form.deptName =val.label
        // for(var i=0; i < val.depu.length; i++){
        //   val.turw.filter(rou=>{
        //     if(val.depu[i] != rou.id){
        //       val.turw.push(val.depu)
        //     }
        //   })
        // }
        console.log(val.turw,3)
      },
      nghses(val){
        console.log(val,this.shangwu)
        // console.log(val)

        // this.form.deptName =val.label
      },
      cnshe(val,index){
        console.log(val,index,1)
      },




  }
};
</script>

<style lang="scss">
  .ditweyuq{
    .el-upload-dragger{
      // border: none;
      border-color: #E6E6E6;
      width: 100%;
      height: 220px;
    }
    .el-upload--picture-card{
      border: none;
       width: 100%;
    }
    .component-upload-image{
      width: 100%;
      margin-top: 20px;
    }
    .qundew{
      margin-right: 28px !important;
      margin-top: 40px !important;
    }
  }
  .shish{
    .el-form-item--medium .el-form-item__content{
      line-height:16px;
    }
    .area-select-wrap .area-select:nth-child(1){
      margin-left: 0;
    }
  }
  .botsne{

  }
  .jisnge{
    .el-input__inner{
      width: 158px;
    }
  }
  .giet{
    .el-input__inner{
      width: 100%;
    }
  }

	.isjses{
		.el-tabs--left .el-tabs__nav-wrap.is-left::after{
			width:6px;
		}
		.el-tabs--left .el-tabs__active-bar.is-left,{
			width:6px;
		}
	}
	.ingaqe{
		.el-input--medium{
			width:100%;
		}
	}
	.nhgrls{
		.el-dialog__body{
			padding: 0;
		}
	}
  .hyr{
    span{
      text-decoration:underline;
    }
  }
</style>
<style scoped lang="scss">
  .qieht{
    display: flex;
    p{
      margin: 0;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 15px;
      color: #3D455B;
      margin-right: 20px;
      padding: 0 10px;
      margin-bottom: -1px;
      line-height: 40px;
    }
    .isesf{
      color: #03BF8A;
       border-bottom: 2px solid #03BF8A;
    }
  }
  .topug{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    p{
      margin: 0;
    }
    p:nth-child(1){
      font-family: PingFang SC;
      font-weight: 800;
      font-size: 15px;
      color: #333333;
      border-left: 6px solid #03BF8A;
      padding-left: 10px;

    }
    p:nth-child(2){
      width: 86px;
      height: 38px;
      background: #03BF8A;
      border-radius: 4px;
      text-align: center;
      line-height:38px ;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 13px;
      color: #FFFFFF;
    }
  }
  .plo{
    width: 86px;
    height: 38px;
    background: #3f73fd ;
    border-radius: 4px;
    text-align: center;
    line-height:38px ;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 13px;
    color: #FFFFFF;
  }
	.nghwgq{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 90px;
		div{
			color:#aaa;
		}
	}

	.nhgwesvq{
		width:1610px !important;
	}





  .lqw{
    padding: 0 10px;
    margin: 0;
    margin-bottom: 20px;
  }
.nhgel{
  height: 170px;
  background-color: #313b61;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
	.app-container{
		// background-color: #fafafa;
		padding-top: 10px;
		height: 180vh;

	}
	.ntgs{
	position: relative;
		background-color: #fff;
		padding: 5px;
    height: 100%;
		// border-radius: 5px;
		padding-top: 10px;
	     padding: 10px 20px;
		.pagination-container{
			height: 50px;
		}
	}
	.nghfs{
	position: relative;
		background-color: #fff;
		padding-top: 18px !important;
		padding: 5px;
		// border-radius: 5px;
		// margin-bottom: 20px;
	}
	.ksf{
		img{
			width:100%;
			height: 100%;
		}
	}
   .ingwfaq{
	   font-weight: bold;
	   font-size: 16px;
   }
  .search_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;

    .label {
      color: #000;
      width: 100px;
    }
  }

  .content {
    position: relative;
  }

  #panel {
    position: absolute;
    top: 50px;
    right: 20px;
  }

  #gaode_Map {
    overflow: hidden;
    width: 100%;
    height: 540px;
    margin: 0;
  }

  .amap-sug-result {
    z-index: 2999 !important;
  }


</style>
