182 lines
4.2 KiB
Plaintext
182 lines
4.2 KiB
Plaintext
/* template/helper-pop/helper-pop.wxss */
|
|
/* 公共的 css 样式 */
|
|
.flexflex {
|
|
display: flex;
|
|
}
|
|
|
|
.flexcenter {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.flexjcenter {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flexacenter {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex1 {
|
|
flex: 1;
|
|
}
|
|
|
|
@keyframes slidebj {
|
|
0% {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
background-color: rgba(0, 0, 0, 0.717647058823529);
|
|
}
|
|
}
|
|
|
|
.helper-pop {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.717647058823529);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1004;
|
|
align-items: flex-end;
|
|
box-sizing: border-box;
|
|
animation: slidebj 0.5s forwards;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
0% {
|
|
top: 100%;
|
|
}
|
|
|
|
100% {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.helper-pop .helper-box {
|
|
animation: slideUp 0.5s forwards;
|
|
|
|
box-sizing: border-box;
|
|
flex-direction: column;
|
|
width: 750rpx;
|
|
height: 891rpx;
|
|
background: -webkit-linear-gradient(270.192914353533deg, rgba(193, 206, 250, 1) 0%, rgba(226, 237, 251, 1) 28%, rgba(255, 255, 255, 1) 60%);
|
|
background: -moz-linear-gradient(179.807085646467deg, rgba(193, 206, 250, 1) 0%, rgba(226, 237, 251, 1) 28%, rgba(255, 255, 255, 1) 60%);
|
|
background: linear-gradient(179.807085646467deg, rgba(193, 206, 250, 1) 0%, rgba(226, 237, 251, 1) 28%, rgba(255, 255, 255, 1) 60%);
|
|
border: none;
|
|
border-radius: 30rpx;
|
|
border-bottom-right-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
-moz-box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.101960784313725);
|
|
-webkit-box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.101960784313725);
|
|
box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.101960784313725);
|
|
position: relative;
|
|
}
|
|
|
|
.helper-pop .helper-box .cross-grey {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.helper-pop .helper-box .helper-text {
|
|
box-sizing: border-box;
|
|
/* width: 384rpx; */
|
|
/* height: 110rpx; */
|
|
/* height: 150rpx; */
|
|
height: 155rpx;
|
|
margin: 88rpx auto 45rpx;
|
|
}
|
|
|
|
.helper-pop .helper-box .helper-text1 {
|
|
/* width: 424rpx; */
|
|
}
|
|
|
|
|
|
.helper-pop .helper-box .helper-box-box {
|
|
position: absolute;
|
|
bottom: 121.5rpx;
|
|
box-sizing: border-box;
|
|
width: 420rpx;
|
|
background: -webkit-linear-gradient(310.572423002443deg, rgba(101, 137, 242, 1) 0%, rgba(116, 177, 240, 1) 100%);
|
|
background: -moz-linear-gradient(139.427576997557deg, rgba(101, 137, 242, 1) 0%, rgba(116, 177, 240, 1) 100%);
|
|
background: linear-gradient(139.427576997557deg, rgba(101, 137, 242, 1) 0%, rgba(116, 177, 240, 1) 100%);
|
|
border: none;
|
|
border-radius: 30rpx;
|
|
-moz-box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.176470588235294);
|
|
-webkit-box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.176470588235294);
|
|
box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.176470588235294);
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.helper-pop .helper-box .helper-box-box .helper-box-text {
|
|
box-sizing: border-box;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 42rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.helper-pop .helper-box .helper-QRcode-box {
|
|
box-sizing: border-box;
|
|
width: 360rpx;
|
|
height: 360rpx;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 9rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-box-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
position: absolute;
|
|
}
|
|
|
|
.helper-pop .helper-box .helper-QRcode-box .left-top {
|
|
top: 0;
|
|
left: 0;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.helper-QRcode-box .left-bottom {
|
|
bottom: 0;
|
|
left: 0;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.helper-pop .helper-box .helper-QRcode-box .right-top {
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.helper-pop .helper-box .helper-QRcode-box .right-bottom {
|
|
right: 0;
|
|
bottom: 0;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-img {
|
|
width: 330rpx;
|
|
height: 330rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.helper-pop .helper-box .helper-bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 226rpx;
|
|
} |