.header{ display: flex; backdrop-filter: blur(3.4000000953674316px); box-shadow: 1px 2px 5px 0 rgba(0, 102, 101, 0.25); border: 1px solid; border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%); border-top-left-radius: 20px; background-color: #fff; } .logo{ position: relative; font-size: 20px; font-weight: 400; color: #fff; border-top-left-radius: 20px; display: flex; align-items: center; justify-content: center; height: 54px; width: 258px; } .logo::before{ position: absolute; display: block; content:''; top: -7px; left: -57px; width: 327px; height: 95px; background-image: url("@/assets/img/planImg1.png"); background-repeat: no-repeat; background-size: cover; border-top-left-radius: 20px; z-index: -1; } .menu{ :global(.ant-menu-title-content){ color: rgba(0, 102, 101, 1); font-size:16px; } :global(.parallelogram-container___Lxkxf){ height:30px; margin-top: 12px; } } .parallelogram-container { /* 平行四边形变换 */ transform: skewX(-45deg); //-webkit-transform: skewX(-15deg); /* 基础样式 */ display: inline-flex; align-items: center; padding: 0 34px; background-color: #e0f0f0; /* 浅蓝底色 */ //border: none; cursor: pointer; /* 文字样式重置(因为容器有倾斜,内部文字需要反向倾斜) */ font-size: 16px; color:#006665; border: 1px solid; border-image-slice:1; border-image-source: linear-gradient(96.05deg, #FFFFFF 9.52%, rgba(255, 255, 255, 0) 27.03%, rgba(0, 143, 142, 0) 60.86%, #0E5A4B 72.09%); } .text-content { /* 文字反向倾斜,保持正常显示 */ transform: skewX(45deg); //-webkit-transform: skewX(15deg); margin-right: 8px; } .addBtn{ background-size:cover; background-position:center; color:#fff; opacity:0.7; border-radius:4px; height: 36px; } .delBtn{ background-size:cover; background-position:center; color:#000; //opacity:0.7; border-radius:4px; width: 88px; height: 36px; } .exportBtn{ background-size:cover; background-position:center; color:#fff; opacity:0.7; border-radius:4px; width: 88px; height: 36px; } .tabButton { width: 200px; height: 80px; display: flex; align-items: center; justify-content: center; text-align: center; border: none; color: black; cursor: pointer; border-radius: 4px; font-size: 24px; font-weight: 400; transition: all 0.3s; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 2px 6px 6.7px 0px rgba(212, 220, 231, 0.3); transform: translateY(0); } .tabButton:hover { transform: translateY(-5px); box-shadow: 3px 8px 12px 0px rgba(212, 220, 231, 0.5); } .tabButton.active { color: white; } .tabButton.inactive { color: black; } .resetBtn{ background-size:cover; background-position:center; color:#006665; //opacity:0.7; border-radius:4px; width: 88px; height: 36px; } .view{ background-color:#B7E5D533; margin-right:30px; border:none; } .paibanBg{ background-size: cover; background-position: center; width: 100%; height: 631px; } .tree{ background-color: #E7F2ED; :global(.ant-tree-switcher-leaf-line::after){ border-bottom:1px solid #006665; } :global(.ant-tree-switcher-leaf-line::before){ border-inline-end:1px solid #006665; } :global(.ant-tree-checkbox-inner){ border:1px solid #006665 !important; } :global(.ant-tree-indent-unit::before){ border-inline-end:none !important; } } .font1{ color: #999999; font-size: 14px; } .box{ display:flex; flex-wrap:wrap; margin:20px 0; } .tag{ margin-right:20px; margin-bottom: 10px; } .ul{ li{ margin-bottom: 10px; } } .customDrawer{ :global(.ant-drawer-header){ background-color:#B8E0D833 !important; } } // 仪表盘容器样式 - 复杂边框和阴影效果 .dashboardContainer{ border: 1px solid; border-image-slice: 1; border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg); backdrop-filter: blur(15px); box-shadow: -2px 4px 10px 0px rgba(145, 145, 145, 0.05), -7px 17px 18px 0px rgba(145, 145, 145, 0.04), -15px 37px 24px 0px rgba(145, 145, 145, 0.03); } // 阈值配置区样式 - 带背景、边框和阴影效果 .thresholdConfigContainer { background: rgba(255, 255, 255, 0.3); border: 1px solid; border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg); backdrop-filter: blur(15px); box-shadow: -2px 4px 10px 0px rgba(145, 145, 145, 0.05), -7px 17px 18px 0px rgba(145, 145, 145, 0.04), -15px 37px 24px 0px rgba(145, 145, 145, 0.03); } .chartContainer { background: rgba(255, 255, 255, 0.3); border: 1px solid; border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg); backdrop-filter: blur(15px); box-shadow: -2px 4px 10px 0px rgba(145, 145, 145, 0.05), -7px 17px 18px 0px rgba(145, 145, 145, 0.04), -15px 37px 24px 0px rgba(145, 145, 145, 0.03); }