diff --git a/src/components/ScrollContainer.vue b/src/components/ScrollContainer.vue index fdc28c2..2b75000 100644 --- a/src/components/ScrollContainer.vue +++ b/src/components/ScrollContainer.vue @@ -1,10 +1,14 @@ @@ -42,7 +46,6 @@ const initDisplayData = () => { // 开始自动滚动 const startAutoScroll = () => { if (!scrollContainer.value) return; - scrollTimer.value = setInterval(() => { scrollContainer.value.scrollTop += 1; if (scrollContainer.value.scrollTop >= scrollContainer.value.scrollHeight / 2) { @@ -93,32 +96,91 @@ onBeforeUnmount(() => { \ No newline at end of file diff --git a/src/views/Main.vue b/src/views/Main.vue index 2f69e79..1dc6faa 100644 --- a/src/views/Main.vue +++ b/src/views/Main.vue @@ -7,7 +7,6 @@
    • -<<<<<<< HEAD
    • @@ -16,17 +15,6 @@
  • 最初首发者：   {{ currentItem.earler }}
  • 积极评论者：{{ currentItem.comenter -======= -
  • - -
    • -
  • - -
    • -
  • 最初首发者：   {{ currentItem.earler }}
    • -
  • 积极评论者：{{ currentItem.comenter ->>>>>>> 33171231818e20d0f810df4ae56f3620727af4df }}
  • 锚点用户{{ currentItem.keyuser }}
    • @@ -122,12 +110,10 @@
    @@ -239,11 +226,8 @@ import { useActionStore } from '@/store'; import Chart32_Inspection from '@/components/Chart32_Inspection(1).vue'; import Chart33_WavingBlades from '@/components/Chart33_WavingBlades(1).vue'; import Chart34_RecoveredGoods from '@/components/Chart34_RecoveredGoods(1).vue'; -<<<<<<< HEAD import Chart35_SpecialForces from '@/components/Chart35_SpecialForces(1).vue'; import Chart36_Dialogue from '@/components/Chart36_Dialogue(1).vue'; -======= ->>>>>>> 33171231818e20d0f810df4ae56f3620727af4df let myChart = null; @@ -1071,9 +1055,40 @@ const updateChart = () => { type: 'pie', radius: ['40%', '70%'], center: ['40%', '50%'], + padAngle: 5, avoidLabelOverlap: false, itemStyle: { - borderRadius: 10, + borderRadius: 0, + borderColor: '#fff', + borderWidth: 1 + }, + label: { + show: false, + position: 'outside' + }, + emphasis: { + label: { + show: true, + fontSize: 16, + fontWeight: 'bold', + color: '#fff' + } + }, + labelLine: { + show: false + }, + data: data + } + , + { + name: currentChartType.value === 'registration' ? '注册时间分布' : '行为模式分布', + type: 'pie', + radius: ['20%', '30%'], + center: ['40%', '50%'], + padAngle: 10, + avoidLabelOverlap: false, + itemStyle: { + borderRadius: 0, borderColor: '#fff', borderWidth: 2 }, @@ -1093,8 +1108,7 @@ const updateChart = () => { show: false }, data: data - } - ] + }] }); }; @@ -1169,10 +1183,20 @@ onMounted(() => { trigger: 'axis' }, legend: { - data: ['活跃预警事件', '高风险事件'] + data: ['活跃预警事件', '高风险事件'], + textStyle: { + fontSize: 14, // 字体大小 + fontWeight: 'bold', // 字体粗细(normal/bold/bolder/lighter/100-900) + color: '#E1F4FF', // 字体颜色 + fontFamily: '微软雅黑, Arial, sans-serif', // 字体族 + fontWeight:200, + fontStyle: 'normal' // 字体风格(normal/italic/oblique) + }, }, grid: { left: '5%', + top: '30%', // 距离容器顶部 + bottom: '1%', containLabel: true }, toolbox: { @@ -1195,9 +1219,9 @@ onMounted(() => { // margin:15, textStyle: { color: '#a8aab0', - fontStyle: 'normal', - fontFamily: '微软雅黑', - fontSize: 12, + fontStyle: 'normal', + fontFamily: '微软雅黑', + fontSize: 12, }, formatter: function (params) { var newParamsName = ""; @@ -1228,16 +1252,15 @@ onMounted(() => { show: false, }, axisLine: {//坐标轴轴线相关设置 - lineStyle: { - color: '#E5E9ED', - // opacity:0.2 - } + show: false }, splitLine: { //坐标轴在 grid 区域中的分隔线。 - show: false, + show: true, lineStyle: { - color: '#E5E9ED', - // opacity:0.1 + color: 'rgba(229, 233, 237, 0.3)', // 半透明浅灰色 + type: 'dashed', // 虚线样式 + width: 1, // 线条宽度 + opacity: 0.7 // 线条透明度 } } }, @@ -1263,8 +1286,10 @@ onMounted(() => { splitLine: { show: true, lineStyle: { - color: '#E5E9ED', - // opacity:0.1 + color: 'rgba(229, 233, 237, 0.3)', // 半透明浅灰色 + type: 'dashed', // 虚线样式 + width: 1, // 线条宽度 + opacity: 0.7 // 线条透明度 } } @@ -1495,12 +1520,11 @@ onUnmounted(() => { .containner4 { width: 457px; height: 394px; - margin-left: 16px; + margin-left: 10px; margin-top: 30px; background-color: #04142166; border-style: solid; border-width: 0px; - border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1; border-radius: 2px; /* 添加内阴影 */ box-shadow: 0px 0px 18px 0px #0A2E55 inset; @@ -1511,9 +1535,9 @@ onUnmounted(() => { } .temporary-style { - background-image: linear-gradient(to right, #003F7D, #5DB9FF7A); - border-image: linear-gradient(to bottom, #95CEFF, #3AA1F833); - border: 0px solid; + background-image: linear-gradient(to right, #003F7D, #003F7D); + border-image: linear-gradient(to bottom, #003F7D, #003F7D); + border: 1px solid; border-radius: 3px; cursor: pointer; } @@ -1652,23 +1676,17 @@ onUnmounted(() => { } .suggestion li { - width: 360px; - height: 48px; + width: 395px; + height: 52px; color: #FFFFFF; margin-top: 15px; - margin-left: 30px; - border-radius: 8px; -} - -.suggestion li img { - width: 48px; - height: 48px; - margin-right: 10px; - border-radius: 4px; + margin-bottom: 15px; + margin-left: 10px; + border-radius: 5px; } .suggestion li:hover { - background-image: linear-gradient(to bottom, #07293D, #050B23); + background-image: linear-gradient(to bottom, #07293D, #07293D); } .suggestion-containner { @@ -1695,20 +1713,20 @@ onUnmounted(() => { display: flex; flex-direction: column; margin-left: 80px; - margin-top: -50px; + margin-top: -45px; } .span-1 { font-family: OPPOSans; font-weight: 300; - font-size: 16px; - margin-top: -5px; + font-size: 14px; + margin-left: 1px; } .span-2 { font-family: PingFang SC; - font-weight: 200; - font-size: 14px; + font-weight: 100; + font-size: 12px; margin-top: 5px; } @@ -1720,7 +1738,13 @@ onUnmounted(() => { margin-left: 150px; margin-top: -20px; } - +.divider { + height: 1px; /* 必须设置高度才能显示 */ + background-color: #e5e5e5; /* 确保颜色与背景有对比度 */ + margin: 8px 0; /* 上下间距 */ + list-style: none; /* 移除默认列表样式 */ + width: 100%; /* 确保宽度足够 */ +} .suggestions li { padding: 8px; cursor: pointer; @@ -1806,43 +1830,6 @@ onUnmounted(() => { height: 200px; max-height: 200px; } - -.color-block1 { - width: 10px; - height: 10px; - background-color: #D83D6C; - display: inline-block; - margin-right: 5px; - vertical-align: middle; -} - -.color-block2 { - width: 10px; - height: 10px; - background-color: #00CEFF; - display: inline-block; - margin-right: 5px; - vertical-align: middle; -} - -.color-block3 { - width: 10px; - height: 10px; - background-color: #D3ADF7; - display: inline-block; - margin-right: 5px; - vertical-align: middle; -} - -.color-block4 { - width: 10px; - height: 10px; - background-color: #1890FF; - display: inline-block; - margin-right: 5px; - vertical-align: middle; -} - .intime li { list-style-type: none; padding-left: 0; @@ -1875,7 +1862,7 @@ onUnmounted(() => { } .containner3-img { - margin-top: 70px; + margin-top:5px; } .focus-events { @@ -1979,7 +1966,7 @@ onUnmounted(() => { background-color: #04142166; border-style: solid; border-width: 0px; - border-image: linear-gradient(to bottom, #67A4E199, #3AA1F833) 1; + border-radius: 2px; /* 添加内阴影 */ box-shadow: 0px 0px 18px 0px #0A2E55 inset; @@ -2339,21 +2326,42 @@ onUnmounted(() => { } .chart-tabs button { - width: 100px; - height: 30px; + width: 80px; + height: 25px; margin-top: 60px; - margin-left: 10px; - border: none; - border-radius: 15px; - background-color: #333; + background-color: #04142166; color: #fff; cursor: pointer; transition: all 0.3s ease; + font-family: OPPOSans; + font-weight: 300; + font-size: 14px; + color: #E1F4FF; + border: 1px solid #1C588F; + line-height: 18px; + letter-spacing: 0%; + text-align: center; + display: inline-block; + vertical-align: middle; + cursor: pointer; +} +/* 为第一个按钮设置左侧圆角 */ +.chart-tabs button:first-child { + border-radius: 8px 0 0 8px; } +/* 为最后一个按钮设置右侧圆角 */ +.chart-tabs button:last-child { + border-radius: 0 8px 8px 0; +} + +/* 为中间按钮取消所有圆角 */ +.chart-tabs button:not(:first-child):not(:last-child) { + border-radius: 0; +} .chart-tabs button.active-tab { margin-top: 60px; - background-color: #1890ff; + background-color: #236291; box-shadow: 0 0 10px rgba(24, 144, 255, 0.5); } @@ -2361,7 +2369,7 @@ onUnmounted(() => { #categoryChart { width: 80%; height: 400px; -margin-left: -40px; + }