html
<div class="layer" v-show="true" @touchmove.prevent> <div class="content"> <div class="text">您输入的金额低于您车型的单幅漆价格，可能无法完成维修！请重新录入或确认维修金额。</div> <div class="action"> <div class="cancel">取消</div> <div class="define">确认金额</div> </div> </div> </div>css
.layer{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.50); z-index: 1000; display: flex; align-items: center; justify-content: center; .content{ width: 72%; overflow: hidden; background: #FFFFFF; border-radius: 0.04rem; .text{ color: #222222; text-align: center; line-height: 0.2rem; padding: 0.2rem; position: relative; } .text:after{ content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; border-bottom: 1px solid #E5E5E5; transform-origin: 0 100%; transform: scaleY(0.5); } .action{ display: flex; div{ flex: 1; display: flex; align-items: center; justify-content: center; line-height: normal; height: 0.44rem; font-size: 0.18rem; } .cancel{ position: relative; color: #222222; } .cancel:after{ content: " "; position: absolute; right: 0; top: 0; width: 1px; height: 100%; border-right: 1px solid #E5E5E5; transform-origin: 100% 0; transform: scaleX(0.5); } .define{ color: #FF8727; } } } }
转载于:https://www.cnblogs.com/wy90s/p/11474535.html
