更新ui

SuperTwo762/css/main.css

@@ -2497,6 +2497,8 @@ body, html {
     user-select: none;
     width: 100%;
     height: 100%;
+    background: url(../images//bigBAC.png) no-repeat center;
+    background-size: cover;
     /* 不加这个退出全屏时带font的图标可能消失 */
 }
 
@@ -3340,7 +3342,9 @@ a.hasHover:hover, a:active {
 }
 
 .darkGlass {
-    background-color: rgba(0, 0, 0, .5);
+    background-color: rgba(207, 123, 14, 1);
+    /* background: url(../images//bigBAC.png) no-repeat center;
+    background-size: cover; */
 }
 
 .ui-icon {
@@ -3385,12 +3389,12 @@ a.hasHover:hover, a:active {
 }
 
 .pinTop.left {
-    left: 50%;
+    /* left: 50%; */
     z-index: 99;
     display: flex;
     flex-direction: column;
     align-items: center;
-    transform: translateX(-50%);
+    /* transform: translateX(-50%); */
 }
 
 .pinTop.right {
@@ -3790,15 +3794,15 @@ a.hasHover:hover, a:active {
     padding: 0;
     margin-right: 0px;
     float: left;
-    background: rgba(0, 0, 0, 0.2);
+    /* background: rgba(0, 0, 0, 0.2); */
     border-radius: 10px;
     margin-right: 10px;
 }
 
 #volume>a, #gui-fullscreen>a, #gui-fullscreen-exit>a {
     display: flex;
-    width: 48px;
-    height: 48px;
+    width: 85px;
+    height: 95px;
     justify-content: center;
     align-items: center;
 }
@@ -3930,8 +3934,7 @@ a.hasHover:hover, a:active {
     transform: translate(-50%, -50%);
     width: 100%
 }
-
-#gui-parent #pullTab.opened, #gui-parent #gui-modes-map>div.active {
+#gui-parent #pullTab.opened, #gui-parent #gui-modes-map>div.active img:nth-of-type(1){
     /* background: rgba(0, 0, 0, 0.3); */
 }
 
@@ -4135,13 +4138,13 @@ a.hasHover:hover, a:active {
     height: 8px;
     float: left;
     border-radius: 5px;
-    background: rgba(0, 0, 0, .75)
+    background: rgba(220, 37, 6, 1)
 }
 
 .scrollbar .handle {
     width: 100px;
     height: 100%;
-    background: rgba(255, 255, 255, .75);
+    background: rgba(252, 214, 123, 1);
     border-radius: 5px
 }
 
@@ -6264,18 +6267,21 @@ a.hasHover.tag-link:hover {
     -webkit-transition: all .3s;
     transition: all .3s;
     pointer-events: all;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    padding: 0 10px;
-    min-width: 180px;
+    /* background: rgba(0, 0, 0, 0.2); */
+    /* border-radius: 10px; */
+    /* padding: 0 10px; */
+    width: 250px;
+    height: 46px;
+    background: url(../images/titleBAC.png) no-repeat center;
+    background-size: 100% 100%;
 }
 
 #model-title:hover {
-    background: rgba(0, 0, 0, 0.5);
+    /* background: rgba(0, 0, 0, 0.5); */
 }
 
 #model-title.expand {
-    background: rgba(0, 0, 0, 0.5);
+    /* background: rgba(0, 0, 0, 0.5); */
 }
 
 .title-row {
@@ -6283,15 +6289,19 @@ a.hasHover.tag-link:hover {
     display: flex;
     align-items: center;
     justify-content: space-around;
+    width: 100%;
+    height: 100%;
 }
 
 #title-container-wrapper {
     overflow: hidden;
     width: 100%;
+    height: 100%;
 }
 
 .title-container {
     width: 100%;
+    height: 100%;
     white-space: nowrap;
     display: flex;
     margin-left: 1px;
@@ -6318,7 +6328,9 @@ a.hasHover.tag-link:hover {
     display: flex;
     align-items: center;
     height: 100%;
-    padding-left: 12px;
+    position: absolute;
+    top: 2px;
+    right: 36px;
 }
 
 /*.meta-toggle.hasHover:hover,.meta-toggle:active {
@@ -6385,7 +6397,8 @@ a.hasHover.tag-link:hover {
 }
 
 .pinTop.left .title-container {
-    right: 0;
+    position: relative;
+    right: -11px;
     margin-right: 0
 }
 
@@ -7007,9 +7020,11 @@ a.hasHover.tag-link:hover {
     }
     #play, #pause {
         width: 64px;
+        margin-bottom: 14px;
     }
     #gui-modes-map>div[rel] {
         width: 64px;
+        margin: 14px 0;
     }
     .progressbar {
         width: 70%;

SuperTwo762/css/oldVer/main0.css

@@ -151,10 +151,11 @@ iframe{
 }
 @media screen and  (max-width:667px){
 	#closepop{
-		width: 36px;
-		height: 36px;
-		top: 0px;
-		right: 0px;
+		width: 50px;
+		height: 50px;
+		bottom:100px ;
+		right: 50%;
+		transform: translateX(50%);
 	}
 
 	#title-toggle{

SuperTwo762/index.html

@@ -295,7 +295,7 @@
                         </div>
                         <div id="volume" class="ui-icon wide">
                             <a>
-                                <img src="images/Volume btn_on.png" width="24" height="24">
+                                <img src="images/Volume btn_on.png">
                             </a>
                         </div>
                         <div id="vr" class="ui-icon wide hidden" style="display: none;">
@@ -311,13 +311,15 @@
                         <div id="gui-fullscreen" class="ui-icon wide" data-placement="top" rel="tooltip"
                             title="{[{ VIEW_FULLSCREEN }]}">
                             <a>
-                                <i class="icon icon-fullscreen"></i>
+                                <!-- <i class="icon icon-fullscreen"></i> -->
+                                <img src="images/quanpin.png">
                             </a>
                         </div>
                         <div id="gui-fullscreen-exit" class="ui-icon wide" data-placement="top" rel="tooltip"
                             title="{[{ EXIT_FULLSCREEN }]}" style="display: none;">
                             <a>
-                                <i class="icon icon-fullscreen-exit"></i>
+                                <!-- <i class="icon icon-fullscreen-exit"></i> -->
+                                <img src="images/quanpinX.png">
                             </a>
                         </div>
                         <div class="pull-right terms terms2">

SuperTwo762/js/main_2020_show.js

@@ -6943,7 +6943,19 @@ window.Modernizr = function(n, e, t) {
                         gui_action: "click_inside_mode_button"
                     }),
                     t.changeMode(_e.PANORAMA);
+                    $('#gui-modes-inside img').attr('src','images/inside1.png')
+                    $('#gui-modes-dollhouse img').attr('src','images/dollhouse.png')
+                    $('#gui-modes-floorplan img').attr('src','images/floor.png')
                 }),
+
+
+                // $("#gui-modes-inside").on("click", function(e) {
+                //     $('#gui-modes-inside img').attr('src','images/inside1.png')
+                //     $('#gui-modes-dollhouse img').attr('src','images/dollhouse.png')
+                //     $('#gui-modes-floorplan img').attr('src','images/floor.png')
+                // }),
+
+
                 $("#gui-modes-outside").find("a").on("click", function(e) {
                     l(e),
                     J.track("showcase_gui", {
@@ -6957,6 +6969,9 @@ window.Modernizr = function(n, e, t) {
                         gui_action: "click_floorplan_mode_button"
                     }),
                     t.changeMode(_e.FLOORPLAN));
+                    $('#gui-modes-inside img').attr('src','images/inside.png')
+                    $('#gui-modes-dollhouse img').attr('src','images/dollhouse.png')
+                    $('#gui-modes-floorplan img').attr('src','images/floor1.png')
                 }),
                 $("#gui-modes-dollhouse").on("click", function(e) {
                     l(e),
@@ -6964,6 +6979,9 @@ window.Modernizr = function(n, e, t) {
                         gui_action: "click_dollhouse_mode_button"
                     }),
                     t.changeMode(_e.DOLLHOUSE));
+                    $('#gui-modes-inside img').attr('src','images/inside.png')
+                    $('#gui-modes-dollhouse img').attr('src','images/dollhouse1.png')
+                    $('#gui-modes-floorplan img').attr('src','images/floor.png')
                 })
             }
             function v(e, t) {
@@ -15172,8 +15190,8 @@ window.Modernizr = function(n, e, t) {
 					var i = new x.Scene
 					  , n = new x.AmbientLight(16777215);
 					i.add(n),
-					i.skybox = new W,
-					i.add(i.skybox),
+					// i.skybox = new W,
+					// i.add(i.skybox),
 					i.plane = new x.Mesh(new x.PlaneBufferGeometry(1e5,1e5),new x.RawShaderMaterial({
 						side: x.DoubleSide
 					})),
@@ -25055,14 +25073,17 @@ window.Modernizr = function(n, e, t) {
         ,
         n.prototype.createContext = function(e) {
             try {
-                this.renderer = new r.WebGLRenderer({antialias: !m.isMobile()}),
-                this.renderer.autoClear = !0,
-                this.renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1),
-                this.renderer.setSize($("#player").width(), $("#player").height(), false),  //改
-                this.emit(a.ContextCreated)
-            } catch (e) {
-                throw new h("Unable to create a WebGL rendering context")
-            }
+                this.renderer = new r.WebGLRenderer({antialias: !m.isMobile(), alpha:true}),//透明
+               this.renderer.autoClear = !0,
+               this.renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1),
+               this.renderer.setSize($("#player").width(), $("#player").height(), false),  //改
+               
+               this.renderer.setClearColor( 0x000000, 0 ); //透明
+               
+               this.emit(a.ContextCreated)
+           } catch (e) {
+               throw new h("Unable to create a WebGL rendering context")
+           }
             u.profiling.enabled && this.overrideTextures(),
             e.appendChild(this.renderer.domElement)
             

SuperTwo791/css/main.css

@@ -53,7 +53,9 @@ body, figure {
 }
 
 #quick-logo, .btn, .btn-deep-link, .message-inner, .vr-popup .outer, .webvr-popup .footer, img {
-    vertical-align: middle
+    vertical-align: middle;
+    width: 85px;
+    height: 95px;
 }
 
 #gui-name, #share-link-wrapper, .address, .co-brand, .contact-info div, .frame .slidee li .overlay, .gui-floor-title, .gui-floor.open .container .floorChoice {
@@ -3445,15 +3447,15 @@ a.hasHover:hover, a:active {
     right: 0;
     text-shadow: 0 0 1px rgba(0, 0, 0, .6);
     z-index: 50;
-    bottom: 10px;
+    bottom: 15px;
 }
 
 .pinBottom.left {
     z-index: 50;
-    background: rgba(0, 0, 0, 0.2);
+    /* background: rgba(0, 0, 0, 0.2); */
     border-radius: 10px;
     left: 10px;
-    bottom: 10px;
+    bottom: 20px;
 }
 
 .pinBottom.left .icon {
@@ -3480,7 +3482,7 @@ a.hasHover:hover, a:active {
 }
 
 #gui-modes-map>div[rel]:hover, .pinBottom.right .rightViewContainer>div:hover, #play:hover {
-    background: rgba(0, 0, 0, 0.25);
+    /* background: rgba(0, 0, 0, 0.25); */
 }
 
 /*#gui-modes-map > div:hidden{ border-top-right-radius: 10px; border-bottom-right-radius:10px; }*/
@@ -3913,8 +3915,8 @@ a.hasHover:hover, a:active {
 }
 
 #gui-modes-map div img {
-    width: 24px;
-    height: 24px;
+    width: 85px;
+    height: 95px;
 }
 
 #pullTab i {
@@ -3932,7 +3934,7 @@ a.hasHover:hover, a:active {
 }
 
 #gui-parent #pullTab.opened, #gui-parent #gui-modes-map>div.active {
-    background: rgba(0, 0, 0, 0.3);
+    /* background: rgba(0, 0, 0, 0.3); */
 }
 
 #pullTab.opened .icon-dpad-up:before {
@@ -3996,7 +3998,7 @@ a.hasHover:hover, a:active {
 }
 
 #gui .pinBottom.open.noScroll {
-    bottom: 117px
+    bottom: 122px
 }
 
 #gui .pinBottom.open.playing {
@@ -4008,11 +4010,11 @@ a.hasHover:hover, a:active {
 }
 
 #gui .pinBottom.open.noScroll.playing {
-    bottom: 135px;
+    bottom: 160px;
 }
 
 #gui #drawer.playing, #gui .pinBottom.playing {
-    bottom: 20px
+    bottom: 32px
 }
 
 #thumb-container .thumbImg {
@@ -6991,6 +6993,7 @@ a.hasHover.tag-link:hover {
 @media only screen and (max-width: 600px) {
     #gui-modes-map>div[rel]:hover, #play:hover {
         background: transparent;
+        margin-bottom: 14px;
     }
     .pinBottom.right .ui-icon {
         margin-right: 5px;
@@ -7007,9 +7010,11 @@ a.hasHover.tag-link:hover {
     }
     #play, #pause {
         width: 64px;
+        margin-bottom: 14px;
     }
     #gui-modes-map>div[rel] {
         width: 64px;
+        margin: 14px 0;
     }
     .progressbar {
         width: 70%;

SuperTwo791/index.html

@@ -304,13 +304,15 @@
                         <div id="gui-fullscreen" class="ui-icon wide" data-placement="top" rel="tooltip"
                             title="{[{ VIEW_FULLSCREEN }]}">
                             <a>
-                                <i class="icon icon-fullscreen"></i>
+                                <!-- <i class="icon icon-fullscreen"></i> -->
+                                <img src="./images/quanpin.png" alt="">
                             </a>
                         </div>
                         <div id="gui-fullscreen-exit" class="ui-icon wide" data-placement="top" rel="tooltip"
                             title="{[{ EXIT_FULLSCREEN }]}" style="display: none;">
                             <a>
-                                <i class="icon icon-fullscreen-exit"></i>
+                                <!-- <i class="icon icon-fullscreen-exit"></i> -->
+                                <img src="./images/quanpin1.png" alt="">
                             </a>
                         </div>
                         <div class="pull-right terms terms2">

SuperTwo791/js/main_2020_show.js

@@ -6506,6 +6506,11 @@ window.Modernizr = function(n, e, t) {
                         gui_action: "click_inside_mode_button"
                     }),
                     t.changeMode(_e.PANORAMA);
+
+                    $('#gui-modes-inside img').attr('src','images/inside1.png')
+                    $('#gui-modes-dollhouse img').attr('src','images/dollhouse.png')
+                    $('#gui-modes-floorplan img').attr('src','images/floor.png')
+
                 }),
                 $("#gui-modes-outside").find("a").on("click", function(e) {
                     l(e),
@@ -6520,6 +6525,10 @@ window.Modernizr = function(n, e, t) {
                         gui_action: "click_floorplan_mode_button"
                     }),
                     t.changeMode(_e.FLOORPLAN));
+
+                    $('#gui-modes-inside img').attr('src','images/inside.png')
+                    $('#gui-modes-dollhouse img').attr('src','images/dollhouse.png')
+                    $('#gui-modes-floorplan img').attr('src','images/floor1.png')
                 }),
                 $("#gui-modes-dollhouse").on("click", function(e) {
                     l(e),
@@ -6527,6 +6536,11 @@ window.Modernizr = function(n, e, t) {
                         gui_action: "click_dollhouse_mode_button"
                     }),
                     t.changeMode(_e.DOLLHOUSE));
+
+                    $('#gui-modes-inside img').attr('src','images/inside.png')
+                    $('#gui-modes-dollhouse img').attr('src','images/dollhouse1.png')
+                    $('#gui-modes-floorplan img').attr('src','images/floor.png')
+
                 })
             }
             function v(e, t) {

SuperTwo791/js/myShow.js

@@ -1,7 +1,8 @@
 var g_ProjectName=window.location.pathname.substring(window.location.pathname.indexOf("/")+1,window.location.pathname.lastIndexOf("/"));
+var g_Prefix="http://192.168.0.44:8110/";
 // var g_Prefix="https://super.4dage.com/";
 // var g_Prefix=window.location.href.substring(0,window.location.href.indexOf("/index.html")+1);
-var g_Prefix=window.location.origin+'/';
+// var g_Prefix=window.location.origin+'/';
 
 var s = window.location.href.split('/');
 s.pop();

code/src/pages/index/index.vue

@@ -33,7 +33,7 @@ import bg from '@/components/background'
 
 
 // http://192.168.0.44:8110/
-let temp = 'http://192.168.0.44:8110'
+let temp = 'http://192.168.0.99:8081/'
 const outKey = "791"
 const inKey = "762"
 
@@ -65,7 +65,7 @@ export default {
     },
     ifrUrl(){
       
-      let tmp = `${temp}/SuperTwo${this.ifr}/index.html?m=${this.ifr+(this.ifr==inKey?'_en':this.lang)}&qust=1`
+      let tmp = `${temp}/SuperTwo${this.ifr}/?m=${this.ifr+(this.ifr==inKey?'_en':this.lang)}&qust=1`
       return tmp
     }
   },
@@ -75,7 +75,7 @@ export default {
     },
     ifr(newVal){
       if (newVal&&this.$isMobile) {
-        this.$showLoading()
+        // this.$showLoading()
       }
     }
   },

hotspot/package-lock.json

@@ -4467,17 +4467,10 @@
     },
     "dom7": {
       "version": "2.1.5",
-      "resolved": "https://registry.npm.taobao.org/dom7/download/dom7-2.1.5.tgz",
-      "integrity": "sha1-p5QRAXgAsx2EAAcM2uu/ySwfY3c=",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
       "requires": {
         "ssr-window": "^2.0.0"
-      },
-      "dependencies": {
-        "ssr-window": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-2.0.0.tgz",
-          "integrity": "sha1-mMMBrvmVIzF/jWlhjwAQeRCW78Q="
-        }
       }
     },
     "domain-browser": {
@@ -7681,7 +7674,8 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -8190,7 +8184,8 @@
       "version": "2.2.2",
       "resolved": "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz?cache=0&sync_timestamp=1584790434095&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpicomatch%2Fdownload%2Fpicomatch-2.2.2.tgz",
       "integrity": "sha1-IfMz6ba46v8CRo9RRupAbTRfTa0=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "pify": {
       "version": "4.0.1",
@@ -10087,9 +10082,9 @@
       }
     },
     "ssr-window": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-1.0.1.tgz",
-      "integrity": "sha1-MHUqakZm53Z/C35qpvwv29DZs2k="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
     },
     "ssri": {
       "version": "6.0.1",
@@ -10368,12 +10363,12 @@
       }
     },
     "swiper": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npm.taobao.org/swiper/download/swiper-4.5.1.tgz",
-      "integrity": "sha1-7UOZjngM60eGEAecjSP9Ql7KY28=",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
       "requires": {
-        "dom7": "^2.1.3",
-        "ssr-window": "^1.0.1"
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
       }
     },
     "table": {
@@ -10518,6 +10513,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "http://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
@@ -11008,6 +11008,15 @@
       "integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=",
       "dev": true
     },
+    "v-viewer": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-1.6.4.tgz",
+      "integrity": "sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.1.tgz",
@@ -11047,6 +11056,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewerjs": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.10.1.tgz",
+      "integrity": "sha512-Oyzd3JP9dDSd+bBulfnQ+UTfHoobFwkmcT/uKSnQXjmPz7rZU0HJIiKudxPaMsiv17dr4Sm1cHnASJcDlFw1PA=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz?cache=0&sync_timestamp=1572870717730&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvm-browserify%2Fdownload%2Fvm-browserify-1.1.2.tgz",
@@ -11059,13 +11073,9 @@
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
     "vue-awesome-swiper": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-3.1.3.tgz",
-      "integrity": "sha1-BVALUB/7P+yb9+uZhbz0roNg7Z4=",
-      "requires": {
-        "object-assign": "^4.1.1",
-        "swiper": "^4.0.7"
-      }
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
     },
     "vue-eslint-parser": {
       "version": "7.1.1",

hotspot/src/views/Home.vue

@@ -19,7 +19,9 @@
         v-if="!isMobile"
         @click="slideto('slidePrev')"
         class="swiper-button-prev"
-      ></div>
+      >
+      <img src="../assets/images/previous.png" alt="">
+      </div>
       <div class="mb-intro" v-if="active === 'title' && isMobile">
         <p v-html="data.title"></p>
         <p v-html="data.content"></p>
@@ -54,7 +56,9 @@
         v-if="!isMobile"
         @click="slideto('slideNext')"
         class="swiper-button-next"
-      ></div>
+      >
+        <img src="../assets/images/next.png" alt="">
+      </div>
     </div>
     <ul class="iconarr" v-if="fixIcon.length > 1">
       <li
@@ -446,15 +450,24 @@ export default {
 
 .swiper-button-prev,
 .swiper-button-next {
-  background: rgba(0, 0, 0, 0.4);
-  padding: 10px 20px;
-  color: #fff !important;
+  /* background: rgba(0, 0, 0, 0.4); */
+  /* padding: 10px 20px; */
+  color: transparent !important;
+    width: 80px;
+  height: 80px;
+/* position: relative; */
+}
+.swiper-button-prev img,
+.swiper-button-next img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 .swiper-button-prev {
-  left: 0;
+  left: 22px;
 }
 .swiper-button-next {
-  right: 0;
+  right: 22px;
 }
 
 @media screen and (max-width: 500px) {