magic-page-designer/src/assets/layout/box-layout.less

magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w

// 定义生成的方法
.box-define-all(@type) {
  &-xs {
    @{type}: 5px;
  }
  &-sm {
    @{type}: 10px;
  }
  & {
    @{type}: 15px;
  }
  &-md {
    @{type}: 20px;
  }
  &-lg {
    @{type}: 30px;
  }
  &-no {
    @{type}: 0;
  }
}

.box-define-all(@type,@direction) {
  &-xs {
    @{type}-@{direction}: 5px;
  }
  &-sm {
    @{type}-@{direction}: 10px;
  }
  & {
    @{type}-@{direction}: 15px;
  }
  &-md {
    @{type}-@{direction}: 20px;
  }
  &-lg {
    @{type}-@{direction}: 30px;
  }
  &-no {
    @{type}-@{direction}: 0;
  }
}

.full-box {
  position: absolute;
  width: 100%;
  height: 100%;
}

.margin {
  // 四边边距
  & {
    .box-define-all(margin);
  }
  // 上边距
  &-t {
    .box-define-all(margin, top);
  }
  // 右边距
  &-r {
    .box-define-all(margin, right);
  }
  // 下边距
  &-b {
    .box-define-all(margin, bottom);
  }
  // 左边距
  &-l {
    .box-define-all(margin, left);
  }
}

.padding {
  // 四边边距
  & {
    .box-define-all(padding);
  }
  // 上边距
  &-t {
    .box-define-all(padding, top);
  }
  // 右边距
  &-r {
    .box-define-all(padding, right);
  }
  // 下边距
  &-b {
    .box-define-all(padding, bottom);
  }
  // 左边距
  &-l {
    .box-define-all(padding, left);
  }
}
// 宽度
.width {
  &-full {
    width: 100%;
  }
  &-half {
    width: 50%;
  }
}
// 高度
.height {
  &-full {
    height: 100%;
  }
  &-min-full {
    min-height: 100%;
  }
}
// 鼠标样式
.cursor {
  // 可移动
  &-move {
    cursor: move;
  }
  // 超链接
  &-pointer {
    cursor: pointer;
  }
}
// 取消选中样式
.not-select {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
// 滚动条样式
.wpd-scroll {
  overflow: auto;
  &::-webkit-scrollbar {
    background-color: none;
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-track {
    background: none;
  }
  &::-webkit-scrollbar-corner {
    background: none;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(121, 121, 121, 0.4);
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 100, 100, 0.7);
  }
  &::-webkit-scrollbar-button {
    display: none;
  }
}