<template>
  <div class="container">
    <div class="searchSty">
      <el-form :inline="true" style="display: flex; justify-content: space-between" :model="queryForm"
               class="demo-form-inline">
        <div>
          <el-form-item label="企业:">
            <el-select v-model="queryForm.qyId" @change="handleQyChange" placeholder="请选择">
              <el-option v-for="item in qyOption" :key="item.qyId" :label="item.qymc" :value="item.qyId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="气站:">
            <el-select v-model="queryForm.qzId" placeholder="请选择">
              <el-option v-for="item in qzOption" :key="item.qzId" :label="item.qzmc" :value="item.qzId">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" icon="el-icon-refresh"
                     style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
                     @click="handleReset" plain>重置
          </el-button>
          <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                     icon="el-icon-search" @click="handleSearch"> 查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mapSty" v-loading="loading">
      <div id="mapContainer"
           class="map"
           tabindex="0">
      </div>
    </div>
    <div ref="companyInfoData"
         v-if="companyInfoDataVisible"
         class="custom-info input-card content-window-card">
      <div class="info-top" style="display: flex; justify-content: space-between;align-items: center">
        <div>
          <span style="color: #ffffff;">企业信息</span>
        </div>
        <div @click="closeInfoWindow" style="display: flex;align-items: center">
          <i class="el-icon-close" style="color: #ffffff; font-size: 20px;cursor: pointer; " ></i>
        </div>
      </div>
      <div class="info-middle"
           style="background-color: white;">
        <el-row>
          <el-col :span="24" v-for="(item,index) in companyInfoList1" :key="'company'+index" >
            <el-col :span="12" v-for="(bitem,index) in item" :key="bitem.name">
              <div class="info-div" style="display: flex" v-if="bitem.type!== 'img'">
                <div style="text-align: right;width: 140px;">
                  {{bitem.name}}：
                </div>
                <div class="info-span" style="flex: 1">{{bitem.value}}</div>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </div>
      <div class="info-bottom" style="position: relative; top: 0px; margin: 0px auto;"><img src="https://webapi.amap.com/images/sharp.png"></div>
    </div>
    <div ref="gasStationInfoData"
         v-if="gasStationInfoVisible"
         class="custom-info input-card content-window-card">
      <div class="info-top" style="display: flex; justify-content: space-between;align-items: center">
        <div>
          <span style="color: #ffffff;">气站信息</span>
        </div>
        <div @click="closeInfoWindow" style="display: flex;align-items: center">
          <i class="el-icon-close" style="color: #ffffff; font-size: 20px;cursor: pointer; " ></i>
        </div>
      </div>
      <div class="info-middle"
           style="background-color: white;">
        <el-row>
          <el-col :span="24" v-for="(item,index) in gasStationInfoList1" :key="'gas'+index" >
            <el-col :span="12" v-for="(bitem,index) in item" :key="bitem.name">
              <div class="info-div" style="display: flex" v-if="bitem.type!== 'img'">
                <div style="text-align: right;width: 170px;">
                  {{bitem.name}}：
                </div>
                <div class="info-span" style="flex: 1">{{bitem.value}}</div>
              </div>
              <div v-else class="info-div" style="display: flex">
                <div style="text-align: right;width: 170px;">
                  {{bitem.name}}：
                </div>
                <div class="info-span" style="flex: 1" v-if="bitem.value!=='— —'">
                  <el-image
                    alt="Loading..."
                    style="width: 100px; height: 100px"
                    :src="bitem.value"
                    :preview-src-list="[bitem.value]" >
                    <div slot="error" class="image-slot">
                      加载中....
                    </div>
                  </el-image>
                </div>
                <div class="info-span" style="flex: 1" v-else>{{bitem.value}}</div>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </div>
      <div class="info-bottom" style="position: relative; top: 0px; margin: 0px auto;"><img src="https://webapi.amap.com/images/sharp.png"></div>
    </div>
  </div>
</template>
<script>
import { getEnterpriseMapPoint,getMapPointDetailInfo } from '@/api/gasMap.js'
import { getCurrentEnterpriseAndStation } from '@/api/common.js'
import AMapLoader from '@amap/amap-jsapi-loader';
import iconImg from '@/assets/images/气瓶图标.png'
import gasStationImg from '@/assets/qpxx/gasStation.png'
import gasStationImgHigh from '@/assets/qpxx/gasStation-high.png'
import companyImg from '@/assets/qpxx/company.png'
import companyImgHigh from '@/assets/qpxx/company-high.png'
import iconImg1 from '@/assets/images/气瓶图标1.png'


export default {
  name: "index",
  data() {
    return {
      reference:{},
      queryForm: {
        qzId: "",  //气站id
        qyId: "" //企业id
      },
      // 控制渲染条件 如果不用v-if会报错 具体可自行尝试
      showPop: false,
      // 保存当前激活的refrence id
      activeId:'',
      qyOption: [],
      allOption:[],
      qzOption: [],
      companyInfoList1:[],
      companyInfoList: [
        {
          name: '企业名称',
          value: '孝感市孝南区丰光储龙液化气有限公司储龙液化气有限公司储龙液化气',
          key:'fQymc'
        },
        {
          name: '企业简称',
          value: '孝聚能燃气',
          key:'fQyjc'
        },
        {
          name: '负责人',
          value: '张三',
          key:'fZjlxm'
        },
        {
          name: '联系电话',
          value: '1810000031',
          key:'fZjldh'
        },
        {
          name: '燃气经营许可证编号',
          value: '鄂20240900009P',
          key:'rqjyxkzbh'
        },
        {
          name: '经营范围',
          value:'孝感城区',
          key:'fJyfg',
        },
        {
          name: '统一社会信用代码',
          value: 'Y914209025769554598',
          key:'fTyshxydm'
        },
        {
          name: '地址',
          value:'华仕顿容器制造有限公司',
          key:'fQydz',
        },
        {
          name: '许可证有效期限',
          value: '2021年7月1号',
          key:'xkzyxqx'
        },
        {
          name: '状态',
          value:'正常营业',
          key:'fZt',
        }],
      gasStationInfoList1:[],
      gasStationInfoList: [
        {
          name: '气站名称',
          value: '汉川刘家隔镇液化石油气站',
          key:'fCzmc'
        },
        {
          name: '企业简称',
          value:'刘家隔镇液化气站',
          key:'fCzjc',
        },
        {
          name: '气站地址',
          value:'孝感市汉川市城隍镇八古村拐弯处直行200米',
          key:'fXxdz',
        },
        {
          name: '气站类型',
          value: '供应站',
          key:'fCzlx'
        },
        {
          name: '所属企业',
          value:'孝感市孝南区丰光储龙液化气有限公司',
          key:'fSsqymc',
        },
        {
          name: '气站标签',
          value: '配送、自提',
          key:'qzbq'
        },
        {
          name: '经营类别',
          value:'瓶装燃气(LPG)',
          key:'jylb',
        },
        {
          name: '企业地址',
          value: '华仕顿容器制造有限公司',
          key:'dz'
        },
        {
          name: '营业时间',
          value:'09:00 ~ 20:00',
          key:'fYykssj',
        },
        {
          name: '状态',
          value: '正常营业',
          key:'zt'
        },
        {
          name: '负责人',
          value: '张三',
          key:'fFzrmc'
        },
        {
          name: '负责人联系电话',
          value: '1810000081',
          key:'fFzrlxfs'
        },
        {
          name: '技术负责人',
          value:'张三',
          key:'fJsfzrmc',
        },
        {
          name: '技术负责人联系电话',
          value: '1810000081',
          key:'fJsfzrlxfs'
        },
        {
          name: '主要设备',
          value: '焊接气瓶',
          key:'zysb'
        },
        {
          name: '统一社会信用代码',
          value: 'Y914209025769554598',
          key:'tyshxydm'
        },
        {
          name: '充装许可证',
          value:'TS4242K20',
          key:'fCzxkz',
          type:'img'
        },
        {
          name: '充装许可证有效期限',
          value: '2021年7月1号',
          key:'czxkzyxqx'
        },
        {
          name: '燃气经营许可证',
          value: '鄂202209200000156',
          key:'fRqjyxkz',
          type:'img'
        },
        {
          name: '燃气经营许可证有效期限',
          value: '2021年7月1号',
          key:'rqjyxkzyxqx'
        },
        {
          name: '发证机关',
          value:'孝南区市场',
          key:'fzjg',
        },
        {
          name: '储存量(立方)',
          value: '200',
          key:'czl'
        },
      ],
      marker:null,
      markers:[],
      clickMapId:'',
      companyInfoDataVisible:false,
      gasStationInfoVisible:false,
      map: null, //地图
      pointData: [],
      centerPoint:[114.347441, 30.50438],
      currentObj:{},
      loading:false
    }
  },
  mounted() {

  },
  created () {
    this.initData();
  },
  methods: {
    initData(){
      this.getEnterpriseAndStationList();
      this.getMarkPoint();
    },
    //获取企业和气站数据
    async getEnterpriseAndStationList(){
      await getCurrentEnterpriseAndStation().then((res)=>{
        console.log('打印当前气站和企业信息数据====',res);
        const { value } = res;
        if(value.length>0){
          this.allOption = value;
          this.qyOption = value?value.map((item)=>{
            return {
              qyId:item.qyId,
              qymc:item.qymc
            }
          }):[];
          console.log('打印 this.qyOption ', this.qyOption );
          console.log('打印 this.allOption ', this.allOption );
        }
      })
    },
    //选择企业的数据
    handleQyChange(val){
      this.qzOption =[];
      this.queryForm.qzId ='';
      this.qzOption = this.allOption.filter((item)=>item.qyId == val)[0].qzxxList;
    },
    //查询按钮
    handleSearch() {
      this.loading = true;
      this.pointData = [];
      this.markers = [];
      this.companyInfoDataVisible = false;
      this.gasStationInfoVisible = false;
      this.getMarkPoint();
    },
    //重置按钮
    handleReset() {
      this.qzOption = [];
      this.queryForm.qzId = '';
      this.queryForm.qyId = '';
      this.handleSearch();
    },
    async getMarkPoint(){
      this.loading = true;
      let params ={
        qzId:this.queryForm.qzId,
        qyId: this.queryForm.qyId,
      }
      await getEnterpriseMapPoint(params).then((res)=>{
        let { code, value} = res;
        if(!value){
         this.loading = false;
         return 
        }
        if(code == 200){
          const { qyxxList, qzxxList } = value;
          let pointDataArray =[]
          qyxxList.length>0?qyxxList.map((item)=>{
            if(item.current){
              this.centerPoint= [item.fJd, item.fWd]
            }
            pointDataArray.push({
              ...item,
              type:'qy',
              isActive:false
            })
          }):[];
          qzxxList.length>0?qzxxList.map((item)=>{
            if(item.current){
              this.centerPoint= [item.fJd, item.fWd]
            }
            pointDataArray.push({
              ...item,
              type:'qz',
              isActive:false
            })
          }):[];
          console.log('打印value====>', pointDataArray);
          this.pointData = pointDataArray;
          console.log('打印pointData',this.pointData);
          this.centerPoint=[pointDataArray[0].fJd,pointDataArray[0].fWd]
          this.initMap();
        }
      })
    },
    //获取地图数据
    initMap() {
      AMapLoader.reset();
      AMapLoader.load({
        "key": "331eb7ad61de4d49e14bef6afd11b54d",// 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": ['AMap.ToolBar', 'AMap.Driving'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        "AMapUI": {
          "version": "1.1",
          "plugins": []
        },
        Loca: {
          version: '2.0' //数据可视化
        }
      }).then((AMap) => {
        console.log("初始化地图",this.map);
          // this.map = new AMap.Map('mapContainer', {//设置地图容器id
          //   viewMode: '2D', //是否为3D地图模式
          //   zoom: 15, //初始化地图层级
          //   center: this.centerPoint,//初始化地图中心点
          // });
        // ===========天地图代码==============
        if(!this.map){
          // 防止二次初始化导致拖拽失效
          this.map = new T.Map('mapContainer',{
            projection: 'EPSG:900913' 
          });
        }
        this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 15);
        //允许鼠标双击放大地图
        this.map.enableScrollWheelZoom();
        let arr =[];

        for (let i = 0; i < this.pointData.length; i++) {
          // 引入本地图片
          const localIcon = new T.Icon({
            iconUrl: this.pointData[i].type=='qy'?companyImg:gasStationImg,
            iconSize: new T.Point(30, 34),
            iconAnchor: new T.Point(30, 34),
          });
          //向地图上添加自定义标注
          if(this.pointData[i].fJd && this.pointData[i].fWd){
            this.marker = new T.Marker(new T.LngLat(this.pointData[i].fJd, this.pointData[i].fWd), {icon: localIcon});
            arr.push( Object.assign(this.pointData[i], {
              mapId: this.pointData[i].id,
            }))
            this.marker['arr'] = arr;
            this.marker['isActive'] = this.pointData[i].isActive;
            this.marker['type'] = this.pointData[i].type;
            this.marker['tid'] = this.pointData[i].id
            this.marker.addEventListener("click", this.markerClick.bind(null,this.marker));
            this.markers.push(this.marker);
            this.map.addOverLay(this.marker);
          }
        }
        this.loading = false;
        console.log('所有makers点',this.markers);
        // ===========天地图代码==============


        //信息窗口实例
        //循环所有的标记点
        // console.log('打印pointData',this.pointData);
        // let arr =[];
        // for (let i = 0; i < this.pointData.length; i++) {
        //   // 引入本地图片
        //   const localIcon = new AMap.Icon({
        //     size: new AMap.Size(30, 34), // 图标尺寸
        //     image: this.pointData[i].type=='qy'?companyImg:gasStationImg, // 图片的URL
        //     imageSize: new AMap.Size(30, 34), // 图标所用图片大小
        //   });
        //   var marker = new AMap.Marker({
        //     position: [this.pointData[i].fJd, this.pointData[i].fWd],
        //     map: this.map,
        //     icon:localIcon,
        //     offset: new AMap.Pixel(-15, -20),
        //   });
        //   arr.push( Object.assign(this.pointData[i], {
        //     mapId: marker._amap_id,
        //   }))
        //   // 将创建的点标记添加到已有的地图实例+
        //   marker['arr'] = arr;
        //   marker['isActive'] = this.pointData[i].isActive;
        //   marker['type'] = this.pointData[i].type;
        //   this.map.add([marker]);
        //   marker.on("click", this.markerClick);
        //   this.markers.push(marker);
        //   marker.emit('click', {target: marker});
        // }


        // AMap.plugin('AMap.DistrictSearch', function () {
        //   //创建行政区查询对象
        //   var options = {
        //     subdistrict: 0, //获取边界不需要返回下级行政区
        //     extensions: 'all',//返回行政区边界坐标组等具体信息
        //     level: 'province'//查询行政级别为省
        //   };
        //   var district = new AMap.DistrictSearch(options);
        //   district.search('湖北省', function (status, result) {
        //     // console.log('打印status', status);
        //     // 获取湖北省的边界信息
        //     var bounds = result.districtList[0].boundaries
        //     var polygons = [];
        //     if (bounds) {
        //       for (var i = 0, l = bounds.length; i < l; i++) {
        //         //生成行政区划polygon
        //         var polygon = new AMap.Polygon({
        //           map: this.map,
        //           strokeWeight: 1,
        //           path: bounds[i],
        //           fillOpacity: 0.7,
        //           fillColor: '#CCF3FF',
        //           strokeColor: '#CC66CC'
        //         })
        //         polygons.push(polygon)
        //       }
        //       // 地图自适应
        //       this.map.setFitView()
        //     }
        //   });
        // })
      }).catch(e => {
        console.log(e);
      });
    },
    //点击点标记事件
  async  markerClick(event,e) {
    console.log("event",event);
    console.log('打印e',e.target);
    // return
    let arrNew = e.target.arr.filter((x) => x.id == e.target.tid);
    console.log('打印arrNew[0]',arrNew[0]);
      // 引入本地图片
      // if (!e.target.isActive) {
      //   e.target.isActive = true;
      //   this.companyInfoDataVisible = false;
      //   this.gasStationInfoVisible = false;
      //   this.clickMapId = '';
      // } else {
        // this.clickMapId = e.target._amap_id;
        this.clickMapId = e.target.tid;
        console.log("true",this.clickMapId);
        switch  (e.target.type){
          case 'qy':
            this.companyInfoDataVisible = true;
            this.companyInfoList = await this.$assignValues(arrNew[0], this.companyInfoList);
            this.companyInfoList1 = await this.$createDoubleArray(this.companyInfoList,2);
            console.log("企业1",this.companyInfoList);
            console.log("企业2",this.companyInfoList1);
            break;
          case 'qz':
            this.gasStationInfoVisible = true;
            this.gasStationInfoList = await this.$assignValues(arrNew[0], this.gasStationInfoList);
            console.log("气站",this.gasStationInfoList);
            this.gasStationInfoList.map(async (item)=>{
              if(item.type == 'img' && item.value !=='— —'){
                console.log('打印item', item);
                let gasStationImg = JSON.parse(item.value);
                console.log('打印gasStationImg', gasStationImg);
                let gasStationUrl = await this.$getPhotoUrl(gasStationImg[0].response.fileId);
                item.value = gasStationUrl;
                console.log('打印gasStationUrl===', gasStationUrl);
              }
            })
            this.gasStationInfoList1 = await this.$createDoubleArray(this.gasStationInfoList,2);
            break;
        }
      // }
      // this.markers.forEach((marker) => {
      //   const newIcon = new AMap.Icon({
      //     size: new AMap.Size(30, 34), // 图标尺寸
      //     image: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL
      //     imageSize: new AMap.Size(30, 34), // 图标所用图片大小
      //   });
      //   const oldIcon = new AMap.Icon({
      //     size: new AMap.Size(30, 34), // 图标尺寸
      //     image: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
      //     imageSize: new AMap.Size(30, 34), // 图标所用图片大小
      //   });
      //   if (marker._amap_id !== this.clickMapId) {
      //     marker.isActive = true;
      //     marker.setIcon(oldIcon);
      //   }else{
      //     marker.isActive = false;
      //     console.log('打印marker',marker);
      //     marker.setIcon(newIcon);
      //   }
      // });
      this.markers.forEach((marker) => {
        const newIcon = new T.Icon({
          iconSize: T.Point(30, 34), // 图标尺寸
          iconUrl: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL
          iconAnchor: T.Point(30, 34), // 图标所用图片大小
        });
        const oldIcon = new T.Icon({
          iconSize: T.Point(30, 34), // 图标尺寸
          iconUrl: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
          iconAnchor: T.Point(30, 34), // 图标所用图片大小
        });
        if (marker.tid !== this.clickMapId) {
          // marker.isActive = true;
          marker.setIcon(oldIcon);
        }else{
          // marker.isActive = false;
          console.log('打印marker',marker);
          marker.setIcon(newIcon);
        }
      });
    // console.log('打印arrNew[0]',arrNew[0])
      // infoWindow.setContent(e.target.content);
    if(!e.target.isActive){
      // 如果已选中，则不做处理
      let content = e.target.type=='qy'?this.$refs.companyInfoData: this.$refs.gasStationInfoData;
      var lnglat = new T.LngLat(e.lnglat.lng, e.lnglat.lat);
      console.log("content",content);
      console.log("lnglat",lnglat);
      var infoWin = new T.InfoWindow();
      infoWin.setLngLat(lnglat);
      infoWin.setContent(content);
      this.map.openInfoWindow(content,lnglat);
      this.map.panTo(lnglat);
      // this.map.centerAndZoom(lnglat);
      this.map.checkResize(); 
      // infoWindow.open(this.map, e.target.getPosition());
    }
      // 更新选中的标记点
      // 设置当前点击的标记点样式
      // e.target.setIcon(newIcon); // 或者其他方法来重置样式
    },
    // async getPointDetailInfo(fqptm,e){
    //   let params ={
    //     qptm:fqptm
    //   }
    //   await getMapPointDetailInfo(params).then(async(res)=>{
    //     console.log('打印res',res);
    //     const { value} = res;
    //     const {qpdqlzs,qpOrderInfoVO} = value;
    //     var infoWindow = this.createInfoWindow();
    //     infoWindow.open(this.map, e.target.getPosition());
    //     this.devInfoList = await this.$assignValues(value, this.devInfoList);
    //     this.nodeList = await this.$createDoubleArray(qpdqlzs,5);
    //     console.log('打印this.nodeList', this.nodeList);
    //     if(!qpOrderInfoVO){
    //       this.orderHolderInfoList1 =[];
    //     }else{
    //       this.gasStationInfoList =  await this.$assignValues(qpOrderInfoVO, this.orderHolderInfoList);
    //       this.orderHolderInfoList1 = await this.$createDoubleArray(this.orderHolderInfoList,2);
    //     }
    //     this.devInfoList1  = await this.$createDoubleArray(this.devInfoList,2);
    //   })
    // },
    //4.构建自定义窗体
    createInfoWindow(val) {
      console.log('打印val', val);
      let infoWindowData = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: val.type=='qy'?this.$refs.companyInfoData: this.$refs.gasStationInfoData,
        // content: this.getContent(),
        offset: new AMap.Pixel(-180, -50),
      })
      console.log("infoWindowData",infoWindowData);
      return infoWindowData
    },
    closeInfoWindow(e) {
      // 引入本地图片
      this.markers.forEach((marker) => {
        console.log('打印marker', marker);
        // const oldIcon = new AMap.Icon({
        //   size: new AMap.Size(30, 34), // 图标尺寸
        //   image:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
        //   imageSize: new AMap.Size(30, 34), // 图标所用图片大小
        // });
        const oldIcon = new T.Icon({
          iconSize: T.Point(30, 34), // 图标尺寸
          iconUrl:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
          iconAnchor: T.Point(30, 34), // 图标所用图片大小
        });
        if (marker.tid == this.clickMapId) {
          marker.isActive = true;
          marker.setIcon(oldIcon);
        }
      });
      this.clickMapId = '';
      // this.map.clearInfoWindow();
      this.map.closeInfoWindow();
    },
  }
}

</script>
<style lang="scss">
.popoverSty.el-popover {
  background: #ec661e;
  //border-color: #000022;
  border: 1px solid #ec661e !important;
  border-radius: 10px;
  opacity: 0.92;
  color: #fff;
}
/* 下方是去除三角箭头的代码 */
.popoverSty.el-popper[x-placement^=top] .popper__arrow::after {
  border-top-color: #ec661e !important;
}
</style>
<style lang="scss" scoped>

::v-deep .tdt-infowindow-content-wrapper{
  box-shadow:none;
  background:rgba(255, 255, 255, 0);
}

::v-deep .tdt-infowindow-close-button{
  display: none;
}

::v-deep .tdt-infowindow-tip-container{
  display: none;
}

::v-deep .tdt-infowindow{
  bottom: 40px !important;
  left: -360px !important;
}

#mapContainer {
  min-width: 865px;
  min-height: 630px;
}

.container {
  .searchSty {
    background: #ffffff;
    padding: 0 20px;
    padding-top: 20px;
  }

  .mapSty {
    padding: 20px;
    margin-top: 20px;
    background: #ffffff;
  }
  .labelSty{
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 10px;
  }
  .completeSty{
    background-color: #ea5504;
  }
  .uncompleteSty{
    background-color: #ccd0e5;
  }
  .textSty{
    white-space: nowrap; /* 设置为单行 */
    max-width: 200px; /* 设置最大宽度 */
    overflow: hidden; /* 隐藏超出部分的内容 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
}
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  /* width: auto; */
  width: 45rem;
  padding: 0;
}
.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

.info-top {
  position: relative;
  //background: none repeat scroll 0 0 #f9f9f9;
  background: #0076d5;
  border-bottom: 1px solid #ccc;
  //border-radius: 5px 5px 0 0;
}

.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}
.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

.info-middle {
  font-size: 14px;
  padding: 5px 15px;
  line-height: 25px;
  color: #999DB0;
}

.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}
.info-bottom img {
  position: relative;
  z-index: 104;
}

/* span {
  margin-left: 5px;
  font-size: 11px;
} */

.info-middle img {
  float: left;
  margin-right: 6px;
}

.info-span {
  /* margin-left: 35px; */
  //font-size: 11px;
  color: #333333;
}

.info-div {
  width: 100%;
  display: inline-block;
  margin-left: 10px;
}

.info-img {
  width: 40px;
  height: 40px;
}

.info-a-title {
  color: #000000;
  font-size: 16px;
}

</style>