.top-view { position: sticky; top: 0px; z-index: 999; .title-view { margin: 10px; background-color: #f0f0f0; border-radius: 10px; display: flex; align-items: center; align-content: center; flex-direction: column; padding: 5px 10px; .title-view-up, .title-view-mid, .title-view-dwn { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; align-content: center; height: 25px; text { color: #aaa; font-size: 13px; text-align: center; } :first-child { text-align: left; } :last-child { text-align: right; } } .title-view-up { border-bottom: 1px solid #ddd; padding-bottom: 5px; } .title-view-mid { padding: 5px 0px; } } } .item-view { margin: 5px; border-radius: 10px; display: flex; align-items: center; align-content: center; flex-direction: column; padding: 5px 10px; border: 1px solid #C6DFFF; .item-view-up, .item-view-dwn { display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 50%; width: 100%; align-content: center; height: 25px; text { color: #4D565D; font-size: 13px; /*超出隐藏*/ overflow: hidden; /*溢出不换行*/ white-space: nowrap; /*溢出显示用省略号*/ text-overflow: ellipsis; text-align: center; } :first-child { text-align: left; } :last-child { text-align: right; } } .item-view-up { border-bottom: 1px solid #C6DFFF; padding-bottom: 5px; text { width: 25%; } } } /* 选中时添加这个 样式 */ .active { background: #E6F1FF; } .van-swipe-cell__right { height: inherit; color: white; display: flex; .item { width: 50px; text-align: center; display: flex; justify-content: center; align-items: center; font-size: 12px; } } .buttom_view { position: fixed; bottom: 10px; z-index: 999; display: flex; flex-direction: column; justify-content: space-between; margin-top: 20px; align-items: center; align-content: center; width: 100%; }