fangliaoxiaochengxv/common/styles/common.scss

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

@import "./var.scss";


ol, ul {
  list-style: none;
}

.mb5 {
  margin-bottom: 10rpx;
}
.mbr11{
	margin-bottom: 11rpx;
}
.mb8 {
	margin-bottom: 16rpx;
}
.mb10 {
  margin-bottom: 20rpx;
}
.mb15 {
	margin-bottom: 30rpx;
}
.mb20 {
	margin-bottom: 40rpx;
}
.mb30 {
	margin-bottom: 60rpx;
}
.mr5 {
  margin-right: 5px;
}
.mr8 {
	margin-right: 8px;
}
.mr10 {
  margin-right: 10px;
}
.mr12 {
	margin-right: 12px;
}
.mr15 {
	margin-right: 15px;
}
.mr20 {
  margin-right: 40rpx;
}
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt8 {
	margin-top: 16rpx;
}
.mtr20 {
	margin-top: 20rpx;
}
.mt5 {
  margin-top: 5px;
}
.ml10{
	margin-left: 10px;
}
.ml5{
	margin-left: 10rpx;
}
.ml8{
	margin-left: 16rpx;
}
.ml15{
	margin-left: 30rpx;
}
.ml28{
	margin-left: 56rpx;
}

.pd10 {
	padding: 0 20rpx;
}
.pdt0 {
	padding-top: 0 !important;
}

.display-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.display-flex-common {
  display: flex;
}
.display-flex-center {
	display: flex;
	align-items: center;
}
.flex-auto-left {
	margin-left: auto;
}
.flex-shrink {
	flex-shrink: 0;
}
.display-flex-end{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.display-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.display-flex-content-center {
	display: flex;
	align-items: center;
	justify-content: center
}

.clearfix:after {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}

.clearfix {
  zoom: 1;
}

.text-center {
  text-align: center;
}

.float-right {
	float: right;
}


.text-overflow {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: normal;
}

.text-overflow-single {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: normal;
}

.text-through {
	text-decoration: line-through;
}
.text-inline {
	// display: inline-flex;
}

// 文字相关

.bg-white {
	background-color: #fff;
}
.fs9 {
	font-size: 18rpx;
}
.fs10 {
	font-size: 20rpx;
}
.fs12 {
	font-size: 24rpx;
}
.fs13 {
	font-size: 26rpx;
}
.fs14 {
	font-size: 28rpx;
}
.fs15 {
	font-size: 30rpx;
}
.fs16 {
	font-size: 32rpx;
}
.fs18 {
	font-size: 36rpx;
}
.fs20 {
	font-size: 40rpx;
}
.fs26 {
	font-size: 52rpx;
}
.fs30 {
	font-size: 60rpx;
}
.fw700 {
	font-weight: 700;
}
.fw600 {
	font-weight: 600;
}
.fw500 {
	font-weight: 500;
}
.fw400 {
	font-weight: 400;
}
.fw300 {
	font-weight: 300;
}

.color-black {
	color: #000;
}
.color-white {
	color: #fff;
}
.color-main-gray {
	color: #1D161F;
}


.color-2c {
	color: #2C2C2C;
}
.color-23 {
	color: #232323;
}
.color-9 {
	color: #999;
}

.color-orange {
	color: #FF7400;
}

.color-71 {
	color: #717171;
}

.color-7a {
	color: #7a7a7a;
}

.color-5f {
	color: #5F5F5F;
}

.color-del {
	color: #FF4E4A;
}

.color-red {
	color: #FF424F;
}
.color-556 {
	color: #C29556;
}

.color-666 {
	color: #666666;
}
.color-333 {
	color: #333333;
}
.color-777 {
	color: #777777;
}
.color-888 {
	color: #888888;
}

.color-ca{
	color: #CACACA;
}
.color-c8{
	color: #c8c8c8;
}

.color-d9{
	color: #9D9D9D;
}

.color-4a {
	color: #4A4A4A;
}
.color-3 {
	color: #333;
}

.common-card{
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
}

.common-btn {
	height: 78rpx;
	line-height: 78rpx;
	padding: 0 29rpx;
	color: #fff;
	background: #F39800;
	border-radius: 39rpx 39rpx 39rpx 39rpx;
	font-size: 32rpx;
	text-align: center;
	border: 2rpx solid #F39800;
	&-gray{
		background: #EEEFF1;
		color: #1D161F;
	}
	&-border {
		background-color: #fff;
		color: #F39800;
		border-color: #D0D0D0;
	}
	&-disabled{
		background: #EEEFF1;
		color: #1D161F;
		border-color: #EEEFF1;
	}
}

.btn-gray-border {
	height: 78rpx;
	line-height: 78rpx;
	padding: 0 29rpx;
	color: #1D161F;
	background: #fff;
	border: 2rpx solid #D0D0D0;
	border-radius: 39rpx 39rpx 39rpx 39rpx;
	font-size: 32rpx;
	text-align: center;
}
.btn-gray {
	height: 78rpx;
	line-height: 78rpx;
	color: #767983;
	background: #F5F7FB;
	border-radius: 39rpx 39rpx 39rpx 39rpx;
	font-size: 32rpx;
	text-align: center;
}

.u-btn--default {
	color: #1D161F;
	background-color: #EEEFF1;
	border-color: #EEEFF1;
}

.new-goods-tag {
	display: inline-block;
	padding: 0 6rpx;
	height: 32rpx;
	line-height: 32rpx;
	background-color: #77E2BE;
	color: #fff;
	font-size: 22rpx;
	border-radius: 5rpx;
}

.search-box {
	margin: 0 auto 20rpx;
	height: 61rpx;
	background: #FDFDFD;
	border-radius: 30rpx;
	opacity: 1;
	display: flex;
	align-items: center;
	flex-direction: row;

	text {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #9D9D9D;
		line-height: 61rpx;
		margin-left: 11rpx;
	}
}

// tag
.gray-tag {
	display: inline-flex;
	height: 35rpx;
	line-height: 35rpx;
	background: #F6F6F6;
	border-radius: 4rpx;
	padding: 0 22rpx;
	color: #888888;
	font-size: 24rpx;
}

.common-card-box {
	width: 710rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	margin: 0 auto 20rpx auto;
	display: flex;
	flex-direction: column;
}

.bottom-box {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 170rpx;
	left: 0;
	right: 0;
	box-sizing: border-box;
	padding: 27rpx 20rpx;
	background-color: #fff;
	z-index: 1000;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
}


.tag-red {
	padding: 4rpx 6rpx;
	font-size: 22rpx;
	color: #C9161E;
	background-color: rgba(#C9161E, 0.08);

}