xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎈 perf(支付弹窗优化):

Browse Source
This commit is contained in:
cheng
2022-12-13 14:53:54 +08:00
parent 23a6c22045
commit c7da1a1b25
4 changed files with 84 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/closeBtn/index.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ const CloseBtn = ({ onClose, styleObj = {} }: Params) => {
<View
style={styleObj}
className={style.icon_a_cuowuwrong_self}
onClick={onClose}
onClick={() => onClose?.()}
>
<View className={style.icon_a_btn}>
<IconFont name="icon-qingchuxinxi" size={40} color="#acacac"></IconFont>
src/components/popup/index.module.scss
+78 -80
View File
@@ -1,91 +1,89 @@
$am-ms: 200ms;
.drawer_main{
.drawer {
position:fixed;
left: 0;
top:0;
.drawer_main {
.drawer {
position: fixed;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100vh;
margin: 0 auto;
z-index: 1000;
visibility: hidden;
transition: visibility $am-ms ease-in-out;
.drawer_mask {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
z-index: 1011;
opacity: 0;
transition: opacity $am-ms ease-in;
.drawer_container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100vh;
margin: 0 auto;
z-index: 1000;
visibility: hidden;
transition: visibility $am-ms ease-in-out;
.drawer_mask{
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
z-index: 1011;
opacity: 0;
transition: opacity $am-ms ease-in;
.drawer_container{
display: flex;
flex-direction: column;
position: absolute;
background-color: #fff;
z-index: 1012;
transition: transform $am-ms ease-in-out;
.drawer_container_title {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
font-size: 29px;
color: #000000;
padding-top: 10px;
}
.common_close_btn_icon{
position: absolute;
top: 10px;
left: 10px;
}
}
.drawer_container_active{
transform: translate3d(0, 0, 0);
}
position: absolute;
background-color: #fff;
z-index: 1012;
transition: transform $am-ms ease-in-out;
.drawer_container_title {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
font-size: 29px;
color: #000000;
padding-top: 10px;
}
.drawer_mask_active{
opacity: 1;
.common_close_btn_icon {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
}
}
.drawer_container_active {
transform: translate3d(0, 0, 0);
}
}
.drawer_active {
visibility:visible;
.drawer_mask_active {
opacity: 1;
}
}
.drawer_active {
visibility: visible;
}
.drawer_container_bottom{
bottom: 0;
left: 0;
min-height: 200px;
width: 100vw;
border-radius: 20px 20px 0px 0px;
transform: translate3d(0, 100%, 0);
}
.drawer_container_bottom {
bottom: 0;
left: 0;
min-height: 200px;
width: 100vw;
border-radius: 20px 20px 0px 0px;
transform: translate3d(0, 100%, 0);
}
.drawer_container_top{
top: 0;
left: 0;
min-height: 200px;
width: 100vw;
border-radius: 0 0 20px 20px;
transform: translate3d(0, -100%, 0);
}
.drawer_container_top {
top: 0;
left: 0;
min-height: 200px;
width: 100vw;
border-radius: 0 0 20px 20px;
transform: translate3d(0, -100%, 0);
}
.drawer_container_right{
bottom: 0;
right: 0;
height: 100vh;
min-width: 300px;
border-radius: 20px 0 0 20px;
transform: translate3d(100%, 0, 0);
}
.drawer_container_right {
bottom: 0;
right: 0;
height: 100vh;
min-width: 300px;
border-radius: 20px 0 0 20px;
transform: translate3d(100%, 0, 0);
}
}