小程序遮罩层样式

aaron9185 2017-09-28 04:56:28
<!-- 遮罩层 wxml -->
<view class="goods-detail" hidden="{{isShowSelectInfo}}">
<view class="mask"></view>
<view class="goodsdetail">
<view class="closedialog">
<image src="../../image/close.png" style="width: 40rpx;height:40rpx;margin-right:6rpx" bindtap="powerDrawer"></image>
</view>
<view class="dialogtip">
<text class="tipview">请确认您的信息</text>
</view>
</view>
</view>



/* 遮罩层 */
.goods-detail .mask {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
.goods-detail .mask {
background: rgba(0, 0, 0, 0.7);
}
.goodsdetail {
position: fixed;
top: 45%;
width: 70%;
height: 780rpx;
left: 15%;
/* margin-top: -450rpx; */
margin-top: -50%;
background: #f2f2f2;
z-index: 99999999999999;
border-radius: 10px;
overflow: hidden;
}
/* 右上角关闭 */
.closedialog {
display: flex;
width: 100%;
flex-direction: row-reverse;
margin-top: 6rpx;
margin-right: 6rpx;
}
/* 顶部提示信息 */
.dialogtip {
/* margin-top: 20rpx; */
margin-left: 8%;
text-align: center;
line-height: 60rpx;
background-color: #fff;
height: 60rpx;
width: 440rpx;
/* border-radius: 20rpx; */
}
.tipview {
font-size: 26rpx;
/* color: gray; */
color: #e60012;
}
...全文
390 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

3,143

社区成员

发帖
与我相关
我的任务
社区描述
微信开发即微信公众平台开发,将企业信息、服务、活动等内容通过微信网页的方式进行表现,通过二次开发可以将公众账号由一个媒体型营销工具转化成提供服务的产品。
社区管理员
  • 微信开发
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧