<template>
  <div>
    <div class="banner">
      <div class="ban-tit"></div>
    </div>
    <div class="berth">
      <h1 class="title">泊位分布</h1>
      <div class="map" id="map"></div>
      <div class="berth-num">
        <p>区域泊位规划</p>
        <ul class="berth-list">
          <li>
            <span class="fl">黄石铁山区</span>
            <span class="fr">123</span>
          </li>
          <li>
            <span class="fl">黄石下陆区</span>
            <span class="fr">5007</span>
          </li>
          <li>
            <span class="fl">黄石黄石港区</span>
            <span class="fr">2395</span>
          </li>
          <li>
            <span class="fl">黄石西塞山区</span>
            <span class="fr">1188</span>
          </li>
          <li>
            <span class="fl">黄石经济开发区</span>
            <span class="fr">413</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="news-wrap">
      <h1 class="title">新闻中心</h1>
      <div class="fl news-bg"></div>
      <ul class="fl news-con">
        <li>
          <ul>
            <li class="fl date">
              <h3>06</h3>
              <h5>06</h5>
            </li>
            <li class="fl des">
              <h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16613')"><a>集聚人才新优势   激活发展新动能</a></h3>
              <p>6月6日上午，市城发集团召开优秀青年人才表彰会，对四家重才爱才先进单位和十名优秀青年人才进行了表彰。</p>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li class="fl date">
              <h3>06</h3>
              <h5>06</h5>
            </li>
            <li class="fl des">
              <h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16611')"><a>黄石城发集团春季招聘体检公告</a></h3>
              <p>根据《黄石市城市发展投资集团有限公司春季招聘公告》及复试情况，现将体检人员名单及有关事项公告如下。</p>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li class="fl date">
              <h3>06</h3>
              <h5>05</h5>
            </li>
            <li class="fl des">
              <h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16610')"><a>黄石城发集团再添新成员</a></h3>
              <p>6月4日，市妇联和市城发集团签订协议，将市妇联所属市天宝幼儿园和市儿童活动中心移交给市城发集团。</p>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {queryParkLotInfoByOrgId} from '@/api/park';
  export default {
    name: 'home',
    mounted() {
      // 百度地图API功能
      var map = new BMap.Map("map", {enableMapClick:false});
      var point = new BMap.Point(115.078186, 30.232887);
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
      var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
      var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
      map.addControl(top_left_control);
      map.addControl(top_left_navigation);
      map.addControl(top_right_navigation);
      this.showParking();
    },
    methods:{
      showParking:function () {
        let req={
          sysCode:'1001',
          orgId:'1003'
        }
        queryParkLotInfoByOrgId(req).then(response =>{
          if(response.code=='8888'){
            debugger
            this.orgs = response.data;
          }else{
            console.log(response);
          }

        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .banner {
    background: url("../assets/home/hs_bannerico.jpg") no-repeat center center;
    background-size: 100% 100%;
    padding-top: 108px;
    .ban-tit{
      height: 80px;
      width: 776px;
      background: url("../assets/home/hs_banner_msg.png") no-repeat center center;
      background-size: 100% 100%;
      margin: 0 auto;
      /*margin-top: 108px;*/
    }
  }

  .berth {
    width: 1200px;
    height: 823px;
    padding: 50px 0;
    position: relative;
    margin: 0 auto;
  }
  .map{
    width: 1200px;
    height: 600px;
  }

  .berth-num{
    width: 323px;
    height: 368px;
    position: absolute;
    top:200px;
    right: 80px;
    background: url("../assets/home/berth.png") no-repeat;
    p{
      padding-top: 20px;
      font-size: 20px;
    }
  }
  .berth-list{
    margin-top: 50px;
    li{
      height: 21px;
      line-height: 21px;
      font-size: 16px;
      color: #314659;
      padding: 0 40px 30px 60px;
      background: url("../assets/home/berth-list.png") no-repeat 30px 0;
      margin-bottom: 15px;
    }
  }
  .news-wrap{
    width: 1200px;
    margin: 0 auto;
    padding: 50px 0;
    overflow: hidden;
  }
  .title{
    padding-bottom: 50px;
    font-size:38px;
    font-family:PingFangSC-Semibold;
    font-weight:600;
    color:rgba(49,70,89,1);
    line-height:46px;
  }
  .news-bg{
    width: 535px;
    height: 401px;
    margin-right: 45px;
    background: url("../assets/home/news-bg.png") no-repeat;
  }

  .news-con {
    width: 535px;
    height: 401px;
  }

  .news-con>li{
    height: 129px;
    border-bottom: 1px solid rgba(216,216,216,1);
    ul{
      padding: 25px 0 0;
      overflow: hidden;
    }
  }

  .date{
    width: 83px;
    height: 83px;
    margin-right: 20px;
    background: #FF5656;
    position: relative;
    h3{
      padding-top: 15px;
      font-size:32px;
      color:rgba(255,255,255,1);
    }
    h5{
      font-size: 12px;
      text-align: right;
      padding-right: 10px;
      color: #Fff;
    }
    &:before{
      content: '';
      position: absolute;
      right: 14px;
      bottom: 36px;
      transform: rotate(-45deg);
      width: 25px;
      height: 1px;
      background:rgba(255,255,255,1)
    }
  }
  .des h3{
    padding-bottom: 15px;
    font-size: 20px;
    color: #0D1A26;
    cursor: pointer;
  }
  .des p {
    width: 430px;
    line-height: 22px;
    color: #314659;
  }
</style>
