/**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; bottom: 220rpx; right: 15rpx; display: flex; flex-direction: column; z-index: 101; transition: all .5s ease-in-out; } .operation-buttons image { width: 74rpx; height: 80rpx; margin-top: 20rpx; } .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; } .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%; margin-top: 20rpx; } /* 特效样式 */ .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; } .showBox { bottom: 88rpx; } .scrollView { display: flex; } .title-box view { background-color: rgba(0, 0, 0, 1); display: inline-block; padding: 15rpx 30rpx; border-radius: 10rpx; margin-bottom: 20rpx; margin-right: 20rpx; flex-shrink: 0; color: #fff; } .title-box .titleActive { color: #000; background-color: rgba(255, 255, 255, 1); box-shadow: 0rpx 0rpx 20rpx rgba(255, 255, 255, .5); } .img-box view { width: 25%; height: 320rpx; flex-shrink: 0; margin-right: 20rpx; 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: 10000; 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;}