From b0b6d6fe5537973bd7281d9c60f12ce534b19450 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Wed, 26 Jun 2019 17:20:57 +0800
Subject: [PATCH] build

---
 src/views/home.vue | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 70 insertions(+), 5 deletions(-)

diff --git a/src/views/home.vue b/src/views/home.vue
index 15dae88..3251d9e 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,7 +1,35 @@
 <template>
   <div>
     <div class="banner"></div>
-    <div class="berth"></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>
@@ -49,9 +77,16 @@
 
 <script>
 export default {
-  name: 'home'
+  name: 'home',
+  mounted() {
+    // 百度地图API功能
+    var map = new BMap.Map("map");
+    var point = new BMap.Point(115.078186, 30.232887);
+    map.centerAndZoom(point, 15);
+  }
 }
 </script>
+
 <style scoped lang="scss">
   .banner {
     background: url("../assets/home/banner.png") no-repeat center center;
@@ -59,10 +94,40 @@ export default {
   }
 
   .berth {
-    width: 100%;
+    width: 1200px;
     height: 823px;
-    background: url("../assets/home/berth.png") no-repeat center center;
-    background-size: 100% 100%;
+    padding: 50px 0;
+    position: relative;
+    margin: 0 auto;
+  }
+  .map{
+    width: 1200px;
+    height: 600px;
+  }
+
+  .berth-num{
+    width: 323px;
+    height: 368px;
+    position: absolute;
+    top:200px;
+    right: 20px;
+    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;
--
libgit2 0.21.4