浏览代码

commit -m 递交订单中转页增加

zhengjinyi 3 年之前
父节点
当前提交
6e77d1d5ab

+ 1 - 1
components/cm-module/creatOrder/goodsList.vue

@@ -235,7 +235,7 @@
 					display: -webkit-box;
 					word-break: break-all;
 					-webkit-box-orient: vertical;
-					-webkit-line-clamp: 2;
+					-webkit-line-clamp: 1;
 					overflow: hidden;
 				}
 				.productprice{

+ 86 - 89
components/cm-module/orderDetails/goodsList.vue

@@ -2,7 +2,7 @@
 	<view class="goods-template">
 		<!-- 商品列表 -->
 		<view class="goods-list">
-			<view v-for="(item, index) in shopOrderData" :key="index" class="goods-item clearfix">
+			<view v-for="(item, index) in list" :key="index" class="goods-item clearfix">
 				<view class="shoptitle">
 					<view v-if="item.shopPromotion" class="floor-item-act">
 						<view class="floor-tags" @click.stop="clickPopupShow(item.shopPromotion)">{{
@@ -38,6 +38,7 @@
 									"
 									>¥{{ pros.price | NumFormat }}</view
 								>
+								<view class="view-num right">x {{ pros.num }}</view>
 							</view>
 							<view class="floor-item-act">
 								<template v-if="pros.productPromotion">
@@ -69,30 +70,23 @@
 									</view>
 								</template>
 							</view>
-							<view class="product-view">
-								<view class="view-num right">x {{ pros.num }}</view>
-							</view>
 						</view>
 					</view>
-					<view class=" product-info">
+					<view class=" product-info clearfix"> 
 						<view class="product-view" v-if="pros.returnedNum > 0 || pros.actualCancelNum > 0">
-							<view class="view-num">已退货/已取消</view>
-							<view class="view-right">{{ pros.returnedNum }}/{{ pros.actualCancelNum }}</view>
+							<view class="view-num">已退货/已取消:<text class="text">{{ pros.returnedNum }}/{{ pros.actualCancelNum }}</text></view>
 						</view>
 						<view class="product-view" v-if="pros.svipPriceType != 1">
-							<view class="view-num">折扣</view>
-							<view class="view-right">{{ pros.discount == null ? '0' : pros.discount }}%</view>
+							<view class="view-num">折扣:<text class="text">{{ pros.discount == null ? '0' : pros.discount }}%</text></view>
 						</view>
 						<view class="product-view">
-							<view class="view-num">税率</view> <view class="view-right">{{ pros.taxRate }}%</view>
+							<view class="view-num">税率:<text class="text">{{ pros.taxRate }}%</text></view>
 						</view>
 						<view class="product-view">
-							<view class="view-num">折后单价</view>
-							<view class="view-right">¥{{ pros.discountPrice | NumFormat }}</view>
+							<view class="view-num">折后单价:<text class="text">¥{{ pros.discountPrice | NumFormat }}</text></view>
 						</view>
 						<view class="product-view allPrice">
-							<view class="view-num">合计</view>
-							<view class="view-right">¥{{ pros.totalFee | NumFormat }}</view>
+							<view class="view-num">合计:<text class="text">¥{{ pros.totalFee | NumFormat }}</text></view>
 						</view>
 					</view>
 				</view>
@@ -102,20 +96,35 @@
 						<view class="text">{{ item.note ? item.note : '' }}</view>
 					</view>
 				</view>
-				<view class="goods-pros-b">
-					<view class="count">共{{ item.itemCount }}件商品</view>
-					<view class="sum">
-						<view class="sum-none" v-if="item.promotionFullReduction > 0">
-							<text class="money-sign">¥</text>
-							<text class="money">{{
-								(item.totalAmount + item.promotionFullReduction) | NumFormat
-							}}</text>
-							<text class="money-reduced"
-								>减<text>¥{{ item.promotionFullReduction | NumFormat }}</text></text
-							>
-						</view>
-						<view class="sum-money" :class="item.promotionFullReduction == 0 ? 'none' : ''">
-							商品总额:<text class="money">¥{{ item.totalAmount | NumFormat }}</text>
+				<view class="goods-pros-b clearfix">
+					<view class="pros-price-view" v-if="item.isHandelShow">
+						<view class="price-view-le">商品总额:</view>
+						<view class="price-view-ri">¥{{ item.totalAmount | NumFormat }}</view>
+					</view>
+					<view class="pros-price-view" v-if="item.isHandelShow">
+						<view class="price-view-le">优惠:</view>
+						<view class="price-view-ri">¥{{ item.totalAmount | NumFormat }}</view>
+					</view>
+					<view class="pros-price-view" v-if="item.isHandelShow">
+						<view class="price-view-le">余额抵扣:</view>
+						<view class="price-view-ri">¥{{ item.totalAmount | NumFormat }}</view>
+					</view>
+					<view class="pros-price-view" v-if="item.isHandelShow">
+						<view class="price-view-le">应付金额:</view>
+						<view class="price-view-ri">¥{{ item.totalAmount | NumFormat }}</view>
+					</view>
+					<view class="pros-price-view" v-if="item.isHandelShow">
+						<view class="price-view-le">已付金额:</view>
+						<view class="price-view-ri">¥{{ item.totalAmount | NumFormat }}</view>
+					</view>
+					<view class="pros-price-view">
+						<view class="price-view-le">待付金额:</view>
+						<view class="price-view-ri red">¥{{ item.totalAmount | NumFormat }}</view>
+					</view>
+					<view class="pros-price-btn">
+						<view class="btn" @click="handelShowDetails(item)">
+							{{ item.isHandelShow ? '收起' : '查看更多' }}
+							<text class="iconfont" :class="item.isHandelShow ? 'icon-xiangshangjiantou' : 'icon-xiangxiajiantou'"></text>
 						</view>
 					</view>
 				</view>
@@ -137,13 +146,12 @@ export default {
 	},
 	data() {
 		return {
-			initData: [],
-			vipFlag: 0
+			list: [],
+			vipFlag: 0,
 		}
 	},
 	created() {
-		this.initData = this.shopOrderData
-		this.initGetStotage()
+		this.initGetStotage(this.shopOrderData)
 	},
 	filters: {
 		NumFormat(value) {
@@ -162,9 +170,16 @@ export default {
 	},
 	computed: {},
 	methods: {
-		async initGetStotage() {
+		async initGetStotage(data) {
 			const userInfo = await this.$api.getStorage()
 			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
+			this.list = data.map((el,index)=>{
+				el.isHandelShow = false
+				return el
+			})
+		},
+		handelShowDetails(item){
+			item.isHandelShow = !item.isHandelShow
 		},
 		goShophome(shop) {
 			if(shop.shopType === 2){
@@ -272,9 +287,9 @@ export default {
 		.productlist {
 			width: 100%;
 			height: auto;
-			border-bottom: 2rpx solid #e1e1e1;
 			padding: 10rpx;
 			box-sizing: border-box;
+			border-bottom: 1px solid #E1E1E1;
 		}
 		.goods-pros-t {
 			display: flex;
@@ -321,12 +336,13 @@ export default {
 				overflow: hidden;
 				height: 44rpx;
 				line-height: 44rpx;
+				float: left;
+				width: 50%;
 				.view-num {
 					float: left;
-				}
-				.view-right {
-					color: #666666;
-					float: right;
+					.text{
+						color: #333333;
+					}
 				}
 			}
 		}
@@ -465,62 +481,43 @@ export default {
 		}
 		.goods-pros-b {
 			width: 100%;
-			height: 80rpx;
-			margin-top: 12rpx;
+			padding-top: 12rpx;
 			float: left;
-			.count {
-				float: left;
-				font-size: $font-size-26;
-				line-height: 80rpx;
-				color: $text-color;
-				display: flex;
-				justify-content: flex-end;
-				font-weight: bold;
-			}
-			.sum {
-				width: 520rpx;
-				float: right;
-				.sum-none {
-					width: 100%;
-					height: 40rpx;
-					line-height: 40rpx;
-					color: $text-color;
+			.pros-price-view{
+				width: 100%;
+				height: 44rpx;
+				font-size: 24rpx;
+				line-height: 44rpx;
+				.price-view-le{
 					float: left;
+					color: #999999;
+					text-align: left;
+				}
+				.price-view-ri{
+					float: right;
+					color: #333333;
 					text-align: right;
-					.money {
-						font-size: $font-size-26;
-						color: #999999;
-						text-decoration: line-through;
-					}
-					.money-sign {
-						font-size: $font-size-26;
-						color: #999999;
-						text-decoration: line-through;
-					}
-					.money-reduced {
-						margin-left: 10rpx;
-						font-size: $font-size-26;
-						color: $color-system;
-						.iconfont {
-							font-size: $font-size-34;
-						}
+					&.red{
+						color: #F94B4B;
 					}
 				}
-				.sum-money {
-					width: 100%;
-					height: 40rpx;
-					font-size: $font-size-28;
-					line-height: 40rpx;
-					color: $text-color;
-					display: flex;
-					justify-content: flex-end;
-					&.none {
-						height: 80rpx;
-						line-height: 80rpx;
-					}
-					.money {
-						color: #ff2a2a;
-						font-size: $font-size-28;
+			}
+			.pros-price-btn{
+				width: 100%;
+				height: 48rpx;
+				.btn{
+					width: 168rpx;
+					height: 48rpx;
+					line-height: 46rpx;
+					box-sizing: border-box;
+					border: 2rpx solid #e1e1e1;
+					border-radius: 8rpx;
+					text-align: center;
+					color: #b2b2b2;
+					margin: 0 auto;
+					font-size: $font-size-24;
+					.iconfont {
+						
 					}
 				}
 			}

+ 12 - 12
components/cm-module/orderDetails/orderInformation.vue

@@ -99,7 +99,8 @@
 		</view>
 		<view class="openinfo" v-if="infoflag">
 			<view class="btnInfo" @click="openShow">
-				查看更多<label class="iconfont icon-xiangxiajiantou"></label>
+				查看更多
+				<text class="iconfont icon-xiangxiajiantou"></text>
 			</view>
 		</view>
 	</view>
@@ -310,21 +311,20 @@ export default {
 	}
 }
 .openinfo {
-	.btnInfo {
-		width: 140rpx;
-		height: 40rpx;
+	width: 100%;
+	height: 48rpx;
+	margin-bottom: 30rpx;
+	.btnInfo{
+		width: 168rpx;
+		height: 48rpx;
+		line-height: 46rpx;
+		box-sizing: border-box;
 		border: 2rpx solid #e1e1e1;
-		border-radius: 6rpx;
-		padding: 5rpx;
+		border-radius: 8rpx;
 		text-align: center;
 		color: #b2b2b2;
-		margin: 20rpx auto;
+		margin: 0 auto;
 		font-size: $font-size-24;
-		.iconfont {
-			position: relative;
-			top: 5rpx;
-			right: -3rpx;
-		}
 	}
 }
 </style>

+ 6 - 0
pages.json

@@ -334,6 +334,12 @@
                         "navigationBarTitleText": "线下转账"
                     }
                 },
+                {
+                    "path": "order/order-pay-list",
+                    "style": {
+                        "navigationBarTitleText": "支付订单"
+                    }
+                },
                 {
                     "path": "order/order-pay",
                     "style": {

+ 5 - 15
pages/user/order/order-details.vue

@@ -341,15 +341,9 @@ export default {
 						)
 					} else {
 						if (data.order.onlinePayFlag === 1) {
-							this.$api.navigateTo(
-								`/pages/user/order/order-payment?type=onlinePay&Amount=${
-									data.order.pendingPayments
-								}&orderId=${data.order.orderId}`
-							)
+							this.$api.navigateTo(`/pages/user/order/order-payunder?orderId=${data.order.orderId}`)
 						} else {
-							this.$api.navigateTo(
-								`/pages/user/order/order-payment?type=payfirm&orderId=${data.order.orderId}`
-							)
+							this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${data.order.orderId}`)
 						}
 					}
 				})
@@ -359,14 +353,10 @@ export default {
 		},
 		hanldCancelConfirm(data) {
 			//不使用余额抵扣直接跳转收银台
-			if (data.onlinePayFlag == '1') {
-				this.$api.navigateTo(
-					`/pages/user/order/order-payment?type=onlinePay&Amount=${this.orderInfo.pendingPayments}&orderId=${
-						data.orderId
-					}`
-				)
+			if (data.onlinePayFlag == 1) {// 只能线下
+				this.$api.navigateTo(`/pages/user/order/order-payunder?orderId=${data.orderId}`)
 			} else {
-				this.$api.navigateTo(`/pages/user/order/order-payment?type=payfirm&orderId=${data.orderId}`)
+				this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${data.orderId}`)
 			}
 		},
 		hanldConfirmFn(orderId) {

+ 5 - 13
pages/user/order/order-list.vue

@@ -566,14 +566,10 @@ export default {
 						)
 					} else {
 						if (data.order.onlinePayFlag === 1) {
-							this.$api.navigateTo(
-								`/pages/user/order/order-payment?type=onlinePay&Amount=${
-									data.order.pendingPayments
-								}&orderId=${data.order.orderId}`
-							)
+							this.$api.navigateTo(`/pages/user/order/order-payunder?orderId=${data.order.orderId}`)
 						} else {
 							this.$api.navigateTo(
-								`/pages/user/order/order-payment?type=payfirm&orderId=${data.order.orderId}`
+								`/pages/user/order/order-pay-list?orderId=${data.order.orderId}`
 							)
 						}
 					}
@@ -584,14 +580,10 @@ export default {
 		},
 		hanldCancelConfirm(data) {
 			//不使用余额抵扣直接跳转收银台
-			if (data.onlinePayFlag === 1) {
-				this.$api.navigateTo(
-					`/pages/user/order/order-payment?type=onlinePay&Amount=${
-						this.hanldOrderData.pendingPayments
-					}&orderId=${data.orderId}`
-				)
+			if (data.onlinePayFlag === 1) {// 只能线下
+				this.$api.navigateTo(`/pages/user/order/order-payunder?orderId=${data.orderId}`)
 			} else {
-				this.$api.navigateTo(`/pages/user/order/order-payment?type=payfirm&orderId=${data.orderId}`)
+				this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${data.orderId}`)
 			}
 		},
 		hanldConfirmFn(orderId) {

+ 347 - 0
pages/user/order/order-pay-list.vue

@@ -0,0 +1,347 @@
+<template>
+	<view class="container cashier">
+		<view class="pay-title" @click="handlePayunder">
+			<view class="content">
+				因线上支付政策调整,请对每家店铺分别进行线上付款;若需要直接转账支付订单,请点击右侧箭头查看线下转账信息。
+				<view class="content-icon"> <text class="iconfont icon-xiayibu"></text> </view>
+			</view>
+		</view>
+		<view class="pay-content">
+			<view class="pay-list" v-for="(list, index) in list" :key="index">
+				<view class="pay-list-title">{{ list.shopName }}</view>
+				<view class="pay-list-goods" v-for="(pros, prosIndex) in list.cartList" :key="prosIndex">
+					<view class="pay-list-image"> <image :src="pros.image" class="image" mode=""></image> </view>
+					<view class="pay-list-info">
+						<view class="info-title">{{ pros.name }}</view>
+						<view class="info-view" v-if="pros.unit != ''"> 规格:{{ pros.unit ? pros.unit : '' }} </view>
+						<view class="info-view" v-if="pros.productCode != '' && pros.productCode != null">
+							商品编码:{{ pros.productCode ? pros.productCode : '' }}
+						</view>
+						<view class="info-price">
+							<view class="price">¥{{ pros.price | NumFormat }}</view>
+							<view class="count"><text class="sm">X</text> {{ pros.num }}</view>
+						</view>
+					</view>
+				</view>
+				<view class="pay-list-msg">
+					<view class="list-msg" v-if="list.paidAmount > 0"
+						>已付:<text class="text">¥{{ list.paidAmount | NumFormat }}</text></view
+					>
+					<view class="list-msg" v-if="list.coupon > 0"
+						>优惠:<text class="text">¥{{ list.coupon | NumFormat }}</text></view
+					>
+				</view>
+				<view class="pay-list-btn">
+					<view class="btn" v-if="list.paystaut == 0">付款</view>
+					<view class="list-msg" v-if="list.payAmount > 0"
+						>待付:<text class="text red">¥{{ list.payAmount | NumFormat }}</text></view
+					>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			orderId: 0,
+			list: [
+				{
+					shopName: '浙江瑞琪',
+					coupon: 20000,
+					paidAmount: 2000,
+					payAmount: 1000,
+					paystaut: 0,
+					cartList: [
+						{
+							name: '韩国恩盛进口氢洁气小气泡清韩国恩盛盛进口氢洁气小气泡清气小气泡清气小气泡清',
+							unit: '10ml/盒',
+							num: 1,
+							price: 500000,
+							productCode: 'SXSASDADA',
+							image: 'https://img.caimei365.com/group1/M00/00/16/rB-lF2JOpeWARn0MAAk4fk2riSg966.png'
+						},
+						{
+							name: '韩国恩盛进口氢洁气小气泡清韩国恩盛盛进口氢洁气小气泡清气小气泡清气小气泡清',
+							unit: '10ml/盒',
+							num: 1,
+							price: 500000,
+							productCode: 'SXSASDADA',
+							image: 'https://img.caimei365.com/group1/M00/00/16/rB-lF2JOpeWARn0MAAk4fk2riSg966.png'
+						}
+					]
+				},
+				{
+					shopName: '华熙生物',
+					coupon: 20000,
+					paidAmount: 2000,
+					payAmount: 1000,
+					paystaut: 0,
+					cartList: [
+						{
+							name: '韩国恩盛进口氢洁气小气泡清韩国恩盛盛进口氢洁气小气泡清气小气泡清气小气泡清',
+							unit: '10ml/盒',
+							num: 1,
+							price: 500000,
+							productCode: 'SXSASDADA',
+							image: 'https://img.caimei365.com/group1/M00/00/16/rB-lF2JOpeWARn0MAAk4fk2riSg966.png'
+						},
+						{
+							name: '韩国恩盛进口氢洁气小气泡清韩国恩盛盛进口氢洁气小气泡清气小气泡清气小气泡清',
+							unit: '10ml/盒',
+							num: 1,
+							price: 500000,
+							productCode: 'SXSASDADA',
+							image: 'https://img.caimei365.com/group1/M00/00/16/rB-lF2JOpeWARn0MAAk4fk2riSg966.png'
+						}
+					]
+				},
+				{
+					shopName: '采美快递物流商',
+					coupon: 0,
+					paidAmount: 0,
+					payAmount: 10,
+					paystaut: 1,
+					cartList: [
+						{
+							name: '运费',
+							unit: '',
+							num: 1,
+							price: 10,
+							image:
+								'https://www.caimei365.com/uploadFile/product/2020-04-16/DV8ZXHKHIA20200416112227.jpg'
+						}
+					]
+				}
+			]
+		}
+	},
+	onLoad(option) {
+		this.initData(option)
+	},
+	filters: {
+		NumFormat(value) {
+			//处理金额
+			if (value) {
+				return Number(value).toFixed(2)
+			} else {
+				return '0.00'
+			}
+		}
+	},
+	methods: {
+		initData(e) {
+			console.log(e)
+			this.orderId = e.orderId
+			this.payOrderId = '#' + e.orderId + '#'
+			this.PayOrderCheckoutCounter(this.orderId)
+		},
+		PayOrderCheckoutCounter(orderId) {
+			this.PayService.PayOrderCheckoutCounter({ orderId: orderId })
+				.then(response => {
+					let data = response.data.order
+					this.payableAmount = data.payableAmount - data.receiptAmount //待付金额
+					this.receiptStatus = data.receiptStatus
+					this.onlinePayFlag = data.onlinePayFlag
+					//判断线上线下显示
+					if (this.optionType == 'onlinePay') {
+						this.onlinePay = 2
+					} else {
+						this.onlinePay = response.data.onlinePay
+					}
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		handlePayunder(){
+			this.$api.navigateTo(`/pages/user/order/order-payunder?orderId=${this.orderId}`)
+		}
+	},
+	onShow() {}
+}
+</script>
+
+<style lang="scss">
+page {
+	height: auto !important;
+	background-color: #f7f7f7;
+}
+.cashier {
+	width: 100%;
+}
+.pay-title {
+	width: 100%;
+	height: 182rpx;
+	box-sizing: border-box;
+	padding: 24rpx 24rpx 0 24rpx;
+	background-color: #ffffff;
+	.content {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		box-sizing: border-box;
+		padding: 20rpx 100rpx 20rpx 24rpx;
+		background: url(https://static.caimei365.com/app/img/bg/pay-bgtitle@2x.png) no-repeat;
+		background-size: cover;
+		line-height: 40rpx;
+		font-size: $font-size-26;
+		text-align: justify;
+		color: $color-system;
+		.content-icon {
+			width: 40rpx;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			right: 24rpx;
+			line-height: 158rpx;
+			.iconfont {
+				font-size: $font-size-34;
+				color: $color-system;
+				text-align: right;
+			}
+		}
+	}
+}
+.pay-content {
+	width: 100%;
+	height: auto;
+	.pay-list {
+		width: 100%;
+		height: auto;
+		padding: 30rpx 24rpx 30rpx 24rpx;
+		box-sizing: border-box;
+		background-color: #ffffff;
+		margin-bottom: 20rpx;
+		.pay-list-title {
+			width: 100%;
+			height: 42rpx;
+			line-height: 42rpx;
+			font-size: $font-size-30;
+			color: #333333;
+			margin-bottom: 20rpx;
+		}
+		.pay-list-goods {
+			width: 100%;
+			height: 180rpx;
+			margin-bottom: 30rpx;
+			.pay-list-image {
+				width: 180rpx;
+				height: 180rpx;
+				box-sizing: border-box;
+				border: 1px solid #e1e1e1;
+				border-radius: 8rpx;
+				float: left;
+				margin-right: 13rpx;
+				.image {
+					width: 100%;
+					height: 100%;
+					display: block;
+					border-radius: 8rpx;
+				}
+			}
+			.pay-list-info {
+				width: 508rpx;
+				height: 100%;
+				float: right;
+				.info-title {
+					width: 100%;
+					display: inline-block;
+					height: auto;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					word-break: break-all;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 2;
+					overflow: hidden;
+					line-height: 38rpx;
+					font-size: $font-size-28;
+					color: #333333;
+				}
+				.info-view {
+					height: 36rpx;
+					line-height: 36rpx;
+					color: #999999;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					word-break: break-all;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 2;
+					overflow: hidden;
+					font-size: $font-size-22;
+					color: #999999;
+				}
+				.info-price {
+					height: 38rpx;
+					width: 100%;
+					float: left;
+					line-height: 38rpx;
+					font-size: $font-size-26;
+					.price {
+						color: #333333;
+						float: left;
+					}
+					.count {
+						float: right;
+						color: #666666;
+						.sm{
+							font-size: $font-size-22;
+						}
+					}
+				}
+			}
+		}
+		.pay-list-msg {
+			width: 100%;
+			height: 40rpx;
+			line-height: 40rpx;
+			font-size: $font-size-26;
+			margin-bottom: 30rpx;
+			.list-msg {
+				float: right;
+				margin-left: 30rpx;
+				font-size: $font-size-26;
+				color: #333333;
+				font-weight: bold;
+				.text {
+					font-weight: normal;
+					&.red {
+						color: #f94b4b;
+					}
+				}
+			}
+		}
+		.pay-list-btn {
+			width: 100%;
+			height: 64rpx;
+			.btn {
+				width: 160rpx;
+				height: 64rpx;
+				line-height: 64rpx;
+				background: $btn-confirm;
+				font-size: $font-size-26;
+				text-align: center;
+				float: right;
+				color: #ffffff;
+				border-radius: 32rpx;
+			}
+			.list-msg {
+				float: right;
+				line-height: 64rpx;
+				margin-right: 40rpx;
+				font-size: $font-size-26;
+				color: #333333;
+				font-weight: bold;
+				.text {
+					font-weight: normal;
+					&.red {
+						color: #f94b4b;
+					}
+				}
+			}
+		}
+	}
+}
+</style>