| 1 |
- {"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 <!-->保存-->\r\n <!--</Button-->\r\n <!-->-->\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"]}]}
|
