/* packageI/newMedia/newMediaAdVideo/newMediaAdVideo.wxss */ page { box-sizing: border-box; } .my-video { position: absolute; z-index: 1; left: 0; top: 0; right: 0; height: 100%; visibility: visible; display: flex; justify-content: center; align-items: center; background: none; overflow: hidden; } .my-video video { width: 100%; height: 100%; } .my-video .video-style { object-fit: fill; } .works_wrap { position: absolute; z-index: 1; left: 0; top: 0; right: 0; height: 100%; visibility: visible; display: flex; justify-content: center; align-items: center; background: none; overflow: hidden; } .works_wrap .play { position: absolute; z-index: 11; left: calc(55% - 64rpx); top: calc(50% - 64rpx); width: 64rpx; height: 64rpx; } .works_wrap .play image { width: 100%; } .works_wrap .poster { /* background: #000000; */ position: relative; z-index: 10; width: 100%; height: 100%; visibility: visible; display: flex; justify-content: center; align-items: center; } .works_wrap .poster .pic { width: 100%; height: auto; vertical-align: middle; } .works_wrap .poster .pic image { width: 100%; } .works_wrap .playWorks { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 9; background-size: auto 50px; background: #999; } .side-bar { position: absolute; z-index: 10; right: 20rpx; bottom: calc(env(safe-area-inset-bottom) + 100rpx); display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .side-bar .avatar { position: relative; border-radius: 50%; background: none; padding-bottom: 15px; /* border: 2rpx solid #e8e8e9; */ } .side-bar .avatar .img { border-radius: 50%; } .side-bar .avatar .img image { border-radius: 50%; width: 100%; height: 100%; border: 2rpx solid #e8e8e9; } .side-bar .avatar .follow-box { text-align: center; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%) translateY(50%); width: 18px; height: 18px; line-height: 18px; border-radius: 50%; background: rgb(252, 52, 93); display: flex; align-items: center; justify-content: center; } .side-bar .avatar .follow-box icon { color: #fff; display: flex; align-items: center; justify-content: center; } .side-bar .content_author-reward_fixed { display: flex; flex-direction: column; align-items: center; width: 2.82rem; height: 2.82rem; margin-top: 30rpx; text-align: center; color: white; font-size: 0.7rem; background-color: #fc8216; border-radius: 50%; box-shadow: 0 0.22rem 0.75rem 0 rgba(160, 79, 8, 0.46); } .side-bar .content_author-reward_fixed text { display: block; padding-left: 0; transform: translateY(-10rpx); } .side-bar > .div { width: 80rpx; height: 80rpx; font-size: 80rpx; color: rgb(232, 232, 233); transition: all 0.3s; } .play-video { position: absolute; z-index: 9; top: 0; width: 100%; height: 100%; left: 0; } .div_bar { position: absolute; z-index: 10; right: 30rpx; bottom: 200rpx; display: flex; flex-direction: column; justify-content: space-between; } .advertisement { position: absolute; left: 33rpx; bottom: calc(env(safe-area-inset-bottom) + 45rpx); display: flex; justify-content: center; align-items: center; width: 410rpx; height: 70rpx; font-size: 26rpx; color: #fff; background-color: rgba(0, 0, 0, 0.3); border-radius: 10rpx; } .answerpage { height: 100%; background: url(https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/videoAnswerBg@3x.png); background-size: cover; } view, text { box-sizing: border-box; } .header { text-align: center; margin: 0 auto; padding-top: 58rpx; font-size: 70rpx; color: #e9e8e8; } @-webkit-keyframes anim { from { -webkit-transform: rotateY(180deg); } to { -webkit-transform: rotateY(360deg); } } @keyframes anim { from { transform: rotateY(180deg); } to { transform: rotateY(360deg); } }