editor_page/src/App.vue

<template>
  <div>
    <div class="header">
      <!-- <img src="/statics/image/loginLogo.png" class="logo" alt="华讯时代" style="height: 26px;width: 184px"/> -->
      <div class="tplName">
        <label>
          <input v-model="viewTitle" placeholder="请输入标题名称" type="text" />
        </label>
        <i class="el-icon-edit"></i>
      </div>
      <div class="button-group">
        <!--            <el-button type="primary" @click="previewAdvert" size="mini">预览</el-button>-->
        <!-- <el-button type="primary" @click="lookJson" size="mini">查看JSON</el-button> -->
        <el-button type="primary" @click="submit" size="mini">提交页面</el-button>
        <el-button size="mini" @click="closeOpenWindows">关闭</el-button>
      </div>
      <div class="editor">
      </div>
    </div>
    <section class="decoration-edit">
      <section class="l">
        <div class="title">封面图片</div>
        <div>
          <div class="cover">
            <img v-if="pic" :src="pic" />
            <img v-else src="@/assets/images/defaultimg.jpg" />
          </div>
          <!-- 上传图片 -->
          <div class="updataBtn">
            <el-button style="width:100%" type="primary" size="mini" @click="updataImage">上传封面</el-button>
          </div>
        </div>
        <ul>
          <div class="title">组件选择</div>
          <li v-for="(val, index) in typeList" :key="index + 1" @click="clickType(val)">
            <img :src="require('./assets/images/' + val.icon)">
            <!-- <img src="./assets/images/l-kefu.png"> -->
            <!-- <span :class="val.icon"></span> -->
            <p>{{ val.name }}</p>
          </li>
        </ul>
      </section>

      <section class="c">
        <div class="top-nav">
          <img src="./assets/images/topNavBlack.png">
          <span class="tit">{{ viewTitle }}</span>
        </div>
        <div class="view-content">
          <div v-for="(item, index) in view" :key="index">
            <div v-if="!item.isHover" :data-index="index" :key="index" class="item" @click="selectType(item)">
              <component :is="item.com" :data="item" :key="index + '_'"></component>
              <i @click="deleteItem($event, index)" class="el-icon-error"></i>
              <div class="control-tool-bar">
                <el-tooltip class="item" effect="light" content="上移" placement="bottom">
                  <el-button class="ctrl-icon icon-up" type="text" size="small" @click.stop="upItem(item)"
                    :disabled="index == 0"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="下移" placement="bottom">
                  <el-button class="ctrl-icon icon-down" type="text" size="small" @click.stop="downItem(item)"
                    :disabled="index == view.length - getHoverList().length - 1"></el-button>
                </el-tooltip>
              </div>
            </div>
            <div v-if="item.isHover" :data-index="index" :key="index" class="item nobackground" :class="item.position"
              :style="'width:' + (item.width ? item.width : 100) + 'px;height:' + (item.height ? item.height : 100) + 'px;'"
              @click="selectType(item)">
              <component :is="item.com" :data="item" :key="index + '_'"></component>
              <i @click="deleteItem($event, index)" class="el-icon-error"></i>
            </div>
          </div>
        </div>
      </section>

      <section class="r" :class="isRight ? '' : 'nobackground'">
        <component v-if="isRight" :is="propsData.setCom" :data="propsData"
          @closeRightTemplateHandle="closeRightTemplateHandle" @updataContent="updataContent"></component>
      </section>

      <!-- <div class="submit-btn">
        <el-button @click="submit">提交页面</el-button>
      </div> -->
    </section>

    <materialManage v-if="materialVisible" :on-success="chooseImageHandle" :file-type="1" item-or-src="item">
    </materialManage>
  </div>
</template>


<script>
import service from './utlis/axios'
import { setCookie, getCookie, clearCookie } from '@/utlis/utli'
import materialManage from './components/materialManage.vue'
import editorImage from '@/components/View/editorImage'
import settingImage from '@/components/setting/settingImage'
import editorBanner from '@/components/View/editorBanner'
import settingBanner from '@/components/setting/settingBanner'
import editorText from '@/components/View/editorText'
import settingText from '@/components/setting/settingText'
import editorApplicationForm from '@/components/View/editorApplicationForm'
import settingApplicationForm from '@/components/setting/settingApplicationForm'
import editorCustomerService from '@/components/View/editorCustomerService'
import settingCustomerService from '@/components/setting/settingCustomerService'
import editorProduct from '@/components/View/editorProduct'
import settingProduct from '@/components/setting/settingProduct'
import editorRecharge from '@/components/View/editorRecharge'
import settingRecharge from '@/components/setting/settingRecharge'
import editorCoupon from '@/components/View/editorCoupon'
import settingCoupon from '@/components/setting/settingCoupon'
export default {
  components: {
    editorImage,
    editorBanner,
    settingImage,
    settingBanner,
    editorText,
    settingText,
    editorApplicationForm,
    settingApplicationForm,
    editorCustomerService,
    settingCustomerService,
    editorProduct,
    settingProduct,
    editorRecharge,
    settingRecharge,
    editorCoupon,
    settingCoupon,

    materialManage
  },
  data() {
    return {
      pic: '',//封面
      typeList: [
        {
          name: '轮播图',
          key: 'banner',
          icon: 'l-lunbo.png',
          com: 'editorBanner',
          setCom: 'settingBanner',
          value: {
            imageList: [{ src: '' }]
          }
        }, {
          name: '图片',
          key: 'images',
          icon: 'l-tupian.png',
          com: 'editorImage',
          setCom: 'settingImage',
          value: {
            src: ''
          }
        }, {
          name: '文本',
          key: 'text',
          icon: 'l-wenbeng.png',
          com: 'editorText',
          setCom: 'settingText',
          value: {
            content: '',
            isTitle: false
          }
        }, {
          name: '报名表',
          key: 'applicationForm',
          icon: 'l-baomingbiao.png',
          com: 'editorApplicationForm',
          setCom: 'settingApplicationForm',
          value: {
            title: { value: '报名表', isShow: true },
            database: '',
            formItemList: [{
              label: '', databaseLabel: '', type: 1, required: true,dataType:''
            }, {
              label: '', databaseLabel: '', type: 1, required: true,dataType:''
            }, {
              label: '', databaseLabel: '', type: 5, required: true,dataType:'', option: [{ label: '', value: '' }, { label: '', value: '' }]
            }],
            buttonName: ''
          }
        }, {
          name: '客服',
          key: 'customerService',
          icon: 'l-kefu.png',
          com: 'editorCustomerService',
          setCom: 'settingCustomerService',
          isHover: true,
          position: 'right-bottom',//left-top
          width: '70',
          height: '70',
          value: {
            type: '',
            text: ''
          }
        }, {
          name: '商品',
          key: 'product',
          icon: 'l-shangping.png',
          com: 'editorProduct',
          setCom: 'settingProduct',
          value: {
            layoutNum: 1,
            productList: [],
            showOriginalPrice: false
          }
        }, {
          name: '充值',
          key: 'recharge',
          icon: 'l-chongzhi.png',
          com: 'editorRecharge',
          setCom: 'settingRecharge',
          value: {
            mainColor:'#fe0419',
            showSymbol:true,
            placeholderText:'点击输入充值金额',
            buttonName:'立即充值',
            showSubButton:true,
            subButtonName:'激活卡充值'
          }
        }, {
          name: '优惠券',
          key: 'coupon',
          icon: 'l-youhuiquan.png',
          com: 'editorCoupon',
          setCom: 'settingCoupon',
          value: {
            couponObj:{}
          }
        }],
      view: [],
      type: '',
      propsData: {},
      isRight: false,
      materialVisible: false,
      pass: true,//校验
      id: null,
      libraryExtendId: null,
      viewTitle: '',
      bindId: null,
      bindType: null
    }
  },
  computed: {
    info() {
      return this.view[0]
    }
  },
  created() {
    var sid = this.getUrlParamValue('sid');
    sessionStorage.setItem('shiro.sesssion', sid)
    if (sid) {
      setCookie('shiro.sesssion', sid, 1)
    } else {
      setCookie('shiro.sesssion', "", -1);
    }

    // 编辑
    var id = this.getUrlParamValue('id');
    var bindId = this.getUrlParamValue('bindId');
    var bindType = this.getUrlParamValue('bindType');
    this.id = id
    this.bindId = bindId
    this.bindType = bindType
    if (id) {
      this.getMaterialLibrary(id)
    } else if (bindId) {
      this.getMaterialLibraryByBindId(bindId, bindType)
    }
  },
  methods: {
    // 关闭窗口
    closeOpenWindows() {
      window.open("about:blank", "_top").close();
    },
    getImage(url) {
      return require(url)
    },
    // 上传图片
    updataImage() {
      this.materialVisible = true
    },
    // 选择图片
    chooseImageHandle(val) {
      this.pic = val.url
      this.materialVisible = false
    },
    getUrlParamValue(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 编辑，根据id查询
    getMaterialLibrary(id) {
      service.get("/material/library/" + id).then((res) => {
        if (res.data.data) {
          this.pic = res.data.data.pic
          this.view = JSON.parse(res.data.data.libraryExtend.params)
          this.id = res.data.data.id
          this.libraryExtendId = res.data.data.libraryExtend.id
          this.viewTitle = res.data.data.title
        }
      }).catch(function () {

      });
    },
    getMaterialLibraryByBindId(bindId, bindType) {
      service.get(`/material/library/info?bindId=${bindId}&bindType=${bindType}`).then((res) => {
        if (res.data.data) {
          this.pic = res.data.data.pic
          this.view = JSON.parse(res.data.data.libraryExtend.params)
          this.id = res.data.data.id
          this.libraryExtendId = res.data.data.libraryExtend.id
          this.viewTitle = res.data.data.title
        }
      }).catch(() => {
      });
    },
    // index排序
    position() {
      let commonList = this.view.filter((item) => { return item.isHover != true })
      let hoverList = this.view.filter((item) => { return item.isHover == true })
      this.view = [...commonList, ...hoverList]
      this.view.forEach((item, index) => {
        item.index = index
      })
    },
    getHoverList() {
      return this.view.filter((item) => { return item.isHover == true })
    },
    clickType(val) {
      this.view.push(JSON.parse(JSON.stringify(val)))
      this.position()
    },
    deleteItem(e, index) {
      e.preventDefault()
      e.stopPropagation()
      this.view.splice(index, 1)
      this.isRight = false
      this.propsData = {}
      this.position()
    },
    selectType(val) {
      this.isRight = false
      this.propsData = val
      this.$nextTick(() => this.isRight = true)
    },
    closeRightTemplateHandle(val) {
      this.isRight = val
    },
    updataContent(val) {
      this.$set(this.view, val.index, JSON.parse(JSON.stringify(val)))
      // this.view.forEach(item => {
      //   if(item.key==val.key&&item.index==val.index) item = JSON.parse(JSON.stringify(val))
      // });
    },
    lookJson() {
      this.$alert(JSON.stringify(this.view), 'JSON', {
        confirmButtonText: '确定'
      });
    },
    // 上移
    upItem(item) {
      if (item.index == 0) return
      if (this.view[item.index - 1].isHover) {
        this.swapArray(this.view, item.index - 2, item.index);
      } else {
        this.swapArray(this.view, item.index - 1, item.index);
      }
      this.$nextTick(() => {
        this.selectType(item);
      })
    },
    // 下移
    downItem(item) {
      if (item.index == this.view.length) return
      if (this.view[item.index + 1].isHover) {
        this.swapArray(this.view, item.index, item.index + 2);
      } else {
        this.swapArray(this.view, item.index, item.index + 1);
      }
      this.$nextTick(() => {
        this.selectType(item);
      })
    },
    //数组元素互换位置
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      this.position()
      return arr;
    },
    // 提交
    submit() {
      console.log(this.view)
      this.checkSubmit()
      if (this.pass) {
        let posObj = {
          pic: this.pic,
          libraryExtend: {
            params: JSON.stringify(this.view)
          },
          title: this.viewTitle,
          rootCode: 'brochure'
        }
        if (this.id) {
          posObj.id = this.id
          posObj.libraryExtend.id = this.libraryExtendId
          service.put("/material/library", posObj).then((res) => {
            this.$message.success('编辑成功')
          }).catch(function () {

          });
        }else {
          if (this.bindId) {
            posObj.bindId = this.bindId
            posObj.bindType = this.bindType
          }
          service.post("/material/library", posObj).then((res) => {
            if (res.data.data.code)
              this.$message.success('提交成功')
          }).catch(function () {

          });
        }
      } else {

      }
    },
    // 校验
    checkSubmit() {
      let that = this
      that.pass = true
      if (this.view.length == 0) {
        that.pass = false
        return this.$message.error("请添加组件");
      }
      if (!this.pic || this.pic == '') {
        that.pass = false
        return this.$message.error("请上传封面");
      }
      if (!this.viewTitle || this.viewTitle == '') {
        that.pass = false
        return this.$message.error("请填写标题");
      }
      this.view.forEach(item => {
        if (!that.pass) return
        switch (item.key) {
          case 'banner':
            {
              item.value.imageList.forEach((src) => {
                if (!src.src || src.src == '') {
                  that.pass = false
                  this.selectType(item)
                  return this.$message.error("请选择banner图图片");
                }
              })
            }
            break;
          case 'images':
            {
              if (!item.value.src || item.value.src == '') {
                that.pass = false
                this.selectType(item)
                return this.$message.error("请选择图片");
              }
            }
            break;
          case 'text':
            {
              if (!item.value.content || item.value.content == '') {
                that.pass = false
                this.selectType(item)
                return this.$message.error("文本不能为空");
              }
            }
            break;
          case 'applicationForm':
            {
              if (item.value.title.isShow && (!item.value.title.value || item.value.title.value == '')) {
                that.pass = false
                this.selectType(item)
                return this.$message.error("已开启显示标题，标题不能为空");
              } else if (!item.value.database || item.value.database == '') {
                that.pass = false
                this.selectType(item)
                return this.$message.error("表单数据库名不能为空");
              } else if (!item.value.buttonName || item.value.buttonName == '') {
                that.pass = false
                this.selectType(item)
                return this.$message.error("表单按钮名称不能为空");
              } else if (item.value.formItemList) {
                item.value.formItemList.forEach(sitem => {
                  if (!that.pass) return
                  if (!sitem.label || sitem.label == '') {
                    that.pass = false
                    this.selectType(item)
                    return this.$message.error("表单字段名不能为空");
                  } else if (!sitem.databaseLabel || sitem.databaseLabel == '') {
                    that.pass = false
                    this.selectType(item)
                    return this.$message.error("表单数据库字段名不能为空");
                  } else if (sitem.type == 'select') {
                    if (!sitem.option) {
                      that.pass = false
                      this.selectType(item)
                      return this.$message.error("表单下拉框选项不能为空");
                    } else {
                      sitem.option.forEach(ssitem => {
                        if (!ssitem.label || ssitem.label == '') {
                          that.pass = false
                          this.selectType(item)
                          return this.$message.error("表单下拉框选项标签不能为空");
                        } else if (!ssitem.value || ssitem.value == '') {
                          that.pass = false
                          this.selectType(item)
                          return this.$message.error("表单下拉框选项值不能为空");
                        }
                      })
                    }
                  }
                })
              }
            }
            break;
          case 'customerService':
            {
              if (item.value.type == '') {
                that.pass = false
                this.selectType(item)
                return this.$message.error("请填写客服类型");
              } else if (item.value.type == 1) {
                if (!item.value.id || item.value.id == '') {
                  that.pass = false
                  this.selectType(item)
                  return this.$message.error("请填写企业ID");
                } else if (!item.value.target || item.value.target == '') {
                  that.pass = false
                  this.selectType(item)
                  return this.$message.error("请填写跳转地址");
                }
              } else if (item.value.type == 2) {
                if (!item.value.target || item.value.target == '') {
                  that.pass = false
                  this.selectType(item)
                  return this.$message.error("请填写跳转地址");
                }
              }
            }
            break;
          case 'product':
            {
              if (!item.value.productList || item.value.productList.length == 0) {
                that.pass = false
                this.selectType(item)
                return this.$message.error("请选择商品");
              }
            }
            break;
          default:
            break;

        }
      })
      return that.pass
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.header {
  display: flex;
  width: 100%;
  height: 44px;
  background-color: #fff;
  align-items: center;
  justify-content: flex-end;
}

.tplName {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex: 1;
}

.tplName input {
  width: 199px;
  font-size: 16px;
  outline: none;
  border: 0;
  border-bottom: 1px solid #ddd;
  height: 30px;
  background-color: #fff;
}

.button-group {
  margin-right: 15px;
  position: absolute;
}

.decoration-edit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 10px 0;
  background: #f7f8f9;
  height: calc(100vh - 70px);
  position: relative;
}

.decoration-edit .cover {
  padding: 10px 20px 10px 10px;
  height: 110px;
}

.decoration-edit .cover img {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.decoration-edit .updataBtn {
  padding: 0px 30px 10px 20px;
}

.decoration-edit .l,
.r {
  width: 380px;
  height: 100%;
  padding: 0 0 15px 0;
  background: #fff;
  overflow-y: auto;
}

.decoration-edit .l {
  width: 220px;
  margin-right: 160px;
}

.decoration-edit .l .title {
  position: relative;
  font-weight: bold;
  padding-left: 10px;
  margin-bottom: 20px;
}

.decoration-edit .l .title:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: #1890ff;
  opacity: 1;
  border-radius: 2px;
}

.nobackground {
  background: unset !important;
}

.decoration-edit .l::-webkit-scrollbar,
.r::-webkit-scrollbar {
  width: 6px;
}

.decoration-edit .l::-webkit-scrollbar-thumb,
.r::-webkit-scrollbar-thumb {
  background: #dbdbdb;
}

.decoration-edit .l::-webkit-scrollbar-track,
.r::-webkit-scrollbar-track {
  background: #f6f6f6;
}

.decoration-edit .l ul {
  margin: 0;
  padding: 0;
}

.decoration-edit ul li {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: default;
  list-style: none;
  font-size: 14px;
  color: #666;
  float: left;
  margin: 0 10px;
  border-radius: 6px;
  transition: all .3s;
  cursor: pointer;
}

.decoration-edit ul li:hover {
  background: #efefef;
}

.decoration-edit ul span {
  display: block;
  font-size: 40px;
  margin-bottom: 8px;
  color: #999;
}

.decoration-edit ul img {
  display: block;
  width: 50px;
  margin-bottom: 8px;
}

ul p {
  display: block;
  margin: 0;
  font-size: 12px;
}

.decoration-edit .c {
  width: auto;
  /* max-width: 400px; */
  max-width: 370px;
  position: relative;
  flex: 1;
}

.decoration-edit .c .top-nav {
  position: absolute;
  top: 0;
  background: #fff;
  z-index: 999;
  transition: all .3s;
}

.decoration-edit .c .top-nav * {
  pointer-events: none;
}

/* .decoration-edit .top-nav:hover {
  transform: scale(0.95);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px #afafaf;
} */

.decoration-edit .top-nav .tit {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 50%;
}

.decoration-edit .top-nav img {
  max-width: 100%;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

.decoration-edit .view-content {
  /* width: 400px; */
  /* height: 700px; */
  width: 370px;
  height: 560px;
  background: #f5f5f5;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 72px;
  box-shadow: 0 2px 6px #ccc;
}

.decoration-edit .view-content::-webkit-scrollbar {
  width: 6px;
}

.decoration-edit .view-content::-webkit-scrollbar-thumb {
  background: #dbdbdb;
}

.decoration-edit .view-content::-webkit-scrollbar-track {
  background: #f6f6f6;
}

.decoration-edit .view-content .item {
  transition: all .3s;
  background: #fff;

}

.decoration-edit .view-content .item:hover {
  transform: scale(0.95);
  border-radius: 10px;
  box-shadow: 0 0 10px #afafaf;
}

.decoration-edit .view-content .item:hover .el-icon-error {
  display: block;
}

.decoration-edit .view-content .item:hover .control-tool-bar {
  display: block;
}

.decoration-edit .view-content .item div {
  pointer-events: none;
}

.decoration-edit .view-content .item .wait {
  background: #deedff;
  height: 35px;
  text-align: center;
  line-height: 35px;
  font-size: 12px;
  color: #666;
}

.decoration-edit .view-content .item .el-icon-error {
  position: absolute;
  right: -10px;
  top: -6px;
  color: red;
  font-size: 25px;
  cursor: pointer;
  display: none;
  z-index: 9999;
}

.decoration-edit .view-content .item .control-tool-bar {
  position: absolute;
  top: 0;
  left: 50%;
  width: 66px;
  transform: translateX(-50%);
  z-index: 9998;
  pointer-events: unset;
  display: none;
}

.decoration-edit .view-content .item .control-tool-bar .ctrl-icon {
  width: 33px;
  height: 33px;
  margin-left: 0;
  margin-bottom: 2px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px 2px rgb(0 0 0 / 10%);
  box-shadow: 0 0 4px 2px rgb(0 0 0 / 10%);
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: 50%;
}

.decoration-edit .view-content .item .control-tool-bar .icon-up {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1ZjA2NzFlZS0yODUwLWMyNDMtYWQzNS00YzEzY2I2ZDFhZmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0VGMTU4N0Y3RTJEMTFFQTgwMUNFQjgwRkEwOUFENzkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0VGMTU4N0U3RTJEMTFFQTgwMUNFQjgwRkEwOUFENzkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBNUJFQTg0MTdENkUxMUVBODc0MkE4MTAxQTY0ODkxQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBNUJFQTg0MjdENkUxMUVBODc0MkE4MTAxQTY0ODkxQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psjmc8UAAADNSURBVHjaYvz//z8DLQATA43AwBtcV1c3B4hNiVXPSEwYAw2cBKRygfg1EMs3NTV9p9jFQEMroIaCgCgQH6U4KICGFgCpdjRhQ6D4cbKDAqg5CEitxaN3PTBIgkhyMdBQCwKGgkAgUN0Eog0GKo4CUseJjPx8oPo12CRYsIgJAfFeIP4AxFxA7IlFzRUgvg7EnGQnN6CLsClIBYbvHEpShSQOKQFK0zEzuel/GBdC1DaYBYc4DwOZGmHgMxC/A2JWNPGHVCk2R0bkAQQYAEdHPS1kdX1UAAAAAElFTkSuQmCC);
}

.decoration-edit .view-content .item .control-tool-bar .icon-up.is-disabled,
.decoration-edit .view-content .item .control-tool-bar .icon-up.is-disabled:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1ZjA2NzFlZS0yODUwLWMyNDMtYWQzNS00YzEzY2I2ZDFhZmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTVCRUE4NDI3RDZFMTFFQTg3NDJBODEwMUE2NDg5MUIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTVCRUE4NDE3RDZFMTFFQTg3NDJBODEwMUE2NDg5MUIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4YWNlODEyNi1kZWFkLTQzNDYtOGRhOC00MmFlMDYxMmI0ZGYiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiMzgxMjliYS02OTNiLTJmNDgtOThhZS1mYzkxMGE4ZGYzZTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5lL4zAAAAAzUlEQVR42mL8//8/Ay0AEwONwMAb/Pz58zlAbEqsekZiwhho4CQglQvEr4FYXlJS8jvFLgYaWgE1FAREgfgoxUEBNLQASLWjCRsCxY+THRRAzUFAai0eveuBQRJEkouBhloQMBQEAoHqJhBtMFBxFJA6TmTk5wPVr8EmwYJFTAiI9wLxByDmAmJPLGquAPF1IOYkO7kBXYRNQSowfOdQkiokcUgJUJqOmclN/8O4EKK2wSw4xHkYyNQIA5+B+B0Qs6KJP6RKsTkyIg8gwABPpUl7JDE4ewAAAABJRU5ErkJggg==);
}

.decoration-edit .view-content .item .control-tool-bar .icon-down {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1ZjA2NzFlZS0yODUwLWMyNDMtYWQzNS00YzEzY2I2ZDFhZmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTNBRUJGODk3RTJGMTFFQUI4NkRDMzY1NkIyMzY1M0EiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTNBRUJGODg3RTJGMTFFQUI4NkRDMzY1NkIyMzY1M0EiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCOEQyMTUwMTdENkUxMUVBODc0MkE4MTAxQTY0ODkxQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCOEQyMTUwMjdENkUxMUVBODc0MkE4MTAxQTY0ODkxQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqOiNT4AAADgSURBVHjaYvz//z8DLQATA40ACyEFdXV10kCqHYiFoULfgbirqanpFEUGA0ELEMeiiRkDsSKlQcFOqzD+QaQYfSJveBr8F4vYf2oY/J8cgxmxZWlgprgDTeO/gFgciPnQlIDEH0EdxgXMLJLEungrEMsDsSoWQ0GADYhVgFgJiK8QHRRAF+QDqQ4igukQUK0r0UGBFCTLgFQkDunzQEONyIo8oMYoILUPi9Q7ILYiOfKwuPw8kDJAKt20gJY+oEYGsUVimxIylGgXQ11tCqTkgIauJUY945CrmmhmMECAAQCTB0MOORfSxwAAAABJRU5ErkJggg==);
}

.decoration-edit .view-content .item .control-tool-bar .icon-down.is-disabled,
.decoration-edit .view-content .item .control-tool-bar .icon-down.is-disabled:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1ZjA2NzFlZS0yODUwLWMyNDMtYWQzNS00YzEzY2I2ZDFhZmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTExNDM5QjQ3RTJFMTFFQTlFQjdEMTA2RjhFQzc3QTAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTExNDM5QjM3RTJFMTFFQTlFQjdEMTA2RjhFQzc3QTAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCOEQyMTUwMTdENkUxMUVBODc0MkE4MTAxQTY0ODkxQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCOEQyMTUwMjdENkUxMUVBODc0MkE4MTAxQTY0ODkxQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Poa9sGQAAADjSURBVHjaYvz//z8DLQATA40ACyEFz58/lwZS7UAsDBX6DsRdkpKSpygyGAhagDgWTcwYiBUpDQp2WoXxDyLF6BN5w9Pgv1jE/lPD4P/kGMyILUsDM8UdaBr/BcTiQMyHpgQk/gjqMC5gZpEk1sVbgVgeiFWxGAoCbECsAsRKQHyF6KAAOiAfSHUQEUyHgGpdiQ4KpCBZBqQicUifBxpqRFbkATVGAal9WKTeAbEVRakCaLgzkLqAJAQq3YyB4j+okUFskdimQEMfkJXccIS3KZCSAxq6lhj1jEOuaqKZwQABBgC4Mzjx6VYCZQAAAABJRU5ErkJggg==);
}

.decoration-edit .view-content .item .control-tool-bar .ctrl-icon.is-disabled {
  background-color: #fff;
}

.decoration-edit .submit-btn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

/* 悬浮组件 */
.left-top {
  position: absolute;
  top: 100px;
  left: 20px;
  z-index: 200;
}

.right-bottom {
  position: absolute;
  bottom: 50px;
  right: 20px;
  z-index: 200;
}
</style>