{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\setting\\devise\\diyIndex.vue?vue&type=style&index=0&id=4e7a5c98&lang=css","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\setting\\devise\\diyIndex.vue","mtime":1761614939052},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQouZWwtbWFpbiB7DQogIHBhZGRpbmc6IDBweCAhaW1wb3J0YW50Ow0KfQ0K"},{"version":3,"sources":["diyIndex.vue"],"names":[],"mappings":";AAq/BA;AACA;AACA","file":"diyIndex.vue","sourceRoot":"src/pages/setting/devise","sourcesContent":["<template>\r\n  <!-- 添加主题-首页装修 -->\r\n  <div class=\"diy-page\">\r\n    <div class=\"i-layout-page-header header-title\">\r\n      <div class=\"fl_header\">\r\n        <!-- <span class=\"ivu-page-header-title mr20\" style=\"padding: 0\" v-text=\"$route.meta.title\"></span> -->\r\n        <div class=\"f-title acea-row row-middle\">\r\n          <div class=\"acea-row row-middle cup\" @click=\"returnTap\">\r\n            <div class=\"iconfont iconfanhui\"></div>\r\n            <div class=\"return\">返回</div>\r\n          </div>\r\n          <div class=\"mr20\">\r\n            <span class=\"name mr5\">当前页面：{{ nameTxt || '模板' }}</span>\r\n            <el-popover v-model=\"visible\" width=\"347\">\r\n              <span slot=\"reference\" class=\"iconfont iconzidingyicaidan cup\"></span>\r\n              <template>\r\n                <div class=\"flex\">\r\n                  <el-input\r\n                    v-model=\"nameTxt\"\r\n                    placeholder=\"必填不超过15个字\"\r\n                    maxlength=\"15\"\r\n                    style=\"width: 200px\"\r\n                  ></el-input>\r\n                  <el-button type=\"text\" @click=\"cancel\">取消</el-button>\r\n                  <el-button type=\"primary\" @click=\"determine\">确定</el-button>\r\n                </div>\r\n              </template>\r\n            </el-popover>\r\n          </div>\r\n        </div>\r\n        <div class=\"rbtn\">\r\n          <!-- <el-button class=\"ml20 header-btn look\" v-db-click @click=\"exportView\" :loading=\"loading\">导出</el-button>\r\n          <el-button class=\"ml20 header-btn look\" v-db-click @click=\"importView\" :loading=\"loading\">导入</el-button> -->\r\n          <el-button class=\"ml20 header-btn look\" v-db-click @click=\"preview\" :loading=\"loading\">预览</el-button>\r\n          <el-button class=\"ml20 header-btn close\" v-db-click @click=\"saveConfig(1)\" :loading=\"loading\">保存</el-button>\r\n          <el-button class=\"ml20 header-btn save\" v-db-click @click=\"saveConfig(2)\" :loading=\"loading\"\r\n            >保存并关闭</el-button\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <el-card :bordered=\"false\" shadow=\"never\">\r\n      <div class=\"diy-wrapper\" :style=\"'height:' + clientHeight + 'px;'\">\r\n        <!-- 左侧 -->\r\n        <div class=\"left\">\r\n          <div class=\"wrapper\" :style=\"'height:' + clientHeight + 'px;'\">\r\n            <div class=\"list\" v-for=\"(item, index) in leftMenu\" :key=\"index\">\r\n              <div class=\"tips\" @click=\"item.isOpen = !item.isOpen\">\r\n                {{ item.title }}\r\n                <div class=\"iconfont iconyou\" v-if=\"!item.isOpen\"></div>\r\n                <div class=\"iconfont iconxia\" v-else></div>\r\n              </div>\r\n              <!-- 拖拽组件 -->\r\n              <draggable\r\n                class=\"dragArea list-group\"\r\n                :list=\"item.list\"\r\n                :group=\"{ name: 'people', pull: 'clone', put: false }\"\r\n                :clone=\"cloneDog\"\r\n                dragClass=\"dragClass\"\r\n                filter=\".search , .navbar , .homeComb , .service\"\r\n              >\r\n                <div\r\n                  class=\"list-group-item\"\r\n                  :class=\"{\r\n                    search: element.cname == '搜索框',\r\n                    navbar: element.cname == '选项卡',\r\n                    homeComb: element.cname == '轮播搜索',\r\n                    service: element.cname == '悬浮按钮',\r\n                  }\"\r\n                  v-for=\"(element, index) in item.list\"\r\n                  :key=\"element.id\"\r\n                  @click=\"addDom(element, 1)\"\r\n                  v-show=\"item.isOpen\"\r\n                >\r\n                  <div>\r\n                    <div class=\"position\" style=\"display: none\">释放鼠标将组建添加到此处</div>\r\n                    <svg class=\"conter iconfont-diy icon svg-icon\" aria-hidden=\"true\">\r\n                      <use :xlink:href=\"element.icon\"></use>\r\n                    </svg>\r\n                    <p class=\"conter\">{{ element.cname }}</p>\r\n                  </div>\r\n                </div>\r\n              </draggable>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- 中间自定义配置移动端页面 -->\r\n        <div class=\"wrapper-con\">\r\n          <div class=\"content\">\r\n            <div class=\"contxt\">\r\n              <div class=\"overflowy\">\r\n                <div class=\"picture\"><img src=\"@/assets/images/electric.png\" /></div>\r\n                <div class=\"page-title\" :class=\"{ on: activeIndex == -100 }\" @click=\"showTitle\">\r\n                  {{ titleTxt }}\r\n                  <div class=\"delete-box\"></div>\r\n                  <div class=\"handle\"></div>\r\n                </div>\r\n              </div>\r\n              <div class=\"scrollCon\" :style=\"'height:' + rollHeight + 'px;'\">\r\n                <div style=\"width: 460px; margin: 0 auto\">\r\n                  <div\r\n                    class=\"scroll-box\"\r\n                    :class=\"\r\n                      picTxt && tabValTxt == 2\r\n                        ? 'fullsize noRepeat'\r\n                        : picTxt && tabValTxt == 1\r\n                        ? 'repeat ysize'\r\n                        : 'noRepeat ysize'\r\n                    \"\r\n                    :style=\"\r\n                      'background-color:' +\r\n                      (colorTxt ? colorPickerTxt : '') +\r\n                      ';background-image: url(' +\r\n                      (picTxt ? picUrlTxt : '') +\r\n                      ');min-height:' +\r\n                      rollHeight +\r\n                      'px;'\r\n                    \"\r\n                    ref=\"imgContainer\"\r\n                  >\r\n                    <draggable\r\n                      class=\"dragArea list-group\"\r\n                      :list=\"mConfig\"\r\n                      group=\"people\"\r\n                      @change=\"log\"\r\n                      filter=\".top\"\r\n                      :move=\"onMove\"\r\n                      animation=\"300\"\r\n                    >\r\n                      <div\r\n                        class=\"mConfig-item\"\r\n                        :class=\"{\r\n                          on: activeIndex == key,\r\n                          top: item.name == 'search_box' || item.name == 'nav_bar',\r\n                          hide: defaultArrays[item.num].isHide,\r\n                        }\"\r\n                        v-for=\"(item, key) in mConfig\"\r\n                        :key=\"key\"\r\n                        @click.stop=\"bindconfig(item, key)\"\r\n                        :style=\"colorTxt ? 'background-color:' + colorPickerTxt + ';' : 'background-color:#fff;'\"\r\n                      >\r\n                        <component\r\n                          :is=\"item.name\"\r\n                          ref=\"getComponentData\"\r\n                          :configData=\"propsObj\"\r\n                          :index=\"key\"\r\n                          :num=\"item.num\"\r\n                          :colorStyle=\"colorStyle\"\r\n                        ></component>\r\n                        <div class=\"delete-box\">\r\n                          <div class=\"handleType\">\r\n                            <div\r\n                              class=\"iconfont\"\r\n                              :class=\"defaultArrays[item.num].isHide ? 'iconyincang' : 'iconxianshi'\"\r\n                              @click.stop=\"bindHide(item)\"\r\n                            ></div>\r\n                            <div class=\"iconfont iconshanchu3\" @click.stop=\"bindDelete(item, key)\"></div>\r\n                            <div class=\"iconfont icona-fuzhi1\" @click.stop=\"bindAddDom(item, 0, key)\"></div>\r\n                            <div\r\n                              class=\"iconfont iconshang\"\r\n                              :class=\"key === 0 ? 'on' : ''\"\r\n                              @click.stop=\"movePage(item, key, 1)\"\r\n                            ></div>\r\n                            <div\r\n                              class=\"iconfont iconxia\"\r\n                              :class=\"key === mConfig.length - 1 ? 'on' : ''\"\r\n                              @click.stop=\"movePage(item, key, 0)\"\r\n                            ></div>\r\n                          </div>\r\n                        </div>\r\n                        <div class=\"handle\"></div>\r\n                        <div class=\"delete-name\" :class=\"{ on: activeIndex == key }\">{{ item.cname }}</div>\r\n                      </div>\r\n                    </draggable>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"overflowy\">\r\n                <div\r\n                  class=\"page-foot\"\r\n                  @click=\"showFoot\"\r\n                  :class=\"{ on: activeIndex == -101 }\"\r\n                  :style=\"pageFooterType == 1 ? 'bottom:' + (50 + pageFooterBottom) + 'px' : ''\"\r\n                >\r\n                  <footPage></footPage>\r\n                  <div class=\"delete-box\"></div>\r\n                  <div class=\"handle\"></div>\r\n                </div>\r\n              </div>\r\n              <div class=\"defaultData\" v-if=\"pageId !== 0\">\r\n                <!-- <div class=\"data\" @click=\"setmoren\">设置默认</div>\r\n                                  <div class=\"data\" @click=\"getmoren\">恢复默认</div> -->\r\n                <el-button class=\"data\" @click=\"showTitle\">页面设置</el-button>\r\n                <el-button class=\"data\" @click=\"nameModal = true\">另存模板</el-button>\r\n                <el-button class=\"data\" @click=\"reast\">重置</el-button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- 右侧页面设置 -->\r\n        <div class=\"right-box\">\r\n          <div class=\"mConfig-item\" style=\"background-color: #fff\" v-for=\"(item, key) in rConfig\" :key=\"key\">\r\n            <!-- <div class=\"title-bar\">{{ item.cname }}</div> -->\r\n            <component\r\n              :is=\"item.configName\"\r\n              @config=\"config\"\r\n              :activeIndex=\"activeIndex\"\r\n              :num=\"item.num\"\r\n              :index=\"key\"\r\n            ></component>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </el-card>\r\n    <el-dialog :visible.sync=\"modal\" width=\"540px\" title=\"预览\">\r\n      <div>\r\n        <div v-viewer class=\"acea-row row-around code\">\r\n          <div class=\"acea-row row-column-around row-between-wrapper\">\r\n            <div class=\"QRpic\" ref=\"qrCodeUrl\"></div>\r\n            <span class=\"mt10\">公众号二维码</span>\r\n          </div>\r\n          <div class=\"acea-row row-column-around row-between-wrapper\">\r\n            <div class=\"QRpic\">\r\n              <img v-lazy=\"qrcodeImg\" />\r\n            </div>\r\n            <span class=\"mt10\">小程序二维码</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </el-dialog>\r\n    <el-dialog :visible.sync=\"nameModal\" width=\"470px\" title=\"设置模版名称\" :show-close=\"true\">\r\n      <el-input v-model=\"saveName\" placeholder=\"请输入模版名称\"></el-input>\r\n      <span slot=\"footer\" class=\"dialog-footer\">\r\n        <el-button v-db-click @click=\"nameModal = false\">取 消</el-button>\r\n        <el-button type=\"primary\" v-db-click @click=\"saveModal\">确 定</el-button>\r\n      </span>\r\n    </el-dialog>\r\n    <!--<div class=\"foot-box\">-->\r\n    <!--<Button @click=\"reast\">重置</Button>-->\r\n    <!--<Button type=\"primary\" @click=\"saveConfig\" :loading=\"loading\"-->\r\n    <!--&gt;保存-->\r\n    <!--</Button-->\r\n    <!--&gt;-->\r\n    <!--</div>-->\r\n  </div>\r\n</template>\r\n\r\n<script crossorigin=\"anonymous\">\r\nimport { categoryList, diyProInfo, diyProSave, setDefault, recovery, diyUpdateName, getRoutineCode } from '@/api/diy';\r\nimport vuedraggable from 'vuedraggable';\r\nimport mPage from '@/components/mobilePage/index.js';\r\nimport mConfig from '@/components/mobileConfig/index.js';\r\nimport footPage from '@/components/pagesFoot';\r\nimport { mapState } from 'vuex';\r\nimport html2canvas from 'html2canvas';\r\nimport theme from '@/mixins/theme';\r\nimport Setting from '@/setting';\r\nimport QRCode from 'qrcodejs2';\r\n\r\nexport default {\r\n  inject: ['reload'],\r\n  name: 'index.vue',\r\n  components: {\r\n    footPage,\r\n    html2canvas,\r\n    draggable: vuedraggable,\r\n    ...mPage,\r\n    ...mConfig,\r\n  },\r\n  filters: {\r\n    filterTxt(val) {\r\n      if (val) {\r\n        return (val = val.substr(0, val.length - 1));\r\n      }\r\n    },\r\n  },\r\n  computed: {\r\n    ...mapState({\r\n      titleTxt: (state) => state.mobildConfig.pageTitle || '首页',\r\n      showTxt: (state) => state.mobildConfig.pageShow,\r\n      colorTxt: (state) => state.mobildConfig.pageColor,\r\n      picTxt: (state) => state.mobildConfig.pagePic,\r\n      colorPickerTxt: (state) => state.mobildConfig.pageColorPicker,\r\n      tabValTxt: (state) => state.mobildConfig.pageTabVal,\r\n      picUrlTxt: (state) => state.mobildConfig.pagePicUrl,\r\n      pageFooterType: (state) => state.mobildConfig.pageFooter.navConfig.tabVal || 0,\r\n      pageFooterBottom: (state) => state.mobildConfig.pageFooter.mbConfig.val,\r\n      defaultArrays: (state) => state.mobildConfig.defaultArray,\r\n    }),\r\n    nameTxt: {\r\n      get() {\r\n        return this.$store.state.mobildConfig.pageName;\r\n      },\r\n      set(value) {\r\n        this.$store.commit('mobildConfig/UPNAME', value);\r\n      },\r\n    },\r\n  },\r\n  mixins: [theme],\r\n  data() {\r\n    return {\r\n      BaseURL: Setting.apiBaseURL.replace(/adminapi/, ''),\r\n      qrcodeImg: '',\r\n      modal: false,\r\n      clientHeight: '', //页面动态高度\r\n      rollHeight: '',\r\n      leftMenu: [], // 左侧菜单\r\n      lConfig: [], // 左侧组件\r\n      mConfig: [], // 中间组件渲染\r\n      rConfig: [], // 右侧组件配置\r\n      activeConfigName: '',\r\n      propsObj: {}, // 组件传递的数据,\r\n      activeIndex: -100, // 选中的下标\r\n      number: 0,\r\n      pageId: '',\r\n      pageName: '',\r\n      pageType: '',\r\n      category: [],\r\n      tabList: [\r\n        {\r\n          title: '组件库',\r\n          key: 0,\r\n        },\r\n        {\r\n          title: '页面链接',\r\n          key: 1,\r\n        },\r\n      ],\r\n      footActive: false,\r\n      loading: false,\r\n      relLoading: false,\r\n      isSearch: false,\r\n      isTab: false,\r\n      isFllow: false,\r\n      isComb: false,\r\n      isService: false,\r\n      visible: true,\r\n      diyStatus: 0,\r\n      nameModal: false,\r\n      saveName: '',\r\n    };\r\n  },\r\n  created() {\r\n    this.categoryList();\r\n    this.pageId = this.$route.query.id;\r\n    this.pageName = this.$route.query.name;\r\n    this.pageType = this.$route.query.type;\r\n    this.lConfig = this.objToArr(mPage);\r\n    let imgList = {\r\n      imgList: [require('@/assets/images/foot-005.png'), require('@/assets/images/foot-006.png')],\r\n      name: '购物车',\r\n      link: '/pages/order_addcart/order_addcart',\r\n    };\r\n    this.$nextTick(() => {\r\n      this.$store.commit('mobildConfig/FOOTER', { title: '是否自定义', name: imgList });\r\n      this.arraySort();\r\n      if (this.pageId != 0) {\r\n        this.getDefaultConfig();\r\n      } else {\r\n        this.showTitle();\r\n      }\r\n      this.clientHeight = `${document.documentElement.clientHeight}` - 65.81; //获取浏览器可视区域高度\r\n      let H = `${document.documentElement.clientHeight}` - 180;\r\n      this.rollHeight = H > 650 ? 650 : H;\r\n      let that = this;\r\n      window.onresize = function () {\r\n        that.clientHeight = `${document.documentElement.clientHeight}` - 65.81;\r\n        let H = `${document.documentElement.clientHeight}` - 180;\r\n        that.rollHeight = H > 650 ? 650 : H;\r\n      };\r\n    });\r\n  },\r\n  methods: {\r\n    exportView() {\r\n      let that = this;\r\n      this.loading = true;\r\n      this.$nextTick(() => {\r\n        console.log(this.mConfig);\r\n      });\r\n    },\r\n    importView() {},\r\n    preview() {\r\n      this.modal = true;\r\n      this.creatQrCode(this.pageId, this.diyStatus);\r\n      this.routineCode(this.pageId);\r\n    },\r\n    //小程序二维码\r\n    routineCode(id) {\r\n      getRoutineCode(id)\r\n        .then((res) => {\r\n          this.qrcodeImg = res.data.image;\r\n        })\r\n        .catch((err) => {\r\n          this.$message.error(err);\r\n        });\r\n    },\r\n    //生成二维码\r\n    creatQrCode(id, status) {\r\n      this.$refs.qrCodeUrl.innerHTML = '';\r\n      let url = '';\r\n      if (status) {\r\n        url = `${this.BaseURL}pages/index/index`;\r\n      } else {\r\n        url = `${this.BaseURL}pages/annex/special/index?id=${id}`;\r\n      }\r\n      var qrcode = new QRCode(this.$refs.qrCodeUrl, {\r\n        text: url, // 需要转换为二维码的内容\r\n        width: 160,\r\n        height: 160,\r\n        colorDark: '#000000',\r\n        colorLight: '#ffffff',\r\n        correctLevel: QRCode.CorrectLevel.H,\r\n      });\r\n    },\r\n    changName(val) {\r\n      this.$store.commit('mobildConfig/UPNAME', val);\r\n    },\r\n    cancel() {\r\n      this.visible = false;\r\n    },\r\n    determine() {\r\n      if (this.nameTxt.trim() == '') {\r\n        return this.$message.error('请输入模板名称');\r\n      }\r\n      if (this.pageId == 0) {\r\n        this.$message.success('修改成功');\r\n        return false;\r\n      }\r\n      diyUpdateName(this.pageId, { name: this.nameTxt })\r\n        .then((res) => {\r\n          this.visible = false;\r\n          this.$message.success(res.msg);\r\n        })\r\n        .catch((err) => {\r\n          this.$message.error(err.msg);\r\n        });\r\n      this.visible = false;\r\n    },\r\n    returnTap() {\r\n      this.$msgbox({\r\n        title: '温馨提示',\r\n        message: '确定离开此页面？系统可能不会保存您所做的更改。',\r\n        showCancelButton: true,\r\n        cancelButtonText: '取消',\r\n        confirmButtonText: '确定',\r\n        iconClass: 'el-icon-warning',\r\n        confirmButtonClass: 'btn-custom-cancel',\r\n      })\r\n        .then(() => {\r\n          this.$router.push(this.$routeProStr + '/setting/pages/devise/0');\r\n        })\r\n        .catch(() => {});\r\n    },\r\n    leftRemove({ to, from, item, clone, oldIndex, newIndex }) {\r\n      if (this.isSearch && newIndex == 0) {\r\n        if (item._underlying_vm_.name == 'z_wechat_attention') {\r\n          this.isFllow = true;\r\n        } else {\r\n          this.$store.commit('mobildConfig/ARRAYREAST', this.mConfig[0].num);\r\n          this.mConfig.splice(0, 1);\r\n        }\r\n      }\r\n      if ((this.isFllow = true && newIndex >= 1)) {\r\n        this.$store.commit('mobildConfig/ARRAYREAST', this.mConfig[0].num);\r\n      }\r\n    },\r\n    onMove(e) {\r\n      if (e.relatedContext.element.name == 'search_box') return false;\r\n      if (e.relatedContext.element.name == 'nav_bar') return false;\r\n      if (e.relatedContext.element.name == 'home_comb') return false;\r\n      return true;\r\n    },\r\n    onCopy() {\r\n      this.$message.success('复制成功');\r\n    },\r\n    onError() {\r\n      this.$message.error('复制失败');\r\n    },\r\n    //设置默认数据\r\n    setmoren() {\r\n      setDefault(this.pageId)\r\n        .then((res) => {\r\n          this.$message.success(res.msg);\r\n        })\r\n        .catch((err) => {\r\n          this.$message.error(err.msg);\r\n        });\r\n    },\r\n    //恢复默认\r\n    getmoren() {\r\n      recovery(this.pageId)\r\n        .then((res) => {\r\n          this.$message.success(res.msg);\r\n          this.reload();\r\n        })\r\n        .catch((err) => {\r\n          this.$message.error(err.msg);\r\n        });\r\n    },\r\n    // 页面标题点击\r\n    showTitle() {\r\n      this.activeIndex = -100;\r\n      let obj = {};\r\n      for (var i in mConfig) {\r\n        if (i == 'pageTitle') {\r\n          // this.rConfig = obj\r\n          obj = mConfig[i];\r\n          obj.configName = mConfig[i].name;\r\n          obj.cname = '页面设置';\r\n        }\r\n      }\r\n      let abc = obj;\r\n      this.rConfig = [];\r\n      this.rConfig[0] = JSON.parse(JSON.stringify(obj));\r\n    },\r\n    // 页面底部点击\r\n    showFoot() {\r\n      this.activeIndex = -101;\r\n      let obj = {};\r\n      for (var i in mConfig) {\r\n        if (i == 'pageFoot') {\r\n          // this.rConfig = obj\r\n          obj = mConfig[i];\r\n          obj.configName = mConfig[i].name;\r\n          obj.cname = '底部菜单';\r\n        }\r\n      }\r\n      let abc = obj;\r\n      this.rConfig = [];\r\n      this.rConfig[0] = JSON.parse(JSON.stringify(obj));\r\n    },\r\n    // 对象转数组\r\n    objToArr(data) {\r\n      let obj = Object.keys(data);\r\n      let m = obj.map((key) => data[key]);\r\n      return m;\r\n    },\r\n    log(evt) {\r\n      // 中间拖拽排序\r\n      if (evt.moved) {\r\n        if (evt.moved.element.name == 'search_box') {\r\n          return this.$message.warning('该组件禁止拖拽');\r\n        }\r\n        // if (evt.moved.element.name == \"nav_bar\") {\r\n        //     return this.$message.warning(\"该组件禁止拖拽\");\r\n        // }\r\n        evt.moved.oldNum = this.mConfig[evt.moved.oldIndex].num;\r\n        evt.moved.newNum = this.mConfig[evt.moved.newIndex].num;\r\n        evt.moved.status = evt.moved.oldIndex > evt.moved.newIndex;\r\n        this.mConfig.forEach((el, index) => {\r\n          el.num = new Date().getTime() * 1000 + index;\r\n        });\r\n        evt.moved.list = this.mConfig;\r\n        this.rConfig = [];\r\n        let item = evt.moved.element;\r\n        let tempItem = JSON.parse(JSON.stringify(item));\r\n        this.rConfig.push(tempItem);\r\n        this.activeIndex = evt.moved.newIndex;\r\n        this.$store.commit('mobildConfig/SETCONFIGNAME', item.name);\r\n        this.$store.commit('mobildConfig/defaultArraySort', evt.moved);\r\n      }\r\n      // 从左向右拖拽排序\r\n      if (evt.added) {\r\n        let data = evt.added.element;\r\n        let obj = {};\r\n        let timestamp = new Date().getTime() * 1000;\r\n        data.num = timestamp;\r\n        this.activeConfigName = data.name;\r\n        let tempItem = JSON.parse(JSON.stringify(data));\r\n        tempItem.id = 'id' + tempItem.num;\r\n        this.mConfig[evt.added.newIndex] = tempItem;\r\n        this.rConfig = [];\r\n        this.rConfig.push(tempItem);\r\n        this.mConfig.forEach((el, index) => {\r\n          el.num = new Date().getTime() * 1000 + index;\r\n        });\r\n        evt.added.list = this.mConfig;\r\n        this.activeIndex = evt.added.newIndex;\r\n        // 保存组件名称\r\n        this.$store.commit('mobildConfig/SETCONFIGNAME', data.name);\r\n        this.$store.commit('mobildConfig/defaultArraySort', evt.added);\r\n      }\r\n    },\r\n    cloneDog(data) {\r\n      // this.mConfig.push(tempItem)\r\n      return {\r\n        ...data,\r\n      };\r\n    },\r\n    //数组元素互换位置\r\n    swapArray(arr, index1, index2) {\r\n      arr[index1] = arr.splice(index2, 1, arr[index1])[0];\r\n      return arr;\r\n    },\r\n    //点击上下移动；\r\n    movePage(item, index, type) {\r\n      if (type) {\r\n        if (index == 0) {\r\n          return;\r\n        }\r\n      } else {\r\n        if (index == this.mConfig.length - 1) {\r\n          return;\r\n        }\r\n      }\r\n      if (item.name == 'search_box' || item.name == 'nav_bar' || item.name == 'home_comb') {\r\n        return this.$message.warning('该组件禁止移动');\r\n      }\r\n      if (type) {\r\n        if (\r\n          this.mConfig[index - 1].name == 'search_box' ||\r\n          this.mConfig[index - 1].name == 'nav_bar' ||\r\n          this.mConfig[index - 1].name == 'home_comb'\r\n        ) {\r\n          return this.$message.warning('搜索框或选项卡或轮播搜索必须为顶部');\r\n        }\r\n        this.swapArray(this.mConfig, index - 1, index);\r\n      } else {\r\n        this.swapArray(this.mConfig, index, index + 1);\r\n      }\r\n      let obj = {};\r\n      this.rConfig = [];\r\n      obj.oldIndex = index;\r\n      if (type) {\r\n        obj.newIndex = index - 1;\r\n      } else {\r\n        obj.newIndex = index + 1;\r\n      }\r\n      this.mConfig.forEach((el, index) => {\r\n        el.num = new Date().getTime() * 1000 + index;\r\n      });\r\n      let tempItem = JSON.parse(JSON.stringify(item));\r\n      this.rConfig.push(tempItem);\r\n      obj.element = item;\r\n      obj.list = this.mConfig;\r\n      if (type) {\r\n        this.activeIndex = index - 1;\r\n      } else {\r\n        this.activeIndex = index + 1;\r\n      }\r\n\r\n      this.$store.commit('mobildConfig/SETCONFIGNAME', item.name);\r\n      this.$store.commit('mobildConfig/defaultArraySort', obj);\r\n    },\r\n    // 组件添加\r\n    addDomCon(item, type, index) {\r\n      if (item.name == 'search_box') {\r\n        if (this.isSearch) return this.$message.error('该组件只能添加一次');\r\n        if (this.isComb) return this.$message.error('轮播搜索不能和搜索组件与选项卡组件同时存在');\r\n        this.isSearch = true;\r\n      }\r\n      if (item.name == 'nav_bar') {\r\n        if (this.isTab) return this.$message.error('该组件只能添加一次');\r\n        if (this.isComb) return this.$message.error('轮播搜索不能和搜索组件与选项卡组件同时存在');\r\n        this.isTab = true;\r\n      }\r\n      if (item.name == 'home_comb') {\r\n        if (this.isComb) return this.$message.error('该组件只能添加一次');\r\n        if (this.isSearch || this.isTab) return this.$message.error('轮播搜索不能和搜索组件与选项卡组件同时存在');\r\n        this.isComb = true;\r\n      }\r\n      if (item.name == 'home_service') {\r\n        if (this.isService) return this.$message.error('该组件只能添加一次');\r\n        this.isService = true;\r\n      }\r\n      let obj = {};\r\n      let timestamp = new Date().getTime() * 1000;\r\n      item.num = `${timestamp}`;\r\n      item.id = `id${timestamp}`;\r\n      this.activeConfigName = item.name;\r\n      let tempItem = JSON.parse(JSON.stringify(item));\r\n      if (item.name == 'home_comb') {\r\n        this.rConfig = [];\r\n        this.mConfig.unshift(tempItem);\r\n        this.activeIndex = 0;\r\n        this.rConfig.push(tempItem);\r\n      } else if (item.name == 'search_box') {\r\n        this.rConfig = [];\r\n        this.mConfig.unshift(tempItem);\r\n        this.activeIndex = 0;\r\n        this.rConfig.push(tempItem);\r\n      } else if (item.name == 'nav_bar') {\r\n        this.rConfig = [];\r\n        if (this.mConfig[0] && this.mConfig[0].name === 'search_box') {\r\n          this.mConfig.splice(1, 0, tempItem);\r\n          this.activeIndex = 1;\r\n        } else {\r\n          this.mConfig.splice(0, 0, tempItem);\r\n          this.activeIndex = 0;\r\n        }\r\n        this.rConfig.push(tempItem);\r\n      } else {\r\n        if (type) {\r\n          this.rConfig = [];\r\n          if (this.activeIndex == 0 && this.mConfig[1] && this.mConfig[1].name == 'nav_bar') {\r\n            this.activeIndex = 2;\r\n          } else {\r\n            this.activeIndex = this.activeIndex >= 0 ? this.activeIndex + 1 : this.mConfig.length;\r\n          }\r\n          this.mConfig.splice(this.activeIndex, 0, tempItem);\r\n          this.rConfig.push(tempItem);\r\n        } else {\r\n          this.mConfig.splice(index + 1, 0, tempItem);\r\n          this.activeIndex = index;\r\n        }\r\n      }\r\n      this.mConfig.forEach((el, index) => {\r\n        el.num = new Date().getTime() * 1000 + index;\r\n      });\r\n      // 保存组件名称\r\n      obj.element = item;\r\n      obj.list = this.mConfig;\r\n      this.$store.commit('mobildConfig/SETCONFIGNAME', item.name);\r\n      this.$store.commit('mobildConfig/defaultArraySort', obj);\r\n    },\r\n    //中间页点击添加模块；\r\n    bindAddDom(item, type, index) {\r\n      let i = item;\r\n      this.lConfig.forEach((j) => {\r\n        if (item.name == j.name) {\r\n          i = j;\r\n        }\r\n      });\r\n      this.addDomCon(i, type, index);\r\n    },\r\n    //左边配置模块点击添加；\r\n    addDom(item, type) {\r\n      this.addDomCon(item, type);\r\n    },\r\n    // 点击显示相应的配置\r\n    bindconfig(item, index) {\r\n      this.rConfig = [];\r\n      let tempItem = JSON.parse(JSON.stringify(item));\r\n      this.rConfig.push(tempItem);\r\n      this.activeIndex = index;\r\n      this.$store.commit('mobildConfig/SETCONFIGNAME', item.name);\r\n    },\r\n    bindHide(item) {\r\n      let obj = this.$store.state.mobildConfig.defaultArray;\r\n      let num = this.rConfig[0].num;\r\n      obj[num].isHide = !obj[num].isHide;\r\n      this.$store.commit('mobildConfig/UPDATEARR', { num: num, val: obj[num] });\r\n    },\r\n    // 组件删除\r\n    bindDelete(item, key) {\r\n      if (item.name == 'search_box') {\r\n        this.isSearch = false;\r\n      }\r\n      if (item.name == 'nav_bar') {\r\n        this.isTab = false;\r\n      }\r\n      if (item.name == 'home_comb') {\r\n        this.isComb = false;\r\n      }\r\n      if (item.name == 'home_service') {\r\n        this.isService = false;\r\n      }\r\n      this.mConfig.splice(key, 1);\r\n      this.rConfig.splice(0, 1);\r\n      if (this.mConfig.length != key) {\r\n        this.rConfig.push(this.mConfig[key]);\r\n      } else {\r\n        if (this.mConfig.length) {\r\n          this.activeIndex = key - 1;\r\n          this.rConfig.push(this.mConfig[key - 1]);\r\n        } else {\r\n          this.showTitle();\r\n        }\r\n      }\r\n      // 删除第几个配置\r\n      this.$store.commit('mobildConfig/DELETEARRAY', item);\r\n    },\r\n    // 组件返回\r\n    config(data) {\r\n      let propsObj = this.propsObj;\r\n      propsObj.data = data;\r\n      propsObj.name = this.activeConfigName;\r\n    },\r\n    addSort(arr, index1, index2) {\r\n      arr[index1] = arr.splice(index2, 1, arr[index1])[0];\r\n      return arr;\r\n    },\r\n    // 数组排序\r\n    arraySort() {\r\n      let tempArr = [];\r\n      let basis = {\r\n        title: '基础组件',\r\n        list: [],\r\n        isOpen: true,\r\n      };\r\n      let marketing = {\r\n        title: '营销组件',\r\n        list: [],\r\n        isOpen: true,\r\n      };\r\n      let tool = {\r\n        title: '工具组件',\r\n        list: [],\r\n        isOpen: true,\r\n      };\r\n      this.lConfig.map((el, index) => {\r\n        if (el.type == 0) {\r\n          basis.list.push(el);\r\n        }\r\n        if (el.type == 1) {\r\n          marketing.list.push(el);\r\n        }\r\n        if (el.type == 2) {\r\n          tool.list.push(el);\r\n        }\r\n      });\r\n      tempArr.push(basis, marketing, tool);\r\n      this.leftMenu = tempArr;\r\n    },\r\n    // toImage(val){\r\n    //     html2canvas(this.$refs.imgContainer,{\r\n    //         useCORS:true,\r\n    //         logging:true,\r\n    //         taintTest: false,\r\n    //         backgroundColor: null\r\n    //     }).then((canvas) => {\r\n    //         let imgUrl = canvas.toDataURL('image/jpeg');\r\n    //         this.diySaveDate(val,imgUrl)\r\n    //     });\r\n    // },\r\n    diySaveDate(val, num, type, save) {\r\n      diyProSave(type ? 0 : this.pageId, {\r\n        type: this.pageType || save,\r\n        value: val,\r\n        title: this.titleTxt,\r\n        name: this.nameTxt || '模板',\r\n        is_show: this.showTxt ? 1 : 0,\r\n        is_bg_color: this.colorTxt ? 1 : 0,\r\n        color_picker: this.colorPickerTxt,\r\n        bg_pic: this.picUrlTxt,\r\n        bg_tab_val: this.tabValTxt,\r\n        is_bg_pic: this.picTxt ? 1 : 0,\r\n      })\r\n        .then((res) => {\r\n          this.pageId = res.data.id;\r\n          this.$message.success(res.msg);\r\n          let that = this;\r\n          this.nameModal = false;\r\n          if (num == 2) {\r\n            this.relLoading = false;\r\n            setTimeout(() => {\r\n              window.location.replace(this.$routeProStr + '/setting/pages/devise/0');\r\n            }, 2000);\r\n          } else {\r\n            this.loading = false;\r\n          }\r\n        })\r\n        .catch((res) => {\r\n          this.relLoading = false;\r\n          this.loading = false;\r\n          this.$message.error(res.msg);\r\n        });\r\n    },\r\n    saveModal() {\r\n      if (!this.saveName) return this.$message.warning('请先输入模板名称');\r\n      this.saveConfig(1, this.saveName);\r\n    },\r\n    closeWindow() {\r\n      this.$msgbox({\r\n        title: '提示',\r\n        message: '关闭页面前请先保存数据，未保存的话数据会丢失',\r\n        showCancelButton: true,\r\n        cancelButtonText: '取消',\r\n        confirmButtonText: '确定',\r\n        iconClass: 'el-icon-warning',\r\n        confirmButtonClass: 'btn-custom-cancel',\r\n      })\r\n        .then(() => {\r\n          setTimeout(() => {\r\n            // this.saveConfig();\r\n            window.close();\r\n          }, 1000);\r\n        })\r\n        .catch(() => {});\r\n    },\r\n    // 保存配置\r\n    saveConfig(num, type, save) {\r\n      if (this.mConfig.length == 0) {\r\n        return this.$message.error('暂未添加任何组件，保存失败！');\r\n      }\r\n      if (num == 1) {\r\n        this.loading = true;\r\n      } else {\r\n        this.relLoading = true;\r\n      }\r\n      let val = this.$store.state.mobildConfig.defaultArray;\r\n      if (!this.footActive) {\r\n        let timestamp = new Date().getTime() * 1000;\r\n        val[timestamp] = this.$store.state.mobildConfig.pageFooter;\r\n        this.footActive = true;\r\n      }\r\n      this.$nextTick(() => {\r\n        this.diySaveDate(val, num, type, save);\r\n      });\r\n    },\r\n    // 获取默认配置\r\n    getDefaultConfig() {\r\n      diyProInfo(this.pageId, {\r\n        type: 1,\r\n      }).then(({ data }) => {\r\n        let obj = {};\r\n        let tempARR = [];\r\n        this.$store.commit('mobildConfig/titleUpdata', data.info.title);\r\n        this.$store.commit('mobildConfig/nameUpdata', data.info.name);\r\n        this.$store.commit('mobildConfig/showUpdata', data.info.is_show);\r\n        this.$store.commit('mobildConfig/colorUpdata', data.info.is_bg_color || 0);\r\n        this.$store.commit('mobildConfig/picUpdata', data.info.is_bg_pic || 0);\r\n        this.$store.commit('mobildConfig/pickerUpdata', data.info.color_picker || '#f5f5f5');\r\n        this.$store.commit('mobildConfig/radioUpdata', data.info.bg_tab_val || 0);\r\n        this.$store.commit('mobildConfig/picurlUpdata', data.info.bg_pic || '');\r\n        this.diyStatus = data.info.status;\r\n        let newArr = this.objToArr(data.info.value);\r\n\r\n        function sortNumber(a, b) {\r\n          return a.timestamp - b.timestamp;\r\n        }\r\n        newArr.sort(sortNumber);\r\n        newArr.map((el, index) => {\r\n          if (el.name == 'headerSerch') {\r\n            this.isSearch = true;\r\n          }\r\n          if (el.name == 'tabNav') {\r\n            this.isTab = true;\r\n          }\r\n          if (el.name == 'homeComb') {\r\n            this.isComb = true;\r\n          }\r\n          if (el.name == 'customerService') {\r\n            this.isService = true;\r\n          }\r\n          if (el.name == 'goodList') {\r\n            // let storage = window.localStorage;\r\n            // storage.setItem(el.timestamp, el.selectConfig.activeValue);\r\n          }\r\n          el.id = 'id' + el.timestamp;\r\n          this.lConfig.map((item, j) => {\r\n            if (el.name == item.defaultName) {\r\n              item.num = el.timestamp;\r\n              item.id = 'id' + el.timestamp;\r\n              let tempItem = JSON.parse(JSON.stringify(item));\r\n              tempARR.push(tempItem);\r\n              obj[el.timestamp] = el;\r\n              this.mConfig.push(tempItem);\r\n              // 保存默认组件配置\r\n              this.$store.commit('mobildConfig/ADDARRAY', {\r\n                num: el.timestamp,\r\n                val: el,\r\n              });\r\n            }\r\n          });\r\n        });\r\n\r\n        let objs = newArr[newArr.length - 1];\r\n\r\n        if (objs.name == 'pageFoot') {\r\n          this.$store.commit('mobildConfig/footPageUpdata', objs);\r\n        }\r\n        this.showTitle();\r\n      });\r\n    },\r\n    categoryList() {\r\n      categoryList((res) => {\r\n        this.category = res.data;\r\n      });\r\n    },\r\n    // 重置\r\n    reast() {\r\n      if (this.pageId == 0) {\r\n        this.$message.error('新增页面，无法重置');\r\n      } else {\r\n        this.$confirm('此操作将清空模板内容, 是否继续?', '提示', {\r\n          confirmButtonText: '确定',\r\n          cancelButtonText: '取消',\r\n          type: 'warning',\r\n        }).then((res) => {\r\n          this.mConfig = [];\r\n          this.rConfig = [];\r\n          this.activeIndex = -99;\r\n          this.getDefaultConfig();\r\n        });\r\n      }\r\n    },\r\n  },\r\n  beforeDestroy() {\r\n    this.$store.commit('mobildConfig/titleUpdata', '');\r\n    this.$store.commit('mobildConfig/nameUpdata', '');\r\n    this.$store.commit('mobildConfig/showUpdata', 1);\r\n    this.$store.commit('mobildConfig/colorUpdata', 0);\r\n    this.$store.commit('mobildConfig/picUpdata', 0);\r\n    this.$store.commit('mobildConfig/pickerUpdata', '#f5f5f5');\r\n    this.$store.commit('mobildConfig/radioUpdata', 0);\r\n    this.$store.commit('mobildConfig/picurlUpdata', '');\r\n    this.$store.commit('mobildConfig/SETEMPTY');\r\n  },\r\n  destroyed() {\r\n    this.$store.commit('mobildConfig/titleUpdata', '');\r\n    this.$store.commit('mobildConfig/nameUpdata', '');\r\n    this.$store.commit('mobildConfig/showUpdata', 1);\r\n    this.$store.commit('mobildConfig/colorUpdata', 0);\r\n    this.$store.commit('mobildConfig/picUpdata', 0);\r\n    this.$store.commit('mobildConfig/pickerUpdata', '#f5f5f5');\r\n    this.$store.commit('mobildConfig/radioUpdata', 0);\r\n    this.$store.commit('mobildConfig/picurlUpdata', '');\r\n    this.$store.commit('mobildConfig/SETEMPTY');\r\n  },\r\n};\r\n</script>\r\n<style>\r\n.el-main {\r\n  padding: 0px !important;\r\n}\r\n</style>\r\n<style scoped>\r\n.header-title {\r\n  background: var(--prev-color-primary);\r\n  border-radius: 0;\r\n  margin-bottom: 0;\r\n  padding: 16px;\r\n}\r\n.ivu-page-header-title {\r\n  color: #fff;\r\n  font-size: 16px;\r\n}\r\n</style>\r\n<style scoped lang=\"scss\">\r\n::v-deep .el-card__body {\r\n  padding: 0;\r\n}\r\n::v-deep {\r\n  .icondel_1,\r\n  .upload-box {\r\n    cursor: pointer;\r\n  }\r\n  .el-checkbox,\r\n  .el-radio {\r\n    margin-bottom: 15px;\r\n    margin-right: 15px;\r\n  }\r\n}\r\n.c_label {\r\n  margin-top: 0;\r\n}\r\n::v-deep .el-button--small {\r\n  // border-radius: 0;\r\n  border-radius: 4px;\r\n}\r\n.look,\r\n.look:hover,\r\n.look:focus,\r\n.look:active,\r\n.close,\r\n.close:hover,\r\n.close:focus,\r\n.close:active {\r\n  background: var(--prev-color-primary);\r\n  color: #fff;\r\n  border-color: #fff;\r\n}\r\n\r\n.save,\r\n.save:hover,\r\n.save:active,\r\n.save:focus {\r\n  background: #fff;\r\n  color: var(--prev-color-primary);\r\n  border-color: var(--prev-color-primary);\r\n}\r\n::v-deep .c_row-item {\r\n  margin-bottom: 15px;\r\n}\r\n.ysize {\r\n  background-size: 100%;\r\n}\r\n\r\n.fullsize {\r\n  background-size: 100% 100%;\r\n}\r\n\r\n.repeat {\r\n  background-repeat: repeat;\r\n}\r\n\r\n.noRepeat {\r\n  background-repeat: no-repeat;\r\n}\r\n.fl_header {\r\n  color: #fff;\r\n  .f-title {\r\n    position: relative;\r\n  }\r\n  .return {\r\n    color: #fff;\r\n    margin-right: 34px;\r\n    margin-left: 5px;\r\n    &::after {\r\n      content: ' ';\r\n      position: absolute;\r\n      width: 1px;\r\n      height: 16px;\r\n      background-color: rgba(238, 238, 238, 0.5);\r\n      left: 65px;\r\n      top: 50%;\r\n      margin-top: -8px;\r\n    }\r\n  }\r\n  .iconfont {\r\n    color: #fff;\r\n  }\r\n  .f_title {\r\n    &:hover {\r\n      .return {\r\n        color: rgba(255, 255, 255, 0.8);\r\n      }\r\n      .iconfanhui {\r\n        color: rgba(255, 255, 255, 0.8);\r\n      }\r\n    }\r\n    .name {\r\n      font-size: 16px;\r\n    }\r\n    .iconfont {\r\n      margin-left: 10px;\r\n      color: #fff;\r\n    }\r\n  }\r\n}\r\n.wrapper-con {\r\n  position: relative;\r\n  flex: 1;\r\n  background: #f0f2f5;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding-top: 20px;\r\n  height: 100%;\r\n  .acticons {\r\n    position: absolute;\r\n    right: 20px;\r\n    top: 20px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    z-index: 1;\r\n    .el-button + .el-button {\r\n      margin-left: 0;\r\n    }\r\n  }\r\n  /* min-width 700px; */\r\n}\r\n.main .content-wrapper {\r\n  padding: 0 !important;\r\n}\r\n.defaultData {\r\n  /* margin-left 20px; */\r\n  cursor: pointer;\r\n  position: absolute;\r\n  left: 50%;\r\n  margin-left: 245px;\r\n\r\n  .data {\r\n    display: block;\r\n    margin-top: 20px;\r\n    color: #282828;\r\n    background-color: #fff;\r\n    width: 94px;\r\n    text-align: center;\r\n    height: 32px;\r\n    border-radius: 3px;\r\n    font-size: 12px;\r\n    margin-left: 0 !important;\r\n  }\r\n\r\n  .data:hover {\r\n    background-color: #2d8cf0;\r\n    color: #fff;\r\n    border: 0;\r\n  }\r\n}\r\n\r\n.overflowy {\r\n  margin-right: 4px;\r\n\r\n  .picture {\r\n    width: 379px;\r\n    height: 20px;\r\n    margin: 0 auto;\r\n    background-color: #fff;\r\n  }\r\n}\r\n\r\n.bnt {\r\n  width: 80px !important;\r\n}\r\n\r\n/* 定义滑块 内阴影+圆角 */\r\n::-webkit-scrollbar-thumb {\r\n  -webkit-box-shadow: inset 0 0 6px #fff;\r\n  display: none;\r\n}\r\n\r\n.left:hover::-webkit-scrollbar-thumb,\r\n.right-box:hover::-webkit-scrollbar-thumb {\r\n  display: block;\r\n}\r\n\r\n.contxt:hover ::-webkit-scrollbar-thumb {\r\n  display: block;\r\n}\r\n\r\n::-webkit-scrollbar {\r\n  width: 4px !important; /* 对垂直流动条有效 */\r\n}\r\n\r\n.scrollCon {\r\n  overflow-y: scroll;\r\n  overflow-x: hidden;\r\n}\r\n\r\n.scroll-box .position {\r\n  display: block !important;\r\n  height: 40px;\r\n  text-align: center;\r\n  line-height: 40px;\r\n  border: 1px dashed var(--prev-color-primary);\r\n  color: var(--prev-color-primary);\r\n  background-color: #edf4fb;\r\n}\r\n\r\n.scroll-box .conter {\r\n  display: none !important;\r\n}\r\n.conter {\r\n  margin-top: 3px;\r\n}\r\n.dragClass {\r\n  background-color: #fff;\r\n}\r\n\r\n.ivu-mt {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.iconfont-diy {\r\n  font-size: 24px;\r\n  color: var(--prev-color-primary);\r\n}\r\n\r\n.diy-wrapper {\r\n  max-width: 100%;\r\n  min-width: 1100px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  height: calc(100vh - 62px);\r\n  .left {\r\n    min-width: 300px;\r\n    max-width: 300px;\r\n    /* border 1px solid #DDDDDD */\r\n    border-radius: 4px;\r\n    height: 100%;\r\n\r\n    .title-bar {\r\n      display: flex;\r\n      color: #333;\r\n      border-bottom: 1px solid #eee;\r\n      border-radius: 4px;\r\n      cursor: pointer;\r\n\r\n      .title-item {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex: 1;\r\n        height: 45px;\r\n\r\n        &.on {\r\n          color: var(--prev-color-primary);\r\n          font-size: 14px;\r\n          border-bottom: 1px solid var(--prev-color-primary);\r\n        }\r\n      }\r\n    }\r\n\r\n    .wrapper {\r\n      padding: 15px;\r\n      overflow-y: scroll;\r\n      -webkit-overflow-scrolling: touch;\r\n\r\n      .tips {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        padding-bottom: 15px;\r\n        font-size: 13px;\r\n        color: #000;\r\n        cursor: pointer;\r\n\r\n        .ivu-icon {\r\n          color: #000;\r\n        }\r\n      }\r\n    }\r\n\r\n    .link-item {\r\n      padding: 10px;\r\n      border-bottom: 1px solid #f5f5f5;\r\n      font-size: 12px;\r\n      color: #323232;\r\n\r\n      .name {\r\n        font-size: 14px;\r\n        color: var(--prev-color-primary);\r\n      }\r\n      .copy_btn {\r\n        cursor: pointer;\r\n      }\r\n\r\n      .link-txt {\r\n        margin-top: 2px;\r\n        word-break: break-all;\r\n      }\r\n\r\n      .params {\r\n        margin-top: 5px;\r\n        color: #1cbe6b;\r\n        word-break: break-all;\r\n\r\n        .txt {\r\n          color: #323232;\r\n        }\r\n\r\n        span {\r\n          &:last-child i {\r\n            display: none;\r\n            color: red;\r\n          }\r\n        }\r\n      }\r\n\r\n      .lable {\r\n        display: flex;\r\n        margin-top: 5px;\r\n        color: #999;\r\n\r\n        p {\r\n          flex: 1;\r\n          word-break: break-all;\r\n        }\r\n\r\n        button {\r\n          margin-left: 30px;\r\n          width: 38px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .dragArea.list-group {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n\r\n      .list-group-item {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 74px;\r\n        height: 66px;\r\n        margin-right: 17px;\r\n        margin-bottom: 10px;\r\n        font-size: 12px;\r\n        color: #666;\r\n        cursor: pointer;\r\n        border-radius: 5px;\r\n        text-align: center;\r\n\r\n        &:hover {\r\n          box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);\r\n          border-right: 5px;\r\n          transform: scale(1.1);\r\n          transition: all 0.2s;\r\n        }\r\n\r\n        &:nth-child(3n) {\r\n          margin-right: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .content {\r\n    position: relative;\r\n    height: 100%;\r\n    width: 100%;\r\n\r\n    .page-foot {\r\n      position: relative;\r\n      width: 379px;\r\n      margin: 0 auto 20px auto;\r\n\r\n      .delete-box {\r\n        display: none;\r\n        position: absolute;\r\n        left: -2px;\r\n        top: 0;\r\n        width: 383px;\r\n        height: 100%;\r\n        border: 2px dashed var(--prev-color-primary);\r\n        padding: 10px 0;\r\n      }\r\n\r\n      &:hover,\r\n      &.on {\r\n        /* cursor: move; */\r\n        .delete-box {\r\n          /* display: block; */\r\n        }\r\n      }\r\n\r\n      &.on {\r\n        cursor: move;\r\n\r\n        .delete-box {\r\n          display: block;\r\n          border: 2px solid var(--prev-color-primary);\r\n          box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);\r\n        }\r\n      }\r\n    }\r\n\r\n    .page-title {\r\n      position: relative;\r\n      height: 35px;\r\n      line-height: 35px;\r\n      background: #fff;\r\n      font-size: 15px;\r\n      color: #333333;\r\n      text-align: center;\r\n      width: 379px;\r\n      margin: 0 auto;\r\n\r\n      .delete-box {\r\n        display: none;\r\n        position: absolute;\r\n        left: -2px;\r\n        top: 0;\r\n        width: 383px;\r\n        height: 100%;\r\n        border: 2px dashed var(--prev-color-primary);\r\n        padding: 10px 0;\r\n\r\n        span {\r\n          position: absolute;\r\n          right: 0;\r\n          bottom: 0;\r\n          width: 32px;\r\n          height: 16px;\r\n          line-height: 16px;\r\n          display: inline-block;\r\n          text-align: center;\r\n          font-size: 10px;\r\n          color: #fff;\r\n          background: rgba(0, 0, 0, 0.4);\r\n          margin-left: 2px;\r\n          cursor: pointer;\r\n          z-index: 11;\r\n        }\r\n      }\r\n\r\n      &:hover,\r\n      &.on {\r\n        /* cursor: move; */\r\n        .delete-box {\r\n          /* display: block; */\r\n        }\r\n      }\r\n\r\n      &.on {\r\n        cursor: move;\r\n\r\n        .delete-box {\r\n          display: block;\r\n          border: 2px solid var(--prev-color-primary);\r\n          box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);\r\n        }\r\n      }\r\n    }\r\n\r\n    .scroll-box {\r\n      flex: 1;\r\n      background-color: #fff;\r\n      width: 379px;\r\n      margin: 0 auto;\r\n      padding-top: 1px;\r\n    }\r\n\r\n    .dragArea.list-group {\r\n      width: 100%;\r\n      height: 100%;\r\n\r\n      .mConfig-item {\r\n        position: relative;\r\n        cursor: move;\r\n        &.hide {\r\n          &::before {\r\n            position: absolute;\r\n            content: '已隐藏';\r\n            background: rgba(0, 0, 0, 0.5);\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: 99;\r\n            color: #fff;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n          }\r\n        }\r\n        .delete-name.on {\r\n          background: var(--prev-color-primary-light-3);\r\n          color: #fff;\r\n          &::before {\r\n            background: var(--prev-color-primary-light-3);\r\n          }\r\n        }\r\n        .delete-name {\r\n          position: absolute;\r\n          top: 0;\r\n          background: #fff;\r\n          left: -100px;\r\n          width: 86px;\r\n          height: 32px;\r\n          text-align: center;\r\n          line-height: 32px;\r\n          font-size: 13px;\r\n          color: #666;\r\n          border-radius: 3px;\r\n\r\n          &::before {\r\n            content: '';\r\n            position: absolute;\r\n            width: 10px;\r\n            height: 10px;\r\n            background: #fff;\r\n            transform: rotate(45deg);\r\n            top: 50%;\r\n            right: -5px;\r\n            margin-top: -5px;\r\n          }\r\n        }\r\n        .delete-box {\r\n          display: none;\r\n          position: absolute;\r\n          left: -2px;\r\n          top: 0;\r\n          width: 383px;\r\n          height: 100%;\r\n          border: 2px dashed var(--prev-color-primary);\r\n\r\n          /* padding: 10px 0; */\r\n          .handleType {\r\n            position: absolute;\r\n            right: -43px;\r\n            top: 0;\r\n            width: 36px;\r\n            border-radius: 4px;\r\n            background-color: var(--prev-color-primary);\r\n            cursor: pointer;\r\n            color: #fff;\r\n            font-weight: bold;\r\n            text-align: center;\r\n            padding: 4px 0;\r\n            .el-tooltip {\r\n              background-color: inherit;\r\n              color: inherit;\r\n            }\r\n            .iconfont {\r\n              padding: 5px 0;\r\n\r\n              &.on {\r\n                opacity: 0.4;\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        &.on {\r\n          cursor: move;\r\n\r\n          .delete-box {\r\n            display: block;\r\n            border: 2px solid var(--prev-color-primary);\r\n            box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);\r\n          }\r\n        }\r\n      }\r\n\r\n      .mConfig-item:hover {\r\n        transform: scale(1.01);\r\n        box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);\r\n        transition: all 0.2s;\r\n      }\r\n    }\r\n  }\r\n\r\n  .right-box {\r\n    max-width: 400px;\r\n    min-width: 400px;\r\n    height: 100%;\r\n    border-radius: 4px;\r\n    overflow: scroll;\r\n    -webkit-overflow-scrolling: touch;\r\n\r\n    ::v-deep .ivu-tabs-bar {\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .title-bar {\r\n      width: 100%;\r\n      height: 45px;\r\n      line-height: 45px;\r\n      padding-left: 24px;\r\n      color: #000;\r\n      border-radius: 4px;\r\n      border-bottom: 1px solid #eee;\r\n      font-size: 14px;\r\n    }\r\n  }\r\n\r\n  ::-webkit-scrollbar {\r\n    width: 6px;\r\n    background-color: transparent;\r\n  }\r\n\r\n  ::-webkit-scrollbar-track {\r\n    border-radius: 10px;\r\n  }\r\n\r\n  ::-webkit-scrollbar-thumb {\r\n    background-color: #bfc1c4;\r\n  }\r\n}\r\n\r\n.foot-box {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 80px;\r\n  background: #fff;\r\n  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.03);\r\n\r\n  button {\r\n    width: 100px;\r\n    height: 32px;\r\n    font-size: 13px;\r\n\r\n    &:first-child {\r\n      margin-right: 20px;\r\n    }\r\n  }\r\n}\r\n\r\n::v-deep .ivu-scroll-loader {\r\n  display: none;\r\n}\r\n\r\n::v-deep .ivu-card-body {\r\n  width: 100%;\r\n  padding: 0;\r\n  height: calc(100vh - 73px);\r\n}\r\n\r\n.rbtn {\r\n  position: absolute;\r\n  right: 20px;\r\n}\r\n.code {\r\n  position: relative;\r\n}\r\n\r\n.QRpic {\r\n  width: 160px;\r\n  height: 160px;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n}\r\n.contxt {\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  height: 100%;\r\n}\r\n\r\n.contxt:hover ::-webkit-scrollbar-thumb {\r\n  display: block;\r\n}\r\n.iconfont-diy {\r\n  font-size: 24px;\r\n  color: var(--prev-color-primary);\r\n}\r\n.icon {\r\n  width: 28px;\r\n  height: 28px;\r\n  // vertical-align: -0.15em;\r\n  fill: currentColor;\r\n  overflow: hidden;\r\n}\r\n</style>\r\n"]}]}