|
@@ -0,0 +1,64 @@
|
|
|
+.mediaBox {
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgba(0, 0, 0, 0.35);
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 25rpx 60rpx;
|
|
|
+ padding-bottom: calc(env(safe-area-inset-bottom) + 25rpx);
|
|
|
+ background-color: white;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 275rpx;
|
|
|
+ padding: 13rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: linear-gradient(180deg, #6EC8FF 0%, #31BDFE 100%);
|
|
|
+ box-shadow: 0rpx 6rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 39rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 转圈动画 */
|
|
|
+@keyframes falsh-identifier {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg) scale(0.7);
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ transform: rotate(180deg) scale(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg) scale(0.7);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes falsh-scale {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+}
|