.echart-component { width: 690rpx; height: 320rpx; margin: 28rpx auto 150rpx; background-color: #fff; border-radius: 30rpx; padding: 35rpx 25rpx 25rpx 35rpx; box-sizing: border-box; position: relative; } .fullscreen { position: fixed; top: 450rpx; left: -450rpx; right: 0; bottom: 0; width: 100vh; height: 100vw; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); /* 背景色 */ transform: rotate(90deg); // animation: rotate 0s linear; } @keyframes echartRotate { from { width: 690rpx; height: 320rpx; transform: rotate(0deg); } to { width: 100vh; height: 100vw; transform: rotate(0deg); } } .box_background { position: absolute; top: 0; left: 0; width: 690rpx; height: 320rpx; border-radius: 30rpx; background-color: #fff; .power { margin: 34rpx 0 28rpx 28rpx; font-family: PingFang-SC; font-weight: 500; font-size: 18rpx; color: #cccccc; } .full { width: 24rpx; height: 24rpx; position: absolute; top: 32rpx; right: 26rpx; z-index: 2; } .line { margin: 0 0 6rpx 35rpx; font-family: PingFang-SC; font-size: 14rpx; color: #cccccc; display: flex; position: relative; height: 18rpx; .bottom_line { // border-bottom: 1rpx #ccc dashed; width: 550rpx; margin-left: 20rpx; position: absolute; bottom: -6rpx; right: 74rpx; height: 4rpx; color: #fff; } } .time_list { position: absolute; bottom: 28rpx; left: 72rpx; font-family: PingFang-SC; font-size: 15rpx; color: #cccccc; width: 540rpx; justify-content: space-around; } .time { position: absolute; bottom: 22rpx; right: 24rpx; font-family: PingFang-SC; font-size: 18rpx; color: #cccccc; } } .echart-component-full { width: 690rpx; height: 320rpx; margin: 0rpx auto; background-color: #fff; border-radius: 30rpx; padding: 35rpx 25rpx 25rpx 35rpx; box-sizing: border-box; position: relative; } page { background: #f8f8f8; background: #f3f3f3; }