@vtx/modals2 5.0.45 → 5.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/lib/_components/vm-card-statistics/index.less +27 -27
  2. package/lib/_components/vm-factor-list/index.less +11 -11
  3. package/lib/_components/vm-popover/index.less +7 -7
  4. package/lib/_components/vm-tooltip/index.js +13 -3
  5. package/lib/_service/index.js +16 -0
  6. package/lib/vtx-base-modal/Header/index.less +98 -98
  7. package/lib/vtx-base-modal/Tabs/index.js +62 -22
  8. package/lib/vtx-base-modal/Tabs/index.less +68 -54
  9. package/lib/vtx-car-modal/components/Info/index.less +6 -6
  10. package/lib/vtx-car-modal/content/Common/OilConsumption/index.less +6 -6
  11. package/lib/vtx-car-modal/content/Common/WaterConsumption/index.less +6 -6
  12. package/lib/vtx-cc-unit-modal/components/BaseInfo/index.less +6 -6
  13. package/lib/vtx-device-modal/components/DataAnalysis/index.less +66 -66
  14. package/lib/vtx-df-modal/api-zd-reborn.js +246 -0
  15. package/lib/vtx-df-modal/components/BaseInfoZdReborn/Jcqsfx.js +71 -0
  16. package/lib/vtx-df-modal/components/BaseInfoZdReborn/Jczbqs.js +96 -0
  17. package/lib/vtx-df-modal/components/BaseInfoZdReborn/Qyjcl.js +41 -0
  18. package/lib/vtx-df-modal/components/BaseInfoZdReborn/RealtimeMonitor.js +149 -0
  19. package/lib/vtx-df-modal/components/BaseInfoZdReborn/Situation.js +47 -0
  20. package/lib/vtx-df-modal/components/BaseInfoZdReborn/index.js +140 -0
  21. package/lib/vtx-df-modal/components/BaseInfoZdReborn/index.less +161 -0
  22. package/lib/vtx-df-modal/components/Calendar/zd-reborn.js +142 -0
  23. package/lib/vtx-df-modal/components/MeteringZdReborn/ChartJccc.js +62 -0
  24. package/lib/vtx-df-modal/components/MeteringZdReborn/ChartJcqs.js +83 -0
  25. package/lib/vtx-df-modal/components/MeteringZdReborn/List.js +125 -0
  26. package/lib/vtx-df-modal/components/MeteringZdReborn/index.js +185 -0
  27. package/lib/vtx-df-modal/components/MeteringZdReborn/index.less +68 -0
  28. package/lib/vtx-df-modal/components/index.js +4 -1
  29. package/lib/vtx-df-modal/index.js +19 -7
  30. package/lib/vtx-restaurant-modal/components/Basic/index.less +16 -16
  31. package/lib/vtx-restaurant-modal/config.js +52 -52
  32. package/lib/vtx-road-modal/components/Statistical/index.less +32 -32
  33. package/lib/vtx-staff-modal/components/BaseInfo/WorkStatic.js +2 -2
  34. package/package.json +78 -78
@@ -1,27 +1,27 @@
1
- .vm-car-statistics {
2
- width: 208px;
3
- height: 84px;
4
- display: flex;
5
- flex-direction: column;
6
- justify-content: space-between;
7
- padding: 20px;
8
- background-size: 100% 100%;
9
- &-label {
10
- color: var(--img-text-color);
11
- }
12
- &-value, &-unit {
13
- color: #1f1f1f;
14
- }
15
- &.vm-car-statistics-dark {
16
- .vm-car-statistics-value,.vm-car-statistics-unit {
17
- background: linear-gradient(180deg, #ffffff 0%, #119FFB 100%);
18
- background-clip: text;
19
- -webkit-text-fill-color: transparent;
20
- }
21
- }
22
- &-value {
23
- font-size: 20px;
24
- font-weight: bold;
25
- margin-right: 4px;
26
- }
27
- }
1
+ .vm-car-statistics {
2
+ width: 208px;
3
+ height: 84px;
4
+ display: flex;
5
+ flex-direction: column;
6
+ justify-content: space-between;
7
+ padding: 20px;
8
+ background-size: 100% 100%;
9
+ &-label {
10
+ color: var(--img-text-color);
11
+ }
12
+ &-value, &-unit {
13
+ color: #1f1f1f;
14
+ }
15
+ &.vm-car-statistics-dark {
16
+ .vm-car-statistics-value,.vm-car-statistics-unit {
17
+ background: linear-gradient(180deg, #ffffff 0%, #119FFB 100%);
18
+ background-clip: text;
19
+ -webkit-text-fill-color: transparent;
20
+ }
21
+ }
22
+ &-value {
23
+ font-size: 20px;
24
+ font-weight: bold;
25
+ margin-right: 4px;
26
+ }
27
+ }
@@ -1,11 +1,11 @@
1
- .vm-factor-list-wrap {
2
- display: flex;
3
- padding: 12px 16px;
4
- height: 68px;
5
- background: #F3F8FF;
6
- border-radius: 8px;
7
- gap: 26px;
8
- &.dark {
9
- background: rgba(0,136,240,0.15);
10
- }
11
- }
1
+ .vm-factor-list-wrap {
2
+ display: flex;
3
+ padding: 12px 16px;
4
+ height: 68px;
5
+ background: #F3F8FF;
6
+ border-radius: 8px;
7
+ gap: 26px;
8
+ &.dark {
9
+ background: rgba(0,136,240,0.15);
10
+ }
11
+ }
@@ -1,7 +1,7 @@
1
- .vm-popover {
2
- &.dark {
3
- .ant-popover-inner-content, .ant-popover-arrow-content, .ant-popover-arrow-content::before {
4
- background: rgb(51 95 135);
5
- }
6
- }
7
- }
1
+ .vm-popover {
2
+ &.dark {
3
+ .ant-popover-inner-content, .ant-popover-arrow-content, .ant-popover-arrow-content::before {
4
+ background: rgb(51 95 135);
5
+ }
6
+ }
7
+ }
@@ -1,15 +1,25 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ var _excluded = ["children"];
3
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
7
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
8
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
9
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
1
10
  import { Tooltip } from 'antd';
2
11
  import useSettings from "../../_hooks/useSettings";
3
12
  import "./style";
4
13
  import { jsx as _jsx } from "react/jsx-runtime";
5
14
  export default function VmFactor(props) {
15
+ var children = props.children,
16
+ rest = _objectWithoutProperties(props, _excluded);
6
17
  var _useSettings = useSettings(),
7
18
  isDark = _useSettings.isDark;
8
19
  return /*#__PURE__*/_jsx("div", {
9
20
  className: "vm-tooltip ".concat(isDark ? 'dark' : ''),
10
- children: /*#__PURE__*/_jsx(Tooltip, {
11
- title: item.name || '',
21
+ children: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, rest), {}, {
12
22
  children: props.children
13
- })
23
+ }))
14
24
  });
15
25
  }
@@ -81,6 +81,22 @@ var CommonService = {
81
81
  return {
82
82
  detail: (res === null || res === void 0 ? void 0 : res.data) || {}
83
83
  };
84
+ },
85
+ // 计量详情
86
+ useLmDetailZdReborn: function useLmDetailZdReborn(id) {
87
+ var _useRequest5 = useRequest(function () {
88
+ return request.post('/cloud/zd-reborn/api/base/commonFactory/getCommonFactoryById?factoryId=' + id, {
89
+ data: JSON.stringify({
90
+ factoryId: id
91
+ })
92
+ });
93
+ }, {
94
+ refreshDeps: [id]
95
+ }),
96
+ res = _useRequest5.data;
97
+ return {
98
+ detail: (res === null || res === void 0 ? void 0 : res.data) || {}
99
+ };
84
100
  }
85
101
  };
86
102
  export { CommonService };
@@ -1,98 +1,98 @@
1
- .vm-modal-header-container {
2
- width: 100%;
3
- height: 116px;
4
- border-radius: 8px 8px 0 0;
5
- background: var(--modal-head-bg);
6
- padding: 0 16px;
7
- margin-top: 1px;
8
- }
9
-
10
- .vm-modal-header-wrap {
11
- width: 100%;
12
- height: 56px;
13
- display: flex;
14
- align-items: center;
15
- justify-content: space-between;
16
- position: relative;
17
- &::after {
18
- position: absolute;
19
- top: 54px;
20
- left: 0;
21
- content: '';
22
- width: 180px;
23
- height: 1px;
24
- background: var(--modal-head-line-bg);
25
- box-shadow: var(--modal-head-line-shadow);
26
- border-radius: 8px;
27
- animation: move 6s linear infinite;
28
-
29
- @keyframes move {
30
- 0% {
31
- left: 0;
32
- }
33
-
34
- 100% {
35
- left: calc(100% - 180px);
36
- }
37
- }
38
- }
39
-
40
- &-left {
41
- display: flex;
42
- align-items: center;
43
- gap: 8px;
44
-
45
- &-title {
46
- font-weight: bold;
47
- font-size: 20px;
48
- color: var(--modal-title-color);
49
- }
50
-
51
- &-tag {
52
- display: flex;
53
- align-items: center;
54
- justify-content: center;
55
- gap: 4px;
56
- height: 24px;
57
- border-radius: 16px;
58
- font-size: 12px;
59
- padding: 0 8px;
60
- border: 1px solid;
61
- }
62
- }
63
-
64
- &-right {
65
- display: flex;
66
- align-items: center;
67
- gap: 16px;
68
-
69
- &-close {
70
- display: flex;
71
- align-items: center;
72
- justify-content: center;
73
- color: var(--modal-close-color);
74
- width: 28px;
75
- height: 28px;
76
- cursor: pointer;
77
- font-size: 16px;
78
- }
79
-
80
- &-line {
81
- width: 1px;
82
- height: 14px;
83
- background-color: var(--modal-head-split-line-color);
84
- }
85
-
86
- &-collect {
87
- width: 28px;
88
- height: 28px;
89
- border-radius: 8px;
90
- text-align: center;
91
- cursor: pointer;
92
-
93
- &.active {
94
- background: var(--collect-bg);
95
- }
96
- }
97
- }
98
- }
1
+ .vm-modal-header-container {
2
+ width: 100%;
3
+ height: 116px;
4
+ border-radius: 8px 8px 0 0;
5
+ background: var(--modal-head-bg);
6
+ padding: 0 16px;
7
+ margin-top: 1px;
8
+ }
9
+
10
+ .vm-modal-header-wrap {
11
+ width: 100%;
12
+ height: 56px;
13
+ display: flex;
14
+ align-items: center;
15
+ justify-content: space-between;
16
+ position: relative;
17
+ &::after {
18
+ position: absolute;
19
+ top: 54px;
20
+ left: 0;
21
+ content: '';
22
+ width: 180px;
23
+ height: 1px;
24
+ background: var(--modal-head-line-bg);
25
+ box-shadow: var(--modal-head-line-shadow);
26
+ border-radius: 8px;
27
+ animation: move 6s linear infinite;
28
+
29
+ @keyframes move {
30
+ 0% {
31
+ left: 0;
32
+ }
33
+
34
+ 100% {
35
+ left: calc(100% - 180px);
36
+ }
37
+ }
38
+ }
39
+
40
+ &-left {
41
+ display: flex;
42
+ align-items: center;
43
+ gap: 8px;
44
+
45
+ &-title {
46
+ font-weight: bold;
47
+ font-size: 20px;
48
+ color: var(--modal-title-color);
49
+ }
50
+
51
+ &-tag {
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ gap: 4px;
56
+ height: 24px;
57
+ border-radius: 16px;
58
+ font-size: 12px;
59
+ padding: 0 8px;
60
+ border: 1px solid;
61
+ }
62
+ }
63
+
64
+ &-right {
65
+ display: flex;
66
+ align-items: center;
67
+ gap: 16px;
68
+
69
+ &-close {
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ color: var(--modal-close-color);
74
+ width: 28px;
75
+ height: 28px;
76
+ cursor: pointer;
77
+ font-size: 16px;
78
+ }
79
+
80
+ &-line {
81
+ width: 1px;
82
+ height: 14px;
83
+ background-color: var(--modal-head-split-line-color);
84
+ }
85
+
86
+ &-collect {
87
+ width: 28px;
88
+ height: 28px;
89
+ border-radius: 8px;
90
+ text-align: center;
91
+ cursor: pointer;
92
+
93
+ &.active {
94
+ background: var(--collect-bg);
95
+ }
96
+ }
97
+ }
98
+ }
@@ -1,4 +1,11 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
1
7
  import classNames from 'classnames';
8
+ import { useEffect, useRef, useState } from 'react';
2
9
  import { AccessIcon, AlarmIcon, AnalysisIcon, AnnouncementIcon, AnnualInspectionIcon, AppraisalIcon, AppraiseIcon, AssessmentIcon, AssetIcon, AttendanceIcon, CalendarIcon, CaseIcon, ChargingIcon, CollectionIcon, ContractIcon, DeviceIcon, DocumentIcon, EquipmentIcon, EvaluationIcon, FactoryIcon, HistoryIcon, IndexIcon, InspectionIcon, InsuranceIcon, InterviewIcon, LifeCycleIcon, LogIcon, MaintenanceIcon, MeasurementIcon, MeteringIcon, OilIcon, OperationIcon, PointIcon, ProcessIcon, ProductionUnitIcon, RmIcon, RouteIcon, SbzjIcon, SchedulingIcon, ScoreIcon, SparePartsIcon, SpeedCurveIcon, StatisticsIcon, SummaryIcon, SyInfoIcon, TfdIcon, TfrdIcon, ThrowIcon, TrashIcon, VideoIcon, ViolationIcon, WaterIcon, WgrgsIcon, WgxwIcon, WorkConditionIcon, WorkInfoIcon, WorkingConditionIcon, WorkOrderIcon } from "../../_util/iconSvgHtml";
3
10
  import "./index.less";
4
11
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,6 +16,33 @@ var Tabs = function Tabs(props) {
9
16
  active = props.active,
10
17
  _props$theme = props.theme,
11
18
  theme = _props$theme === void 0 ? 'light' : _props$theme;
19
+ var wrapRef = useRef(null);
20
+ var _useState = useState(false),
21
+ _useState2 = _slicedToArray(_useState, 2),
22
+ isScrollable = _useState2[0],
23
+ setIsScrollable = _useState2[1];
24
+ useEffect(function () {
25
+ var wrapDom = wrapRef.current;
26
+ if (!wrapDom) return undefined;
27
+ var checkScrollable = function checkScrollable() {
28
+ setIsScrollable(wrapDom.scrollWidth > wrapDom.clientWidth + 1);
29
+ };
30
+ checkScrollable();
31
+ var resizeObserver;
32
+ if (typeof ResizeObserver !== 'undefined') {
33
+ resizeObserver = new ResizeObserver(checkScrollable);
34
+ resizeObserver.observe(wrapDom);
35
+ } else {
36
+ window.addEventListener('resize', checkScrollable);
37
+ }
38
+ return function () {
39
+ if (resizeObserver) {
40
+ resizeObserver.disconnect();
41
+ } else {
42
+ window.removeEventListener('resize', checkScrollable);
43
+ }
44
+ };
45
+ }, [tabs]);
12
46
  var iconRender = {
13
47
  'default-base': SummaryIcon,
14
48
  base: SummaryIcon,
@@ -82,28 +116,34 @@ var Tabs = function Tabs(props) {
82
116
  };
83
117
  return tabs.length ? /*#__PURE__*/_jsx("div", {
84
118
  className: 'vm-modal-tabs',
85
- children: tabs.map(function (tab, index) {
86
- var width = 26,
87
- height = 26;
88
- var ComponentIcon = iconRender[tab.key] || SummaryIcon;
89
- return /*#__PURE__*/_jsxs("div", {
90
- onClick: function onClick() {
91
- onChange(tab.key);
92
- },
93
- className: classNames('vm-modal-tabs-item', active === tab.key ? 'vm-modal-tabs-item-active' : 'vm-modal-tabs-item-normal', {
94
- 'vm-modal-tabs-item-dark': theme !== 'light'
95
- }),
96
- children: [ComponentIcon && /*#__PURE__*/_jsx(ComponentIcon, {
97
- width: width,
98
- height: height,
99
- fill: theme === 'light' ? active === tab.key ? '#fff' : '#1F1F1F' : '#fff',
100
- style: {
101
- transform: 'scale(0.55)'
102
- }
103
- }), /*#__PURE__*/_jsx("span", {
104
- children: tab.title
105
- })]
106
- }, index);
119
+ children: /*#__PURE__*/_jsx("div", {
120
+ ref: wrapRef,
121
+ className: classNames('vm-modal-tabs-wrap', {
122
+ 'vm-modal-tabs-wrap-scrollable': isScrollable
123
+ }),
124
+ children: tabs.map(function (tab, index) {
125
+ var width = 26,
126
+ height = 26;
127
+ var ComponentIcon = iconRender[tab.key] || SummaryIcon;
128
+ return /*#__PURE__*/_jsxs("div", {
129
+ onClick: function onClick() {
130
+ onChange(tab.key);
131
+ },
132
+ className: classNames('vm-modal-tabs-item', active === tab.key ? 'vm-modal-tabs-item-active' : 'vm-modal-tabs-item-normal', {
133
+ 'vm-modal-tabs-item-dark': theme !== 'light'
134
+ }),
135
+ children: [ComponentIcon && /*#__PURE__*/_jsx(ComponentIcon, {
136
+ width: width,
137
+ height: height,
138
+ fill: theme === 'light' ? active === tab.key ? '#fff' : '#1F1F1F' : '#fff',
139
+ style: {
140
+ transform: 'scale(0.55)'
141
+ }
142
+ }), /*#__PURE__*/_jsx("span", {
143
+ children: tab.title
144
+ })]
145
+ }, index);
146
+ })
107
147
  })
108
148
  }) : null;
109
149
  };
@@ -1,54 +1,68 @@
1
- .vm-modal-tabs {
2
- width: 100%;
3
- height: 60px;
4
- background: var(--vm-tabs-bg);
5
- border-radius: 8px 8px 0 0;
6
- border: none;
7
- // border: 2px solid var(--vm-tab-border-color);
8
- display: flex;
9
- justify-content: center;
10
- gap: 16px;
11
- align-items: center;
12
-
13
- &-item {
14
- display: flex;
15
- height: 36px;
16
- padding: 0 14px;
17
- font-size: 16px;
18
- gap: 8px;
19
- color: var(--vm-tabs-font-color);
20
- cursor: pointer;
21
- align-items: center;
22
- justify-content: center;
23
-
24
- &-active {
25
- background: var(--vm-tab-item-active-bg-color);
26
- border-radius: 26px;
27
- color: var(--vm-tab-item-active-color);
28
- box-shadow: var(--vm-tab-item-active-box-shadow);
29
- &.vm-modal-tabs-item-dark {
30
- position: relative;
31
- &::before {
32
- content: '';
33
- position: absolute;
34
- top: 0;
35
- left: 0;
36
- right: 0;
37
- bottom: 0;
38
- background: linear-gradient(
39
- 180deg,
40
- rgba(255, 255, 255, 1),
41
- rgba(54, 161, 255, 1)
42
- );
43
- border-radius: 26px;
44
- padding: 1px;
45
- -webkit-mask: linear-gradient(#fff 0 0) content-box,
46
- linear-gradient(#fff 0 0);
47
- -webkit-mask-composite: xor;
48
- mask-composite: exclude;
49
- z-index: -1;
50
- }
51
- }
52
- }
53
- }
54
- }
1
+ .vm-modal-tabs {
2
+ width: 100%;
3
+ height: 60px;
4
+ background: var(--vm-tabs-bg);
5
+ border-radius: 8px 8px 0 0;
6
+ border: none;
7
+ .vm-modal-tabs-wrap {
8
+ height: 100%;
9
+ display: flex;
10
+ justify-content: center;
11
+ gap: 16px;
12
+ align-items: center;
13
+ overflow-x: auto;
14
+ box-sizing: border-box;
15
+ padding: 0 16px;
16
+ &.vm-modal-tabs-wrap-scrollable {
17
+ justify-content: flex-start;
18
+ }
19
+ &::-webkit-scrollbar {
20
+ height: 2px !important;
21
+ }
22
+ &::-webkit-scrollbar-thumb {
23
+ background-color: #d3d7db !important;
24
+ }
25
+ }
26
+
27
+ &-item {
28
+ display: flex;
29
+ height: 36px;
30
+ padding: 0 14px;
31
+ font-size: 16px;
32
+ gap: 8px;
33
+ color: var(--vm-tabs-font-color);
34
+ cursor: pointer;
35
+ align-items: center;
36
+ justify-content: center;
37
+ flex-shrink: 0;
38
+ &-active {
39
+ background: var(--vm-tab-item-active-bg-color);
40
+ border-radius: 26px;
41
+ color: var(--vm-tab-item-active-color);
42
+ box-shadow: var(--vm-tab-item-active-box-shadow);
43
+ &.vm-modal-tabs-item-dark {
44
+ position: relative;
45
+ &::before {
46
+ content: '';
47
+ position: absolute;
48
+ top: 0;
49
+ left: 0;
50
+ right: 0;
51
+ bottom: 0;
52
+ background: linear-gradient(
53
+ 180deg,
54
+ rgba(255, 255, 255, 1),
55
+ rgba(54, 161, 255, 1)
56
+ );
57
+ border-radius: 26px;
58
+ padding: 1px;
59
+ -webkit-mask: linear-gradient(#fff 0 0) content-box,
60
+ linear-gradient(#fff 0 0);
61
+ -webkit-mask-composite: xor;
62
+ mask-composite: exclude;
63
+ z-index: -1;
64
+ }
65
+ }
66
+ }
67
+ }
68
+ }
@@ -1,6 +1,6 @@
1
- .vm-car-map-wrap {
2
- flex: 1;
3
- min-height: 0;
4
- width: 100%;
5
- margin-top: 10px;
6
- }
1
+ .vm-car-map-wrap {
2
+ flex: 1;
3
+ min-height: 0;
4
+ width: 100%;
5
+ margin-top: 10px;
6
+ }
@@ -1,6 +1,6 @@
1
- .vtx-car-oil-wrap {
2
- height: 100%;
3
- display: flex;
4
- gap: 16px;
5
- flex-direction: column;
6
- }
1
+ .vtx-car-oil-wrap {
2
+ height: 100%;
3
+ display: flex;
4
+ gap: 16px;
5
+ flex-direction: column;
6
+ }
@@ -1,6 +1,6 @@
1
- .vtx-car-water-wrap {
2
- height: 100%;
3
- display: flex;
4
- gap: 16px;
5
- flex-direction: column;
6
- }
1
+ .vtx-car-water-wrap {
2
+ height: 100%;
3
+ display: flex;
4
+ gap: 16px;
5
+ flex-direction: column;
6
+ }
@@ -1,6 +1,6 @@
1
- .vm-cc-unit-map-wrap {
2
- flex: 1;
3
- min-height: 230px;
4
- width: 100%;
5
- margin-top: 10px;
6
- }
1
+ .vm-cc-unit-map-wrap {
2
+ flex: 1;
3
+ min-height: 230px;
4
+ width: 100%;
5
+ margin-top: 10px;
6
+ }