.box_full { width: 690rpx; height: 83vh; margin: 28rpx auto 150rpx; background-color: #fff; border-radius: 30rpx; padding: 35rpx 25rpx 25rpx 35rpx; box-sizing: border-box; position: relative; // writing-mode: vertical-lr; // text-orientation: upright; // white-space: nowrap; // font-size: 18px; // font-weight: bold; // background-color: #c2e5f3; // color: #fff; // width: 100%; } .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 rotate { from { width: 690rpx; height: 320rpx; transform: rotate(0deg); } to { width: 100vh; height: 100vw; transform: rotate(0deg); } } .box_background1 { position: absolute; top: 330rpx; left: -326rpx; width: 83vh; height: 690rpx; border-radius: 30rpx; background-color: rgba(0, 0, 0, 0); transform: rotate(90deg); .power { margin: 56rpx 0 103rpx 38rpx; font-family: PingFang-SC; font-weight: 500; font-size: 36rpx; color: #cccccc; } .part { width: 48rpx; height: 48rpx; position: absolute; top: 37rpx; right: 37rpx; z-index: 100; transform: rotate(90deg); } .line { margin: 0 30rpx 0 52rpx; font-family: PingFang-SC; font-size: 28rpx; color: #cccccc; display: flex; position: relative; height: 47rpx; .bottom_line { // border-bottom: 1rpx #ccc dashed; width: 550rpx; margin-left: 20rpx; position: absolute; bottom: -6rpx; right: 74rpx; height: 4rpx; color: #fff; } } .time { position: absolute; bottom: 62rpx; right: 44rpx; font-family: PingFang-SC; font-size: 36rpx; color: #cccccc; } } page { background: #f8f8f8; background: #f3f3f3; }