.a-list { box-sizing: border-box; } .a-list .a-list-header { padding: 30rpx 30rpx 18rpx; font-size: 28rpx; color: #888; display: inline-block; width: 100%; box-sizing: border-box; } .a-list .a-list-items .a-list-item { display: flex; font-size: 30rpx; line-height: 1.5; color: #333333; min-height: 88rpx; align-items: center; padding-left: 30rpx; background: #fff; } .a-list .a-list-item .a-list-item-bottom { display: block; position: absolute; width: 100%; border-bottom: 1px solid #ddd; left: 0; bottom: 0; right: auto; top: auto; } .a-list .a-list-item .a-list-item-thumb { width: 44rpx; height: 44rpx; margin-right: 30rpx; } .a-list .a-list-item .a-list-item-line { position: relative; display: flex; flex: 1; align-items: center; align-self: stretch; padding-right: 30rpx; min-height: 88rpx; overflow: hidden; } .a-list .a-list-item.am-list-item-top .a-list-item-line { align-items: flex-start; } .a-list .a-list-item.am-list-item-middle .a-list-item-line { align-items: center; } .a-list .a-list-item.am-list-item-bottom .a-list-item-line { align-items: flex-end; } .a-list .a-list-item .a-list-item-content { flex: 1; flex: 1; color: #000; font-size: .34rem; text-align: left; line-height: 1.5; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: .14rem; padding-bottom: .14rem; } .a-list .a-list-item.last .a-list-item-bottom{ border-bottom: none; } .a-list .a-list-item .a-list-item-extra { flex-basis: 36%; color: #888; font-size: 32rpx; text-align: right; line-height: 1.5; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: .14rem; padding-bottom: .14rem; } .a-list .a-list-item .a-list-item-line-wrap .a-list-item-content, .a-list .a-list-item .a-list-item-line-wrap .a-list-item-extra { white-space: normal; } .a-list .a-list-item.a-list-item-hover { background-color: #ddd; } .a-list .a-list-arrow { display: block; width: 30rpx; height: 30rpx; margin-left: 16rpx; background-image: url('data:image/svg+xml;charset=utf-8,'); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; visibility: hidden; transition: transform 0.3s; } .a-list .a-list-arrow.a-list-arrow-horizontal { visibility: visible; } .a-list .a-list-arrow.a-list-arrow-vertical { visibility: visible; transform: rotate(90deg); } .a-list .a-list-arrow.a-list-arrow-vertical-up { visibility: visible; transform: rotate(270deg); }