diff --git a/src/assets/indexSun/address.png b/src/assets/indexSun/address.png
new file mode 100644
index 0000000..52a90b9
Binary files /dev/null and b/src/assets/indexSun/address.png differ
diff --git a/src/assets/indexSun/bg.png b/src/assets/indexSun/bg.png
new file mode 100644
index 0000000..d0c4d82
Binary files /dev/null and b/src/assets/indexSun/bg.png differ
diff --git a/src/assets/indexSun/bigBg.png b/src/assets/indexSun/bigBg.png
new file mode 100644
index 0000000..ae8d490
Binary files /dev/null and b/src/assets/indexSun/bigBg.png differ
diff --git a/src/assets/indexSun/footerBlue.png b/src/assets/indexSun/footerBlue.png
new file mode 100644
index 0000000..a442c4b
Binary files /dev/null and b/src/assets/indexSun/footerBlue.png differ
diff --git a/src/assets/indexSun/footerGreen.png b/src/assets/indexSun/footerGreen.png
new file mode 100644
index 0000000..04a07d4
Binary files /dev/null and b/src/assets/indexSun/footerGreen.png differ
diff --git a/src/assets/indexSun/point.png b/src/assets/indexSun/point.png
new file mode 100644
index 0000000..fd12ba2
Binary files /dev/null and b/src/assets/indexSun/point.png differ
diff --git a/src/assets/less/index.less b/src/assets/less/index.less
index dc4ada8..f62a6a6 100644
--- a/src/assets/less/index.less
+++ b/src/assets/less/index.less
@@ -8,7 +8,6 @@ html, body, #app {
 }
 
 .type-time {
-	padding-top: 3%;
 	font-size: 16px;
 	display: flex;
 	justify-content: right;
diff --git a/src/assets/mapUtils/map.ts b/src/assets/mapUtils/map.ts
index efbdf91..0931ebf 100644
--- a/src/assets/mapUtils/map.ts
+++ b/src/assets/mapUtils/map.ts
@@ -35,6 +35,7 @@ export const Map = {
             }).then((res) => {
                 AMap = res;
                 const { zoom, center, mapStyle } = { ...defaultOption, ...option };
+                console.log(mapStyle, center, 'adjahdkjashkjd');
                 //基本地图加载
                 this.map = new AMap.Map(el, {
                     resizeEnable: true,
diff --git a/src/assets/mapUtils/mapConstant.ts b/src/assets/mapUtils/mapConstant.ts
index 0a57b03..c49f5a8 100644
--- a/src/assets/mapUtils/mapConstant.ts
+++ b/src/assets/mapUtils/mapConstant.ts
@@ -1,7 +1,7 @@
 // 地图默认配置
 export const defaultOption = {
-    center: [108.660704, 36.386058], //地图中心点
-    zoom: 6.5, //地图显示的缩放级别
+    center: [87.627313, 43.826809], //地图中心点
+    zoom: 11, //地图显示的缩放级别
     mapStyle: 'darkblue', //地图样式
 };
 export const YinChuanOption = {
diff --git a/src/components/body-d-left/bodyLeftHooks.ts b/src/components/body-d-left/bodyLeftHooks.ts
index ba76e77..b339c9a 100644
--- a/src/components/body-d-left/bodyLeftHooks.ts
+++ b/src/components/body-d-left/bodyLeftHooks.ts
@@ -85,6 +85,21 @@ export const sexType = [
     },
 ];
 
+export const timeTabNew = [
+    {
+        name: '本周',
+        value: '2',
+    },
+    {
+        name: '本月',
+        value: '3',
+    },
+    {
+        name: '本年',
+        value: '4',
+    },
+];
+
 export function useSpin() {
     const spinning = ref(true);
 
diff --git a/src/components/body-d-left/oneL.vue b/src/components/body-d-left/oneL.vue
index e494005..e3e3a31 100644
--- a/src/components/body-d-left/oneL.vue
+++ b/src/components/body-d-left/oneL.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="common-card" :class="[themeType]">
-        <public-title title="服务详情数据" :themeType="themeType" />
+        <public-title title="服务详情数据" themeType="dark" />
         <div class="inner">
             <div class="type-time">
                 <span
                     v-for="(item, index) in typeTime"
                     :key="index"
-                    :class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
+                    :class="[selectIndex === index ? 'select' : 'unSelect', 'dark']"
                     @click="handleSelect(index, item.value)"
                     >{{ item.name }}</span
                 >
@@ -16,7 +16,7 @@
                     v-for="(item, index) in statistics"
                     :key="index"
                     class="server-item"
-                    :class="[['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : '', themeType]"
+                    :class="[['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : '', 'dark']"
                     @click="handleClick(item)"
                 >
                     <span>{{ item?.name }}</span>
diff --git a/src/components/xianMap/xianMap.vue b/src/components/xianMap/xianMap.vue
index e56e661..b4680d2 100644
--- a/src/components/xianMap/xianMap.vue
+++ b/src/components/xianMap/xianMap.vue
@@ -208,9 +208,11 @@
     }
 
     onMounted(() => {
+        console.log(props.mapOptions);
         const op = { el: 'xianmapContainer', option: props.mapOptions, innerLineOption: innerLineLight, outerLineOption: outerLineOption };
         Map.initMap(op).then(() => {
             getMapData(tabList[0].type);
+            console.log(getMapData(tabList[0].type), 123);
             Map.map && Map.map.on('zoomend', setLevel);
             Map.map && Map.map.on('zoomend', setLevel);
         });
diff --git a/src/hooks/theme/useTheme.ts b/src/hooks/theme/useTheme.ts
index 7b55c80..f8f60c5 100644
--- a/src/hooks/theme/useTheme.ts
+++ b/src/hooks/theme/useTheme.ts
@@ -3,7 +3,7 @@ import { useUserStore } from '/@/store/modules/user.ts';
 import { setTheme } from '/@/assets/theme/themeList.ts';
 
 export function useTheme() {
-    const themeType = ref('light');
+    const themeType = ref('dark');
     onMounted(() => {
         const store = useUserStore();
         nextTick(() => {
diff --git a/src/router/index.ts b/src/router/index.ts
index 8ee2047..f220d59 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,7 +23,15 @@ const routes: Array<RouteRecordRaw> = [
         meta: {
             title: '副屏',
         },
-        component: () => import('/@/views/indexSon.vue'),
+        component: () => import('/@/views/indexSun.vue'),
+    },
+    {
+        path: '/home1',
+        name: 'index1',
+        meta: {
+            title: '副屏1',
+        },
+        component: () => import('/@/views/index.vue'),
     },
 ];
 
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e14145b..be8a06c 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -12,7 +12,7 @@ export function getZero(num: any) {
 
 export function useTopTime(startDay = '2018-10-01') {
     startDay = startDay || '2018-10-01';
-    const timeLeft = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
+    const timeLeft = dayjs().format('YYYY年MM月DD日 HH:mm:ss');
     const timeRight = dayjs().diff(dayjs(startDay), 'day') + '天';
     // +
     // getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
diff --git a/src/views/components/phoneDialog/phoneDialog.vue b/src/views/components/phoneDialog/phoneDialog.vue
index 426016c..afa204d 100644
--- a/src/views/components/phoneDialog/phoneDialog.vue
+++ b/src/views/components/phoneDialog/phoneDialog.vue
@@ -14,7 +14,6 @@
                 :class="[themeType]"
                 :key="visible"
                 :columns="columns"
-                :api="getPhoneList"
                 :apiParams="formState"
             ></BasicTable>
         </template>
@@ -27,7 +26,7 @@
     import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
     import { Form } from 'ant-design-vue';
     import { SexType, sexTypeList } from '/@/utils/settings.ts';
-    import { getPhoneList } from '/@/views/yinChuan/yinChuan.api.ts';
+    // import { getPhoneList } from '/@/views/yinChuan/yinChuan.api.ts';
     import { useTheme } from '/@/hooks/theme/useTheme.ts';
 
     const props = defineProps({
diff --git a/src/views/index.vue b/src/views/index.vue
index b370dd1..6973fa7 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -10,8 +10,8 @@
         </div>
         <div class="body-d">
             <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" @view-detail="viewDetail" />
+                <one-l theme="dark" :setting="setting" :refreshState="refreshState" @handleClick="handlePhoneDialog" />
+                <two-l theme="dark" :key="tabState" :refreshState="refreshState" @view-detail="viewDetail" />
                 <three-l :key="tabState" :setting="setting" :refreshState="refreshState" />
             </div>
             <div class="body-d-middle">
@@ -91,7 +91,7 @@
         openTestModal();
         document.addEventListener('visibilitychange', checkTabState);
         //设置主题
-        store.setThemeType(ThemeType.light);
+        store.setThemeType(ThemeType.dark);
     });
     const { themeType } = useTheme();
     onUnmounted(() => {
diff --git a/src/views/indexSun.vue b/src/views/indexSun.vue
new file mode 100644
index 0000000..8b4cc33
--- /dev/null
+++ b/src/views/indexSun.vue
@@ -0,0 +1,145 @@
+<template>
+    <div class="outer">
+        <login-out-button out-url="login" />
+        <div class="title-d outer-title">
+            <div class="title-d-left">
+                {{ dayTimeO }}
+            </div>
+            <div class="title-d-middle"> 应急就医服务中心</div>
+            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+        </div>
+        <div class="body-d">
+            <div class="body-d-left">
+                <OneL />
+                <twoL />
+                <threeL />
+            </div>
+            <div class="body-d-middle">
+                <CenterMap />
+            </div>
+            <div class="body-d-right">
+                <oneR :title="'体检数据'" :type="1" />
+                <oneR :title="'健康打卡数据'" :type="2" />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import LoginOutButton from '/@/views/components/loginOutButton.vue';
+    import { onMounted, onUnmounted, ref } from 'vue';
+    import { useTopTime } from '/@/utils/utils.ts';
+    import OneL from '/@/views/indexSun/oneL.vue';
+    import twoL from '/@/views/indexSun/twoL.vue';
+    import threeL from '/@/views/indexSun/threeL.vue';
+    import oneR from '/@/views/indexSun/oneR.vue';
+    import CenterMap from '/@/views/indexSun/centerMap.vue';
+    const dayTimeO = ref();
+    const dayTimeT = ref();
+    const interval = ref(1);
+    function init() {
+        getTime();
+        interval.value = setInterval(() => {
+            getTime();
+        }, 1000);
+    }
+    function getTime() {
+        const { timeLeft, timeRight } = useTopTime();
+        dayTimeO.value = timeLeft;
+        dayTimeT.value = timeRight;
+    }
+    onMounted(() => {
+        init();
+    });
+    onUnmounted(() => {
+        clearInterval(interval.value);
+    });
+</script>
+<style lang="less" scoped>
+    .outer {
+        height: 100%;
+        box-sizing: border-box;
+        background: url('/@/assets/indexSun/bigBg.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        .title-d {
+            height: 80px;
+            line-height: 60px;
+            display: flex;
+            color: #fff;
+            background: url('/@/assets/indexSun/bg.png') no-repeat;
+            background-size: 100% 100%;
+            .title-d-left,
+            .title-d-middle,
+            .title-d-right {
+                font-size: 22px;
+                text-align: center;
+                font-weight: bold;
+                letter-spacing: 1px;
+            }
+            > :nth-child(1) {
+                width: 20%;
+            }
+
+            > :nth-child(2) {
+                width: 60%;
+                font-size: 50px;
+                line-height: 80px;
+                letter-spacing: 10px;
+                text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
+                font-weight: bold;
+            }
+
+            > :nth-child(3) {
+                width: 20%;
+            }
+        }
+        .body-d {
+            display: flex;
+            height: calc(100% - 80px);
+            justify-content: space-between;
+            padding: 10px 20px 0;
+            > :nth-child(1) {
+                width: 22%;
+            }
+            > :nth-child(2) {
+                width: 50%;
+            }
+            > :nth-child(3) {
+                width: 24.5%;
+            }
+            .body-d-left {
+                display: flex;
+                flex-direction: column;
+                > div {
+                    border: 1px solid #00ccff;
+                    border-radius: 14px;
+                }
+                > :nth-child(2) {
+                    height: 37%;
+                }
+                > :nth-child(3) {
+                    height: 37%;
+                }
+                > :nth-child(n + 1) {
+                    margin-bottom: 15px;
+                }
+            }
+            .body-d-right {
+                display: flex;
+                flex-direction: column;
+                > div {
+                    border: 1px solid #00ccff;
+                    border-radius: 14px;
+                    height: 48.5%;
+                }
+                > :nth-child(n + 1) {
+                    margin-bottom: 15px;
+                }
+            }
+            .body-d-middle {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+    }
+</style>
diff --git a/src/views/indexSun/centerMap.vue b/src/views/indexSun/centerMap.vue
new file mode 100644
index 0000000..4ed4652
--- /dev/null
+++ b/src/views/indexSun/centerMap.vue
@@ -0,0 +1,487 @@
+<template>
+    <div class="sun-center-map">
+        <div class="map-box">
+            <div class="tab-list">
+                <div v-for="(item, i) in list" :class="[currentIndex == i ? 'active' : '']" class="tab" @click="changeTab(item, i)">
+                    {{ item.name }}
+                </div>
+            </div>
+            <div v-show="currentIndex == list.length - 1" class="route-navigation">
+                <a-form :model="formState" layout="inline">
+                    <a-form-item class="form-item-self" label="起点">
+                        <a-input v-model:value="formState.start" placeholder="请输入起点"></a-input>
+                    </a-form-item>
+                    <a-form-item class="form-item-self" label="终点">
+                        <a-input v-model:value="formState.end" placeholder="请输入终点"></a-input>
+                    </a-form-item>
+                    <a-form-item>
+                        <a-button class="reset-btn" @click="removeInput">清空</a-button>
+                        <a-button class="search-btn" @click="searchRoute" :loading="searchFlag" :disabled="searchFlag"> 路线规划 </a-button>
+                    </a-form-item>
+                </a-form>
+                <div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
+                    <div v-show="routeList.length" class="has-data">
+                        <div class="line-title"> {{ panelTitle }}</div>
+                        <div class="line-content">
+                            <div class="start">起点</div>
+                            <div class="line-body">
+                                <div class="line"></div>
+                                <div class="line-desc">
+                                    <p v-for="(item, i) in routeList" :key="i">{{ item }}</p>
+                                </div>
+                            </div>
+                            <div class="end">终点</div>
+                        </div>
+                    </div>
+                    <div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
+                </div>
+            </div>
+            <div class="map">
+                <div style="flex: 1; overflow: hidden; margin: 0 0 10px">
+                    <div id="xianmapContainer" class="xianmapContainer"></div>
+                </div>
+            </div>
+            <div v-show="false" id="container"></div>
+            <div v-show="false" id="panel"></div>
+            <div class="map-legend">
+                <div v-for="(item, i) in legendList" :key="i" class="legend-item">
+                    <div :style="{ color: item.color }"><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="center-footer" v-if="showFooter">
+            <div class="count-item">
+                <div class="num">{{ useDetail?.alerdyreceive || '0' }}</div>
+                <div class="text">累计受理</div>
+            </div>
+            <div class="count-item">
+                <div class="num">{{ useDetail?.totalacceptance || '0' }}</div>
+                <div class="text">累计处置</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref, onMounted } from 'vue';
+    import { tabList, legendList } from '/@/views/indexSun/indexSun.ts';
+    import { message } from 'ant-design-vue';
+    import { innerLineLight, outerLineOption } from '/@/assets/mapUtils/mapConstant.ts';
+    import { Map } from '/@/assets/mapUtils/map.ts';
+    import { aircraft, getKmStr, getTimeStr, mapApiSwitch, TabType } from '/@/components/xianMap/xianMapHooks.ts';
+    import { useDetailStore } from '/@/store/modules/detailData.ts';
+
+    const list = ref(tabList);
+    const currentIndex = ref(0);
+    let searchFlag = ref(false);
+    const formState = ref({
+        start: '',
+        end: '',
+    });
+    const props = defineProps({
+        //是否展示底部统计
+        showFooter: {
+            type: Boolean,
+            default: () => {
+                return true;
+            },
+        },
+    });
+    const useDetail = useDetailStore();
+    const showRoutePanel = ref(false);
+    const panelTitle = ref();
+    const level = ref(0);
+    const routeList = ref([]);
+    const emits = defineEmits(['clearHospitalList']);
+    const showDrivingPanel = ref(false);
+    onMounted(() => {
+        const op = {
+            el: 'xianmapContainer',
+            innerLineOption: innerLineLight,
+            outerLineOption: outerLineOption,
+        };
+        Map.initMap(op).then(() => {
+            getMapData(tabList[0].type);
+            Map.map && Map.map.on('zoomend', setLevel);
+            Map.map && Map.map.on('zoomend', setLevel);
+        });
+    });
+    function setLevel() {
+        //获取当前地图级别
+        level.value = Map.map.getZoom();
+    }
+    function removeInput() {
+        formState.value.start = '';
+        formState.value.end = '';
+        searchFlag.value = false;
+    }
+    function changeTab(item, i: number) {
+        currentIndex.value = i;
+        Map.clearActiveHospital();
+        closeDrivingElement();
+        Map.map.off('moveend', logMapinfo);
+        if (TabType.diFangYiYuan == item.type) {
+            let { lng, lat } = Map.getMapCenter();
+            Map.getAddressByPoint([lng, lat]).then((text, data) => {
+                // console.log('data', data, data.citycode);
+            });
+            Map.removeOverlayGroup();
+            Map.map.on('moveend', logMapinfo);
+            return;
+        }
+        if (TabType.zhiShengJi == item.type) {
+            Map.createAircraft(aircraft);
+            return;
+        } else {
+            getMapData(item.type, { type: item.type });
+        }
+    }
+    function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
+        showRoutePanel.value = false;
+        panelTitle.value = '';
+        if (!formState.value.start) {
+            return message.warn('请输入起点');
+        }
+        if (!formState.value.end) {
+            return message.warn('请输入终点');
+        }
+        searchFlag.value = true;
+        let map = new AMap.Map('container', {
+            resizeEnable: true,
+            center: [116.397428, 39.90923], //地图中心点
+            zoom: 13, //地图显示的缩放级别
+        });
+        let driving = new AMap.Driving({
+            map: map,
+            panel: 'panel',
+        });
+        driving.search([{ keyword: formState.value.start }, { keyword: formState.value.end }], function (status, result) {
+            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
+            if (status === 'complete') {
+                //  console.log('绘制驾车路线完成');
+                searchFlag.value = false;
+            } else {
+                console.log('获取驾车数据失败：', result);
+                searchFlag.value = false;
+            }
+        });
+        AMap.Event.addListener(driving, 'complete', (res) => {
+            const data = JSON.parse(JSON.stringify(res));
+            searchFlag.value = false;
+            console.log('查询结果', data);
+            if (data.info == 'OK') {
+                const { routes } = data;
+                setTitle(routes[0]);
+                let arr = [];
+                arr.push(data.originName);
+                routes[0].steps.map((item: any) => {
+                    arr.push(item.instruction);
+                });
+                arr.push(data.destinationName);
+                showRoutePanel.value = true;
+                routeList.value = arr;
+            }
+        });
+    }
+    async function getMapData(type, params = {}) {
+        try {
+            const { code, result } = await mapApiSwitch(type, params);
+            if (code == 200) {
+                if (Array.isArray(result) && result.length > 0) {
+                    Map.createOverlay(
+                        result,
+                        {
+                            content: (val) => {
+                                return `<div style="
+                                width: 21px;
+                                height: 44px;
+                                position: absolute;
+                                left: -20px;
+                                top: -20px;" title="${val?.name}">
+                            </div>`;
+                            },
+                        },
+                        () => {},
+                        true
+                    );
+                } else {
+                    Map.removeOverlayGroup();
+                }
+            }
+        } catch (e) {
+            console.warn(e);
+        }
+    }
+    function closeDrivingElement() {
+        Map.clearNavigationElements();
+        formState.value.start = '';
+        formState.value.end = '';
+        showDrivingPanel.value = false;
+        emits('clearHospitalList');
+    }
+    function setTitle({ time, distance }) {
+        let str = '全程';
+        str += getTimeStr(time);
+        str += getKmStr(distance);
+        panelTitle.value = str;
+    }
+    function outClick() {
+        showRoutePanel.value = false;
+    }
+
+    const currentCityCode = ref('');
+    function logMapinfo() {
+        Map.map.getCity(function (info) {
+            const { citycode } = info;
+            if (currentCityCode.value != citycode) {
+                Map.createActiveHospital(citycode);
+                currentCityCode.value = citycode;
+            }
+        });
+    }
+</script>
+
+<style lang="less" scoped>
+    .sun-center-map {
+        flex: 1;
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        align-content: space-between;
+        position: relative;
+        .map-box {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            .tab-list {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-around;
+                font-size: 16px;
+                letter-spacing: 1px;
+                .tab {
+                    width: calc(100% / 8);
+                    height: 40px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: #ffffff;
+                    background: #082147;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    transition: all 0.3s;
+
+                    &.active {
+                        color: #00ccff;
+                        background: #073063;
+                        font-weight: bold;
+                    }
+                }
+            }
+            .route-navigation {
+                --fontColor: #607ddb;
+                margin: 12px 0;
+                width: 100%;
+                height: 46px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 6px;
+                position: absolute;
+                top: 36px;
+                z-index: 999;
+                transition: all 0.3s;
+
+                :deep(.form-item-self) {
+                    label {
+                        color: var(--fontColor) !important;
+                    }
+
+                    .ant-input {
+                        width: 280px;
+                        border-radius: 2px 2px 2px 2px;
+                        color: var(--fontColor);
+                        background: #d7ddf6;
+                        border: 1px solid #a8bcff;
+
+                        &::placeholder {
+                            color: var(--fontColor);
+                        }
+                    }
+                }
+
+                .reset-btn {
+                    width: 64px;
+                    height: 32px;
+                    border-radius: 5px;
+                    color: var(--fontColor);
+                    background: #c7d4ff;
+                    border: 1px solid #7092ff;
+                }
+
+                .search-btn {
+                    margin-left: 10px;
+                    width: 120px;
+                    height: 32px;
+                    color: #fff;
+                    background: #6d8bf1;
+                    border-radius: 5px;
+                }
+
+                .line-container {
+                    position: absolute;
+                    right: 0;
+                    top: 54px;
+                    width: 288px;
+                    padding: 9px 18px;
+                    min-height: 200px;
+                    max-height: 473px;
+                    overflow: auto;
+                    background: rgba(0, 0, 0, 0.7);
+                    border-radius: 2px;
+                    //border: 1px solid #1b7ef2;
+
+                    .line-title {
+                        margin-bottom: 9px;
+                        font-size: 14px;
+                        font-weight: 700;
+                        color: var(--cardFontColor);
+                    }
+
+                    .line-content {
+                        font-size: 12px;
+                        color: var(--cardFontColor);
+
+                        .start {
+                            display: flex;
+                            align-items: center;
+
+                            &::before {
+                                content: '起';
+                                color: var(--cardFontFFF);
+                                width: 20px;
+                                height: 20px;
+                                margin-right: 7px;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                border-radius: 50%;
+                                background: var(--circelBg);
+                            }
+                        }
+
+                        .end {
+                            display: flex;
+                            align-items: center;
+
+                            &::before {
+                                content: '终';
+                                color: var(--cardFontFFF);
+                                width: 20px;
+                                height: 20px;
+                                margin-right: 7px;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                border-radius: 50%;
+                                background: var(--circelBg);
+                            }
+                        }
+
+                        .line-body {
+                            display: flex;
+                            color: var(--cardFontColor);
+                        }
+
+                        .line {
+                            width: 1px;
+                            background-color: var(--circelBg);
+                            margin: 5px 19px 5px 8px;
+                        }
+
+                        .line-desc {
+                            flex: 1;
+                        }
+                    }
+
+                    .empty-data {
+                        margin-top: 30%;
+                        text-align: center;
+                    }
+                }
+            }
+            .map {
+                display: flex;
+                flex: 1;
+                .xianmapContainer {
+                    flex: 1;
+                    height: calc(100% + 22px);
+                    margin: 10px 0;
+                }
+            }
+            .map-legend {
+                position: absolute;
+                bottom: 20px;
+                left: 10px;
+                padding: 0 20px 0 10px;
+                display: flex;
+                border-radius: 6px;
+                flex-direction: column;
+
+                .legend-item {
+                    width: 100%;
+                    font-size: 14px;
+                    font-weight: 400;
+                    margin: 5px 0;
+                    color: #607ddb;
+                    letter-spacing: 2px;
+                    .legend-img {
+                        width: 20px;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+        .center-footer {
+            position: absolute;
+            left: 50%;
+            bottom: 20px;
+            transform: translateX(-50%);
+            display: flex;
+            justify-content: center;
+            margin-bottom: 10px;
+            gap: 20px;
+            > :nth-child(1) {
+                background: url('/@/assets/indexSun/footerBlue.png') no-repeat;
+                background-size: 100% 100%;
+                color: #22e8ff;
+                margin-right: 80px;
+            }
+            > :nth-child(2) {
+                background: url('/@/assets/indexSun/footerGreen.png') no-repeat;
+                background-size: 100% 100%;
+                color: #45ffa1;
+            }
+            .count-item {
+                width: 240px;
+                height: 120px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                //background: url('/@/assets/images/footer-num.png') no-repeat;
+                //border-radius: 14px;
+
+                .num {
+                    font-size: 24px;
+                    font-weight: 700;
+                }
+
+                .text {
+                    font-size: 16px;
+                    font-weight: 400;
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/views/indexSun/indexSun.ts b/src/views/indexSun/indexSun.ts
new file mode 100644
index 0000000..2740953
--- /dev/null
+++ b/src/views/indexSun/indexSun.ts
@@ -0,0 +1,126 @@
+import * as echarts from 'echarts';
+import { legend1, legend2, legend3, legend4, legend5 } from '/@/components/xianMap/xianMapHooks.ts';
+export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href;
+export const legend2 = new URL('/@/assets/img/legend2.png', import.meta.url).href;
+export const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href;
+export const legend4 = new URL('/@/assets/img/legend4.png', import.meta.url).href;
+export const legend5 = new URL('/@/assets/img/legend5.png', import.meta.url).href;
+export function getClassCharts(dx, dy) {
+    return {
+        grid: {
+            top: 40,
+            bottom: 40,
+            left: '60',
+        },
+        xAxis: {
+            type: 'category',
+            data: dx,
+            axisTick: {
+                show: false,
+                lineStyle: {
+                    color: 'rgba(101, 198, 231, .1)',
+                },
+            },
+            axisLabel: {
+                color: '#C9DAFF',
+                fontSize: 12,
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#65C6E7', // 设置轴线颜色为红色
+                },
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name: '次数',
+            // nameLocation: 'end', // 将单位名称位置设置为起始位置
+            // nameGap: 10,
+            // nameRotate: 0, // 设置旋转角度，0 表示水平
+            nameTextStyle: {
+                fontSize: 12,
+                color: '#65C6E7',
+                left: 100,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(101, 198, 231, .1)',
+                    width: 1,
+                    type: 'solid',
+                },
+            },
+            interval: 25, // 步长
+            min: 0, // 起始 - 设置y轴刻度的最小值
+            max: 100, // 终止 - 设置y轴刻度的最大值
+            axisLabel: {
+                color: '#65C6E7',
+                formatter: function (value, index) {
+                    return value;
+                },
+            },
+        },
+        series: [
+            {
+                data: dy.map((item) => {
+                    return {
+                        value: item,
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                { offset: 0, color: '#5ABFFF' },
+                                { offset: 0.2, color: 'rgba(30, 166, 253, .5)' },
+                                { offset: 0.5, color: 'rgba(30, 166, 253, .1)' },
+                                { offset: 0.8, color: 'rgba(30, 166, 253, .5)' },
+                                { offset: 1, color: '#5ABFFF' },
+                            ]),
+                            borderColor: '#51caf5', // 黑色边框
+                            borderWidth: item ? 1 : 0,
+                        },
+                    };
+                }),
+                label: {
+                    show: true, // 显示标签
+                    position: 'top', // 标签显示在柱子顶部
+                    color: '#51caf5', // 设置字体颜色
+                    fontSize: 12, // 设置字体大小
+                },
+                type: 'bar',
+                barWidth: 18,
+            },
+        ],
+    };
+}
+export enum TabType {
+    all = '', //所有资源
+    youTianYiYuan = '1', //油田医院
+    jianKangXiaoWu = '2', //健康小屋
+    jiuHuChe = '5', //救护车
+}
+export const tabList = [
+    {
+        name: '所有资源',
+        type: TabType.all,
+    },
+    {
+        name: '健康小屋',
+        type: TabType.jianKangXiaoWu,
+    },
+    {
+        name: '油田医院',
+        type: TabType.youTianYiYuan,
+    },
+    {
+        name: '救护车',
+        type: TabType.jiuHuChe,
+    },
+    {
+        name: '急救路线',
+    },
+];
+export const legendList = [
+    { img: legend1, text: '油田医院', color: '#D86AF7' },
+    { img: legend2, text: '医疗点', color: '#39D78B' },
+    { img: legend3, text: '救护车', color: '#EE7E31' },
+    { img: legend4, text: '合作医院', color: '#3BAAFA' },
+    { img: legend5, text: '地方医院', color: '#1BEFF6' },
+];
diff --git a/src/views/indexSun/oneL.vue b/src/views/indexSun/oneL.vue
new file mode 100644
index 0000000..d766550
--- /dev/null
+++ b/src/views/indexSun/oneL.vue
@@ -0,0 +1,227 @@
+<template>
+    <div class="one-l-box">
+        <div class="title"> 服务详情数据 </div>
+        <div class="content">
+            <div class="type-time">
+                <div @click="clickChooseType('0')" :class="[chooseType === '0' ? 'selected' : 'no-selected']">
+                    本周
+                    <div>
+                        <div v-if="chooseType === '0'" class="triangle"></div>
+                    </div>
+                </div>
+                <div @click="clickChooseType('1')" :class="[chooseType === '1' ? 'selected' : 'no-selected']">
+                    本月
+                    <div>
+                        <div v-if="chooseType === '1'" class="triangle"></div>
+                    </div>
+                </div>
+                <div @click="clickChooseType('2')" :class="[chooseType === '2' ? 'selected' : 'no-selected']">
+                    本年
+                    <div>
+                        <div v-if="chooseType === '2'" class="triangle"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="server-container">
+                <div v-for="(item, index) in statistics" class="server-item" :key="index">
+                    <span>{{ item?.name }}</span>
+                    <span>{{ item?.value }}123</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue';
+    import { useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
+
+    const chooseType = ref('0');
+    const { statistics, setStatistics, getStatistics } = useStatistics();
+
+    function clickChooseType(index) {
+        if (chooseType.value === index) return;
+        chooseType.value = index;
+    }
+</script>
+<style lang="less" scoped>
+    .one-l-box {
+        background: rgba(8, 75, 100, 0.2);
+        .title {
+            height: 40px;
+            border-radius: 14px 14px 0 0;
+            font-weight: bold;
+            font-size: 20px;
+            letter-spacing: 2px;
+            color: #ffffff;
+            line-height: 40px;
+            padding: 0 20px;
+            background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+        }
+        .content {
+            height: calc(100% - 40px);
+            display: flex;
+            flex-direction: column;
+            .type-time {
+                padding-top: 10px;
+                margin-right: 10px;
+                font-size: 14px;
+                > div {
+                    cursor: pointer;
+                    padding: 3px 15px;
+                    margin: 0 10px;
+                    display: flex;
+                    align-items: center;
+                }
+                .selected {
+                    color: #00ccff;
+                    background: rgba(0, 204, 255, 0.2);
+                    position: relative;
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 8px; /* 线条宽度 */
+                        height: 8px; /* 线条高度 */
+                        border-top: 3px solid #00ccff; /* 顶部线条 */
+                        border-left: 3px solid #00ccff; /* 左侧线条 */
+                    }
+
+                    &:after {
+                        content: '';
+                        position: absolute;
+                        bottom: 0;
+                        right: 0;
+                        width: 8px; /* 线条宽度 */
+                        height: 8px; /* 线条高度 */
+                        border-bottom: 3px solid #00ccff; /* 顶部线条 */
+                        border-right: 3px solid #00ccff; /* 左侧线条 */
+                    }
+                    > div {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        top: 0;
+                        left: 0;
+
+                        &:before {
+                            content: '';
+                            position: absolute;
+                            top: 0;
+                            right: 0;
+                            width: 8px; /* 线条宽度 */
+                            height: 8px; /* 线条高度 */
+                            border-top: 3px solid #00ccff; /* 顶部线条 */
+                            border-right: 3px solid #00ccff; /* 左侧线条 */
+                        }
+
+                        &:after {
+                            content: '';
+                            position: absolute;
+                            bottom: 0;
+                            left: 0;
+                            width: 8px; /* 线条宽度 */
+                            height: 8px; /* 线条高度 */
+                            border-bottom: 3px solid #00ccff; /* 顶部线条 */
+                            border-left: 3px solid #00ccff; /* 左侧线条 */
+                        }
+                    }
+                }
+                .no-selected {
+                    color: #b6b6b6;
+                    background: rgba(26, 69, 126, 0.2);
+                    position: relative;
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 8px; /* 线条宽度 */
+                        height: 8px; /* 线条高度 */
+                        border-top: 3px solid #1a457e; /* 顶部线条 */
+                        border-left: 3px solid #1a457e; /* 左侧线条 */
+                    }
+
+                    &:after {
+                        content: '';
+                        position: absolute;
+                        bottom: 0;
+                        right: 0;
+                        width: 8px; /* 线条宽度 */
+                        height: 8px; /* 线条高度 */
+                        border-bottom: 3px solid #1a457e; /* 顶部线条 */
+                        border-right: 3px solid #1a457e; /* 左侧线条 */
+                    }
+                    > div {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        top: 0;
+                        left: 0;
+
+                        &:before {
+                            content: '';
+                            position: absolute;
+                            top: 0;
+                            right: 0;
+                            width: 8px; /* 线条宽度 */
+                            height: 8px; /* 线条高度 */
+                            border-top: 3px solid #1a457e; /* 顶部线条 */
+                            border-right: 3px solid #1a457e; /* 左侧线条 */
+                        }
+
+                        &:after {
+                            content: '';
+                            position: absolute;
+                            bottom: 0;
+                            left: 0;
+                            width: 8px; /* 线条宽度 */
+                            height: 8px; /* 线条高度 */
+                            border-bottom: 3px solid #1a457e; /* 顶部线条 */
+                            border-left: 3px solid #1a457e; /* 左侧线条 */
+                        }
+                    }
+                }
+                .triangle {
+                    position: absolute;
+                    left: 50%;
+                    bottom: 0;
+                    transform: translateX(-50%);
+                    width: 0;
+                    height: 0;
+                    border-left: 5px solid transparent; /* 左边透明 */
+                    border-right: 5px solid transparent; /* 右边透明 */
+                    border-bottom: 6px solid #00ccff; /* 底部为黑色，形成三角形 */
+                }
+            }
+            .server-container {
+                color: #fff;
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                overflow-y: auto;
+                position: relative;
+                font-size: 16px;
+                font-weight: bold;
+                letter-spacing: 2px;
+                margin-top: 10px;
+                padding-bottom: 10px;
+                .spin {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                }
+            }
+            .server-item {
+                //    font-size: 16px;
+                padding: 5px 3% 5px 5%;
+                &.hasCursor {
+                    cursor: pointer;
+                }
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+    }
+</style>
diff --git a/src/views/indexSun/oneR.vue b/src/views/indexSun/oneR.vue
new file mode 100644
index 0000000..43f0f65
--- /dev/null
+++ b/src/views/indexSun/oneR.vue
@@ -0,0 +1,97 @@
+<template>
+    <div class="three-l-box">
+        <div class="title">
+            <span>{{ props.title }}</span>
+            <span class="look-view">查看详情</span>
+        </div>
+        <div class="content">
+            <div class="content-item">
+                <template v-if="scrollList.length > 0">
+                    <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="5" v-bind="{ step: 0.2 }">
+                        <div class="item-d" v-for="(item, index) in scrollList" :key="index">
+                            <div>张二雷{{ index }}</div>
+                            <div>40岁</div>
+                            <div :style="{ color: props.type == 1 ? '#f24439' : '#f6ff00' }">体重(超重)</div>
+                            <div>2025-10-26 22:29:58</div>
+                        </div>
+                    </vue3-seamless-scroll>
+                </template>
+                <template v-else>
+                    <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
+                        <Empty :description="'暂无数据'" />
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+    import { Empty } from 'ant-design-vue';
+    import { ref, onMounted } from 'vue';
+    import pointPng from '/@/assets/indexSun/point.png';
+    import addressPng from '/@/assets/indexSun/address.png';
+    const loading = ref(true);
+    const props = defineProps({
+        title: {
+            type: String,
+            default: '',
+        },
+        type: {
+            type: Number,
+            default: 1,
+        },
+    });
+    const scrollList = ref<any[]>([{}, {}, {}, {}, {}, {}, {}, {}]);
+</script>
+<style lang="less" scoped>
+    .three-l-box {
+        background: rgba(8, 75, 100, 0.2);
+        display: flex;
+        flex-direction: column;
+        .title {
+            height: 40px;
+            border-radius: 14px 14px 0 0;
+            font-weight: bold;
+            font-size: 20px;
+            letter-spacing: 2px;
+            color: #ffffff;
+            line-height: 40px;
+            padding: 0 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+            .look-view {
+                font-size: 14px;
+                cursor: pointer;
+            }
+        }
+        .content {
+            padding: 10px 20px;
+            height: calc(100% - 40px);
+            .content-item {
+                height: 100%;
+                overflow: hidden;
+                .item-d {
+                    border-bottom: 1px solid #0076b4;
+                    height: 40px;
+                    display: flex;
+                    align-items: center;
+                    color: #ffffff;
+                    justify-content: space-between;
+                    font-size: 14px;
+                    cursor: pointer;
+                    .item-d-img {
+                        img {
+                            display: inline-block;
+                            width: 24px;
+                            height: 24px;
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/views/indexSun/threeL.vue b/src/views/indexSun/threeL.vue
new file mode 100644
index 0000000..084113e
--- /dev/null
+++ b/src/views/indexSun/threeL.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="three-l-box">
+        <div class="title">
+            <span>健康终端报警</span>
+            <span class="look-view">查看详情</span>
+        </div>
+        <div class="content">
+            <div class="content-item">
+                <template v-if="scrollList.length > 0">
+                    <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="5" v-bind="{ step: 0.2 }">
+                        <div class="item-d" v-for="(item, index) in scrollList" :key="index">
+                            <div>张二雷{{ index }}</div>
+                            <div style="color: #f6ff00">压力异常(82)</div>
+                            <div>2025-10-26 22:29:58</div>
+                            <div class="item-d-img">
+                                <img :src="pointPng" alt="" />
+                                <img :src="addressPng" alt="" />
+                            </div>
+                        </div>
+                    </vue3-seamless-scroll>
+                </template>
+                <template v-else>
+                    <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
+                        <Empty :description="'暂无数据'" />
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+    import { Empty } from 'ant-design-vue';
+    import { ref, onMounted } from 'vue';
+    import pointPng from '/@/assets/indexSun/point.png';
+    import addressPng from '/@/assets/indexSun/address.png';
+    const loading = ref(true);
+    const scrollList = ref<any[]>([{}, {}, {}, {}, {}, {}, {}, {}]);
+</script>
+<style lang="less" scoped>
+    .three-l-box {
+        background: rgba(8, 75, 100, 0.2);
+        display: flex;
+        flex-direction: column;
+        .title {
+            height: 40px;
+            border-radius: 14px 14px 0 0;
+            font-weight: bold;
+            font-size: 20px;
+            letter-spacing: 2px;
+            color: #ffffff;
+            line-height: 40px;
+            padding: 0 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+            .look-view {
+                font-size: 14px;
+                cursor: pointer;
+            }
+        }
+        .content {
+            padding: 10px 20px;
+            height: calc(100% - 40px);
+            .content-item {
+                height: 100%;
+                overflow: hidden;
+                .item-d {
+                    border-bottom: 1px solid #0076b4;
+                    height: 40px;
+                    display: flex;
+                    align-items: center;
+                    color: #ffffff;
+                    justify-content: space-between;
+                    font-size: 14px;
+                    cursor: pointer;
+                    .item-d-img {
+                        img {
+                            display: inline-block;
+                            width: 24px;
+                            height: 24px;
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/views/indexSun/twoL.vue b/src/views/indexSun/twoL.vue
new file mode 100644
index 0000000..b5feb1e
--- /dev/null
+++ b/src/views/indexSun/twoL.vue
@@ -0,0 +1,272 @@
+<template>
+    <div class="two-l-box">
+        <div class="title">
+            <span>主诉分类</span>
+            <span class="look-view">查看详情</span>
+        </div>
+        <div class="content">
+            <div class="content-search">
+                <div class="type-select">
+                    <a-select v-model:value="selectValue" class="type-select" :options="selectOptions">
+                        <a-select-option value="全部数据">全部数据</a-select-option>
+                    </a-select>
+                </div>
+                <div class="type-time">
+                    <div @click="clickChooseType('0')" :class="[chooseType === '0' ? 'selected' : 'no-selected']">
+                        全部
+                        <div>
+                            <div v-if="chooseType === '0'" class="triangle"></div>
+                        </div>
+                    </div>
+                    <div @click="clickChooseType('1')" :class="[chooseType === '1' ? 'selected' : 'no-selected']">
+                        男
+                        <div>
+                            <div v-if="chooseType === '1'" class="triangle"></div>
+                        </div>
+                    </div>
+                    <div @click="clickChooseType('2')" :class="[chooseType === '2' ? 'selected' : 'no-selected']">
+                        女
+                        <div>
+                            <div v-if="chooseType === '2'" class="triangle"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="content-chart">
+                <div class="charts" ref="newChart"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref, onMounted } from 'vue';
+    import * as echarts from 'echarts';
+    import { getClassCharts } from '/@/views/indexSun/indexSun.ts';
+
+    const chooseType = ref('0');
+    const selectValue = ref('all');
+    const selectOptions = ref([{ label: '全部数据', value: 'all' }]);
+    const newChart = ref<HTMLElement>();
+    function clickChooseType(type) {
+        if (chooseType.value === type) return;
+        chooseType.value = type;
+        initChart();
+    }
+    onMounted(() => {
+        initChart();
+    });
+    const myChart = ref(null);
+
+    function initChart() {
+        myChart.value = echarts.init(newChart.value!);
+        const dx = ['120', '应急就医', '急救联动'];
+        const dy = [46, 39, 18];
+        let option = getClassCharts(dx, dy);
+        myChart.value.setOption(option);
+    }
+</script>
+<style lang="less" scoped>
+    .two-l-box {
+        background: rgba(8, 75, 100, 0.2);
+        .title {
+            height: 40px;
+            border-radius: 14px 14px 0 0;
+            font-weight: bold;
+            font-size: 20px;
+            letter-spacing: 2px;
+            color: #ffffff;
+            line-height: 40px;
+            padding: 0 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+            .look-view {
+                font-size: 14px;
+                cursor: pointer;
+            }
+        }
+        .content {
+            height: calc(100% - 40px);
+            display: flex;
+            flex-direction: column;
+            .content-search {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin: 5px 10px;
+                .type-select {
+                }
+            }
+            .type-time {
+                font-size: 14px;
+                > div {
+                    cursor: pointer;
+                    padding: 3px 15px;
+                    margin: 0 10px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 60px;
+                }
+                .selected {
+                    color: #00ccff;
+                    background: rgba(0, 204, 255, 0.2);
+                    position: relative;
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 8px; /* 线条宽度 */
+                        height: 8px; /* 线条高度 */
+                        border-top: 3px solid #00ccff; /* 顶部线条 */
+                        border-left: 3px solid #00ccff; /* 左侧线条 */
+                    }
+
+                    &:after {
+                        content: '';
+                        position: absolute;
+                        bottom: 0;
+                        right: 0;
+                        width: 8px; /* 线条宽度 */
+                        height: 8px; /* 线条高度 */
+                        border-bottom: 3px solid #00ccff; /* 顶部线条 */
+                        border-right: 3px solid #00ccff; /* 左侧线条 */
+                    }
+                    > div {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        top: 0;
+                        left: 0;
+
+                        &:before {
+                            content: '';
+                            position: absolute;
+                            top: 0;
+                            right: 0;
+                            width: 8px; /* 线条宽度 */
+                            height: 8px; /* 线条高度 */
+                            border-top: 3px solid #00ccff; /* 顶部线条 */
+                            border-right: 3px solid #00ccff; /* 左侧线条 */
+                        }
+
+                        &:after {
+                            content: '';
+                            position: absolute;
+                            bottom: 0;
+                            left: 0;
+                            width: 8px; /* 线条宽度 */
+                            height: 8px; /* 线条高度 */
+                            border-bottom: 3px solid #00ccff; /* 顶部线条 */
+                            border-left: 3px solid #00ccff; /* 左侧线条 */
+                        }
+                    }
+                }
+                .no-selected {
+                    color: #b6b6b6;
+                    background: rgba(26, 69, 126, 0.2);
+                    position: relative;
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 8px; /* 线条宽度 */
+                        height: 8px; /* 线条高度 */
+                        border-top: 3px solid #1a457e; /* 顶部线条 */
+                        border-left: 3px solid #1a457e; /* 左侧线条 */
+                    }
+
+                    &:after {
+                        content: '';
+                        position: absolute;
+                        bottom: 0;
+                        right: 0;
+                        width: 8px; /* 线条宽度 */
+                        height: 8px; /* 线条高度 */
+                        border-bottom: 3px solid #1a457e; /* 顶部线条 */
+                        border-right: 3px solid #1a457e; /* 左侧线条 */
+                    }
+                    > div {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        top: 0;
+                        left: 0;
+
+                        &:before {
+                            content: '';
+                            position: absolute;
+                            top: 0;
+                            right: 0;
+                            width: 8px; /* 线条宽度 */
+                            height: 8px; /* 线条高度 */
+                            border-top: 3px solid #1a457e; /* 顶部线条 */
+                            border-right: 3px solid #1a457e; /* 左侧线条 */
+                        }
+
+                        &:after {
+                            content: '';
+                            position: absolute;
+                            bottom: 0;
+                            left: 0;
+                            width: 8px; /* 线条宽度 */
+                            height: 8px; /* 线条高度 */
+                            border-bottom: 3px solid #1a457e; /* 顶部线条 */
+                            border-left: 3px solid #1a457e; /* 左侧线条 */
+                        }
+                    }
+                }
+                .triangle {
+                    position: absolute;
+                    left: 50%;
+                    bottom: 0;
+                    transform: translateX(-50%);
+                    width: 0;
+                    height: 0;
+                    border-left: 5px solid transparent; /* 左边透明 */
+                    border-right: 5px solid transparent; /* 右边透明 */
+                    border-bottom: 6px solid #00ccff; /* 底部为黑色，形成三角形 */
+                }
+            }
+            .server-container {
+                color: #fff;
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                overflow-y: auto;
+                position: relative;
+                font-size: 16px;
+                font-weight: bold;
+                letter-spacing: 2px;
+                margin-top: 10px;
+                padding-bottom: 10px;
+                .spin {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                }
+            }
+            .server-item {
+                //    font-size: 16px;
+                padding: 5px 3% 5px 5%;
+                &.hasCursor {
+                    cursor: pointer;
+                }
+                display: flex;
+                justify-content: space-between;
+            }
+            .content-chart {
+                width: 100%;
+                margin: 0 auto;
+                flex: 1;
+                .charts {
+                    height: 100%;
+                }
+            }
+        }
+    }
+</style>