whao 2 年 前
コミット
670d63afb7
2 ファイル変更91 行追加1 行削除
  1. 63 0
      src/assets/styles/base.scss
  2. 28 1
      src/views/forest.vue

+ 63 - 0
src/assets/styles/base.scss

@@ -52,6 +52,11 @@ $iconColor:#32e583,#f5ad1b,#da8ec5,#5f89ce,#78bfc2,#bec278,#f07779;
 $state-wcl:#ff9c00;
 $state-wyc:#1cef84;
 
+$eventStateColor-xsb:#11b57e;
+$eventStateColor-yqr:#f18425;
+$eventStateColor-ywc:#9179f1;
+
+
 //公共
 body {
   height: 100%;
@@ -1299,8 +1304,65 @@ div::-webkit-scrollbar {
 					
 				}
 				.bgt-info{
+					width: 60%;
 					display: flex;
 					flex-direction: column;
+					//事件状态
+					//新上报
+					.event-state-xsb{
+						display:flex;
+						align-items: center;
+						i{
+							color:$eventStateColor-xsb;
+							font-size: 1rem;
+							margin-left: -.5rem;
+						}
+						.event-list-state-xsb{
+							width: fit-content;
+							background-color: $eventStateColor-xsb;
+							color: $white;
+							padding: .4rem;
+							margin-left: -.5rem;
+							margin-bottom: .2rem;
+							border-radius: .2rem;
+						}
+					}
+					.event-state-yqr{
+						display:flex;
+						align-items: center;
+						i{
+							color:$eventStateColor-yqr;
+							font-size: 1rem;
+							margin-left: -.5rem;
+						}
+						.event-list-state-yqr{
+							width: fit-content;
+							background-color: $eventStateColor-yqr;
+							color: $white;
+							padding: .4rem;
+							margin-left: -.5rem;
+							margin-bottom: .2rem;
+							border-radius: .2rem;
+						}
+					}
+					.event-state-ywc{
+						display:flex;
+						align-items: center;
+						i{
+							color:$eventStateColor-ywc;
+							font-size: 1rem;
+							margin-left: -.5rem;
+						}
+						.event-list-state-ywc{
+							width: fit-content;
+							background-color: $eventStateColor-ywc;
+							color: $white;
+							padding: .4rem;
+							margin-left: -.5rem;
+							margin-bottom: .2rem;
+							border-radius: .2rem;
+						}
+					}
 					
 					.bgt-info-name{
 						color: $inBlue;
@@ -1315,6 +1377,7 @@ div::-webkit-scrollbar {
 							}
 						}
 					}
+					
 				}
 				.bgt-img{
 					img{

+ 28 - 1
src/views/forest.vue

@@ -191,10 +191,28 @@
 										<img src="../assets/images/integrated/event-img-sub.png" />
 									</div>
 									<div class="bgt-info">
+									    <div class="event-state-xsb">
+										  <i class="el-icon-caret-left"></i>
+										  <div class="event-list-state-xsb">
+											新上报
+										  </div>
+										</div>
+										<!-- <div class="event-state-yqr">
+										  <i class="el-icon-caret-left"></i>
+										  <div class="event-list-state-yqr">
+											已确认
+										  </div>
+										</div> -->
+										<!-- <div class="event-state-ywc">
+										  <i class="el-icon-caret-left"></i>
+										  <div class="event-list-state-ywc">
+											已完成
+										  </div>
+										</div> -->
 										<div class="bgt-info-name">王某某</div>
 										<div class="bgt-info-place">
 											<ul>
-												<li>2022-08-21 08:552022-08-21 08:552022-08-21 08:552022-08-21 08:552022-08-21 08:55</li>
+												<li>2022-08-21 08:55</li>
 											</ul>
 										</div>
 									</div>
@@ -204,6 +222,7 @@
 					</div>
 				</div>
 				<div class="right-item2">
+					<!-- 事件分类 -->
 					<div class="forthis">
 						<dv-border-box-13>
 							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
@@ -214,6 +233,10 @@
 					<div class="forthis">
 						<dv-border-box-13>
 							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
+							<div class="this-title">
+								<span>事件分类</span>
+								<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
+							</div>
 							<div class="i-list-con small-bottom-margin h-25">
 							</div>
 						</dv-border-box-13>
@@ -221,6 +244,10 @@
 					<div class="forthis">
 						<dv-border-box-13>
 							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
+							<div class="this-title">
+								<span>上报排行</span>
+								<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
+							</div>
 							<div class="i-list-con small-bottom-margin h-25">
 							</div>
 						</dv-border-box-13>