ZM概览完善

src/views/overView/component/Timeline.vue

@@ -177,7 +177,7 @@ export default {
 /* 向上节点：线往下伸 */
 .dot.up::after {
   bottom: 100%;
-  height: 180px;
+  height: 165px;
   /* 圆环底部 → 卡片顶 */
 }
 
@@ -185,15 +185,15 @@ export default {
 .dot.down::after {
 
   top: 100%;
-  height: 180px;
+  height: 165px;
 }
 
 
 
 .card {
   position: absolute;
-  height: 180px;
-  width:320px;
+  height: 165px;
+  width: 320px;
   padding: 8px 12px;
   text-align: left;
   cursor: pointer;
@@ -208,6 +208,7 @@ export default {
   line-height: 26px;
   letter-spacing: 0px;
   text-align: justify;
+  margin-bottom: 10px;
 }
 
 .title {
@@ -218,6 +219,7 @@ export default {
   line-height: 26px;
   letter-spacing: 0px;
   text-align: justify;
+  margin-bottom: 10px;
 }
 
 .content {

src/views/overView/index.vue

@@ -52,27 +52,20 @@
 											}}
 										</div>
 									</div>
-									<img
-										class="item-card-content-title-image"
-										:src="organizationNews[organizationNewsShow].image"
-										alt=""
-									/>
+									<img class="item-card-content-title-image" :src="organizationNews[organizationNewsShow].image"
+										alt="" />
 								</div>
 								<div class="item-header-divider"></div>
 								<div class="item-card-content-text">
 									{{ organizationNews[organizationNewsShow].content }}
 								</div>
 								<div style="display: flex; margin-top: 30px">
-									<div
-										class="item-card-content-tag"
-										v-for="(tag, index) in organizationNews[organizationNewsShow].tag"
-										:key="index"
-										:style="{
+									<div class="item-card-content-tag" v-for="(tag, index) in organizationNews[organizationNewsShow].tag"
+										:key="index" :style="{
 											color: tag.textColor,
 											background: tag.color,
 											border: `1px solid ${tag.textColor}`
-										}"
-									>
+										}">
 										{{ tag.text }}
 									</div>
 								</div>
@@ -114,13 +107,10 @@
 					<div style="padding: 30px 23px; height: 400px">
 						<div class="waring-item" v-for="(item, index) in warningList" :key="index">
 							<div style="display: flex; height: 47px">
-								<div
-									class="waring-status"
-									:style="{
-										color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A',
-										backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED'
-									}"
-								>
+								<div class="waring-status" :style="{
+									color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A',
+									backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED'
+								}">
 									{{ item.status === 0 ? "特别重大" : item.status === 1 ? "重大风险" : "一般风险" }}
 								</div>
 								<div class="waring-text">
@@ -424,7 +414,7 @@ function changeOrganizationNews(type) {
 			: (organizationNewsShow.value = organizationNewsShow.value + 1);
 	}
 }
-onMounted(() => {});
+onMounted(() => { });
 </script>
 
 <style lang="scss" scoped>
@@ -450,6 +440,7 @@ onMounted(() => {});
 		box-sizing: border-box;
 		padding-left: 160px;
 		position: relative;
+
 		.header-search-box {
 			position: absolute;
 			top: 14px;
@@ -457,6 +448,7 @@ onMounted(() => {});
 			display: flex;
 			gap: 12px;
 			justify-content: flex-end;
+
 			.header-search-left {
 				width: 360px;
 				height: 36px;
@@ -464,18 +456,22 @@ onMounted(() => {});
 				border-radius: 4px;
 				background: rgba(255, 255, 255, 0.3);
 				display: flex;
+
 				.input-box {
 					width: 324px;
 				}
+
 				.icon {
 					width: 36px;
 					height: 36px;
+
 					img {
 						width: 100%;
 						height: 100%;
 					}
 				}
 			}
+
 			.header-search-right {
 				width: 36px;
 				height: 36px;
@@ -483,10 +479,12 @@ onMounted(() => {});
 				border-radius: 4px;
 				background: rgba(255, 255, 255, 0.3);
 				cursor: pointer;
+
 				.header-img-box {
 					width: 19px;
 					height: 24px;
 					margin: 4px auto;
+
 					img {
 						width: 100%;
 						height: 100%;
@@ -590,6 +588,7 @@ onMounted(() => {});
 						font-size: 14px;
 					}
 				}
+
 				.item-header-text-1 {
 					// width: 150px;
 					height: 48px;
@@ -641,7 +640,7 @@ onMounted(() => {});
 			}
 
 			.item-card-content-tag {
-				width: 74px;
+				width: 76px;
 				height: 24px;
 				padding: 1px 8px 1px 8px;
 				margin: 2px;
@@ -682,7 +681,7 @@ onMounted(() => {});
 
 					.item-card-content {
 						height: 100%;
-						width: calc(100% - 50px);
+						width: 454px;
 						padding: 20px;
 
 						.item-card-content-header {
@@ -1002,10 +1001,12 @@ onMounted(() => {});
 		}
 	}
 }
+
 :deep(.el-input__wrapper) {
 	box-shadow: none;
 	background: none;
 }
+
 :deep(.el-input__wrapper:hover) {
 	box-shadow: none !important;
 }
@@ -1013,6 +1014,7 @@ onMounted(() => {});
 :deep(.el-input__wrapper.is-focus) {
 	box-shadow: none !important;
 }
+
 :deep(.el-input__inner::placeholder) {
 	color: rgba(132, 136, 142, 1);
 	font-family: Microsoft YaHei;