数字大屏新增全屏按钮

mes-ui/mes-echarts/src/views/index.vue

@@ -4,8 +4,12 @@
       <dv-loading v-if="loading">Loading...</dv-loading>
       <div v-else class="host-body">
         <!--        头标-->
+
         <div class="d-flex bg-header">
-          <div style="margin: 50px 30px;font-size: 20px;">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</div>
+          <div style="margin: 50px 30px;font-size: 20px; font-weight: 700;">
+            <span class="F11" @click="F11">全屏</span>
+            {{ dateYear }} {{ dateWeek }} {{ dateDay }}
+          </div>
         </div>
         <!-- <div class="d-flex jc-center">
           <dv-decoration-10 class="dv-dec-10" />
@@ -133,6 +137,17 @@ export default {
     clearInterval(this.timing);
   },
   methods: {
+    F11() {
+      // console.log("F11");
+      this.isFullscreen = !this.isFullscreen;
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
+      }
+    },
     timeFn() {
       this.timing = setInterval(() => {
         this.dateDay = formatTime(new Date(), "HH: mm: ss");
@@ -164,23 +179,23 @@ export default {
       width: 23px;
       height: 13px;
       border-radius: 4px;
-      background: #00FFFF;
+      background: #00ffff;
     }
-     .col2 {
+    .col2 {
       margin-right: 5px;
       display: inline-block;
       width: 23px;
       height: 13px;
       border-radius: 4px;
-      background: #ED3F14;
+      background: #ed3f14;
     }
-     .col3 {
+    .col3 {
       margin-right: 5px;
       display: inline-block;
       width: 23px;
       height: 13px;
       border-radius: 4px;
-      background: #FF9900;
+      background: #ff9900;
     }
   }
 }
@@ -189,4 +204,10 @@ export default {
   text-align: center;
   margin-top: 20px;
 }
+.F11 {
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 18px;
+  margin-right: 20px;
+}
 </style>