UI-事件弹层tips

src/assets/styles/base.scss

@@ -230,6 +230,50 @@ ul {
   width: 100%;
   height: 100vh;
 }
+//tips样式
+.js-tps{
+    
+  // background-image: -moz-linear-gradient($boxBG)!important;
+  // background-image: -webkit-linear-gradient($boxBG) !important;
+  // background-image: linear-gradient($boxBG)!important;
+  // box-shadow: $shadowTitle !important;
+  background: none !important;
+  padding: 0;
+
+
+  .leader-info-container{
+    // padding: .5rem;
+    display: flex;
+    max-width: 40rem;
+    max-height: 75vh;
+    overflow-y: scroll;
+    flex-wrap: wrap;
+    background-image: -moz-linear-gradient($boxBG)!important;
+  background-image: -webkit-linear-gradient($boxBG) !important;
+  background-image: linear-gradient($boxBG)!important;
+  box-shadow: $shadowTitle !important;
+  border-radius: .5rem;
+    .leader-info-list-con{
+      padding: .5rem  1rem;
+      margin:.5rem;
+      background-image: -moz-linear-gradient($GradualGreen)!important;
+      background-image: -webkit-linear-gradient($GradualGreen) !important;
+      background-image: linear-gradient($GradualGreen)!important;
+      border: solid 1px #7dc2eb;
+      box-shadow: $shadowListHover !important;
+      border-radius: 5px;
+      h4{
+        padding: .4rem 0;
+      }
+    }
+    .leader-info-list-con:hover{
+      background-image: -moz-linear-gradient($popupBG)!important;
+      background-image: -webkit-linear-gradient($popupBG) !important;
+      background-image: linear-gradient($popupBG)!important;
+    }
+  }
+
+}
 
  //超图气泡
  .leaflet-popup-content-wrapper {

src/filters.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+
+//---------------------------------字数长度
+
+Vue.filter('ellipsisFont6',(value) => { //字数长度6
+    if (!value) return "";
+    if (value.length > 6) {
+      return value.slice(0, 6) + "...";
+    }
+    return value;
+})
+
+Vue.filter('ellipsisFont8',(value) => { //字数长度8
+    if (!value) return "";
+    if (value.length > 8) {
+      return value.slice(0, 8) + "...";
+    }
+    return value;
+})
+

src/views/eventdetailsdialog.vue

@@ -19,9 +19,21 @@
                   <div class="dia-left-top-carousel">
                     <el-carousel height="30px" direction="vertical" :interval="2000">
                       <el-carousel-item v-if="visuForestCloudYuAnBo!=null">
-                        <el-tooltip class="item" effect="dark" :content="visuForestCloudYuAnBo.reserveName" placement="top-start">
+                        <!-- <el-tooltip class="item" effect="dark" :content="visuForestCloudYuAnBo.reserveName" placement="top-start">
                           <a :href="visuForestCloudYuAnBo.fileUrl" ><span><div style=" width: 50px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;">{{ visuForestCloudYuAnBo.reserveName }}</div></span></a>
-                        </el-tooltip>
+                        </el-tooltip> -->
+                        <el-tooltip 
+                        placement="top" 
+                        popper-class="js-tps" 
+                        :visible-arrow="visuForestCloudYuAnBo.reserveName.length>6" 
+                  >
+                  <div slot="content" class="leader-info-container">
+                    <div class="leader-info-list-con" v-show="visuForestCloudYuAnBo.reserveName.length>6">
+                      <h4>{{ visuForestCloudYuAnBo.reserveName }}</h4>
+                    </div>
+                  </div>
+                  <a :href="visuForestCloudYuAnBo.fileUrl">{{ visuForestCloudYuAnBo.reserveName | ellipsisFont6 }}</a>
+                </el-tooltip>
                       </el-carousel-item>
                       <el-carousel-item v-else>
                         <a href="#">暂未关联预案</a>