@vtx/modals2 2.16.3 → 2.16.5

package/lib/vtx-jzlj-gcxm-modal/components/BaseInfo/index.css

@@ -0,0 +1,368 @@
+.vtx-business-modal-wrap {
+  --modal-content-bg: #f7f9fb;
+  --modal-border-color: #fff;
+  --head-bg: #fff;
+  --bg-color2: #fff;
+  --label-color: rgba(0, 0, 0, 0.65);
+  --base-label-color: #8C8C8C;
+  --table-head-bg: rgba(24, 144, 255, 0.1);
+  --title-color: #222;
+  --title-color2: #1677ff;
+  --tag-bg: rgba(22, 119, 255, 0.1);
+  --block-bg-color: rgba(0, 0, 0, 0.1);
+  --block-bg-color2: #1890ff;
+  --calendar-border: #ececec;
+  --calendar-thead-bg: #fff;
+  --calendar-bg: #fff;
+  --calendar-content-sigle-bg: #f3f5f8;
+  --info-danger: #fd3a15;
+  --info-warnning: #f7d93d;
+  --info-active: #222;
+  --info-active2: #52c41a;
+  --info-active3: #fff;
+  --bg-color: white;
+  --sub-bg-color: #f3f3f380;
+  --title-bg-color: white;
+  --title-border: 1px solid #dbdbdbff;
+  --title-border-color: rgba(187, 187, 187, 0.2);
+  --sub-title-color: #222;
+  --info-color: #222;
+  --border-color: '#DADADAFF';
+  --scroll-bar-bg: #c0c0c0;
+  --scroll-bar-hover-bg: #adadad;
+  --scroll-bar-track-bg: #fafafa;
+  --button-checked-color: #1890ff;
+  --button-color: #222;
+  --list-cell-active1: #222;
+  --list-cell-active2: #222;
+  --list-cell-active3: #222;
+  --calendar-date-today-bg-color: #73ffbf;
+  --calendar-date-today-hover-bg-color: linear-gradient(0deg, rgba(77, 255, 186, 0.3), transparent);
+}
+*::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 5px;
+}
+*::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 5px;
+}
+*::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.vtx-business-modal-wrap.dark {
+  --modal-content-bg: #0b1315;
+  --modal-border-color: #69958a;
+  --head-bg: #122a2c;
+  --bg-color: linear-gradient(0deg, #081e21cc, #000c);
+  --bg-color2: #162123;
+  --sub-bg-color: #ffffff0d;
+  --title-bg-color: #1a292bff;
+  --title-border: 1px solid transparent;
+  --title-border-color: transparent;
+  --title-color: white;
+  --title-color2: #a9d5d3;
+  --sub-title-color: #00f0ff;
+  --label-color: #cafdffff;
+  --base-label-color: #cafdffff;
+  --info-color: #ffffffff;
+  --border-color: '#3C7073FF';
+  --scroll-bar-bg: #39cbc3aa;
+  --scroll-bar-hover-bg: #219fff3d;
+  --scroll-bar-track-bg: transparent;
+  --button-text-color--defalut: #c9e6e8;
+  --button-text-color--active: #ffffff;
+  --button-background-color--default: #1a5561;
+  --button-background-color--active: linear-gradient(0deg, #3195aa, #0f5160);
+  --button-checked-color: #1890ff;
+  --arrow-icon-color: #355e5f;
+  --block-bg-color: rgba(255, 255, 255, 0.1);
+  --block-bg-color2: rgba(48, 118, 114, 0.2);
+  --calendar-content-sigle-bg: rgba(243, 245, 248, 0.053);
+  --info-active: #40ffd3;
+  --info-active2: #52c41a;
+  --info-active3: #40ffd3;
+  --info-danger: #fd3a15;
+  --info-warnning: #f7d93d;
+  --table-head-bg: rgba(0, 173, 177, 0.1);
+  --timeline-active: #24f2ff;
+  --calendar-border: #35444c;
+  --calendar-thead-bg: #29373e;
+  --calendar-bg: rgba(255, 255, 255, 0.1);
+  --list-cell-active1: #fff845;
+  --list-cell-active2: #45d1ff;
+  --list-cell-active3: #20feff;
+  --calendar-date-today-bg-color: #73ffbf;
+  --calendar-date-today-hover-bg-color: linear-gradient(0deg, rgba(77, 255, 186, 0.3), transparent);
+}
+.vtx-business-modal-wrap.blue {
+  --modal-content-bg: linear-gradient(0deg, rgba(28, 94, 149, 0.8), rgba(20, 37, 57, 0.8));
+  --modal-border-color: #7295bc;
+  --head-bg: linear-gradient(90deg, #124067, #051a29);
+  --head-bg-border-color2: #3a87cb;
+  --bg-color2: rgba(0, 103, 156, 0.1);
+  --bg-border-color2: rgba(32, 102, 167, 0.5);
+  --sub-bg-color: #ffffff0d;
+  --title-border: 1px solid transparent;
+  --title-border-color: transparent;
+  --title-color: white;
+  --title-color2: #fff;
+  --sub-title-color: #64bcff;
+  --label-color: #fff;
+  --base-label-color: #fff;
+  --info-color: #74bbf4;
+  --calendar-content-sigle-bg: #1464a62e;
+  --border-color: #1464a6;
+  --scroll-bar-bg: #39cbc3aa;
+  --scroll-bar-hover-bg: #219fff3d;
+  --scroll-bar-track-bg: transparent;
+  --button-text-color--defalut: #c9e6e8;
+  --button-text-color--active: #ffffff;
+  --button-background-color--default: #1a5561;
+  --button-background-color--active: linear-gradient(0deg, #3195aa, #0f5160);
+  --button-checked-color: #1890ff;
+  --arrow-icon-color: #355e5f;
+  --block-bg-color: rgba(255, 255, 255, 0.1);
+  --block-bg-color2: #74bbf4;
+  --info-active: #40ffd3;
+  --info-active2: #52c41a;
+  --info-active3: #75ffc2;
+  --info-danger: #fd3a15;
+  --info-warnning: #f7d93d;
+  --table-head-bg: rgba(0, 173, 177, 0.1);
+  --timeline-active: #24f2ff;
+  --calendar-border: rgba(32, 102, 167, 0.5);
+  --calendar-thead-bg: rgba(255, 255, 255, 0.1);
+  --calendar-content-bg: linear-gradient(0deg, #2a55e9, #0dbafe);
+  --calendar-bg: rgba(255, 255, 255, 0.1);
+  --image-value-color: #07d4ff;
+  --image-text-color: #ffffff;
+  --list-cell-active1: #fff845;
+  --list-cell-active2: #45d1ff;
+  --list-cell-active3: #20feff;
+  --calendar-date-today-bg-color: #0090ff;
+  --calendar-date-today-hover-bg-color: linear-gradient(0deg, rgba(0, 144, 255, 0.8) 0%, rgba(0, 144, 255, 0) 100%);
+}
+.vtx-business-modal-wrap.light {
+  --title-color2: #1677ff;
+}
+.jzlj-car-subtitle {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.jzlj-car-subtitle .jzlj-car-type {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 8px;
+  height: 24px;
+  line-height: 24px;
+  background: rgba(22, 119, 255, 0.05);
+  border-radius: 4px;
+  border: 1px solid #1677ff;
+  font-size: 12px;
+  color: #1677ff;
+  font-weight: normal;
+  margin-left: 8px;
+}
+.jzlj-car-subtitle .jzlj-car-type img {
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+}
+.jzlj-car-subtitle .jzlj-car-status {
+  display: inline-block;
+  padding: 0 8px;
+  height: 24px;
+  line-height: 24px;
+  background: rgba(82, 196, 26, 0.05);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #52c41a;
+  font-weight: normal;
+  font-size: 12px;
+  color: #52c41a;
+  margin-left: 8px;
+}
+.jzlj-card {
+  background-color: var(--bg-color2);
+  border: 1px solid var(--title-border-color);
+  border-radius: 8px;
+}
+.jzlj-card-title {
+  height: 56px;
+  line-height: 56px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--title-border-color);
+  position: relative;
+}
+.jzlj-card-title-text {
+  font-size: 16px;
+  color: var(--title-color);
+  font-weight: 500;
+}
+.jzlj-card-title-right {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.jzlj-card-content {
+  padding: 16px;
+  position: relative;
+  height: calc(100% - 56px);
+  overflow-y: auto;
+}
+.vtx-ellipsis-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.jzlj-gcxm-base {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  padding: 6px 16px 16px 16px;
+  gap: 16px;
+  height: 700px;
+}
+.jzlj-gcxm-base-left {
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 16px;
+  width: 25%;
+}
+.jzlj-gcxm-base-left-top {
+  height: 100%;
+}
+.jzlj-gcxm-base-left-top .label {
+  color: var(--base-label-color);
+}
+.jzlj-gcxm-base-left-top .value {
+  color: var(--info-color);
+}
+.jzlj-gcxm-base-left-top .ssxx-map {
+  height: 160px;
+  margin-bottom: 16px;
+}
+.jzlj-gcxm-base-left-top .ssxx-map .ol-map-container {
+  border-radius: 8px !important;
+}
+.jzlj-gcxm-base-left-top .ssxx-map .ol-viewport {
+  border-radius: 8px !important;
+}
+.jzlj-gcxm-base .num {
+  font-size: 18px;
+  color: #1677ff;
+  font-weight: 500;
+}
+.jzlj-gcxm-base .num .unit {
+  font-size: 12px;
+  font-weight: normal;
+  margin-left: 4px;
+}
+.jzlj-gcxm-base .name {
+  font-size: 14px;
+  color: var(--info-color);
+}
+.jzlj-gcxm-base-right {
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 16px;
+  width: 75%;
+}
+.jzlj-gcxm-base-right-top {
+  height: 40%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 16px;
+}
+.jzlj-gcxm-base-right-top-left {
+  width: 50%;
+}
+.jzlj-gcxm-base-right-top-right {
+  width: 50%;
+}
+.jzlj-gcxm-base-right-top-right .jzlj-gcxm-ctl-pie {
+  height: 100%;
+}
+.jzlj-gcxm-base-right-top .czz {
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+.jzlj-gcxm-base-right-top .czz .czz-item {
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+.jzlj-gcxm-base-right-bottom {
+  height: 60%;
+}
+.jzlj-gcxm-base-right-bottom .ldxx .ldxx-top {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  padding-bottom: 24px;
+}
+.flex-column {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}

package/lib/vtx-jzlj-gcxm-modal/components/BaseInfo/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useSettings2 = _interopRequireDefault(require("../../../vm-hooks/useSettings"));
+var _api = require("../../api");
+require("./index.less");
+var _JBXX = _interopRequireDefault(require("./JBXX"));
+var _CZZ = _interopRequireDefault(require("./CZZ"));
+var _CTL = _interopRequireDefault(require("./CTL"));
+var _LDXX = _interopRequireDefault(require("./LDXX"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var BaseInfo = function BaseInfo(props) {
+  var id = props.id,
+    baseInfo = props.baseInfo,
+    info = props.info;
+  var _useSettings = (0, _useSettings2["default"])(),
+    isDark = _useSettings.isDark,
+    _useSettings$theme = _useSettings.theme,
+    theme = _useSettings$theme === void 0 ? 'light' : _useSettings$theme;
+  var isDeepTheme = isDark || theme === 'blue';
+  var _BaseService$useCtlfx = _api.BaseService.useCtlfxAndLd(id),
+    ctlfxAndLdData = _BaseService$useCtlfx.ctlfxAndLdData;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "jzlj-gcxm-base ".concat(theme)
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "jzlj-gcxm-base-left"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "jzlj-gcxm-base-left-top jzlj-card"
+  }, /*#__PURE__*/_react["default"].createElement(_JBXX["default"], {
+    baseInfo: baseInfo,
+    info: info
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "jzlj-gcxm-base-right"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "jzlj-gcxm-base-right-top"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "jzlj-gcxm-base-right-top-left jzlj-card"
+  }, /*#__PURE__*/_react["default"].createElement(_CZZ["default"], {
+    id: id
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "jzlj-gcxm-base-right-top-right jzlj-card"
+  }, /*#__PURE__*/_react["default"].createElement(_CTL["default"], {
+    isDeepTheme: isDeepTheme,
+    ctlfxAndLdData: ctlfxAndLdData
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "jzlj-gcxm-base-right-bottom jzlj-card"
+  }, /*#__PURE__*/_react["default"].createElement(_LDXX["default"], {
+    theme: theme,
+    id: id,
+    ctlfxAndLdData: ctlfxAndLdData
+  }))));
+};
+var _default = exports["default"] = BaseInfo;
+//# sourceMappingURL=index.js.map

package/lib/vtx-jzlj-gcxm-modal/components/BaseInfo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_useSettings2","_api","_JBXX","_CZZ","_CTL","_LDXX","e","__esModule","BaseInfo","props","id","baseInfo","info","_useSettings","useSettings","isDark","_useSettings$theme","theme","isDeepTheme","_BaseService$useCtlfx","BaseService","useCtlfxAndLd","ctlfxAndLdData","React","createElement","className","concat","JBXX","CZZ","CTL","LDXX","_default","exports"],"sources":["vtx-jzlj-gcxm-modal/components/BaseInfo/index.js"],"sourcesContent":["import React from 'react';\nimport useSettings from '../../../vm-hooks/useSettings';\nimport { BaseService } from '../../api';\nimport './index.less';\nimport JBXX from './JBXX';\nimport CZZ from './CZZ';\nimport CTL from './CTL';\nimport LDXX from './LDXX';\nconst BaseInfo = (props) => {\n    const { id, baseInfo, info } = props;\n    const { isDark, theme = 'light' } = useSettings();\n    const isDeepTheme = isDark || theme === 'blue';\n    const { ctlfxAndLdData } = BaseService.useCtlfxAndLd(id);\n    return (React.createElement(\"div\", { className: `jzlj-gcxm-base ${theme}` },\n        React.createElement(\"div\", { className: `jzlj-gcxm-base-left` },\n            React.createElement(\"div\", { className: \"jzlj-gcxm-base-left-top jzlj-card\" },\n                React.createElement(JBXX, { baseInfo: baseInfo, info: info }))),\n        React.createElement(\"div\", { className: `jzlj-gcxm-base-right` },\n            React.createElement(\"div\", { className: \"jzlj-gcxm-base-right-top\" },\n                React.createElement(\"div\", { className: \"jzlj-gcxm-base-right-top-left jzlj-card\" },\n                    React.createElement(CZZ, { id: id })),\n                React.createElement(\"div\", { className: \"jzlj-gcxm-base-right-top-right jzlj-card\" },\n                    React.createElement(CTL, { isDeepTheme: isDeepTheme, ctlfxAndLdData: ctlfxAndLdData }))),\n            React.createElement(\"div\", { className: \"jzlj-gcxm-base-right-bottom jzlj-card\" },\n                React.createElement(LDXX, { theme: theme, id: id, ctlfxAndLdData: ctlfxAndLdData })))));\n};\nexport default BaseInfo;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AACAA,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,IAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,IAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,KAAA,GAAAP,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,gBAAAA,CAAA;AAC1B,IAAME,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,KAAK,EAAK;EACxB,IAAQC,EAAE,GAAqBD,KAAK,CAA5BC,EAAE;IAAEC,QAAQ,GAAWF,KAAK,CAAxBE,QAAQ;IAAEC,IAAI,GAAKH,KAAK,CAAdG,IAAI;EAC1B,IAAAC,YAAA,GAAoC,IAAAC,wBAAW,EAAC,CAAC;IAAzCC,MAAM,GAAAF,YAAA,CAANE,MAAM;IAAAC,kBAAA,GAAAH,YAAA,CAAEI,KAAK;IAALA,KAAK,GAAAD,kBAAA,cAAG,OAAO,GAAAA,kBAAA;EAC/B,IAAME,WAAW,GAAGH,MAAM,IAAIE,KAAK,KAAK,MAAM;EAC9C,IAAAE,qBAAA,GAA2BC,gBAAW,CAACC,aAAa,CAACX,EAAE,CAAC;IAAhDY,cAAc,GAAAH,qBAAA,CAAdG,cAAc;EACtB,oBAAQC,iBAAK,CAACC,aAAa,CAAC,KAAK,EAAE;IAAEC,SAAS,oBAAAC,MAAA,CAAoBT,KAAK;EAAG,CAAC,eACvEM,iBAAK,CAACC,aAAa,CAAC,KAAK,EAAE;IAAEC,SAAS;EAAwB,CAAC,eAC3DF,iBAAK,CAACC,aAAa,CAAC,KAAK,EAAE;IAAEC,SAAS,EAAE;EAAoC,CAAC,eACzEF,iBAAK,CAACC,aAAa,CAACG,gBAAI,EAAE;IAAEhB,QAAQ,EAAEA,QAAQ;IAAEC,IAAI,EAAEA;EAAK,CAAC,CAAC,CAAC,CAAC,eACvEW,iBAAK,CAACC,aAAa,CAAC,KAAK,EAAE;IAAEC,SAAS;EAAyB,CAAC,eAC5DF,iBAAK,CAACC,aAAa,CAAC,KAAK,EAAE;IAAEC,SAAS,EAAE;EAA2B,CAAC,eAChEF,iBAAK,CAACC,aAAa,CAAC,KAAK,EAAE;IAAEC,SAAS,EAAE;EAA0C,CAAC,eAC/EF,iBAAK,CAACC,aAAa,CAACI,eAAG,EAAE;IAAElB,EAAE,EAAEA;EAAG,CAAC,CAAC,CAAC,eACzCa,iBAAK,CAACC,aAAa,CAAC,KAAK,EAAE;IAAEC,SAAS,EAAE;EAA2C,CAAC,eAChFF,iBAAK,CAACC,aAAa,CAACK,eAAG,EAAE;IAAEX,WAAW,EAAEA,WAAW;IAAEI,cAAc,EAAEA;EAAe,CAAC,CAAC,CAAC,CAAC,eAChGC,iBAAK,CAACC,aAAa,CAAC,KAAK,EAAE;IAAEC,SAAS,EAAE;EAAwC,CAAC,eAC7EF,iBAAK,CAACC,aAAa,CAACM,gBAAI,EAAE;IAAEb,KAAK,EAAEA,KAAK;IAAEP,EAAE,EAAEA,EAAE;IAAEY,cAAc,EAAEA;EAAe,CAAC,CAAC,CAAC,CAAC,CAAC;AACtG,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,cACaxB,QAAQ","ignoreList":[]}

package/lib/vtx-jzlj-gcxm-modal/components/BaseInfo/index.less

@@ -0,0 +1,119 @@
+@import '../../style/index.less';
+
+.jzlj-gcxm-base {
+    display: flex;
+    height: 100%;
+    padding: 6px 16px 16px 16px;
+    gap: 16px;
+    height: 700px;
+
+    &-left {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        width: 25%;
+
+        &-top {
+            height: 100%;
+
+            .label {
+                color: var(--base-label-color);
+            }
+
+            .value {
+                color: var(--info-color);
+            }
+
+            .ssxx-map {
+                height: 160px;
+                margin-bottom: 16px;
+
+                .ol-map-container {
+                    border-radius: 8px !important;
+                }
+                .ol-viewport {
+                    border-radius: 8px !important;
+                }
+            }
+        }
+    }
+
+    .num {
+        font-size: 18px;
+        color: #1677ff;
+        font-weight: 500;
+
+        .unit {
+            font-size: 12px;
+            font-weight: normal;
+            margin-left: 4px;
+        }
+    }
+
+    .name {
+        font-size: 14px;
+        color: var(--info-color);
+    }
+
+    &-right {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        width: 75%;
+
+        &-top {
+            height: 40%;
+            display: flex;
+            gap: 16px;
+
+            &-left {
+                width: 50%;
+            }
+
+            &-right {
+                width: 50%;
+
+                .jzlj-gcxm-ctl-pie {
+                    height: 100%;
+                }
+            }
+
+            .czz {
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+
+                .czz-item {
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: space-around;
+                }
+            }
+        }
+
+        &-bottom {
+            height: 60%;
+
+            .ldxx {
+                .ldxx-top {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-around;
+                    padding-bottom: 24px;
+                }
+            }
+        }
+    }
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}