hm 3 days ago
parent
commit
26348c4b7e

+ 2 - 2
src/views/index.vue

@@ -358,7 +358,7 @@ watch(
   width: 1250px;
   height: 988px;
   z-index: 0;
-  background: url('../assets/img/左背景_2.png') no-repeat;
+  // background: url('../assets/img/左背景_2.png') no-repeat;
   background-size: 100% 100%;
 
   // background-color: rgba(242, 17, 10, 0.7);
@@ -386,7 +386,7 @@ watch(
   height: 988px;
   // background: rgba(0, 21, 51, 0.7);
   // background: url('../assets/img/right_bg (2).png') no-repeat;
-  background: url('../assets/img/右背景_2.png') no-repeat;
+  // background: url('../assets/img/右背景_2.png') no-repeat;
   background-size: 100% 100%;  
   // z-index: 0;
   .right_page{

+ 34 - 3
src/views/left/comp/dispose/RiskProfile.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- 风险概括 -->
   <div class="risk_profile_container">
+    <div class="right-glow-line"></div>
     <!-- 1.==================== -->
     <HeaderBoxContent :headerObj="headerObj"></HeaderBoxContent>
 
@@ -336,8 +337,8 @@ onBeforeUnmount(() => {
   height: 892px;
   padding: 10px 12px;
   box-sizing: border-box;
-  background: linear-gradient(180deg, #244d86 2%, #0a121e 100%);
-  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+  background: linear-gradient(180deg, #244d86 2%, #000000 100%);
+  // box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
   border: 1px solid;
   border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(7, 108, 208, 1)) 1 1;
 
@@ -891,7 +892,21 @@ onBeforeUnmount(() => {
     }
   }
 }
-
+.risk_profile_container::before {
+  content: '';
+  position: absolute;
+  top: 33%;
+  height: 34%; /* 中间 1/3 高度 */
+  left: 0;
+  width: 5px;
+  background-image: url('@/assets/img/image-bottom.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  mask-image: linear-gradient(to top, transparent, rgba(18, 61, 108,0.3), rgba(18, 61, 108,0.8), transparent);
+  -webkit-mask-image: linear-gradient(to top, transparent, rgba(18, 61, 108,0.3), rgba(18, 61, 108,0.7), transparent);
+  filter: drop-shadow(0 0 6px rgba(118, 186, 222, 0.8));
+  z-index: 2;
+}
 .risk_profile_container::after {
   position: absolute;
   content: '';
@@ -903,6 +918,22 @@ onBeforeUnmount(() => {
   background-size: 100% 50%;
 }
 
+/* 右侧竖线:推荐添加一个类(因为 ::after 已用于底部) */
+.risk_profile_container .right-glow-line {
+  position: absolute;
+  top: 33%;
+  height: 34%;
+  right: 0px;
+  width: 5px;
+  background-image: url('@/assets/img/image-bottom.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  mask-image: linear-gradient(to top, transparent, rgba(18, 61, 108,0.3), rgba(18, 61, 108,0.8), transparent);
+  -webkit-mask-image: linear-gradient(to top, transparent, rgba(18, 61, 108,0.3), rgba(18, 61, 108,0.7), transparent);
+  filter: drop-shadow(0 0 6px rgba(118, 186, 222, 0.8));
+  z-index: 2;
+  pointer-events: none;
+}
 .tag {
   font-size: 16px;
   padding: 0px 12px;

+ 6 - 4
src/views/left/comp/dispose/echarts/echartsOption.js

@@ -28,7 +28,7 @@ export const getRiskTimeEchartsOption = () => {
       data: ['12/04', '12/05', '12/06', '12/07', '12/08', '12/09', '12/10'],
       axisLine: {
         lineStyle: {
-          color: '#3FA7B6',
+          color:'rgba(63, 167, 182,0.2)',
           width: 2, // 线宽
           dashOffset: 0 // 可能影响虚线样式,通常设为 0
         }
@@ -43,7 +43,8 @@ export const getRiskTimeEchartsOption = () => {
       splitLine: {
         lineStyle: {
           type: 'dashed', // 虚线
-          color: '#3FA7B6',
+          // color: '#3FA7B6',
+          color: 'rgba(52, 194, 207,0.2)',
           width: 1.5, // 线宽
           dashOffset: 0 // 可能影响虚线样式,通常设为 0
         }
@@ -92,7 +93,7 @@ export const getRiskAreaEchartsOption = () => {
       data: ['长宁区', '闵行区'],
       axisLine: {
         lineStyle: {
-          color: '#3FA7B6',
+          color: 'rgba(63, 167, 182,0.2)',
           width: 2, // 线宽
           dashOffset: 0 // 可能影响虚线样式,通常设为 0
         }
@@ -105,7 +106,8 @@ export const getRiskAreaEchartsOption = () => {
       splitLine: {
         lineStyle: {
           type: 'dashed', // 虚线
-          color: '#3FA7B6',
+          // color: '#3FA7B6',
+          color: 'rgba(52, 194, 207,0.2)',
           width: 1.5, // 线宽
           dashOffset: 0 // 可能影响虚线样式,通常设为 0
         }