$app-main-color: #1FCA7C; page { height: 100%; } .container { box-sizing: border-box; /* padding border 等不增加到宽高上 */ } view, scroll-view, swiper, button, input, textarea, label, navigator, image { box-sizing: content-box; /* padding border 等增加到宽高上 */ } .flex { display: flex; } .flex-wrap { display: flex; flex-wrap: wrap; } .flex-column { display: flex; flex-direction: column; } // 横轴 .flex-row-around { display: flex; justify-content: space-around; } .flex-row-between { display: flex; justify-content: space-between; } .flex-row-center { display: flex; justify-content: center; } // 纵轴 .flex-column-center { display: flex; align-items: center; } // 横轴 纵轴 .flex-around-center{ display: flex; justify-content: space-around; align-items: center; } .flex-between-center{ display: flex; justify-content: space-between; align-items: center; } .flex-center-center { display: flex; justify-content: center; align-items: center; } .h-center { justify-content: center; } .v-center { align-items:center; } .vh-center { justify-content: center; align-items:center; } // 宽高 @for $i from 1 through 400 { .w-#{$i} { width: $i + rpx; } .h-#{$i} { height: $i + rpx; } .lh-#{$i} { line-height: $i + rpx; } } // 字体大小 @for $i from 10 through 60 { .fs-#{$i} { font-size: $i + rpx; } } .fw-400 { font-weight: 400; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } // 圆角 @for $i from 8 through 50 { .br-#{$i} { border-radius: $i + rpx; } } // 内边距 @for $i from 5 through 200 { .pad-#{$i} { padding: $i + rpx; } .pt-#{$i} { padding-top: $i + rpx; } .pr-#{$i} { padding-right: $i + rpx; } .pb-#{$i} { padding-bottom: $i + rpx; } .pl-#{$i} { padding-left: $i + rpx; } .ptb-#{$i} { padding-top: $i + rpx; padding-bottom: $i + rpx; } .plr-#{$i} { padding-left: $i + rpx; padding-right: $i + rpx; } } // 外边距 @for $i from 5 through 200 { .mar-#{$i} { margin: $i + rpx; } .mt-#{$i} { margin-top: $i + rpx; } .mr-#{$i} { margin-right: $i + rpx; } .mb-#{$i} { margin-bottom: $i + rpx; } .ml-#{$i} { margin-left: $i + rpx; } .mtb-#{$i} { margin-top: $i + rpx; margin-bottom: $i + rpx; } .mlr-#{$i} { margin-left: $i + rpx; margin-right: $i + rpx; } } .center { text-align: center; } // 订单的主要按钮 .main-btn { width: 160rpx; height: 72rpx; border-radius: 60rpx; text-align: center; line-height: 72rpx; color: #FFF; background-color: $app-main-color; } // 订单的次要按钮 .minor-btn { width: 160rpx; height: 72rpx; border: 2rpx solid #999999; border-radius: 60rpx; text-align: center; line-height: 72rpx; } .bottom-box { box-sizing: border-box; } // 沾满全屏的按钮 .fullscreen-btn { height: 90rpx; margin-left: 20rpx; margin-right: 20rpx; text-align: center; line-height: 90rpx; background-color: #1FCA7C; border-radius: 12rpx; color: #FFFFFF; } .full-btn { height: 100rpx; margin: 0 20rpx; text-align: center; line-height: 100rpx; background-color: #EBF5F0; border-radius: 50rpx; color: #EEA616; } .overflow-y { flex: 1; overflow-y: auto; } button::after { border: none; } button { display: block; line-height: normal; background-color: #FFF; padding-left: 0; padding-right: 0; margin: 0; font-size: 32rpx; }