删除后不显示
<div class="tracing-tips">
<div class="huaxui-mask huaxui-animate-fade-in"></div>
<div class="huaxui-picker huaxui-half-screen-dialog huaxui-animate-slide-up">
<div class="huaxui-half-screen-dialog__hd">
<img class="tracing-img" src="images/logohx.png">
<p>11111111111111111111</p>
<img class="tracing-img-copy" src="images/img_bg_pay.png" alt="" >
<div></div>
</div>
<div class="huaxui-half-screen-dialog__gd">
<p>22222222</p>
<ul>
<li>3333333333333333333333333333333333333333333333333333333333333333333333333333333333</li>
<li>4444444444444444444444444444444444444444444444444444444444444444444444444</li>
<li>55555<a href="" class="xxsq">66666666666</a></li>
</ul>
</div>
<div class="huaxui-half-screen-dialog__ft">
<button class="dialog-ft-button" style="float: none;" @click="tracingHide">7777777</button>
</div>
</div>
</div>
.huaxui-mask{
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
}
.huaxui-animate-fade-in{
-webkit-animation: fadeIn ease 0.3s forwards;
animation: fadeIn ease 0.3s forwards;
}
body {
--weui-BG-0: #ededed;
--weui-BG-1: #f7f7f7;
--weui-BG-2: #fff;
}
.huaxui-picker{
position: fixed;
width: 100%;
box-sizing: border-box;
left: 0;
bottom: 0;
z-index: 5000;
background-color: var(--weui-BG-2);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
backface-visibility: hidden;
transform: translate(0, 100%);
transition: transform 0.3s;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.huaxui-half-screen-dialog {
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
-webkit-transform: translateY(100%);
transform: translateY(100%);
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 5000;
line-height: 1.4;
background-color: #fff;
background-color: var(--weui-BG-2);
border-top-left-radius: 0.48rem;
border-top-right-radius: 0.48rem;
overflow: hidden;
}
@keyframes slideUp {
from {
transform: translate3d(0, 100%, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.huaxui-animate-slide-up{
-webkit-animation: slideUp ease 0.3s forwards;
animation: slideUp linear 0.3s forwards;
}
.huaxui-half-screen-dialog__hd{
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.huaxui-half-screen-dialog__hd .tracing-img{
width: 4.76rem;
height: 1.16rem;
margin-top: 0.72rem;
}
.huaxui-half-screen-dialog__hd p{
font-size: 0.48rem;
margin-top: 0.52rem;
color: #6D7278;
}
.huaxui-half-screen-dialog__hd .tracing-img-copy{
margin: 0.24rem 0.64rem 0 0.64rem;
width: 13.76rem;
}
.huaxui-half-screen-dialog__gd{
width: 13.76rem;
margin-top: 0.6rem;
}
.huaxui-half-screen-dialog__gd>p{
overflow-wrap: break-word;
color: #000;
font-size: 0.64rem;
text-align: left;
white-space: nowrap;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
line-height: 0.96rem;
font-weight: 600;
}
.huaxui-half-screen-dialog__gd>ul{
margin-top: 0.2rem;
}
.huaxui-half-screen-dialog__gd>ul li{
color: #000000;
font-size: 0.48rem;
text-align: left;
line-height: 0.88rem;
font-weight: 800;
word-spacing: 0.2rem;
}
.huaxui-half-screen-dialog__gd>ul li .xxsq{
color: #ff3a31;
}
.huaxui-half-screen-dialog__gd>ul li:before {
content: "";
width: 0.15rem;
height: 0.15rem;
display: inline-block;
border-radius: 50%;
background: rgb(234, 77, 62);
vertical-align: middle;
margin-right: 0.3rem;
}
.huaxui-half-screen-dialog__ft{
height: 2rem;
margin-bottom: 0.2rem;
margin-top: 1rem;
}
.dialog-ft-button{
width: 13.76rem;
height: 1.4rem;
outline: none;
background: #ea4d3e;
color:#fff;
display: block;
margin:0 auto;
font-size: 0.56rem;
border-radius: 0.72rem;
}