1202

src/assets/styles/index.scss

@@ -8,4 +8,22 @@
 @font-face {
   font-family: PFlight;
   src: url('../fonts/PingFangLight.ttf') format("truetype");
+}
+
+ul {
+  list-style: none;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width : 4px;
+  height: 4px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 12px;
+  background   : #1d63b3;
+}
+::-webkit-scrollbar-track {
+  border-radius: 12px;
+  background   : #20466a;
 }

src/views/home/Home.vue

@@ -25,7 +25,8 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background-color: rgb(29, 40, 63);
+  /* background-color: rgb(29, 40, 63); */
+  background-color: rgb(150, 150, 150);
   color: #e3e3e3;
   user-select: none;
 }

src/views/ssky/Index.vue

@@ -3,16 +3,50 @@
     <div class="panel-left">
       <span class="title-divider" @click="handlePjylClick" :class="{'highlight': pjylSelected}">浦江游览</span>
       <div class="pl-b1">
-        <span class="title1">码头资源</span>
-        <div class="mtzy-item" v-for="item in mtzyData.value" :key="item.name">
+        <span class="title1">游览资源</span>
+        <!-- <div class="mtzy-item" v-for="item in mtzyData.value" :key="item.name">
           <i class="mi-icon"></i>
           <span class="mi-name">{{item.name}}</span>
           <div class="mi-value">
             <span>{{item.value}}</span>
             <span></span>
           </div>
+        </div> -->
+        <div class="ylzy-item" style="cursor: pointer;" @click="boatDetailShow = !boatDetailShow">
+          <img :src="require('@/assets/imgs/icon-youchuan.png')" alt="">
+          <div>
+            <span>游船数</span>
+            <div>
+              <span>{{ylzyData.boatNum}}</span><span>艘</span>
+            </div>
+          </div>
+        </div>
+        <div class="ylzy-item">
+          <img :src="require('@/assets/imgs/icon-matou.png')" alt="">
+          <div>
+            <span>码头数</span>
+            <div>
+              <span>{{ylzyData.dockNum}}</span><span>个</span>
+            </div>
+          </div>
         </div>
       </div>
+      <div class="boat-detail" v-show="boatDetailShow">
+        <span class="bd-title">游船信息</span>
+        <ul class="bd-list">
+          <li v-for="item, index in ylzyData.boatList" class="bdl-item">
+            <div class="bdl-row1">
+              <span>{{index+1}}</span>
+              <span>{{item.name}}</span>
+              <span>{{item.status}}</span>
+            </div>
+            <div class="bdl-row2">
+              <span>MMSI : </span>
+              <span>{{item.mmsi}}</span>
+            </div>
+          </li>
+        </ul>
+      </div>
       <div class="pl-b2">
         <span class="title1">码头客流量</span>
         <div class="plb2-row1">
@@ -160,7 +194,7 @@ export default {
   function getpjyl() {
     Getpjyl().then(res => {
       if(res.data) {
-        mtzyData.value.forEach(i => {
+        /* mtzyData.value.forEach(i => {
           switch (i.name) {
             case '游船码头':
               i.value = res.data.cruiseShipTerminal
@@ -172,7 +206,7 @@ export default {
               i.value = res.data.officialDock
               break;
           }
-        })
+        }) */
         mtkllData.total = res.data.sumFlights
         mtkllData.catagory.forEach(i => {
           switch(i.name) {
@@ -217,11 +251,35 @@ export default {
     ldklList.onmouseleave = resume
   }
 
-  const mtzyData = reactive({value: [
+  /* const mtzyData = reactive({value: [
     { name: '游船码头', value: 0 },
     { name: '游艇码头', value: 0 },
     { name: '公务码头', value: 0 },
-  ]}) 
+  ]})  */
+
+  const ylzyData = reactive({
+    boatNum: 13840,
+    dockNum: 30,
+    boatList: [
+      { name: '浦江游览1', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览2', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览3', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览4', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览5', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览6', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览7', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览8', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览9', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览10', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览11', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览12', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览13', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览14', status: '航行中', mmsi: '413971338' },
+      { name: '浦江游览15', status: '航行中', mmsi: '413971338' }
+    ]
+  })
+
+  const boatDetailShow = ref(false)
 
   const mtkllData = reactive({
     total: 0,
@@ -419,7 +477,39 @@ export default {
   .pl-b1 {
     box-sizing: border-box;
     padding-right: 40px;
-    .mtzy-item {
+
+    .ylzy-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      color: #fff;
+      &>div {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 231px;
+        height: 73px;
+        background: url('@/assets/imgs/bg-ylzy.png') no-repeat;
+        background-size: 100% 100%;
+        &>span {
+          font-size: 16px;
+          color: rgba(91, 158, 224, 1);
+        }
+        &>div {
+          span:first-child {
+            margin-right: 6px;
+            font-size: 28px;
+            font-weight: bold;
+            font-family: DIN;
+          }
+          span:last-child {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+
+    /* .mtzy-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -469,7 +559,7 @@ export default {
           z-index: 100;
         }
       }
-    }
+    } */
   }
 
   .pl-b2 {
@@ -587,6 +677,97 @@ export default {
 
   }
 
+  .boat-detail {
+    position: absolute;
+    left: 360px;
+    top: 12.4vh;
+    box-sizing: border-box;
+    padding: 15px;
+    width: 325px;
+    height: fit-content;
+    background-color: rgba(0, 17, 51, 0.5);
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 17, 51, 0.2);
+
+    .bd-list {
+      height: fit-content;
+      max-height: 67vh;
+      box-sizing: border-box;
+      padding: 0 10px;
+      margin-top: 15px;
+      overflow-y: auto;
+    }
+
+    .bdl-item {
+      cursor: pointer;
+      margin-bottom: 12px;
+      padding: 5px;
+      &:hover {
+        background-color: rgba(0, 17, 51, 0.2);
+      }
+      .bdl-row1 {
+        display: flex;
+        align-items: flex-end;
+        margin-bottom: 7px;
+        span:nth-child(1) {
+          display: inline-block;
+          width: 24px;
+          height: 24px;
+          background-color: rgba($color: #12477d, $alpha: 0.6);
+          line-height: 24px;
+          text-align: center;
+          margin-right: 10px;
+        }
+        span:nth-child(2) {
+          display: inline-block;
+          width: 140px;
+          font-size: 18px;
+          font-weight: bolder;
+          font-style: italic;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          letter-spacing: 1px;
+        }
+        span:nth-child(3) {
+          display: inline-block;
+          width: 90px;
+          height: 26px;
+          line-height: 30px;
+          text-align: center;
+          font-size: 14px;
+          // font-weight: bold;
+          background: url('@/assets/imgs/bg-boat-status.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .bdl-row2 {
+        padding-left: 34px;
+        font-family: DIN;
+        font-size: 14px;
+        letter-spacing: 1px;
+        span:first-child {
+          font-weight: bold;
+        }
+      }
+    }
+
+    .bd-title {
+      display: block;
+      box-sizing: border-box;
+      width: 293px;
+      height: 41px;
+      background: url('@/assets/imgs/bg-list-title.png') no-repeat;
+      background-size: 100% 100%;
+      padding-left: 45px;
+      line-height: 41px;
+      font-size: 16px;
+      font-weight: bolder;
+      font-style: italic;
+
+    }
+  }
+
   .pr-b1 {
     .prb1-main {
       display: flex;