351 lines
7.4 KiB
Plaintext
351 lines
7.4 KiB
Plaintext
/**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;}
|
|
.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;}
|
|
.textIndent2 {text-indent: 2em;} |