0524

src/views/home/Header.vue

@@ -162,7 +162,7 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
-  height: 200px;
+  height: 160px;
 
   .main {
     position: absolute;

src/views/home/Home.vue

@@ -50,7 +50,7 @@ export default {
     top: 0;
     left: 0;
     width: 100%;
-    height: 200px;
+    height: 180px;
     background: linear-gradient(0deg, rgba(0,17,50,0), rgba(0,17,51,0.6), rgba(0,17,50,0.8));
     
   }

src/views/home/cpns/UnderWater.vue

@@ -2,9 +2,8 @@
   <div class="tab-sxdx">
     <i class="sxdx-scroll scroll-left" @click="handleSxdxScroll('left')"></i>
     <i class="sxdx-scroll scroll-right" @click="handleSxdxScroll('right')"></i>
-    <i class="view-switch" @click="handleChangeView()">
-      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M118.656 438.656a32 32 0 0 1 0-45.248L416 96l4.48-3.776A32 32 0 0 1 461.248 96l3.712 4.48a32.064 32.064 0 0 1-3.712 40.832L218.56 384H928a32 32 0 1 1 0 64H141.248a32 32 0 0 1-22.592-9.344zM64 608a32 32 0 0 1 32-32h786.752a32 32 0 0 1 22.656 54.592L608 928l-4.48 3.776a32.064 32.064 0 0 1-40.832-49.024L805.632 640H96a32 32 0 0 1-32-32z"></path></svg>
-    </i>
+    <i class="switch-btn type-switch" @click="handleChangeType()"></i>
+    <i class="switch-btn view-switch" @click="handleChangeView()"></i>
     <el-carousel
       trigger="click"
       class="sxdx-list-wrapper"
@@ -117,6 +116,7 @@ const sxdxData = reactive({value: []})
 
 const currentView = ref('up')
 
+// 切换视角
 function handleChangeView() {
   if(currentView.value==='up') {
     ueCallFlyToSXDXNew()
@@ -127,6 +127,11 @@ function handleChangeView() {
   }
 }
 
+// 切换类型
+function handleChangeType() {
+
+}
+
 
 </script>
 
@@ -137,24 +142,32 @@ function handleChangeView() {
   top: -12vh;
   left: 50%;
   transform: translateX(-50%);
-  width: 701px;
+  width: 720px;
   height: 100px;
-  padding: 10px 115px 18px;
+  padding: 10px 125px 18px;
   background: url('@/assets/imgs/navi/bg-sxdx.png') no-repeat;
-  background-size: 701px 70px;
+  background-size: 720px 70px;
   background-position: bottom;
-  .view-switch {
+
+  .switch-btn {
     display: block;
     position: absolute;
-    left: 50%;
-    top: -2.5vh;
-    transform: translateX(-50%);
-    width: 25px;
-    height: 25px;
+    bottom: 28px;
+    width: 24px;
+    height: 24px;
     cursor: pointer;
     &:hover {
-      filter: brightness(1.1);
+      transform: scale(1.1);
+    }
+    &.view-switch {
+      right: 45px;
+      background: url('@/assets/imgs/navi/btn-view-change.png');
+    }
+    &.type-switch {
+      left: 45px;
+      background: url('@/assets/imgs/navi/btn-type-change.png');
     }
+    background-size: cover;
   }
 
   .sxdx-list-wrapper {
@@ -241,12 +254,12 @@ function handleChangeView() {
     height: 59px;
     cursor: pointer;
     &.scroll-left {
-      left: 70px;
+      left: 80px;
       background: url('@/assets/imgs/navi/sxdx-arrow-left.png');
       background-size: contain;
     }
     &.scroll-right {
-      right: 70px;
+      right: 80px;
       background: url('@/assets/imgs/navi/sxdx-arrow-right.png');
       background-size: contain;
     }