38c2bc6212fbc2569fca6bd5bbb757f0.json 28 KB

1
  1. {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\components\\words.vue?vue&type=style&index=1&id=67b11d42&lang=css","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\components\\words.vue","mtime":1761614939021},{"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:DQoua2ZfbW9iaWxlIC5pdnUtbW9kYWwtd3JhcCB7DQogIGRpc3BsYXk6IGZsZXg7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KfQ0KLnZlcnRpY2FsLWNlbnRlci1tb2RhbCB7DQogIGRpc3BsYXk6IGZsZXg7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KfQ0KLml2dS1tb2RhbCB7DQogIHRvcDogMDsNCn0NCi5ub2lucHV0IGlucHV0LA0KLm5vaW5wdXQgdGV4dGFyZWEgew0KICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50ICFpbXBvcnRhbnQ7DQogIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50ICFpbXBvcnRhbnQ7DQogIHJlc2l6ZTogbm9uZTsNCn0NCi5ub2lucHV0IGlucHV0OmhvdmVyLA0KLm5vaW5wdXQgaW5wdXQ6Zm9jdXMsDQoubm9pbnB1dCB0ZXh0YXJlYTpob3ZlciwNCi5ub2lucHV0IHRleHRhcmVhOmZvY3VzIHsNCiAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudCAhaW1wb3J0YW50Ow0KICBib3gtc2hhZG93OiBub25lICFpbXBvcnRhbnQ7DQp9DQo="},{"version":3,"sources":["words.vue"],"names":[],"mappings":";AAu1BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"words.vue","sourceRoot":"src/pages/kefu/components","sourcesContent":["<template>\r\n <div>\r\n <!-- 常用语 -->\r\n <div class=\"words-mask\" v-if=\"isWords\">\r\n <div class=\"content\">\r\n <div class=\"title-box\">\r\n <div class=\"tab-box\">\r\n <div\r\n class=\"tan-item\"\r\n :class=\"{ on: item.key == wordsTabCur }\"\r\n v-for=\"(item, index) in wordsTab\"\r\n v-db-click\r\n @click.stop=\"bindTab(item)\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n <div class=\"right-icon\">\r\n <span class=\"iconfont iconbianji2\" v-db-click @click.stop=\"isWordShow = true\"></span>\r\n <span class=\"iconfont iconcha\" v-db-click @click.stop=\"closeBox\"></span>\r\n </div>\r\n </div>\r\n <div class=\"input-box\">\r\n <el-input v-model=\"wordsData.searchTxt\" placeholder=\"搜索快捷回复\" :search=\"true\" @on-search=\"bindSearch\" />\r\n </div>\r\n </div>\r\n <div class=\"scroll-box\">\r\n <div class=\"scroll-left\">\r\n <div class=\"left-item add_cate\" v-db-click @click.stop=\"openCate(0)\" v-if=\"wordsTabCur\">\r\n <span class=\"iconfont iconjiahao\"></span> 分组\r\n </div>\r\n <div\r\n class=\"left-item\"\r\n :class=\"{ active: wordsData.cateId == item.id }\"\r\n v-for=\"item in wordsData.cate\"\r\n v-db-click\r\n @click.stop=\"changeCate(item)\"\r\n >\r\n {{ item.name }}\r\n </div>\r\n </div>\r\n <div class=\"right-box\">\r\n <vue-scroll :ops=\"wordsData.ops\" @load-before-deactivate=\"handleWordsScroll\">\r\n <div class=\"slot-load\" slot=\"load-deactive\"></div>\r\n <div class=\"slot-load\" slot=\"load-beforeDeactive\"></div>\r\n <div class=\"slot-load\" slot=\"load-active\">下滑加载更多</div>\r\n <div class=\"msg-item add-mg\" v-show=\"wordsTabCur\" v-db-click @click.stop=\"addMsg\">\r\n <span class=\"iconfont icontianjia11\"></span>添加话术\r\n </div>\r\n <div\r\n class=\"msg-item\"\r\n v-for=\"(item, index) in wordsList\"\r\n :key=\"index\"\r\n v-db-click\r\n @click.stop=\"selectWords(item)\"\r\n >\r\n <span class=\"title\">{{ item.title }}</span\r\n >{{ item.message }}\r\n </div>\r\n </vue-scroll>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- 添加分组 -->\r\n <el-dialog\r\n :visible.sync=\"cateData.isCate\"\r\n width=\"470px\"\r\n :show-close=\"true\"\r\n custom-class=\"vertical-center-modal\"\r\n class=\"words-box\"\r\n >\r\n <div class=\"mask-title\">\r\n {{ cateData.status ? '编辑分组' : '新增分组' }}\r\n <span class=\"iconfont iconcha\" v-db-click @click.stop=\"closeCate\"></span>\r\n </div>\r\n <div class=\"input-box\">\r\n <el-input class=\"noinput\" v-model=\"cateData.name\" placeholder=\"请输入分组名称\" />\r\n </div>\r\n <div class=\"input-box\">\r\n <el-input class=\"noinput\" v-model=\"cateData.sort\" placeholder=\"请输入分组排序\" />\r\n </div>\r\n <el-button v-db-click @click.stop=\"cateConfirm\" class=\"subBtn\" type=\"primary\" :disabled=\"cateStatus\"\r\n >确定</el-button\r\n >\r\n </el-dialog>\r\n <!-- 添加话术 -->\r\n <el-dialog\r\n :visible.sync=\"msgData.isCateMeg\"\r\n width=\"470px\"\r\n :show-close=\"true\"\r\n custom-class=\"vertical-center-modal\"\r\n class=\"words-box\"\r\n >\r\n <div class=\"mask-title\">\r\n {{ msgData.status ? '修改话术' : '添加话术' }}\r\n <span class=\"iconfont iconcha\" v-db-click @click.stop=\"closeMsgBox\"></span>\r\n </div>\r\n <div class=\"input-box\">\r\n <el-input class=\"noinput\" v-model=\"msgData.title\" placeholder=\"请输入标题名称 (选填)\" />\r\n </div>\r\n <div class=\"input-box text-area\">\r\n <el-input class=\"noinput\" :rows=\"4\" type=\"textarea\" v-model=\"msgData.message\" placeholder=\"请输入您的话术\" />\r\n </div>\r\n <div class=\"input-box\">\r\n <el-select v-model=\"msgData.msgCateId\">\r\n <el-option v-for=\"item in selectData\" :value=\"item.id\" :key=\"item.value\" :label=\"item.name\"></el-option>\r\n </el-select>\r\n </div>\r\n <el-button v-db-click @click.stop=\"msgConfirm\" class=\"subBtn\" type=\"primary\" :disabled=\"msgStatus\"\r\n >确定</el-button\r\n >\r\n </el-dialog>\r\n <!-- 编辑弹窗 -->\r\n <div class=\"edit-box\" v-if=\"isWordShow\">\r\n <div class=\"head\">\r\n <div class=\"tit-bar\">\r\n {{ wordsTabCur ? '个人库' : '公共库' }}<span v-db-click @click.stop=\"isWordShow = false\">完成</span>\r\n </div>\r\n <div class=\"input-box noinput\">\r\n <el-input v-model=\"wordsData.searchTxt\" placeholder=\"搜索快捷回复\" :search=\"true\" @on-search=\"bindSearch\" />\r\n </div>\r\n </div>\r\n <div class=\"scroll-box\">\r\n <div class=\"scroll-left\">\r\n <div class=\"top\">\r\n <div class=\"left-item add_cate\" v-db-click @click.stop=\"openCate(0)\" v-if=\"wordsTabCur\">\r\n <span class=\"iconfont iconjiahao\"></span> 分组\r\n </div>\r\n <div\r\n class=\"left-item\"\r\n :class=\"{ active: wordsData.cateId == item.id }\"\r\n v-for=\"item in wordsData.cate\"\r\n v-db-click\r\n @click.stop=\"changeCate(item)\"\r\n >\r\n {{ item.name }}\r\n </div>\r\n </div>\r\n <div class=\"bom\" v-if=\"wordsTabCur\">\r\n <div class=\"left-item edits-box\" v-db-click @click.stop=\"editList.status = true\">编辑分组</div>\r\n </div>\r\n </div>\r\n <div class=\"right-box\">\r\n <vue-scroll :ops=\"wordsData.ops\" @load-before-deactivate=\"handleWordsScroll\">\r\n <div class=\"slot-load\" slot=\"load-deactive\"></div>\r\n <div class=\"slot-load\" slot=\"load-beforeDeactive\"></div>\r\n <div class=\"slot-load\" slot=\"load-active\">下滑加载更多</div>\r\n <div class=\"msg-item\" v-for=\"(item, index) in wordsList\" :key=\"index\">\r\n <span class=\"title\">{{ item.title }}</span\r\n >{{ item.message }}\r\n <div class=\"edit-bar\" v-if=\"wordsTabCur\">\r\n <span class=\"iconfont iconbianji1\" v-db-click @click.stop=\"bindEdit(item)\"></span>\r\n <span class=\"iconfont iconshanchu1\" v-db-click @click.stop=\"delMsg(item, '删除话术', index)\"></span>\r\n </div>\r\n </div>\r\n </vue-scroll>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- 编辑分组列表 -->\r\n <el-dialog\r\n :visible.sync=\"editList.status\"\r\n width=\"470px\"\r\n :show-close=\"true\"\r\n custom-class=\"vertical-center-modal\"\r\n class=\"words-box cate-list\"\r\n >\r\n <div class=\"mask-title\">\r\n 编辑分组\r\n <span class=\"iconfont iconcha\" v-db-click @click.stop=\"editList.status = false\"></span>\r\n </div>\r\n <div class=\"list-box\">\r\n <div class=\"item\" v-for=\"(item, index) in wordsData.cate\" :index=\"index\">\r\n <span>{{ item.name }}</span>\r\n <div class=\"right-box\">\r\n <span class=\"iconfont iconbianji1\" v-if=\"index > 0\" v-db-click @click.stop=\"openCate(1, item)\"></span>\r\n <span\r\n class=\"iconfont iconshanchu1\"\r\n v-if=\"index > 0\"\r\n v-db-click\r\n @click.stop=\"delCate(item, '删除分组', index)\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport {\r\n speeChcraft,\r\n serviceCate,\r\n addServiceCate,\r\n addSpeeChcraft,\r\n serviceCateUpdate,\r\n editServiceCate,\r\n} from '@/api/kefu';\r\nexport default {\r\n name: 'words',\r\n props: {\r\n isWords: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n computed: {\r\n cateStatus() {\r\n if (this.cateData.name && this.cateData.sort) {\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n },\r\n msgStatus() {\r\n if (this.msgData.message) {\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n },\r\n },\r\n data() {\r\n return {\r\n isWordShow: false, // 编辑窗\r\n wordsList: [],\r\n wordsTab: [\r\n {\r\n title: '个人库',\r\n key: 1,\r\n },\r\n {\r\n title: '公共库',\r\n key: 0,\r\n },\r\n ],\r\n wordsTabCur: 1,\r\n wordsData: {\r\n isScroll: true,\r\n ops: {\r\n vuescroll: {\r\n mode: 'slide',\r\n enable: false,\r\n tips: {\r\n deactive: 'Push to Load',\r\n active: 'Release to Load',\r\n start: 'Loading...',\r\n beforeDeactive: 'Load Successfully!',\r\n },\r\n auto: false,\r\n autoLoadDistance: 0,\r\n pullRefresh: {\r\n enable: false,\r\n },\r\n pushLoad: {\r\n enable: true,\r\n auto: true,\r\n autoLoadDistance: 10,\r\n },\r\n },\r\n bar: {\r\n background: '#393232',\r\n opacity: '.5',\r\n size: '2px',\r\n },\r\n },\r\n page: 1,\r\n limit: 15,\r\n searchTxt: '',\r\n cate: [], // 分类\r\n cateId: '', // 分类id\r\n },\r\n // 分组数据\r\n cateData: {\r\n status: 0, // 0 新增 1编辑\r\n name: '',\r\n sort: '',\r\n isCate: false, // 分组状态开关\r\n id: '',\r\n },\r\n // 编辑分组列表\r\n editList: {\r\n status: false,\r\n },\r\n // 话术添加数据\r\n msgData: {\r\n isCateMeg: false,\r\n msgCateId: '',\r\n message: '',\r\n title: '',\r\n status: 0, // 0 新增 1修改\r\n editId: '',\r\n },\r\n selectData: '',\r\n };\r\n },\r\n mounted() {\r\n Promise.all([this.getServiceCate()]);\r\n },\r\n methods: {\r\n // 关闭添加话术弹窗\r\n closeMsgBox() {\r\n this.msgData.isCateMeg = false;\r\n },\r\n // 选择话术\r\n selectWords(item) {\r\n this.$emit('selectMsg', item.message);\r\n },\r\n // 关闭弹窗\r\n closeBox() {\r\n this.$emit('closeBox');\r\n },\r\n // 搜索\r\n bindSearch() {\r\n this.wordsData.page = 1;\r\n this.wordsData.isScroll = true;\r\n this.wordsList = [];\r\n this.getWordsList();\r\n },\r\n // 顶部切换\r\n bindTab(item) {\r\n console.log('111');\r\n this.wordsTabCur = item.key;\r\n this.wordsData.isScroll = true;\r\n this.wordsData.page = 1;\r\n this.wordsData.cate = [];\r\n this.wordsList = [];\r\n this.getServiceCate();\r\n },\r\n // 选择话术分类\r\n changeCate(item) {\r\n this.wordsData.isScroll = true;\r\n this.wordsList = [];\r\n this.wordsData.page = 1;\r\n this.wordsData.cateId = item.id;\r\n this.msgData.msgCateId = item.id;\r\n this.getWordsList();\r\n },\r\n // 获取话术分类\r\n getServiceCate() {\r\n serviceCate({\r\n type: this.wordsTabCur,\r\n }).then((res) => {\r\n let tempArr = JSON.parse(JSON.stringify(res.data.data));\r\n this.wordsData.cateId = res.data.data.length ? res.data.data[0].id : '';\r\n this.msgData.msgCateId = this.wordsData.cateId;\r\n this.wordsData.cate = res.data.data;\r\n this.selectData = tempArr;\r\n this.getWordsList();\r\n });\r\n },\r\n // 话术滚动到底部\r\n handleWordsScroll(vm, refreshDom, done) {\r\n this.getWordsList();\r\n done();\r\n },\r\n // 常用语\r\n getWordsList() {\r\n speeChcraft({\r\n page: this.wordsData.page,\r\n limit: this.wordsData.limit,\r\n title: this.wordsData.searchTxt,\r\n cate_id: this.wordsData.cateId,\r\n type: this.wordsTabCur,\r\n }).then((res) => {\r\n this.wordsData.isScroll = res.data.length >= this.wordsData.limit;\r\n this.wordsList = this.wordsList.concat(res.data);\r\n this.wordsData.page++;\r\n });\r\n },\r\n // 打开分组弹窗\r\n openCate(key, item) {\r\n this.cateData.status = key;\r\n this.cateData.isCate = true;\r\n if (key == 1) {\r\n this.cateData.name = item.name;\r\n this.cateData.id = item.id;\r\n }\r\n },\r\n // 关闭分组弹窗\r\n closeCate() {\r\n this.cateData.isCate = false;\r\n this.cateData.name = '';\r\n this.cateData.sort = '';\r\n },\r\n // 分组添加\r\n cateConfirm() {\r\n if (!this.cateData.status) {\r\n addServiceCate({\r\n name: this.cateData.name,\r\n sort: this.cateData.sort,\r\n })\r\n .then((res) => {\r\n this.cateData.isCate = false;\r\n this.cateData.name = '';\r\n this.cateData.sort = '';\r\n this.page = 1;\r\n this.wordsData.isScroll = true;\r\n this.wordsList = [];\r\n this.$message.success(res.msg);\r\n this.getServiceCate();\r\n })\r\n .catch((error) => {\r\n this.$message.error(error.msg);\r\n });\r\n } else {\r\n editServiceCate(this.cateData.id, {\r\n name: this.cateData.name,\r\n sort: this.cateData.sort,\r\n }).then((res) => {\r\n this.cateData.isCate = false;\r\n this.cateData.name = '';\r\n this.cateData.sort = '';\r\n this.cateData.id = '';\r\n this.page = 1;\r\n this.wordsData.isScroll = true;\r\n this.wordsList = [];\r\n this.$message.success(res.msg);\r\n this.getServiceCate();\r\n });\r\n }\r\n },\r\n // 话术打开\r\n addMsg() {\r\n this.msgData.isCateMeg = true;\r\n this.msgData.status = 0;\r\n },\r\n // 话术添加\r\n msgConfirm() {\r\n if (!this.msgData.status) {\r\n addSpeeChcraft({\r\n title: this.msgData.title,\r\n cate_id: this.msgData.msgCateId,\r\n message: this.msgData.message,\r\n })\r\n .then((res) => {\r\n this.msgData.isCateMeg = false;\r\n this.msgData.title = '';\r\n this.msgData.message = '';\r\n this.msgData.msgCateId = this.wordsData.cateId;\r\n this.$message.success(res.msg);\r\n this.wordsData.isScroll = true;\r\n this.wordsData.page = 1;\r\n this.wordsList = [];\r\n this.getWordsList();\r\n })\r\n .catch((error) => {\r\n this.$message.error(error.msg);\r\n });\r\n } else {\r\n serviceCateUpdate(this.msgData.editId, {\r\n title: this.msgData.title,\r\n cate_id: this.msgData.msgCateId,\r\n message: this.msgData.message,\r\n }).then((res) => {\r\n this.msgData.isCateMeg = false;\r\n this.msgData.title = '';\r\n this.msgData.message = '';\r\n this.msgData.msgCateId = this.wordsData.cateId;\r\n this.$message.success(res.msg);\r\n this.wordsData.isScroll = true;\r\n this.wordsData.page = 1;\r\n this.wordsList = [];\r\n this.getWordsList();\r\n });\r\n }\r\n },\r\n // 编辑话术\r\n bindEdit(item) {\r\n this.msgData.status = 1;\r\n this.msgData.isCateMeg = true;\r\n this.msgData.message = item.message;\r\n this.msgData.title = item.title;\r\n this.msgData.editId = item.id;\r\n },\r\n // 删除话术\r\n delMsg(row, tit, num) {\r\n let delfromData = {\r\n title: tit,\r\n num: num,\r\n url: `/service/speechcraft/${row.id}`,\r\n method: 'DELETE',\r\n ids: '',\r\n kefu: true,\r\n };\r\n this.$modalSure(delfromData)\r\n .then((res) => {\r\n this.wordsList.splice(num, 1);\r\n this.$message.success(res.msg);\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n delCate(row, tit, num) {\r\n let delfromData = {\r\n title: tit,\r\n num: num,\r\n url: `/service/cate/${row.id}`,\r\n method: 'DELETE',\r\n ids: '',\r\n kefu: true,\r\n };\r\n this.$modalSure(delfromData)\r\n .then((res) => {\r\n this.wordsData.cate.splice(num, 1);\r\n this.page = 1;\r\n this.wordsData.isScroll = true;\r\n this.wordsList = [];\r\n this.$message.success(res.msg);\r\n this.getServiceCate();\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.words-mask {\r\n z-index: 50;\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n .content {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n top: 1.14rem;\r\n bottom: 0;\r\n display: flex;\r\n flex-direction: column;\r\n background: #fff;\r\n border-radius: 0.06rem 0.06rem 0px 0px;\r\n .title-box {\r\n padding: 0 0.3rem 0.3rem;\r\n position: relative;\r\n border-bottom: 1px solid #f5f6f9;\r\n .tab-box {\r\n position: relative;\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 0.4rem 2.2rem 0.3rem;\r\n font-size: 0.32rem;\r\n color: #9f9f9f;\r\n .on {\r\n color: #3875ea;\r\n font-weight: bold;\r\n }\r\n .right-icon {\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n .iconfont {\r\n margin-left: 0.2rem;\r\n font-size: 0.48rem;\r\n color: #c8cad0;\r\n }\r\n }\r\n }\r\n .input-box {\r\n display: flex;\r\n align-items: center;\r\n width: 6.9rem;\r\n height: 0.64rem;\r\n padding-right: 0.05rem;\r\n margin-left: 0.18rem;\r\n border-radius: 0.32rem;\r\n overflow: hidden;\r\n ::v-deep .el-input__inner {\r\n background: #f5f6f9;\r\n }\r\n ::v-deep .el-input__inner,\r\n .el-input__inner:hover,\r\n .el-input__inner:focus {\r\n border: transparent;\r\n box-shadow: none;\r\n }\r\n }\r\n .icon-cha1 {\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n }\r\n .scroll-box {\r\n flex: 1;\r\n display: flex;\r\n overflow: hidden;\r\n .scroll-left {\r\n width: 1.76rem;\r\n height: 100%;\r\n overflow-y: scroll;\r\n -webkit-overflow-scrolling: touch;\r\n background: #f5f6f9;\r\n .left-item {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 1.09rem;\r\n color: #282828;\r\n font-size: 0.26rem;\r\n &.active {\r\n color: #3875ea;\r\n background: #fff;\r\n &:after {\r\n content: ' ';\r\n position: absolute;\r\n left: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 0.06rem;\r\n height: 0.46rem;\r\n background: #3875ea;\r\n }\r\n }\r\n &.add_cate {\r\n color: #9f9f9f;\r\n font-size: 0.26rem;\r\n .iconfont {\r\n margin-right: 0.1rem;\r\n font-size: 0.24rem;\r\n }\r\n }\r\n }\r\n }\r\n .right-box {\r\n flex: 1;\r\n overflow: scroll;\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n .msg-item {\r\n padding: 0.25rem 0.3rem;\r\n color: #888888;\r\n font-size: 0.28rem;\r\n .title {\r\n margin-right: 0.2rem;\r\n color: #282828;\r\n }\r\n &.add-mg {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n font-size: 0.28rem;\r\n padding: 0.15rem 0.3rem;\r\n .iconfont {\r\n font-size: 0.36rem;\r\n margin-right: 0.1rem;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n.words-box {\r\n .mask-title {\r\n position: relative;\r\n text-align: center;\r\n margin-bottom: 0.5rem;\r\n color: #282828;\r\n font-size: 0.32rem;\r\n font-weight: bold;\r\n .iconfont {\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #c8cad0;\r\n font-size: 0.44rem;\r\n font-weight: normal;\r\n }\r\n }\r\n .input-box {\r\n height: 0.68rem;\r\n margin-top: 0.32rem;\r\n background: #f5f5f5;\r\n border-radius: 0.14rem;\r\n &.text-area {\r\n height: 1.92rem;\r\n textarea {\r\n display: block;\r\n height: 100%;\r\n }\r\n }\r\n }\r\n .subBtn {\r\n width: 100%;\r\n height: 0.86rem;\r\n margin-top: 0.6rem;\r\n margin-bottom: 0.3rem;\r\n font-size: 0.3rem !important;\r\n border-radius: 0.43rem;\r\n &[disabled] {\r\n background: #c8cad0;\r\n color: #fff;\r\n font-size: 0.3rem !important;\r\n }\r\n }\r\n}\r\n.edit-box {\r\n z-index: 99;\r\n position: fixed;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n display: flex;\r\n flex-direction: column;\r\n background: #fff;\r\n .head {\r\n padding: 0.4rem 0.3rem 0.3rem;\r\n .tit-bar {\r\n position: relative;\r\n text-align: center;\r\n font-size: 0.32rem;\r\n color: #282828;\r\n font-weight: bold;\r\n span {\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #3875ea;\r\n font-size: 0.28rem;\r\n font-weight: normal;\r\n }\r\n }\r\n .input-box {\r\n margin-top: 0.3rem;\r\n background: #f5f6f9;\r\n border-radius: 0.39rem;\r\n }\r\n }\r\n .scroll-box {\r\n flex: 1;\r\n display: flex;\r\n overflow: hidden;\r\n .scroll-left {\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n width: 1.76rem;\r\n height: 100%;\r\n background: #f5f6f9;\r\n .top {\r\n flex: 1;\r\n overflow-y: scroll;\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n .left-item {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 1.09rem;\r\n color: #282828;\r\n font-size: 0.26rem;\r\n &.active {\r\n color: #3875ea;\r\n background: #fff;\r\n &:after {\r\n content: ' ';\r\n position: absolute;\r\n left: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 0.06rem;\r\n height: 0.46rem;\r\n background: #3875ea;\r\n }\r\n }\r\n &.add_cate {\r\n color: #9f9f9f;\r\n font-size: 0.26rem;\r\n .iconfont {\r\n margin-right: 0.1rem;\r\n font-size: 0.24rem;\r\n }\r\n }\r\n &.edits-box {\r\n color: #3875ea;\r\n }\r\n }\r\n }\r\n .right-box {\r\n flex: 1;\r\n padding-left: 0.3rem;\r\n }\r\n .msg-item {\r\n padding: 0.25rem 0.3rem 0.25rem 0;\r\n color: #888888;\r\n font-size: 0.28rem;\r\n .title {\r\n margin-right: 0.2rem;\r\n color: #282828;\r\n }\r\n &.add-mg {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n font-size: 0.28rem;\r\n padding: 0.15rem 0.3rem;\r\n .iconfont {\r\n font-size: 0.36rem;\r\n margin-right: 0.1rem;\r\n }\r\n }\r\n .edit-bar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n margin-top: 0.25rem;\r\n padding-bottom: 0.1rem;\r\n border-bottom: 1px solid #f0f2f7;\r\n .iconfont {\r\n margin-left: 0.3rem;\r\n font-size: 0.32rem;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n.cate-list {\r\n .list-box {\r\n max-height: 7.5rem;\r\n overflow-y: scroll;\r\n -webkit-overflow-scrolling: touch;\r\n .item {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 1rem;\r\n border-bottom: 1px solid #f0f2f7;\r\n color: #282828;\r\n font-size: 0.28rem;\r\n .iconfont {\r\n color: #9f9f9f;\r\n font-size: 0.32rem;\r\n margin-left: 0.4rem;\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n<style>\r\n.kf_mobile .ivu-modal-wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.vertical-center-modal {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.ivu-modal {\r\n top: 0;\r\n}\r\n.noinput input,\r\n.noinput textarea {\r\n border-color: transparent !important;\r\n background: transparent !important;\r\n resize: none;\r\n}\r\n.noinput input:hover,\r\n.noinput input:focus,\r\n.noinput textarea:hover,\r\n.noinput textarea:focus {\r\n border-color: transparent !important;\r\n box-shadow: none !important;\r\n}\r\n</style>\r\n"]}]}