<van-popup v-model="show" position="bottom" :style="{ height: '50%' }"> <div> <div style="display: flex"> <div>5</div> <div>10</div> <div>20</div> <div>30</div> </div> <div style="display: flex"> <div>50</div> <div>100</div> <div>200</div> <div>500</div> </div> </div> </van-popup> 这是点击提现按钮后展示出来的弹窗,请添加样式
时间: 2023-10-13 20:06:18 浏览: 264
好的,您可以添加以下样式来美化这个弹窗:
```css
.van-popup__container {
background-color: #fff; /* 设置背景色 */
border-top-left-radius: 10px; /* 设置圆角 */
border-top-right-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}
.van-popup__content {
padding: 10px; /* 添加内边距 */
}
.van-popup__content > div {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
font-size: 16px;
color: #333;
border-bottom: 1px solid #eee; /* 添加分割线 */
}
.van-popup__content > div:last-child {
border-bottom: none; /* 最后一行不要分割线 */
}
.van-popup__content > div > div:first-child {
margin-left: 10px; /* 第一个子元素左边距 */
}
.van-popup__content > div > div:last-child {
margin-right: 10px; /* 最后一个子元素右边距 */
}
```
您可以将这些样式添加到您的样式表中,或将其添加到`<style>`标签中。
阅读全文