Commit da10ccbc by fengzhaoyu

修改popup样式

parent e57e46a2
.dm-popup-content { .dm-popup-content {
position: fixed; position: fixed;
} }
.dm-popup-mask { .dm-popup-mask {
display: none; display: none;
position: fixed; position: fixed;
...@@ -12,63 +13,80 @@ ...@@ -12,63 +13,80 @@
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
.dm-popup-left { .dm-popup-left {
transform: translateX(-100%); transform: translateX(-100%);
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
.dm-popup-right { .dm-popup-right {
transform: translateX(100%); transform: translateX(100%);
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
.dm-popup-top { .dm-popup-top {
top: 0; top: 0;
width: 100vw; width: 100vw;
transform: translateY(-100%); transform: translateY(-100%);
} }
.dm-popup-bottom { .dm-popup-bottom {
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
transform: translateY(100%); transform: translateY(100%);
} }
.dm-popup-show .dm-popup-content { .dm-popup-show .dm-popup-content {
transform: none; transform: none;
} }
.dm-popup-show .dm-popup-mask { .dm-popup-show .dm-popup-mask {
display: block; display: block;
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
.dm-popup.animation .dm-popup-content { .dm-popup.animation .dm-popup-content {
transition: all 0.15s linear; transition: all 0.15s linear;
} }
.dm-popup.animation .dm-popup-mask { .dm-popup.animation .dm-popup-mask {
transition: all 0.15s linear; transition: all 0.15s linear;
} }
/* 弹框的样式定义不同的类名 */ /* 弹框的样式定义不同的类名 */
.fillet{
.fillet {
background: #fff; background: #fff;
border-radius: 16rpx 16rpx 0 0; border-radius: 16rpx 16rpx 0 0;
} }
.close-icon{
height:64rpx; .close-icon {
text-align: center; font-size: 64rpx;
text-align: center;
} }
.close-icon .iconfont{
color:#291B263D; .close-icon > .iconfont {
color: #291B263D;
font-size: 64rpx;
} }
.title{
text-align: center; .popup-title {
font-size: 24rpx; font-family: PingFangSC-Regular;
color:rgba(25, 31, 37, 1); text-align: center;
font-size: 24rpx;
opacity: 0.56;
color: #191F25;
} }
.complete{
position: absolute; .complete {
color:#3070F2; position: absolute;
font-size: 32rpx; color: #3070F2;
right:32rpx; font-size: 32rpx;
top: 32rpx; right: 32rpx;
top: 32rpx;
} }
\ No newline at end of file
<view <view class="dm-popup {{show ? 'dm-popup-show' : ''}} {{ animation ? 'animation': '' }}" disable-scroll="{{disableScroll}}" a:if="{{show}}">
class="dm-popup {{show ? 'dm-popup-show' : ''}} {{ animation ? 'animation': '' }}" <view class="dm-popup-mask" a:if="{{mask}}" onTap="onMaskTap" style="z-index: {{zIndex}}"></view>
disable-scroll="{{disableScroll}}" <view class="dm-popup-content {{className}} dm-popup-{{position}}" style="z-index: {{zIndex}}">
> <view a:if="{{position == 'bottom'}}" class="close-icon">
<view <text onTap="onMaskTap" class="iconfont iconicon_slide"></text>
class="dm-popup-mask" </view>
a:if="{{mask}}" <view class="popup-title" a:if="{{title}}">{{title}}</view>
onTap="onMaskTap" <view class="complete" a:if='{{complete}}' onTap='complete'>{{complete}}</view>
style="z-index: {{zIndex}}" <slot/>
></view>
<view
class="dm-popup-content {{className}} dm-popup-{{position}}"
style="z-index: {{zIndex}}"
>
<view a:if="{{position == 'bottom'}}" class="close-icon">
<text onTap="onMaskTap" class="iconfont iconicon_slide"></text>
</view>
<view class="title" a:if="{{title}}">{{title}}</view>
<view class="complete" a:if='{{complete}}' onTap='complete'>{{complete}}</view>
<slot/>
</view> </view>
</view> </view>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment