.container { padding: 20px; background-color: #fff; //min-height: calc(100vh - 64px); margin-bottom:50px; } .statsSection { margin-bottom: 20px; } .statCard { width:100%; padding: 10px 20px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; position: relative; overflow: hidden; background: linear-gradient(#fff, #fff) padding-box, /* 外层渐变背景作为边框 */ 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 ) border-box; /* 关键:设置透明边框,让渐变背景透出来 */ border: 2px solid transparent; &:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .statValue{ font-size: 26px; font-weight: 600; line-height: 32px; letter-spacing: 0em; text-align: left; color: #333333; } .statTitle{ font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: left; margin-top: 20px; color:#666666; white-space: nowrap; } } .chartsSection { margin-bottom: 20px; } .chartContainer { background: linear-gradient(#fff, #fff) padding-box, /* 外层渐变背景作为边框 */ 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 ) border-box; /* 关键:设置透明边框,让渐变背景透出来 */ border: 2px solid transparent; padding: 20px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); //height: 350px; //display: flex; //flex-direction: column; width:100%; height:100%; } .chartTitle { font-size: 16px; font-weight: 500; color: #333; margin-bottom: 16px; text-align: center; } .chart { //flex: 1; width: 100%; height:200px; } .tableSection { background: #fff; padding: 20px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .tableTitle { font-size: 16px; font-weight: 500; color: #333; margin-bottom: 16px; } /* 响应式调整 */ @media (max-width: 768px) { .container { padding: 12px; } .queryForm { flex-direction: column; align-items: flex-start; } .queryForm .ant-form-item { margin-right: 0; margin-bottom: 16px; width: 100%; } .queryForm .ant-form-item:last-child { margin-bottom: 0; } .chartContainer { height: 300px; padding: 16px; } .statCard { padding: 16px; } } .search-button{ background-image: url('../../assets/img/assetmangement1.png'); background-repeat: no-repeat; background-size: cover; background-position:center; color: #fff; border-radius: 4px; height: 36px; border-color:#d9d9d9 ; background-color: #045F5E80; } .reset-button{ background-image: url('../../assets/img/assetmangement2.png'); background-repeat: no-repeat; background-size: cover; background-position:center; color: rgba(0, 102, 101, 1); border-radius: 4px; height: 36px; border-color:#d9d9d9 ; background-color: #B7E5D533; } .del-button{ background-image: url('../../assets/img/assetmangement3.png'); background-repeat: no-repeat; background-size: cover; background-position:center; color: #000; border-radius: 4px; height: 36px; width:88px; border-color:#d9d9d9 ; background-color: #E5B7B733; }