121 lines
2.7 KiB
Vue
121 lines
2.7 KiB
Vue
<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{
|
|
scrollbar-width: none;
|
|
scrollbar-color: transparent transparent;
|
|
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(30);
|
|
}
|
|
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> |