28536

project/shandong10086/apps/shandong/monitor/AppMonitorManage/AppMonitorManage.vue

@@ -20,7 +20,10 @@
           :style="currentSplitStyle">
             <AiMonitor :src="m.url" type="slw"></AiMonitor>
           <span>{{ m.name }}</span>
-          <i class="el-icon-circle-close" v-if="m.isShowPlayBtn" title="关闭" @click="removeMonitor(i)"></i>
+          <div class="videoBox-close" @click="removeMonitor(i)" v-if="m.isShowPlayBtn">
+            <i class="el-icon-circle-close"></i>
+            <span>关闭视频</span>
+          </div>
         </div>
       </div>
     </div>
@@ -271,7 +274,7 @@
       background: #000;
       flex-shrink: 0;
 
-      span {
+      & > span {
         position: absolute;
         bottom: 0;
         left: 0;
@@ -287,16 +290,34 @@
         font-size: 16px;
       }
 
-      i {
+      .videoBox-close {
+        display: flex;
         position: absolute;
-        right: 20px;
-        top: 40px;
+        align-items: center;
+        justify-content: center;
+        right: 8px;
+        top: 8px;
         z-index: 11;
-        font-size: 60px;
+        width: 84px;
+        height: 32px;
+        line-height: 1;
+        background: linear-gradient(180deg, #2E3447 0%, #151825 100%);
+        border-radius: 2px;
         cursor: pointer;
+        font-size: 12px;
+        color: #fff;
 
         &:hover {
-          opacity: 0.6;
+          opacity: 0.8;
+        }
+
+        span {
+          margin-left: 4px;
+        }
+
+        i {
+          position: relative;
+          font-size: 16px;
         }
       }