feat(index): 地图影像切换

src/App.vue

@@ -5,5 +5,4 @@
 </template>
 
 <style scoped lang="scss">
-
 </style>

src/views/home/index.vue

@@ -32,9 +32,6 @@
           <div class="list-item" v-for="(item) in resourceData" :key="item.id">
             <lay-checkbox :name="item.id" skin="primary" v-model="item.status" value="" :label="item.name"></lay-checkbox>
           </div>
-          <!-- <div class="list-item">
-            <lay-checkbox name="like2" skin="primary" v-model="checked2" value="" label="属性属性描述描述"></lay-checkbox>
-          </div> -->
         </div>
       </div>
     </div>
@@ -126,21 +123,16 @@
     </div>
 
     <!-- 地图类型 -->
-    <div class="map-type">
+    <div class="map-type" @mouseenter="mapTypeIsExpand = true" @mouseleave="mapTypeIsExpand = false">
       <ul class="list-box">
-        <li class="list-item">
-          <img src="../../assets/img/dt.png" alt="">
-          <div class="top-check">
-            <lay-checkbox name="sc" skin="primary" v-model="openCollect" value="" label="显示收藏点"></lay-checkbox>
-          </div>
-          <p class="detail-info">地图</p>
-        </li>
-        <li class="list-item">
-          <img src="../../assets/img/yx.png" alt="">
+        <li class="list-item" :class="selectIndex == index ? 'active' : ''" v-for="(item, index) in  mapTypeData" :key="index"
+          @click="toSelectDt(index)"
+          :style="mapTypeIsExpand ? `right:${(mapTypeData.length - index - 1) * 96}px` : `right:${(mapTypeData.length - index - 1) * 10}px`">
+          <img :src="item.imgUrl" alt="">
           <div class="top-check">
-            <lay-checkbox name="lw" skin="primary" v-model="openLw" value="" label="开启路网"></lay-checkbox>
+            <lay-checkbox name="sc" skin="primary" v-model="item.isCheck" value="" :label="item.label"></lay-checkbox>
           </div>
-          <p class="detail-info">影像</p>
+          <p class="detail-info">{{ item.title }}</p>
         </li>
       </ul>
     </div>
@@ -149,26 +141,39 @@
 <script setup lang="ts">
 import { reactive, ref, toRefs } from "vue";
 import { getList } from "../../api/module/main";
+const imgUrl1 = new URL('../../assets/img/dt.png', import.meta.url).href
+const imgUrl2 = new URL('../../assets/img/yx.png', import.meta.url).href
+// 工具栏是否展开
 const toolIsFold = ref(false);
+// 资源目录是否展开
 const resourceIsFold = ref(false);
+// 图例是否展开
 const lengendIsFold = ref(false);
+// 影像图
 const openCollect = ref(false);
+
 const openLw = ref(false);
+// 选择行政区
 const regionData = ref();
+// 替换主要字段
 const replaceFields = {
   label: 'name',
   value: 'code',
   children: 'areaList'
 }
+
+// 资源目录 interface 类型
 interface resourceItemType {
   id: string;
   name: string;
   status: boolean
 }
+// 级联菜单 interface 子类型
 interface cascaders {
   name: string;
   code: string;
 }
+// 级联菜单 interface 类型
 interface cascadersItemType {
   name: string;
   code: string;
@@ -197,7 +202,27 @@ getList('china').then((res: any) => {
 const villageSearch = function (val: string) {
   console.log("当前值:" + val)
 }
-
+// 地图类型
+const mapTypeIsExpand = ref(false);
+const mapTypeData = reactive([
+  {
+    imgUrl: imgUrl1,
+    label: "显示收藏点",
+    isCheck: false,
+    title: "地图"
+  },
+  {
+    imgUrl: imgUrl2,
+    label: "开启路网",
+    isCheck: false,
+    title: "影像"
+  }
+])
+// 地图默认选中第二个
+let selectIndex = ref(1);
+const toSelectDt = function (index: number) {
+  selectIndex.value = index;
+}
 
 </script>
 <style scoped lang="scss">
@@ -316,12 +341,13 @@ const villageSearch = function (val: string) {
     .list-item {
       line-height: 30px;
 
-      ::v-deep .layui-form-checkbox[lay-skin="primary"]:hover i {
+
+      :deep(.layui-form-checkbox[lay-skin="primary"]:hover) i {
         border-color: #2c5f9e;
         color: #fff;
       }
 
-      ::v-deep .layui-form-checked[lay-skin="primary"] {
+      :deep(.layui-form-checked[lay-skin="primary"]) {
         & {
           i {
             border-color: #2c5f9e;
@@ -529,7 +555,7 @@ const villageSearch = function (val: string) {
 }
 
 .map-type {
-  width: 86px;
+  // width: 196px;
   height: 60px;
   position: absolute;
   right: 10px;
@@ -541,7 +567,19 @@ const villageSearch = function (val: string) {
     display: inline-block;
     margin-left: 5px;
     position: absolute;
-    border: 1px solid #666;
+    // border: 1px solid #666;
+    transition: all 0.3s ease;
+    box-shadow: 0 0 2px 0px #ccc;
+    box-sizing: border-box;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.active {
+      border: 1px solid #177de4;
+    }
 
     .detail-info {
       position: absolute;
@@ -574,7 +612,7 @@ const villageSearch = function (val: string) {
       padding-left: 5px;
       box-sizing: border-box;
 
-      ::v-deep .layui-checkbox .layui-form-checkbox {
+      :deep(.layui-checkbox) .layui-form-checkbox {
         padding-left: 18px;
         height: 16px;
         line-height: 16px;
@@ -586,7 +624,8 @@ const villageSearch = function (val: string) {
         }
       }
 
-      ::v-deep .layui-form-checkbox[lay-skin="primary"] {
+      :deep(.layui-form-checkbox)[lay-skin="primary"] {
+
         i {
           height: 16px;
           line-height: 16px;
@@ -600,8 +639,7 @@ const villageSearch = function (val: string) {
 
       }
 
-      ::v-deep .layui-form-checked[lay-skin="primary"] {
-        & {
+      :deep(.layui-form-checked)[lay-skin="primary"] {
         i {
           border-color: #2c5f9e;
           background-color: #2c5f9e;
@@ -613,13 +651,7 @@ const villageSearch = function (val: string) {
       }
     }
   }
-  }
 
-  .list-box,
-  .list-item img {
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .cascaderClass {