【数字史馆】优化全屏按钮样式

web/public/static/css/main.css

@@ -791,24 +791,6 @@ hr {
     content: "\e602"
 }
 
-.icon-fullscreen-exit:before {
-    content: "";
-    background: url("https://super.4dage.com/images/narrow_off.png") center top no-repeat;
-    background-size: 100%;
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-}
-
-.icon-fullscreen:before {
-    content: "";
-    background: url("https://super.4dage.com/images/enlarge_on.png")center top no-repeat;
-    background-size: 100%;
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-}
-
 .icon-help:before {
     content: "\e605"
 }
@@ -3296,10 +3278,6 @@ a.hasHover:hover, a:active {
     padding-right: 30px
 }
 
-.right .ui-icon.wide {
-    padding-left: 30px
-}
-
 .mobile-only {
     display: none
 }
@@ -3751,12 +3729,17 @@ a.hasHover:hover, a:active {
 }
 
 .pinBottom.right .ui-icon {
-    padding: 0;
-    margin-right: 0px;
-    float: left;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    margin-right: 10px;
+  width: 50px;
+  height: 50px;
+  background: rgba(0, 0, 0, 0.39);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+}
+
+.pinBottom.right .ui-icon img {
+  width: 22px;
+  height: 22px;
 }
 
 #volume>a, #gui-fullscreen>a, #gui-fullscreen-exit>a {

web/src/views/scene/gui/menu.vue

@@ -257,7 +257,7 @@
           title="{[{ VIEW_FULLSCREEN }]}"
         >
           <a title="全屏">
-            <i class="icon icon-fullscreen"></i>
+            <img class="icon icon-fullscreen" :src="require('@/assets/images/展开全屏@2x.png')"/>
           </a>
         </div>
         <div
@@ -269,7 +269,7 @@
           style="display: none"
         >
           <a title="退出全屏">
-            <i class="icon icon-fullscreen-exit"></i>
+            <img title="退出全屏" :src="require('@/assets/images/退出全屏@2x.png')"/>
           </a>
         </div>
         <div class="pull-right terms terms2">