修改样式布局

src/layout/Layout.vue

@@ -19,7 +19,6 @@ const mobile = computed(() => appStore.getMobile)
 const collapse = computed(() => appStore.getCollapse)
 
 const layout = computed(() => appStore.getLayout)
-
 const handleClickOutside = () => {
   appStore.setCollapse(true)
 }

src/layout/components/useRenderLayout.tsx

@@ -39,12 +39,7 @@ export const useRenderLayout = () => {
   const renderClassic = () => {
     return (
       <>
-        <div
-          class={[
-            'absolute top-0 left-0 h-full layout-border__right',
-            { '!fixed z-3000': mobile.value }
-          ]}
-        >
+        <div class={['absolute top-0 left-0 h-full', { '!fixed z-3000': mobile.value }]}>
           {logo.value ? (
             <Logo
               class={[
@@ -58,7 +53,7 @@ export const useRenderLayout = () => {
               style="transition: all var(--transition-time-02);"
             ></Logo>
           ) : undefined}
-          <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
+          <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value },'layout-border__right']}></Menu>
         </div>
         <div
           class={[

src/store/modules/app.ts

@@ -48,17 +48,17 @@ export const useAppStore = defineStore('app', {
       title: import.meta.env.VITE_APP_TITLE, // 标题
       pageLoading: true, // 路由跳转loading
       breadcrumb: true, // 面包屑
-      breadcrumbIcon: true, // 面包屑图标
+      breadcrumbIcon: false, // 面包屑图标
       collapse: false, // 折叠菜单
       uniqueOpened: true, // 是否只保持一个子菜单的展开
-      hamburger: true, // 折叠图标
+      hamburger: false, // 折叠图标
       screenfull: true, // 全屏图标
       search: true, // 搜索图标
       size: false, // 尺寸图标
       locale: false, // 多语言图标
       message: true, // 消息图标
-      tagsView: true, // 标签页
-      tagsViewImmerse: true, // 标签页沉浸
+      tagsView: false, // 标签页
+      tagsViewImmerse: false, // 标签页沉浸
       tagsViewIcon: false, // 是否显示标签图标
       logo: true, // logo
       fixedHeader: true, // 固定toolheader
@@ -70,12 +70,12 @@ export const useAppStore = defineStore('app', {
       isDark: false, // 是否是暗黑模式
       currentSize: wsCache.get('default') || 'default', // 组件尺寸
       theme: {
-        elColorPrimary: '#009688',
+        elColorPrimary: '#409eff',
         leftMenuBorderColor: '#eee',
         leftMenuBgColor: '#fff',
         leftMenuBgLightColor: '#fff',
-        leftMenuBgActiveColor: 'RGBA(0,150,136,0.1)',
-        leftMenuCollapseBgActiveColor: 'RGBA(0,150,136,0.1)',
+        leftMenuBgActiveColor: 'rgba(64,158,255,0.1)',
+        leftMenuCollapseBgActiveColor: 'rgba(64,158,255,0.1)',
         leftMenuTextColor: '#333',
         leftMenuTextActiveColor: 'var(--el-color-primary)',
         logoTitleTextColor: 'inherit',

src/styles/index.scss

@@ -35,3 +35,5 @@
     border-left-color: var(--el-color-primary);
   }
 }
+
+

src/styles/var.css

@@ -32,9 +32,9 @@
 
   --top-tool-height: var(--logo-height);
 
-  --top-tool-p-x: 0;
-
-  --tags-view-height: 35px;
+  --top-tool-p-x: 20px;
+  /*--tags-view-height: 35px;*/
+  --tags-view-height: 0px;
   /* header start */
 
   /* tab menu start */

src/views/screen/compenonts/map.vue

@@ -145,7 +145,8 @@ const handlerResize = () => {
 
 const initMap = () => {
   const chartInstance = unref(mapChartRef).getChartRef()
-  const BARWIDTH = 10
+  const BARWIDTH = 18
+  const SYMBOLHEIGHT = 10
   echarts.util.each(mapPoint, (dataItem, id) => {
     //获取对应城市的经纬度
     const geoCoord = dataItem.value.reverse()
@@ -197,7 +198,7 @@ const initMap = () => {
     })
     mapOption.value.grid.push({
       id: idx,
-      width: 30,
+      width: 45,
       height: 60,
       left: coord[0] - 10,
       top: coord[1] - 65,
@@ -216,7 +217,7 @@ const initMap = () => {
         borderRadius: [3, 3, 0, 0]
       },
       label: {
-        show: true,
+        show: false,
         position: 'top',
         offset: [0, 5],
         color: '#fff',
@@ -226,19 +227,19 @@ const initMap = () => {
         {
           value: value1,
           itemStyle: {
-            color: '#FBE947'
+            color: 'rgba(251,233,71,0.8)'
           },
           label: {
-            formatter: value1.toString()
+            // formatter: value1.toString()
           }
         },
         {
           value: value2,
           itemStyle: {
-            color: '#58D764'
+            color: 'rgba(88,215,100,0.8)'
           },
           label: {
-            formatter: value2.toString()
+            // formatter: value2.toString()
           }
         }
       ]
@@ -263,13 +264,53 @@ const initMap = () => {
         {
           value: 100,
           itemStyle: {
-            color: 'rgba(251, 233, 71, .2)'
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                // {
+                //   offset: 0,
+                //   color: 'transparent'
+                // },
+                {
+                  offset: 0,
+                  color: 'rgba(251, 233, 71, .2)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(251, 233, 71, .4)'
+                }
+              ]
+            }
           }
         },
         {
           value: 100,
           itemStyle: {
-            color: 'rgba(88, 215, 100, .2)'
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                // {
+                //   offset: 0,
+                //   color: 'transparent'
+                // },
+                {
+                  offset: 0,
+                  color: 'rgba(88, 215, 100, .2)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(88, 215, 100, .4)'
+                }
+              ]
+            }
           }
         }
       ]
@@ -281,8 +322,8 @@ const initMap = () => {
       coordinateSystem: 'cartesian2d',
       xAxisIndex: idx,
       yAxisIndex: idx,
-      symbolSize: [BARWIDTH, 2],
-      symbolOffset: [0, 0],
+      symbolSize: [BARWIDTH, SYMBOLHEIGHT],
+      symbolOffset: [0, -5],
       symbolPosition: 'end',
       symbol: 'circle',
       zLevel: 4,
@@ -290,18 +331,18 @@ const initMap = () => {
         {
           value: value1,
           itemStyle: {
-            color: '#FBE947'
+            color: '#fbe947'
           }
         },
         {
           value: value2,
           itemStyle: {
-            color: '#58D764'
+            color: 'rgb(88,215,100)'
           }
         }
       ]
     })
-	  // 背景顶部圆形装饰
+    // 背景顶部圆形装饰
     mapOption.value.series.push({
       name: `${dataItem.name}3`,
       type: 'pictorialBar',
@@ -314,25 +355,25 @@ const initMap = () => {
       label: {
         show: false
       },
-      symbolSize: [BARWIDTH, 3],
-      symbolOffset: [0, -1],
+      symbolSize: [BARWIDTH, SYMBOLHEIGHT],
+      symbolOffset: [0, -5],
       barGap: '-100%',
       data: [
         {
           value: 100,
           itemStyle: {
-            color: 'rgba(251, 233, 71, .2)'
+            color: 'rgba(251,233,71,0.6)'
           }
         },
         {
           value: 100,
           itemStyle: {
-            color: 'rgba(88, 215, 100, .2)'
+            color: 'rgba(88,215,100,0.6)'
           }
         }
       ]
     })
-	  // 背景顶部底部装饰
+    // 背景顶部底部装饰
     mapOption.value.series.push({
       name: `${dataItem.name}3`,
       type: 'pictorialBar',
@@ -346,19 +387,19 @@ const initMap = () => {
         show: false
       },
       barGap: '-100%',
-      symbolSize: [BARWIDTH, 3],
-      symbolOffset: [0, -1],
+      symbolSize: [BARWIDTH, SYMBOLHEIGHT],
+      symbolOffset: [0, -5],
       data: [
         {
           value: 0,
           itemStyle: {
-            color: 'rgba(251, 233, 71, 1)'
+            color: 'rgba(251, 233, 71,.8)'
           }
         },
         {
           value: 0,
           itemStyle: {
-            color: 'rgba(88, 215, 100, 1)'
+            color: 'rgba(88, 215, 100, .8)'
           }
         }
       ]