diff --git a/src/assets/images/vsualized/home/mapopup.png b/src/assets/images/vsualized/home/mapopup.png new file mode 100644 index 0000000..e63cf36 Binary files /dev/null and b/src/assets/images/vsualized/home/mapopup.png differ diff --git a/src/assets/images/vsualized/home/titlebg.png b/src/assets/images/vsualized/home/titlebg.png index 76f4327..5842b34 100644 Binary files a/src/assets/images/vsualized/home/titlebg.png and b/src/assets/images/vsualized/home/titlebg.png differ diff --git a/src/components/centerMap.vue b/src/components/centerMap.vue index df72e20..400d250 100644 --- a/src/components/centerMap.vue +++ b/src/components/centerMap.vue @@ -46,9 +46,9 @@ const chartsData = reactive({ geo3D: { map: mapName.value, roam: true, - zoom: 0.9, + zoom: 1.2, show: true, - zlevel: -2, // 必须设置, + zlevel: -1, // 必须设置, viewControl: { distance: 110, alpha: 60, @@ -62,7 +62,7 @@ const chartsData = reactive({ }, itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性,包括颜色,透明度,描边等。 - color: 'rgba(48,160,187,0.8)', // 地图板块的颜色 + color: 'rgba(75,255,180,0.2)', // 地图板块的颜色 opacity: 1, // 图形的不透明度 [ default: 1 ] borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ] borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ] @@ -88,19 +88,7 @@ const chartsData = reactive({ color: '#fff', }, itemStyle: { - // show: false, - color: { - type: 'linear', // 线性渐变 - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: '#45bfe9' }, - { offset: 1, color: '#01589c' }, - ], - global: false, // 默认为 false - }, + color: 'rgba(75,255,180,0.3)', // 地图板块的颜色 }, }, }, @@ -152,7 +140,7 @@ const chartsData = reactive({ show: true, itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性,包括颜色,透明度,描边等。 - color: 'rgba(48,160,187,0.8)', // 地图板块的颜色 + color: 'rgba(75,255,180,0.2)', // 地图板块的颜色 opacity: 1, // 图形的不透明度 [ default: 1 ] borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ] borderColor: 'rgba(92, 184, 238, 1)', // 图形描边的颜色。[ default: #333 ] @@ -171,27 +159,27 @@ const chartsData = reactive({ borderColor: '#000', }, }, - emphasis: { - //高亮状态的效果 - label: { - show: true, - color: '#fff', - }, - itemStyle: { - // show: false, - color: { - type: 'linear', // 线性渐变 - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: '#45bfe9' }, - { offset: 1, color: '#01589c' }, - ], - }, - }, - }, + // emphasis: { + // //高亮状态的效果 + // label: { + // show: true, + // color: '#fff', + // }, + // itemStyle: { + // // show: false, + // areaColor: { + // type: 'linear', + // x: 0, + // y: 0, + // x2: 1, + // y2: 0, + // colorStops: [ + // { offset: 0, color: '#4bffb4' }, + // { offset: 1, color: '#4bffb4' }, + // ], + // }, + // }, + // }, }, // 闪烁散点图系列 { @@ -258,8 +246,8 @@ div { max-height: 1000px; } .map-pos { - width: 80%; - height: 80%; + width: 100%; + height: 100%; position: absolute; bottom: 0; left: 50%; diff --git a/src/components/subTop.vue b/src/components/subTop.vue index d6b236d..0c1073d 100644 --- a/src/components/subTop.vue +++ b/src/components/subTop.vue @@ -70,7 +70,7 @@ watch( letter-spacing: 4px; text-shadow: -2px 0 0 1px #add8f1; width: 100%; - padding: 0 36px; + padding: 0 36px 0 72px; box-sizing: border-box; position: absolute; left: 0;