.clearfix:after, .clearfix:before { display: table; content: " " } .clearfix:after { clear: both } .single-line-ellipsis { white-space: nowrap; word-break: break-word; /* 单行显示 */ overflow: hidden; /* 超出隐藏 */ text-overflow: ellipsis; /* 显示省略号 */ } .tworow { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } /* flex弹性布局*/ .flex { display: flex; } .align-center { align-items: center; } .align-start { align-items: flex-start; } .align-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center !important; } .justify-around { justify-content: space-around; } .justify-end { justify-content: flex-end !important; } .justify-start { justify-content: flex-start !important; } .flex-wrap { flex-wrap: wrap; } .flex-column { flex-direction: column; } .flex-column-reverse { flex-direction: column-reverse; } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-1 { flex: 1; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-shrink { flex-shrink: 0; } .self-center { align-self: center; } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .border-box { box-sizing: border-box; } /* padding */ .pl-0 { padding-left: 0rpx !important; } .pl-0_5 { padding-left: 5rpx !important; } .pl-1 { padding-left: 10rpx !important; } .pl-2 { padding-left: 20rpx !important; } .pl-3 { padding-left: 30rpx !important; } .pr-0 { padding-right: 0rpx !important; } .pr-0_5 { padding-right: 5rpx !important; } .pr-1 { padding-right: 10rpx !important; } .pr-2 { padding-right: 20rpx !important; } .pr-3 { padding-right: 30rpx !important; } .pt-0 { padding-top: 0rpx !important; } .pt-0_5 { padding-top: 5rpx !important; } .pt-1 { padding-top: 10rpx !important; } .pt-2 { padding-top: 20rpx !important; } .pt-3 { padding-top: 30rpx !important; } .pb-0 { padding-bottom: 0rpx !important; } .pb-0_5 { padding-bottom: 5rpx !important; } .pb-1 { padding-bottom: 10rpx !important; } .pb-2 { padding-bottom: 20rpx !important; } .pb-3 { padding-bottom: 30rpx !important; } .px-0 { padding: 0 !important; } .px-0_5 { padding: 0 5rpx !important; } .px-1 { padding: 0 10rpx !important; } .px-2 { padding: 0 20rpx !important; } .px-3 { padding: 0 30rpx; } .py-0_5 { padding: 5rpx 0; } .py-1 { padding: 10rpx 0; } .py-2 { padding: 20rpx 0; } .py-3 { padding: 30rpx 0; } .p-0_5 { padding: 5rpx; } .p-1 { padding: 10rpx; } .p-2 { padding: 20rpx !important; } .p-3 { padding: 30rpx; } /* margin */ .ml-0 { margin-left: 0rpx !important; } .ml-0_5 { margin-left: 5rpx !important; } .ml-1 { margin-left: 10rpx !important; } .ml-2 { margin-left: 20rpx !important; } .ml-3 { margin-left: 30rpx !important; } .mr-0 { margin-right: 0rpx !important; } .mr-0_5 { margin-right: 5rpx !important; } .mr-1 { margin-right: 10rpx !important; } .mr-2 { margin-right: 20rpx !important; } .mr-3 { margin-right: 30rpx !important; } .mt-0 { margin-top: 0rpx !important; } .mt-0_5 { margin-top: 5rpx !important; } .mt-1 { margin-top: 10rpx !important; } .mt-2 { margin-top: 20rpx !important; } .mt-3 { margin-top: 30rpx !important; } .mb-0 { margin-bottom: 0rpx !important; } .mb-0_5 { margin-bottom: 5rpx !important; } .mb-1 { margin-bottom: 10rpx !important; } .mb-2 { margin-bottom: 20rpx !important; } .mb-3 { margin-bottom: 30rpx !important; } .mx-0_5 { margin: 0 5rpx; } .mx-1 { margin: 0 10rpx; } .mx-2 { margin: 0 20rpx; } .mx-3 { margin: 0 30rpx; } .my-0_5 { margin: 5rpx 0; } .my-1 { margin: 10rpx 0; } .my-2 { margin: 20rpx 0; } .my-3 { margin: 30rpx 0; } .m-0_5 { margin: 5rpx; } .m-1 { margin: 10rpx; } .m-2 { margin: 20rpx; } .m-3 { margin: 30rpx; }