zh_order_food_xcx/common/css/common.css

body {
  background-color: #F5F5F5;
}
view,text {
  font-size: 24rpx;
  color: #333;
}
image {
  display: block;
}


/* 隐藏scroll-view 滚动条 */
::-webkit-scrollbar {
  display: none;
}

.iPhone-bottom {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
/* 不换行 */
.view-nowrap{
	white-space: nowrap;
}
.z-index-max {
	position: relative;
	z-index: 99999;
}
/* 自动换行 */
.view-word-wrap{
	white-space: pre-wrap;
	word-wrap: break-word;
}
/*超出三行... */
.text-overflow-ellipsis-t {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/*超出两行... */
.text-overflow-ellipsis {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/*超出一行... */
.text-overflow-ellipsis-one {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
}
/* 内部盒子 */
.box-border-box{
	box-sizing: border-box;
}

.flex-common-css {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.flex-index-css {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.flex-direction {
  display: flex;
  flex-direction: column;
}
.display-flex {
	display: flex;
}
.flex-justify-space {
	display: flex;
	justify-content: space-between;
}

.flex-justify-around {
	display: flex;
	justify-content: space-around;
}

.flex-justify-center {
	display: flex;
	justify-content: center;
}
.flex-justify-end {
	display: flex;
	justify-content: flex-end;
}
.flex-justify-start {
	display: flex;
	justify-content: flex-start;
}
.align-items-center {
	display: flex;
	align-items: center;
}
.align-items-flex-end {
	display: flex;
	align-items: flex-end;
}
.flex-wrap-wrap {
	display: flex;
	flex-wrap: wrap;
}
.common-view-css{
	width: 100%;
	flex: 1;
}
.scroll-view-css {
	width: 100%;
	flex: 1;
	overflow: auto;
}
.box-sizing-border {
	box-sizing: border-box;
}
.text-align-center {
	text-align: center;
}
.text-align-right {
	text-align: right;
}
.text-align-left {
	text-align: left;
}
.flex-1{
	flex: 1;
}
.flex-shrink0{
	flex-shrink: 0;
}

/* 字体大小 */
.fs-20{
	font-size: 20rpx;
}
.fs-22{
	font-size: 22rpx;
}
.fs-24{
	font-size: 24rpx;
}
.fs-26{
	font-size: 26rpx;
}
.fs-28{
	font-size: 28rpx;
}
.fs-30{
	font-size: 30rpx;
}
.fs-32{
	font-size: 32rpx;
}
.fs-34{
	font-size: 34rpx;
}
.fs-36{
	font-size: 36rpx;
}
.fs-38{
	font-size: 38rpx;
}
.fs-40{
	font-size: 40rpx;
}
.fs-44{
	font-size: 44rpx;
}
.fs-48{
	font-size: 48rpx;
}
.fs-64{
	font-size: 64rpx;
}

/* 字体下面横线 */
.text-underline{
	text-decoration: underline;
}
/* 字体中间横线 */
.text-line-through{
	text-decoration:line-through
}

/* 字体粗细 */
.fw-b{
	font-weight: bold;
}
.fw-400{
	font-weight: 400;
}
.fw-500{
	font-weight: 500;
}
.fw-600{
	font-weight: 600;
}

/* 字体颜色 */
.fc-f{
	color: #fff;
}
.fc-0{
	color: #000;
}
.fc-3{
	color: #333;
}
.fc-6{
	color: #666;
}
.fc-9198A2{
	color: #9198A2;
}
.fc-9{
	color: #999;
}
.fc-41ABF5{
	color: #41ABF5;
}
.fc-57CAFF{
	color: #57CAFF;
}
.fc-FB3D03{
	color: #ff3422;
}
.fc-ff3939{
	color: #ff3939;
}
.fc-FF7F00{
	color: #FF7F00;
}
.fc-FD5C02{
	color: #FD5C02;
}
.fc-ED301D{
	color: #ED301D;
}
.fc-ADADAD{
	color: #ADADAD;
}
.fc-65420c{
	color: #65420c;
}
.fc-FE9E11{
	color: #FE9E11;
}
/* 背景颜色 */
.bgc-f{
	background-color: #fff;
}
.bgc-3{
	background-color: #333;
}
.bgc-9{
	background-color: #999;
}

.bgc-4FB3EF{
	background-color: #4FB3EF;
}
.bgc-41ABF5{
	background-color: #41ABF5;
}.bgc-E4F3FD{
	background-color: #E4F3FD;
}
.bgc-BCEAFF{
	background-color: #BCEAFF;
}
.bgc-B3DDFB{
	background-color: #B3DDFB;
}
.bgc-ECF7FE{
	background-color: #ECF7FE;
}
.bgc-FCE7E2{
	background-color: #FCE7E2;
}
.bgc-F4F5F7{
	background-color: #F4F5F7;
}
.bgc-F2F2F2{
	background-color: #F2F2F2;
}
.bgc-E6E6E6{
	background-color: #E6E6E6;
}
.bgc-F6F6F6{
	background-color: #F6F6F6;
}
.bgc-FB3D03{
	background-color: #FB3D03;
}
.bgc-F5F4F9{
	background-color: #F5F4F9;
}
.bgc-F3F4F6{
	background-color: #F3F4F6;
}
.bgc-D5EDFB{
	background-color: #D5EDFB;
}
.b-b-F9F9F9{
	border-bottom: 1rpx solid #F9F9F9;
}



/* 圆角 */
.b-rad-12{
	border-radius: 12rpx;
}
.b-rad-16{
	border-radius: 16rpx;
}
.b-rad-20{
	border-radius: 20rpx;
}
.b-rad-200{
	border-radius: 200rpx;
}
.b-rad-50{
	border-radius: 50%;
}

/* 内边距 */
.p-8{
	padding: 8rpx;
}
.p-16{
	padding: 16rpx;
}
.p-20{
	padding: 20rpx;
}
.p-24{
	padding: 24rpx;
}
.p-32{
	padding: 32rpx;
}
.p-t-4 {
	padding-top: 4rpx;
}
.p-t-10 {
	padding-top: 10rpx;
}
.p-t-20{
	padding-top: 20rpx;
}
.pb-5 {
	padding-bottom: 5rpx;
}
.p-b-20 {
	padding-bottom: 20rpx;
}
.pb-36 {
	padding-bottom: 36rpx;
}
.plr-12{
	padding: 0 12rpx;
}
.plr-24{
	padding: 0 24rpx;
}
.plr-32{
	padding: 0 32rpx;
}
.ptp-24{
	padding: 24rpx 0;
}
.p-12-24 {
	padding: 12rpx 24rpx;
}
.pl-24 {
	padding-left: 24rpx;
}
.pr-24 {
	padding-right: 24rpx;
}
/* 外边距 */
.m-24{
	margin: 24rpx;
}
.mt-4{
	margin-top: 4rpx;
}
.mt-5{
	margin-top: 5rpx;
}
.mt-24{
	margin-top: 24rpx;
}

.ml-2{
	margin-left: 2rpx;
}
.ml-10{
	margin-left: 10rpx;
}
.ml-16{
	margin-left: 16rpx;
}
.ml-40{
	margin-left: 40rpx;
}

.mr-4{
	margin-right: 4rpx;
}
.mr-6{
	margin-right: 6rpx;
}
.mr-8{
	margin-right: 8rpx;
}
.mr-12{
	margin-right: 12rpx;
}
.mr-16{
	margin-right: 16rpx;
}
.mr-18{
	margin-right: 18rpx;
}
.mr-20{
	margin-right: 20px;
}
.mr-24{
	margin-right: 24rpx;
}
.mr-30{
	margin-right: 30rpx;
}
.mr-36{
	margin-right: 36rpx;
}
.mr-40{
	margin-right: 40px;
}
.mr-46{
	margin-right: 46px;
}


.mb-2{
	margin-bottom: 2rpx;
}
.mb-4{
	margin-bottom: 4rpx;
}
.mb-8{
	margin-bottom: 8rpx;
}
.mb-10{
	margin-bottom: 10rpx;
}
.mb-12{
	margin-bottom: 12rpx;
}
.mb-16{
	margin-bottom: 16rpx;
}
.mb-18{
	margin-bottom: 18rpx;
}
.mb-20{
	margin-bottom: 20rpx;
}
.mb-22{
	margin-bottom: 22rpx;
}
.mb-24{
	margin-bottom: 24rpx;
}
.mb-26{
	margin-bottom: 26rpx;
}
.mb-28{
	margin-bottom: 28rpx;
}
.mb-32{
	margin-bottom: 32rpx;
}
.mb-40{
	margin-bottom: 40rpx;
}
.mb-48{
	margin-bottom: 48rpx;
}
.mb-50{
	margin-bottom: 50rpx;
}
.mb-52{
	margin-bottom: 52rpx;
}
.mb-60{
	margin-bottom: 60rpx;
}
.mb-64{
	margin-bottom: 64rpx;
}
.mb-80{
	margin-bottom: 80rpx;
}

/* 宽度 */
.w-100{
	width: 100rpx;
}
.w-200{
	width: 200rpx;
}
.w-10030{
	width: 30%;
}