@vtx/modals2 5.0.58 → 6.0.0-beta.0

package/lib/vtx-road-modal/components/LaneBaseInfo/index.js

@@ -6,6 +6,7 @@ import { LaneService } from "../../api";
 import "./index.less";
 import Rules from "./Rules";
 import Work from "./Work";
+import { translateLocaleText } from "./../../../hooks/useTranslation.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var BaseInfo = function BaseInfo(_ref) {
   var _info$lngLats, _jcssInfo$geometryInf;
@@ -33,9 +34,10 @@ var BaseInfo = function BaseInfo(_ref) {
     children: [/*#__PURE__*/_jsx(Col, {
       flex: '400px',
       children: /*#__PURE__*/_jsxs(VmWrapper, {
-        title: '基本信息',
+        title: translateLocaleText("t('vtxdefaultmodal.basicInformation')"),
         children: [/*#__PURE__*/_jsx(VmInfoCollection, {
-          data: baseInfo
+          data: baseInfo,
+          ellipsis: true
         }), /*#__PURE__*/_jsx("div", {
           style: {
             height: 194
@@ -46,7 +48,7 @@ var BaseInfo = function BaseInfo(_ref) {
             geometryType: 'polyline'
           })
         }), /*#__PURE__*/_jsx(VmTitle, {
-          title: '作业规则',
+          title: translateLocaleText("t('vtxroadmodal.rule')"),
           border: false
         }), /*#__PURE__*/_jsx(Rules, {
           rules: rules,

package/lib/vtx-road-modal/components/LaneBaseInfo/index.less

@@ -46,6 +46,18 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      gap: 8px;
+    }
+    &-name,
+    &-text {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &-name {
+      flex: 1;
+      font-weight: 600;
     }
     &-bottom {
       display: flex;
@@ -78,6 +90,14 @@
     height: 16px;
     margin-right: 2px;
   }
+  &-name {
+    display: inline-block;
+    max-width: 92px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+    white-space: nowrap;
+  }
 }
 
 .vtx-road-work-type-item {
@@ -86,6 +106,12 @@
   gap: 12px;
   color: var(--info-color);
   margin-left: 20px;
+  &-name {
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   &-value {
     font-weight: bold;
     font-size: 16px;
@@ -125,3 +151,19 @@
     -webkit-text-fill-color: transparent;
   }
 }
+
+.vtx-road-lane-rule-wrap,
+.vtx-road-info-right-wrap {
+  .info-line,
+  .info-label-b,
+  .value {
+    min-width: 0;
+  }
+
+  .info-label-b,
+  .value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/lib/vtx-road-modal/components/LaneCalendar/index.js

@@ -21,6 +21,7 @@ import darkWorkMileageIcon from "../../imgs/calendar/dark_green_mileage.png";
 import darkMileageIcon from "../../imgs/calendar/dark_mileage.png";
 import lightWorkMileageIcon from "../../imgs/calendar/green_mileage.png";
 import lightMileageIcon from "../../imgs/calendar/mileage.png";
+import { translateLocaleText } from "./../../../hooks/useTranslation.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var Calendar = function Calendar(_ref) {
   var id = _ref.id;
@@ -97,14 +98,14 @@ var Calendar = function Calendar(_ref) {
     });
   };
   return /*#__PURE__*/_jsxs(VmWrapper, {
-    title: '作业分析',
+    title: translateLocaleText("t('vtxroadmodal.workCalendar')"),
     extraLeft: /*#__PURE__*/_jsxs(Space, {
       children: [/*#__PURE__*/_jsx(VMSelect, {
         options: laneList,
         style: {
           width: 160
         },
-        placeholder: "\u8BF7\u9009\u62E9\u8F66\u9053",
+        placeholder: translateLocaleText("t('vtxroadmodal.pleaseSelect')"),
         onChange: setFacilityTypeCodes,
         value: facilityTypeCodes,
         allowClear: true
@@ -113,7 +114,7 @@ var Calendar = function Calendar(_ref) {
         style: {
           width: 160
         },
-        placeholder: "\u8BF7\u9009\u62E9\u4F5C\u4E1A\u7C7B\u578B",
+        placeholder: translateLocaleText("t('vtxroadmodal.pleaseSelectType')"),
         onChange: setWorkTypeCodes,
         value: workTypeCodes,
         allowClear: true
@@ -128,11 +129,11 @@ var Calendar = function Calendar(_ref) {
     children: [/*#__PURE__*/_jsxs("div", {
       className: 'vtx-road-calendar-head',
       children: [[{
-        name: '排班里程（km）',
+        name: translateLocaleText("t('vtxroadmodal.km6')"),
         img: mileageIcon,
         type: 'blue'
       }, {
-        name: '作业里程（km）',
+        name: translateLocaleText("t('vtxroadmodal.km5')"),
         img: workMileageIcon,
         type: 'green'
       }].map(function (item, index) {
@@ -141,7 +142,7 @@ var Calendar = function Calendar(_ref) {
         }), index);
       }), /*#__PURE__*/_jsxs(Space, {
         children: [/*#__PURE__*/_jsx("div", {
-          children: "\u5B8C\u6210\u7387\uFF1A"
+          children: translateLocaleText("t('vtxroadmodal.complete2')")
         }), /*#__PURE__*/_jsx("div", {
           className: 'vtx-road-calendar-complete-legend',
           style: {

package/lib/vtx-road-modal/components/LaneStatistical/index.js

@@ -15,6 +15,7 @@ import { VMSelect } from "../../../_components/vm-filter";
 import useSettings from "../../../_hooks/useSettings";
 import { LaneService } from "../../api";
 import "./index.less";
+import { translateLocaleText } from "./../../../hooks/useTranslation.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var Statistical = function Statistical(_ref) {
   var id = _ref.id;
@@ -45,6 +46,10 @@ var Statistical = function Statistical(_ref) {
     days = _ref2.days,
     workMileage = _ref2.workMileage,
     planMileage = _ref2.planMileage;
+  var rateLessThan50 = '<50%';
+  var rate50To80 = "50%\u2264".concat(translateLocaleText("t('vtxroadmodal.complete')"), "<80%");
+  var rate80To100 = "80%\u2264".concat(translateLocaleText("t('vtxroadmodal.complete')"), "<100%");
+  var rate100 = '=100%';
   useEffect(function () {
     if (!isEmpty(shiftInfoWorkInfos)) {
       setShiftId(shiftInfoWorkInfos[0].id);
@@ -91,11 +96,11 @@ var Statistical = function Statistical(_ref) {
       return {
         xAxis: xAxis,
         dataList: [{
-          name: '排班里程',
+          name: translateLocaleText("t('vtxroadmodal.scheduledMileage')"),
           data: planMileageList,
           color: 'geekblue'
         }, {
-          name: '作业里程',
+          name: translateLocaleText("t('vtxroadmodal.workMileage')"),
           data: workMileageList,
           color: 'green'
         }]
@@ -108,7 +113,7 @@ var Statistical = function Statistical(_ref) {
     children: [/*#__PURE__*/_jsx(Col, {
       span: 24,
       children: /*#__PURE__*/_jsx(VmWrapper, {
-        title: '作业汇总分析',
+        title: translateLocaleText("t('vtxroadmodal.analysis')"),
         filterType: 'rangePicker',
         filterChange: function filterChange(date) {
           setState({
@@ -128,24 +133,24 @@ var Statistical = function Statistical(_ref) {
               justify: 'center',
               children: [/*#__PURE__*/_jsx(Col, {
                 children: /*#__PURE__*/_jsx(VmFactor, {
-                  name: '排班天数',
-                  unit: '天',
+                  name: translateLocaleText("t('vtxroadmodal.scheduledDays')"),
+                  unit: translateLocaleText("t('common.dayUnit')"),
                   fontType: 'cyan',
                   value: days,
                   img: isDark ? require("../../imgs/factor/dark_over_rate.png") : require("../../imgs/factor/over_rate.png")
                 })
               }), /*#__PURE__*/_jsx(Col, {
                 children: /*#__PURE__*/_jsx(VmFactor, {
-                  name: '排班总里程',
-                  unit: '公里',
+                  name: translateLocaleText("t('vtxroadmodal.totalScheduledMileage')"),
+                  unit: translateLocaleText("t('vtxroadmodal.kilometerUnit')"),
                   fontType: 'blue',
                   value: planMileage,
                   img: isDark ? require("../../imgs/factor/dark_plan_mileage.png") : require("../../imgs/factor/plan_mileage.png")
                 })
               }), /*#__PURE__*/_jsx(Col, {
                 children: /*#__PURE__*/_jsx(VmFactor, {
-                  name: '作业总里程',
-                  unit: '公里',
+                  name: translateLocaleText("t('vtxroadmodal.totalWorkMileage')"),
+                  unit: translateLocaleText("t('vtxroadmodal.kilometerUnit')"),
                   fontType: 'green',
                   value: workMileage,
                   img: isDark ? require("../../imgs/factor/dark_valid_mileage.png") : require("../../imgs/factor/valid_mileage.png")
@@ -163,7 +168,7 @@ var Statistical = function Statistical(_ref) {
                 marginBottom: 10
               },
               children: [/*#__PURE__*/_jsx("div", {
-                children: "\u5E73\u5747\u5B8C\u6210\u7387"
+                children: translateLocaleText("t('vtxroadmodal.complete3')")
               }), /*#__PURE__*/_jsxs("div", {
                 children: [totalWorkInfo === null || totalWorkInfo === void 0 ? void 0 : totalWorkInfo.completeRate, "%"]
               })]
@@ -180,8 +185,10 @@ var Statistical = function Statistical(_ref) {
                     style: {
                       background: 'var(--red-color)'
                     }
-                  }), /*#__PURE__*/_jsx("span", {
-                    children: '<50%'
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: "road-statistic-summary-main-rate--text",
+                    title: rateLessThan50,
+                    children: rateLessThan50
                   })]
                 }), /*#__PURE__*/_jsxs("div", {
                   className: classnames('road-statistic-summary-main-rate--value', {
@@ -189,7 +196,7 @@ var Statistical = function Statistical(_ref) {
                   }),
                   children: [/*#__PURE__*/_jsx("span", {
                     children: (completeRate === null || completeRate === void 0 ? void 0 : completeRate.rate1Days) || 0
-                  }), "\u5929"]
+                  }), translateLocaleText("t('common.dayUnit')")]
                 })]
               }), /*#__PURE__*/_jsxs("div", {
                 className: "road-statistic-summary-main-rate--item",
@@ -200,8 +207,10 @@ var Statistical = function Statistical(_ref) {
                     style: {
                       background: 'var(--yellow-color)'
                     }
-                  }), /*#__PURE__*/_jsx("span", {
-                    children: '50%≤完成率<80%'
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: "road-statistic-summary-main-rate--text",
+                    title: rate50To80,
+                    children: rate50To80
                   })]
                 }), /*#__PURE__*/_jsxs("div", {
                   className: classnames('road-statistic-summary-main-rate--value', {
@@ -209,7 +218,7 @@ var Statistical = function Statistical(_ref) {
                   }),
                   children: [/*#__PURE__*/_jsx("span", {
                     children: (completeRate === null || completeRate === void 0 ? void 0 : completeRate.rate2Days) || 0
-                  }), "\u5929"]
+                  }), translateLocaleText("t('common.dayUnit')")]
                 })]
               }), /*#__PURE__*/_jsxs("div", {
                 className: "road-statistic-summary-main-rate--item",
@@ -220,8 +229,10 @@ var Statistical = function Statistical(_ref) {
                     style: {
                       background: 'var(--blue-color)'
                     }
-                  }), /*#__PURE__*/_jsx("span", {
-                    children: '80%≤完成率<100%'
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: "road-statistic-summary-main-rate--text",
+                    title: rate80To100,
+                    children: rate80To100
                   })]
                 }), /*#__PURE__*/_jsxs("div", {
                   className: classnames('road-statistic-summary-main-rate--value', {
@@ -229,7 +240,7 @@ var Statistical = function Statistical(_ref) {
                   }),
                   children: [/*#__PURE__*/_jsx("span", {
                     children: (completeRate === null || completeRate === void 0 ? void 0 : completeRate.rate3Days) || 0
-                  }), "\u5929"]
+                  }), translateLocaleText("t('common.dayUnit')")]
                 })]
               }), /*#__PURE__*/_jsxs("div", {
                 className: "road-statistic-summary-main-rate--item",
@@ -240,8 +251,10 @@ var Statistical = function Statistical(_ref) {
                     style: {
                       background: 'var(--green-color)'
                     }
-                  }), /*#__PURE__*/_jsx("span", {
-                    children: '=100%'
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: "road-statistic-summary-main-rate--text",
+                    title: rate100,
+                    children: rate100
                   })]
                 }), /*#__PURE__*/_jsxs("div", {
                   className: classnames('road-statistic-summary-main-rate--value', {
@@ -249,7 +262,7 @@ var Statistical = function Statistical(_ref) {
                   }),
                   children: [/*#__PURE__*/_jsx("span", {
                     children: (completeRate === null || completeRate === void 0 ? void 0 : completeRate.rate4Days) || 0
-                  }), "\u5929"]
+                  }), translateLocaleText("t('common.dayUnit')")]
                 })]
               })]
             })]
@@ -264,7 +277,7 @@ var Statistical = function Statistical(_ref) {
         children: [/*#__PURE__*/_jsx(Col, {
           span: 12,
           children: /*#__PURE__*/_jsx(VmWrapper, {
-            title: '班次完成情况分析',
+            title: translateLocaleText("t('vtxroadmodal.timesCompleteAnalyze')"),
             extraLeft: /*#__PURE__*/_jsx(VMSelect, {
               options: (shiftInfoWorkInfos || []).filter(function (item) {
                 return item.startTime && item.endTime;
@@ -293,7 +306,7 @@ var Statistical = function Statistical(_ref) {
         }), /*#__PURE__*/_jsx(Col, {
           span: 12,
           children: /*#__PURE__*/_jsx(VmWrapper, {
-            title: '车道完成情况分析',
+            title: translateLocaleText("t('vtxroadmodal.completeAnalyze')"),
             children: /*#__PURE__*/_jsx(VmLineCharts, {
               dataList: facilityTypeData.dataList,
               xAxis: facilityTypeData.xAxis,

package/lib/vtx-road-modal/components/LaneStatistical/index.less

@@ -22,6 +22,14 @@
     align-items: center;
     font-size: 16px;
     color: var(--img-text-color);
+    min-width: 0;
+    max-width: 168px;
+  }
+  &--text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   &--value {
     margin-left: 12px;

package/lib/vtx-road-modal/components/Statistical/index.js

@@ -14,6 +14,7 @@ import { VmBarCharts, VmFactor, VmLineCharts, VmWrapper } from "../../../_compon
 import useSettings from "../../../_hooks/useSettings";
 import { BaseService } from "../../api";
 import "./index.less";
+import { translateLocaleText } from "./../../../hooks/useTranslation.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var Statistical = function Statistical(_ref) {
   var id = _ref.id;
@@ -38,12 +39,16 @@ var Statistical = function Statistical(_ref) {
   var xAxis = mileAnalysis.map(function (item) {
     return item.workDate;
   });
+  var rateLessThan50 = '<50%';
+  var rate50To80 = "50%\u2264".concat(translateLocaleText("t('vtxroadmodal.complete')"), "<80%");
+  var rate80To100 = "80%\u2264".concat(translateLocaleText("t('vtxroadmodal.complete')"), "<100%");
+  var rate100 = '=100%';
   return /*#__PURE__*/_jsxs(Row, {
     gutter: [16, 16],
     children: [/*#__PURE__*/_jsx(Col, {
       span: 24,
       children: /*#__PURE__*/_jsx(VmWrapper, {
-        title: '作业汇总分析',
+        title: translateLocaleText("t('vtxroadmodal.analysis')"),
         filterType: 'rangePicker',
         filterChange: function filterChange(date) {
           setState({
@@ -63,23 +68,23 @@ var Statistical = function Statistical(_ref) {
               justify: 'center',
               children: [/*#__PURE__*/_jsx(Col, {
                 children: /*#__PURE__*/_jsx(VmFactor, {
-                  name: '计划作业里程',
-                  unit: '公里',
+                  name: translateLocaleText("t('vtxroadmodal.plannedWorkMileage')"),
+                  unit: translateLocaleText("t('vtxroadmodal.kilometerUnit')"),
                   fontType: 'blue',
                   value: (summaryInfo === null || summaryInfo === void 0 ? void 0 : summaryInfo.planMileage) || 0,
                   img: isDark ? require("../../imgs/factor/dark_plan_mileage.png") : require("../../imgs/factor/plan_mileage.png")
                 })
               }), /*#__PURE__*/_jsx(Col, {
                 children: /*#__PURE__*/_jsx(VmFactor, {
-                  name: '核算作业里程',
-                  unit: '公里',
+                  name: translateLocaleText("t('vtxroadmodal.accountingWorkMileage')"),
+                  unit: translateLocaleText("t('vtxroadmodal.kilometerUnit')"),
                   fontType: 'green',
                   value: (summaryInfo === null || summaryInfo === void 0 ? void 0 : summaryInfo.validMileage) || 0,
                   img: isDark ? require("../../imgs/factor/dark_valid_mileage.png") : require("../../imgs/factor/valid_mileage.png")
                 })
               }), /*#__PURE__*/_jsx(Col, {
                 children: /*#__PURE__*/_jsx(VmFactor, {
-                  name: '整体完成率',
+                  name: translateLocaleText("t('vtxroadmodal.overallCompletionRate')"),
                   unit: '%',
                   fontType: 'cyan',
                   value: overRate,
@@ -102,8 +107,10 @@ var Statistical = function Statistical(_ref) {
                     style: {
                       background: 'var(--yellow-color)'
                     }
-                  }), /*#__PURE__*/_jsx("span", {
-                    children: '<50%'
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: "road-statistic-summary-main-rate--text",
+                    title: rateLessThan50,
+                    children: rateLessThan50
                   })]
                 }), /*#__PURE__*/_jsxs("div", {
                   className: classnames('road-statistic-summary-main-rate--value', {
@@ -111,7 +118,7 @@ var Statistical = function Statistical(_ref) {
                   }),
                   children: [/*#__PURE__*/_jsx("span", {
                     children: (completionRate === null || completionRate === void 0 ? void 0 : completionRate.dayNum1) || 0
-                  }), "\u5929"]
+                  }), translateLocaleText("t('common.dayUnit')")]
                 })]
               }), /*#__PURE__*/_jsxs("div", {
                 className: "road-statistic-summary-main-rate--item",
@@ -122,8 +129,10 @@ var Statistical = function Statistical(_ref) {
                     style: {
                       background: '#36A1FF'
                     }
-                  }), /*#__PURE__*/_jsx("span", {
-                    children: '50%≤完成率<80%'
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: "road-statistic-summary-main-rate--text",
+                    title: rate50To80,
+                    children: rate50To80
                   })]
                 }), /*#__PURE__*/_jsxs("div", {
                   className: classnames('road-statistic-summary-main-rate--value', {
@@ -131,7 +140,7 @@ var Statistical = function Statistical(_ref) {
                   }),
                   children: [/*#__PURE__*/_jsx("span", {
                     children: (completionRate === null || completionRate === void 0 ? void 0 : completionRate.dayNum2) || 0
-                  }), "\u5929"]
+                  }), translateLocaleText("t('common.dayUnit')")]
                 })]
               }), /*#__PURE__*/_jsxs("div", {
                 className: "road-statistic-summary-main-rate--item",
@@ -142,8 +151,10 @@ var Statistical = function Statistical(_ref) {
                     style: {
                       background: 'var(--green-color)'
                     }
-                  }), /*#__PURE__*/_jsx("span", {
-                    children: '80%≤完成率<100%'
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: "road-statistic-summary-main-rate--text",
+                    title: rate80To100,
+                    children: rate80To100
                   })]
                 }), /*#__PURE__*/_jsxs("div", {
                   className: classnames('road-statistic-summary-main-rate--value', {
@@ -151,7 +162,7 @@ var Statistical = function Statistical(_ref) {
                   }),
                   children: [/*#__PURE__*/_jsx("span", {
                     children: (completionRate === null || completionRate === void 0 ? void 0 : completionRate.dayNum3) || 0
-                  }), "\u5929"]
+                  }), translateLocaleText("t('common.dayUnit')")]
                 })]
               }), /*#__PURE__*/_jsxs("div", {
                 className: "road-statistic-summary-main-rate--item",
@@ -162,8 +173,10 @@ var Statistical = function Statistical(_ref) {
                     style: {
                       background: 'var(--blue-color)'
                     }
-                  }), /*#__PURE__*/_jsx("span", {
-                    children: '=100%'
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: "road-statistic-summary-main-rate--text",
+                    title: rate100,
+                    children: rate100
                   })]
                 }), /*#__PURE__*/_jsxs("div", {
                   className: classnames('road-statistic-summary-main-rate--value', {
@@ -171,7 +184,7 @@ var Statistical = function Statistical(_ref) {
                   }),
                   children: [/*#__PURE__*/_jsx("span", {
                     children: (completionRate === null || completionRate === void 0 ? void 0 : completionRate.dayNum4) || 0
-                  }), "\u5929"]
+                  }), translateLocaleText("t('common.dayUnit')")]
                 })]
               })]
             })
@@ -186,15 +199,15 @@ var Statistical = function Statistical(_ref) {
         children: [/*#__PURE__*/_jsx(Col, {
           span: 12,
           children: /*#__PURE__*/_jsx(VmWrapper, {
-            title: '作业里程分析',
+            title: translateLocaleText("t('vtxroadmodal.analyze')"),
             children: /*#__PURE__*/_jsx(VmBarCharts, {
               height: 299,
               dataList: [{
-                name: '计划里程',
+                name: translateLocaleText("t('vtxroadmodal.plannedMileage')"),
                 data: _.map(mileAnalysis, 'planMileage'),
                 color: 'geekblue'
               }, {
-                name: '核算作业里程',
+                name: translateLocaleText("t('vtxroadmodal.accountingWorkMileage')"),
                 data: _.map(mileAnalysis, 'workMileage'),
                 color: 'green'
               }],
@@ -209,10 +222,10 @@ var Statistical = function Statistical(_ref) {
         }), /*#__PURE__*/_jsx(Col, {
           span: 12,
           children: /*#__PURE__*/_jsx(VmWrapper, {
-            title: '作业完成率分析',
+            title: translateLocaleText("t('vtxroadmodal.completeAnalyze2')"),
             children: /*#__PURE__*/_jsx(VmLineCharts, {
               dataList: [{
-                name: '作业完成率',
+                name: translateLocaleText("t('vtxroadmodal.complete4')"),
                 data: _.map(mileAnalysis, 'rate'),
                 color: '#009DFF',
                 smooth: true,

package/lib/vtx-road-modal/components/Statistical/index.less

@@ -1,32 +1,40 @@
-.road-statistic-summary-main-rate {
-  --bg-color: linear-gradient(180deg, #E4EFFF 0%, #F5FBFF 100%);
-  &-dark {
-    --bg-color: linear-gradient(180deg, #1C7CBF 0%, #0B588E 100%);
-  }
-  width: 100%;
-  height: 130px;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  padding: 0 24px;
-  background: var(--bg-color);
-  border-radius: 8px;
-  &--block {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-  }
-  &--label {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    font-size: 16px;
-    color: var(--img-text-color);
-  }
-  &--value {
-    margin-left: 12px;
-    font-weight: bold;
-    font-size: 24px;
-    color: #1F1F1F;
-  }
-}
+.road-statistic-summary-main-rate {
+  --bg-color: linear-gradient(180deg, #E4EFFF 0%, #F5FBFF 100%);
+  &-dark {
+    --bg-color: linear-gradient(180deg, #1C7CBF 0%, #0B588E 100%);
+  }
+  width: 100%;
+  height: 130px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 24px;
+  background: var(--bg-color);
+  border-radius: 8px;
+  &--block {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+  &--label {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    font-size: 16px;
+    color: var(--img-text-color);
+    min-width: 0;
+    max-width: 168px;
+  }
+  &--text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &--value {
+    margin-left: 12px;
+    font-weight: bold;
+    font-size: 24px;
+    color: #1F1F1F;
+  }
+}