松花湖备份1

songhua-ui/src/assets/styles/shh_index.scss

@@ -427,3 +427,77 @@
   left: 0;
   top: 200px;
 }
+.shh_body{
+	position:relative;
+
+}
+.shh_body .header{
+  position: absolute;
+  left: 0px;
+  top:0px;
+  width: 100%;
+  z-index: 2;
+}
+.shh_body .selectDate{
+  position: absolute;
+  left: 5px !important;
+  top: 30px;
+  width: auto;
+  z-index: 3;
+  right: auto;
+	}
+.shh_body .selectDate ._moreMenu{
+  position: relative;
+	}
+.shh_body .shh_part{
+  position: absolute;
+  right: 10px;
+  top: 80px;
+  width: 340px;
+  z-index: 9;
+  background: #010e21;
+  border: 1px solid #010f4b;
+  border-radius: 5px;
+  padding: 0px 40px;
+	}
+.shh_body #map{
+		position: fixed!important;
+		left: 0px;
+		top:0px;
+		width: 100%;
+  height: 100vh;
+		z-index: 1!important;
+	}
+.shh_part_div{
+  display: flex;
+  flex-direction: row;
+  margin: 35px auto;
+}
+.shh_part_div .shh_txt{
+  margin-left: 20px;
+}
+.shh_part_div h1{
+  color: #fff;
+  font-size: 18px;
+  font-weight: 900;
+  padding-bottom: 10px;
+}
+.shh_part_div p{
+  color: #fff;
+  font-size: 14px;
+  line-height: 22px;
+  position: relative;
+  padding-left: 10px;
+  height: 22px;
+}
+.shh_part_div p:after{
+  content: " ";
+  display: block;
+  width: 5px;
+  height: 5px;
+  border-radius: 25px;
+  background: #11b4d4;
+  position: absolute;
+  left: 0px;
+  top:9px;
+}

songhua-ui/src/views/index1/index.vue

@@ -1,23 +1,66 @@
 <template>
-  <div class="body">
+  <div class="body shh_body">
     <div class="header">
       <h1 class="header_title">松花湖景区通</h1>
       <span class="time">2024年4月23日 星期二 上午 9:51:54</span>
     </div>
-    <div class="borp">
-      <div style="display: block;">
-        停车场222222222222222
+      <div class="shh_part">
+        <div class="shh_part_div">
+          <img src="@/assets/images/shh_part1.png"/>
+          <div class="shh_txt">
+            <h1>一号松花湖停车场</h1>
+            <p>总车位数：100</p>
+            <p>当日营收：100</p>
+            <p>当月营收：100</p>
+          </div>
+        </div>
+        <div class="shh_part_div">
+          <img src="@/assets/images/shh_part2.png"/>
+          <div class="shh_txt">
+            <h1>二号松花湖停车场</h1>
+            <p>总车位数：100</p>
+            <p>当日营收：100</p>
+            <p>当月营收：100</p>
+          </div>
+        </div>
+        <div class="shh_part_div">
+          <img src="@/assets/images/shh_part3.png"/>
+          <div class="shh_txt">
+            <h1>三号松花湖停车场</h1>
+            <p>总车位数：100</p>
+            <p>当日营收：100</p>
+            <p>当月营收：100</p>
+          </div>
+        </div>
+        <div class="shh_part_div">
+          <img src="@/assets/images/shh_part4.png"/>
+          <div class="shh_txt">
+            <h1>四号松花湖停车场</h1>
+            <p>总车位数：100</p>
+            <p>当日营收：100</p>
+            <p>当月营收：100</p>
+          </div>
+        </div>
+        <div class="shh_part_div">
+          <img src="@/assets/images/shh_part5.png"/>
+          <div class="shh_txt">
+            <h1>五号松花湖停车场</h1>
+            <p>总车位数：100</p>
+            <p>当日营收：100</p>
+            <p>当月营收：100</p>
+          </div>
+        </div>
       </div>
       <div class="selectDate">
-        <div class="_moreMenu" style="display: block;top: 34px;width: 120px;margin-right: -20px">
+        <div class="_moreMenu" >
           <ul id="myList">
           </ul>
         </div>
       </div>
       <!--游船视图页面-->
-      <div id="map" style="margin-top: 50px; width: 800px; height: 800px"></div>
+       <div id="map"></div>
     </div>
-  </div>
+
 </template>
 <script>
 
@@ -44,7 +87,7 @@ export default {
         if (res.code == 200) {
           this.dataSource = res.data
           this.map = new BMap.Map('map'); // 创建Map实例
-          this.map.centerAndZoom(new BMap.Point(126.607589, 43.802168), 11); // 初始化地图,设置中心点坐标和地图级别
+          this.map.centerAndZoom(new BMap.Point(126.997589, 43.582168), 11); // 初始化地图,设置中心点坐标和地图级别
           this.map.enableScrollWheelZoom(true);
           let mapStyle = {
             style: 'midnight',
@@ -107,7 +150,7 @@ export default {
       )
     },
     taskJob() {
-      this.map.panTo(new BMap.Point(126.607581, 43.802168)); // 初始化地图,设置中心点坐标和地图级别
+      this.map.panTo(new BMap.Point(126.997590, 43.582169)); // 初始化地图,设置中心点坐标和地图级别
     }
   },