update 调整样式·

src/assets/less/themeType.less

@@ -23,3 +23,17 @@
 .body-d-right.light {
   padding: 0 16px;
 }
+
+//路线导航-light
+.center-map .route-navigation.light {
+  background: #E4E8F9 !important;
+  --cardFontColor: #607ddb;
+  --cardFontFFF: #fff;
+  --cardBgColor: #e4e8f9;
+  --circelBg: #1478f5;
+}
+
+//路线导航-dark
+.center-map .route-navigation.dark {
+  background: #002e64;
+}

src/components/chinaMap/chinaMap.vue

@@ -228,8 +228,6 @@
      * @param callback
      */
     function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
-        searchFlag.value = true;
-
         showRoutePanel.value = false;
         panelTitle.value = '';
         if (!formState.value.start) {
@@ -238,6 +236,7 @@
         if (!formState.value.end) {
             return message.warn('请输入终点');
         }
+        searchFlag.value = true;
         //基本地图加载
         let map = new AMap.Map('container', {
             resizeEnable: true,
@@ -283,6 +282,7 @@
     function removeInput() {
         formState.value.start = '';
         formState.value.end = '';
+        searchFlag.value = false;
     }
 
     // 驾车路线
@@ -395,7 +395,7 @@
 
             .search-btn {
                 margin-left: 10px;
-                width: 88px;
+                width: 120px;
                 height: 32px;
                 color: #efefef;
                 background: #45a2ff;

src/components/xianMap/xianMap.vue

@@ -6,7 +6,7 @@
                     {{ item.name }}
                 </div>
             </div>
-            <div v-show="currentIndex == list.length - 1" class="route-navigation">
+            <div v-show="currentIndex == list.length - 1" class="route-navigation" :class="[themeType]">
                 <a-form :model="formState" layout="inline">
                     <a-form-item class="form-item-self" label="起点">
                         <a-input v-model:value="formState.start" placeholder="请输入起点"></a-input>
@@ -87,6 +87,7 @@
     import { useDetailStore } from '/@/store/modules/detailData.ts';
     import RoutePanel from '/@/components/xianMap/components/routePanel.vue';
     import { innerLineLight, outerLineOption } from '/@/assets/mapUtils/mapConstant.ts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
 
     const props = defineProps({
         //是否展示底部统计
@@ -124,6 +125,7 @@
             },
         },
     });
+    const { themeType } = useTheme();
     const emits = defineEmits(['clearHospitalList']);
     const useDetail = useDetailStore();
     const formState = ref({
@@ -131,7 +133,7 @@
         end: '',
     });
     const list = ref(tabList);
-    const currentIndex = ref(0);
+    const currentIndex = ref(6);
 
     function changeTab(item, i: number) {
         currentIndex.value = i; // 地方医院
@@ -234,7 +236,6 @@
      * @param callback
      */
     function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
-        console.log('search.....');
         showRoutePanel.value = false;
         panelTitle.value = '';
         if (!formState.value.start) {
@@ -288,6 +289,7 @@
     function removeInput() {
         formState.value.start = '';
         formState.value.end = '';
+        searchFlag.value = false;
     }
 
     // 驾车路线
@@ -362,13 +364,13 @@
         }
 
         .route-navigation {
+            --fontColor: #607ddb;
             margin: 12px 0;
             width: 100%;
             height: 46px;
             display: flex;
             align-items: center;
             justify-content: center;
-            background: #002e64;
             border-radius: 6px;
             position: absolute;
             top: 36px;
@@ -377,15 +379,19 @@
 
             :deep(.form-item-self) {
                 label {
-                    color: #29f1fa;
+                    color: var(--fontColor) !important;
                 }
 
                 .ant-input {
                     width: 280px;
-                    color: #d6d9e0;
-                    background: #2a4164;
                     border-radius: 2px 2px 2px 2px;
-                    border: 1px solid #1b7ef2;
+                    color: var(--fontColor);
+                    background: #d7ddf6;
+                    border: 1px solid #a8bcff;
+
+                    &::placeholder {
+                        color: var(--fontColor);
+                    }
                 }
             }
 
@@ -393,19 +399,18 @@
                 width: 64px;
                 height: 32px;
                 border-radius: 5px;
-                color: #45a2ff;
+                color: var(--fontColor);
-                background: #002e64;
+                background: #c7d4ff;
-                border: 1px solid #45a2ff;
+                border: 1px solid #7092ff;
             }
 
             .search-btn {
                 margin-left: 10px;
-                width: 100px;
+                width: 120px;
                 height: 32px;
-                color: #efefef;
+                color: #fff;
-                background: #45a2ff;
+                background: #6d8bf1;
                 border-radius: 5px;
-                border-color: #45a2ff;
             }
 
             .line-container {
@@ -417,19 +422,20 @@
                 min-height: 200px;
                 max-height: 473px;
                 overflow: auto;
-                background: #2a4164;
+                background: var(--cardBgColor);
                 border-radius: 2px;
-                border: 1px solid #1b7ef2;
+                //border: 1px solid #1b7ef2;
 
                 .line-title {
                     margin-bottom: 9px;
                     font-size: 14px;
                     font-weight: 700;
-                    color: rgba(255, 255, 255, 0.8);
+                    color: var(--cardFontColor);
                 }
 
                 .line-content {
                     font-size: 12px;
+                    color: var(--cardFontColor);
 
                     .start {
                         display: flex;
@@ -437,7 +443,7 @@
 
                         &::before {
                             content: '起';
-                            color: #fff;
+                            color: var(--cardFontFFF);
                             width: 20px;
                             height: 20px;
                             margin-right: 7px;
@@ -445,7 +451,7 @@
                             align-items: center;
                             justify-content: center;
                             border-radius: 50%;
-                            background: #1478f5;
+                            background: var(--circelBg);
                         }
                     }
 
@@ -455,7 +461,7 @@
 
                         &::before {
                             content: '终';
-                            color: #fff;
+                            color: var(--cardFontFFF);
                             width: 20px;
                             height: 20px;
                             margin-right: 7px;
@@ -463,23 +469,23 @@
                             align-items: center;
                             justify-content: center;
                             border-radius: 50%;
-                            background: #1478f5;
+                            background: var(--circelBg);
                         }
                     }
 
                     .line-body {
                         display: flex;
-                        //max-height: 370px;
+                        color: var(--cardFontColor);
                     }
 
                     .line {
                         width: 1px;
                         //max-height: 370px;
-                        background-color: #1478f5;
+                        background-color: var(--circelBg);
                         margin: 5px 19px 5px 8px;
                     }
 
-                    .line-sesc {
+                    .line-desc {
                         flex: 1;
                     }
                 }