Browse Source

更改全屏按钮图标

gcz 3 years ago
parent
commit
6d2ce009bc
3 changed files with 34 additions and 4 deletions
  1. 12 0
      src/assets/img/back.svg
  2. 14 0
      src/assets/img/full.svg
  3. 8 4
      src/components/header.vue

+ 12 - 0
src/assets/img/back.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 145.3 134.1" style="enable-background:new 0 0 145.3 134.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#3F87FF;}
+</style>
+<path class="st0" d="M140.8,54.2c-2.9-6.8-7.1-13-12.3-18.2c-7.5-7.5-16.7-12.7-27.1-15.3c-4.7-1.2-9.5-1.6-14.3-1.6H38.2V2.8
+	c0-2.4-2.8-3.7-4.6-2.2L2,26.3c-2.7,2.2-2.7,6.2,0,8.4l31.7,25.7c1.8,1.5,4.6,0.2,4.6-2.2V41.9h47.9c18.1,0,34.3,13.1,36.2,31.1
+	c2.1,20.7-14.3,38.2-34.5,38.2H22c-6.3,0-11.4,5.1-11.4,11.4c0,6.3,5.1,11.4,11.4,11.4h65c4.8,0,9.6-0.4,14.3-1.6
+	c10.5-2.6,19.7-7.8,27.1-15.3c5.3-5.3,9.4-11.4,12.3-18.2c3-7.1,4.6-14.6,4.6-22.4C145.3,68.9,143.8,61.3,140.8,54.2L140.8,54.2z"/>
+</svg>

+ 14 - 0
src/assets/img/full.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 177.4 177.4" style="enable-background:new 0 0 177.4 177.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#3F87FF;}
+</style>
+<path class="st0" d="M155.3,177.4H22.2C9.9,177.4,0,167.5,0,155.3L0,22.2C0,9.9,9.9,0,22.2,0h133.1c12.2,0,22.2,9.9,22.2,22.2v133.1
+	C177.4,167.5,167.5,177.4,155.3,177.4z M166.4,22.2c0-6.1-5-11.1-11.1-11.1H22.2c-6.1,0-11.1,5-11.1,11.1v133.1
+	c0,6.1,5,11.1,11.1,11.1h133.1c6.1,0,11.1-5,11.1-11.1V22.2z M149.7,83.2c-3.1,0-5.5-2.5-5.5-5.5l0.2-36.5l-37.6,37.6L98.9,71
+	l37.7-37.7H99.8c-3.1,0-5.5-2.5-5.5-5.5s2.5-5.5,5.5-5.5h49.7c1.5,0,2.9,0.6,4,1.7c1.1,0.9,1.7,2.2,1.7,3.9v49.9
+	C155.3,80.7,152.8,83.2,149.7,83.2z M77.6,155.3H27.9c-1.5,0-2.9-0.6-4-1.7c-1.1-0.9-1.7-2.2-1.7-3.9l0-49.9c0-3.1,2.5-5.5,5.5-5.5
+	c3.1,0,5.5,2.5,5.5,5.5l-0.2,36.5l37.6-37.6l7.8,7.8l-37.7,37.7h36.8c3.1,0,5.5,2.5,5.5,5.5S80.7,155.3,77.6,155.3z"/>
+</svg>

+ 8 - 4
src/components/header.vue

@@ -2,8 +2,8 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-06-14 18:11:54
- * @LastEditors: wangcc
- * @LastEditTime: 2022-06-14 18:11:56
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-06-17 11:01:45
  * @FilePath: \castgroup_bigscreen\src\components\header.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -17,7 +17,8 @@
       <div class="weather">
         <div id="he-plugin-simple"></div>
       </div>
-      <img src="@/assets/img/system.png" @click="toggleFullScreen" />
+      <img v-if="!isFull" src="@/assets/img/full.svg" @click="toggleFullScreen" />
+      <img v-else src="@/assets/img/back.svg" @click="toggleFullScreen" />
     </div>
 </template>
 
@@ -28,7 +29,8 @@ import timeFormat from '@/utils/timeFormat'
         components: {},
         data () {
             return {
-                nowTime:''
+                nowTime:'',
+                isFull:false,
             };
         },
         created(){
@@ -70,6 +72,7 @@ import timeFormat from '@/utils/timeFormat'
                 // alternative standard method
                 if (!document.fullscreenElement &&
                     !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods
+                    this.isFull = true;
                     if (document.documentElement.requestFullscreen) {
                         document.documentElement.requestFullscreen();
                     } else if (document.documentElement.msRequestFullscreen) {
@@ -80,6 +83,7 @@ import timeFormat from '@/utils/timeFormat'
                         document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                     }
                 } else {
+                    this.isFull = false;
                     if (document.exitFullscreen) {
                         document.exitFullscreen();
                     } else if (document.msExitFullscreen) {