|
|
|
|
@ -1,13 +1,41 @@
|
|
|
|
|
.box {
|
|
|
|
|
width: 690rpx;
|
|
|
|
|
height: 320rpx;
|
|
|
|
|
margin: 28rpx auto;
|
|
|
|
|
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 rotate {
|
|
|
|
|
from {
|
|
|
|
|
width: 690rpx;
|
|
|
|
|
height: 320rpx;
|
|
|
|
|
transform: rotate(0deg);
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
width: 100vh;
|
|
|
|
|
height: 100vw;
|
|
|
|
|
transform: rotate(0deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box_background {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
@ -29,6 +57,7 @@
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 32rpx;
|
|
|
|
|
right: 26rpx;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
margin: 0 0 6rpx 35rpx;
|
|
|
|
|
|