feat 工单消息

src/views/workOrder/components/box-1.vue

@@ -0,0 +1,119 @@
+<template>
+	<div class="work-box-1">
+		<!-- 最新工单 -->
+		<div class="header">
+		  <div class="title"> <span>最新工单</span> </div>
+		</div>
+		<!-- 列表 -->
+		<div class="list">
+			<div class="li" v-for="item in 40">
+				<span class="label label1">普通</span>
+				<p>这是一条工单信息这是一条工单信息这是一条工单信息这是一条工单信息这是一条</p>
+				<span class="time">2024-12.16 23:58</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	.work-box-1{
+		width:vw(815);
+		height:vh(975);
+		margin-top:vh(100);
+		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
+		border-radius: 0px 0px 0px 0px;
+		position:relative;
+		z-index:99;
+		padding:0 vw(20);
+		.list{
+			height:vh(895);
+			overflow: auto;
+			.li:nth-child(odd){
+				background: rgba(3,78,153,0.3);
+				
+			}
+			.li:nth-child(even){
+				background-color: transparent;
+			}
+			.li{
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+				padding:vh(8) vh(10);
+				.label{
+					width: vw(60);
+					height: vh(24);
+					line-height:vh(24);
+					color:#fff;
+					border-radius: 2px 2px 2px 2px;
+					font-size: vw(14);
+					text-align: center;
+					display: inline-block;
+					margin-right: vw(10);
+				}
+				.label1{
+					background: #2380FB;
+				}
+				.label2{
+					background: #FEAE00;
+				}
+				.label3{
+					background: #D9011B;
+				}
+				.time{
+					font-weight: 400;
+					font-size: vw(12);
+					color: rgba(255,255,255,0.6);
+					line-height: 14px;
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					margin-left:vw(50);
+				}
+				p{
+					font-weight: 400;
+					font-size: vw(15);
+					color: #FFFFFF;
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					flex: 1;
+					 /*1. 先强制一行内显示文本*/
+					white-space: nowrap;
+					  /*2. 超出的部分隐藏*/
+					overflow: hidden;
+					  /*3. 文字用省略号替代超出的部分*/
+					text-overflow: ellipsis;
+				}
+			}
+		}
+		.header {
+		  position: relative;
+		  margin:vh(20);
+		  .title {
+		    margin: vh(5) auto;
+		    width: vw(468);
+		    height: vh(32);
+		    font-weight: 800;
+		    font-size: vw(16);
+		    color: #fff;
+		    display: flex;
+		    align-items: center;
+		    justify-content: center;
+		    background-image: url('@/assets/images/title-4.png');
+		    background-size: 100% 100%;
+			span{
+				font-weight: 800;
+				color: transparent;
+				-webkit-background-clip: text;
+				background-clip: text;
+				-webkit-text-fill-color: transparent;
+				background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
+			}
+		  }
+	  }
+	}
+</style>