2023-11-17

src/views/mortgage/yqpb2.vue

@@ -8,8 +8,22 @@
 			<div class="layout-left">
 
 				<div class="layout-left-top">
-
-					<span class="layout-left-top-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-left-top-title">
+						
+						<div class="layout-left-top-title_left">
+							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+								style="height: 25px; width: 25px;margin-right: 10px;" />
+								
+								<span >累计订货量</span>
+						</div>
+							<div class="layout-left-top-title_right"></div>
+					</div>
+					
 
 					<div class="layout-left-top-label">
 						<span>品类</span>
@@ -337,6 +351,7 @@
 	}
 </script>
 <style lang="scss" scoped>
+	
 	.yxt-containers {
 		display: flex;
 		background-color: #040C2B;
@@ -371,11 +386,36 @@
 					display: flex;
 					flex-direction: column;
 					padding: 20px;
+						position: relative;
+				
 
 					.layout-left-top-title {
-						font-size: 25px;
-						font-weight: 600;
-						font-family: sans-serif;
+					
+						display: flex;
+						flex-direction: row;
+						.layout-left-top-title_left{
+							color: #fff;
+							font-size: 25px;
+							font-weight: 600;
+							font-family: sans-serif;
+							margin-right: 10px;
+						}
+						.layout-left-top-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-left-top-label {
@@ -406,9 +446,13 @@
 							align-items: center;
 							justify-content: space-between;
 
-							.layout-left-top-list-name {}
+							.layout-left-top-list-name {
+								color: #FFD735;
+							}
 
-							.layout-left-top-list-value {}
+							.layout-left-top-list-value {
+								color: #FF9C00;
+							}
 						}
 					}
 				}
@@ -502,11 +546,19 @@
 							align-items: center;
 							justify-content: space-between;
 
-							.layout-left-bom-list-name {}
+							.layout-left-bom-list-name {
+								color: #FFD735;
+							}
 
-							.layout-left-bom-list-value {}
+							.layout-left-bom-list-value {
+								color: #FF9C00;
+							}
 
-							.layout-left-bom-list-growth {}
+							.layout-left-bom-list-growth {
+								// color: #FF352C;
+								color: #0CD947;
+							}
+							
 						}
 					}
 				}