|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div ref="workbench" class="index-workbench">
|
|
|
<div >
|
|
|
- <div class="brief-box">
|
|
|
+ <div class="brief-box-top">
|
|
|
<div class="brief-title">
|
|
|
<span class="icon wk wk-briefing" />
|
|
|
<span class="text">数据驾驶舱(今日实时数据)</span>
|
|
|
@@ -178,7 +178,6 @@
|
|
|
v-model="timeArr1"
|
|
|
style="line-height: 30px;width: 250px;"
|
|
|
type="daterange"
|
|
|
- size="small"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
@@ -214,7 +213,6 @@
|
|
|
v-model="timeArr2"
|
|
|
style="line-height: 30px;width: 250px;"
|
|
|
type="daterange"
|
|
|
- size="small"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
@@ -250,7 +248,6 @@
|
|
|
v-model="timeArr3"
|
|
|
style="line-height: 30px;width: 250px;"
|
|
|
type="daterange"
|
|
|
- size="small"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
@@ -275,7 +272,6 @@
|
|
|
v-model="timeArr4"
|
|
|
style="line-height: 30px;width: 250px;"
|
|
|
type="daterange"
|
|
|
- size="small"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
@@ -816,6 +812,7 @@ export default {
|
|
|
height: 100%;
|
|
|
padding: 15px 20px 20px;
|
|
|
position: relative;
|
|
|
+ background-color: #f0f2f5;
|
|
|
|
|
|
&__body {
|
|
|
height: 100%;
|
|
|
@@ -864,111 +861,119 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .brief-box-top {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
|
|
|
.brief-box {
|
|
|
width: 100%;
|
|
|
background-color: white;
|
|
|
- border: 1px solid #e6e6e6;
|
|
|
border-radius: 3px;
|
|
|
- margin-top: 10px;
|
|
|
- .brief-title {
|
|
|
- background-color: #ddd;
|
|
|
- padding: 0px 10px 0;
|
|
|
- height: 35px;
|
|
|
- line-height: 35px;
|
|
|
- .icon {
|
|
|
- color: #50CF9E;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- .text {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .brief-title {
|
|
|
+ background-color: white;
|
|
|
+ padding: 16px 24px;
|
|
|
+ border-bottom: 1px solid rgba(0,0,0,.06);
|
|
|
+ border-radius: 3px 3px 0 0;
|
|
|
+ .icon {
|
|
|
+ color: #50CF9E;
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
|
- .brief {
|
|
|
- width: 100%;
|
|
|
- padding: 10px 10px 10px 10px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- .brief-item {
|
|
|
- cursor: pointer;
|
|
|
- width: calc(25% - 20px);
|
|
|
- height: 125px;
|
|
|
- box-shadow: 0 0 16px 0 rgba(0,0,0,0.08);
|
|
|
- border-radius: 3px;
|
|
|
- padding: 15px 0px;
|
|
|
- margin: 10px;
|
|
|
- .brief-item__body {
|
|
|
- flex: 1;
|
|
|
+ .text {
|
|
|
+ color: #333;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .brief {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ border-radius: 0 0 3px 3px;
|
|
|
+ .brief-item {
|
|
|
+ cursor: pointer;
|
|
|
+ width: calc(25% - 20px);
|
|
|
+ height: 125px;
|
|
|
+ box-shadow: 0 0 16px 0 rgba(0,0,0,0.08);
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 15px 0px;
|
|
|
+ margin: 10px;
|
|
|
+ .brief-item__body {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ .icon-box {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-left: 15px;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ color: white;
|
|
|
+ font-size: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
overflow: hidden;
|
|
|
- .icon-box {
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- text-align: center;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 10px;
|
|
|
- margin-left: 15px;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- .icon {
|
|
|
- color: white;
|
|
|
- font-size: 19px;
|
|
|
- }
|
|
|
+ padding-left: 10px;
|
|
|
+ .title {
|
|
|
+ font-size: 13px;
|
|
|
}
|
|
|
- .info {
|
|
|
+ .number {
|
|
|
+ font-size: 23px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1;
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-right: 5px;
|
|
|
+ // white-space: nowrap;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
- padding-left: 10px;
|
|
|
- .title {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
- .number {
|
|
|
- font-size: 23px;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 1;
|
|
|
- margin-top: 8px;
|
|
|
- margin-right: 5px;
|
|
|
- // white-space: nowrap;
|
|
|
- // text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
- .brief-item__others {
|
|
|
- // position: relative;
|
|
|
- margin-top: 15px;
|
|
|
- width: 100px;
|
|
|
- // text-align: center;
|
|
|
- padding: 0 3px;
|
|
|
- overflow: hidden;
|
|
|
+ }
|
|
|
+ .brief-item__others {
|
|
|
+ // position: relative;
|
|
|
+ margin-top: 15px;
|
|
|
+ width: 100px;
|
|
|
+ // text-align: center;
|
|
|
+ padding: 0 3px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 12px;
|
|
|
+ // margin-left: -5px;
|
|
|
+ }
|
|
|
+ .rate {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000;
|
|
|
+ margin-top: 8px;
|
|
|
|
|
|
- .text {
|
|
|
- font-size: 12px;
|
|
|
- // margin-left: -5px;
|
|
|
- }
|
|
|
- .rate {
|
|
|
+ .rate__icon {
|
|
|
font-size: 14px;
|
|
|
- color: #000;
|
|
|
- margin-top: 8px;
|
|
|
-
|
|
|
- .rate__icon {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- &.bottom {
|
|
|
- color: #2BBF24;
|
|
|
- }
|
|
|
- &.top {
|
|
|
- color: #F24B4B;
|
|
|
- }
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &.bottom {
|
|
|
+ color: #2BBF24;
|
|
|
+ }
|
|
|
+ &.top {
|
|
|
+ color: #F24B4B;
|
|
|
}
|
|
|
}
|
|
|
- &:hover {
|
|
|
- box-shadow: 0 0 16px 0 rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 0 16px 0 rgba(0,0,0,0.2);
|
|
|
}
|
|
|
}
|
|
|
}
|
hwb0