@vipl520/dk-ui 1.0.13 → 1.0.14

package/es/page-diy/src/views/min/DkMinHotArea.vue.mjs

@@ -100,7 +100,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ? (openBlock(), createElementBlock("img", {
           key: 0,
           src: $props.hotData.background,
-          alt: ""
+          alt: "",
+          style: {"width":"100%"}
         }, null, 8 /* PROPS */, _hoisted_2))
       : (openBlock(), createBlock(_component_el_empty, {
           key: 1,

package/es/page-diy/src/views/min/DkMinHotArea.vue.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DkMinHotArea.vue.mjs","sources":["../../../../../src/page-diy/src/views/min/DkMinHotArea.vue"],"sourcesContent":["<template>\n  <div ref=\"el\" class=\"dk-min-area\">\n    <img v-if=\"hotData.background\" :src=\"hotData.background\" alt=\"\" />\n    <el-empty v-else description=\"请上传背景图\"></el-empty>\n    <div\n      v-for=\"(view, index) in views\"\n      :key=\"index\"\n      :style=\"{ position: 'absolute', ...view.css, background: showMask ? '#0008' : '#0004' }\"\n    >\n      <!-- 可以在这里放置热图链接或覆盖层 -->\n      <div :style=\"{ width: view.css.width, height: view.css.height }\" class=\"hot-item\">\n        {{ index + 1 }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { onMounted, ref, onUnmounted, watch } from 'vue'\n\nexport default {\n  name: 'DkMinHotArea',\n  props: {\n    hotData: {\n      default: () => ({}),\n      type: Object,\n    },\n    showMask: {\n      default: false,\n      type: Boolean,\n    },\n  },\n  setup(props) {\n    const el = ref(null)\n    let ro = null\n    const containerWidth = ref(0)\n\n    const views = ref([])\n\n    // const\n    onMounted(() => {\n      ro = new (window.ResizeObserver || ResizeObserver)(handleResize)\n      ro.observe(el.value)\n      // 初始化容器宽度\n      containerWidth.value = el.value.clientWidth\n      // 计算并转换热图区域的位置和尺寸\n      adjustHotspots()\n    })\n\n    onUnmounted(() => {\n      if (ro) {\n        ro.disconnect()\n      }\n    })\n\n    watch(\n      () => props.hotData.views,\n      () => {\n        adjustHotspots()\n      },\n      {\n        deep: true,\n      }\n    )\n\n    function handleResize(entries) {\n      entries.forEach((entry) => {\n        if (entry.target === el.value) {\n          containerWidth.value = entry.contentRect.width\n          adjustHotspots()\n        }\n      })\n    }\n\n    function adjustHotspots() {\n      views.value = JSON.parse(JSON.stringify(props.hotData.views))\n      // 根据容器宽度调整热图区域的位置与尺寸\n      views.value.forEach((view) => {\n        const { left, top, width: originalWidth, height: originalHeight } = view.css\n        // 计算实际宽度和高度，假设按比例缩放\n        const actualWidth = Math.round(originalWidth * (containerWidth.value / props.hotData.width))\n        const actualHeight = Math.round(originalHeight * (containerWidth.value / props.hotData.width))\n\n        // 计算实际left和top\n        const actualLeft = Math.round(left * (containerWidth.value / props.hotData.width))\n        const actualTop = Math.round(top * (containerWidth.value / props.hotData.width))\n        // 更新视图样式\n        view.css = {\n          ...view.css,\n          left: actualLeft + 'px',\n          top: actualTop + 'px',\n          width: actualWidth + 'px',\n          height: actualHeight + 'px',\n        }\n      })\n    }\n\n    return {\n      el,\n      containerWidth,\n      views,\n    }\n  },\n}\n</script>\n"],"names":["_openBlock","_createElementBlock","_createBlock","_Fragment","_renderList","_normalizeStyle","_createCommentVNode","_createElementVNode"],"mappings":"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"}
+{"version":3,"file":"DkMinHotArea.vue.mjs","sources":["../../../../../src/page-diy/src/views/min/DkMinHotArea.vue"],"sourcesContent":["<template>\n  <div ref=\"el\" class=\"dk-min-area\">\n    <img v-if=\"hotData.background\" :src=\"hotData.background\" alt=\"\" style=\"width: 100%\" />\n    <el-empty v-else description=\"请上传背景图\"></el-empty>\n    <div\n      v-for=\"(view, index) in views\"\n      :key=\"index\"\n      :style=\"{ position: 'absolute', ...view.css, background: showMask ? '#0008' : '#0004' }\"\n    >\n      <!-- 可以在这里放置热图链接或覆盖层 -->\n      <div :style=\"{ width: view.css.width, height: view.css.height }\" class=\"hot-item\">\n        {{ index + 1 }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { onMounted, ref, onUnmounted, watch } from 'vue'\n\nexport default {\n  name: 'DkMinHotArea',\n  props: {\n    hotData: {\n      default: () => ({}),\n      type: Object,\n    },\n    showMask: {\n      default: false,\n      type: Boolean,\n    },\n  },\n  setup(props) {\n    const el = ref(null)\n    let ro = null\n    const containerWidth = ref(0)\n\n    const views = ref([])\n\n    // const\n    onMounted(() => {\n      ro = new (window.ResizeObserver || ResizeObserver)(handleResize)\n      ro.observe(el.value)\n      // 初始化容器宽度\n      containerWidth.value = el.value.clientWidth\n      // 计算并转换热图区域的位置和尺寸\n      adjustHotspots()\n    })\n\n    onUnmounted(() => {\n      if (ro) {\n        ro.disconnect()\n      }\n    })\n\n    watch(\n      () => props.hotData.views,\n      () => {\n        adjustHotspots()\n      },\n      {\n        deep: true,\n      }\n    )\n\n    function handleResize(entries) {\n      entries.forEach((entry) => {\n        if (entry.target === el.value) {\n          containerWidth.value = entry.contentRect.width\n          adjustHotspots()\n        }\n      })\n    }\n\n    function adjustHotspots() {\n      views.value = JSON.parse(JSON.stringify(props.hotData.views))\n      // 根据容器宽度调整热图区域的位置与尺寸\n      views.value.forEach((view) => {\n        const { left, top, width: originalWidth, height: originalHeight } = view.css\n        // 计算实际宽度和高度，假设按比例缩放\n        const actualWidth = Math.round(originalWidth * (containerWidth.value / props.hotData.width))\n        const actualHeight = Math.round(originalHeight * (containerWidth.value / props.hotData.width))\n\n        // 计算实际left和top\n        const actualLeft = Math.round(left * (containerWidth.value / props.hotData.width))\n        const actualTop = Math.round(top * (containerWidth.value / props.hotData.width))\n        // 更新视图样式\n        view.css = {\n          ...view.css,\n          left: actualLeft + 'px',\n          top: actualTop + 'px',\n          width: actualWidth + 'px',\n          height: actualHeight + 'px',\n        }\n      })\n    }\n\n    return {\n      el,\n      containerWidth,\n      views,\n    }\n  },\n}\n</script>\n"],"names":["_openBlock","_createElementBlock","_createBlock","_Fragment","_renderList","_normalizeStyle","_createCommentVNode","_createElementVNode"],"mappings":";;;AAoBA,MAAK,SAAU,GAAA;AACb,EAAA,IAAI,EAAE,cAAc;AACpB,EAAA,KAAK,EAAE;AACL,IAAA,OAAO,EAAE;AACP,MAAA,OAAO,EAAE,OAAO,EAAE,CAAC;MACnB,IAAI,EAAE,MAAM;KACb;AACD,IAAA,QAAQ,EAAE;MACR,OAAO,EAAE,KAAK;MACd,IAAI,EAAE,OAAO;KACd;GACF;EACD,KAAK,CAAC,KAAK,EAAE;AACX,IAAA,MAAM,EAAG,GAAE,GAAG,CAAC,IAAI,EAAA;AACnB,IAAA,IAAI,KAAK,KAAG;IACZ,MAAM,cAAa,GAAI,GAAG,CAAC,CAAC,EAAA;;AAE5B,IAAA,MAAM,KAAI,GAAI,GAAG,CAAC,EAAE,EAAA;;AAEpB;AACA,IAAA,SAAS,CAAC,MAAM;MACd,EAAC,GAAI,KAAK,MAAM,CAAC,cAAe,IAAG,cAAc,EAAE,YAAY,EAAA;AAC/D,MAAA,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAA;AACnB;AACA,MAAA,cAAc,CAAC,KAAI,GAAI,EAAE,CAAC,KAAK,CAAC,YAAU;AAC1C;AACA,MAAA,cAAc,GAAC;KAChB,EAAA;;AAED,IAAA,WAAW,CAAC,MAAM;AAChB,MAAA,IAAI,EAAE,EAAE;AACN,QAAA,EAAE,CAAC,UAAU,GAAC;AAChB,OAAA;KACD,EAAA;;IAED,KAAK;MACH,MAAM,KAAK,CAAC,OAAO,CAAC,KAAK;MACzB,MAAM;AACJ,QAAA,cAAc,GAAC;OAChB;AACD,MAAA;AACE,QAAA,IAAI,EAAE,IAAI;AACZ,OAAA;AACF,MAAA;;IAEA,SAAS,YAAY,CAAC,OAAO,EAAE;MAC7B,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK;QACzB,IAAI,KAAK,CAAC,MAAO,KAAI,EAAE,CAAC,KAAK,EAAE;AAC7B,UAAA,cAAc,CAAC,KAAM,GAAE,KAAK,CAAC,WAAW,CAAC,MAAI;AAC7C,UAAA,cAAc,GAAC;AACjB,SAAA;OACD,EAAA;AACH,KAAA;;IAEA,SAAS,cAAc,GAAG;MACxB,KAAK,CAAC,KAAM,GAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAA;AAC5D;MACA,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK;AAC5B,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,cAAe,EAAA,GAAI,IAAI,CAAC,IAAE;AAC3E;AACA,QAAA,MAAM,WAAY,GAAE,IAAI,CAAC,KAAK,CAAC,aAAc,IAAG,cAAc,CAAC,KAAI,GAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAA;AAC3F,QAAA,MAAM,YAAa,GAAE,IAAI,CAAC,KAAK,CAAC,cAAa,IAAK,cAAc,CAAC,KAAI,GAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAA;;;AAG7F,QAAA,MAAM,UAAS,GAAI,IAAI,CAAC,KAAK,CAAC,IAAK,IAAG,cAAc,CAAC,KAAI,GAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAA;AACjF,QAAA,MAAM,SAAQ,GAAI,IAAI,CAAC,KAAK,CAAC,OAAO,cAAc,CAAC,KAAI,GAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAA;AAC/E;AACA,QAAA,IAAI,CAAC,MAAM;UACT,GAAG,IAAI,CAAC,GAAG;AACX,UAAA,IAAI,EAAE,UAAS,GAAI,IAAI;AACvB,UAAA,GAAG,EAAE,SAAU,GAAE,IAAI;UACrB,KAAK,EAAE,WAAU,GAAI,IAAI;UACzB,MAAM,EAAE,eAAe,IAAI;AAC7B,UAAA;OACD,EAAA;AACH,KAAA;;AAEA,IAAA,OAAO;AACL,MAAA,EAAE;AACF,MAAA,cAAc;MACd,KAAK;AACP,KAAA;GACD;AACH,EAAA;;;AAtGO,EAAA,GAAG,EAAC,IAAI;AAAC,EAAA,KAAK,EAAC,aAAa;;;;;;;AAAjC,EAAA,QAAAA,SAAA,EAAA,EAAAC,kBAAA,CAaM,OAbN,UAaM,EAAA;AAZO,IAAA,CAAA,MAAA,CAAA,OAAO,CAAC,UAAU;sBAA7BA,kBAAsF,CAAA,KAAA,EAAA;;UAAtD,GAAG,EAAE,MAAO,CAAA,OAAA,CAAC,UAAU;AAAE,UAAA,GAAG,EAAC,EAAE;AAAC,UAAA,KAAmB,EAAnB,CAAmB,OAAA,CAAA,MAAA,CAAA;;sBACnFC,WAAiD,CAAA,mBAAA,EAAA;;AAAhC,UAAA,WAAW,EAAC,QAAQ;;AACrC,KAAAF,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA,CASME,QARoB,EAAA,IAAA,EAAAC,UAAA,CAAA,MAAA,CAAA,KAAK,EAArB,CAAA,IAAI,EAAE,KAAK,KAAA;2BADrBH,kBASM,CAAA,KAAA,EAAA;AAPH,QAAA,GAAG,EAAE,KAAK;AACV,QAAA,KAAK,EAA6BI,cAAA,CAAA,EAAA,QAAA,EAAA,UAAA,EAAA,GAAA,IAAI,CAAC,GAAG,cAAc,MAAQ,CAAA,QAAA,GAAA,OAAA,GAAA,OAAA,EAAA,CAAA;;QAEjEC,kBAAwB,CAAA,mBAAA,CAAA;QACxBC,kBAEM,CAAA,KAAA,EAAA;UAFA,KAAK,EAAAF,cAAA,CAAA,EAAA,KAAA,EAAW,IAAI,CAAC,GAAG,CAAC,KAAK,EAAA,MAAA,EAAU,IAAI,CAAC,GAAG,CAAC,MAAM,EAAA,CAAA;AAAI,UAAA,KAAK,EAAC,UAAU;2BAC5E,KAAK,GAAA,CAAA,CAAA,EAAA,CAAA,mBAAA;;;;;;;;;"}

package/es/page-diy/style/drag-tool.css

@@ -1 +1 @@
-.drag-tool{padding:2px 0;position:relative;min-height:30px;box-sizing:border-box;word-wrap:break-word;word-break:break-all;margin:var(--margin);outline:var(--showDashed) dashed #a2d1ff}.drag-tool:hover{outline:2px dashed #a2d1ff}.drag-tool .drag-tool{margin:5px}.drag-tool+.drag-tool{margin-top:5px}.drag-tool .drag-content{overflow:hidden}.drag-tool .drag-content .drag-tool .del{right:0;top:0}.drag-tool .drag-r{display:block}.drag-tool .drag-r{position:absolute;right:2px;bottom:2px;z-index:1200}.drag-tool .drag-l{position:absolute;top:0;left:0;z-index:1904}.drag-tool .drag-btn{height:18px;width:18px;color:#fff;background-color:#666;text-align:center;line-height:20px;padding-bottom:1px;float:left;cursor:pointer;justify-content:center;display:none;opacity:.5}.drag-tool .drag-btn+.drag-btn{margin-left:2px}.drag-tool .drag-btn:hover{background-color:var(--el-color-primary);opacity:1}.drag-tool .drag-btn-danger{background-color:var(--el-color-danger)!important}.drag-tool .drag-btn i{font-size:13px}.drag-tool .drag-mask{z-index:1199;position:absolute;top:0;left:0;right:0;bottom:0}.drag-tool.active{outline:2px solid #409eff}.drag-tool.active>.drag-r .drag-btn{display:block}.drag-tool.active>.drag-l .drag-btn{display:block}.drag-tool.active>.del{display:block}.drag-tool.active>.op{display:block}
+.drag-tool{padding:var(--padding);position:relative;min-height:30px;box-sizing:border-box;word-wrap:break-word;word-break:break-all;margin:var(--margin);outline:var(--showDashed) dashed #a2d1ff;overflow:var(--overflow)}.drag-tool:hover{outline:2px dashed #a2d1ff}.drag-tool .drag-tool{margin:5px}.drag-tool+.drag-tool{margin-top:5px}.drag-tool .drag-content{overflow:hidden}.drag-tool .drag-content .drag-tool .del{right:0;top:0}.drag-tool .drag-r{display:block}.drag-tool .drag-r{position:absolute;right:2px;bottom:2px;z-index:1200}.drag-tool .drag-l{position:absolute;top:0;left:0;z-index:1904}.drag-tool .drag-btn{height:18px;width:18px;color:#fff;background-color:#666;text-align:center;line-height:20px;padding-bottom:1px;float:left;cursor:pointer;justify-content:center;display:none;opacity:.5}.drag-tool .drag-btn+.drag-btn{margin-left:2px}.drag-tool .drag-btn:hover{background-color:var(--el-color-primary);opacity:1}.drag-tool .drag-btn-danger{background-color:var(--el-color-danger)!important}.drag-tool .drag-btn i{font-size:13px}.drag-tool .drag-mask{z-index:1199;position:absolute;top:0;left:0;right:0;bottom:0}.drag-tool.active{outline:2px solid #409eff}.drag-tool.active>.drag-r .drag-btn{display:block}.drag-tool.active>.drag-l .drag-btn{display:block}.drag-tool.active>.del{display:block}.drag-tool.active>.op{display:block}

package/es/page-diy/style/drag-tool.scss

@@ -1,6 +1,6 @@
 /* stylelint-disable */
 .drag-tool {
-  padding: 2px 0;
+  padding: var(--padding);
   position: relative;
   min-height: 30px;
   box-sizing: border-box;
@@ -8,6 +8,7 @@
   word-break: break-all;
   margin: var(--margin);
   outline: var(--showDashed) dashed #a2d1ff;
+  overflow: var(--overflow);
   //cursor: move;
   &:hover {
     outline: 2px dashed #a2d1ff;

package/es/page-diy/style/index.css

@@ -1 +1 @@
-@charset "UTF-8";.dk-page-diy{min-width:1000px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dk-page-diy .drag-box{min-height:50px}.dk-page-diy ._fc-l,.dk-page-diy ._fc-m,.dk-page-diy ._fc-r{background:#fff;box-sizing:border-box;height:calc(100vh - 180px);position:relative}.dk-page-diy ._fc-l::-webkit-scrollbar,.dk-page-diy ._fc-m::-webkit-scrollbar,.dk-page-diy ._fc-r::-webkit-scrollbar{display:none}.dk-page-diy ._fc-l{overflow:inherit!important;display:flex;flex:0 0 auto;flex-direction:column;top:0}.dk-page-diy ._fc-l ._fc-l-group{padding:0 12px}.dk-page-diy ._fc-l ._fc-l-title{font-weight:600;font-size:14px;margin:18px 0 5px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dk-page-diy ._fc-l ._fc-l-item{display:inline-block;background:#fff;color:#000;min-width:70px;width:80px;height:70px;line-height:1;text-align:center;transition:all .2s ease;cursor:pointer;border-radius:6px;position:relative}.dk-page-diy ._fc-l ._fc-l-item.not-drag{cursor:not-allowed;background:#f6f6f6!important;color:#000!important}.dk-page-diy ._fc-l ._fc-l-item ._fc-l-name{font-size:12px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dk-page-diy ._fc-l ._fc-l-item ._fc-l-count{background-color:#409eff;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #fff;position:absolute;top:5px;right:20px;z-index:1;transform:translateY(-50%) translateX(100%)}.dk-page-diy ._fc-l ._fc-l-item ._fc-l-icon{padding:10px 5px 12px}.dk-page-diy ._fc-l ._fc-l-item:hover{background:#409eff;color:#fff}.dk-page-diy ._fc-l.item-box ._fc-l-groups{height:calc(100vh - 220px);overflow:auto;flex:1 1 0%}.dk-page-diy ._fc-l.item-box ._fc-l-groups::-webkit-scrollbar{display:none}.dk-page-diy ._fc-l.item-box ._fc-l-groups ._fc-l-items ._fc-l-item{margin:5px;width:76px;box-shadow:1px 1px 4px rgba(0,0,0,.1019607843)}.dk-page-diy ._fc-l:hover .aside-toggle{display:block}.dk-page-diy ._fc-l .children-list{width:100%;position:relative;background:#fff;bottom:0;overflow:auto;z-index:2}.dk-page-diy ._fc-l .children-list .child-title{cursor:pointer;text-align:center;font-size:14px;padding:4px;position:-webkit-sticky;position:sticky;z-index:2;top:0;background:#fff;border-top:1px solid #eaecef;border-right:0}.dk-page-diy ._fc-l .children-list .child-title .dk-icon{position:absolute;right:10px}.dk-page-diy ._fc-l .children-list .child-title .dk-icon:hover{color:#409eff!important}.dk-page-diy ._fc-l .children-list .el-tree-node .close-rule{position:absolute;right:0;display:none;padding:0 10px}.dk-page-diy ._fc-l .children-list .el-tree-node .close-rule:hover{color:#409eff!important}.dk-page-diy ._fc-l .children-list .el-tree-node:hover .close-rule{display:inline-flex}.dk-page-diy ._fc-l .children-list .aside-resizer{width:100%;height:4px;margin:-2px 0;cursor:n-resize;z-index:3}.dk-page-diy ._fc-l .children-list::-webkit-scrollbar{display:none}.dk-page-diy ._fc-m{background:#ebeced;width:100%}.dk-page-diy ._fc-m ._fc-m-tools{background:#fff;height:40px;align-items:center;display:flex;justify-content:flex-end;border:1px solid #ececec;border-top:0 none}.dk-page-diy ._fc-m ._fc-m-drag{overflow:auto;box-sizing:border-box}.dk-page-diy ._fc-m .form-create ._fc-l-item{background:#409eff;width:100%;height:30px;overflow:hidden;transition:all .3s ease;display:flex;justify-content:center;align-items:center;color:#fff}.dk-page-diy ._fc-m .form-create ._fc-l-item.sortable-chosen ._fc-l-count,.dk-page-diy ._fc-m .form-create ._fc-l-item.sortable-chosen ._fc-l-icon,.dk-page-diy ._fc-m .form-create ._fc-l-item.sortable-chosen ._fc-l-name{display:none}.dk-page-diy ._fc-m .form-create ._fc-l-item.sortable-chosen:after{content:"放在这里";color:#fff;font-size:14px}.dk-page-diy ._fc-m .form-create ._fc-l-item ._fc-l-icon{margin:0 10px}.dk-page-diy ._fc-r{width:calc(100% - 800px);overflow:inherit!important}.dk-page-diy ._fc-r .el-tabs__nav-wrap{padding:0 20px}.dk-page-diy ._fc-r .el-tabs__nav{width:100%}.dk-page-diy ._fc-r .el-tabs__item{width:33%;text-align:center}.dk-page-diy ._fc-r .el-tabs__content{padding:0 20px;height:calc(100vh - 235px);overflow:auto}.dk-page-diy ._fc-r .el-tabs__content::-webkit-scrollbar{width:5px}.dk-page-diy ._fc-r .el-tabs__nav-wrap::after{height:1px;background-color:#ececec}.dk-page-diy ._fc-r ._fc-r-tabs{display:flex;cursor:pointer;padding:0;border-bottom:1px solid #ececec}.dk-page-diy ._fc-r ._fc-r-tab{height:40px;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:600;color:#303133;position:relative;flex:1;text-align:center}.dk-page-diy ._fc-r ._fc-r-tab.active{color:#409eff;border-bottom:2px solid #409eff}.dk-page-diy ._fc-r:hover .aside-toggle{display:block}.dk-page-diy ._fc-r .el-form-item__content{display:block}.dk-page-diy ._fc-r .el-form-item__content .form-help{line-height:1.5;margin-top:4px;color:#888;font-size:12px}.dk-page-diy ._fc-m-drag,.dk-page-diy .draggable-drag{min-height:630px;height:100%;position:relative}.dk-page-diy ._fc-m-drag .chosen,.dk-page-diy .draggable-drag .chosen{opacity:1!important}.dk-page-diy .aside-resizer{cursor:ew-resize;height:100%;margin:0 -2px;position:absolute;top:0;width:4px;z-index:1;right:0}.dk-page-diy .aside-resizer:hover{background:rgba(204,204,204,.5)}.dk-page-diy .aside-toggle{background:inherit;cursor:pointer;padding:20px 5px;position:absolute;top:50%;transform:translateY(-50%);z-index:1;display:none}.dk-page-diy .drag-tool{padding:2px 0;position:relative;min-height:30px;box-sizing:border-box;word-wrap:break-word;word-break:break-all;margin:var(--margin);outline:var(--showDashed) dashed #a2d1ff}.dk-page-diy .drag-tool:hover{outline:2px dashed #a2d1ff}.dk-page-diy .drag-tool .drag-tool{margin:5px}.dk-page-diy .drag-tool+.drag-tool{margin-top:5px}.dk-page-diy .drag-tool .drag-content{overflow:hidden}.dk-page-diy .drag-tool .drag-content .drag-tool .del{right:0;top:0}.dk-page-diy .drag-tool .drag-r{display:block}.dk-page-diy .drag-tool .drag-r{position:absolute;right:2px;bottom:2px;z-index:1200}.dk-page-diy .drag-tool .drag-l{position:absolute;top:0;left:0;z-index:1904}.dk-page-diy .drag-tool .drag-btn{height:18px;width:18px;color:#fff;background-color:#666;text-align:center;line-height:20px;padding-bottom:1px;float:left;cursor:pointer;justify-content:center;display:none;opacity:.5}.dk-page-diy .drag-tool .drag-btn+.drag-btn{margin-left:2px}.dk-page-diy .drag-tool .drag-btn:hover{background-color:var(--el-color-primary);opacity:1}.dk-page-diy .drag-tool .drag-btn-danger{background-color:var(--el-color-danger)!important}.dk-page-diy .drag-tool .drag-btn i{font-size:13px}.dk-page-diy .drag-tool .drag-mask{z-index:1199;position:absolute;top:0;left:0;right:0;bottom:0}.dk-page-diy .drag-tool.active{outline:2px solid #409eff}.dk-page-diy .drag-tool.active>.drag-r .drag-btn{display:block}.dk-page-diy .drag-tool.active>.drag-l .drag-btn{display:block}.dk-page-diy .drag-tool.active>.del{display:block}.dk-page-diy .drag-tool.active>.op{display:block}.dk-page-diy .preview-phone{overflow:auto;box-shadow:inset 0 2px 5px 1px rgba(62,62,62,.0901960784);height:100%}.dk-page-diy .preview-phone::-webkit-scrollbar{width:8px}.dk-page-diy .preview-phone .phone{background:#fff;width:375px;margin:20px auto;box-shadow:0 5px 10px rgba(0,0,0,.2);min-height:700px}.dk-page-diy .preview-phone .phone .phone-header{height:75px;margin-bottom:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dk-page-diy .preview-phone .phone .phone-header img{width:100%}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top{display:flex;align-items:flex-start;justify-content:space-between;height:30px;font-size:12px}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top .phone-time{margin:10px}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top .phone-time span{margin-right:5px}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top .phone-bangs{background:#000;width:200px;height:30px;border-bottom-right-radius:20px;border-bottom-left-radius:20px}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top .phone-battery{margin:10px;display:flex;align-items:center;height:18px}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top .phone-battery img{margin-left:5px}.dk-page-diy .preview-phone .phone .phone-header .phone-title{display:flex;justify-content:space-between;align-items:center;height:40px}.dk-page-diy .preview-phone .phone .phone-header .phone-title .phone-title-icon{margin:5px}.dk-page-diy .preview-phone .phone .phone-header-min{background-image:url(https://demo-saas.site.niucloud.com/admin/assets/diy_preview_head-8c072698.png);background-repeat:no-repeat;background-position:center;background-size:cover;position:relative}.dk-page-diy .preview-phone .phone .phone-header-min .close-button{position:absolute;top:34px;right:27px}.dk-page-diy .preview-phone .phone .phone-header-min .close-button:hover .close-button-mask{background:rgba(0,0,0,.0666666667)}.dk-page-diy .preview-phone .phone .phone-header-min .close-button .close-button-mask{width:20px;height:20px;border-radius:100%;cursor:pointer}.dk-page-diy .preview-phone .phone .phone-header-min .more-button-mask{position:absolute;top:34px;right:70px;width:25px;cursor:pointer;border-radius:40px;height:20px}.dk-page-diy .preview-phone .phone .phone-header-min .more-button-mask:hover{background:rgba(0,0,0,.0666666667)}.dk-page-diy .preview-phone .phone .phone-body{background:#f5f5f5;background-size:100% auto!important;overflow:visible;background-repeat:no-repeat;background-origin:initial;background-clip:initial}.dk-page-diy .preview-phone .phone .phone-body .ghost{box-shadow:var(--el-box-shadow)}.dk-page-diy .dk-view-bullet-chat{height:30px;line-height:30px;color:#fff;background:rgba(0,0,0,.6);border-radius:100px}.dk-page-diy .dk-view-bullet-chat .bullet-content{display:flex;align-items:center;height:20px;margin:5px;font-size:12px}.dk-page-diy .dk-view-bullet-chat .bullet-content img{width:20px;height:20px;border-radius:100%}.dk-page-diy .dk-view-bullet-chat .bullet-content span{padding:0 5px}.dk-page-diy .dk-view-common-btn .btn{display:flex;align-items:center;justify-content:center}.dk-page-diy .dk-view-common-btn .btn .van-icon{font-size:1.2em}.dk-page-diy .dk-view-common-btn .f-btn{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.dk-page-diy .dk-view-common-btn .f-btn .image-content{display:inherit}.dk-page-diy .dk-view-common-btn .f-btn .f-btn-content{display:flex;align-items:center;justify-content:center;border-radius:100%}.dk-page-diy .dk-view-common-btn .f-img{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.dk-page-diy .dk-view-image.dk-mobile-image-default{display:flex;flex-direction:column}.dk-page-diy .dk-view-image.dk-mobile-image-default .van-image{display:block}.dk-page-diy .dk-view-image.dk-mobile-image-default .dk-mobile-image-content{display:block}.dk-page-diy .dk-view-image.dk-mobile-image-slide{width:100%;overflow-x:scroll;white-space:nowrap}.dk-page-diy .dk-view-image.dk-mobile-image-slide .dk-mobile-image-content{position:relative;display:inline-block;margin-right:10px;vertical-align:top}.dk-page-diy .dk-view-image .dk-mobile-image-content{position:relative;overflow:hidden}.dk-page-diy .dk-view-image .dk-mobile-image-content:last-child{margin:0!important}.dk-page-diy .dk-view-image .dk-mobile-image-content .text-type-footer{text-align:center;height:48px;line-height:48px}.dk-page-diy .dk-view-image .dk-mobile-image-content .text-type-default{color:#fff;text-align:center;position:absolute;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));bottom:0;height:48px;line-height:48px;width:100%}.dk-page-diy .dk-view-dialog .preview{display:flex;align-items:center;justify-content:center;height:40px;text-align:center;background:#fff}.dk-page-diy .dk-view-music{width:100%;display:flex;align-items:center;justify-content:center}.dk-page-diy .dk-view-music .dk-music-icon{background:#fff;border-radius:100%;border:2px solid #fff;font-weight:800;box-sizing:content-box;color:#f56c6c}.dk-page-diy .dk-view-music .dk-music-img{border-radius:100%}.dk-page-diy .dk-view-music .changeRight{-webkit-animation-name:changeRight;animation-name:changeRight}.dk-page-diy .dk-view-music .changeLeft{-webkit-animation-name:changeLeft;animation-name:changeLeft}@-webkit-keyframes changeRight{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes changeRight{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes changeLeft{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(-180deg)}100%{-webkit-transform:rotate(-360deg)}}@keyframes changeLeft{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(-180deg)}100%{-webkit-transform:rotate(-360deg)}}.dk-page-diy .dk-view-swipe .image{width:100%}.dk-page-diy .dk-view-tabbar .van-tabbar,.dk-page-diy .dk-view-tabbar .van-tabbar-item--active{background:0 0}.dk-page-diy .dk-view-title{display:flex;align-items:center;justify-content:space-between}.dk-page-diy .dk-view-title .title-left{display:flex;align-items:center}.dk-page-diy .dk-view-video{display:flex;align-items:center;justify-content:center;width:100%;min-height:240px;color:#eee;background:#222}.dk-page-diy .dk-view-video .dk-video-content{width:100%;height:100%;text-align:center}.dk-page-diy .dk-view-video .dk-video-content p{font-size:12px;color:#999}.dk-page-diy .dk-view-video .dk-video-content .poster{width:100%;height:100%}.dk-page-diy .dk-view-video .el-icon-video-play{font-size:50px}.dk-page-diy .dk-view-video .video-preview{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:#000;opacity:.8}.dk-page-diy .dk-min-swipe .image{width:100%}.dk-page-diy .dk-min-swipe .swipe-title{position:absolute;bottom:0;background:rgba(0,0,0,.3333333333);width:100%;color:#fff;padding:5px}.dk-page-diy .dk-min-area{position:relative}.dk-page-diy .hot-item{display:flex;align-items:center;justify-content:center;color:#fff}
+@charset "UTF-8";.dk-page-diy{min-width:1000px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dk-page-diy .drag-box{min-height:50px}.dk-page-diy ._fc-l,.dk-page-diy ._fc-m,.dk-page-diy ._fc-r{background:#fff;box-sizing:border-box;height:calc(100vh - 180px);position:relative}.dk-page-diy ._fc-l::-webkit-scrollbar,.dk-page-diy ._fc-m::-webkit-scrollbar,.dk-page-diy ._fc-r::-webkit-scrollbar{display:none}.dk-page-diy ._fc-l{overflow:inherit!important;display:flex;flex:0 0 auto;flex-direction:column;top:0}.dk-page-diy ._fc-l ._fc-l-group{padding:0 12px}.dk-page-diy ._fc-l ._fc-l-title{font-weight:600;font-size:14px;margin:18px 0 5px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dk-page-diy ._fc-l ._fc-l-item{display:inline-block;background:#fff;color:#000;min-width:70px;width:80px;height:70px;line-height:1;text-align:center;transition:all .2s ease;cursor:pointer;border-radius:6px;position:relative}.dk-page-diy ._fc-l ._fc-l-item.not-drag{cursor:not-allowed;background:#f6f6f6!important;color:#000!important}.dk-page-diy ._fc-l ._fc-l-item ._fc-l-name{font-size:12px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dk-page-diy ._fc-l ._fc-l-item ._fc-l-count{background-color:#409eff;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #fff;position:absolute;top:5px;right:20px;z-index:1;transform:translateY(-50%) translateX(100%)}.dk-page-diy ._fc-l ._fc-l-item ._fc-l-icon{padding:10px 5px 12px}.dk-page-diy ._fc-l ._fc-l-item:hover{background:#409eff;color:#fff}.dk-page-diy ._fc-l.item-box ._fc-l-groups{height:calc(100vh - 220px);overflow:auto;flex:1 1 0%}.dk-page-diy ._fc-l.item-box ._fc-l-groups::-webkit-scrollbar{display:none}.dk-page-diy ._fc-l.item-box ._fc-l-groups ._fc-l-items ._fc-l-item{margin:5px;width:76px;box-shadow:1px 1px 4px rgba(0,0,0,.1019607843)}.dk-page-diy ._fc-l:hover .aside-toggle{display:block}.dk-page-diy ._fc-l .children-list{width:100%;position:relative;background:#fff;bottom:0;overflow:auto;z-index:2}.dk-page-diy ._fc-l .children-list .child-title{cursor:pointer;text-align:center;font-size:14px;padding:4px;position:-webkit-sticky;position:sticky;z-index:2;top:0;background:#fff;border-top:1px solid #eaecef;border-right:0}.dk-page-diy ._fc-l .children-list .child-title .dk-icon{position:absolute;right:10px}.dk-page-diy ._fc-l .children-list .child-title .dk-icon:hover{color:#409eff!important}.dk-page-diy ._fc-l .children-list .el-tree-node .close-rule{position:absolute;right:0;display:none;padding:0 10px}.dk-page-diy ._fc-l .children-list .el-tree-node .close-rule:hover{color:#409eff!important}.dk-page-diy ._fc-l .children-list .el-tree-node:hover .close-rule{display:inline-flex}.dk-page-diy ._fc-l .children-list .aside-resizer{width:100%;height:4px;margin:-2px 0;cursor:n-resize;z-index:3}.dk-page-diy ._fc-l .children-list::-webkit-scrollbar{display:none}.dk-page-diy ._fc-m{background:#ebeced;width:100%}.dk-page-diy ._fc-m ._fc-m-tools{background:#fff;height:40px;align-items:center;display:flex;justify-content:flex-end;border:1px solid #ececec;border-top:0 none}.dk-page-diy ._fc-m ._fc-m-drag{overflow:auto;box-sizing:border-box}.dk-page-diy ._fc-m .form-create ._fc-l-item{background:#409eff;width:100%;height:30px;overflow:hidden;transition:all .3s ease;display:flex;justify-content:center;align-items:center;color:#fff}.dk-page-diy ._fc-m .form-create ._fc-l-item.sortable-chosen ._fc-l-count,.dk-page-diy ._fc-m .form-create ._fc-l-item.sortable-chosen ._fc-l-icon,.dk-page-diy ._fc-m .form-create ._fc-l-item.sortable-chosen ._fc-l-name{display:none}.dk-page-diy ._fc-m .form-create ._fc-l-item.sortable-chosen:after{content:"放在这里";color:#fff;font-size:14px}.dk-page-diy ._fc-m .form-create ._fc-l-item ._fc-l-icon{margin:0 10px}.dk-page-diy ._fc-r{width:calc(100% - 800px);overflow:inherit!important}.dk-page-diy ._fc-r .el-tabs__nav-wrap{padding:0 20px}.dk-page-diy ._fc-r .el-tabs__nav{width:100%}.dk-page-diy ._fc-r .el-tabs__item{width:33%;text-align:center}.dk-page-diy ._fc-r .el-tabs__content{padding:0 20px;height:calc(100vh - 235px);overflow:auto}.dk-page-diy ._fc-r .el-tabs__content::-webkit-scrollbar{width:5px}.dk-page-diy ._fc-r .el-tabs__nav-wrap::after{height:1px;background-color:#ececec}.dk-page-diy ._fc-r ._fc-r-tabs{display:flex;cursor:pointer;padding:0;border-bottom:1px solid #ececec}.dk-page-diy ._fc-r ._fc-r-tab{height:40px;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:600;color:#303133;position:relative;flex:1;text-align:center}.dk-page-diy ._fc-r ._fc-r-tab.active{color:#409eff;border-bottom:2px solid #409eff}.dk-page-diy ._fc-r:hover .aside-toggle{display:block}.dk-page-diy ._fc-r .el-form-item__content{display:block}.dk-page-diy ._fc-r .el-form-item__content .form-help{line-height:1.5;margin-top:4px;color:#888;font-size:12px}.dk-page-diy ._fc-m-drag,.dk-page-diy .draggable-drag{min-height:630px;height:100%;position:relative}.dk-page-diy ._fc-m-drag .chosen,.dk-page-diy .draggable-drag .chosen{opacity:1!important}.dk-page-diy .aside-resizer{cursor:ew-resize;height:100%;margin:0 -2px;position:absolute;top:0;width:4px;z-index:1;right:0}.dk-page-diy .aside-resizer:hover{background:rgba(204,204,204,.5)}.dk-page-diy .aside-toggle{background:inherit;cursor:pointer;padding:20px 5px;position:absolute;top:50%;transform:translateY(-50%);z-index:1;display:none}.dk-page-diy .drag-tool{padding:var(--padding);position:relative;min-height:30px;box-sizing:border-box;word-wrap:break-word;word-break:break-all;margin:var(--margin);outline:var(--showDashed) dashed #a2d1ff;overflow:var(--overflow)}.dk-page-diy .drag-tool:hover{outline:2px dashed #a2d1ff}.dk-page-diy .drag-tool .drag-tool{margin:5px}.dk-page-diy .drag-tool+.drag-tool{margin-top:5px}.dk-page-diy .drag-tool .drag-content{overflow:hidden}.dk-page-diy .drag-tool .drag-content .drag-tool .del{right:0;top:0}.dk-page-diy .drag-tool .drag-r{display:block}.dk-page-diy .drag-tool .drag-r{position:absolute;right:2px;bottom:2px;z-index:1200}.dk-page-diy .drag-tool .drag-l{position:absolute;top:0;left:0;z-index:1904}.dk-page-diy .drag-tool .drag-btn{height:18px;width:18px;color:#fff;background-color:#666;text-align:center;line-height:20px;padding-bottom:1px;float:left;cursor:pointer;justify-content:center;display:none;opacity:.5}.dk-page-diy .drag-tool .drag-btn+.drag-btn{margin-left:2px}.dk-page-diy .drag-tool .drag-btn:hover{background-color:var(--el-color-primary);opacity:1}.dk-page-diy .drag-tool .drag-btn-danger{background-color:var(--el-color-danger)!important}.dk-page-diy .drag-tool .drag-btn i{font-size:13px}.dk-page-diy .drag-tool .drag-mask{z-index:1199;position:absolute;top:0;left:0;right:0;bottom:0}.dk-page-diy .drag-tool.active{outline:2px solid #409eff}.dk-page-diy .drag-tool.active>.drag-r .drag-btn{display:block}.dk-page-diy .drag-tool.active>.drag-l .drag-btn{display:block}.dk-page-diy .drag-tool.active>.del{display:block}.dk-page-diy .drag-tool.active>.op{display:block}.dk-page-diy .preview-phone{overflow:auto;box-shadow:inset 0 2px 5px 1px rgba(62,62,62,.0901960784);height:100%}.dk-page-diy .preview-phone::-webkit-scrollbar{width:8px}.dk-page-diy .preview-phone .phone{background:#fff;width:375px;margin:20px auto;box-shadow:0 5px 10px rgba(0,0,0,.2);min-height:700px}.dk-page-diy .preview-phone .phone .phone-header{height:75px;margin-bottom:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dk-page-diy .preview-phone .phone .phone-header img{width:100%}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top{display:flex;align-items:flex-start;justify-content:space-between;height:30px;font-size:12px}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top .phone-time{margin:10px}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top .phone-time span{margin-right:5px}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top .phone-bangs{background:#000;width:200px;height:30px;border-bottom-right-radius:20px;border-bottom-left-radius:20px}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top .phone-battery{margin:10px;display:flex;align-items:center;height:18px}.dk-page-diy .preview-phone .phone .phone-header .phone-header-top .phone-battery img{margin-left:5px}.dk-page-diy .preview-phone .phone .phone-header .phone-title{display:flex;justify-content:space-between;align-items:center;height:40px}.dk-page-diy .preview-phone .phone .phone-header .phone-title .phone-title-icon{margin:5px}.dk-page-diy .preview-phone .phone .phone-header-min{background-image:url(https://demo-saas.site.niucloud.com/admin/assets/diy_preview_head-8c072698.png);background-repeat:no-repeat;background-position:center;background-size:cover;position:relative}.dk-page-diy .preview-phone .phone .phone-header-min .close-button{position:absolute;top:34px;right:27px}.dk-page-diy .preview-phone .phone .phone-header-min .close-button:hover .close-button-mask{background:rgba(0,0,0,.0666666667)}.dk-page-diy .preview-phone .phone .phone-header-min .close-button .close-button-mask{width:20px;height:20px;border-radius:100%;cursor:pointer}.dk-page-diy .preview-phone .phone .phone-header-min .more-button-mask{position:absolute;top:34px;right:70px;width:25px;cursor:pointer;border-radius:40px;height:20px}.dk-page-diy .preview-phone .phone .phone-header-min .more-button-mask:hover{background:rgba(0,0,0,.0666666667)}.dk-page-diy .preview-phone .phone .phone-body{background:#f5f5f5;background-size:100% auto!important;overflow:visible;background-repeat:no-repeat;background-origin:initial;background-clip:initial}.dk-page-diy .preview-phone .phone .phone-body .ghost{box-shadow:var(--el-box-shadow)}.dk-page-diy .dk-view-bullet-chat{height:30px;line-height:30px;color:#fff;background:rgba(0,0,0,.6);border-radius:100px}.dk-page-diy .dk-view-bullet-chat .bullet-content{display:flex;align-items:center;height:20px;margin:5px;font-size:12px}.dk-page-diy .dk-view-bullet-chat .bullet-content img{width:20px;height:20px;border-radius:100%}.dk-page-diy .dk-view-bullet-chat .bullet-content span{padding:0 5px}.dk-page-diy .dk-view-common-btn .btn{display:flex;align-items:center;justify-content:center}.dk-page-diy .dk-view-common-btn .btn .van-icon{font-size:1.2em}.dk-page-diy .dk-view-common-btn .f-btn{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.dk-page-diy .dk-view-common-btn .f-btn .image-content{display:inherit}.dk-page-diy .dk-view-common-btn .f-btn .f-btn-content{display:flex;align-items:center;justify-content:center;border-radius:100%}.dk-page-diy .dk-view-common-btn .f-img{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.dk-page-diy .dk-view-image.dk-mobile-image-default{display:flex;flex-direction:column}.dk-page-diy .dk-view-image.dk-mobile-image-default .van-image{display:block}.dk-page-diy .dk-view-image.dk-mobile-image-default .dk-mobile-image-content{display:block}.dk-page-diy .dk-view-image.dk-mobile-image-slide{width:100%;overflow-x:scroll;white-space:nowrap}.dk-page-diy .dk-view-image.dk-mobile-image-slide .dk-mobile-image-content{position:relative;display:inline-block;margin-right:10px;vertical-align:top}.dk-page-diy .dk-view-image .dk-mobile-image-content{position:relative;overflow:hidden}.dk-page-diy .dk-view-image .dk-mobile-image-content:last-child{margin:0!important}.dk-page-diy .dk-view-image .dk-mobile-image-content .text-type-footer{text-align:center;height:48px;line-height:48px}.dk-page-diy .dk-view-image .dk-mobile-image-content .text-type-default{color:#fff;text-align:center;position:absolute;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));bottom:0;height:48px;line-height:48px;width:100%}.dk-page-diy .dk-view-dialog .preview{display:flex;align-items:center;justify-content:center;height:40px;text-align:center;background:#fff}.dk-page-diy .dk-view-music{width:100%;display:flex;align-items:center;justify-content:center}.dk-page-diy .dk-view-music .dk-music-icon{background:#fff;border-radius:100%;border:2px solid #fff;font-weight:800;box-sizing:content-box;color:#f56c6c}.dk-page-diy .dk-view-music .dk-music-img{border-radius:100%}.dk-page-diy .dk-view-music .changeRight{-webkit-animation-name:changeRight;animation-name:changeRight}.dk-page-diy .dk-view-music .changeLeft{-webkit-animation-name:changeLeft;animation-name:changeLeft}@-webkit-keyframes changeRight{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes changeRight{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes changeLeft{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(-180deg)}100%{-webkit-transform:rotate(-360deg)}}@keyframes changeLeft{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(-180deg)}100%{-webkit-transform:rotate(-360deg)}}.dk-page-diy .dk-view-swipe .image{width:100%}.dk-page-diy .dk-view-tabbar .van-tabbar,.dk-page-diy .dk-view-tabbar .van-tabbar-item--active{background:0 0}.dk-page-diy .dk-view-title{display:flex;align-items:center;justify-content:space-between}.dk-page-diy .dk-view-title .title-left{display:flex;align-items:center}.dk-page-diy .dk-view-video{display:flex;align-items:center;justify-content:center;width:100%;min-height:240px;color:#eee;background:#222}.dk-page-diy .dk-view-video .dk-video-content{width:100%;height:100%;text-align:center}.dk-page-diy .dk-view-video .dk-video-content p{font-size:12px;color:#999}.dk-page-diy .dk-view-video .dk-video-content .poster{width:100%;height:100%}.dk-page-diy .dk-view-video .el-icon-video-play{font-size:50px}.dk-page-diy .dk-view-video .video-preview{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:#000;opacity:.8}.dk-page-diy .dk-min-swipe .image{width:100%}.dk-page-diy .dk-min-swipe .swipe-title{position:absolute;bottom:0;background:rgba(0,0,0,.3333333333);width:100%;color:#fff;padding:5px}.dk-page-diy .dk-min-area{position:relative}.dk-page-diy .hot-item{display:flex;align-items:center;justify-content:center;color:#fff}

package/es/style-border-input/src/style-border-input.vue2.mjs

@@ -8,6 +8,7 @@ const _hoisted_2 = {
   style: { "width": "100%" },
   class: "m-l-20px"
 };
+const _hoisted_3 = { style: { "display": "flex" } };
 const __default__ = defineComponent({
   name: "DkStyleBorderInput"
 });
@@ -239,51 +240,54 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                     }, 8, ["disabled"])
                   ]),
                   default: withCtx(() => [
-                    createVNode(_component_el_slider, {
-                      modelValue: form[position.value].borderWidth,
-                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => form[position.value].borderWidth = $event),
-                      class: "dk-border-slider",
-                      max: 50,
-                      onChange: _cache[2] || (_cache[2] = ($event) => clearOtherBorder())
-                    }, null, 8, ["modelValue"]),
-                    createVNode(_component_el_input, {
-                      modelValue: form[position.value].borderWidth,
-                      "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => form[position.value].borderWidth = $event),
-                      class: "dk-border-input",
-                      type: "number",
-                      onChange: _cache[6] || (_cache[6] = ($event) => clearOtherBorder())
-                    }, {
-                      append: withCtx(() => [
-                        createVNode(_component_el_select, {
-                          modelValue: form[position.value].unit,
-                          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => form[position.value].unit = $event),
-                          placeholder: "\u8BF7\u9009\u62E9",
-                          class: "dk-border-select",
-                          "suffix-icon": "",
-                          onChange: _cache[4] || (_cache[4] = ($event) => clearOtherBorder())
-                        }, {
-                          default: withCtx(() => [
-                            (openBlock(), createElementBlock(
-                              Fragment,
-                              null,
-                              renderList(units, (item) => {
-                                return createVNode(_component_el_option, {
-                                  key: item,
-                                  label: item,
-                                  value: item
-                                }, null, 8, ["label", "value"]);
-                              }),
-                              64
-                              /* STABLE_FRAGMENT */
-                            ))
-                          ]),
-                          _: 1
-                          /* STABLE */
-                        }, 8, ["modelValue"])
-                      ]),
-                      _: 1
-                      /* STABLE */
-                    }, 8, ["modelValue"])
+                    createElementVNode("div", _hoisted_3, [
+                      createVNode(_component_el_slider, {
+                        modelValue: form[position.value].borderWidth,
+                        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => form[position.value].borderWidth = $event),
+                        class: "dk-border-slider",
+                        max: 50,
+                        onChange: _cache[2] || (_cache[2] = ($event) => clearOtherBorder())
+                      }, null, 8, ["modelValue"]),
+                      createVNode(_component_el_input, {
+                        modelValue: form[position.value].borderWidth,
+                        "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => form[position.value].borderWidth = $event),
+                        class: "dk-border-input",
+                        type: "number",
+                        onChange: _cache[6] || (_cache[6] = ($event) => clearOtherBorder())
+                      }, {
+                        append: withCtx(() => [
+                          createVNode(_component_el_select, {
+                            modelValue: form[position.value].unit,
+                            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => form[position.value].unit = $event),
+                            placeholder: "\u8BF7\u9009\u62E9",
+                            class: "dk-border-select",
+                            style: { "width": "50px" },
+                            "suffix-icon": "",
+                            onChange: _cache[4] || (_cache[4] = ($event) => clearOtherBorder())
+                          }, {
+                            default: withCtx(() => [
+                              (openBlock(), createElementBlock(
+                                Fragment,
+                                null,
+                                renderList(units, (item) => {
+                                  return createVNode(_component_el_option, {
+                                    key: item,
+                                    label: item,
+                                    value: item
+                                  }, null, 8, ["label", "value"]);
+                                }),
+                                64
+                                /* STABLE_FRAGMENT */
+                              ))
+                            ]),
+                            _: 1
+                            /* STABLE */
+                          }, 8, ["modelValue"])
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      }, 8, ["modelValue"])
+                    ])
                   ]),
                   _: 1
                   /* STABLE */

package/es/style-border-input/src/style-border-input.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style-border-input.vue2.mjs","sources":["../../../src/style-border-input/src/style-border-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkStyleBorderInput',\n});\n</script>\n<template>\n  <div ref=\"el\" class=\"dk-style-border-input\" :class=\"width.value < 400 ? 'mini' : ''\">\n    <div class=\"border-box\">\n      <dk-icon\n        v-for=\"item in positions\"\n        :key=\"item\"\n        :icon=\"'gg:border-' + item\"\n        :class=\"'border-box-option border-' + item + ' ' + (position == item ? 'selected' : '')\"\n        :size=\"24\"\n        :style=\"'grid-area: border-' + item + ' / border-' + item + ' / border-' + item + ' / border-' + item + ';'\"\n        @click=\"position = item\"\n      ></dk-icon>\n    </div>\n    <div style=\"width: 100%\" class=\"m-l-20px\">\n      <!--  样式、宽度、颜色-->\n      <el-form label-width=\"50px\" label-position=\"left\" size=\"small\">\n        <el-form-item label=\"尺寸\">\n          <template #label>\n            <el-tooltip effect=\"dark\" content=\"点击清除\" placement=\"top-start\" :disabled=\"!form[position].borderWidth\">\n              <span\n                class=\"cursor-pointer\"\n                :class=\"form[position].borderWidth ? 'color-blue' : ''\"\n                @click=\"del('borderWidth')\"\n                >尺寸</span\n              >\n            </el-tooltip>\n          </template>\n          <el-slider\n            v-model=\"form[position].borderWidth\"\n            class=\"dk-border-slider\"\n            :max=\"50\"\n            @change=\"clearOtherBorder()\"\n          />\n          <el-input\n            v-model=\"form[position].borderWidth\"\n            class=\"dk-border-input\"\n            type=\"number\"\n            @change=\"clearOtherBorder()\"\n          >\n            <template #append>\n              <el-select\n                v-model=\"form[position].unit\"\n                placeholder=\"请选择\"\n                class=\"dk-border-select\"\n                suffix-icon=\"\"\n                @change=\"clearOtherBorder()\"\n              >\n                <el-option v-for=\"item in units\" :key=\"item\" :label=\"item\" :value=\"item\" />\n              </el-select>\n            </template>\n          </el-input>\n        </el-form-item>\n        <el-form-item label=\"样式\">\n          <template #label>\n            <el-tooltip effect=\"dark\" content=\"点击清除\" placement=\"top-start\" :disabled=\"!form[position].borderStyle\">\n              <span\n                class=\"cursor-pointer\"\n                :class=\"form[position].borderStyle ? 'color-blue' : ''\"\n                @click=\"del('borderStyle')\"\n                >样式</span\n              >\n            </el-tooltip>\n          </template>\n          <el-radio-group v-model=\"form[position].borderStyle\" @change=\"clearOtherBorder()\">\n            <el-radio-button label=\"solid\" name=\"type\">\n              <dk-icon icon=\"gg:border-style-solid\"></dk-icon>\n            </el-radio-button>\n            <el-radio-button label=\"dotted\" name=\"type\">\n              <dk-icon icon=\"gg:border-style-dotted\"></dk-icon>\n            </el-radio-button>\n            <el-radio-button label=\"dashed\" name=\"type\">\n              <dk-icon icon=\"gg:border-style-dashed\"></dk-icon>\n            </el-radio-button>\n            <el-radio-button label=\"double\" name=\"type\">\n              <dk-icon icon=\"memory:box-light-double-horizontal\"></dk-icon>\n            </el-radio-button>\n          </el-radio-group>\n        </el-form-item>\n        <el-form-item label=\"颜色\">\n          <template #label>\n            <el-tooltip effect=\"dark\" content=\"点击清除\" placement=\"top-start\" :disabled=\"!form[position].borderColor\">\n              <span\n                class=\"cursor-pointer\"\n                :class=\"form[position].borderColor ? 'color-blue' : ''\"\n                @click=\"del('borderColor')\"\n                >颜色</span\n              >\n            </el-tooltip>\n          </template>\n          <el-color-picker v-model=\"form[position].borderColor\" />\n        </el-form-item>\n        <el-form-item label=\"弧度\">\n          <template #label>\n            <el-tooltip effect=\"dark\" content=\"点击清除\" placement=\"top-start\" :disabled=\"form.radius == '0px'\">\n              <span class=\"cursor-pointer\" :class=\"form.radius !== '0px' ? 'color-blue' : ''\" @click=\"del('radius')\"\n                >弧度</span\n              >\n            </el-tooltip>\n          </template>\n          <dk-box-size-input v-model=\"form.radius\" type=\"radius\"></dk-box-size-input>\n        </el-form-item>\n      </el-form>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { styleBorderInputProps } from './props'\nimport { computed, onMounted, reactive, ref, watch } from 'vue'\nimport { upper } from '@vipl520/utils'\nimport { useElementSize, useWindowSize } from '@vueuse/core'\n\n\n\nconst props = defineProps(styleBorderInputProps)\nconst emit = defineEmits(['update:modelValue'])\n\nconst positions = ['top', 'right', 'bottom', 'left', 'all']\nconst units = ['px', '%', 'rem', 'em', 'vw', 'vh']\nconst position = ref('all')\nconst el: any = ref()\nconst { width } = useElementSize(el) // 当前组件宽度\nconst defaultForm = () => ({\n  unit: 'px',\n})\n\nconst form: any = reactive({\n  top: defaultForm(),\n  right: defaultForm(),\n  bottom: defaultForm(),\n  left: defaultForm(),\n  all: defaultForm(),\n  radius: props.modelValue.borderRadius || '0px',\n})\n\nconst styles = computed(() => {\n  const style: any = {}\n  positions.forEach((item) => {\n    if (item === 'all') {\n      if (form[item].borderWidth) {\n        style.borderWidth = form[item].borderWidth + (form[item].unit || 'px')\n      }\n      if (form[item].borderStyle) {\n        style.borderStyle = form[item].borderStyle\n      }\n      if (form[item].borderColor) {\n        style.borderColor = form[item].borderColor\n      }\n    } else {\n      if (form[item].borderWidth) {\n        style['border' + upper(item) + 'Width'] = form[item].borderWidth + (form[item].unit || 'px')\n      }\n\n      if (form[item].borderStyle) {\n        style['border' + upper(item) + 'Style'] = form[item].borderStyle\n      }\n\n      if (form[item].borderColor) {\n        style['border' + upper(item) + 'Color'] = form[item].borderColor\n      }\n    }\n  })\n  // 把style中的borderWidth、borderStyle、borderColor放到最前面\n  if (form.radius !== '0px') {\n    style.borderRadius = form.radius\n  }\n  return style\n})\nwatch(styles, () => {\n  emit('update:modelValue', styles.value)\n})\n\nconst init = () => {\n  const keys = [\n    'borderWidth',\n    'borderStyle',\n    'borderColor',\n    'borderRightWidth',\n    'borderRightStyle',\n    'borderRightColor',\n    'borderLeftWidth',\n    'borderLeftStyle',\n    'borderLeftColor',\n    'borderTopWidth',\n    'borderTopStyle',\n    'borderTopColor',\n    'borderBottomWidth',\n    'borderBottomStyle',\n    'borderBottomColor',\n    'borderRadius',\n  ]\n\n  keys.forEach((key) => {\n    if (props.modelValue[key]) {\n      if (key === 'borderRadius') {\n        form.radius = props.modelValue[key]\n      } else {\n        let [_, position, property] = key.split(/(?=[A-Z])/)\n        let _position = position.toLowerCase() // 位置\n        const value = props.modelValue[key] // 值\n        if (positions.indexOf(_position) === -1) {\n          _position = 'all'\n          property = position\n        }\n        if (property === 'Width') {\n          const width = parseInt(value) || 0\n          const unit = value.replace(width + '', '') || 'px'\n          if (units.indexOf(unit) > -1) {\n            form[_position].unit = unit\n            form[_position].borderWidth = width\n          }\n        } else {\n          form[_position]['border' + property] = value\n        }\n      }\n    } else {\n      if (key === 'borderRadius') {\n        form.radius = '0px'\n      } else {\n        // delete form[position.value][key]\n        let [_, position, property] = key.split(/(?=[A-Z])/)\n\n        let _position = position.toLowerCase() // 位置\n        if (positions.indexOf(_position) === -1) {\n          _position = 'all'\n          property = position\n        }\n        const value = props.modelValue[key] // 值\n        if (property === 'Width') {\n          delete form[_position].borderWidth\n          delete form[_position].unit\n        } else {\n          delete form[_position]['border' + property]\n        }\n      }\n    }\n  })\n}\n\nconst clearOtherBorder = () => {\n  if (position.value === 'all') {\n    positions.forEach((item) => {\n      if (item !== 'all') {\n        form[item] = {\n          unit: 'px',\n        }\n      }\n    })\n  } else {\n    positions.forEach((item) => {\n      if (item === 'all') {\n        form[item] = {\n          unit: 'px',\n        }\n      }\n    })\n  }\n}\nconst del = (value: any) => {\n  if (value === 'radius') {\n    form.radius = '0px'\n  } else {\n    delete form[position.value][value]\n  }\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    init()\n  },\n  {\n    deep: true,\n  }\n)\n\nonMounted(() => {\n  init()\n})\n</script>\n"],"names":["__MACROS_defineComponent","position","width"],"mappings":"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"}
+{"version":3,"file":"style-border-input.vue2.mjs","sources":["../../../src/style-border-input/src/style-border-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkStyleBorderInput',\n});\n</script>\n<template>\n  <div ref=\"el\" class=\"dk-style-border-input\" :class=\"width.value < 400 ? 'mini' : ''\">\n    <div class=\"border-box\">\n      <dk-icon\n        v-for=\"item in positions\"\n        :key=\"item\"\n        :icon=\"'gg:border-' + item\"\n        :class=\"'border-box-option border-' + item + ' ' + (position == item ? 'selected' : '')\"\n        :size=\"24\"\n        :style=\"'grid-area: border-' + item + ' / border-' + item + ' / border-' + item + ' / border-' + item + ';'\"\n        @click=\"position = item\"\n      ></dk-icon>\n    </div>\n    <div style=\"width: 100%\" class=\"m-l-20px\">\n      <!--  样式、宽度、颜色-->\n      <el-form label-width=\"50px\" label-position=\"left\" size=\"small\">\n        <el-form-item label=\"尺寸\">\n          <template #label>\n            <el-tooltip effect=\"dark\" content=\"点击清除\" placement=\"top-start\" :disabled=\"!form[position].borderWidth\">\n              <span\n                class=\"cursor-pointer\"\n                :class=\"form[position].borderWidth ? 'color-blue' : ''\"\n                @click=\"del('borderWidth')\"\n                >尺寸</span\n              >\n            </el-tooltip>\n          </template>\n          <div style=\"display: flex\">\n            <el-slider\n              v-model=\"form[position].borderWidth\"\n              class=\"dk-border-slider\"\n              :max=\"50\"\n              @change=\"clearOtherBorder()\"\n            />\n            <el-input\n              v-model=\"form[position].borderWidth\"\n              class=\"dk-border-input\"\n              type=\"number\"\n              @change=\"clearOtherBorder()\"\n            >\n              <template #append>\n                <el-select\n                  v-model=\"form[position].unit\"\n                  placeholder=\"请选择\"\n                  class=\"dk-border-select\"\n                  style=\"width: 50px\"\n                  suffix-icon=\"\"\n                  @change=\"clearOtherBorder()\"\n                >\n                  <el-option v-for=\"item in units\" :key=\"item\" :label=\"item\" :value=\"item\" />\n                </el-select>\n              </template>\n            </el-input>\n          </div>\n        </el-form-item>\n        <el-form-item label=\"样式\">\n          <template #label>\n            <el-tooltip effect=\"dark\" content=\"点击清除\" placement=\"top-start\" :disabled=\"!form[position].borderStyle\">\n              <span\n                class=\"cursor-pointer\"\n                :class=\"form[position].borderStyle ? 'color-blue' : ''\"\n                @click=\"del('borderStyle')\"\n                >样式</span\n              >\n            </el-tooltip>\n          </template>\n          <el-radio-group v-model=\"form[position].borderStyle\" @change=\"clearOtherBorder()\">\n            <el-radio-button label=\"solid\" name=\"type\">\n              <dk-icon icon=\"gg:border-style-solid\"></dk-icon>\n            </el-radio-button>\n            <el-radio-button label=\"dotted\" name=\"type\">\n              <dk-icon icon=\"gg:border-style-dotted\"></dk-icon>\n            </el-radio-button>\n            <el-radio-button label=\"dashed\" name=\"type\">\n              <dk-icon icon=\"gg:border-style-dashed\"></dk-icon>\n            </el-radio-button>\n            <el-radio-button label=\"double\" name=\"type\">\n              <dk-icon icon=\"memory:box-light-double-horizontal\"></dk-icon>\n            </el-radio-button>\n          </el-radio-group>\n        </el-form-item>\n        <el-form-item label=\"颜色\">\n          <template #label>\n            <el-tooltip effect=\"dark\" content=\"点击清除\" placement=\"top-start\" :disabled=\"!form[position].borderColor\">\n              <span\n                class=\"cursor-pointer\"\n                :class=\"form[position].borderColor ? 'color-blue' : ''\"\n                @click=\"del('borderColor')\"\n                >颜色</span\n              >\n            </el-tooltip>\n          </template>\n          <el-color-picker v-model=\"form[position].borderColor\" />\n        </el-form-item>\n        <el-form-item label=\"弧度\">\n          <template #label>\n            <el-tooltip effect=\"dark\" content=\"点击清除\" placement=\"top-start\" :disabled=\"form.radius == '0px'\">\n              <span class=\"cursor-pointer\" :class=\"form.radius !== '0px' ? 'color-blue' : ''\" @click=\"del('radius')\"\n                >弧度</span\n              >\n            </el-tooltip>\n          </template>\n          <dk-box-size-input v-model=\"form.radius\" type=\"radius\"></dk-box-size-input>\n        </el-form-item>\n      </el-form>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { styleBorderInputProps } from './props'\nimport { computed, onMounted, reactive, ref, watch } from 'vue'\nimport { upper } from '@vipl520/utils'\nimport { useElementSize, useWindowSize } from '@vueuse/core'\n\n\n\nconst props = defineProps(styleBorderInputProps)\nconst emit = defineEmits(['update:modelValue'])\n\nconst positions = ['top', 'right', 'bottom', 'left', 'all']\nconst units = ['px', '%', 'rem', 'em', 'vw', 'vh']\nconst position = ref('all')\nconst el: any = ref()\nconst { width } = useElementSize(el) // 当前组件宽度\nconst defaultForm = () => ({\n  unit: 'px',\n})\n\nconst form: any = reactive({\n  top: defaultForm(),\n  right: defaultForm(),\n  bottom: defaultForm(),\n  left: defaultForm(),\n  all: defaultForm(),\n  radius: props.modelValue.borderRadius || '0px',\n})\n\nconst styles = computed(() => {\n  const style: any = {}\n  positions.forEach((item) => {\n    if (item === 'all') {\n      if (form[item].borderWidth) {\n        style.borderWidth = form[item].borderWidth + (form[item].unit || 'px')\n      }\n      if (form[item].borderStyle) {\n        style.borderStyle = form[item].borderStyle\n      }\n      if (form[item].borderColor) {\n        style.borderColor = form[item].borderColor\n      }\n    } else {\n      if (form[item].borderWidth) {\n        style['border' + upper(item) + 'Width'] = form[item].borderWidth + (form[item].unit || 'px')\n      }\n\n      if (form[item].borderStyle) {\n        style['border' + upper(item) + 'Style'] = form[item].borderStyle\n      }\n\n      if (form[item].borderColor) {\n        style['border' + upper(item) + 'Color'] = form[item].borderColor\n      }\n    }\n  })\n  // 把style中的borderWidth、borderStyle、borderColor放到最前面\n  if (form.radius !== '0px') {\n    style.borderRadius = form.radius\n  }\n  return style\n})\nwatch(styles, () => {\n  emit('update:modelValue', styles.value)\n})\n\nconst init = () => {\n  const keys = [\n    'borderWidth',\n    'borderStyle',\n    'borderColor',\n    'borderRightWidth',\n    'borderRightStyle',\n    'borderRightColor',\n    'borderLeftWidth',\n    'borderLeftStyle',\n    'borderLeftColor',\n    'borderTopWidth',\n    'borderTopStyle',\n    'borderTopColor',\n    'borderBottomWidth',\n    'borderBottomStyle',\n    'borderBottomColor',\n    'borderRadius',\n  ]\n\n  keys.forEach((key) => {\n    if (props.modelValue[key]) {\n      if (key === 'borderRadius') {\n        form.radius = props.modelValue[key]\n      } else {\n        let [_, position, property] = key.split(/(?=[A-Z])/)\n        let _position = position.toLowerCase() // 位置\n        const value = props.modelValue[key] // 值\n        if (positions.indexOf(_position) === -1) {\n          _position = 'all'\n          property = position\n        }\n        if (property === 'Width') {\n          const width = parseInt(value) || 0\n          const unit = value.replace(width + '', '') || 'px'\n          if (units.indexOf(unit) > -1) {\n            form[_position].unit = unit\n            form[_position].borderWidth = width\n          }\n        } else {\n          form[_position]['border' + property] = value\n        }\n      }\n    } else {\n      if (key === 'borderRadius') {\n        form.radius = '0px'\n      } else {\n        // delete form[position.value][key]\n        let [_, position, property] = key.split(/(?=[A-Z])/)\n\n        let _position = position.toLowerCase() // 位置\n        if (positions.indexOf(_position) === -1) {\n          _position = 'all'\n          property = position\n        }\n        const value = props.modelValue[key] // 值\n        if (property === 'Width') {\n          delete form[_position].borderWidth\n          delete form[_position].unit\n        } else {\n          delete form[_position]['border' + property]\n        }\n      }\n    }\n  })\n}\n\nconst clearOtherBorder = () => {\n  if (position.value === 'all') {\n    positions.forEach((item) => {\n      if (item !== 'all') {\n        form[item] = {\n          unit: 'px',\n        }\n      }\n    })\n  } else {\n    positions.forEach((item) => {\n      if (item === 'all') {\n        form[item] = {\n          unit: 'px',\n        }\n      }\n    })\n  }\n}\nconst del = (value: any) => {\n  if (value === 'radius') {\n    form.radius = '0px'\n  } else {\n    delete form[position.value][value]\n  }\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    init()\n  },\n  {\n    deep: true,\n  }\n)\n\nonMounted(() => {\n  init()\n})\n</script>\n"],"names":["__MACROS_defineComponent","position","width"],"mappings":"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"}

package/lib/hot-area-input/style/index.scss

@@ -1,6 +1,5 @@
 /* stylelint-disable */
 .dk-hot-area-input {
-
 }
 .hot-area-content {
   display: flex;

package/lib/page-diy/index.d.ts

@@ -23,6 +23,14 @@ export declare const PageDiy: import("@vipl520/utils").WithInstall<import("vue")
         type: BooleanConstructor;
         default: undefined;
     };
+    rightAsideWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    leftAsideWidth: {
+        type: StringConstructor;
+        default: string;
+    };
 }, {
     countObj: import("vue").ComputedRef<{}>;
     diyTree: import("vue").ComputedRef<any[]>;
@@ -270,6 +278,14 @@ export declare const PageDiy: import("@vipl520/utils").WithInstall<import("vue")
         type: BooleanConstructor;
         default: undefined;
     };
+    rightAsideWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    leftAsideWidth: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     type: string;
     config: Record<string, any>;
@@ -277,6 +293,8 @@ export declare const PageDiy: import("@vipl520/utils").WithInstall<import("vue")
     menu: Record<string, any>;
     mask: string;
     height: string;
+    rightAsideWidth: string;
+    leftAsideWidth: string;
 }, {}>>;
 export default PageDiy;
 export * from './src/props';

package/lib/page-diy/src/components/DragBox.vue.js

@@ -20,6 +20,7 @@ const _sfc_main = vue.defineComponent({
 
     const keys = {};
     if (ctx.$slots.default) {
+      // 这里报错 Unhandled error during execution of render function
       const children = ctx.$slots.default();
       children.forEach((v) => {
         if (v.key) {

package/lib/page-diy/src/components/DragBox.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragBox.vue.js","sources":["../../../../src/page-diy/src/components/DragBox.vue"],"sourcesContent":["<script>\nimport { h, defineComponent } from 'vue'\nimport draggable from 'vuedraggable/src/vuedraggable'\n\nexport default defineComponent({\n  name: 'DragBox',\n  props: ['rule', 'tag', 'formCreateInject'],\n  render(ctx) {\n    const subRule = { ...ctx.$props.rule.props, ...ctx.$attrs }\n    let _class = ctx.tag + '-drag drag-box'\n    if (!Object.keys(ctx.$slots).length) {\n      _class += ' ' + ctx.tag + '-holder'\n    }\n    subRule.class = _class\n    subRule.modelValue = [...this.$props.formCreateInject.children]\n\n    const keys = {}\n    if (ctx.$slots.default) {\n      const children = ctx.$slots.default()\n      children.forEach((v) => {\n        if (v.key) {\n          keys[v.key] = v\n        }\n      })\n    }\n\n    return h(draggable, subRule, {\n      item: ({ element }) => {\n        return h('div', {}, keys[element.__fc__.key + 'fc'])\n      },\n    })\n  },\n})\n</script>\n"],"names":["defineComponent","h"],"mappings":";;;;;;;;AAIA,MAAK,SAAU,GAAGA,mBAAa,CAAA;AAC7B,EAAA,IAAI,EAAE,SAAS;AACf,EAAA,KAAK,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,kBAAkB,CAAC;EAC1C,MAAM,CAAC,GAAG,EAAE;IACV,MAAM,OAAM,GAAI,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,CAAC,MAAO,GAAA;AAC1D,IAAA,IAAI,MAAK,GAAI,GAAG,CAAC,GAAI,GAAE,iBAAe;AACtC,IAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;MACnC,MAAK,IAAK,GAAI,GAAE,GAAG,CAAC,GAAE,GAAI,UAAQ;AACpC,KAAA;AACA,IAAA,OAAO,CAAC,KAAM,GAAE,OAAK;IACrB,OAAO,CAAC,UAAS,GAAI,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAA;;IAE9D,MAAM,IAAK,GAAE,GAAC;IACd,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE;AACtB,MAAA,MAAM,QAAO,GAAI,GAAG,CAAC,MAAM,CAAC,OAAO,GAAC;MACpC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;AACtB,QAAA,IAAI,CAAC,CAAC,GAAG,EAAE;UACT,IAAI,CAAC,CAAC,CAAC,GAAG,CAAA,GAAI,EAAA;AAChB,SAAA;OACD,EAAA;AACH,KAAA;;IAEA,OAAOC,KAAC,CAAC,SAAS,EAAE,OAAO,EAAE;AAC3B,MAAA,IAAI,EAAE,CAAC,EAAE,OAAM,EAAG,KAAK;QACrB,OAAOA,KAAC,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAI,GAAE,IAAI,CAAC,CAAA;OACpD;KACF,CAAA;GACF;AACH,CAAC,EAAA;;;;;"}
+{"version":3,"file":"DragBox.vue.js","sources":["../../../../src/page-diy/src/components/DragBox.vue"],"sourcesContent":["<script>\nimport { h, defineComponent } from 'vue'\nimport draggable from 'vuedraggable/src/vuedraggable'\n\nexport default defineComponent({\n  name: 'DragBox',\n  props: ['rule', 'tag', 'formCreateInject'],\n  render(ctx) {\n    const subRule = { ...ctx.$props.rule.props, ...ctx.$attrs }\n    let _class = ctx.tag + '-drag drag-box'\n    if (!Object.keys(ctx.$slots).length) {\n      _class += ' ' + ctx.tag + '-holder'\n    }\n    subRule.class = _class\n    subRule.modelValue = [...this.$props.formCreateInject.children]\n\n    const keys = {}\n    if (ctx.$slots.default) {\n      // 这里报错 Unhandled error during execution of render function\n      const children = ctx.$slots.default()\n      children.forEach((v) => {\n        if (v.key) {\n          keys[v.key] = v\n        }\n      })\n    }\n\n    return h(draggable, subRule, {\n      item: ({ element }) => {\n        return h('div', {}, keys[element.__fc__.key + 'fc'])\n      },\n    })\n  },\n})\n</script>\n"],"names":["defineComponent","h"],"mappings":";;;;;;;;AAIA,MAAK,SAAU,GAAGA,mBAAa,CAAA;AAC7B,EAAA,IAAI,EAAE,SAAS;AACf,EAAA,KAAK,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,kBAAkB,CAAC;EAC1C,MAAM,CAAC,GAAG,EAAE;IACV,MAAM,OAAM,GAAI,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,CAAC,MAAO,GAAA;AAC1D,IAAA,IAAI,MAAK,GAAI,GAAG,CAAC,GAAI,GAAE,iBAAe;AACtC,IAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;MACnC,MAAK,IAAK,GAAI,GAAE,GAAG,CAAC,GAAE,GAAI,UAAQ;AACpC,KAAA;AACA,IAAA,OAAO,CAAC,KAAM,GAAE,OAAK;IACrB,OAAO,CAAC,UAAS,GAAI,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAA;;IAE9D,MAAM,IAAK,GAAE,GAAC;IACd,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE;;AAEtB,MAAA,MAAM,QAAO,GAAI,GAAG,CAAC,MAAM,CAAC,OAAO,GAAC;MACpC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;AACtB,QAAA,IAAI,CAAC,CAAC,GAAG,EAAE;UACT,IAAI,CAAC,CAAC,CAAC,GAAG,CAAA,GAAI,EAAA;AAChB,SAAA;OACD,EAAA;AACH,KAAA;;IAEA,OAAOC,KAAC,CAAC,SAAS,EAAE,OAAO,EAAE;AAC3B,MAAA,IAAI,EAAE,CAAC,EAAE,OAAM,EAAG,KAAK;QACrB,OAAOA,KAAC,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAI,GAAE,IAAI,CAAC,CAAA;OACpD;KACF,CAAA;GACF;AACH,CAAC,EAAA;;;;;"}

package/lib/page-diy/src/components/DragTool.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragTool.vue.js","sources":["../../../../src/page-diy/src/components/DragTool.vue"],"sourcesContent":["<template>\n  <div\n    class=\"drag-tool animate__animated\"\n    :class=\"{ active: state.active === id }\"\n    :style=\"_style\"\n    @click.stop=\"active\"\n  >\n    <div v-if=\"mask\" class=\"drag-mask\"></div>\n    <div class=\"drag-r\">\n      <div class=\"drag-btn\" title=\"添加当前组件\" @click=\"$emit('create')\">\n        <dk-icon icon=\"CirclePlus\"></dk-icon>\n      </div>\n      <div class=\"drag-btn\" title=\"复制当前组件\" @click=\"$emit('copy')\">\n        <dk-icon icon=\"CopyDocument\"></dk-icon>\n      </div>\n      <div\n        v-if=\"children\"\n        class=\"drag-btn\"\n        title=\"添加子组件\"\n        @click=\"$emit('addChild')\"\n      >\n        <dk-icon icon=\"fluent:tab-add-20-regular\"></dk-icon>\n      </div>\n      <div\n        class=\"drag-btn drag-btn-danger\"\n        title=\"删除组件\"\n        @click=\"$emit('delete')\"\n      >\n        <dk-icon icon=\"Close\"></dk-icon>\n      </div>\n    </div>\n    <slot name=\"default\"></slot>\n  </div>\n</template>\n\n<script>\nimport { computed, inject, toRefs, defineComponent } from 'vue'\n\nlet uni = 1\nexport default defineComponent({\n  name: 'DragTool',\n  props: {\n    dragBtn: {\n      default: false,\n      type: Boolean,\n    },\n    children: {\n      default: '',\n      type: String,\n    },\n    unique: {\n      default: '',\n      type: String,\n    },\n    mask: {\n      default: false,\n      type: Boolean,\n    },\n    setting: {\n      default: () => {},\n      type: [Object],\n    },\n  },\n  setup(props) {\n    const { unique } = toRefs(props)\n    const id = computed(() => unique.value || uni++)\n    const state = inject('fcx')\n    return {\n      id,\n      state,\n    }\n  },\n  computed: {\n    pageConfig() {\n      return {}\n    },\n    _style() {\n      if (this.setting.is_position) {\n        return {\n          ...this.setting.style,\n          ...this.setting.position,\n          position: 'absolute',\n        }\n      } else {\n        return {\n          ...this.setting.style,\n        }\n      }\n    },\n    _animate() {\n      // if (this.setting.loop_animate) {\n      //   return 'animate__' + this.setting.loop_animate + ' '\n      // } else if (this.setting.animate) {\n      //   return 'animate__' + this.setting.animate\n      // } else {\n      return ''\n      // }\n    },\n  },\n  beforeUnmount() {\n    this.state = {}\n  },\n  methods: {\n    active() {\n      if (this.state.active === this.id) return\n      this.state.active = this.id\n      this.$emit('active')\n    },\n  },\n})\n</script>\n"],"names":["defineComponent","toRefs","computed","inject","_createElementBlock","_openBlock","_createElementVNode","_createVNode","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"DragTool.vue.js","sources":["../../../../src/page-diy/src/components/DragTool.vue"],"sourcesContent":["<template>\n  <div\n    class=\"drag-tool animate__animated\"\n    :class=\"{ active: state.active === id }\"\n    :style=\"_style\"\n    @click.stop=\"active\"\n  >\n    <div v-if=\"mask\" class=\"drag-mask\"></div>\n    <div class=\"drag-r\">\n      <div class=\"drag-btn\" title=\"添加当前组件\" @click=\"$emit('create')\">\n        <dk-icon icon=\"CirclePlus\"></dk-icon>\n      </div>\n      <div class=\"drag-btn\" title=\"复制当前组件\" @click=\"$emit('copy')\">\n        <dk-icon icon=\"CopyDocument\"></dk-icon>\n      </div>\n      <div v-if=\"children\" class=\"drag-btn\" title=\"添加子组件\" @click=\"$emit('addChild')\">\n        <dk-icon icon=\"fluent:tab-add-20-regular\"></dk-icon>\n      </div>\n      <div class=\"drag-btn drag-btn-danger\" title=\"删除组件\" @click=\"$emit('delete')\">\n        <dk-icon icon=\"Close\"></dk-icon>\n      </div>\n    </div>\n    <slot name=\"default\"></slot>\n  </div>\n</template>\n\n<script>\nimport { computed, inject, toRefs, defineComponent } from 'vue'\n\nlet uni = 1\nexport default defineComponent({\n  name: 'DragTool',\n  props: {\n    dragBtn: {\n      default: false,\n      type: Boolean,\n    },\n    children: {\n      default: '',\n      type: String,\n    },\n    unique: {\n      default: '',\n      type: String,\n    },\n    mask: {\n      default: false,\n      type: Boolean,\n    },\n    setting: {\n      default: () => {},\n      type: [Object],\n    },\n  },\n  setup(props) {\n    const { unique } = toRefs(props)\n    const id = computed(() => unique.value || uni++)\n    const state = inject('fcx')\n    return {\n      id,\n      state,\n    }\n  },\n  computed: {\n    pageConfig() {\n      return {}\n    },\n    _style() {\n      if (this.setting.is_position) {\n        return {\n          ...this.setting.style,\n          ...this.setting.position,\n          position: 'absolute',\n        }\n      } else {\n        return {\n          ...this.setting.style,\n        }\n      }\n    },\n    _animate() {\n      // if (this.setting.loop_animate) {\n      //   return 'animate__' + this.setting.loop_animate + ' '\n      // } else if (this.setting.animate) {\n      //   return 'animate__' + this.setting.animate\n      // } else {\n      return ''\n      // }\n    },\n  },\n  beforeUnmount() {\n    this.state = {}\n  },\n  methods: {\n    active() {\n      if (this.state.active === this.id) return\n      this.state.active = this.id\n      this.$emit('active')\n    },\n  },\n})\n</script>\n"],"names":["defineComponent","toRefs","computed","inject","_createElementBlock","_openBlock","_createElementVNode","_createVNode","_renderSlot"],"mappings":";;;;;;;AA6BA,IAAI,MAAM,EAAA;AACV,MAAK,SAAU,GAAGA,mBAAa,CAAA;AAC7B,EAAA,IAAI,EAAE,UAAU;AAChB,EAAA,KAAK,EAAE;AACL,IAAA,OAAO,EAAE;MACP,OAAO,EAAE,KAAK;MACd,IAAI,EAAE,OAAO;KACd;AACD,IAAA,QAAQ,EAAE;MACR,OAAO,EAAE,EAAE;MACX,IAAI,EAAE,MAAM;KACb;AACD,IAAA,MAAM,EAAE;MACN,OAAO,EAAE,EAAE;MACX,IAAI,EAAE,MAAM;KACb;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,KAAK;MACd,IAAI,EAAE,OAAO;KACd;AACD,IAAA,OAAO,EAAE;AACP,MAAA,OAAO,EAAE,MAAM,EAAE;MACjB,IAAI,EAAE,CAAC,MAAM,CAAC;KACf;GACF;EACD,KAAK,CAAC,KAAK,EAAE;IACX,MAAM,EAAE,MAAO,EAAA,GAAIC,UAAM,CAAC,KAAK,EAAA;AAC/B,IAAA,MAAM,KAAKC,YAAQ,CAAC,MAAM,MAAM,CAAC,SAAS,GAAG,EAAE,EAAA;IAC/C,MAAM,KAAM,GAAEC,UAAM,CAAC,KAAK,EAAA;AAC1B,IAAA,OAAO;AACL,MAAA,EAAE;MACF,KAAK;AACP,KAAA;GACD;AACD,EAAA,QAAQ,EAAE;IACR,UAAU,GAAG;AACX,MAAA,OAAO,EAAC;KACT;AACD,IAAA,MAAM,GAAG;MACP,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE;AAC5B,QAAA,OAAO;AACL,UAAA,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK;UACrB,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ;AACxB,UAAA,QAAQ,EAAE,UAAU;AACtB,SAAA;OACA,MAAK;AACL,QAAA,OAAO;AACL,UAAA,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK;AACvB,SAAA;AACF,OAAA;KACD;IACD,QAAQ,GAAG;AACT;;AAEA;AACA;AACA;AACA,MAAA,OAAO,EAAC;AACR;KACD;GACF;AACD,EAAA,aAAa,GAAG;IACd,IAAI,CAAC,KAAM,GAAE,GAAC;GACf;AACD,EAAA,OAAO,EAAE;AACP,IAAA,MAAM,GAAG;AACP,MAAA,IAAI,IAAI,CAAC,KAAK,CAAC,MAAK,KAAM,IAAI,CAAC,EAAE,EAAE,MAAK;MACxC,IAAI,CAAC,KAAK,CAAC,MAAO,GAAE,IAAI,CAAC,GAAC;AAC1B,MAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAA;KACpB;GACF;AACH,CAAC,EAAA;;;;AA7FoB,EAAA,KAAK,EAAC,WAAW;;AAC7B,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,QAAQ,GAAA;;;;;2BAPrBC,sBAsBM,CAAA,KAAA,EAAA;AArBJ,IAAA,KAAK,sBAAC,6BAA6B,EAAA,EAAA,MAAA,EACjB,UAAK,CAAC,MAAM,KAAK,IAAE,CAAA,EAAA,EAAA,CAAA,CAAA;AACpC,IAAA,KAAK,qBAAE,IAAM,CAAA,MAAA,CAAA;AACb,IAAA,OAAK,4DAAO,IAAM,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA;;KAER,IAAI,CAAA,IAAA;AAAf,SAAAC,aAAA,EAAA,EAAAD,sBAAA,CAAyC,OAAzC,UAAyC,CAAA;;AACzC,IAAAE,sBAAA,CAaM,OAbN,UAaM,EAAA;MAZJA,sBAEM,CAAA,KAAA,EAAA;AAFD,QAAA,KAAK,EAAC,UAAU;AAAC,QAAA,KAAK,EAAC,QAAQ;AAAE,QAAA,OAAK,uCAAE,IAAK,CAAA,KAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;QAChDC,eAAqC,CAAA,kBAAA,EAAA,EAA5B,IAAI,EAAC,YAAY,EAAA,CAAA;;MAE5BD,sBAEM,CAAA,KAAA,EAAA;AAFD,QAAA,KAAK,EAAC,UAAU;AAAC,QAAA,KAAK,EAAC,QAAQ;AAAE,QAAA,OAAK,uCAAE,IAAK,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA,CAAA;;QAChDC,eAAuC,CAAA,kBAAA,EAAA,EAA9B,IAAI,EAAC,cAAc,EAAA,CAAA;;OAEnB,IAAQ,CAAA,QAAA;4BAAnBH,sBAEM,CAAA,KAAA,EAAA;;AAFe,YAAA,KAAK,EAAC,UAAU;AAAC,YAAA,KAAK,EAAC,OAAO;AAAE,YAAA,OAAK,uCAAE,IAAK,CAAA,KAAA,CAAA,UAAA,CAAA,CAAA,CAAA;;YAC/DG,eAAoD,CAAA,kBAAA,EAAA,EAA3C,IAAI,EAAC,2BAA2B,EAAA,CAAA;;;MAE3CD,sBAEM,CAAA,KAAA,EAAA;AAFD,QAAA,KAAK,EAAC,0BAA0B;AAAC,QAAA,KAAK,EAAC,MAAM;AAAE,QAAA,OAAK,uCAAE,IAAK,CAAA,KAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;QAC9DC,eAAgC,CAAA,kBAAA,EAAA,EAAvB,IAAI,EAAC,OAAO,EAAA,CAAA;;;IAGzBC,cAA4B,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;;;;;;;"}

package/lib/page-diy/src/components/PreviewPhone.vue2.js

@@ -59,7 +59,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const cache = JSON.parse(utils.storage.get(key) || "{}");
     const form = vue.ref({
       showLine: cache.showLine || false,
-      margin: cache.margin || 0
+      margin: cache.margin || 0,
+      preview: cache.preview || false
     });
     const changeForm = () => {
       utils.storage.set(key, JSON.stringify(form.value));
@@ -81,13 +82,23 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
     };
     const _style = vue.computed(() => {
-      let line = {};
-      if (form.value.showLine) {
+      let line = {
+        "--padding": "0",
+        "--overflow": "initial"
+      };
+      if (form.value.showLine && !form.value.preview) {
         line = {
           "--margin": form.value.margin + "px",
           "--showDashed": "1px"
         };
       }
+      if (form.value.preview) {
+        line["--padding"] = "0";
+        line["--overflow"] = "hidden";
+      } else {
+        line["--padding"] = "2px 0";
+        line["--overflow"] = "initial";
+      }
       return {
         ...props.pageConfig.style,
         ...line
@@ -216,12 +227,23 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                           min: 0,
                           step: 1,
                           "show-stops": "",
-                          max: 10,
+                          max: 20,
                           onChange: _cache[5] || (_cache[5] = ($event) => changeForm())
                         }, null, 8, ["modelValue"])
                       ]),
                       _: 1
                       /* STABLE */
+                    }),
+                    vue.createVNode(_component_el_form_item, { label: "\u6548\u679C\u9884\u89C8" }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(_component_el_switch, {
+                          modelValue: form.value.preview,
+                          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => form.value.preview = $event),
+                          onChange: _cache[7] || (_cache[7] = ($event) => changeForm())
+                        }, null, 8, ["modelValue"])
+                      ]),
+                      _: 1
+                      /* STABLE */
                     })
                   ]),
                   _: 1

package/lib/page-diy/src/components/PreviewPhone.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewPhone.vue2.js","sources":["../../../../src/page-diy/src/components/PreviewPhone.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'PreviewPhone',\n});\n</script>\n<template>\n  <div class=\"preview-phone\">\n    <div class=\"phone\">\n      <div class=\"phone-header\">\n        <div class=\"phone-header-top\">\n          <div class=\"phone-time\">\n            <span>{{ time }}</span>\n            <van-icon name=\"wechat\" color=\"#2ddd71\" />\n          </div>\n          <div />\n          <div class=\"phone-battery\">\n            <span class=\"m-r-4px\">100%</span>\n            <dk-icon icon=\"gg:battery-full\" :size=\"18\" color=\"#555\" hover-color=\"#f00\"></dk-icon>\n          </div>\n        </div>\n        <div class=\"phone-title\">\n          <div class=\"phone-title-icon\">\n            <el-dropdown trigger=\"click\" placement=\"bottom-start\">\n              <dk-icon icon=\"Close\" hover-color=\"var(--el-color-primary)\" :size=\"20\" style=\"cursor: pointer\"></dk-icon>\n              <template #dropdown>\n                <el-dropdown-menu>\n                  <el-dropdown-item @click=\"clear('rule')\">清除组件</el-dropdown-item>\n                  <el-dropdown-item @click=\"clear('page')\">清除页面</el-dropdown-item>\n                </el-dropdown-menu>\n              </template>\n            </el-dropdown>\n          </div>\n          <div>页面标题</div>\n          <div class=\"phone-title-icon\">\n            <el-popover placement=\"bottom\" :width=\"200\" trigger=\"click\">\n              <template #reference>\n                <dk-icon icon=\"MoreFilled\" :size=\"20\" hover-color=\"var(--el-color-primary)\" style=\"cursor: pointer\" />\n              </template>\n              <el-form-item label=\"显示网格\">\n                <el-switch v-model=\"form.showLine\" @change=\"changeForm()\" />\n              </el-form-item>\n              <el-form-item label=\"网格间距\">\n                <el-slider v-model=\"form.margin\" :min=\"0\" :step=\"1\" show-stops :max=\"10\" @change=\"changeForm()\" />\n              </el-form-item>\n            </el-popover>\n          </div>\n        </div>\n      </div>\n      <div class=\"phone-body _fc-m-drag\" :style=\"_style\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, inject } from 'vue'\nimport { storage } from '@vipl520/utils'\nimport { ElMessage, ElMessageBox } from 'element-plus'\n\nconst diy: any = inject('diy')\nconst props = defineProps({\n  value: {\n    default: '',\n    type: String,\n  },\n  pageConfig: {\n    default: () => {},\n    type: [Object],\n  },\n})\n\nconst key = 'preview-phone'\nconst cache: any = JSON.parse(storage.get(key) || '{}')\n\nconst form = ref({\n  showLine: cache.showLine || false,\n  margin: cache.margin || 0,\n})\n\nconst changeForm = () => {\n  storage.set(key, JSON.stringify(form.value))\n}\nconst clear = (type = '') => {\n  const { proxy } = diy\n  const typeName: any = {\n    rule: '组件',\n    config: '配置',\n  }\n  ElMessageBox.confirm('当前要清除' + typeName[type] + '，是否继续?', '警告', {\n    confirmButtonText: '确定',\n    cancelButtonText: '取消',\n    type: 'warning',\n  })\n    .then(() => {\n      proxy.clear(type)\n      ElMessage.success('清除成功')\n    })\n    .catch(() => {})\n}\nconst _style = computed(() => {\n  let line = {}\n  if (form.value.showLine) {\n    line = {\n      '--margin': form.value.margin + 'px',\n      '--showDashed': '1px',\n    }\n  }\n  return {\n    ...props.pageConfig.style,\n    ...line,\n  }\n})\n\nconst time = computed(() => {\n  const d = new Date()\n  const hour = d.getHours() // 得到小时数\n  const minute = d.getMinutes() // 得到分钟数\n  return hour + ':' + minute\n})\n</script>\n"],"names":["__MACROS_defineComponent","inject","storage","ref","ElMessageBox","ElMessage","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,cAAA;AACR,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;AAyDD,IAAM,MAAA,GAAA,GAAWC,WAAO,KAAK,CAAA,CAAA;AAY7B,IAAA,MAAM,GAAM,GAAA,eAAA,CAAA;AACZ,IAAA,MAAM,QAAa,IAAK,CAAA,KAAA,CAAMC,cAAQ,GAAI,CAAA,GAAG,KAAK,IAAI,CAAA,CAAA;AAEtD,IAAA,MAAM,OAAOC,OAAI,CAAA;AAAA,MACf,QAAA,EAAU,MAAM,QAAY,IAAA,KAAA;AAAA,MAC5B,MAAA,EAAQ,MAAM,MAAU,IAAA,CAAA;AAAA,KACzB,CAAA,CAAA;AAED,IAAA,MAAM,aAAa,MAAM;AACvB,MAAAD,aAAA,CAAQ,IAAI,GAAK,EAAA,IAAA,CAAK,SAAU,CAAA,IAAA,CAAK,KAAK,CAAC,CAAA,CAAA;AAAA,KAC7C,CAAA;AACA,IAAM,MAAA,KAAA,GAAQ,CAAC,IAAA,GAAO,EAAO,KAAA;AAC3B,MAAM,MAAA,EAAE,OAAU,GAAA,GAAA,CAAA;AAClB,MAAA,MAAM,QAAgB,GAAA;AAAA,QACpB,IAAM,EAAA,cAAA;AAAA,QACN,MAAQ,EAAA,cAAA;AAAA,OACV,CAAA;AACA,MAAAE,wBAAA,CAAa,QAAQ,gCAAU,GAAA,QAAA,CAAS,IAAI,CAAA,GAAI,mCAAU,cAAM,EAAA;AAAA,QAC9D,iBAAmB,EAAA,cAAA;AAAA,QACnB,gBAAkB,EAAA,cAAA;AAAA,QAClB,IAAM,EAAA,SAAA;AAAA,OACP,CACE,CAAA,IAAA,CAAK,MAAM;AACV,QAAA,KAAA,CAAM,MAAM,IAAI,CAAA,CAAA;AAChB,QAAAC,qBAAA,CAAU,QAAQ,0BAAM,CAAA,CAAA;AAAA,OACzB,CACA,CAAA,KAAA,CAAM,MAAM;AAAA,OAAE,CAAA,CAAA;AAAA,KACnB,CAAA;AACA,IAAM,MAAA,MAAA,GAASC,aAAS,MAAM;AAC5B,MAAA,IAAI,OAAO,EAAC,CAAA;AACZ,MAAI,IAAA,IAAA,CAAK,MAAM,QAAU,EAAA;AACvB,QAAO,IAAA,GAAA;AAAA,UACL,UAAA,EAAY,IAAK,CAAA,KAAA,CAAM,MAAS,GAAA,IAAA;AAAA,UAChC,cAAgB,EAAA,KAAA;AAAA,SAClB,CAAA;AAAA,OACF;AACA,MAAO,OAAA;AAAA,QACL,GAAG,MAAM,UAAW,CAAA,KAAA;AAAA,QACpB,GAAG,IAAA;AAAA,OACL,CAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAM,MAAA,IAAA,GAAOA,aAAS,MAAM;AAC1B,MAAM,MAAA,CAAA,uBAAQ,IAAK,EAAA,CAAA;AACnB,MAAM,MAAA,IAAA,GAAO,EAAE,QAAS,EAAA,CAAA;AACxB,MAAM,MAAA,MAAA,GAAS,EAAE,UAAW,EAAA,CAAA;AAC5B,MAAA,OAAO,OAAO,GAAM,GAAA,MAAA,CAAA;AAAA,KACrB,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PreviewPhone.vue2.js","sources":["../../../../src/page-diy/src/components/PreviewPhone.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'PreviewPhone',\n});\n</script>\n<template>\n  <div class=\"preview-phone\">\n    <div class=\"phone\">\n      <div class=\"phone-header\">\n        <div class=\"phone-header-top\">\n          <div class=\"phone-time\">\n            <span>{{ time }}</span>\n            <van-icon name=\"wechat\" color=\"#2ddd71\" />\n          </div>\n          <div />\n          <div class=\"phone-battery\">\n            <span class=\"m-r-4px\">100%</span>\n            <dk-icon icon=\"gg:battery-full\" :size=\"18\" color=\"#555\" hover-color=\"#f00\"></dk-icon>\n          </div>\n        </div>\n        <div class=\"phone-title\">\n          <div class=\"phone-title-icon\">\n            <el-dropdown trigger=\"click\" placement=\"bottom-start\">\n              <dk-icon icon=\"Close\" hover-color=\"var(--el-color-primary)\" :size=\"20\" style=\"cursor: pointer\"></dk-icon>\n              <template #dropdown>\n                <el-dropdown-menu>\n                  <el-dropdown-item @click=\"clear('rule')\">清除组件</el-dropdown-item>\n                  <el-dropdown-item @click=\"clear('page')\">清除页面</el-dropdown-item>\n                </el-dropdown-menu>\n              </template>\n            </el-dropdown>\n          </div>\n          <div>页面标题</div>\n          <div class=\"phone-title-icon\">\n            <el-popover placement=\"bottom\" :width=\"200\" trigger=\"click\">\n              <template #reference>\n                <dk-icon icon=\"MoreFilled\" :size=\"20\" hover-color=\"var(--el-color-primary)\" style=\"cursor: pointer\" />\n              </template>\n              <el-form-item label=\"显示网格\">\n                <el-switch v-model=\"form.showLine\" @change=\"changeForm()\" />\n              </el-form-item>\n              <el-form-item label=\"网格间距\">\n                <el-slider v-model=\"form.margin\" :min=\"0\" :step=\"1\" show-stops :max=\"20\" @change=\"changeForm()\" />\n              </el-form-item>\n              <el-form-item label=\"效果预览\">\n                <el-switch v-model=\"form.preview\" @change=\"changeForm()\" />\n              </el-form-item>\n            </el-popover>\n          </div>\n        </div>\n      </div>\n      <div class=\"phone-body _fc-m-drag\" :style=\"_style\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, inject } from 'vue'\nimport { storage } from '@vipl520/utils'\nimport { ElMessage, ElMessageBox } from 'element-plus'\n\nconst diy: any = inject('diy')\nconst props = defineProps({\n  value: {\n    default: '',\n    type: String,\n  },\n  pageConfig: {\n    default: () => {},\n    type: [Object],\n  },\n})\n\nconst key = 'preview-phone'\nconst cache: any = JSON.parse(storage.get(key) || '{}')\n\nconst form = ref({\n  showLine: cache.showLine || false,\n  margin: cache.margin || 0,\n  preview: cache.preview || false,\n})\n\nconst changeForm = () => {\n  storage.set(key, JSON.stringify(form.value))\n}\nconst clear = (type = '') => {\n  const { proxy } = diy\n  const typeName: any = {\n    rule: '组件',\n    config: '配置',\n  }\n  ElMessageBox.confirm('当前要清除' + typeName[type] + '，是否继续?', '警告', {\n    confirmButtonText: '确定',\n    cancelButtonText: '取消',\n    type: 'warning',\n  })\n    .then(() => {\n      proxy.clear(type)\n      ElMessage.success('清除成功')\n    })\n    .catch(() => {})\n}\nconst _style = computed(() => {\n  let line: any = {\n    '--padding': '0',\n    '--overflow': 'initial',\n  }\n  if (form.value.showLine && !form.value.preview) {\n    line = {\n      '--margin': form.value.margin + 'px',\n      '--showDashed': '1px',\n    }\n  }\n  if (form.value.preview) {\n    line['--padding'] = '0'\n    line['--overflow'] = 'hidden'\n  } else {\n    line['--padding'] = '2px 0'\n    line['--overflow'] = 'initial'\n  }\n  return {\n    ...props.pageConfig.style,\n    ...line,\n  }\n})\n\nconst time = computed(() => {\n  const d = new Date()\n  const hour = d.getHours() // 得到小时数\n  const minute = d.getMinutes() // 得到分钟数\n  return hour + ':' + minute\n})\n</script>\n"],"names":["__MACROS_defineComponent","inject","storage","ref","ElMessageBox","ElMessage","computed"],"mappings":"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"}

package/lib/page-diy/src/config/rule/min/common/DkMinBlank.d.ts

@@ -5,7 +5,7 @@ declare namespace _default {
     export function rule(): {
         type: string;
         props: {
-            height: string;
+            height: number;
         };
         showStyle: boolean;
     };

package/lib/page-diy/src/config/rule/min/common/DkMinBlank.js

@@ -12,7 +12,7 @@ var DkMinBlank = {
     return {
       type: name,
       props: {
-        height: "20"
+        height: 20
       },
       showStyle: true
     };

package/lib/page-diy/src/config/rule/min/common/DkMinBlank.js.map

@@ -1 +1 @@
-{"version":3,"file":"DkMinBlank.js","sources":["../../../../../../../src/page-diy/src/config/rule/min/common/DkMinBlank.js"],"sourcesContent":["const label = '空白'\nconst name = 'DkMinBlank'\n\nexport default {\n  icon: 'FullScreen',\n  label,\n  name,\n  rule() {\n    return {\n      type: name,\n      props: {\n        height: '20',\n      },\n      showStyle: true,\n    }\n  },\n  props() {\n    return [{ type: 'number', field: 'height', title: '高度', value: 20, effect: { help: '具体效果查看真机预览' } }]\n  },\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,KAAQ,GAAA,cAAA,CAAA;AACd,MAAM,IAAO,GAAA,YAAA,CAAA;AAEb,iBAAe;AAAA,EACb,IAAM,EAAA,YAAA;AAAA,EACN,KAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAO,GAAA;AACL,IAAO,OAAA;AAAA,MACL,IAAM,EAAA,IAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL,MAAQ,EAAA,IAAA;AAAA,OACV;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,KACb,CAAA;AAAA,GACF;AAAA,EACA,KAAQ,GAAA;AACN,IAAA,OAAO,CAAC,EAAE,IAAM,EAAA,QAAA,EAAU,OAAO,QAAU,EAAA,KAAA,EAAO,cAAM,EAAA,KAAA,EAAO,IAAI,MAAQ,EAAA,EAAE,IAAM,EAAA,8DAAA,IAAgB,CAAA,CAAA;AAAA,GACrG;AACF,CAAA;;;;"}
+{"version":3,"file":"DkMinBlank.js","sources":["../../../../../../../src/page-diy/src/config/rule/min/common/DkMinBlank.js"],"sourcesContent":["const label = '空白'\nconst name = 'DkMinBlank'\n\nexport default {\n  icon: 'FullScreen',\n  label,\n  name,\n  rule() {\n    return {\n      type: name,\n      props: {\n        height: 20,\n      },\n      showStyle: true,\n    }\n  },\n  props() {\n    return [{ type: 'number', field: 'height', title: '高度', value: 20, effect: { help: '具体效果查看真机预览' } }]\n  },\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,KAAQ,GAAA,cAAA,CAAA;AACd,MAAM,IAAO,GAAA,YAAA,CAAA;AAEb,iBAAe;AAAA,EACb,IAAM,EAAA,YAAA;AAAA,EACN,KAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAO,GAAA;AACL,IAAO,OAAA;AAAA,MACL,IAAM,EAAA,IAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL,MAAQ,EAAA,EAAA;AAAA,OACV;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,KACb,CAAA;AAAA,GACF;AAAA,EACA,KAAQ,GAAA;AACN,IAAA,OAAO,CAAC,EAAE,IAAM,EAAA,QAAA,EAAU,OAAO,QAAU,EAAA,KAAA,EAAO,cAAM,EAAA,KAAA,EAAO,IAAI,MAAQ,EAAA,EAAE,IAAM,EAAA,8DAAA,IAAgB,CAAA,CAAA;AAAA,GACrG;AACF,CAAA;;;;"}

package/lib/page-diy/src/config/rule/min/common/index.d.ts

@@ -230,7 +230,7 @@ export const commonMenu: ({
     rule(): {
         type: string;
         props: {
-            height: string;
+            height: number;
         };
         showStyle: boolean;
     };
@@ -540,7 +540,7 @@ export const commonRuleList: {
         rule(): {
             type: string;
             props: {
-                height: string;
+                height: number;
             };
             showStyle: boolean;
         };

package/lib/page-diy/src/config/rule/min/index.d.ts

@@ -231,7 +231,7 @@ export const minRuleList: {
         rule(): {
             type: string;
             props: {
-                height: string;
+                height: number;
             };
             showStyle: boolean;
         };
@@ -544,7 +544,7 @@ export function createMinMenu(): {
         rule(): {
             type: string;
             props: {
-                height: string;
+                height: number;
             };
             showStyle: boolean;
         };