CSS超出隐藏并且能滚动
程序员文章站
2022-04-22 14:02:06
...
效果图
实现CSS代码:
height: 500rpx;
overflow-x: hidden;
overflow-y: scroll;
效果图的代码:
<!-- 豆豆明细弹窗 -->
<view class="mxBoom" v-show="mxBoom">
<view class="mxBoomContent">
<view class="mxBoomTip">
苗豆明细
</view>
<view class="p_r mxTitle">
<view class="">
获取日期
</view>
<view class="">
详情
</view>
<view class="">
苗豆变更
</view>
</view>
<view class="jiluList">
<view class="p_r mxTxt" v-for="(item,index) in jiluList">
<view class="">
{{item.create_time}}
</view>
<view class="">
{{item.desc}}
</view>
<view class="">
{{item.values}}
</view>
</view>
</view>
</view>
<image :src="xIcon" class="xIcon" @click="mxBoom=false"></image>
</view>
CSS
.mxBoom {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 999;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
.xIcon {
margin-top: 24rpx;
width: 70rpx;
height: 70rpx;
text-align: center;
position: relative;
left: 50%;
margin-left: -35rpx;
}
.mxBoomContent {
width: 80vw;
margin-left: 10vw;
margin-top: 120rpx;
height: 900rpx;
background-color: #FFFFFF;
border-radius: 40rpx;
.jiluList {
height: 500rpx;
overflow-x: hidden;
overflow-y: scroll;
}
.mxTxt {
width: 90%;
margin-left: 5%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border-bottom: 1rpx solid #F1F1F1;
view {
color: #333;
font-size: 28rpx;
width: 33%;
text-align: center;
}
}
.mxTitle {
margin-bottom: 14rpx;
width: 90%;
margin-top: 50rpx;
margin-left: 5%;
text-align: center;
border-bottom: 1rpx solid #d0d0d0;
view {
color: #dfb464;
font-weight: 600;
font-size: 32rpx;
padding-bottom: 16rpx;
width: 33%;
}
}
.bolang {
width: 100%;
height: 22rpx;
}
.mxBoomTip {
width: 100%;
border-radius: 40rpx 40rpx 0 0;
font-size: 50rpx;
letter-spacing: 6rpx;
font-weight: 600;
text-align: center;
background-color: $red;
height: 230rpx;
line-height: 230rpx;
color: #fff;
}
}
}
上一篇: 前端小白--css样式知多少I
下一篇: 文字超出宽度显示省略号...