@epxing/designer 0.0.0-stage → 5.3.0-beta.1

package/dist/src/page-designer/setting-panel/Style.js

@@ -0,0 +1,1590 @@
+import CssEditor from "./css-editor/CssEditor.js";
+import Background from "../../visual/config/Background.js";
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createBlock, createCommentVNode, createElementVNode, toDisplayString, normalizeClass, Fragment, renderList, normalizeStyle, createTextVNode } from "vue";
+/* empty css          */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-setting-style",
+  components: {
+    CssEditor,
+    [Background.name]: Background
+  },
+  props: {
+    designer: {
+      type: Object
+    },
+    value: String,
+    inlineStyle: Boolean
+  },
+  data() {
+    return {
+      load: true,
+      defaultStyle: {},
+      // 默认状态样式
+      hoverStyle: {},
+      // 悬浮状态样式
+      mouseStatus: "default",
+      unfold: {
+        display: true
+      },
+      space: [
+        { label: "超大", value: "24px" },
+        { label: "大", value: "16px" },
+        { label: "中", value: "12px" },
+        { label: "小", value: "4px" },
+        { label: "无", value: "0px" },
+        { label: "默认", value: "default" },
+        { label: "自定义", value: "custom" }
+      ],
+      showCssEditor: false,
+      borderWidthType: "same",
+      borderRadiusType: "same"
+    };
+  },
+  computed: {
+    type() {
+      if (this.designer.selectedWidget) return "widget";
+      return "page";
+    },
+    style: {
+      get() {
+        if (this.mouseStatus === "hover") {
+          return this.hoverStyle;
+        } else {
+          return this.defaultStyle;
+        }
+      },
+      set(v) {
+        this.updateStyle(v);
+      }
+    },
+    clearSuffix() {
+      return (v = "") => {
+        const value = v === "auto" ? "auto" : typeof v === "string" ? v.replace(/(px|%)/, "") : v;
+        return value;
+      };
+    },
+    toNumber() {
+      return (v) => Number(v) || 0;
+    },
+    isSameMargin() {
+      const { "margin-top": marginTop, "margin-right": marginRight, "margin-bottom": marginBottom, "margin-left": marginLeft } = this.style;
+      return marginTop === marginRight && marginTop === marginBottom && marginTop === marginLeft;
+    },
+    isSamePadding() {
+      const { "padding-top": paddingTop, "padding-right": paddingRight, "padding-bottom": paddingBottom, "padding-left": paddingLeft } = this.style;
+      return paddingTop === paddingRight && paddingTop === paddingBottom && paddingTop === paddingLeft;
+    },
+    shadow() {
+      const { hShadow, vShadow, shadowBlur, shadowSpread, shadowColor } = this.style;
+      return `${hShadow} ${vShadow} ${shadowBlur} ${shadowSpread} ${shadowColor}`;
+    },
+    css() {
+      if (this.inlineStyle) {
+        return this.value || ":current {\r\n\r\n}";
+      }
+      const { css = ":current {\r\n\r\n}" } = this.designer.selectedWidget || this.designer.pageConfig;
+      return css;
+    },
+    unit() {
+      return (item) => {
+        const value = this.style[item];
+        if (value === "auto") {
+          return "";
+        } else if (value) {
+          return value.replace(/[-\d]+/, "");
+        } else {
+          return "px";
+        }
+      };
+    },
+    borderWidthPosition: {
+      get() {
+        const positionMap = {};
+        this.borderWidthPositionList.map((item) => {
+          let borderPositionWidth = this.style[`border-${item.value}-width`];
+          if (!borderPositionWidth) {
+            const border = this.style[`border-${item.value}`] || this.style.border;
+            if (border) {
+              borderPositionWidth = border.split(" ")[0];
+            }
+          }
+          positionMap[item.value] = borderPositionWidth || this.style["border-width"] || 0;
+        });
+        return positionMap;
+      }
+    },
+    borderRadiusPosition: {
+      get() {
+        const positionMap = {};
+        this.borderRadiusPositionList.map((item) => {
+          let borderRadiusPosition = this.style[`border-${item.value}-radius`];
+          if (!borderRadiusPosition) {
+            const borderRadius = this.style["border-radius"];
+            if (borderRadius) {
+              const borderRadiusArr = borderRadius.split(" ");
+              let index = 0;
+              if (borderRadiusArr.length === 2) {
+                index = item.index % 2;
+              } else if (borderRadiusArr.length === 4) {
+                index = item.index;
+              }
+              borderRadiusPosition = borderRadiusArr[index];
+            }
+          }
+          positionMap[item.value] = borderRadiusPosition || 0;
+        });
+        return positionMap;
+      }
+    }
+  },
+  watch: {
+    "designer.selectedWidget"(v) {
+      if (this.$refs.codeEditorPopover) this.$refs.codeEditorPopover.hide();
+      this.showCssEditor = false;
+      this.cssToStyle();
+      this.load = false;
+      this.$nextTick(() => {
+        this.load = true;
+      });
+    },
+    "css"(v) {
+    },
+    style: {
+      handler(v = {}) {
+        if (this.timer) {
+          clearTimeout(this.timer);
+        }
+        this.timer = setTimeout(() => {
+          this.updateCss();
+          clearTimeout(this.timer);
+        }, 200);
+      },
+      deep: true
+    },
+    "style.margin"(v) {
+      if (v && v !== "custom") {
+        ["-top", "-right", "-bottom", "-left"].forEach((item) => {
+          this.style["margin" + item] = v;
+        });
+      }
+    },
+    "style.padding"(v) {
+      if (v && v !== "custom") {
+        ["-top", "-right", "-bottom", "-left"].forEach((item) => {
+          this.style["padding" + item] = v;
+        });
+      }
+    },
+    "style.text"(v) {
+      const option = this.textOption.find((item) => item.value === v);
+      if (option && option.style) {
+        for (const key in option.style) {
+          this.style[key] = option.style[key];
+        }
+      }
+    },
+    isSameMargin(v) {
+      if (v) {
+        this.style.margin = this.style.marginTop || this.style.margin;
+      } else {
+        this.style.margin = "custom";
+      }
+    },
+    isSamePadding(v) {
+      if (v) {
+        this.style.padding = this.style.paddingTop || this.style.padding;
+      } else {
+        this.style.padding = "custom";
+      }
+    }
+  },
+  methods: {
+    updateStyle(v) {
+      if (this.mouseStatus === "hover") {
+        this.hoverStyle = v;
+      } else {
+        this.defaultStyle = v;
+      }
+    },
+    getOption() {
+      const textOption = [
+        {
+          label: this.$t("Translation of the title"),
+          value: "h1",
+          style: {
+            "font-size": "20px",
+            "font-weight": "700",
+            "line-height": "32px"
+          }
+        },
+        {
+          label: this.$t("SubTitle"),
+          value: "h2",
+          style: {
+            "font-size": "16px",
+            "font-weight": "700",
+            "line-height": "24px"
+          }
+        },
+        {
+          label: this.$t("main body"),
+          value: "default",
+          style: {
+            "font-size": "14px",
+            "line-height": "20px"
+          }
+        },
+        {
+          label: this.$t("auxiliary words"),
+          value: "second",
+          style: {
+            "font-size": "12px",
+            color: "#666",
+            "line-height": "16px"
+          }
+        },
+        {
+          label: this.$t("user-defined"),
+          value: "custom"
+        }
+      ];
+      this.textOption = textOption;
+      this.predefineColors = ["#ff4500", "#ff8c00", "#ffd700", "#90ee90"];
+      this.fontWeightOption = [
+        {
+          label: this.$t("overstriking"),
+          value: "700"
+        },
+        {
+          label: this.$t("thin"),
+          value: "400"
+        },
+        {
+          label: this.$t("default"),
+          value: "500"
+        }
+      ];
+      this.borderStyleOption = [
+        {
+          label: this.$t("full line"),
+          value: "solid"
+        },
+        {
+          label: this.$t("dotted line"),
+          value: "dashed"
+        },
+        {
+          label: this.$t("stipple line"),
+          value: "dotted"
+        },
+        {
+          label: this.$t("not"),
+          value: "none"
+        }
+      ];
+      this.borderWidthPositionList = [{
+        label: "上",
+        value: "top"
+      }, {
+        label: "右",
+        value: "right"
+      }, {
+        label: "下",
+        value: "bottom"
+      }, {
+        label: "左",
+        value: "left"
+      }];
+      this.borderRadiusPositionList = [{
+        label: "左上",
+        value: "top-left",
+        index: 0
+      }, {
+        label: "右上",
+        value: "top-right",
+        index: 1
+      }, {
+        label: "右下",
+        value: "bottom-right",
+        index: 2
+      }, {
+        label: "左下",
+        value: "bottom-left",
+        index: 3
+      }];
+      this.flexDirectionList = [{
+        icon: "epx-icon-fangxiang1",
+        value: "row",
+        tip: "水平"
+      }, {
+        icon: "epx-icon-fangxiang2",
+        value: "column",
+        tip: "垂直"
+      }, {
+        icon: "epx-icon-fangxiang1",
+        value: "row-reverse",
+        rotateY: "180deg",
+        tip: "水平逆序"
+      }, {
+        icon: "epx-icon-fangxiang2",
+        value: "column-reverse",
+        rotateX: "180deg",
+        tip: "垂直逆序"
+      }];
+      this.flexJustifyList = [{
+        icon: "epx-icon-left1",
+        value: "flex-start",
+        tip: "起点对齐"
+      }, {
+        icon: "epx-icon-justify-center",
+        value: "center",
+        tip: "居中"
+      }, {
+        icon: "epx-icon-right1",
+        value: "flex-end",
+        tip: "终点对齐"
+      }, {
+        icon: "epx-icon-fangxiang2",
+        value: "space-around",
+        tip: "均匀排列"
+      }, {
+        icon: "epx-icon-space-between",
+        value: "space-between",
+        tip: "两侧对齐"
+      }];
+      this.flexAlignList = [
+        {
+          icon: "epx-icon-top",
+          value: "flex-start",
+          tip: "起点对齐"
+        },
+        {
+          icon: "epx-icon-align-center",
+          value: "center",
+          tip: "居中"
+        },
+        {
+          icon: "epx-icon-end",
+          value: "flex-end",
+          tip: "终点对齐"
+        }
+      ];
+    },
+    changePx(key, v, unit = "px") {
+      if ((unit || v) === "auto") {
+        this.style[key] = unit;
+      } else {
+        const formatV = !Number.isNaN(parseFloat(v)) ? parseFloat(v) + unit : "";
+        if (formatV || v === "-") {
+          this.style[key] = formatV || v + unit;
+        } else {
+          delete this.style[key];
+        }
+      }
+    },
+    changeBorderWidthPosition(key, v) {
+      this.style[`border-${key}-width`] = v + "px";
+    },
+    changeBorderRadiusPosition(key, v) {
+      const borderRadiusPosition = {
+        ...this.borderRadiusPosition,
+        [key]: v + "px"
+      };
+      const same = Object.values(borderRadiusPosition).every((item) => item === v + "px");
+      if (same) {
+        this.style["border-radius"] = v + "px";
+      } else if (borderRadiusPosition["top-left"] === borderRadiusPosition["bottom-right"] && borderRadiusPosition["top-right"] === borderRadiusPosition["bottom-left"]) {
+        this.style["border-radius"] = `${borderRadiusPosition["top-left"]} ${borderRadiusPosition["top-right"]}`;
+      } else {
+        this.style["border-radius"] = `${borderRadiusPosition["top-left"]} ${borderRadiusPosition["top-right"]} ${borderRadiusPosition["bottom-right"]} ${borderRadiusPosition["bottom-left"]}`;
+      }
+      for (const key2 in borderRadiusPosition) {
+        delete this.style[`border-${key2}-radius`];
+      }
+    },
+    updateCss() {
+      if (!this.initStyle) return;
+      const {
+        margin,
+        "margin-top": marginTop,
+        "margin-right": marginRight,
+        "margin-bottom": marginBottom,
+        "margin-left": marginLeft,
+        padding,
+        "padding-top": paddingTop,
+        "padding-right": paddingRight,
+        "padding-bottom": paddingBottom,
+        "padding-left": paddingLeft,
+        hShadow = 0,
+        vShadow = 0,
+        shadowBlur = 0,
+        shadowSpread = 0,
+        shadowColor,
+        text,
+        ...otherStyle
+      } = this.style;
+      const style = {
+        ...otherStyle
+      };
+      if (hShadow || vShadow || shadowBlur) {
+        style.boxShadow = `${hShadow} ${vShadow} ${shadowBlur} ${shadowSpread} ${shadowColor}`;
+      }
+      if (margin !== "default") {
+        if (!this.isSameMargin) {
+          if (![marginTop, marginRight, marginBottom, marginLeft].includes("default") && ![marginTop, marginRight, marginBottom, marginLeft].includes(void 0)) {
+            style.margin = `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`;
+          } else {
+            if (marginTop && marginTop !== "default") style.marginTop = marginTop;
+            if (marginRight && marginRight !== "default") style.marginRight = marginRight;
+            if (marginBottom && marginBottom !== "default") style.marginBottom = marginBottom;
+            if (marginLeft && marginLeft !== "default") style.marginLeft = marginLeft;
+          }
+        } else if (margin) {
+          style.margin = margin;
+        }
+      }
+      if (padding) {
+        if (!this.isSamePadding) {
+          if (![paddingTop, paddingRight, paddingBottom, paddingLeft].includes("default") && ![paddingTop, paddingRight, paddingBottom, paddingLeft].includes(void 0)) {
+            style.padding = `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`;
+          } else {
+            if (paddingTop && paddingTop !== "default") style.paddingTop = paddingTop;
+            if (paddingRight && paddingRight !== "default") style.paddingRight = paddingRight;
+            if (paddingBottom && paddingBottom !== "default") style.paddingBottom = paddingBottom;
+            if (paddingLeft && paddingLeft !== "default") style.paddingLeft = paddingLeft;
+          }
+        } else {
+          style.padding = padding;
+        }
+      }
+      for (const key in style) {
+        if (!style[key]) delete style[key];
+      }
+      if (this.$_.isEqual(style, this.oldStyle)) return;
+      this.oldStyle = { ...style };
+      const css = this.styleToCss(style);
+      if (this.inlineStyle) {
+        this.$emit("input", css);
+      } else if (this.type === "page") {
+        this.designer.updatePageConfig({ css });
+      } else {
+        this.designer.updateWidget(this.designer.selectedWidget.id, { css });
+      }
+    },
+    cssToStyle() {
+      let style = {};
+      let hoverStyle = {};
+      const css = this.css || "";
+      if (css) {
+        const cssObject = this.cssToObject(css);
+        style = cssObject[":current"];
+        if (cssObject[":current:hover"]) hoverStyle = cssObject[":current:hover"];
+      }
+      const formatStyle = (style2) => {
+        const { margin, padding, "box-shadow": boxShadow, ...otherStyle } = style2;
+        const componentStyle = {};
+        for (const key in style2) {
+          const value = style2[key];
+          if (key === "box-shadow") {
+            if (value) {
+              const shadowColor = value.split("rgb")[1];
+              const shadowArr = value.split(/\s+/);
+              componentStyle.hShadow = shadowArr[0] || 0;
+              componentStyle.vShadow = shadowArr[1] || 0;
+              componentStyle.shadowBlur = shadowArr[2] || 0;
+              componentStyle.shadowSpread = shadowArr[3] || 0;
+              componentStyle.shadowColor = shadowColor ? "rgb" + shadowColor : "";
+            }
+          } else if (key === "margin") {
+            if (value) {
+              const arr = value.split(" ");
+              if (arr.length === 2) {
+                componentStyle.margin = "custom";
+                componentStyle["margin-top"] = arr[0];
+                componentStyle["margin-right"] = arr[1];
+                componentStyle["margin-bottom"] = arr[0];
+                componentStyle["margin-left"] = arr[1];
+              } else if (arr.length === 3) {
+                componentStyle.margin = "custom";
+                componentStyle["margin-top"] = arr[0];
+                componentStyle["margin-right"] = arr[1];
+                componentStyle["margin-bottom"] = arr[2];
+                componentStyle["margin-left"] = arr[1];
+              } else if (arr.length === 4) {
+                componentStyle.margin = "custom";
+                componentStyle["margin-top"] = arr[0];
+                componentStyle["margin-right"] = arr[1];
+                componentStyle["margin-bottom"] = arr[2];
+                componentStyle["margin-left"] = arr[3];
+              } else {
+                componentStyle.margin = margin;
+              }
+            }
+          } else if (key === "padding") {
+            if (value) {
+              const arr = value.split(" ");
+              if (arr.length === 2) {
+                componentStyle.padding = "custom";
+                componentStyle["padding-top"] = arr[0];
+                componentStyle["padding-right"] = arr[1];
+                componentStyle["padding-bottom"] = arr[0];
+                componentStyle["padding-left"] = arr[1];
+              } else if (arr.length === 3) {
+                componentStyle.padding = "custom";
+                componentStyle["padding-top"] = arr[0];
+                componentStyle["padding-right"] = arr[1];
+                componentStyle["padding-bottom"] = arr[2];
+                componentStyle["padding-left"] = arr[1];
+              } else if (arr.length === 4) {
+                componentStyle.padding = "custom";
+                componentStyle["padding-top"] = arr[0];
+                componentStyle["padding-right"] = arr[1];
+                componentStyle["padding-bottom"] = arr[2];
+                componentStyle["padding-left"] = arr[3];
+              } else {
+                componentStyle.padding = padding;
+              }
+            }
+          }
+        }
+        return { ...componentStyle, ...otherStyle };
+      };
+      this.defaultStyle = formatStyle(style);
+      this.hoverStyle = formatStyle(hoverStyle);
+      this.$nextTick(() => {
+        this.borderWidthType = Object.values(this.borderWidthPosition).every((item) => item === this.borderWidthPosition.top) ? "same" : "diff";
+        this.borderRadiusType = Object.values(this.borderRadiusPosition).every((item) => item === this.borderRadiusPosition["top-left"]) ? "same" : "diff";
+        this.initStyle = true;
+      });
+    },
+    cssToObject(css) {
+      const cssObject = {};
+      const regExp = /[\w-_.:#\s]+{[\w\s-.:;,()#%/]+}/g;
+      const classList = css.match(regExp);
+      classList.forEach((item) => {
+        const className = item.split("{")[0].trim();
+        const classContent = item.split("{")[1].split("}")[0];
+        var style = {};
+        const rules = classContent.split(";");
+        rules.forEach((rule) => {
+          try {
+            var pair = rule.split(":");
+            var property = pair[0].trim();
+            var value = pair[1].trim();
+            if (property && value) {
+              style[property] = value;
+            }
+          } catch (error) {
+          }
+        });
+        cssObject[className] = style;
+      });
+      return cssObject;
+    },
+    styleToCss(style) {
+      let str = (this.mouseStatus === "hover" ? ":current:hover" : ":current") + " {";
+      for (const key in style) {
+        const kebabCase = key.replace(/([A-Z])/g, ($1) => {
+          return "-" + $1.toLocaleLowerCase();
+        });
+        str += `\r
+  ${kebabCase}: ${style[key]};`;
+      }
+      str += "\r\n}";
+      const regExp = this.mouseStatus === "hover" ? /[\s]*:current:hover\s*{[\w\s-:;.,()%#!/]+}/ : /[\s]*:current\s*{[\w\s-:;.,()#%!/]+}/;
+      const css = this.css || "";
+      if (css.match(regExp)) {
+        return css.replace(regExp, this.mouseStatus === "hover" ? "\r\n" + str : str);
+      } else {
+        return css + "\r\n" + str;
+      }
+    },
+    changeCss(v) {
+      if (this.inlineStyle) {
+        this.$emit("input", v);
+      } else if (this.type === "page") {
+        this.designer.updatePageConfig({ css: v });
+      } else {
+        this.designer.updateWidget(this.designer.selectedWidget.id, { css: v });
+      }
+      this.cssToStyle();
+    }
+  },
+  created() {
+    this.getOption();
+    this.cssToStyle();
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "epx-page-designer-setting-style"
+};
+const _hoisted_2 = { class: "epx-page-designer-setting-style__item--alone" };
+const _hoisted_3 = { class: "epx-page-designer-setting-style__item--alone" };
+const _hoisted_4 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_5 = { class: "epx-page-designer-setting-style__item--alone" };
+const _hoisted_6 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_7 = { class: "epx-page-designer-setting-style__header" };
+const _hoisted_8 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "epx-page-designer-setting-style__content"
+};
+const _hoisted_10 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_11 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_12 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_13 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_14 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_15 = { class: "epx-page-designer-setting-style__header" };
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_18 = { class: "epx-page-designer-setting-style__content" };
+const _hoisted_19 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_20 = { class: "epx-page-designer-setting-style__header" };
+const _hoisted_21 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_22 = { class: "epx-page-designer-setting-style__content" };
+const _hoisted_23 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_24 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_25 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_26 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_27 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_28 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_29 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_30 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_31 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_32 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_33 = { class: "epx-page-designer-setting-style__header" };
+const _hoisted_34 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_35 = { class: "epx-page-designer-setting-style__content" };
+const _hoisted_36 = { class: "epx-page-designer-setting-style__header" };
+const _hoisted_37 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_38 = { class: "epx-page-designer-setting-style__content" };
+const _hoisted_39 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_40 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_41 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_42 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_43 = {
+  key: 0,
+  class: "epx-page-designer-setting-style__border-position"
+};
+const _hoisted_44 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_45 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_46 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_47 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_48 = {
+  key: 0,
+  class: "epx-page-designer-setting-style__border-position"
+};
+const _hoisted_49 = { class: "epx-page-designer-setting-style__header" };
+const _hoisted_50 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_51 = { class: "epx-page-designer-setting-style__content" };
+const _hoisted_52 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_53 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_54 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_55 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_56 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_57 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_58 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_59 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_60 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_61 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_css_editor = resolveComponent("css-editor");
+  const _component_el_popover = resolveComponent("el-popover");
+  const _component_el_option = resolveComponent("el-option");
+  const _component_el_select = resolveComponent("el-select");
+  const _component_el_input = resolveComponent("el-input");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
+  const _component_el_radio_button = resolveComponent("el-radio-button");
+  const _component_el_radio_group = resolveComponent("el-radio-group");
+  const _component_el_input_number = resolveComponent("el-input-number");
+  const _component_el_color_picker = resolveComponent("el-color-picker");
+  const _component_epx_visual_config_background = resolveComponent("epx-visual-config-background");
+  return $data.load ? (openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_el_popover, {
+      ref: "cssEditorPopover",
+      placement: "bottom",
+      width: "400",
+      trigger: "click",
+      onBeforeEnter: _cache[0] || (_cache[0] = ($event) => $data.showCssEditor = true),
+      onAfterLeave: _cache[1] || (_cache[1] = ($event) => $data.showCssEditor = false)
+    }, {
+      reference: withCtx(() => [..._cache[34] || (_cache[34] = [
+        createElementVNode("div", { class: "epx-page-designer-setting-style__custom-btn" }, [
+          createElementVNode("i", { class: "epx-icon-yangshi" }),
+          createElementVNode("span", null, "自定义样式")
+        ], -1)
+      ])]),
+      default: withCtx(() => [
+        $data.showCssEditor ? (openBlock(), createBlock(_component_css_editor, {
+          key: 0,
+          value: $options.css,
+          onChange: $options.changeCss
+        }, null, 8, ["value", "onChange"])) : createCommentVNode("", true)
+      ]),
+      _: 1
+    }, 512),
+    createElementVNode("div", _hoisted_2, [
+      _cache[35] || (_cache[35] = createElementVNode("label", {
+        class: "epx-page-designer-setting-style__label",
+        for: ""
+      }, "状态", -1)),
+      createVNode(_component_el_select, {
+        modelValue: $data.mouseStatus,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.mouseStatus = $event),
+        size: "small"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_el_option, {
+            label: "默认状态",
+            value: "default"
+          }),
+          createVNode(_component_el_option, {
+            label: "悬浮状态",
+            value: "hover"
+          })
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ]),
+    createElementVNode("div", _hoisted_3, [
+      createElementVNode("label", _hoisted_4, toDisplayString(_ctx.$t("width")), 1),
+      createVNode(_component_el_input, {
+        class: "epx-page-designer-setting-style__number-with-unit",
+        size: "small",
+        "model-value": $options.clearSuffix($options.style["width"]),
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = (v) => $options.changePx("width", v, $options.unit("width")))
+      }, {
+        append: withCtx(() => [
+          createVNode(_component_el_select, {
+            class: "epx-page-designer-setting-style__unit",
+            "model-value": $options.unit("width"),
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = (v) => $options.changePx("width", $options.style["width"], v)),
+            size: "small",
+            placeholder: "-"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_option, {
+                label: "px",
+                value: "px"
+              }),
+              createVNode(_component_el_option, {
+                label: "%",
+                value: "%"
+              }),
+              createVNode(_component_el_option, {
+                label: "auto",
+                value: "auto"
+              })
+            ]),
+            _: 1
+          }, 8, ["model-value"])
+        ]),
+        _: 1
+      }, 8, ["model-value"])
+    ]),
+    createElementVNode("div", _hoisted_5, [
+      createElementVNode("label", _hoisted_6, toDisplayString(_ctx.$t("height")), 1),
+      createVNode(_component_el_input, {
+        class: "epx-page-designer-setting-style__number-with-unit",
+        size: "small",
+        "model-value": $options.clearSuffix($options.style["height"]),
+        "onUpdate:modelValue": _cache[6] || (_cache[6] = (v) => $options.changePx("height", v, $options.unit("height")))
+      }, {
+        append: withCtx(() => [
+          createVNode(_component_el_select, {
+            class: "epx-page-designer-setting-style__unit",
+            "model-value": $options.unit("height"),
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = (v) => $options.changePx("height", $options.style["height"], v)),
+            size: "small",
+            placeholder: "-"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_option, {
+                label: "px",
+                value: "px"
+              }),
+              createVNode(_component_el_option, {
+                label: "%",
+                value: "%"
+              }),
+              createVNode(_component_el_option, {
+                label: "auto",
+                value: "auto"
+              })
+            ]),
+            _: 1
+          }, 8, ["model-value"])
+        ]),
+        _: 1
+      }, 8, ["model-value"])
+    ]),
+    createElementVNode("div", {
+      class: normalizeClass({ "epx-page-designer-setting-style__item": true, "epx-page-designer-setting-style__item--unfold": $data.unfold.display })
+    }, [
+      createElementVNode("div", _hoisted_7, [
+        createElementVNode("span", null, [
+          createElementVNode("i", {
+            class: "epx-page-designer-setting-style__fold-icon el-icon-caret-right",
+            onClick: _cache[7] || (_cache[7] = ($event) => $data.unfold["display"] = !$data.unfold.display)
+          }),
+          createElementVNode("label", _hoisted_8, toDisplayString(_ctx.$t("layout")), 1)
+        ]),
+        createVNode(_component_el_radio_group, {
+          class: "epx-page-designer-setting-style__radio-button-group",
+          modelValue: $options.style["display"],
+          "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => $options.style["display"] = $event),
+          size: "default"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_el_radio_button, {
+              label: "block",
+              value: "block"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_tooltip, {
+                  effect: "dark",
+                  content: "块级元素,独占一行"
+                }, {
+                  default: withCtx(() => [..._cache[36] || (_cache[36] = [
+                    createElementVNode("i", { class: "epx-icon-bolck" }, null, -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_radio_button, {
+              label: "inline-block",
+              value: "inline-block"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_tooltip, {
+                  effect: "dark",
+                  content: "行内块元素,不独占一行"
+                }, {
+                  default: withCtx(() => [..._cache[37] || (_cache[37] = [
+                    createElementVNode("i", { class: "epx-icon-inline-bolck" }, null, -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_radio_button, {
+              label: "inline",
+              value: "inline"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_tooltip, {
+                  effect: "dark",
+                  content: "内联元素,不独占一行,宽度为内容宽度不可设置"
+                }, {
+                  default: withCtx(() => [..._cache[38] || (_cache[38] = [
+                    createElementVNode("i", { class: "epx-icon-inline" }, null, -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_radio_button, {
+              label: "flex",
+              value: "flex"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_tooltip, {
+                  effect: "dark",
+                  content: "弹性盒子,可设置子元素内部排列方式"
+                }, {
+                  default: withCtx(() => [..._cache[39] || (_cache[39] = [
+                    createElementVNode("i", { class: "epx-icon-flex" }, null, -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]),
+      $options.style["display"] === "flex" ? (openBlock(), createElementBlock("div", _hoisted_9, [
+        createElementVNode("div", _hoisted_10, [
+          _cache[40] || (_cache[40] = createElementVNode("label", {
+            class: "epx-page-designer-setting-style__label",
+            for: ""
+          }, "方向", -1)),
+          createVNode(_component_el_radio_group, {
+            class: "epx-page-designer-setting-style__radio-button-group",
+            modelValue: $options.style["flex-direction"],
+            "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => $options.style["flex-direction"] = $event),
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(this.flexDirectionList, (item) => {
+                return openBlock(), createBlock(_component_el_radio_button, {
+                  label: item.value,
+                  value: item.value,
+                  key: item.value
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_tooltip, {
+                      effect: "dark",
+                      content: item.tip,
+                      placement: "top"
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("i", {
+                          class: normalizeClass(item.icon),
+                          style: normalizeStyle({ transform: `rotateY(${item.rotateY || 0}) rotateX(${item.rotateX || 0})` })
+                        }, null, 6)
+                      ]),
+                      _: 2
+                    }, 1032, ["content"])
+                  ]),
+                  _: 2
+                }, 1032, ["label", "value"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]),
+        createElementVNode("div", _hoisted_11, [
+          createElementVNode("label", _hoisted_12, toDisplayString(["column", "column-reverse"].includes($options.style["flex-direction"]) ? "垂直" : "水平"), 1),
+          createVNode(_component_el_radio_group, {
+            class: "epx-page-designer-setting-style__radio-button-group",
+            modelValue: $options.style["justify-content"],
+            "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => $options.style["justify-content"] = $event),
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(this.flexJustifyList, (item) => {
+                return openBlock(), createBlock(_component_el_radio_button, {
+                  label: item.value,
+                  value: item.value,
+                  key: item.value
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_tooltip, {
+                      effect: "dark",
+                      content: item.tip,
+                      placement: "top"
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("i", {
+                          class: normalizeClass(item.icon)
+                        }, null, 2)
+                      ]),
+                      _: 2
+                    }, 1032, ["content"])
+                  ]),
+                  _: 2
+                }, 1032, ["label", "value"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]),
+        createElementVNode("div", _hoisted_13, [
+          createElementVNode("label", _hoisted_14, toDisplayString(["column", "column-reverse"].includes($options.style["flex-direction"]) ? "水平" : "垂直"), 1),
+          createVNode(_component_el_radio_group, {
+            class: "epx-page-designer-setting-style__radio-button-group",
+            modelValue: $options.style["align-items"],
+            "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => $options.style["align-items"] = $event),
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(this.flexAlignList, (item) => {
+                return openBlock(), createBlock(_component_el_radio_button, {
+                  label: item.value,
+                  value: item.value,
+                  key: item.value
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_tooltip, {
+                      effect: "dark",
+                      content: item.tip,
+                      placement: "top"
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("i", {
+                          class: normalizeClass(item.icon)
+                        }, null, 2)
+                      ]),
+                      _: 2
+                    }, 1032, ["content"])
+                  ]),
+                  _: 2
+                }, 1032, ["label", "value"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ])
+      ])) : createCommentVNode("", true)
+    ], 2),
+    (openBlock(true), createElementBlock(Fragment, null, renderList([{ label: _ctx.$t("margin"), value: "margin" }, { label: _ctx.$t("padding"), value: "padding" }], (item) => {
+      return openBlock(), createElementBlock("div", {
+        key: item.value,
+        class: normalizeClass({ "epx-page-designer-setting-style__item": true, "epx-page-designer-setting-style__item--unfold": $data.unfold[item.value] })
+      }, [
+        createElementVNode("div", _hoisted_15, [
+          createElementVNode("span", null, [
+            createElementVNode("i", {
+              class: "epx-page-designer-setting-style__fold-icon el-icon-caret-right",
+              onClick: ($event) => $data.unfold[item.value] = !$data.unfold[item.value]
+            }, null, 8, _hoisted_16),
+            createElementVNode("label", _hoisted_17, toDisplayString(item.label), 1)
+          ]),
+          createVNode(_component_el_select, {
+            class: "selection",
+            size: "small",
+            modelValue: $options.style[item.value],
+            "onUpdate:modelValue": ($event) => $options.style[item.value] = $event,
+            placeholder: _ctx.$t("default")
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList($data.space, (item2) => {
+                return openBlock(), createBlock(_component_el_option, {
+                  key: item2.value,
+                  label: item2.label,
+                  value: item2.value
+                }, null, 8, ["label", "value"]);
+              }), 128)),
+              createVNode(_component_el_input, {
+                class: "epx-page-designer-setting-style__number-with-unit",
+                size: "small",
+                "model-value": $options.clearSuffix($options.style[item.value]),
+                "onUpdate:modelValue": (v) => $options.changePx(item.value, v, $options.unit(item.value))
+              }, {
+                append: withCtx(() => [
+                  createVNode(_component_el_select, {
+                    class: "epx-page-designer-setting-style__unit",
+                    "model-value": $options.unit(item.value),
+                    "onUpdate:modelValue": (v) => $options.changePx(item.value, $options.style[item.value], v),
+                    size: "small",
+                    placeholder: "-"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_el_option, {
+                        label: "px",
+                        value: "px"
+                      }),
+                      createVNode(_component_el_option, {
+                        label: "%",
+                        value: "%"
+                      }),
+                      createVNode(_component_el_option, {
+                        label: "auto",
+                        value: "auto"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["model-value", "onUpdate:modelValue"])
+                ]),
+                _: 2
+              }, 1032, ["model-value", "onUpdate:modelValue"])
+            ]),
+            _: 2
+          }, 1032, ["modelValue", "onUpdate:modelValue", "placeholder"])
+        ]),
+        createElementVNode("div", _hoisted_18, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList([{ label: _ctx.$t("top margin"), value: "-top" }, { label: _ctx.$t("right margin"), value: "-right" }, { label: _ctx.$t("bottom margin"), value: "-bottom" }, { label: _ctx.$t("left margin"), value: "-left" }], (subItem) => {
+            return openBlock(), createElementBlock("div", {
+              class: "epx-page-designer-setting-style__subitem",
+              key: subItem.value
+            }, [
+              createElementVNode("label", _hoisted_19, toDisplayString(subItem.label), 1),
+              createVNode(_component_el_select, {
+                class: "selection",
+                size: "small",
+                modelValue: $options.style[item.value + subItem.value],
+                "onUpdate:modelValue": ($event) => $options.style[item.value + subItem.value] = $event,
+                placeholder: _ctx.$t("default")
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList($data.space, (item2) => {
+                    return openBlock(), createBlock(_component_el_option, {
+                      key: item2.value,
+                      label: item2.label,
+                      value: item2.value
+                    }, null, 8, ["label", "value"]);
+                  }), 128)),
+                  createVNode(_component_el_input, {
+                    class: "epx-page-designer-setting-style__number-with-unit",
+                    size: "small",
+                    "model-value": $options.clearSuffix($options.style[item.value + subItem.value]),
+                    "onUpdate:modelValue": (v) => $options.changePx(item.value + subItem.value, v, $options.unit(item.value + subItem.value))
+                  }, {
+                    append: withCtx(() => [
+                      createVNode(_component_el_select, {
+                        class: "epx-page-designer-setting-style__unit",
+                        "model-value": $options.unit(item.value + subItem.value),
+                        "onUpdate:modelValue": (v) => $options.changePx(item.value + subItem.value, $options.style[item.value + subItem.value], v),
+                        size: "small",
+                        placeholder: "-"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_el_option, {
+                            label: "px",
+                            value: "px"
+                          }),
+                          createVNode(_component_el_option, {
+                            label: "%",
+                            value: "%"
+                          }),
+                          createVNode(_component_el_option, {
+                            label: "auto",
+                            value: "auto"
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["model-value", "onUpdate:modelValue"])
+                    ]),
+                    _: 2
+                  }, 1032, ["model-value", "onUpdate:modelValue"])
+                ]),
+                _: 2
+              }, 1032, ["modelValue", "onUpdate:modelValue", "placeholder"])
+            ]);
+          }), 128))
+        ])
+      ], 2);
+    }), 128)),
+    createElementVNode("div", {
+      class: normalizeClass({ "epx-page-designer-setting-style__item": true, "epx-page-designer-setting-style__item--unfold": $data.unfold.text })
+    }, [
+      createElementVNode("div", _hoisted_20, [
+        createElementVNode("span", null, [
+          createElementVNode("i", {
+            class: "epx-page-designer-setting-style__fold-icon el-icon-caret-right",
+            onClick: _cache[12] || (_cache[12] = ($event) => $data.unfold["text"] = !$data.unfold.text)
+          }),
+          createElementVNode("label", _hoisted_21, toDisplayString(_ctx.$t("word")), 1)
+        ]),
+        createVNode(_component_el_select, {
+          class: "selection",
+          size: "small",
+          modelValue: $options.style.text,
+          "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => $options.style.text = $event),
+          placeholder: _ctx.$t("default")
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.textOption, (item) => {
+              return openBlock(), createBlock(_component_el_option, {
+                key: item.value,
+                label: item.label,
+                value: item.value
+              }, null, 8, ["label", "value"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue", "placeholder"])
+      ]),
+      createElementVNode("div", _hoisted_22, [
+        createElementVNode("div", _hoisted_23, [
+          createElementVNode("label", _hoisted_24, toDisplayString(_ctx.$t("word size")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.toNumber($options.clearSuffix($options.style["font-size"])),
+            "controls-position": "right",
+            onChange: _cache[14] || (_cache[14] = (v) => $options.style["font-size"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_25, [
+          createElementVNode("label", _hoisted_26, toDisplayString(_ctx.$t("row height")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.toNumber($options.clearSuffix($options.style["line-height"])),
+            "controls-position": "right",
+            onChange: _cache[15] || (_cache[15] = (v) => $options.style["line-height"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_27, [
+          createElementVNode("label", _hoisted_28, toDisplayString(_ctx.$t("text direction")), 1),
+          createVNode(_component_el_radio_group, {
+            modelValue: $options.style["text-align"],
+            "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => $options.style["text-align"] = $event),
+            size: "default"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_radio_button, {
+                label: "left",
+                value: "left"
+              }, {
+                default: withCtx(() => [..._cache[41] || (_cache[41] = [
+                  createElementVNode("i", { class: "epx-icon-left" }, null, -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio_button, {
+                label: "center",
+                value: "center"
+              }, {
+                default: withCtx(() => [..._cache[42] || (_cache[42] = [
+                  createElementVNode("i", { class: "epx-icon-center" }, null, -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio_button, {
+                label: "right",
+                value: "right"
+              }, {
+                default: withCtx(() => [..._cache[43] || (_cache[43] = [
+                  createElementVNode("i", { class: "epx-icon-right" }, null, -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]),
+        createElementVNode("div", _hoisted_29, [
+          createElementVNode("label", _hoisted_30, toDisplayString(_ctx.$t("word again")), 1),
+          createVNode(_component_el_select, {
+            class: "selection",
+            size: "small",
+            modelValue: $options.style["font-weight"],
+            "onUpdate:modelValue": _cache[17] || (_cache[17] = ($event) => $options.style["font-weight"] = $event),
+            placeholder: _ctx.$t("default")
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fontWeightOption, (item) => {
+                return openBlock(), createBlock(_component_el_option, {
+                  key: item.value,
+                  label: item.label,
+                  value: item.value
+                }, null, 8, ["label", "value"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue", "placeholder"])
+        ]),
+        createElementVNode("div", _hoisted_31, [
+          createElementVNode("label", _hoisted_32, toDisplayString(_ctx.$t("font color")), 1),
+          createVNode(_component_el_color_picker, {
+            modelValue: $options.style.color,
+            "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => $options.style.color = $event),
+            "show-alpha": "",
+            predefine: _ctx.predefineColors
+          }, null, 8, ["modelValue", "predefine"])
+        ])
+      ])
+    ], 2),
+    createElementVNode("div", {
+      class: normalizeClass({ "epx-page-designer-setting-style__item": true, "epx-page-designer-setting-style__item--unfold": $data.unfold.background })
+    }, [
+      createElementVNode("div", _hoisted_33, [
+        createElementVNode("span", null, [
+          createElementVNode("i", {
+            class: "epx-page-designer-setting-style__fold-icon el-icon-caret-right",
+            onClick: _cache[19] || (_cache[19] = ($event) => $data.unfold["background"] = !$data.unfold.background)
+          }),
+          createElementVNode("label", _hoisted_34, toDisplayString(_ctx.$t("background")), 1)
+        ])
+      ]),
+      createElementVNode("div", _hoisted_35, [
+        createVNode(_component_epx_visual_config_background, {
+          modelValue: $options.style,
+          "onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => $options.style = $event),
+          onInput: $options.updateStyle,
+          definingNameType: "kebab-case"
+        }, null, 8, ["modelValue", "onInput"])
+      ])
+    ], 2),
+    createElementVNode("div", {
+      class: normalizeClass({ "epx-page-designer-setting-style__item": true, "epx-page-designer-setting-style__item--unfold": $data.unfold.border })
+    }, [
+      createElementVNode("div", _hoisted_36, [
+        createElementVNode("span", null, [
+          createElementVNode("i", {
+            class: "epx-page-designer-setting-style__fold-icon el-icon-caret-right",
+            onClick: _cache[21] || (_cache[21] = ($event) => $data.unfold["border"] = !$data.unfold.border)
+          }),
+          createElementVNode("label", _hoisted_37, toDisplayString(_ctx.$t("border")), 1)
+        ])
+      ]),
+      createElementVNode("div", _hoisted_38, [
+        createElementVNode("div", _hoisted_39, [
+          createElementVNode("label", _hoisted_40, toDisplayString(_ctx.$t("linear")), 1),
+          createVNode(_component_el_select, {
+            class: "selection",
+            size: "small",
+            modelValue: $options.style["border-style"],
+            "onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => $options.style["border-style"] = $event),
+            placeholder: _ctx.$t("not")
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.borderStyleOption, (item) => {
+                return openBlock(), createBlock(_component_el_option, {
+                  key: item.value,
+                  label: item.label,
+                  value: item.value
+                }, null, 8, ["label", "value"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue", "placeholder"])
+        ]),
+        createElementVNode("div", _hoisted_41, [
+          createElementVNode("label", _hoisted_42, toDisplayString(_ctx.$t("width")), 1),
+          createVNode(_component_el_input, {
+            class: "epx-page-designer-setting-style__input-number--small",
+            size: "small",
+            "model-value": $options.clearSuffix($options.style["border-width"]),
+            "onUpdate:modelValue": _cache[23] || (_cache[23] = (v) => $options.changePx("border-width", v, "px"))
+          }, null, 8, ["model-value"]),
+          createVNode(_component_el_radio_group, {
+            class: "epx-page-designer-setting-style__border-width-radio",
+            modelValue: $data.borderWidthType,
+            "onUpdate:modelValue": _cache[24] || (_cache[24] = ($event) => $data.borderWidthType = $event),
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_radio_button, {
+                label: "same",
+                value: "same"
+              }, {
+                default: withCtx(() => [..._cache[44] || (_cache[44] = [
+                  createElementVNode("i", { class: "epx-icon-border" }, null, -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio_button, {
+                label: "diff",
+                value: "diff"
+              }, {
+                default: withCtx(() => [..._cache[45] || (_cache[45] = [
+                  createElementVNode("i", { class: "epx-icon-xuxian" }, null, -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"]),
+          $data.borderWidthType === "diff" ? (openBlock(), createElementBlock("div", _hoisted_43, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.borderWidthPositionList, (item) => {
+              return openBlock(), createElementBlock("div", {
+                class: "epx-page-designer-setting-style__border-position-item",
+                key: item.value
+              }, [
+                createVNode(_component_el_input_number, {
+                  "model-value": $options.clearSuffix($options.borderWidthPosition[item.value]),
+                  controls: false,
+                  min: 0,
+                  size: "small",
+                  onChange: (v) => $options.changeBorderWidthPosition(item.value, v)
+                }, null, 8, ["model-value", "onChange"]),
+                createTextVNode(" " + toDisplayString(item.label), 1)
+              ]);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_44, [
+          createElementVNode("label", _hoisted_45, toDisplayString(_ctx.$t("color")), 1),
+          createVNode(_component_el_color_picker, {
+            modelValue: $options.style["border-color"],
+            "onUpdate:modelValue": _cache[25] || (_cache[25] = ($event) => $options.style["border-color"] = $event),
+            "show-alpha": "",
+            predefine: _ctx.predefineColors
+          }, null, 8, ["modelValue", "predefine"])
+        ]),
+        createElementVNode("div", _hoisted_46, [
+          createElementVNode("label", _hoisted_47, toDisplayString(_ctx.$t("filleted corner")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($options.style["border-radius"]),
+            "controls-position": "right",
+            onChange: _cache[26] || (_cache[26] = (v) => $options.style["border-radius"] = v + "px")
+          }, null, 8, ["model-value"]),
+          createVNode(_component_el_radio_group, {
+            class: "epx-page-designer-setting-style__border-width-radio",
+            modelValue: $data.borderRadiusType,
+            "onUpdate:modelValue": _cache[27] || (_cache[27] = ($event) => $data.borderRadiusType = $event),
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_radio_button, {
+                label: "same",
+                value: "same"
+              }, {
+                default: withCtx(() => [..._cache[46] || (_cache[46] = [
+                  createElementVNode("i", { class: "epx-icon-border" }, null, -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio_button, {
+                label: "diff",
+                value: "diff"
+              }, {
+                default: withCtx(() => [..._cache[47] || (_cache[47] = [
+                  createElementVNode("i", { class: "epx-icon-xuxian" }, null, -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"]),
+          $data.borderRadiusType === "diff" ? (openBlock(), createElementBlock("div", _hoisted_48, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.borderRadiusPositionList, (item) => {
+              return openBlock(), createElementBlock("div", {
+                class: "epx-page-designer-setting-style__border-position-item",
+                key: item.value
+              }, [
+                createVNode(_component_el_input_number, {
+                  "model-value": $options.clearSuffix($options.borderRadiusPosition[item.value]),
+                  controls: false,
+                  min: 0,
+                  size: "small",
+                  onChange: (v) => $options.changeBorderRadiusPosition(item.value, v)
+                }, null, 8, ["model-value", "onChange"]),
+                createTextVNode(" " + toDisplayString(item.label), 1)
+              ]);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ])
+      ])
+    ], 2),
+    createElementVNode("div", {
+      class: normalizeClass({ "epx-page-designer-setting-style__item": true, "epx-page-designer-setting-style__item--unfold": $data.unfold.shadow })
+    }, [
+      createElementVNode("div", _hoisted_49, [
+        createElementVNode("span", null, [
+          createElementVNode("i", {
+            class: "epx-page-designer-setting-style__fold-icon el-icon-caret-right",
+            onClick: _cache[28] || (_cache[28] = ($event) => $data.unfold["shadow"] = !$data.unfold.shadow)
+          }),
+          createElementVNode("label", _hoisted_50, toDisplayString(_ctx.$t("shadow")), 1)
+        ])
+      ]),
+      createElementVNode("div", _hoisted_51, [
+        createElementVNode("div", _hoisted_52, [
+          createElementVNode("label", _hoisted_53, toDisplayString(_ctx.$t("level of the shadow")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($options.style.hShadow),
+            "controls-position": "right",
+            onChange: _cache[29] || (_cache[29] = (v) => $options.style["hShadow"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_54, [
+          createElementVNode("label", _hoisted_55, toDisplayString(_ctx.$t("vertical shadow")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($options.style.vShadow),
+            "controls-position": "right",
+            onChange: _cache[30] || (_cache[30] = (v) => $options.style["vShadow"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_56, [
+          createElementVNode("label", _hoisted_57, toDisplayString(_ctx.$t("fuzzy distance")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($options.style.shadowBlur),
+            "controls-position": "right",
+            onChange: _cache[31] || (_cache[31] = (v) => $options.style["shadowBlur"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_58, [
+          createElementVNode("label", _hoisted_59, toDisplayString(_ctx.$t("size of the shadow")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($options.style.shadowSpread),
+            "controls-position": "right",
+            onChange: _cache[32] || (_cache[32] = (v) => $options.style["shadowSpread"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_60, [
+          createElementVNode("label", _hoisted_61, toDisplayString(_ctx.$t("shadow color")), 1),
+          createVNode(_component_el_color_picker, {
+            modelValue: $options.style.shadowColor,
+            "onUpdate:modelValue": _cache[33] || (_cache[33] = ($event) => $options.style.shadowColor = $event),
+            "show-alpha": "",
+            predefine: _ctx.predefineColors
+          }, null, 8, ["modelValue", "predefine"])
+        ])
+      ])
+    ], 2)
+  ])) : createCommentVNode("", true);
+}
+const SettingStyle = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  SettingStyle as default
+};