@vtx/modals2 3.3.17 → 3.3.19

package/lib/vtx-housing-estate-modal/components/OverView/index.css

@@ -0,0 +1,334 @@
+.summary-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 16px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: var(--info-color);
+}
+.summary-item .summary-item-text > p:nth-child(2) {
+  color: #9ba8b0;
+}
+.summary-item .summary-item-text > p:nth-child(2) span {
+  color: var(--info-color);
+  font-size: 20px;
+  margin-right: 8px;
+}
+.estate-overview {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 10px;
+  height: 800px;
+  padding: 10px;
+}
+.estate-overview-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 100%;
+  width: 360px;
+  padding: 10px;
+  background: var(--bg-color2);
+}
+.estate-overview-left-map {
+  height: 260px;
+}
+.estate-overview-left-info {
+  position: relative;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  padding: 10px;
+}
+.estate-overview-left-info .vm-estate-summary {
+  position: absolute;
+  right: 29px;
+}
+.estate-overview-left-info .vm-estate-summary-img {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  position: relative;
+  padding-right: 16px;
+  width: 136px;
+  height: 50px;
+  color: var(--info-color);
+}
+.estate-overview-left-info .vm-estate-summary-img span {
+  z-index: 1;
+}
+.estate-overview-left-info .vm-estate-summary-img img {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.estate-overview-left-info .vm-estate-summary-text {
+  margin-top: -12px;
+  text-align: center;
+}
+.estate-overview-left-info .vm-estate-summary-text span:nth-child(1) {
+  font-size: 26px;
+  margin-right: 8px;
+}
+.estate-overview-middle {
+  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: 10px;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.estate-overview-hot {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: 10px;
+  height: 290px;
+  background: var(--bg-color2);
+}
+.estate-overview-hot-title {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.estate-overview-hot-summary {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  height: 100%;
+}
+.estate-overview-hot-summary .garbage-summary {
+  width: 100px;
+  height: 100%;
+  text-align: center;
+  color: var(--info-color);
+  padding-top: 12px;
+}
+.estate-overview-hot-summary .garbage-summary-bucket {
+  margin: 0 auto;
+  margin-bottom: 12px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 45px;
+  height: 52px;
+}
+.estate-overview-hot-summary .garbage-summary p span {
+  font-size: 18px;
+  margin-right: 4px;
+}
+.estate-overview-hot-buttons {
+  padding: 8px 0;
+  text-align: center;
+}
+.estate-overview-hot-chart {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.estate-overview-trend {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  background: var(--bg-color2);
+  padding: 10px;
+}
+.estate-overview-trend-chart {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.estate-overview-right {
+  height: 100%;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 10px;
+}
+.estate-overview-manage {
+  padding: 10px;
+  background: var(--bg-color2);
+  color: var(--info-color);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.estate-overview-manage-top {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.estate-overview-manage-top .top-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 32px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding-left: 24px;
+  margin-bottom: 16px;
+  padding-right: 8px;
+}
+.estate-overview-manage-top .top-item .img {
+  text-align: center;
+}
+.estate-overview-manage-top .top-item .img .name--1 {
+  color: #1febff;
+}
+.estate-overview-manage-top .top-item .img .name--2 {
+  color: #7fffd8;
+}
+.estate-overview-manage-top .top-item .img img {
+  margin-top: -10px;
+}
+.estate-overview-manage-top .top-item .statistic {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.estate-overview-manage-top .top-item .statistic > div:nth-child(1) {
+  padding-left: 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  background: url('../../imgs/manage-bg-1.png') no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 16px;
+}
+.estate-overview-manage-top .top-item .statistic > div:nth-child(2) {
+  padding-left: 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  background: url('../../imgs/manage-bg-2.png') no-repeat;
+  background-size: 100% 100%;
+}
+.estate-overview-manage-top .top-item .statistic .statistic-value--1 {
+  font-size: 20px;
+  font-weight: 400;
+  color: #50ffdc;
+  background: -webkit-gradient(linear, left bottom, left top, from(#1febff), color-stop(49.90234375%, #7ddcff), to(#ffffff));
+  background: linear-gradient(0deg, #1febff 0%, #7ddcff 49.90234375%, #ffffff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.estate-overview-manage-top .top-item .statistic .statistic-value--2 {
+  font-size: 20px;
+  font-weight: 400;
+  color: #5cff84;
+  background: -webkit-gradient(linear, left bottom, left top, from(#1febff), color-stop(49.90234375%, #7dffd0), to(#ffffff));
+  background: linear-gradient(0deg, #1febff 0%, #7dffd0 49.90234375%, #ffffff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.estate-overview-manage-bottom {
+  height: 50px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.estate-overview-rightbottom {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  padding: 10px;
+  background: var(--bg-color2);
+  color: var(--info-color);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.estate-overview-rightbottom--buttons {
+  margin-bottom: 16px;
+  text-align: center;
+}
+.estate-overview-rightbottom-echarts {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.estate-overview-rightbottom-echarts .content {
+  width: 50%;
+}
+.estate-overview-rightbottom--gauges {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.estate-overview-rightbottom--gauges .gauges-chart {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}

package/lib/vtx-housing-estate-modal/components/OverView/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _ahooks = require("ahooks");
+var _moment = _interopRequireDefault(require("moment"));
+var _react = _interopRequireDefault(require("react"));
+var _Left = _interopRequireDefault(require("./Left"));
+var _Hot = _interopRequireDefault(require("./Hot"));
+var _Trend = _interopRequireDefault(require("./Trend"));
+require("./index.less");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+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); }
+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; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var OverView = function OverView(_ref) {
+  var _ref$classPrefix = _ref.classPrefix,
+    classPrefix = _ref$classPrefix === void 0 ? '' : _ref$classPrefix,
+    id = _ref.id,
+    throwPoints = _ref.throwPoints,
+    basicInfo = _ref.basicInfo,
+    serviceList = _ref.serviceList,
+    clickGraphic = _ref.clickGraphic;
+  var _useSetState = (0, _ahooks.useSetState)({
+      date: (0, _moment["default"])().format('YYYY-MM-DD'),
+      code: 'LJFLJC_THROW_SITUATION_DAY',
+      trendCode: 'LJFLJC_THROW_TREND_DAY'
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var prefix = "".concat(classPrefix, "-overview");
+  var common = {
+    classPrefix: prefix,
+    id: id,
+    serviceList: serviceList,
+    state: state,
+    setState: setState
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix
+  }, /*#__PURE__*/_react["default"].createElement(_Left["default"], Object.assign({}, common, {
+    throwPoints: throwPoints,
+    basicInfo: basicInfo,
+    clickGraphic: clickGraphic
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "-middle")
+  }, /*#__PURE__*/_react["default"].createElement(_Hot["default"], Object.assign({}, common)), /*#__PURE__*/_react["default"].createElement(_Trend["default"], Object.assign({}, common))));
+};
+var _default = OverView;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/lib/vtx-housing-estate-modal/components/OverView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["OverView","classPrefix","id","throwPoints","basicInfo","serviceList","clickGraphic","useSetState","date","moment","format","code","trendCode","state","setState","prefix","common","React","createElement","className","Left","Object","assign","Hot","Trend"],"sources":["vtx-housing-estate-modal/components/OverView/index.js"],"sourcesContent":["import { useSetState } from 'ahooks';\nimport moment from 'moment';\nimport React from 'react';\nimport Left from './Left';\nimport Hot from './Hot';\nimport Trend from './Trend';\nimport './index.less';\nconst OverView = ({ classPrefix = '', id, throwPoints, basicInfo, serviceList, clickGraphic, }) => {\n    const [state, setState] = useSetState({\n        date: moment().format('YYYY-MM-DD'),\n        code: 'LJFLJC_THROW_SITUATION_DAY',\n        trendCode: 'LJFLJC_THROW_TREND_DAY'\n    });\n    const prefix = `${classPrefix}-overview`;\n    const common = {\n        classPrefix: prefix,\n        id,\n        serviceList,\n        state,\n        setState,\n    };\n    return (React.createElement(\"div\", { className: prefix },\n        React.createElement(Left, Object.assign({}, common, { throwPoints: throwPoints, basicInfo: basicInfo, clickGraphic: clickGraphic })),\n        React.createElement(\"div\", { className: `${prefix}-middle` },\n            React.createElement(Hot, Object.assign({}, common)),\n            React.createElement(Trend, Object.assign({}, common)))));\n};\nexport default OverView;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACtB,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAAqF;EAAA,4BAA/EC,WAAW;IAAXA,WAAW,iCAAG,EAAE;IAAEC,EAAE,QAAFA,EAAE;IAAEC,WAAW,QAAXA,WAAW;IAAEC,SAAS,QAATA,SAAS;IAAEC,WAAW,QAAXA,WAAW;IAAEC,YAAY,QAAZA,YAAY;EACvF,mBAA0B,IAAAC,mBAAW,EAAC;MAClCC,IAAI,EAAE,IAAAC,kBAAM,GAAE,CAACC,MAAM,CAAC,YAAY,CAAC;MACnCC,IAAI,EAAE,4BAA4B;MAClCC,SAAS,EAAE;IACf,CAAC,CAAC;IAAA;IAJKC,KAAK;IAAEC,QAAQ;EAKtB,IAAMC,MAAM,aAAMd,WAAW,cAAW;EACxC,IAAMe,MAAM,GAAG;IACXf,WAAW,EAAEc,MAAM;IACnBb,EAAE,EAAFA,EAAE;IACFG,WAAW,EAAXA,WAAW;IACXQ,KAAK,EAALA,KAAK;IACLC,QAAQ,EAARA;EACJ,CAAC;EACD,oBAAQG,iBAAK,CAACC,aAAa,CAAC,KAAK,EAAE;IAAEC,SAAS,EAAEJ;EAAO,CAAC,eACpDE,iBAAK,CAACC,aAAa,CAACE,gBAAI,EAAEC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEN,MAAM,EAAE;IAAEb,WAAW,EAAEA,WAAW;IAAEC,SAAS,EAAEA,SAAS;IAAEE,YAAY,EAAEA;EAAa,CAAC,CAAC,CAAC,eACpIW,iBAAK,CAACC,aAAa,CAAC,KAAK,EAAE;IAAEC,SAAS,YAAKJ,MAAM;EAAU,CAAC,eACxDE,iBAAK,CAACC,aAAa,CAACK,eAAG,EAAEF,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEN,MAAM,CAAC,CAAC,eACnDC,iBAAK,CAACC,aAAa,CAACM,iBAAK,EAAEH,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEN,MAAM,CAAC,CAAC,CAAC,CAAC;AACnE,CAAC;AAAC,eACahB,QAAQ;AAAA"}

package/lib/vtx-housing-estate-modal/components/OverView/index.less

@@ -0,0 +1,250 @@
+@import '../../style/index';
+
+.summary-item {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    color: var(--info-color);
+    .summary-item-text {
+        & > p:nth-child(2) {
+            color: #9ba8b0;
+            span {
+                color: var(--info-color);
+                font-size: 20px;
+                margin-right: 8px;
+            }
+        }
+    }
+}
+
+.@{prefix-cls}-overview {
+    display: flex;
+    gap: 10px;
+    height: 800px;
+    padding: 10px;
+    &-left {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 360px;
+        padding: 10px;
+        background: var(--bg-color2);
+        &-map {
+            height: 260px;
+        }
+        &-info {
+            position: relative;
+            flex: 1;
+            padding: 10px;
+            .vm-estate-summary {
+                position: absolute;
+                right: 29px;
+                &-img {
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                    position: relative;
+                    padding-right: 16px;
+                    width: 136px;
+                    height: 50px;
+                    color: var(--info-color);
+                    span {
+                        z-index: 1;
+                    }
+                    img {
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        bottom: 0;
+                    }
+                }
+                &-text {
+                    margin-top: -12px;
+                    text-align: center;
+                    span:nth-child(1) {
+                        font-size: 26px;
+                        margin-right: 8px;
+                    }
+                }
+            }
+        }
+    }
+    &-middle {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        flex: 1;
+    }
+    &-hot {
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+        height: 290px;
+        background: var(--bg-color2);
+        &-title {
+            display: flex;
+            justify-content: space-between;
+        }
+        &-summary {
+            display: flex;
+            justify-content: space-around;
+            height: 100%;
+            .garbage-summary {
+                width: 100px;
+                height: 100%;
+                text-align: center;
+                color: var(--info-color);
+                padding-top: 12px;
+                &-bucket {
+                    margin: 0 auto;
+                    margin-bottom: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 45px;
+                    height: 52px;
+                }
+                p {
+                    span {
+                        font-size: 18px;
+                        margin-right: 4px;
+                    }
+                }
+            }
+        }
+        &-buttons {
+            padding: 8px 0;
+            text-align: center;
+        }
+        &-chart {
+            flex: 1;
+        }
+    }
+    &-trend {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background: var(--bg-color2);
+        padding: 10px;
+        &-chart {
+            flex: 1;
+        }
+    }
+    &-right {
+        height: 100%;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    &-manage {
+        // height: 315px;
+        padding: 10px;
+        background: var(--bg-color2);
+        color: var(--info-color);
+        display: flex;
+        flex-direction: column;
+        &-top {
+            display: flex;
+            .top-item {
+                display: flex;
+                gap: 32px;
+                align-items: center;
+                padding-left: 24px;
+                margin-bottom: 16px;
+                padding-right: 8px;
+                .img {
+                    text-align: center;
+                    .name--1 {
+                        color: #1febff;
+                    }
+                    .name--2 {
+                        color: #7fffd8;
+                    }
+                    img {
+                        margin-top: -10px;
+                    }
+                }
+                .statistic {
+                    flex: 1;
+                    & > div:nth-child(1) {
+                        padding-left: 16px;
+                        display: flex;
+                        justify-content: space-between;
+                        background: url('../../imgs/manage-bg-1.png') no-repeat;
+                        background-size: 100% 100%;
+                        margin-bottom: 16px;
+                    }
+                    & > div:nth-child(2) {
+                        padding-left: 16px;
+                        display: flex;
+                        justify-content: space-between;
+                        background: url('../../imgs/manage-bg-2.png') no-repeat;
+                        background-size: 100% 100%;
+                    }
+                    .statistic-value--1 {
+                        font-size: 20px;
+                        font-weight: 400;
+                        color: #50ffdc;
+                        background: linear-gradient(
+                            0deg,
+                            #1febff 0%,
+                            #7ddcff 49.90234375%,
+                            #ffffff 100%
+                        );
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                    }
+                    .statistic-value--2 {
+                        font-size: 20px;
+                        font-weight: 400;
+                        color: #5cff84;
+                        background: linear-gradient(
+                            0deg,
+                            #1febff 0%,
+                            #7dffd0 49.90234375%,
+                            #ffffff 100%
+                        );
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                    }
+                }
+            }
+        }
+        &-bottom {
+            height: 50px;
+            padding: 0 20px;
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+    &-rightbottom {
+        flex: 1;
+        padding: 10px;
+        background: var(--bg-color2);
+        color: var(--info-color);
+        display: flex;
+        flex-direction: column;
+        &--buttons {
+            margin-bottom: 16px;
+            text-align: center;
+        }
+        &-echarts {
+            display: flex;
+            .content {
+                width: 50%;
+            }
+        }
+        &--pie {
+        }
+        &--gauges {
+            flex: 1;
+            display: flex;
+            .gauges-chart {
+                flex: 1;
+            }
+        }
+    }
+}

package/lib/vtx-housing-estate-modal/components/SPJK/index.css

@@ -0,0 +1,4 @@
+.estate-spjk {
+  height: 800px;
+  padding: 10px 20px;
+}