2026-01-25 16:02:00 +08:00
|
|
|
@import '~@/styles/variables.scss';
|
|
|
|
|
|
|
|
|
|
.twin-situation {
|
|
|
|
|
//width: 100%;
|
|
|
|
|
//height: 100%;
|
|
|
|
|
//font-size: 40px;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.card-position {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 85px;
|
|
|
|
|
left: 50px;
|
|
|
|
|
height: calc(100vh - 248px);
|
|
|
|
|
transition: 0.2s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-position2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 85px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: calc(100vh - 218px);
|
|
|
|
|
transition: 0.2s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-info-wrap {
|
|
|
|
|
width: 430px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 60px;
|
|
|
|
|
left: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-list {
|
|
|
|
|
width: 410px;
|
|
|
|
|
top: 95px;
|
|
|
|
|
left: 50px;
|
|
|
|
|
height: calc(100vh - 70px);
|
|
|
|
|
transition: 0.2s ease-in-out;
|
|
|
|
|
|
|
|
|
|
.task-list__content {
|
|
|
|
|
// height: calc(50vh - 98px);
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding-right: 5px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-item {
|
|
|
|
|
height: 40px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 8px 0;
|
|
|
|
|
|
|
|
|
|
.left-part {
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
background: rgba(51, 51, 51, 0.6);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.task-progress-bar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: #43522c;
|
|
|
|
|
//z-index: -1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-info {
|
|
|
|
|
z-index: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
// width: 150px;
|
|
|
|
|
|
|
|
|
|
.execute-type-icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
border: 1px solid $--color-text-1;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-0 {
|
|
|
|
|
border: 1px solid #a45d35;
|
|
|
|
|
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
|
|
|
|
0 0 10px rgba(164, 93, 53, 0.6),
|
|
|
|
|
0 0 20px rgba(164, 93, 53, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-1 {
|
|
|
|
|
border: 1px solid #39cf0b;
|
|
|
|
|
box-shadow: 0 0 5px rgba(17, 172, 38, 0.8),
|
|
|
|
|
0 0 10px rgba(17, 172, 38, 0.6),
|
|
|
|
|
0 0 20px rgba(17, 172, 38, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-2 {
|
|
|
|
|
border: 1px solid $--color-text-1;
|
|
|
|
|
box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
|
|
|
|
|
0 0 6px rgba(250, 250, 250, 0.6),
|
|
|
|
|
0 0 14px rgba(250, 250, 250, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-3 {
|
|
|
|
|
border: 1px solid #a45d35;
|
|
|
|
|
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
|
|
|
|
0 0 10px rgba(164, 93, 53, 0.6),
|
|
|
|
|
0 0 20px rgba(164, 93, 53, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-4 {
|
|
|
|
|
border: 1px solid #893654;
|
|
|
|
|
box-shadow: 0 0 5px rgba(137, 54, 84, 0.8),
|
|
|
|
|
0 0 10px rgba(137, 54, 84, 0.6),
|
|
|
|
|
0 0 20px rgba(137, 54, 84, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-5 {
|
|
|
|
|
border: 1px solid #681c1f;
|
|
|
|
|
box-shadow: 0 0 5px rgba(104, 28, 31, 0.8),
|
|
|
|
|
0 0 10px rgba(104, 28, 31, 0.6),
|
|
|
|
|
0 0 20px rgba(104, 28, 31, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-execute {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
width: 90px;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-info {
|
|
|
|
|
z-index: 1;
|
|
|
|
|
width: 50px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #07e5e5;
|
|
|
|
|
margin-right: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>span {
|
|
|
|
|
color: $--color-orange;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-name {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-finish {
|
|
|
|
|
color: $--color-green;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-time {
|
|
|
|
|
z-index: 1;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-part {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
2026-01-28 13:56:23 +08:00
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 0 8px;
|
2026-01-25 16:02:00 +08:00
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin: 2px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-task {
|
|
|
|
|
color: #ffff00;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.delete-task {
|
|
|
|
|
color: $--color-red;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-list__large {
|
|
|
|
|
height: calc(100vh - 50px);
|
|
|
|
|
left: $--icon-mode-larger-card-left;
|
|
|
|
|
bottom: 5px;
|
|
|
|
|
transition: 0.2s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.weather-info-wrap {
|
|
|
|
|
width: 480px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
// top: 85px;
|
|
|
|
|
top: 95px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
height: 240px; // 240
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.weather-info {
|
|
|
|
|
width: 460px;
|
|
|
|
|
height: 240px; // 240
|
|
|
|
|
transition: 0.2s ease-in-out;
|
|
|
|
|
|
|
|
|
|
::v-deep .dt-card__content {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.weather-info__content {
|
|
|
|
|
position: relative;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 4px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.base-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
|
|
|
|
|
.base-warning {
|
|
|
|
|
flex: 1;
|
|
|
|
|
color: $--color-orange;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.base-des {
|
|
|
|
|
color: $--color-green;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
|
|
|
|
>span {
|
|
|
|
|
color: $--color-text-2;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.visibility-chart-title {
|
|
|
|
|
color: $--color-text-3;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.visibility-chart {
|
|
|
|
|
height: 50px;
|
|
|
|
|
//background: #02a7f0;
|
|
|
|
|
padding: 0 6px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hour-forecast {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
|
|
|
|
|
.hour-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
>div {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wind-forecast {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
|
|
|
|
|
.wind-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
>div {
|
|
|
|
|
color: $--color-text-3;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>div:nth-child(2) {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.weather-info__content2 {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
|
|
|
|
|
.base-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 4px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
>div {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
>span {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>span:nth-of-type(2) {}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.week-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 4px;
|
|
|
|
|
|
|
|
|
|
.week-info-item {
|
|
|
|
|
>div {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 6px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.weather-info__large {
|
|
|
|
|
top: $--icon-mode-larger-card-top;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
.radar-info-wrap {
|
|
|
|
|
width: 480px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
// top: 330px;
|
|
|
|
|
top: 350px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
height: 280px;
|
|
|
|
|
}
|
|
|
|
|
.radar-info {
|
|
|
|
|
width: 460px;
|
|
|
|
|
//position: fixed;
|
|
|
|
|
//top: 330px;
|
|
|
|
|
//right: 10px;
|
|
|
|
|
height: 280px;
|
|
|
|
|
transition: 0.2s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
.radar-info__large {
|
|
|
|
|
top: 350px;
|
|
|
|
|
}
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.detail-info-wrap {
|
|
|
|
|
width: 480px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 5px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
height: calc(100vh - 620px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.detail-info {
|
|
|
|
|
width: 460px;
|
|
|
|
|
//position: fixed;
|
|
|
|
|
//bottom: 5px;
|
|
|
|
|
//right: 10px;
|
|
|
|
|
height: calc(100vh - 620px);
|
|
|
|
|
transition: 0.2s ease-in-out;
|
|
|
|
|
|
|
|
|
|
.detail-info__content {
|
|
|
|
|
padding-right: 8px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: calc(100vh - 680px);
|
|
|
|
|
|
|
|
|
|
.base-info {
|
|
|
|
|
background: #0d3448;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding-right: 4px;
|
|
|
|
|
|
|
|
|
|
>.uav-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 40px;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
>.icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
margin: 0 6px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid $--color-text-1;
|
|
|
|
|
box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
|
|
|
|
|
0 0 6px rgba(250, 250, 250, 0.6),
|
|
|
|
|
0 0 14px rgba(250, 250, 250, 0.3);
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.device-name {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.battery {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
width: 70px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-normal {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-weak {
|
|
|
|
|
color: #f59a23;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #f59a23;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-danger {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fly-height {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
width: 70px;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-location {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-lock {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #ffff00;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.people-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 40px;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
>.icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
margin: 0 6px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #a45d35;
|
|
|
|
|
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
|
|
|
|
0 0 10px rgba(164, 93, 53, 0.6),
|
|
|
|
|
0 0 20px rgba(164, 93, 53, 0.3);
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.people-name {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 180px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.battery {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
width: 70px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-normal {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-weak {
|
|
|
|
|
color: #f59a23;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #f59a23;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-danger {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-location {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.send-message,
|
|
|
|
|
.voice-video {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #ffff00;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.rescue-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 40px;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
>.icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
margin: 0 6px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #893654;
|
|
|
|
|
box-shadow: 0 0 5px rgba(137, 54, 84, 0.8),
|
|
|
|
|
0 0 10px rgba(137, 54, 84, 0.6),
|
|
|
|
|
0 0 20px rgba(137, 54, 84, 0.3);
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.car-name {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.run-distance {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
width: 70px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-normal {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-weak {
|
|
|
|
|
color: #f59a23;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #f59a23;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-danger {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.car-oil {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
width: 70px;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-location {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.fire-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 40px;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
>.icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
margin: 0 6px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #681c1f;
|
|
|
|
|
box-shadow: 0 0 5px rgba(104, 28, 31, 0.8),
|
|
|
|
|
0 0 10px rgba(104, 28, 31, 0.6),
|
|
|
|
|
0 0 20px rgba(104, 28, 31, 0.3);
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.car-name {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.run-distance {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
width: 70px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-normal {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-weak {
|
|
|
|
|
color: #f59a23;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #f59a23;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-danger {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.car-oil {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
width: 70px;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #18da2e;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-location {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: #d9001b;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.send-message,
|
|
|
|
|
.voice-video {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #ffff00;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.device-status {
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: #95f204;
|
|
|
|
|
|
|
|
|
|
&__normal {
|
|
|
|
|
background: #95f204;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__weak {
|
|
|
|
|
background: #f59a23;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__disconnect {
|
|
|
|
|
background: #d9001b;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.team-header {
|
|
|
|
|
background: rgb(13, 52, 72);
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 40px;
|
|
|
|
|
padding: 0 5px;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
>.icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
margin: 0 6px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #a45d35;
|
|
|
|
|
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
|
|
|
|
0 0 10px rgba(164, 93, 53, 0.6),
|
|
|
|
|
0 0 20px rgba(164, 93, 53, 0.3);
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.team-name {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 40px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.team-command {
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: $--color-primary;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>.team-item {
|
|
|
|
|
>div {
|
|
|
|
|
background: rgb(13, 52, 72);
|
|
|
|
|
margin: 5px 0;
|
|
|
|
|
padding: 0 5px 0 15px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uav-item .device-name {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.people-item .people-name {
|
|
|
|
|
width: 170px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rescue-item .car-name {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fire-item .car-name {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.target-task-list {
|
|
|
|
|
max-height: 100px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.target-task-item {
|
|
|
|
|
height: 40px;
|
|
|
|
|
margin: 5px 0;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
background: #333333;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.task-progress-bar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: #43522c;
|
|
|
|
|
//z-index: -1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-info {
|
|
|
|
|
z-index: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
|
|
|
|
.execute-type-icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
border: 1px solid $--color-text-1;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-0 {
|
|
|
|
|
border: 1px solid #a45d35;
|
|
|
|
|
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
|
|
|
|
0 0 10px rgba(164, 93, 53, 0.6),
|
|
|
|
|
0 0 20px rgba(164, 93, 53, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-1 {
|
|
|
|
|
border: 1px solid #39cf0b;
|
|
|
|
|
box-shadow: 0 0 5px rgba(17, 172, 38, 0.8),
|
|
|
|
|
0 0 10px rgba(17, 172, 38, 0.6),
|
|
|
|
|
0 0 20px rgba(17, 172, 38, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-2 {
|
|
|
|
|
border: 1px solid $--color-text-1;
|
|
|
|
|
box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
|
|
|
|
|
0 0 6px rgba(250, 250, 250, 0.6),
|
|
|
|
|
0 0 14px rgba(250, 250, 250, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-3 {
|
|
|
|
|
border: 1px solid #a45d35;
|
|
|
|
|
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
|
|
|
|
0 0 10px rgba(164, 93, 53, 0.6),
|
|
|
|
|
0 0 20px rgba(164, 93, 53, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-4 {
|
|
|
|
|
border: 1px solid #893654;
|
|
|
|
|
box-shadow: 0 0 5px rgba(137, 54, 84, 0.8),
|
|
|
|
|
0 0 10px rgba(137, 54, 84, 0.6),
|
|
|
|
|
0 0 20px rgba(137, 54, 84, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.execute-state-5 {
|
|
|
|
|
border: 1px solid #681c1f;
|
|
|
|
|
box-shadow: 0 0 5px rgba(104, 28, 31, 0.8),
|
|
|
|
|
0 0 10px rgba(104, 28, 31, 0.6),
|
|
|
|
|
0 0 20px rgba(104, 28, 31, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-execute {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
width: 125px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-info {
|
|
|
|
|
z-index: 1;
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #07e5e5;
|
|
|
|
|
margin-right: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>span {
|
|
|
|
|
color: $--color-orange;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-name {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-finish {
|
|
|
|
|
color: $--color-green;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-time {
|
|
|
|
|
z-index: 1;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.picture-list {
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
.picture-list-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 5px 5px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
|
|
|
|
.picture-item-image {
|
|
|
|
|
width: 40px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.el-image {
|
|
|
|
|
flex: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.picture-item-info {
|
|
|
|
|
flex: 1;
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
|
|
|
|
|
>div {
|
|
|
|
|
color: $--color-text-2;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.picture-command {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin: 0 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.detail-info__large {
|
|
|
|
|
height: calc(50vh - 72px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.detail-uav {
|
|
|
|
|
width: 460px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 90px;
|
|
|
|
|
//bottom: 5px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
//right: 510px;
|
|
|
|
|
height: calc(100vh - 90px);
|
|
|
|
|
//height: calc(100vh - 620px);
|
|
|
|
|
transition: 0.2s ease-in-out;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
|
|
.detail-uav__content {
|
|
|
|
|
padding-right: 8px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.image-info {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 240px;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-info {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 20px;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
|
|
>div {
|
|
|
|
|
margin: 5px 0;
|
|
|
|
|
|
|
|
|
|
>span {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #1af32a;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uav-status-online {
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: #1af32a;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uav-status-offline {
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: #7c0a06;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.target-task-item {
|
|
|
|
|
height: 40px;
|
|
|
|
|
margin: 8px 0;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
background: #333333;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.task-progress-bar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: #43522c;
|
|
|
|
|
//z-index: -1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-info {
|
|
|
|
|
z-index: 1;
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #07e5e5;
|
|
|
|
|
margin-right: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>span {
|
|
|
|
|
color: $--color-orange;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-name {
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-finish {
|
|
|
|
|
color: $--color-green;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-time {
|
|
|
|
|
z-index: 1;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uav-span-wrap {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 3px 0;
|
|
|
|
|
|
|
|
|
|
>span:nth-of-type(1) {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 84px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>span:nth-of-type(2) {
|
|
|
|
|
color: $--color-text-0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wave-chart {
|
|
|
|
|
height: 200px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-image {
|
|
|
|
|
.picture-list-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 5px 5px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
|
|
|
|
.picture-item-image {
|
|
|
|
|
width: 40px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.el-image {
|
|
|
|
|
flex: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.picture-item-info {
|
|
|
|
|
flex: 1;
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
|
|
|
|
|
>div {
|
|
|
|
|
color: $--color-text-2;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.picture-command {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
>i {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: $--color-text-1;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin: 0 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info-bar-2 {
|
|
|
|
|
right: 476px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.icon-mode-large--left {
|
|
|
|
|
height: calc(45vh - 20px);
|
|
|
|
|
left: $--icon-mode-larger-card-left;
|
|
|
|
|
top: $--icon-mode-larger-card-top;
|
|
|
|
|
transition: 0.2s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task-line-detail {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50vh;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
