page { color: #333; background-color: #F8F8F8; font-size: 28rpx; } /* 去除image的间距 */ image { /* display: block; */ } .wrapper { width: 100%; min-height: 100vh; } .w-100 { width: 100%; } .wh-100 { width: 100%; height: 100%; } /* flex 布局 */ .flex { display:flex!important; } .flex-row{ flex-direction:row!important; } .flex-column{ flex-direction:column!important; } .flex-row-reverse{ flex-direction:row-reverse!important; } .flex-column-reverse{ flex-direction:column-reverse!important; } .flex-wrap{ flex-wrap:wrap; } .flex-nowrap{ flex-wrap:nowrap; } .j-start{ justify-content:flex-start; } .j-end{ justify-content:flex-end; } .j-between{ justify-content:space-between; } .j-center{ justify-content:center; } .j-around{ justify-content: space-around; } .a-center{ align-items: center; } .a-stretch{ align-items: stretch; } .a-start{ align-items: flex-start; } .a-end{ align-items: flex-end; } .as-end{ align-self: flex-end; } .flex-1{ flex: 1; } .flex-2{ flex: 2; } .flex-3{ flex: 3; } .flex-4{ flex: 4; } .flex-5{ flex: 5; } /* -- 内外边距 -- */ .m-1 { margin: 10rpx; } .m-2 { margin: 20rpx; } .m-3 { margin: 30rpx; } .m-4 { margin: 40rpx; } .m-5 { margin: 50rpx; } .mt-1 { margin-top: 10rpx; } .mt-2 { margin-top: 20rpx; } .mt-3 { margin-top: 30rpx; } .mt-4 { margin-top: 40rpx; } .mt-5 { margin-top: 50rpx; } .mb-1 { margin-bottom: 10rpx; } .mb-2 { margin-bottom: 20rpx; } .mb-3 { margin-bottom: 30rpx; } .mb-4 { margin-bottom: 40rpx; } .mb-5 { margin-bottom: 50rpx; } .ml-1 { margin-left: 10rpx; } .ml-2 { margin-left: 20rpx; } .ml-3 { margin-left: 30rpx; } .ml-4 { margin-left: 40rpx; } .ml-5 { margin-left: 50rpx; } .mr-1 { margin-right: 10rpx; } .mr-2 { margin-right: 20rpx; } .mr-3 { margin-right: 30rpx; } .mr-4 { margin-right: 40rpx; } .mr-5 { margin-right: 50rpx; } .my-1 { margin-top: 10rpx; margin-bottom: 10rpx; } .my-2 { margin-top: 20rpx; margin-bottom: 20rpx; } .my-3 { margin-top: 30rpx; margin-bottom: 30rpx; } .my-4 { margin-top: 40rpx; margin-bottom: 40rpx; } .my-5 { margin-top: 50rpx; margin-bottom: 50rpx; } .mx-1 { margin-left: 10rpx; margin-right: 10rpx; } .mx-2 { margin-left: 20rpx; margin-right: 20rpx; } .mx-3 { margin-left: 30rpx; margin-right: 30rpx; } .mx-4 { margin-left: 40rpx; margin-right: 40rpx; } .mx-5 { margin-left: 50rpx; margin-right: 50rpx; } .p-1 { padding: 10rpx; } .p-2 { padding: 20rpx; } .p-3 { padding: 30rpx; } .p-4 { padding: 40rpx; } .p-5 { padding: 50rpx; } .pt-1 { padding-top: 10rpx; } .pt-2 { padding-top: 20rpx; } .pt-3 { padding-top: 30rpx; } .pt-4 { padding-top: 40rpx; } .pt-5 { padding-top: 50rpx; } .pb-1 { padding-bottom: 10rpx; } .pb-2 { padding-bottom: 20rpx; } .pb-3 { padding-bottom: 30rpx; } .pb-4 { padding-bottom: 40rpx; } .pb-5 { padding-bottom: 50rpx; } .pl-1 { padding-left: 10rpx; } .pl-2 { padding-left: 20rpx; } .pl-3 { padding-left: 30rpx; } .pl-4 { padding-left: 40rpx; } .pl-5 { padding-left: 50rpx; } .pr-1 { padding-right: 10rpx; } .pr-2 { padding-right: 20rpx; } .pr-3 { padding-right: 30rpx; } .pr-4 { padding-right: 40rpx; } .pr-5 { padding-right: 50rpx; } .py-1 { padding-top: 10rpx; padding-bottom: 10rpx; } .py-2 { padding-top: 20rpx; padding-bottom: 20rpx; } .py-3 { padding-top: 30rpx; padding-bottom: 30rpx; } .py-4 { padding-top: 40rpx; padding-bottom: 40rpx; } .py-5 { padding-top: 50rpx; padding-bottom: 50rpx; } .px-1 { padding-left: 10rpx; padding-right: 10rpx; } .px-2 { padding-left: 20rpx; padding-right: 20rpx; } .px-3 { padding-left: 30rpx; padding-right: 30rpx; } .px-4 { padding-left: 40rpx; padding-right: 40rpx; } .px-5 { padding-left: 50rpx; padding-right: 50rpx; } /* 文字对齐 */ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } /* 常规字体大小 */ .font-24 { font-size: 24rpx; } .font-28 { font-size: 28rpx; } .font-32 { font-size: 32rpx; } .font-36 { font-size: 36rpx; } .font-48 { font-size: 48rpx; } /* 字粗 */ .font-bold { font-weight: bold; } .font-bolder { font-weight: bolder; } /* 内容溢出 */ .overflow-hidden { overflow: hidden; } .overtext-1 { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } /* 阴影 */ .shadow { box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.3); } .shadow-lg { box-shadow: 0rpx 40rpx 100rpx 0rpx rgba(0, 0, 0, 0.5); } .borderBox { box-sizing: border-box; } /* border-radius */ .r-8 { border-radius: 8rpx; }