|
[多端开发]
avm的 button 组件存在样式 bug
[复制链接]
avm的 button 组件存在样式 bug,已经把button 的边框宽度设置为 0 了,但是在某些场景下还是会看得出来样式有 bug
仔细看上图就会发现, 那条竖线没有到达顶部和底部都存在一定的空隙,而代码里面我写的是高百分百
- <template name='m-confirm'>
- <view class="m-confirm-page m-confirm-flex-middle">
- <view class="m-confirm-content">
- <view class=" m-confirm-flex-middle m-confirm-flex-column">
- <text class="m-confirm-title">爱爱爱爱爱爱</text>
- <text
- class="m-confirm-msg">爱爱爱爱爱爱啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊2</text>
- </view>
- <view class="m-confirm-buttons m-confirm-disflex">
- <button class="m-confirm-button m-confirm-left-bottom-radius m-confirm-right-line">取消</button>
- <button class="m-confirm-button m-confirm-right-bottom-radius">确认</button>
- </view>
- </view>
- </view>
- </template>
- <style scoped>
- .m-confirm-right-line{
- border-right:0.5px solid #eee ;
- }
- .m-confirm-right-bottom-radius{
- border-radius: 0 0 16px 0;
- }
- .m-confirm-left-bottom-radius{
- border-radius: 0 0 0 16px;
- }
- .m-confirm-button {
- flex: 1;
- height: 100%;
- background-color: #fff;
- border: 0;
- }
- .m-confirm-buttons {
- border-top: 0.5px solid #eeeeee;
- height: 50px;
- }
- .m-confirm-disflex {
- flex-flow: row;
- align-items: flex-start;
- justify-content: flex-start;
- align-content: flex-start;
- }
- .m-confirm-page {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- background: rgba(0, 0, 0, 0.5);
- z-index: 999999;
- }
- .m-confirm-flex-middle {
- align-items: center;
- justify-content: center;
- text-align: center;
- }
- .m-confirm-content {
- background: #fff;
- min-width: 50%;
- max-width: 75%;
- min-height: 100px;
- border-radius: 16px;
- }
- .m-confirm-title {
- padding-top: 24px;
- padding-bottom: 12px;
- }
- .m-confirm-msg {
- padding-left: 20px;
- padding-right: 20px;
- padding-bottom: 20px;
- text-align: center;
- }
- .m-confirm-flex-column {
- flex-flow: column;
- }
- </style>
- <script>
- export default {
- name: 'm-confirm',
- installed() {//like created
- },
- data() {
- return {
- }
- },
- methods: {
- }
- }
- </script>
复制代码
|
|