[update] 井口数据监控

src/assets/less/common.less

@@ -84,10 +84,29 @@
 }
 
 /* 表格样式begin */
-.ant-table-thead > tr > th {
-  background: linear-gradient( 180deg, rgba(0,148,255,0.1) 0%, rgba(0,148,255,0.2) 100%) !important;
+.ant-table .ant-table-header,
+.ant-table .ant-table-thead {
+  background: @component-background linear-gradient(180deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0.2) 100%) no-repeat;
+  background-size: 100% 40px;
 }
-/* 表格样式nd */
+.ant-table.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
+.ant-table .ant-table-tbody {
+  background: @component-background linear-gradient(180deg, #001B36 0%, rgba(0,148,255,0.2) 100%);
+}
+.ant-table .ant-table-thead > tr > th,
+.ant-table .ant-table-fixed-left table,
+.ant-table .ant-table-fixed-right table,
+.ant-table .ant-table-fixed .ant-table-thead {
+  background: transparent;
+}
+.ant-table .ant-table-placeholder {
+  background: transparent;
+}
+.ant-table .ant-table-header table {
+  border-radius: 0;
+}
+.ant-table td { white-space: nowrap; }
+/* 表格样式end */
 
 /* 复选框begin */
 .ant-checkbox-inner,
@@ -96,6 +115,16 @@
 }
 /* 复选框end */
 
+/* 搜索框begin */
+.input-search-suffix {
+  font-size: 0;
+  cursor: pointer;
+}
+.input-search-suffix > img {
+  width: 14px;
+}
+/* 输入框end */
+
 /* 下拉框begin */
 .ant-select-selection--multiple .ant-select-selection__choice {
   color: @text-color;
@@ -115,6 +144,27 @@
   background-color: @primary-2;
   color: @text-color;
 }
+// 箭头
+.ant-select-arrow {
+  display: none;
+  position: relative;
+}
+.ant-select-arrow::after {
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  content: '';
+  display: block;
+  position: absolute;
+  background: url("~@/assets/images/componentImg/arrow.png") no-repeat center center;
+  background-size: 100%;
+  transform: rotate(0deg);
+  transition: transform .3s;
+}
+.ant-select-open .ant-select-arrow::after {
+  transform: rotate(180deg);
+}
 /* 下拉框end */
 
 /* 表单禁用样式begin */
@@ -133,13 +183,141 @@
 /* 表单禁用样式end */
 
 /* 部分组件begin */
-// 弹出抽屉底部自定义
+// 弹框底部自定义
 .drawer-bootom-button {
   background-color: @component-background !important;
   border-top-color: @border-color-split !important;
 }
 .ant-modal-close:focus, .ant-modal-close:hover,
 .ant-drawer-close:focus, .ant-drawer-close:hover{
-  color: #fff;
+  color: @text-color;
 }
-/* 部分组件end */
+.ant-empty-normal {
+  color: @text-color !important;
+}
+
+// 组件背景
+.ant-input,
+.ant-select-selection
+{
+  background: url("~@assets/images/componentImg/input.png") no-repeat center center !important;
+  background-size: 110% calc(@btn-height-base + 2px) !important;
+}
+// 搜索按钮
+.search-btn {
+  border: none !important;
+  width: 88px !important;
+  background: url("~@assets/images/componentImg/btn.png") no-repeat center center !important;
+  background-size: 100% @btn-height-base !important;
+  font-size: 0;
+}
+.search-btn-icon {
+  margin-right: 3px;
+  margin-bottom: 3px;
+  width: 14px;
+}
+.search-btn-text {
+  font-family: PingFang SC, PingFang SC, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  color: #FFFFFF;
+  line-height: 16px;
+}
+/* 部分组件end */
+
+.ml-8 {
+  margin-left: 8px;
+}
+.mb-20 {
+  margin-bottom: 20px;
+}
+.mr-12 {
+  margin-right: 12px;
+}
+.mr-10 {
+  margin-right: 10px;
+}
+// 分割线
+.divider-vertical {
+  width: 1px;
+  margin: 0 20px;
+  background-color: rgba(108, 128, 151, 0.3);
+}
+
+// 一行的内容
+.info-row {
+  display: flex;
+}
+.info-row.info-row-inline {
+  display: inline-flex;
+}
+.info-row:not(:last-child):not(.info-row-inline) {
+  margin-bottom: 15px;
+}
+.info-row .info-label {
+  flex: auto;
+  font-family: PingFang SC, PingFang SC, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  color: @text-color-secondary;
+  line-height: 16px;
+}
+.info-row .info-label::after {
+  content: '：'
+}
+.info-row .info-value {
+  text-align: right;
+  flex: auto;
+  font-family: Rubik, Rubik, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  color: @text-color;
+  line-height: 16px;
+}
+.over-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+// 运行
+.working::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+  border-radius: 50%;
+  background-color: #2BFF82;
+}
+// 停止
+.cease::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+  border-radius: 50%;
+  background-color: #FF5353;
+}
+
+.ant-btn.primary-btn,
+.ant-btn.primary-btn:hover,
+.ant-btn.primary-btn:focus {
+  width: 88px;
+  height: 32px;
+  background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
+  border-radius: 2px 2px 2px 2px;
+  border: 1px solid #0094FF;
+  color: @text-color;
+}
+.ant-btn.danger-btn,
+.ant-btn.danger-btn:hover,
+.ant-btn.danger-btn:focus {
+  width: 88px;
+  height: 32px;
+  background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
+  border-radius: 2px 2px 2px 2px;
+  border: 1px solid #FF5353;
+  color: @text-color;
+}

src/assets/less/modifyLessVars.js

@@ -20,4 +20,8 @@ module.exports = {
   // 表格相关
   'table-selected-row-bg': 'rgba(0, 148, 255, 0.30)', // 勾选行背景色
   'table-expanded-row-bg': 'rgba(0, 148, 255, 0.10)', // 扩展行背景色
+
+  // 高度调整
+  'btn-height-base': '36px',
+  'input-height-base': '36px'
 }

src/assets/less/modifyLessVars.less

@@ -1,3 +1,4 @@
+@primary-color: #0094FF;
 /* 背景色 */
 @component-background: #001B36;
 @background-color-base: #001B36AA;
@@ -18,4 +19,8 @@
 
 /* 表格相关 */
 @table-selected-row-bg: rgba(0, 148, 255, 0.30);
-@table-expanded-row-bg: rgba(0, 148, 255, 0.10);
+@table-expanded-row-bg: rgba(0, 148, 255, 0.10);
+
+/* 按钮 */
+@btn-height-base: 36px;
+@input-height-base: 36px;