@kq_npm/client3d_webgl_vue 3.0.7-beta → 3.0.9-beta

package/shadowanalysis/style/shadowanalysis.css

@@ -1 +1 @@
-.kq3d-shadow-analysis{z-index:999;width:372px;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime{margin-bottom:8px}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq3d-shadow-analysis-span{color:var(--kq-text-color-regular)}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider{width:86%;display:inline-block;padding:10px 20px 20px;background-color:var(--kq-fill-color-light)}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider .kq-slider__button{width:12px;height:12px}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider .kq-slider__marks-text{margin-top:8px;text-align:center}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider .kq-slider__marks-text span{display:block}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider .kq-slider__stop{display:none}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider .spanLine{width:1px;height:8px;background-color:#ccc}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq3d-shadow-analysis-timeline .kq-icon{font-size:28px;height:66px;cursor:pointer}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .colDate{line-height:32px;font-size:var(--kq-font-size-base)}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .colTime{line-height:62px;font-size:var(--kq-font-size-base)}.kq3d-shadow-analysis .kq3d-shadow-analysis-tip{color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}.kq3d-shadow-analysis .kq3d-shadow-analysis-tip p{margin-top:8px;margin-bottom:16px}.kq3d-shadow-analysis .kq-collapse{border:unset}.kq3d-shadow-analysis .kq-collapse .kq-collapse-item__header{border:unset;height:38px;background-color:var(--kq-fill-color-light);font-weight:700;padding:0 16px;font-size:16px}.kq3d-shadow-analysis .kq-collapse .kq-collapse-item__arrow{margin:0 0 0 auto}.kq3d-shadow-analysis .kq-collapse .kq-collapse-item__wrap .kq-collapse-item__content{padding-bottom:unset;border:unset;padding-top:10px}.kq3d-shadow-analysis .kq-collapse .kq-row{display:block}.kq3d-shadow-analysis .kq-form-item{margin-bottom:8px}.kq3d-shadow-analysis .kq-form-item__content{text-align:end;display:block}.kq3d-shadow-analysis .kq-date-editor.kq-input,.kq3d-shadow-analysis .kq-date-editor.kq-input__wrapper{width:100%}.kq3d-shadow-analysis .kq-slider{width:93%;padding-left:7px}.kq3d-shadow-analysis .kq-slider .kq-slider__button{width:14px;height:14px}.kq3d-shadow-analysis .kq-input-number.is-controls-right{width:65px}.kq3d-shadow-analysis .kq-input-number.is-controls-right .kq-input-number__decrease,.kq3d-shadow-analysis .kq-input-number.is-controls-right .kq-input-number__increase{width:20px}.kq3d-shadow-analysis .kq-col-8 .kq-input-number .kq-input__wrapper,.kq3d-shadow-analysis .kq-input-number.is-controls-right .kq-input__wrapper{padding-left:0;padding-right:20px}.kq3d-shadow-analysis .kq-color-picker,.kq3d-shadow-analysis .kq-color-picker .kq-color-picker__mask,.kq3d-shadow-analysis .kq-color-picker .kq-color-picker__trigger{width:100%}.kq3d-shadow-analysis .kq3d-shadow-analysis-legend img{width:195px;height:24px;margin:0 10px}.kq3d-shadow-analysis .kq3d-shadow-analysis-legend span{line-height:24px;vertical-align:top}.kq3d-shadow-analysis .kq3d-shadow-analysis-footer{text-align:right;padding:16px 0 0}
+.kq3d-shadow-analysis{z-index:999;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-shadow-analysis .kq3d-shadow-analysis-box{width:372px}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime{margin-bottom:8px}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq3d-shadow-analysis-span{color:var(--kq-text-color-regular)}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider{width:86%;display:inline-block;padding:10px 20px 20px;background-color:var(--kq-fill-color-light)}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider .kq-slider__button{width:12px;height:12px}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider .kq-slider__marks-text{margin-top:8px;text-align:center}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider .kq-slider__marks-text span{display:block}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider .kq-slider__stop{display:none}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq-slider .spanLine{width:1px;height:8px;background-color:#ccc}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .kq3d-shadow-analysis-timeline .kq-icon{font-size:28px;height:66px;cursor:pointer}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .colDate{line-height:32px;font-size:var(--kq-font-size-base)}.kq3d-shadow-analysis .kq3d-shadow-analysis-datetime .colTime{line-height:62px;font-size:var(--kq-font-size-base)}.kq3d-shadow-analysis .kq3d-shadow-analysis-tip{color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}.kq3d-shadow-analysis .kq3d-shadow-analysis-tip p{margin-top:8px;margin-bottom:16px}.kq3d-shadow-analysis .kq-collapse{border:unset}.kq3d-shadow-analysis .kq-collapse .kq-collapse-item__header{border:unset;height:38px;background-color:var(--kq-fill-color-light);font-weight:700;padding:0 16px;font-size:16px}.kq3d-shadow-analysis .kq-collapse .kq-collapse-item__arrow{margin:0 0 0 auto}.kq3d-shadow-analysis .kq-collapse .kq-collapse-item__wrap .kq-collapse-item__content{padding-bottom:unset;border:unset;padding-top:10px}.kq3d-shadow-analysis .kq-collapse .kq-row{display:block}.kq3d-shadow-analysis .kq-form-item{margin-bottom:8px}.kq3d-shadow-analysis .kq-form-item__content{text-align:end;display:block}.kq3d-shadow-analysis .kq-date-editor.kq-input,.kq3d-shadow-analysis .kq-date-editor.kq-input__wrapper{width:100%}.kq3d-shadow-analysis .kq-slider{width:93%;padding-left:7px}.kq3d-shadow-analysis .kq-slider .kq-slider__button{width:14px;height:14px}.kq3d-shadow-analysis .kq-input-number.is-controls-right{width:65px}.kq3d-shadow-analysis .kq-input-number.is-controls-right .kq-input-number__decrease,.kq3d-shadow-analysis .kq-input-number.is-controls-right .kq-input-number__increase{width:20px}.kq3d-shadow-analysis .kq-col-8 .kq-input-number .kq-input__wrapper,.kq3d-shadow-analysis .kq-input-number.is-controls-right .kq-input__wrapper{padding-left:0;padding-right:20px}.kq3d-shadow-analysis .kq-color-picker,.kq3d-shadow-analysis .kq-color-picker .kq-color-picker__mask,.kq3d-shadow-analysis .kq-color-picker .kq-color-picker__trigger{width:100%}.kq3d-shadow-analysis .kq3d-shadow-analysis-legend img{width:195px;height:24px;margin:0 10px}.kq3d-shadow-analysis .kq3d-shadow-analysis-legend span{line-height:24px;vertical-align:top}.kq3d-shadow-analysis .kq3d-shadow-analysis-footer{text-align:right;padding:16px 0 0}

package/sightlineanalysis/index.js

@@ -72,169 +72,6 @@ module.exports = function (cssWithMappingToString) {
   return list;
 };
 
-/***/ }),
-
-/***/ 519:
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": function() { return /* reexport */ HeaderTemp; }
-});
-
-// EXTERNAL MODULE: external {"root":"Vue","commonjs":"vue","commonjs2":"vue","amd":"vue"}
-var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_ = __webpack_require__(637);
-// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
-var util_ = __webpack_require__(9519);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/headertemp/HeaderTemp.vue?vue&type=script&setup=true&lang=js
-
-const _hoisted_1 = {
-  class: "kq-control-header-temp"
-};
-const _hoisted_2 = {
-  class: "_title"
-};
-
-
-const __default__ = {
-  name: "Kq3dHeaderTemp"
-};
-/* harmony default export */ var HeaderTempvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
-  props: {
-    // 是否显示阴影效果
-    showShadow: {
-      type: Boolean,
-      default: true
-    },
-    // HeaderTemp标题
-    headerTempTitle: {
-      type: String,
-      default: ""
-    },
-    // HeaderTemp图标
-    headerTempIcon: {
-      type: Object
-    },
-    // HeaderTemp是否折叠
-    isCollapse: {
-      type: Boolean,
-      default: false
-    },
-    // HeaderTemp Title&Icon的位置
-    isRight: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  setup(__props, {
-    expose
-  }) {
-    const props = __props;
-    const proxy = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.getCurrentInstance)(); // 获取组件传参
-    // 图标组件
-
-    let iconBtn = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null);
-    let isCollapse = props.isCollapse;
-    (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
-      iconBtn.value = props.headerTempIcon;
-      let dom = proxy.parent.vnode.el;
-
-      if (!props.isRight) {
-        (0,util_.addClass)(dom, ["kq-is-show", "kq-is-left"]);
-      }
-
-      if (isCollapse) {
-        if (props.showShadow) {
-          (0,util_.addClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-          (0,util_.removeClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-        } else {
-          (0,util_.addClass)(dom, "kq-is-hide");
-          (0,util_.removeClass)(dom, "kq-is-show");
-        }
-      } else {
-        if (props.showShadow) {
-          (0,util_.removeClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-          (0,util_.addClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-        } else {
-          (0,util_.removeClass)(dom, "kq-is-hide");
-          (0,util_.addClass)(dom, "kq-is-show");
-        }
-      }
-    }); // 图标按钮点击事件
-
-    function btnClick() {
-      isCollapse = !isCollapse;
-      let dom = proxy.parent.vnode.el;
-
-      if (isCollapse) {
-        // 折叠
-        if (props.showShadow) {
-          (0,util_.addClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-          (0,util_.removeClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-        } else {
-          (0,util_.addClass)(dom, "kq-is-hide");
-          (0,util_.removeClass)(dom, "kq-is-show");
-        }
-      } else {
-        // 展开
-        if (props.showShadow) {
-          (0,util_.addClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-          (0,util_.removeClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-        } else {
-          (0,util_.addClass)(dom, "kq-is-show");
-          (0,util_.removeClass)(dom, "kq-is-hide");
-        }
-      }
-    }
-
-    expose({
-      btnClick
-    });
-    return (_ctx, _cache) => {
-      const _component_kq_icon = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-icon");
-
-      return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("h4", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)(__props.headerTempTitle), 1
-      /* TEXT */
-      ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
-        class: "_btn kq-control-header-temp_btn",
-        onClick: btnClick
-      }, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
-        size: 16
-      }, {
-        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(iconBtn))))]),
-        _: 1
-        /* STABLE */
-
-      })])]);
-    };
-  }
-
-}));
-;// CONCATENATED MODULE: ./src/webgl/headertemp/HeaderTemp.vue?vue&type=script&setup=true&lang=js
- 
-;// CONCATENATED MODULE: ./src/webgl/headertemp/HeaderTemp.vue
-
-
-
-const __exports__ = HeaderTempvue_type_script_setup_true_lang_js;
-
-/* harmony default export */ var HeaderTemp = (__exports__);
-// EXTERNAL MODULE: external "@kq_npm/client_common_vue/init.js"
-var init_js_ = __webpack_require__(5406);
-var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_);
-;// CONCATENATED MODULE: ./src/webgl/headertemp/index.js
-
-
-
-HeaderTemp.install = (Vue, opts) => {
-  init_js_default()(Vue, opts);
-  Vue.component(HeaderTemp.name, HeaderTemp);
-};
-
-
-
 /***/ }),
 
 /***/ 6868:
@@ -958,11 +795,14 @@ class SightlineAnalysisViewModel {
 }
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/sightlineanalysis/SightlineAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
+  class: "kq3d-sightline-analysis-box"
+};
+const _hoisted_2 = {
   class: "kq3d-sightline-analysis-footer"
 };
 
@@ -984,6 +824,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -1026,9 +871,22 @@ const __default__ = {
       highlightObstacle: props.settingParams && props.settingParams.highlightObstacle !== undefined || false,
       isLabel: props.settingParams && props.settingParams.isLabel !== undefined || true
     });
-    let viewModel = null;
+    let viewModel = null; // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
-      //父组件ScenceView初始化完成后执行
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      }); //父组件ScenceView初始化完成后执行
+
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -1043,6 +901,16 @@ const __default__ = {
         }
       });
     });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    };
 
     function paramsChanged(key) {
       switch (key) {
@@ -1115,17 +983,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-sightline-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).sightlineAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         class: "kq3d-sightline-analysis-tip"
       }, {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).sightTips), 1
@@ -1239,7 +1106,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
         onClick: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)(addSeePoint, ["stop"]),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).seePoint,
         type: "primary"
@@ -1277,7 +1144,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["onClick", "title"])])], 2
+      , ["onClick", "title"])])])], 2
       /* CLASS */
       );
     };

package/sightlineanalysis/style/sightlineanalysis.css

@@ -1 +1 @@
-.kq3d-sightline-analysis{z-index:999;width:392px;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-sightline-analysis .kq3d-sightline-analysis-tip{color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}.kq3d-sightline-analysis .kq3d-sightline-analysis-tip p{margin-top:0;margin-bottom:16px}.kq3d-sightline-analysis .kq-collapse{border:unset}.kq3d-sightline-analysis .kq-collapse .kq-collapse-item__header{border:unset;height:38px;background-color:var(--kq-fill-color-light);font-weight:700;padding:0 16px;font-size:16px}.kq3d-sightline-analysis .kq-collapse .kq-collapse-item__arrow{margin:0 0 0 auto}.kq3d-sightline-analysis .kq-collapse .kq-collapse-item__wrap .kq-collapse-item__content{padding-bottom:unset;border:unset;padding-top:10px}.kq3d-sightline-analysis .kq-form-item{margin-bottom:8px}.kq3d-sightline-analysis .kq-form-item__content{text-align:end;display:block}.kq3d-sightline-analysis .kq-row{margin-bottom:5px;display:block}.kq3d-sightline-analysis .kq-slider{width:93%;padding-left:7px}.kq3d-sightline-analysis .kq-slider .kq-slider__button{width:14px;height:14px}.kq3d-sightline-analysis .kq-input-number.is-controls-right{width:65px}.kq3d-sightline-analysis .kq-input-number.is-controls-right .kq-input-number__decrease,.kq3d-sightline-analysis .kq-input-number.is-controls-right .kq-input-number__increase{width:20px}.kq3d-sightline-analysis .kq-col-8 .kq-input-number .kq-input__wrapper,.kq3d-sightline-analysis .kq-input-number.is-controls-right .kq-input__wrapper{padding-left:0;padding-right:20px}.kq3d-sightline-analysis .kq-color-picker,.kq3d-sightline-analysis .kq-color-picker .kq-color-picker__mask,.kq3d-sightline-analysis .kq-color-picker .kq-color-picker__trigger{width:100%}.kq3d-sightline-analysis .kq3d-sightline-analysis-footer{text-align:right;padding:16px 0 0}
+.kq3d-sightline-analysis{z-index:999;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-sightline-analysis .kq3d-sightline-analysis-box{width:392px}.kq3d-sightline-analysis .kq3d-sightline-analysis-tip{color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}.kq3d-sightline-analysis .kq3d-sightline-analysis-tip p{margin-top:0;margin-bottom:16px}.kq3d-sightline-analysis .kq-collapse{border:unset}.kq3d-sightline-analysis .kq-collapse .kq-collapse-item__header{border:unset;height:38px;background-color:var(--kq-fill-color-light);font-weight:700;padding:0 16px;font-size:16px}.kq3d-sightline-analysis .kq-collapse .kq-collapse-item__arrow{margin:0 0 0 auto}.kq3d-sightline-analysis .kq-collapse .kq-collapse-item__wrap .kq-collapse-item__content{padding-bottom:unset;border:unset;padding-top:10px}.kq3d-sightline-analysis .kq-form-item{margin-bottom:8px}.kq3d-sightline-analysis .kq-form-item__content{text-align:end;display:block}.kq3d-sightline-analysis .kq-row{margin-bottom:5px;display:block}.kq3d-sightline-analysis .kq-slider{width:93%;padding-left:7px}.kq3d-sightline-analysis .kq-slider .kq-slider__button{width:14px;height:14px}.kq3d-sightline-analysis .kq-input-number.is-controls-right{width:65px}.kq3d-sightline-analysis .kq-input-number.is-controls-right .kq-input-number__decrease,.kq3d-sightline-analysis .kq-input-number.is-controls-right .kq-input-number__increase{width:20px}.kq3d-sightline-analysis .kq-col-8 .kq-input-number .kq-input__wrapper,.kq3d-sightline-analysis .kq-input-number.is-controls-right .kq-input__wrapper{padding-left:0;padding-right:20px}.kq3d-sightline-analysis .kq-color-picker,.kq3d-sightline-analysis .kq-color-picker .kq-color-picker__mask,.kq3d-sightline-analysis .kq-color-picker .kq-color-picker__trigger{width:100%}.kq3d-sightline-analysis .kq3d-sightline-analysis-footer{text-align:right;padding:16px 0 0}

package/skylineanalysis/index.js

@@ -2,169 +2,6 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 519:
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": function() { return /* reexport */ HeaderTemp; }
-});
-
-// EXTERNAL MODULE: external {"root":"Vue","commonjs":"vue","commonjs2":"vue","amd":"vue"}
-var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_ = __webpack_require__(637);
-// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
-var util_ = __webpack_require__(9519);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/headertemp/HeaderTemp.vue?vue&type=script&setup=true&lang=js
-
-const _hoisted_1 = {
-  class: "kq-control-header-temp"
-};
-const _hoisted_2 = {
-  class: "_title"
-};
-
-
-const __default__ = {
-  name: "Kq3dHeaderTemp"
-};
-/* harmony default export */ var HeaderTempvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
-  props: {
-    // 是否显示阴影效果
-    showShadow: {
-      type: Boolean,
-      default: true
-    },
-    // HeaderTemp标题
-    headerTempTitle: {
-      type: String,
-      default: ""
-    },
-    // HeaderTemp图标
-    headerTempIcon: {
-      type: Object
-    },
-    // HeaderTemp是否折叠
-    isCollapse: {
-      type: Boolean,
-      default: false
-    },
-    // HeaderTemp Title&Icon的位置
-    isRight: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  setup(__props, {
-    expose
-  }) {
-    const props = __props;
-    const proxy = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.getCurrentInstance)(); // 获取组件传参
-    // 图标组件
-
-    let iconBtn = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null);
-    let isCollapse = props.isCollapse;
-    (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
-      iconBtn.value = props.headerTempIcon;
-      let dom = proxy.parent.vnode.el;
-
-      if (!props.isRight) {
-        (0,util_.addClass)(dom, ["kq-is-show", "kq-is-left"]);
-      }
-
-      if (isCollapse) {
-        if (props.showShadow) {
-          (0,util_.addClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-          (0,util_.removeClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-        } else {
-          (0,util_.addClass)(dom, "kq-is-hide");
-          (0,util_.removeClass)(dom, "kq-is-show");
-        }
-      } else {
-        if (props.showShadow) {
-          (0,util_.removeClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-          (0,util_.addClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-        } else {
-          (0,util_.removeClass)(dom, "kq-is-hide");
-          (0,util_.addClass)(dom, "kq-is-show");
-        }
-      }
-    }); // 图标按钮点击事件
-
-    function btnClick() {
-      isCollapse = !isCollapse;
-      let dom = proxy.parent.vnode.el;
-
-      if (isCollapse) {
-        // 折叠
-        if (props.showShadow) {
-          (0,util_.addClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-          (0,util_.removeClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-        } else {
-          (0,util_.addClass)(dom, "kq-is-hide");
-          (0,util_.removeClass)(dom, "kq-is-show");
-        }
-      } else {
-        // 展开
-        if (props.showShadow) {
-          (0,util_.addClass)(dom, ["kq-is-show", "kq-box-shadow"]);
-          (0,util_.removeClass)(dom, ["kq-is-hide", "kq-light-shadow"]);
-        } else {
-          (0,util_.addClass)(dom, "kq-is-show");
-          (0,util_.removeClass)(dom, "kq-is-hide");
-        }
-      }
-    }
-
-    expose({
-      btnClick
-    });
-    return (_ctx, _cache) => {
-      const _component_kq_icon = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-icon");
-
-      return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("h4", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)(__props.headerTempTitle), 1
-      /* TEXT */
-      ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
-        class: "_btn kq-control-header-temp_btn",
-        onClick: btnClick
-      }, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
-        size: 16
-      }, {
-        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(iconBtn))))]),
-        _: 1
-        /* STABLE */
-
-      })])]);
-    };
-  }
-
-}));
-;// CONCATENATED MODULE: ./src/webgl/headertemp/HeaderTemp.vue?vue&type=script&setup=true&lang=js
- 
-;// CONCATENATED MODULE: ./src/webgl/headertemp/HeaderTemp.vue
-
-
-
-const __exports__ = HeaderTempvue_type_script_setup_true_lang_js;
-
-/* harmony default export */ var HeaderTemp = (__exports__);
-// EXTERNAL MODULE: external "@kq_npm/client_common_vue/init.js"
-var init_js_ = __webpack_require__(5406);
-var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_);
-;// CONCATENATED MODULE: ./src/webgl/headertemp/index.js
-
-
-
-HeaderTemp.install = (Vue, opts) => {
-  init_js_default()(Vue, opts);
-  Vue.component(HeaderTemp.name, HeaderTemp);
-};
-
-
-
-/***/ }),
-
 /***/ 3084:
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -588,19 +425,22 @@ var gis_utils_ = __webpack_require__(826);
 var SkylineAnalysisViewModel = __webpack_require__(3084);
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/webgl/headertemp/index.js + 3 modules
-var headertemp = __webpack_require__(519);
+// EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/util"
+var util_ = __webpack_require__(9519);
 ;// CONCATENATED MODULE: external "echarts"
 var external_echarts_namespaceObject = require("echarts");
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/skylineanalysis/SkylineAnalysis.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
-  class: "kq3d-skyline-analysis-footer"
+  class: "kq3d-skyline-analysis-box"
 };
 const _hoisted_2 = {
-  class: "kq3d-skyline-analysis-result"
+  class: "kq3d-skyline-analysis-footer"
 };
 const _hoisted_3 = {
+  class: "kq3d-skyline-analysis-result"
+};
+const _hoisted_4 = {
   key: 0,
   id: "resultEcahrt",
   class: "resultEcahrt"
@@ -626,6 +466,11 @@ const __default__ = {
       type: Boolean,
       default: true
     },
+
+    /**
+     * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
+     */
+    position: [String, Object],
     // 是否生成HeaderTemp
     showHeaderTemp: {
       type: Boolean,
@@ -683,8 +528,21 @@ const __default__ = {
       // 限高体透明度范围最大值
       skylineWidth: 2 // 天际线宽度
 
-    });
+    }); // 组件容器Ref
+
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
+    let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onMounted)(() => {
+      (0,util_.updatePosition)(boxRef.value, props);
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.position, (newVal, oldVal) => {
+        (0,util_.updatePosition)(boxRef.value, props);
+      });
+      watchCreateHeaderTemp();
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.watch)(() => props.showHeaderTemp, (newVal, oldVal) => {
+        watchCreateHeaderTemp();
+      });
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           language.value = scenceView._language;
@@ -698,7 +556,18 @@ const __default__ = {
           viewModel._skylineAnalysisChartTitle = language.value["skylineAnalysisChartTitle"];
         }
       });
-    }); // 提取天际线
+    });
+    /**
+     * @description 监听header生成
+     */
+
+    const watchCreateHeaderTemp = () => {
+      if (props.showHeaderTemp) {
+        // 生成headerTemp
+        headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef);
+      }
+    }; // 提取天际线
+
 
     function pickSkyLine() {
       resultEcahrtVis.value = true;
@@ -783,17 +652,16 @@ const __default__ = {
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-skyline-analysis", {
           'kq-box-shadow': __props.showShadow
-        }])
-      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headertemp["default"]), {
+        }]),
+        ref_key: "boxRef",
+        ref: boxRef
+      }, [__props.showHeaderTemp ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveDynamicComponent)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headerTemp)), {
         key: 0,
-        showShadow: __props.showShadow,
-        headerTempTitle: __props.headerTempTitle || (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).skylineAnalysis,
-        headerTempIcon: __props.headerTempIcon,
-        isCollapse: __props.isCollapseHeaderTemp,
-        isRight: __props.isRight
-      }, null, 8
-      /* PROPS */
-      , ["showShadow", "headerTempTitle", "headerTempIcon", "isCollapse", "isRight"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_collapse, {
+        ref_key: "headerTempRef",
+        ref: headerTempRef
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_collapse, {
         "model-value": (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(collapseValue),
         class: "kq3d-skyline-analysis-collapse"
       }, {
@@ -971,7 +839,7 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
         gutter: 20,
         class: "btnClass"
       }, {
@@ -1064,7 +932,7 @@ const __default__ = {
         _: 1
         /* STABLE */
 
-      })]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(resultEcahrtVis) ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_3)) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true)])], 2
+      })]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_3, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(resultEcahrtVis) ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("div", _hoisted_4)) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true)])])], 2
       /* CLASS */
       );
     };

package/skylineanalysis/style/skylineanalysis.css

@@ -1 +1 @@
-.kq3d-skyline-analysis{z-index:999;width:332px;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-skyline-analysis .kq3d-skyline-analysis-tip{color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}.kq3d-skyline-analysis .kq3d-skyline-analysis-tip p{margin-top:0;margin-bottom:16px}.kq3d-skyline-analysis .kq3d-skyline-analysis-collapse .kq-row{display:block}.kq3d-skyline-analysis .kq3d-skyline-analysis-collapse .kq-divider--horizontal{margin:0}.kq3d-skyline-analysis .kq-collapse{border:unset}.kq3d-skyline-analysis .kq-collapse .kq-collapse-item__header{border:unset;height:38px;background-color:var(--kq-fill-color-light);font-weight:700;padding:0 16px;font-size:16px}.kq3d-skyline-analysis .kq-collapse .kq-collapse-item__arrow{margin:0 0 0 auto}.kq3d-skyline-analysis .kq-collapse .kq-collapse-item__wrap .kq-collapse-item__content{padding-bottom:unset;border:unset;padding-top:10px}.kq3d-skyline-analysis .kq-form-item{margin-bottom:8px}.kq3d-skyline-analysis .kq-form-item__content{text-align:end;display:block}.kq3d-skyline-analysis .kq-slider{width:93%;padding-left:7px}.kq3d-skyline-analysis .kq-slider .kq-slider__button{width:14px;height:14px}.kq3d-skyline-analysis .kq-input-number.is-controls-right{width:65px}.kq3d-skyline-analysis .kq-input-number.is-controls-right .kq-input-number__decrease,.kq3d-skyline-analysis .kq-input-number.is-controls-right .kq-input-number__increase{width:20px}.kq3d-skyline-analysis .kq-col-8 .kq-input-number .kq-input__wrapper,.kq3d-skyline-analysis .kq-input-number.is-controls-right .kq-input__wrapper{padding-left:0;padding-right:20px}.kq3d-skyline-analysis .kq-color-picker,.kq3d-skyline-analysis .kq-color-picker .kq-color-picker__mask,.kq3d-skyline-analysis .kq-color-picker .kq-color-picker__trigger{width:100%}.kq3d-skyline-analysis .kq3d-skyline-analysis-footer{padding-top:16px}.kq3d-skyline-analysis .kq3d-skyline-analysis-footer .btnClass{margin-bottom:8px}.kq3d-skyline-analysis .kq3d-skyline-analysis-footer .kq-button{width:100%}.kq3d-skyline-analysis .kq3d-skyline-analysis-result .resultEcahrt{margin-top:16px;padding:16px;height:285px;background:var(--kq-fill-color-light);border:1px solid var(--kq-border-color-light);border-radius:4px}
+.kq3d-skyline-analysis{z-index:999;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-skyline-analysis .kq3d-skyline-analysis-box{width:332px}.kq3d-skyline-analysis .kq3d-skyline-analysis-tip{color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}.kq3d-skyline-analysis .kq3d-skyline-analysis-tip p{margin-top:0;margin-bottom:16px}.kq3d-skyline-analysis .kq3d-skyline-analysis-collapse .kq-row{display:block}.kq3d-skyline-analysis .kq3d-skyline-analysis-collapse .kq-divider--horizontal{margin:0}.kq3d-skyline-analysis .kq-collapse{border:unset}.kq3d-skyline-analysis .kq-collapse .kq-collapse-item__header{border:unset;height:38px;background-color:var(--kq-fill-color-light);font-weight:700;padding:0 16px;font-size:16px}.kq3d-skyline-analysis .kq-collapse .kq-collapse-item__arrow{margin:0 0 0 auto}.kq3d-skyline-analysis .kq-collapse .kq-collapse-item__wrap .kq-collapse-item__content{padding-bottom:unset;border:unset;padding-top:10px}.kq3d-skyline-analysis .kq-form-item{margin-bottom:8px}.kq3d-skyline-analysis .kq-form-item__content{text-align:end;display:block}.kq3d-skyline-analysis .kq-slider{width:93%;padding-left:7px}.kq3d-skyline-analysis .kq-slider .kq-slider__button{width:14px;height:14px}.kq3d-skyline-analysis .kq-input-number.is-controls-right{width:65px}.kq3d-skyline-analysis .kq-input-number.is-controls-right .kq-input-number__decrease,.kq3d-skyline-analysis .kq-input-number.is-controls-right .kq-input-number__increase{width:20px}.kq3d-skyline-analysis .kq-col-8 .kq-input-number .kq-input__wrapper,.kq3d-skyline-analysis .kq-input-number.is-controls-right .kq-input__wrapper{padding-left:0;padding-right:20px}.kq3d-skyline-analysis .kq-color-picker,.kq3d-skyline-analysis .kq-color-picker .kq-color-picker__mask,.kq3d-skyline-analysis .kq-color-picker .kq-color-picker__trigger{width:100%}.kq3d-skyline-analysis .kq3d-skyline-analysis-footer{padding-top:16px}.kq3d-skyline-analysis .kq3d-skyline-analysis-footer .btnClass{margin-bottom:8px}.kq3d-skyline-analysis .kq3d-skyline-analysis-footer .kq-button{width:100%}.kq3d-skyline-analysis .kq3d-skyline-analysis-result .resultEcahrt{margin-top:16px;padding:16px;height:285px;background:var(--kq-fill-color-light);border:1px solid var(--kq-border-color-light);border-radius:4px}