From daf1fda45af6058a7a1f9c06560354365e7957f0 Mon Sep 17 00:00:00 2001
From: guoxing <1369478551@qq.com>
Date: Fri, 17 Nov 2023 16:53:39 +0800
Subject: [PATCH] 111

---
 src/views/mortgage/yqpb.vue | 193 ++++++++++++++++++++++++++++++------
 1 file changed, 165 insertions(+), 28 deletions(-)

diff --git a/src/views/mortgage/yqpb.vue b/src/views/mortgage/yqpb.vue
index a7f0b46..6c49715 100644
--- a/src/views/mortgage/yqpb.vue
+++ b/src/views/mortgage/yqpb.vue
@@ -87,7 +87,7 @@
 					<div class="layout-left-bom-title">
 
 						<div class="layout-left-bom-title_left">
-							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+							<svg-icon slot="prefix" icon-class="jianguan" class="el-input__icon"
 								style="height: 25px; width: 25px;margin-right: 10px;" />
 
 							<span>本月订货量</span>
@@ -131,7 +131,7 @@
 					<div class="layout-contre-top-title">
 
 						<div class="layout-contre-top-title_left">
-							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+							<svg-icon slot="prefix" icon-class="home" class="el-input__icon"
 								style="height: 25px; width: 25px;margin-right: 10px;" />
 
 							<span>现场视频</span>
@@ -170,7 +170,7 @@
 					<div class="layout-contre-bom-title">
 					
 						<div class="layout-contre-bom-title_left">
-							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+							<svg-icon slot="prefix" icon-class="data" class="el-input__icon"
 								style="height: 25px; width: 25px;margin-right: 10px;" />
 					
 							<span>餐饮企业定货量</span>
@@ -205,7 +205,22 @@
 
 			<div class="layout-right">
 				<div class="layout-right-top">
-					<span>仓库平面图</span>
+					<div class="box-border border-tl" />
+					<div class="box-border border-tr" />
+					<div class="box-border border-bl" />
+					<div class="box-border border-br" />
+					
+					<div class="layout-right-top-title">
+					
+						<div class="layout-right-top-title_left">
+							<svg-icon slot="prefix" icon-class="home" class="el-input__icon"
+								style="height: 25px; width: 25px;margin-right: 10px;" />
+					
+							<span>仓库平面图</span>
+						</div>
+						<div class="layout-right-top-title_right"></div>
+					</div>
+					
 					<img src="@/assets/mprtgage/yqpb-icon.png" />
 
 					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn1" @click="cameraClock(0)" />
@@ -224,8 +239,23 @@
 				</div>
 
 				<div class="layout-right-contre">
+					
+					<div class="box-border border-tl" />
+					<div class="box-border border-tr" />
+					<div class="box-border border-bl" />
+					<div class="box-border border-br" />
+					
+					<div class="layout-right-contre-title">
+					
+						<div class="layout-right-contre-title_left">
+							<svg-icon slot="prefix" icon-class="alarm" class="el-input__icon"
+								style="height: 25px; width: 25px;margin-right: 10px;" />
+					
+							<span>本月目标数</span>
+						</div>
+						<div class="layout-right-contre-title_right"></div>
+					</div>
 
-					<span class="layout-right-contre-title">本月目标数</span>
 
 					<div class="layout-right-contre-label">
 						<span>品类</span>
@@ -237,16 +267,30 @@
 
 						<div class="layout-right-contre-list-item">
 							<span class="layout-right-contre-list-name">{{ item.typeName }}</span>
-							<span class="layout-right-contre-list-value">{{ item.targetData }}</span>
-							<span class="layout-right-contre-list-value">{{ item.targetDataRate }}</span>
+							<span class="layout-right-contre-list-num">{{ item.targetData }}</span>
+							<span class="layout-right-contre-list-rate">{{ item.targetDataRate }}</span>
 						</div>
 
 					</div>
 				</div>
 
 				<div class="layout-right-bom">
-
-					<span class="layout-right-bom-title">支行订单量完成情况</span>
+					
+					<div class="box-border border-tl" />
+					<div class="box-border border-tr" />
+					<div class="box-border border-bl" />
+					<div class="box-border border-br" />
+					
+					<div class="layout-right-bom-title">
+					
+						<div class="layout-right-bom-title_left">
+							<svg-icon slot="prefix" icon-class="lines" class="el-input__icon"
+								style="height: 25px; width: 25px;margin-right: 10px;" />
+					
+							<span>支行订单量完成情况</span>
+						</div>
+						<div class="layout-right-bom-title_right"></div>
+					</div>
 
 					<div class="layout-right-bom-label">
 						<span>排名</span>
@@ -827,11 +871,25 @@
 							align-items: center;
 							justify-content: space-between;
 
-							.layout-contre-bom-list-name {}
+							.layout-contre-bom-list-name {
+								color: #FFD735;
+							}
 
-							.layout-contre-bom-list-value {}
+							.layout-contre-bom-list-value {
+								color: #FF9C00;
+							}
+							
+							.layout-contre-bom-list-monthPre{
+								color: #91CC75;
+							}
 
-							.layout-contre-bom-list-growth {}
+							.layout-contre-bom-list-growth {
+								color: #0CD947;
+							}
+							
+							.layout-contre-bom-list-growth2 {
+								color: #FF352C;
+							}
 						}
 					}
 				}
@@ -845,20 +903,43 @@
 				.layout-right-top {
 					background-color: #031249;
 					padding: 20px;
-					height: 230px;
+					height: 245px;
 					position: relative;
 
-					span {
-						font-size: 25px;
-						font-weight: 600;
-						font-family: sans-serif;
-					}
-
 					img {
 						margin-top: 10px;
 						width: 100%;
 						height: 80%;
 					}
+					
+					.layout-right-top-title{
+						display: flex;
+						flex-direction: row;
+						.layout-right-top-title_left {
+							color: #fff;
+							font-size: 25px;
+							font-weight: 600;
+							font-family: sans-serif;
+							margin-right: 10px;
+						}
+						
+						.layout-right-top-title_right {
+							flex: 1;
+							position: relative;
+							height: 100%;
+						
+							&::after {
+								content: "";
+								position: absolute;
+								bottom: 13px;
+								left: 0px;
+								top: 20px;
+								width: 100%;
+								height: 100%;
+								border-bottom: solid 4px #dadada;
+							}
+						}
+					}
 
 					.layout-right-top_btn1 {
 						//二通道
@@ -1025,11 +1106,36 @@
 					display: flex;
 					flex-direction: column;
 					padding: 20px;
+					position: relative;
 
 					.layout-right-contre-title {
-						font-size: 25px;
-						font-weight: 600;
-						font-family: sans-serif;
+						display: flex;
+						flex-direction: row;
+						
+						.layout-right-contre-title_left {
+							color: #fff;
+							font-size: 25px;
+							font-weight: 600;
+							font-family: sans-serif;
+							margin-right: 10px;
+						}
+						
+						.layout-right-contre-title_right {
+							flex: 1;
+							position: relative;
+							height: 100%;
+						
+							&::after {
+								content: "";
+								position: absolute;
+								bottom: 13px;
+								left: 0px;
+								top: 0px;
+								width: 100%;
+								height: 100%;
+								border-bottom: solid 4px #dadada;
+							}
+						}
 					}
 
 					.layout-right-contre-label {
@@ -1060,11 +1166,17 @@
 							align-items: center;
 							justify-content: space-between;
 
-							.layout-right-contre-list-name {}
+							.layout-right-contre-list-name {
+								color: #FFD735;
+							}
 
-							.layout-right-contre-list-value {}
+							.layout-right-contre-list-num {
+								color: #FF9C00;
+							}
 
-							.layout-right-contre-list-growth {}
+							.layout-right-contre-list-rate {
+								color: #0CD947;
+							}
 						}
 					}
 
@@ -1076,11 +1188,36 @@
 					display: flex;
 					flex-direction: column;
 					padding: 20px;
+					position: relative;
 
 					.layout-right-bom-title {
-						font-size: 25px;
-						font-weight: 600;
-						font-family: sans-serif;
+						display: flex;
+						flex-direction: row;
+						
+						.layout-right-bom-title_left {
+							color: #fff;
+							font-size: 25px;
+							font-weight: 600;
+							font-family: sans-serif;
+							margin-right: 10px;
+						}
+						
+						.layout-right-bom-title_right {
+							flex: 1;
+							position: relative;
+							height: 100%;
+						
+							&::after {
+								content: "";
+								position: absolute;
+								bottom: 13px;
+								left: 0px;
+								top: 0px;
+								width: 100%;
+								height: 100%;
+								border-bottom: solid 4px #dadada;
+							}
+						}
 					}
 
 					.layout-right-bom-label {