/**index.wxss**/ .contentWarp { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; margin: auto; overflow: hidden; } .touchWrap { transform-origin: center; position: absolute; z-index: 100; } .imgWrap { box-sizing: border-box; width: 100%; transform-origin: center; float: left; border: 5rpx transparent dashed; } .imgWrap image { float: left; } .touchActive .x { display: block; } .touchActive .o { display: block; } .x { position: absolute; top: -25rpx; left: -25rpx; z-index: 500; display: none; width: 50rpx; height: 50rpx; overflow: hidden; font-weight: bold; color: #d1e3f1; } .o { position: absolute; bottom: -25rpx; right: -25rpx; width: 50rpx; height: 50rpx; text-align: center; display: none; overflow: hidden; font-weight: bold; color: #d1e3f1; } .active { background-color: rgb(78, 114, 151); } .active view { border: none; } .touchActive { z-index: 400; } .operation-buttons { position: absolute; top: 0rpx; right: 15rpx; display: flex; flex-direction: column; z-index: 101; transition: all .5s ease-in-out; } .decimalNum{ list-style: decimal; } .operation-buttons .new-box { width: 51px;height: 51px;background-color: #2a7be9;border-radius: 50%;color: #fff;display: flex;justify-content: center;align-items: center;margin-top: 40rpx; } .quan { display: flex;justify-content: center;align-items: center;flex-direction: column; font-size: 24rpx; } .operation-buttons image { width: 27px;height: 25px;margin-top: 0px; } .closeSave { transform: scale(0); } .canvasWrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 999; text-align: center; } .close-effect { width: 50rpx; height: 50rpx; position: absolute; top: 25rpx; left: 50rpx; } .maskCanvas { position: absolute; left: -200%; top: 0; } .btnView view { padding-bottom: 20rpx; } .hand { position: absolute; left: 100rpx; right: 0; margin: auto; z-index: 100; } .getUserInfoBtn { position: initial; border: none; background-color: none; } .getUserInfoBtn::after { border: none; } .btn_view { display: flex; padding: 20rpx; } .btn_view button { width: 30%!important; padding: 16rpx 20rpx; font-size: 26rpx; background-color: #2a7be9; color: #fff; } /* 点击下载按钮时的图片样式 */ .resImg { width: 80%; height: 80%; margin-top: 50rpx; } /* 特效样式 */ .fliters { display: flex; flex-direction: column; position: absolute; bottom: 382rpx; right: 120rpx; z-index: 201; } .shapes { display: flex; flex-direction: column; position: absolute; bottom: 242rpx; right: 120rpx; z-index: 201; } .fliters image, .shapes image { width: 60rpx; height: 60rpx; border: 2rpx solid #eb4985; } .choose-box { position: fixed; bottom: -250rpx; left: 0; right: 0; z-index: 998; background-color: rgba(0, 0, 0, .8); padding: 20rpx; transition: all .5s ease-in-out; } scroll-view { position: relative; } .showBox { bottom: 88rpx; } .scrollView { display: flex; align-items: center; } .arrowBtn { position: absolute; z-index: 2; width: 70rpx!important; height: 70rpx!important; } .pre { left: 0; top: 50%; transform: translateY(-50%); } .next { top: 50%; right: 0; } swiper { padding-bottom: 20rpx; } .nothing {width: 100%;height: 320rpx; color: rgba(255,255,255,.5);display: flex;justify-content: center;align-items: center;} .pre-next-box {position: fixed;z-index: 0;bottom: 280rpx;left: 0;right: 0;display: flex;justify-content: space-between;} .creat-works-btn {position: fixed;bottom: 110rpx;left: 77px;right: 77px; height: 51px;line-height: 51px;text-align: center;color: #fff;background-color: #287be9;border-radius: 51px;z-index: 101;box-sizing: border-box;font-weight: bold;} .works-box {position: fixed;bottom: 110rpx;z-index: 101;left: 0;right: 0;} .works-boxAc {bottom: 86rpx;} .close-works-btn {background-color: #2a7be9;color: #fff;border-radius: 20px 20px 0 0;padding: 50rpx 20rpx 30rpx 20rpx;display: inline-block;} .works-content {background-color: #2a7be9;} .title-box view { background-color: rgba(42, 123, 233, 1); display: inline-block; padding: 20rpx 40rpx; border-radius: 10rpx; margin-bottom: 10rpx; /* margin-right: 20rpx; */ margin-top: 10rpx; flex-shrink: 0; color: #fff; margin-left: 10rpx; } .title-box .titleActive { color: #000; background-color: rgba(255, 255, 255, 1); border-radius: 50rpx; } .img-box { width: 25%!important; } .img-box view { width: 96%; height: 320rpx; flex-shrink: 0; background-color: rgba(0,0,0,.8); display: flex; align-items: center; } .img-box view:last-child { margin-right: 0rpx; } .img-box image { width: 100%; height: 320rpx; object-fit: contain; } .img-box .allActive { transform: scale(.9); border: 4rpx dashed rgba(255, 255, 255, .4); box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, .8); } .works-btn { position: fixed; right: 20rpx; top: 20rpx; z-index: 998; background-color: rgba(0,0,0,.3); color: #fff; font-size: 28rpx; border-radius: 10rpx; padding: 16rpx 20rpx; } .content-box { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 100001; display: flex; justify-content: center; align-items: center; } .input-box { display: flex; flex-direction: column; background-color: rgba(255,255,255,.6); border-radius: 6rpx; padding: 20rpx; color: #000; font-size: 26rpx; text-align: center; } .input-box text { font-weight: bold; } .input-box input { background-color: #fff; margin-top: 20rpx; text-align: left; padding: 10rpx 20rpx; height: auto; } .input-box view { width: 100%; margin-top: 20rpx; padding: 20rpx; color: #fff; background-color: rgba(0,0,0,.2); } .auth-box {position: fixed;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;z-index: 1000;} .auth-box > view {background-color: #FFFFFF;border-radius: 10rpx;padding: 30rpx;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.5);margin: 0 100rpx;} .auth-top {display: flex;} .auth-top image {width: 96rpx;height: 96rpx;flex-shrink: 0;} .auth-top-content {margin-left: 20rpx;} .auth-top-content view {font-size: 28rpx;margin-top: 20rpx;color: #999999;} .auth-top-content view:nth-child(1) {font-size: 30rpx;font-weight: bold;margin-top: 0;} .auth-center {font-size: 28rpx;margin: 30rpx 0;border-bottom: 1rpx solid #F5F5F5;border-top: 1rpx solid #F5F5F5;padding: 20rpx 0;} .auth-bottom {display: flex;justify-content: center;align-items: center;font-size: 24rpx;} .btn {padding: 12rpx 40rpx;border-radius: 4rpx;} .btn-no {color: #2a7be9;background-color: #FFFFFF;border: 1rpx solid #2a7be9;} .btn-yes {color: #FFFFFF;background-color: #2a7be9;border: 1rpx solid #2a7be9;position: relative;margin-left: 20rpx;} .auth-btn {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;} .isNyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,.5);} .isOyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,1);} .card-box-userinfo {transform: rotate(360deg) scale(0);transition: all 1s ease-in-out;} .guiz {position: fixed;top: 0;left: 0;right: 0;bottom: 80rpx;background-color: rgba(0,0,0,.5);display: flex;justify-content: center;align-items: center;z-index: 10000;padding: 60rpx;} .guiz-box {background-color: rgba(255,255,255,1);border-radius: 20rpx;padding: 20rpx;font-size: 24rpx;color: #333;line-height: 40rpx;position: relative;} .close-btn {width: 30rpx;height: 30rpx;display: flex;justify-content: center;align-items: center;background-color: #2a7be9;color: #fff;border-radius: 50%;padding: 30rpx;font-size: 30rpx;position: absolute;right: -20rpx;top: -20rpx;}