.indexGraph { display: flex; width: 100%; height: 800rpx; background-color: #eee; border-radius: 15rpx; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.5); } .left { width: 120rpx; } .leftTop { width: 100%; height: 150rpx; /* background-color: pink; */ } .date { position: absolute; top: 18%; left: 1%; } .slice { margin-top: -100rpx; width: 200rpx; height: 200rpx; position: absolute; left: 5%; rotate: 45deg; border-bottom: 3px solid rgba(0, 0, 0, 0.5); } .idx { position: absolute; top: 13%; left: 6%; } .yAxis { display: flex; /* background-color: pink; */ flex-direction: column; align-items: center; justify-content: space-around; height: 650rpx; } .right { flex: 1; } .graph { position: absolute; width: 592.5rpx; padding-top: 30rpx; height: 650rpx; background-color: skyblue; border-radius: 0 0 15rpx 0; border-left: 2px solid rgb(0, 0, 0, 0.8); border-top: 2px solid rgb(0, 0, 0, 0.8); } .colarea { display: flex; flex-direction: column; justify-content: space-around; height: 650rpx; /* background-color: skyblue; */ } .col { padding-right: 10rpx; height: 40rpx; background-color: rgb(139, 0, 139); text-align: right; color: white; } .xAxis { display: flex; flex-wrap: wrap; justify-content: space-evenly; height: 120rpx; } .deg { width: 98.75rpx; text-align: center; } .deg:nth-child(-n+6) { line-height: 48px; font-size: 20px; } .deg:nth-child(n+7) { font-size: 10px; line-height: 10px; } .info { font-size: 18px; } .module { display: flex; flex-direction: column; align-items: center; /* 图片和文字居中 */ border-bottom: 2px solid #ccc; /* 分界线 */ padding: 4px 0; /* 上下内边距 */ width: 100%; /* 确保模块宽度一致 */ } .caption { text-align: center; /* 文字居中 */ }