@fangzhongya/page 0.0.30 → 0.0.32

package/dist/index.css

@@ -0,0 +1,1554 @@
+@charset "UTF-8";
+
+
+.el-collapse-item__header {
+  box-sizing: border-box;
+}
+.ml-10 {
+  margin-left: 10px;
+}
+.mr-10 {
+  margin-right: 10px;
+}
+.flex-1 {
+  flex: 1;
+}
+.fang-page-page {
+  --page-min-put-size: 30px;
+  --page-min-com-size: 30px;
+  --page-put-backg: rgba(255, 255, 226, 0.5);
+  --page-drag-backg: rgb(255, 213, 218, 0.5);
+  --page-on-backg: rgba(183, 211, 255, 0.5);
+  --page-padding: 12px;
+  --page-margin: 6px;
+  --page-border: 1px dashed #336699;
+  --page-on-border: 1px solid #267afb;
+  --page-drag-border: 1px dashed rgb(177, 215, 252);
+  --page-on-min-width: 96px;
+  --page-on-min-height: 54px;
+  --page-scale: 1;
+  --page-resizable-handle-size: 6px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #f2f3f5;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-page-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+}
+.fang-page-page-top-left {
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  text-align: left;
+}
+.fang-page-page-top-left-scale {
+  margin-left: 10px;
+  width: 300px;
+  display: flex;
+  align-items: center;
+}
+.fang-page-page-top-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 10px;
+}
+.fang-page-page-top .el-button {
+  padding: 2px 5px;
+}
+.fang-page-page-grid {
+  width: 100%;
+  flex: 1;
+  display: flex;
+}
+.fang-page-page-grid-design {
+  margin-right: 8px;
+  flex: 1;
+  position: relative;
+  transform: translate3d(0, 0, 0);
+  width: 100%;
+  height: 100%;
+}
+.fang-page-page-grid-design-div {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+}
+.fang-page-page-grid-design-div-transform {
+  transform: scale(var(--page-scale));
+  transform-origin: 0 0;
+  height: 100%;
+}
+.fang-page-left {
+  width: 260px;
+  height: 100%;
+  background: #fff;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-left .el-tabs__header {
+  margin-bottom: 0;
+}
+.fang-page-left .el-tabs__item {
+  font-weight: bold;
+}
+.fang-page-left .el-collapse-item .el-collapse-item__header {
+  padding-left: 10px;
+}
+.fang-page-left .el-collapse-item {
+  border-bottom: 1px solid var(--el-collapse-border-color);
+}
+.fang-page-left .el-collapse-item .el-collapse-item__content {
+  padding-bottom: 6px;
+  color: #333;
+}
+.fang-page-left-body {
+  overflow: hidden;
+  position: relative;
+  flex: 1;
+  width: 100%;
+}
+.fang-page-left-body-roll {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+}
+.fang-page-left-custom-draggable {
+  padding-left: 10px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.fang-page-left-custom-item {
+  margin: 2px 6px 6px 0;
+  width: 110px;
+  height: 36px;
+  line-height: 16px;
+  background: #f2f7ff;
+  border: 1px solid #f2f7ff;
+  border-radius: 3px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  padding: 0 12px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+}
+.fang-page-left-custom-item:hover {
+  color: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+.fang-page-left-custom-item > span {
+  display: inline-flex;
+  word-break: break-all;
+}
+.fang-page-left-icons-draggable {
+  padding-left: 10px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.fang-page-left-icons-top {
+  padding: 10px;
+  border: 1px solid #eee;
+}
+.fang-page-left-icons-top-item {
+  display: inline-flex;
+  margin: 2px 6px 6px 0;
+  width: 110px;
+  height: 36px;
+  line-height: 16px;
+  background: #f2f7ff;
+  border: 1px solid #f2f7ff;
+  border-radius: 3px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  padding: 0 12px;
+  align-items: center;
+  box-sizing: border-box;
+}
+.fang-page-left-icons-top-item:hover {
+  color: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+.fang-page-left-icons-list {
+  padding: 10px;
+}
+.fang-page-left-icons-list-draggable {
+  display: flex;
+  flex-wrap: wrap;
+}
+.fang-page-left-icons-list-item {
+  margin: 5px;
+  padding: 5px;
+  width: 30px;
+  height: 30px;
+  background: #f2f7ff;
+  border: 1px solid #f2f7ff;
+  border-radius: 3px;
+  margin-bottom: 12px;
+  cursor: pointer;
+}
+.fang-page-left-icons-list-item:hover {
+  color: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+.fang-page-left-search-top {
+  padding: 10px;
+  border: 1px solid #eee;
+}
+.fang-page-left-search-list {
+  padding: 10px;
+  box-sizing: border-box;
+  position: absolute;
+  top: 60px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+  z-index: 100;
+  background-color: #fff;
+}
+.fang-page-left-search-item {
+  margin: 5px;
+  padding: 5px;
+  text-align: center;
+  box-sizing: border-box;
+  height: 40px;
+  background: #f2f7ff;
+  border: 1px solid #f2f7ff;
+  border-radius: 3px;
+  margin-bottom: 12px;
+  cursor: pointer;
+}
+.fang-page-left-search-item:hover {
+  color: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+.fang-page-left-moulds-top {
+  padding: 10px;
+  border: 1px solid #eee;
+}
+.fang-page-left-mould {
+  width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+}
+.fang-page-left-mould-li {
+  border: 1px solid #8896b3;
+  padding: 10px;
+  margin-top: 3px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  background-color: #fff;
+}
+.fang-page-left-mould-li-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.fang-page-left-mould-name {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+}
+.fang-page-left-mould-name-handle {
+  flex: 1;
+  display: inline-flex;
+  width: 110px;
+  height: 36px;
+  line-height: 16px;
+  background: #f2f7ff;
+  border: 1px solid #f2f7ff;
+  border-radius: 3px;
+  cursor: pointer;
+  padding: 0 12px;
+  align-items: center;
+  box-sizing: border-box;
+}
+.fang-page-left-mould-name-handle:hover {
+  color: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+.fang-page-left-mould-grid {
+  margin: 10px auto;
+  height: 108px;
+  width: 192px;
+  overflow: hidden;
+}
+.fang-page-left-mould-grid .fang-page-left-mould-grid-render {
+  transform: scale(0.1);
+  transform-origin: 0 0;
+  width: 1920px;
+  height: 1080px;
+}
+.fang-page-left-mould-popover {
+  box-sizing: content-box !important;
+  height: 540px;
+  width: 960px;
+  overflow: auto;
+}
+.fang-page-left-mould-popover .fang-page-left-mould-grid-render {
+  width: 100%;
+  height: 100%;
+}
+.fang-page-right {
+  height: 100%;
+  width: 340px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-right .el-tabs__header {
+  margin-bottom: 0;
+}
+.fang-page-right .el-tabs__item {
+  font-weight: bold;
+}
+.fang-page-right .el-collapse-item .el-collapse-item__header {
+  font-weight: 700;
+}
+.fang-page-right .el-collapse-item .el-collapse-item__header i.bt {
+  margin-right: 15px;
+  height: 16px;
+  width: 5px;
+  background: #267afb;
+  border-radius: 3px;
+}
+.fang-page-right .el-collapse-item {
+  border-bottom: 1px solid var(--el-collapse-border-color);
+}
+.fang-page-right .el-collapse-item .el-collapse-item__content {
+  padding-bottom: 6px;
+  color: #333;
+}
+.fang-page-right-body {
+  overflow: hidden;
+  position: relative;
+  flex: 1;
+  width: 100%;
+}
+.fang-page-right-body-roll {
+  position: absolute;
+  inset: 10px;
+  overflow-y: auto;
+}
+.fang-page-tree {
+  height: 100%;
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-tree-title {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.fang-page-tree-div {
+  flex: 1;
+  background-color: #ffffff;
+  position: relative;
+  overflow: hidden;
+  z-index: 100;
+}
+.fang-page-tree-menu {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  --el-menu-item-height: 36px;
+  --el-menu-level-padding: 10px;
+  --el-menu-base-level-padding: 10px;
+  --el-menu-sub-item-height: 30px;
+}
+.fang-page-tree .on {
+  background-color: var(--page-on-backg);
+}
+.fang-page-tree .on > .right-key > div > .el-sub-menu > .el-sub-menu__title {
+  background-color: var(--page-on-backg);
+}
+.fang-page-tree-drag-draggable {
+  min-height: var(--page-min-put-size);
+  background-color: var(--page-put-backg);
+}
+.fang-page-tree-drag-draggable-empty {
+  height: var(--page-min-put-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ccc;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.fang-page-render {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: var(--page-padding);
+}
+.fang-page-design {
+  min-width: 100%;
+  min-height: 100%;
+  display: table;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: var(--page-padding);
+}
+.fang-page-design > .right-key {
+  display: contents;
+}
+.fang-page-design > .right-key > .fang-page-design-drag > .fang-page-design-drag-draggable {
+  display: table-cell;
+  height: 100%;
+}
+.com-fang-icon {
+  --color: inherit;
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  fill: currentcolor;
+  color: var(--el-color-primary) !important;
+  font-size: 14px !important;
+}
+.com-fang-icon > i {
+  --icon-svg-com: inherit;
+  -webkit-mask: var(--icon-svg-com) no-repeat;
+  mask: var(--icon-svg-com) no-repeat;
+  background-color: currentColor;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  border: 0px;
+  display: inline-flex;
+  align-items: center;
+  object-fit: contain;
+  justify-content: center;
+  font-size: inherit;
+  width: inherit;
+  height: inherit;
+}
+.fang-page-viewer {
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: var(--page-padding);
+}
+.fang-page-viewer-drag {
+  display: contents;
+}
+.fang-page-viewer-drag-item {
+  border: var(--page-border) !important;
+}
+.fang-page-viewer-drag-item.__page_on {
+  border: var(--page-on-border) !important;
+  background-color: var(--page-on-backg) !important;
+}
+.fang-page-effect {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: var(--page-padding);
+}
+.fang-page-effect-drag .effect-fang-icon-plus {
+  --icon-svg-com: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z'%3E%3C/path%3E%3C/svg%3E");
+}
+.fang-page-effect-drag .effect-fang-icon-star {
+  --icon-svg-com: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M213.875 956.375c-78.75 0-146.25-61.875-146.25-146.25V450.125c0-78.75 61.875-146.25 146.25-146.25h365.62500001c78.75 0 146.25 61.875 146.24999999 146.25v365.625c0 78.75-61.875 146.25-146.25000001 146.25l-365.62499999-5.625z m0-579.375c-45 0-78.75 33.75-78.75 78.75v365.625c0 45 33.75 78.75 78.75 78.75h365.62500001c45 0 78.75-33.75 78.74999999-78.75V450.125c0-45-33.75-78.75-78.74999999-78.75H213.875z'%3E%3C/path%3E%3Cpath d='M810.125 78.875H444.49999999C360.125 78.875 298.25 146.375 298.25 225.125v22.5h61.875v-22.5c0-45 33.75-78.75 78.75-78.75h360c45 0 78.75 33.75 78.75 78.75v360c0 45-33.75 78.75-78.75 78.75h-33.75V737h45c84.375 0 146.25-67.50000001 146.25-146.25V225.125c0-84.375-67.50000001-146.25-146.25-146.25z'%3E%3C/path%3E%3C/svg%3E");
+}
+.fang-page-effect-drag .effect-fang-icon-delete {
+  color: red;
+  --icon-svg-com: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32zm448-64v-64H416v64zM224 896h576V256H224zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32m192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32'%3E%3C/path%3E%3C/svg%3E");
+}
+.fang-page-effect-drag .effect-fang-icon-lock {
+  --icon-svg-com: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M180.59820247 375.9327346h718.03722841v607.5699617H180.59820247V375.9327346z m55.23363335 55.23363205v497.1026963h607.56996171v-497.1026963H235.83183582z m55.23363206 0H180.59820247v-55.23363205h110.46726541V293.08228521C291.06546788 154.99820248 401.53273459 44.53093706 539.61681602 44.53093706S788.16816418 154.99820248 788.16816418 293.08228521V375.9327346h110.4672667v55.23363205h-165.70089876V293.08228521C732.93453212 188.13838222 644.56071902 99.76456912 539.61681602 99.76456912S346.29910124 188.13838222 346.29910124 293.08228521V431.16636665H291.06546788z m248.55134814 331.40179754c-44.18690591 0-82.85044939-38.66354348-82.85044937-82.85044939s38.66354348-82.85044939 82.85044937-82.85044939 82.85044939 38.66354348 82.85044939 82.85044939-38.66354348 82.85044939-82.85044939 82.85044939z'%3E%3C/path%3E%3C/svg%3E");
+}
+.fang-page-effect-drag .effect-fang-icon-clear {
+  color: red;
+  --icon-svg-com: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z'%3E%3C/path%3E%3Cpath d='M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z'%3E%3C/path%3E%3C/svg%3E");
+}
+.fang-page-effect-drag .effect-fang-icon-set {
+  --icon-svg-com: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M919.6 405.6l-57.2-8c-12.7-1.8-23-10.4-28-22.1-11.3-26.7-25.7-51.7-42.9-74.5-7.7-10.2-10-23.5-5.2-35.3l21.7-53.5c6.7-16.4 0.2-35.3-15.2-44.1L669.1 96.6c-15.4-8.9-34.9-5.1-45.8 8.9l-35.4 45.3c-7.9 10.2-20.7 14.9-33.5 13.3-14-1.8-28.3-2.8-42.8-2.8-14.5 0-28.8 1-42.8 2.8-12.8 1.6-25.6-3.1-33.5-13.3l-35.4-45.3c-10.9-14-30.4-17.8-45.8-8.9L230.4 168c-15.4 8.9-21.8 27.7-15.2 44.1l21.7 53.5c4.8 11.9 2.5 25.1-5.2 35.3-17.2 22.8-31.7 47.8-42.9 74.5-5 11.8-15.3 20.4-28 22.1l-57.2 8C86 408 72.9 423 72.9 440.8v142.9c0 17.7 13.1 32.7 30.6 35.2l57.2 8c12.7 1.8 23 10.4 28 22.1 11.3 26.7 25.7 51.7 42.9 74.5 7.7 10.2 10 23.5 5.2 35.3l-21.7 53.5c-6.7 16.4-0.2 35.3 15.2 44.1L354 927.8c15.4 8.9 34.9 5.1 45.8-8.9l35.4-45.3c7.9-10.2 20.7-14.9 33.5-13.3 14 1.8 28.3 2.8 42.8 2.8 14.5 0 28.8-1 42.8-2.8 12.8-1.6 25.6 3.1 33.5 13.3l35.4 45.3c10.9 14 30.4 17.8 45.8 8.9l123.7-71.4c15.4-8.9 21.8-27.7 15.2-44.1l-21.7-53.5c-4.8-11.8-2.5-25.1 5.2-35.3 17.2-22.8 31.7-47.8 42.9-74.5 5-11.8 15.3-20.4 28-22.1l57.2-8c17.6-2.5 30.6-17.5 30.6-35.2V440.8c0.2-17.8-12.9-32.8-30.5-35.2z m-408 245.5c-76.7 0-138.9-62.2-138.9-138.9s62.2-138.9 138.9-138.9 138.9 62.2 138.9 138.9-62.2 138.9-138.9 138.9z' fill=''%3E%3C/path%3E%3C/svg%3E");
+}
+.fang-page-effect-drag {
+  display: contents;
+}
+.fang-page-effect-drag-draggable {
+  position: relative;
+  display: contents;
+}
+.fang-page-effect-drag-draggable-name {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: #ccc;
+}
+.fang-page-effect-drag-draggable-empty {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ccc;
+  white-space: nowrap;
+  overflow: hidden;
+  background: var(--page-put-backg);
+}
+.fang-page-effect-drag-draggable-item {
+  border: var(--page-border) !important;
+  margin: var(--page-margin);
+  position: relative !important;
+}
+.fang-page-effect-drag-draggable-item > .fang-page-design-operate-operates {
+  display: contents;
+}
+.fang-page-effect-drag-draggable-item:hover {
+  background-color: var(--page-on-backg) !important;
+}
+.fang-page-effect-drag-draggable-item:hover > .fang-page-design-operate-operates > .fang-page-design-operate-names {
+  display: block;
+}
+.fang-page-effect-drag-draggable-item:hover > .fang-page-design-operate-operates > .fang-page-design-operate-operate > .fang-page-design-operate-operate-hide {
+  display: block;
+}
+.fang-page-effect-drag-draggable-item.__page_on {
+  min-height: var(--page-on-min-height);
+  min-width: var(--page-on-min-width);
+  border: var(--page-on-border) !important;
+  background-color: var(--page-on-backg) !important;
+}
+.fang-page-effect-drag-draggable-item.__page_on > .fang-page-design-operate-operates > .fang-page-design-operate-names {
+  color: #267afb;
+  display: block;
+}
+.fang-page-effect-drag-draggable-item.__page_on > .fang-page-design-operate-operates > .fang-page-design-operate-operate > .fang-page-design-operate-operate-hide {
+  display: block;
+}
+.fang-page-effect-drag-draggable-item.__page_on::before {
+  content: "";
+  position: absolute;
+  height: 20px;
+  width: 50%;
+  left: 0;
+  top: 0;
+  text-align: right;
+  z-index: 102;
+  background-color: var(--page-drag-backg);
+  cursor: move;
+}
+.fang-page-effect-drag-draggable-item.__page_is-inline {
+  min-height: var(--page-min-com-size);
+  min-width: var(--page-min-com-size);
+  display: inline-flex;
+}
+.fang-page-effect-drag-draggable-item.__page_is-inline.__page_on {
+  min-height: var(--page-on-min-height);
+  min-width: var(--page-on-min-width);
+  display: inline-grid;
+}
+.fang-page-effect-drag-draggable-item.__page_full {
+  position: fixed !important;
+  background-color: #fff !important;
+  inset: 0 !important;
+  width: calc(100% - var(--page-margin) * 2) !important;
+  height: calc(100% - var(--page-margin) * 2) !important;
+  z-index: 10000;
+  box-sizing: border-box !important;
+  padding: 20px !important;
+}
+.fang-page-effect-drag-draggable-item.__page_full > .fang-page-design-operate-operates > .fang-page-design-operate-operate > .fang-page-design-operate-operate-hide {
+  display: none;
+}
+.fang-page-effect-drag-draggable-item.__page_full > .fang-page-design-operate-operates > .fang-page-design-operate-fulls {
+  display: block;
+}
+.fang-page-design-drag {
+  display: contents;
+}
+.fang-page-design-drag-draggable {
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--page-padding);
+  border: var(--page-drag-border);
+  margin: var(--page-margin);
+  position: relative;
+  background-color: var(--page-put-backg);
+}
+.fang-page-design-drag-draggable-empty {
+  height: var(--page-min-put-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ccc;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.fang-page-design-drag-draggable-item:has(.on) {
+  box-sizing: border-box;
+}
+.fang-page-design-drag-draggable-item {
+  box-sizing: border-box;
+  margin-top: var(--page-margin);
+}
+.fang-page-design-drag-draggable-item:first-child {
+  margin-top: 0;
+}
+.fang-page-design-drag-draggable-item.on {
+  min-height: var(--page-on-min-height);
+  min-width: var(--page-on-min-width);
+  background-color: var(--page-on-backg);
+}
+.fang-page-design-drag-draggable-item.on > .fang-page-design-operate {
+  border: var(--page-on-border);
+  background-color: var(--page-on-backg);
+}
+.fang-page-design-drag-draggable-item.on > .fang-page-design-operate > .fang-page-design-operate-names {
+  color: #267afb;
+  display: block;
+}
+.fang-page-design-drag-draggable-item.on > .fang-page-design-operate > .fang-page-design-operate-operate > .fang-page-design-operate-operate-hide {
+  display: block;
+}
+.fang-page-design-drag-draggable-item.is-inline.on {
+  display: inline-grid;
+}
+.fang-page-design-drag-draggable-item.is-inline {
+  display: inline-flex;
+  margin-left: var(--page-margin);
+}
+.fang-page-design-drag-draggable-item.is-inline:first-child {
+  margin-left: 0;
+}
+.fang-page-design-drag-draggable-item.is-inline > .fang-page-design-operate {
+  display: inline-flex;
+}
+.fang-page-design-operate {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  min-height: var(--page-min-com-size);
+  min-width: var(--page-min-com-size);
+  background-color: #fff;
+  border: var(--page-border);
+}
+.fang-page-design-operate:hover {
+  background-color: #e5f0ff;
+}
+.fang-page-design-operate:hover > .fang-page-design-operate-names {
+  display: block;
+}
+.fang-page-design-operate:hover > .fang-page-design-operate-operate > .fang-page-design-operate-operate-hide {
+  display: block;
+}
+.fang-page-design-operate-names {
+  display: none;
+  white-space: nowrap;
+  overflow: hidden;
+  color: #999;
+  position: absolute;
+  height: 20px;
+  left: 0;
+  font-size: 14px !important;
+  top: -5px;
+  text-align: right;
+  z-index: 101;
+}
+.fang-page-design-operate-operate {
+  position: absolute;
+  white-space: nowrap;
+  height: 20px;
+  right: -5px;
+  font-size: 14px !important;
+  top: -5px;
+  text-align: right;
+  z-index: 102;
+  display: flex;
+  cursor: pointer;
+}
+.fang-page-design-operate-operate-hide {
+  display: none;
+}
+.fang-page-design-operate-operate-hide > span {
+  padding: 3px;
+  margin: 0 1px;
+}
+.fang-page-design-operate-operate-show {
+  display: block;
+}
+.fang-page-design-operate-operate-show > span {
+  padding: 3px;
+  margin: 0 1px;
+}
+.fang-page-design-operate-fulls {
+  pointer-events: all;
+  display: none;
+  position: fixed;
+  right: 12px;
+  top: 8px;
+  height: 20px;
+  cursor: pointer;
+  z-index: 140;
+  font-size: 20px;
+}
+.fang-page-design-operate-full {
+  display: contents;
+}
+.fang-page-design-operate-full.full {
+  position: fixed;
+  background-color: #fff;
+  display: block;
+  inset: 0;
+  z-index: 1000;
+  border-radius: 4px;
+  border: var(--page-border);
+  box-sizing: border-box;
+  padding: 20px;
+}
+.fang-page-design-operate-full.full > .fang-page-design-operate-full-close {
+  pointer-events: all;
+  display: block;
+  position: fixed;
+  right: 6px;
+  top: 6px;
+  height: 20px;
+  cursor: pointer;
+  z-index: 140;
+}
+.fang-page-design-operate-full.full > .fang-page-design-operate-full-names {
+  pointer-events: all;
+  display: block;
+  position: fixed;
+  left: 30px;
+  top: 0;
+  height: 20px;
+  z-index: 140;
+}
+.fang-page-design-operate-full.full > .fang-page-design-operate-full-com {
+  position: relative;
+  display: block;
+  height: 100% !important;
+  width: 100% !important;
+}
+.fang-page-design-operate-full.full > .fang-page-design-operate-full-com > * {
+  width: 100% !important;
+  height: 100% !important;
+}
+.fang-page-design-operate-full-names, .fang-page-design-operate-full-close {
+  display: none;
+}
+.fang-page-design-operate-full > .fang-page-design-operate-full-com {
+  display: contents;
+}
+.fang-page-design-operate-full > .fang-page-design-operate-full-com > * {
+  height: auto;
+}
+.fang-page-design-icon {
+  display: flex;
+  box-sizing: border-box;
+}
+.fang-page-design-icon > * {
+  flex: 1;
+  min-width: 16px;
+}
+.page-page-position {
+  min-height: calc(var(--page-padding) * 2 + var(--page-min-put-size));
+}
+.page-page-position > .fang-page-design-operate > .fang-page-design-operate-full > .fang-page-design-operate-full-com > div > .fang-page-design-resizable {
+  display: block;
+}
+.page-page-position > .fang-page-design-operate > .fang-page-design-operate-full > .fang-page-design-operate-full-com.is-position > div > .fang-page-design-resizable {
+  display: none;
+}
+.fang-page-design-vif-item {
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-design-vif-item-title {
+  padding: 0 10px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+  background: #f5f5f5;
+}
+.fang-page-design-vif-item-div {
+  flex: 1;
+}
+.fang-page-design-grids {
+  position: relative;
+  padding: 0;
+  margin: 0;
+}
+.fang-page-design-grids .vue-grid-layout {
+  background-color: #f2f2f2;
+}
+.fang-page-design-grids-layout {
+  min-height: var(--page-min-put-size);
+  min-width: var(--page-min-put-size);
+  height: auto;
+  padding: var(--page-padding);
+  box-sizing: border-box;
+}
+.fang-page-design-grids-allow {
+  display: none;
+  position: absolute;
+  height: 20px;
+  width: 50%;
+  left: 0;
+  top: 0;
+  text-align: right;
+  z-index: 100;
+  background-color: var(--page-drag-backg);
+}
+.fang-page-design-grids-item {
+  overflow: hidden;
+}
+.fang-page-design-grids-item.on {
+  min-height: auto;
+  min-width: auto;
+}
+.fang-page-design-grids-item.on > .fang-page-design-grids-allow {
+  display: block;
+}
+.fang-page-design-grids-item > .fang-page-design-operate > .fang-page-design-operate-full > .fang-page-design-operate-full-com > .fang-page-design-drag > .fang-page-design-drag-draggable {
+  height: calc(100% - var(--page-margin) * 2);
+}
+.fang-page-design-grids-position {
+  position: absolute;
+  inset: 0;
+  z-index: 130;
+}
+.fang-page-design-resizable {
+  padding: var(--page-padding);
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+}
+.fang-page-design-resizable-draggable {
+  height: 100%;
+  width: 100%;
+  background-color: var(--page-put-backg);
+}
+.fang-page-design-resizable-draggable-draggable {
+  height: 100%;
+  width: 100%;
+  display: inherit;
+  pointer-events: all;
+  box-sizing: border-box;
+  position: relative;
+}
+.fang-page-design-resizable-resizable {
+  min-height: var(--page-min-put-size);
+  min-width: var(--page-min-put-size);
+  position: relative;
+  background-color: #808080;
+  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+  background-size: 10px 10px, 10px 10px;
+  background-position: 10px 10px;
+  height: 100%;
+  width: 100%;
+  box-sizing: content-box;
+}
+.fang-page-design-resizable-resizable-item.on {
+  min-height: auto;
+  min-width: auto;
+}
+.fang-page-design-resizable-resizable-item.is-inline {
+  width: auto;
+  height: auto;
+}
+.fang-page-design-resizable-resizable-item > .fang-page-design-operate {
+  overflow: hidden;
+}
+.fang-page-design-resizable-resizable-item > .fang-page-design-operate > .fang-page-design-operate-full > .fang-page-design-operate-full-com > * {
+  position: static !important;
+}
+.fang-page-design-resizable-allow {
+  position: absolute;
+  height: 20px;
+  width: 50%;
+  left: 0;
+  top: 0;
+  text-align: right;
+  z-index: 110;
+  background-color: var(--page-drag-backg);
+}
+.fang-page-look-over {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-look-over-top {
+  position: relative;
+  padding: 0 10px 10px;
+}
+.fang-page-look-over-top-but {
+  position: absolute;
+  right: 0;
+  top: -10px;
+}
+.fang-page-look-over-input {
+  flex: 1;
+}
+.fang-page-look-over-input .el-textarea {
+  width: 100%;
+  height: 100%;
+}
+.fang-page-look-over-input .el-textarea textarea {
+  width: 100%;
+  height: 100%;
+}
+.fang-page-look-over-footer {
+  margin-top: 20px;
+  text-align: right;
+}
+.fang-page-operate-right .right-key-box-list .right-key-box-list-li {
+  border-top: 1px solid #eee;
+}
+.fang-page-operate-right .right-key-box-list .right-key-box-list-li:first-child {
+  border-top: 0;
+}
+.fang-page-tree-level-hide {
+  background-color: #fff;
+}
+.fang-page-tree-level-hide .el-icon {
+  display: none;
+}
+.fang-page-tree-level-li {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.fang-page-tree-level-li-operat {
+  display: flex;
+  align-items: center;
+}
+.fang-page-tree-level-li-operat > span {
+  margin: 0 5px;
+}
+.fang-page-tree-level-slot-name {
+  padding-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level) * var(--el-menu-level-padding) - 5px);
+  font-size: 14px;
+}
+.fang-page-generated-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-generated-box-div {
+  flex: 1;
+}
+.fang-page-generated-box-footer {
+  margin-top: 20px;
+  text-align: right;
+}
+.fang-page-editor {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-editor-code {
+  width: 100%;
+  height: 100%;
+}
+.fang-page-editor-code .inputs {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+}
+.fang-page-editor-code .el-textarea {
+  width: 100%;
+  height: 100%;
+}
+.fang-page-editor-code .el-textarea textarea {
+  width: 100%;
+  height: 100%;
+}
+.fang-page-editor-view {
+  margin: 0 10px;
+}
+.fang-page-editor-top {
+  background-color: var(--el-color-info-light-9);
+  padding: 10px;
+}
+.fang-page-editor-top-type {
+  margin-right: 10px;
+  font-weight: bold;
+}
+.fang-page-editor-content {
+  flex: 1;
+  width: 100%;
+  position: relative;
+}
+.fang-page-editor-editor {
+  position: absolute;
+  inset: 0;
+}
+.fang-page-editor-footer {
+  margin-top: 20px;
+  text-align: right;
+}
+.fang-page-right-box-input {
+  display: flex;
+  align-items: center;
+}
+.fang-page-right-box-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-right-box-box-div {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-right-box-box-footer {
+  margin-top: 10px;
+  text-align: right;
+}
+.fang-page-right-item .el-form-item__label {
+  padding-right: 6px;
+}
+.fang-page-right-item-label {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.fang-page-right-item-label > span {
+  line-height: 18px;
+}
+.fang-page-right-editdata-variables {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.fang-page-right-editdata-params-li {
+  border: 1px solid #ccc;
+  padding: 5px;
+}
+.fang-page-right-editdata-module-li {
+  border: 1px solid #ccc;
+  padding: 5px;
+}
+.fang-page-right-editdata-designer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-right-editdata-designer-scroll {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-right-editdata-designer-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.fang-page-right-editdata-designer-main-tabs {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-right-editdata-designer-main-tabs-flex {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.fang-page-right-custom {
+  position: static;
+  height: 100%;
+  width: 100%;
+}
+.fang-page-right-custom-name {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.design-sortable-ghost {
+  width: 40px !important;
+  height: 30px !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  overflow: hidden;
+  white-space: normal;
+  background-color: #267afb !important;
+  color: #267afb !important;
+}
+.design-sortable-ghost > * {
+  display: none;
+}
+.is-mouse > .fang-page-design-operate-names {
+  color: #91bfff;
+}
+.is-mouse > .fang-page-design-operate-full > .fang-page-design-operate-full-com:hover {
+  background-color: #91bfff;
+}
+.fang-page-right-tree {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-right-tree-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.fang-page-right-tree-name {
+  display: flex;
+  align-items: center;
+}
+.fang-page-right-tree-tabs {
+  margin-top: 10px;
+  flex: 1;
+}
+.fang-page-right-tree .el-tab-pane {
+  height: calc(100% - 10px);
+}
+.fang-page-right-tree .el-tab-pane .inputs {
+  width: 100%;
+  height: 100%;
+}
+.fang-page-right-tree .el-tab-pane .inputs textarea {
+  width: 100%;
+  height: 100%;
+}
+.fang-page-right-tree-menu {
+  --el-menu-item-height: 36px;
+}
+.fang-page-right-tree-level {
+  display: flex;
+  align-items: center;
+}
+.fang-page-right-tree-drag {
+  background-color: rgb(255, 248, 238);
+}
+.fang-page-right-tree-drag.first {
+  background-color: #fff;
+}
+.fang-page-right-tree-drag-footer {
+  width: 100%;
+  text-align: center;
+  color: #ccc;
+}
+.fang-page-right-tree-drag-data {
+  display: flex;
+  width: 100%;
+}
+.fang-page-right-tree-drag-data-slot {
+  flex: 1;
+}
+.fang-page-right-tree-drag-data-add {
+  width: 20px;
+  cursor: pointer;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  color: var(--el-color-primary);
+  height: 36px;
+}
+.fang-page-right-tree-drag-data-delete {
+  width: 20px;
+  cursor: pointer;
+  text-align: center;
+  color: red;
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+}
+.fang-page-currency-codes-ul {
+  margin: 5px;
+  margin-bottom: 18px;
+  padding: 5px;
+}
+.fang-page-currency-codes-ul-li {
+  padding: 5px;
+  display: flex;
+}
+.fang-page-currency-codes-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-currency-codes-box-dfrac {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.fang-page-currency-codes-box-code {
+  flex: 1;
+}
+.fang-page-currency-codes-box-footer {
+  margin-top: 10px;
+  text-align: right;
+}
+.fang-page-currency-props-ul {
+  margin: 5px;
+  margin-bottom: 18px;
+  padding: 5px;
+}
+.fang-page-currency-props-ul-li {
+  padding: 5px;
+  display: flex;
+}
+.fang-page-currency-props-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-currency-props-box-div {
+  flex: 1;
+}
+.fang-page-currency-props-box-div-li {
+  width: 100%;
+}
+.fang-page-currency-props-box-footer {
+  margin-top: 10px;
+  text-align: right;
+}
+.fang-page-operate-right-key-box {
+  width: 140px;
+  position: fixed;
+  padding: 10px;
+  z-index: 9999;
+  background: #ffffff;
+  border: 1px solid #cfd7e5;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.fang-page-operate-right-key-box-list-li:hover {
+  background: #ecf5ff;
+  color: #66b1ff;
+}
+.fang-page-operate-right-key-box-list-li {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 8px 14px 8px 10px;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.fang-page-operate-right-key-box-list-li i {
+  margin-right: 10px;
+}
+.fang-page-output-gener {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.fang-page-output-gener-code {
+  flex: 1;
+  width: 100%;
+}
+.fang-page-output-gener-code .el-textarea {
+  width: 100%;
+  height: 100%;
+}
+.fang-page-output-gener-code .el-textarea textarea {
+  width: 100%;
+  height: 100%;
+}
+
+/* 关键：移除所有position/left/top/width/height样式定义，由JS控制 */
+.resizable {
+  position: absolute; /* 仅保留position，其他由JS设置 */
+  box-sizing: border-box;
+  touch-action: none;
+}
+.resizable.active {
+  outline: var(--page-on-border);
+}
+.resizable.dragging {
+  opacity: 0.9;
+  cursor: move !important;
+}
+.resizable.resizing {
+  opacity: 0.9;
+}
+.resizable.active .handle {
+  opacity: 1;
+}
+.resizable .handle {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: #6fc0ff;
+  border-radius: 4px;
+  width: var(--page-resizable-handle-size);
+  height: var(--page-resizable-handle-size);
+  z-index: 1000;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+.resizable .handle:hover {
+  opacity: 1;
+  transform: scale(1.2);
+}
+.resizable .handle-tl {
+  top: calc(var(--page-resizable-handle-size) * -1);
+  left: calc(var(--page-resizable-handle-size) * -1);
+  cursor: nwse-resize;
+}
+.resizable .handle-tm {
+  top: calc(var(--page-resizable-handle-size) * -1);
+  left: 50%;
+  margin-left: calc(var(--page-resizable-handle-size) * -1 / 2);
+  cursor: ns-resize;
+}
+.resizable .handle-tr {
+  top: calc(var(--page-resizable-handle-size) * -1);
+  right: calc(var(--page-resizable-handle-size) * -1);
+  cursor: nesw-resize;
+}
+.resizable .handle-mr {
+  top: 50%;
+  right: calc(var(--page-resizable-handle-size) * -1);
+  margin-top: calc(var(--page-resizable-handle-size) * -1 / 2);
+  cursor: ew-resize;
+}
+.resizable .handle-br {
+  bottom: calc(var(--page-resizable-handle-size) * -1);
+  right: calc(var(--page-resizable-handle-size) * -1);
+  cursor: nwse-resize;
+}
+.resizable .handle-bm {
+  bottom: calc(var(--page-resizable-handle-size) * -1);
+  left: 50%;
+  margin-left: calc(var(--page-resizable-handle-size) * -1 / 2);
+  cursor: ns-resize;
+}
+.resizable .handle-bl {
+  bottom: calc(var(--page-resizable-handle-size) * -1);
+  left: calc(var(--page-resizable-handle-size) * -1);
+  cursor: nesw-resize;
+}
+.resizable .handle-ml {
+  top: 50%;
+  left: calc(var(--page-resizable-handle-size) * -1);
+  margin-top: calc(var(--page-resizable-handle-size) * -1 / 2);
+  cursor: ew-resize;
+}
+.grid-item {
+  background-color: #fff;
+}
+.grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+  background-color: #f2f2f2;
+}
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*!
+  Theme: StackOverflow Light
+  Description: Light theme as used on stackoverflow.com
+  Author: stackoverflow.com
+  Maintainer: @Hirse
+  Website: https://github.com/StackExchange/Stacks
+  License: MIT
+  Updated: 2021-05-15
+
+  Updated for @stackoverflow/stacks v0.64.0
+  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
+  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
+*/
+.hljs {
+  /* var(--highlight-color) */
+  color: #2f3337;
+  /* var(--highlight-bg) */
+  background: #f6f6f6
+}
+.hljs-subst {
+  /* var(--highlight-color) */
+  color: #2f3337
+}
+.hljs-comment {
+  /* var(--highlight-comment) */
+  color: #656e77
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-meta .hljs-keyword,
+.hljs-doctag,
+.hljs-section {
+  /* var(--highlight-keyword) */
+  color: #015692
+}
+.hljs-attr {
+  /* var(--highlight-attribute); */
+  color: #015692
+}
+.hljs-attribute {
+  /* var(--highlight-symbol) */
+  color: #803378
+}
+.hljs-name,
+.hljs-type,
+.hljs-number,
+.hljs-selector-id,
+.hljs-quote,
+.hljs-template-tag {
+  /* var(--highlight-namespace) */
+  color: #b75501
+}
+.hljs-selector-class {
+  /* var(--highlight-keyword) */
+  color: #015692
+}
+.hljs-string,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr {
+  /* var(--highlight-variable) */
+  color: #54790d
+}
+.hljs-meta,
+.hljs-selector-pseudo {
+  /* var(--highlight-keyword) */
+  color: #015692
+}
+.hljs-built_in,
+.hljs-title,
+.hljs-literal {
+  /* var(--highlight-literal) */
+  color: #b75501
+}
+.hljs-bullet,
+.hljs-code {
+  /* var(--highlight-punctuation) */
+  color: #535a60
+}
+.hljs-meta .hljs-string {
+  /* var(--highlight-variable) */
+  color: #54790d
+}
+.hljs-deletion {
+  /* var(--highlight-deletion) */
+  color: #c02d2e
+}
+.hljs-addition {
+  /* var(--highlight-addition) */
+  color: #2f6f44
+}
+.hljs-emphasis {
+  font-style: italic
+}
+.hljs-strong {
+  font-weight: bold
+}
+.hljs-formula,
+.hljs-operator,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+  
+}
+
+.vue-grid-layout {
+		position: relative;
+		transition: height 0.2s ease;
+}
+
+.vue-grid-item {
+  box-sizing: border-box;
+  touch-action: none;
+  transition: all 0.2s ease;
+  transition-property: left, top, right;
+}
+.vue-grid-item.no-touch {
+  touch-action: none;
+}
+.vue-grid-item.css-transforms {
+  right: auto;
+  left: 0;
+  transition-property: transform;
+}
+.vue-grid-item.resizing {
+  z-index: 3;
+  opacity: 0.6;
+}
+.vue-grid-item.vue-draggable-dragging {
+  z-index: 3;
+  transition: none;
+}
+.vue-grid-item.vue-grid-placeholder {
+  z-index: 2;
+  user-select: none;
+  background: red;
+  opacity: 0.2;
+  transition-duration: 0.1s;
+}
+.vue-grid-item > .vue-resizable-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 20;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  cursor: se-resize;
+}
+.vue-grid-item > .vue-resizable-handle:hover .corner-handle {
+  opacity: 1;
+}
+.vue-grid-item > .vue-resizable-handle:active .corner-handle {
+  transform: scale(120%);
+}
+.vue-grid-item > .vue-resizable-handle .corner-handle {
+  width: 4px;
+  height: 4px;
+  background-color: gray;
+  border-radius: 999px;
+  opacity: 0.5;
+  transition: 0.2s;
+  transition-property: opacity, transform;
+}
+.vue-grid-item.disable-user-select {
+  user-select: none;
+}