@charset "utf-8";

.main {
	padding: 8px 12px;
}

.card {
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	background-color: var(--bg-white);
	box-shadow: 1px 1px 4px var(--color-shadow);
}

.user-info {
	display: flex;
	align-items: center;
	/* justify-content: flex-start; */
	justify-content: space-between;
}
.user-info .avatar {
	width: 48px;
}
.user-info .piece {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.user-info .txt {
	margin-left: 8px;
	flex-grow: 1;
}
.user-info .uname {
	font-size: var(--fsize-title);
}
.user-info .uname .icon {
	width: 16px;
	margin-left: 4px;
}
.user-info .ctime {
	margin-top: 8px;
	color: var(--color-gray);
	font-size: var(--fsize-basic);
}
.user-info .service {
	padding: 4px 8px;
	color: var(--color-button);
	font-size: var(--fsize-basic);
	border: 1px solid var(--color-button);
	border-radius: 4px;
}


.order-list {
	
}
.order {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
	padding: 12px 8px;
	color: var(--color-gray);
	font-size: var(--fsize-basic);
	background: var(--bg-white);
	border-radius: 6px;
}
.order .img {
	box-shadow: 0 0 2px var(--color-shadow);
}
.order .origin {
	width: 64px;
	border-radius: 4px;
}
.order .txt {
	flex-grow: 1;
	margin-left: 6px;
}
.order .piece {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 2px 0 3px 0;
}
.order .piece-between {
	justify-content: space-between;
}
.order .term {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.order .icon {
	width: 16px;
	margin-right: 2px;
}
.order .copy {
	margin-left: 4px;
}
.order .num {
	user-select: all;
	-ms-user-select: text;
	-moz-user-select: all;
	-webkit-user-select: text;
}
.order .price, .order .status, .order .action {
	margin-left: 16px;
}
.order .ctime {
	color: var(--color-grey);
}
.order .action {
	padding: 2px 4px;
	color: var(--color-button);
	border-radius: 4px;
	border: 1px solid var(--color-button);
}


.explain, .empty, .foot {
	text-align: center;
	color: var(--color-grey);
	font-size: var(--fsize-basic);
}
.empty {
	padding: 32vh 0;
}
.explain {
	padding: 12px 0;
}
.foot a {
	color: var(--color-link);
}


.modal-pay {
	/* display: block; */
	color: var(--color-basic);
}
.modal-pay .modal-content {
	padding: 16px 12px;
	border-radius: 8px;
}
.modal-pay .modal-title {
	font-weight: 700;
	text-align: center;
	letter-spacing: 2px;
}
.modal-pay .modal-main {
	margin-top: 12px;
	text-align: center;
}
.modal-pay .pay-explain {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	color: var(--color-gray);
	font-size: var(--fsize-basic);
}
.modal-pay .explain {
	display: flex;
	margin: 0 4px;
}
.modal-pay .explain .icon {
	width: 16px;
	height: 16px;
	margin-right: 2px;
}
.modal-pay .pay-payment {
	padding: 8px 16px;
}
.modal-pay .payment {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 8px 16px;
	margin: 8px 0;
	color: var(--color-white);
	border-radius: 6px;
}
.modal-pay .payment-wechat {
	background: #2AA139E0;
	/* border: 1px solid #00c800; */
}
.modal-pay .payment-alipay {
	background: #027AFFE0;
	border: 1px solid #30afea;
}
.modal-pay .payment-balance {
	background: #F15A4AE0;
	/* border: 1px solid #f15a4a; */
}
.modal-pay .payment .icon {
	width: 32px;
}
.modal-pay .payment .text {
	margin-left: 4px;
}
.modal-pay .pay-tip {
	color: var(--color-tip);
	font-size: var(--fsize-basic);
}
.modal-pay .pay-tip .service {
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-pay .pay-tip .icon {
	width: 16px;
	margin: 0 4px;
}
.modal-pay .pay-tip .text {
	color: #007BFF;
	line-height: 24px;
}