update 调整样式·

src/assets/less/themeType.less

@@ -7,4 +7,19 @@
 .police-con.dark {
   color: #ffffff;
   background-color: #00152b;
+}
+
+.common-card.light {
+  background: #f3f5ff;
+  border-radius: 14px;
+}
+
+// 左侧区域
+.body-d-left.light {
+  padding: 0 16px;
+}
+
+//右侧区域
+.body-d-right.light {
+  padding: 0 16px;
 }

src/components/body-d-left/oneL.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="common-card" :class="[themeType]">
         <public-title title="服务详情数据" />
         <div class="inner">
             <div class="type-time">
@@ -35,7 +35,9 @@
     import { useDetailStore } from '/@/store/modules/detailData.ts';
     import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
     import { setTheme } from '/@/assets/theme/themeList.ts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
 
+    const { themeType } = useTheme();
     const { LEFT_KEY1 } = caching;
     const props = defineProps({
         refreshState: {

src/components/body-d-left/threeL.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="common-card" :class="[themeType]">
         <public-title title="体检数据" />
         <div class="inner">
             <div class="type-time">
@@ -25,6 +25,7 @@
     import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
     import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
     import * as echarts from 'echarts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
 
     const props = defineProps({
         refreshState: {
@@ -32,6 +33,7 @@
         },
         setting: Object,
     });
+    const { themeType } = useTheme();
     const { setSession, getSession } = useSession();
     const { LEFT_KEY3 } = caching;
     const { setSpin, spinning } = useSpin();

src/components/body-d-left/twoL.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="common-card" :class="[themeType]">
         <public-title title="主诉分类" />
         <div class="zc-inner">
             <div class="title">
@@ -24,18 +24,20 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { ref, onMounted, watch, onUnmounted } from 'vue';
+    import { ref, onMounted, watch } from 'vue';
     import PublicTitle from '/@/components/publicTitle.vue';
     import * as echarts from 'echarts';
     import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
     import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.ts';
     import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
 
     const props = defineProps({
         refreshState: {
             type: Boolean,
         },
     });
+    const { themeType } = useTheme();
     const { setSession, getSession } = useSession();
     const { LEFT_KEY2 } = caching;
     const { setSpin, spinning } = useSpin();

src/components/body-d-right/oneR.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="terminal-container">
+    <div class="terminal-container common-card" :class="[themeType]">
         <public-title title="健康终端报警">
             <template #right>
                 <span class="right-text" @click="viewDetail">查看详情</span>

src/components/body-d-right/threeR.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="common-card" :class="themeType">
         <public-title title="基层医疗点远程会诊" />
         <div class="inner">
             <div class="inner-item" data-text="应急就医-服务中心"></div>
@@ -11,6 +11,9 @@
 </template>
 <script setup lang="ts">
     import PublicTitle from '/@/components/publicTitle.vue';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+
+    const { themeType } = useTheme();
 </script>
 <style scoped lang="less">
     .inner {

src/components/body-d-right/twoR.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="common-card" :class="themeType">
         <public-title title="长庆油田大病人数" />
         <div class="inner" ref="healthChart"></div>
     </div>
@@ -12,10 +12,12 @@
     import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
     import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
     import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
 
     const props = defineProps({
         setting: Object,
     });
+    const { themeType } = useTheme();
     const { setSession, getSession } = useSession();
     const { RIGHT_KEY2 } = caching;
     const { setSpin, spinning } = useSpin();

src/components/xianMap/xianMap.vue

@@ -141,7 +141,7 @@
         if (TabType.diFangYiYuan == item.type) {
             let { lng, lat } = Map.getMapCenter();
             Map.getAddressByPoint([lng, lat]).then((text, data) => {
-                console.log('data', data, data.citycode);
+                // console.log('data', data, data.citycode);
             });
             Map.removeOverlayGroup();
             Map.map.on('moveend', logMapinfo);
@@ -348,16 +348,15 @@
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                color: #29f1fa;
+                color: #607ddb;
-                background: url('/@/assets/img/tab-default.png') no-repeat;
+                background: #cad6fc;
-                background-size: 100% 100%;
+                border-radius: 8px;
                 cursor: pointer;
                 transition: all 0.3s;
 
                 &.active {
                     color: #fff;
-                    background: url('/@/assets/img/tab-active.png') no-repeat;
+                    background: #7593f8;
-                    background-size: 100% 100%;
                 }
             }
         }
@@ -534,7 +533,7 @@
             display: flex;
             border-radius: 6px;
             flex-direction: column;
-            background-color: #fff;
+            background-color: #f3f5ff;
             box-shadow:
                 0 3px 6px -4px #0000001f,
                 0 6px 16px #00000014,
@@ -545,7 +544,7 @@
                 font-size: 12px;
                 font-weight: 400;
                 line-height: 30px;
-                color: #000;
+                color: #607ddb;
 
                 .legend-img {
                     width: 20px;
@@ -572,23 +571,25 @@
             gap: 20px;
 
             .count-item {
+                //src/assets/images/footer-num.png
                 width: 340px;
                 height: 80px;
                 display: flex;
-                color: #ffffff;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                background: #00071b;
+                background: url('/@/assets/images/footer-num.png') no-repeat;
-                box-shadow: inset 0 0 40px 0 #1b7ef2;
+                background-size: 100% 100%;
-                border-radius: 4px;
+                border-radius: 14px;
 
                 .num {
                     font-size: 24px;
                     font-weight: 700;
+                    color: #3f59ae;
                 }
 
                 .text {
+                    color: #607ddb;
                     font-size: 16px;
                     font-weight: 400;
                 }

src/views/index.vue

@@ -8,7 +8,7 @@
             <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
         </div>
         <div class="body-d">
-            <div class="body-d-left">
+            <div class="body-d-left" :class="[themeType]">
                 <one-l theme="light" :setting="setting" :refreshState="refreshState" @handleClick="handlePhoneDialog" />
                 <two-l theme="light" :key="tabState" :refreshState="refreshState" />
                 <three-l :key="tabState" :setting="setting" :refreshState="refreshState" />
@@ -21,7 +21,7 @@
                     :mapOptions="lightMapOption"
                 />
             </div>
-            <div class="body-d-right">
+            <div class="body-d-right" :class="[themeType]">
                 <one-r :setting="setting" :refreshState="refreshState" />
                 <two-r :key="tabState" :setting="setting" :refreshState="refreshState" />
                 <three-r :key="refreshState" />
@@ -54,6 +54,7 @@
     import { Map } from '/@/assets/mapUtils/map.ts';
     import { useUserStore } from '/@/store/modules/user.ts';
     import { lightMapOption } from '/@/assets/mapUtils/mapConstant.ts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
 
     const { refreshState } = useRefresh(DEFAULT_TIME);
     const dayTimeO = ref();
@@ -81,6 +82,7 @@
         //设置主题
         store.setThemeType(ThemeType.light);
     });
+    const { themeType } = useTheme();
     onUnmounted(() => {
         clearInterval(interval.value);
         document.removeEventListener('visibilitychange', checkTabState);
@@ -374,14 +376,12 @@
         .body-d-left,
         .body-d-right {
             text-align: center;
-        }
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
 
-        .body-d-left,
+            > div {
-        .body-d-right {
+                flex: 1;
-            > :nth-child(n) {
-                width: 100%;
-                height: calc(100% / 3);
-                padding: 10px;
             }
         }