| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.math.sign.js\";\nimport \"core-js/modules/es.parse-int.js\";\nimport \"core-js/modules/web.timers.js\";\nexport default {\n name: 'SalesOrderProcess',\n data: function data() {\n return {\n dialogVisible: false,\n currentNode: null,\n scale: 1,\n panEnabled: false,\n lastPosX: 0,\n lastPosY: 0,\n showWheelTip: true,\n userName: '',\n nodes: [{\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: '/sales/start'\n }, {\n id: 'inquiry',\n type: 'process',\n label: '客户询价',\n x: 400,\n y: 150,\n url: '/sales/inquiry'\n }, {\n id: 'need-analysis',\n type: 'process',\n label: '需求分析',\n x: 400,\n y: 250,\n url: '/sales/analysis'\n }, {\n id: 'solution',\n type: 'process',\n label: '方案制定',\n x: 400,\n y: 350,\n url: '/sales/solution'\n }, {\n id: 'quotation',\n type: 'process',\n label: '报价单生成',\n x: 400,\n y: 450,\n url: '/sales/quotation'\n }, {\n id: 'negotiation',\n type: 'process',\n label: '商务谈判',\n x: 400,\n y: 550,\n url: '/sales/negotiation'\n }, {\n id: 'decision',\n type: 'condition',\n label: '客户决策',\n x: 400,\n y: 650,\n url: '/sales/decision'\n }, {\n id: 'contract',\n type: 'process',\n label: '签订合同',\n x: 600,\n y: 650,\n url: '/sales/contract'\n }, {\n id: 'reject-reason',\n type: 'process',\n label: '原因分析',\n x: 200,\n y: 650,\n url: '/sales/reject'\n }, {\n id: 'followup',\n type: 'process',\n label: '持续跟进',\n x: 200,\n y: 750,\n url: '/sales/followup'\n }, {\n id: 'production',\n type: 'process',\n label: '生产准备',\n x: 600,\n y: 750,\n url: '/sales/production'\n }, {\n id: 'end-success',\n type: 'end',\n label: '流程完成',\n x: 400,\n y: 850,\n url: '/sales/completed'\n }]\n };\n },\n mounted: function mounted() {\n var _this = this;\n // 5秒后隐藏滚轮提示\n setTimeout(function () {\n _this.showWheelTip = false;\n }, 5000);\n },\n methods: {\n handleNodeClick: function handleNodeClick(node) {\n this.currentNode = node;\n this.dialogVisible = true;\n },\n getNodeTypeName: function getNodeTypeName(type) {\n var types = {\n 'start': '开始节点',\n 'end': '结束节点',\n 'process': '流程节点',\n 'condition': '条件节点'\n };\n return types[type] || type;\n },\n zoomIn: function zoomIn() {\n if (this.scale < 2) {\n this.scale += 0.1;\n }\n },\n zoomOut: function zoomOut() {\n if (this.scale > 0.5) {\n this.scale -= 0.1;\n }\n },\n resetZoom: function resetZoom() {\n this.scale = 1;\n // 重置流程图位置\n if (this.$refs.processFlow) {\n this.$refs.processFlow.style.top = '0px';\n this.$refs.processFlow.style.left = '0px';\n }\n },\n handleWheel: function handleWheel(e) {\n // 阻止默认滚动行为\n e.preventDefault();\n\n // 确定滚动方向（向上滚动为放大，向下滚动为缩小）\n var delta = Math.sign(e.deltaY) * -0.1;\n\n // 计算新的缩放值\n var newScale = Math.max(0.5, Math.min(2, this.scale + delta));\n\n // 如果缩放值在允许范围内，就应用它\n if (newScale !== this.scale) {\n // 计算鼠标位置相对于流程图容器的位置\n var flowEl = this.$refs.processFlow;\n var rect = flowEl.getBoundingClientRect();\n\n // 计算鼠标在流程图上的坐标（考虑当前偏移和缩放）\n var mouseX = (e.clientX - rect.left) / this.scale;\n var mouseY = (e.clientY - rect.top) / this.scale;\n\n // 获取当前偏移\n var currentLeft = parseInt(flowEl.style.left || '0');\n var currentTop = parseInt(flowEl.style.top || '0');\n\n // 计算新的偏移，保持鼠标所指位置不变\n var scaleChange = newScale - this.scale;\n var newLeft = currentLeft - mouseX * scaleChange;\n var newTop = currentTop - mouseY * scaleChange;\n\n // 应用新的缩放和偏移\n this.scale = newScale;\n flowEl.style.left = \"\".concat(newLeft, \"px\");\n flowEl.style.top = \"\".concat(newTop, \"px\");\n }\n },\n startPanning: function startPanning(e) {\n // 如果是点击流程节点，则不启用平移\n if (e.target.closest('.flow-node')) {\n return;\n }\n this.panEnabled = true;\n this.lastPosX = e.clientX;\n this.lastPosY = e.clientY;\n document.body.style.cursor = 'grabbing';\n },\n pan: function pan(e) {\n if (!this.panEnabled) return;\n var flowEl = this.$refs.processFlow;\n if (!flowEl) return;\n var dx = e.clientX - this.lastPosX;\n var dy = e.clientY - this.lastPosY;\n var currentTop = parseInt(flowEl.style.top || '0');\n var currentLeft = parseInt(flowEl.style.left || '0');\n flowEl.style.top = currentTop + dy + 'px';\n flowEl.style.left = currentLeft + dx + 'px';\n this.lastPosX = e.clientX;\n this.lastPosY = e.clientY;\n },\n stopPanning: function stopPanning() {\n this.panEnabled = false;\n document.body.style.cursor = 'default';\n },\n handleEdit: function handleEdit() {\n this.$message({\n message: \"\\u7F16\\u8F91\\u8282\\u70B9: \".concat(this.currentNode.label),\n type: 'info'\n });\n this.dialogVisible = false;\n },\n handleViewDetails: function handleViewDetails() {\n this.$message({\n message: \"\\u67E5\\u770B\\u8282\\u70B9\\u8BE6\\u60C5: \".concat(this.currentNode.label),\n type: 'success'\n });\n this.dialogVisible = false;\n }\n }\n};","map":{"version":3,"names":["name","data","dialogVisible","currentNode","scale","panEnabled","lastPosX","lastPosY","showWheelTip","userName","nodes","id","type","label","x","y","url","mounted","_this","setTimeout","methods","handleNodeClick","node","getNodeTypeName","types","zoomIn","zoomOut","resetZoom","$refs","processFlow","style","top","left","handleWheel","e","preventDefault","delta","Math","sign","deltaY","newScale","max","min","flowEl","rect","getBoundingClientRect","mouseX","clientX","mouseY","clientY","currentLeft","parseInt","currentTop","scaleChange","newLeft","newTop","concat","startPanning","target","closest","document","body","cursor","pan","dx","dy","stopPanning","handleEdit","$message","message","handleViewDetails"],"sources":["src/views/SalesOrderProcess.vue"],"sourcesContent":["<template>\n <div class=\"process-container\">\n <el-card class=\"process-intro\">\n <div class=\"intro-header\">\n <h2>销售订单业务流程</h2>\n <el-tag size=\"medium\" type=\"success\">{{ this.$route.query.userName }}</el-tag>\n </div>\n <div class=\"intro-content\">\n <div class=\"intro-description\">\n <p>本流程详细描述了从客户询价到签订合同的销售订单全过程，提高销售转化率和客户满意度。</p>\n </div>\n <div class=\"intro-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">12</div>\n <div class=\"stat-label\">总步骤</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">8</div>\n <div class=\"stat-label\">已完成</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">7天</div>\n <div class=\"stat-label\">平均耗时</div>\n </div>\n </div>\n </div>\n </el-card>\n\n <div class=\"process-flow-container\">\n <div class=\"zoom-controls\">\n <div class=\"zoom-btn\" @click=\"zoomIn\" title=\"放大\">\n <i class=\"el-icon-zoom-in\"></i>\n </div>\n <div class=\"zoom-btn\" @click=\"zoomOut\" title=\"缩小\">\n <i class=\"el-icon-zoom-out\"></i>\n </div>\n <div class=\"zoom-btn\" @click=\"resetZoom\" title=\"重置视图\">\n <i class=\"el-icon-refresh\"></i>\n </div>\n </div>\n \n <div class=\"zoom-tip\" v-if=\"scale !== 1\">\n <i class=\"el-icon-info-circle\"></i>\n <span>当前缩放: {{ Math.round(scale * 100) }}%</span>\n </div>\n \n <div class=\"wheel-tip\" v-if=\"showWheelTip\">\n <i class=\"el-icon-mouse\"></i>\n <span>使用鼠标滚轮缩放</span>\n </div>\n \n <div class=\"process-flow sales-process\" \n ref=\"processFlow\"\n :style=\"{ transform: `scale(${scale})` }\"\n @mousedown=\"startPanning\"\n @mousemove=\"pan\"\n @mouseup=\"stopPanning\"\n @mouseleave=\"stopPanning\"\n @wheel.prevent=\"handleWheel\">\n <!-- 流程图节点 -->\n <div \n v-for=\"node in nodes\" \n :key=\"node.id\"\n class=\"flow-node\"\n :class=\"[node.type]\"\n :style=\"{\n left: `${node.x}px`,\n top: `${node.y}px`\n }\"\n @click=\"handleNodeClick(node)\">\n <span class=\"node-label\">{{ node.label }}</span>\n </div>\n\n <!-- SVG流程线 -->\n <svg class=\"process-lines\" width=\"100%\" height=\"100%\">\n <!-- 定义箭头标记 -->\n <defs>\n <marker\n id=\"arrow\"\n viewBox=\"0 0 10 10\"\n refX=\"5\"\n refY=\"5\"\n markerWidth=\"6\"\n markerHeight=\"6\"\n orient=\"auto-start-reverse\">\n <path d=\"M 0 0 L 10 5 L 0 10 z\" />\n </marker>\n </defs>\n\n <!-- 主流程路径 -->\n <path \n d=\"M 400,80 L 400,120\" \n class=\"process-line main\" \n marker-end=\"url(#arrow)\" />\n <path \n d=\"M 400,180 L 400,220\" \n class=\"process-line main\" \n marker-end=\"url(#arrow)\" />\n <path \n d=\"M 400,280 L 400,320\" \n class=\"process-line main\" \n marker-end=\"url(#arrow)\" />\n <path \n d=\"M 400,380 L 400,420\" \n class=\"process-line main\" \n marker-end=\"url(#arrow)\" />\n <path \n d=\"M 400,480 L 400,520\" \n class=\"process-line main\" \n marker-end=\"url(#arrow)\" />\n <path \n d=\"M 400,580 L 400,620\" \n class=\"process-line main\" \n marker-end=\"url(#arrow)\" />\n\n <!-- 分支路径 -->\n <path \n d=\"M 430,650 L 570,650\" \n class=\"process-line\" \n marker-end=\"url(#arrow)\" />\n <path \n d=\"M 370,650 L 230,650\" \n class=\"process-line\" \n marker-end=\"url(#arrow)\" />\n <path \n d=\"M 600,680 L 600,720\" \n class=\"process-line\" \n marker-end=\"url(#arrow)\" />\n <path \n d=\"M 200,680 L 200,720\" \n class=\"process-line\" \n marker-end=\"url(#arrow)\" />\n\n <!-- 合并路径 -->\n <path \n d=\"M 600,780 L 600,820 Q 600,850 570,850 L 430,850\" \n class=\"process-line\" \n marker-end=\"url(#arrow)\" />\n <path \n d=\"M 200,780 L 200,820 Q 200,850 230,850 L 370,850\" \n class=\"process-line\" \n marker-end=\"url(#arrow)\" />\n\n <!-- 添加文本标签 -->\n <text x=\"500\" y=\"630\" class=\"path-label\">通过</text>\n <text x=\"300\" y=\"630\" class=\"path-label\">未通过</text>\n </svg>\n </div>\n </div>\n\n <!-- 节点详情对话框 -->\n <el-dialog\n :title=\"currentNode ? currentNode.label : ''\"\n :visible.sync=\"dialogVisible\"\n width=\"30%\">\n <div v-if=\"currentNode\" class=\"node-details\">\n <p><strong>节点ID:</strong> {{ currentNode.id }}</p>\n <p><strong>类型:</strong> {{ getNodeTypeName(currentNode.type) }}</p>\n <p><strong>URL:</strong> {{ currentNode.url }}</p>\n <div class=\"node-actions\">\n <el-button type=\"primary\" size=\"small\" @click=\"handleEdit\">编辑节点</el-button>\n <el-button type=\"success\" size=\"small\" @click=\"handleViewDetails\">查看详情</el-button>\n </div>\n </div>\n <span slot=\"footer\" class=\"dialog-footer\">\n <el-button @click=\"dialogVisible = false\">关闭</el-button>\n </span>\n </el-dialog>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'SalesOrderProcess',\n data() {\n return {\n dialogVisible: false,\n currentNode: null,\n scale: 1,\n panEnabled: false,\n lastPosX: 0,\n lastPosY: 0,\n showWheelTip: true,\n userName: '',\n nodes: [\n {\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: '/sales/start'\n },\n {\n id: 'inquiry',\n type: 'process',\n label: '客户询价',\n x: 400,\n y: 150,\n url: '/sales/inquiry'\n },\n {\n id: 'need-analysis', \n type: 'process',\n label: '需求分析', \n x: 400,\n y: 250,\n url: '/sales/analysis'\n },\n { \n id: 'solution', \n type: 'process', \n label: '方案制定', \n x: 400,\n y: 350,\n url: '/sales/solution'\n },\n {\n id: 'quotation', \n type: 'process',\n label: '报价单生成', \n x: 400, \n y: 450,\n url: '/sales/quotation'\n },\n { \n id: 'negotiation', \n type: 'process', \n label: '商务谈判', \n x: 400, \n y: 550,\n url: '/sales/negotiation'\n },\n { \n id: 'decision', \n type: 'condition', \n label: '客户决策', \n x: 400, \n y: 650,\n url: '/sales/decision'\n },\n {\n id: 'contract',\n type: 'process',\n label: '签订合同', \n x: 600,\n y: 650,\n url: '/sales/contract'\n },\n {\n id: 'reject-reason', \n type: 'process', \n label: '原因分析', \n x: 200, \n y: 650,\n url: '/sales/reject'\n },\n { \n id: 'followup', \n type: 'process',\n label: '持续跟进', \n x: 200, \n y: 750,\n url: '/sales/followup'\n },\n { \n id: 'production', \n type: 'process', \n label: '生产准备', \n x: 600,\n y: 750,\n url: '/sales/production'\n },\n {\n id: 'end-success', \n type: 'end',\n label: '流程完成', \n x: 400,\n y: 850,\n url: '/sales/completed'\n }\n ]\n }\n },\n mounted() {\n // 5秒后隐藏滚轮提示\n setTimeout(() => {\n this.showWheelTip = false;\n }, 5000);\n },\n methods: {\n handleNodeClick(node) {\n this.currentNode = node;\n this.dialogVisible = true;\n },\n getNodeTypeName(type) {\n const types = {\n 'start': '开始节点',\n 'end': '结束节点',\n 'process': '流程节点',\n 'condition': '条件节点'\n };\n return types[type] || type;\n },\n zoomIn() {\n if (this.scale < 2) {\n this.scale += 0.1;\n }\n },\n zoomOut() {\n if (this.scale > 0.5) {\n this.scale -= 0.1;\n }\n },\n resetZoom() {\n this.scale = 1;\n // 重置流程图位置\n if (this.$refs.processFlow) {\n this.$refs.processFlow.style.top = '0px';\n this.$refs.processFlow.style.left = '0px';\n }\n },\n handleWheel(e) {\n // 阻止默认滚动行为\n e.preventDefault();\n \n // 确定滚动方向（向上滚动为放大，向下滚动为缩小）\n const delta = Math.sign(e.deltaY) * -0.1;\n \n // 计算新的缩放值\n const newScale = Math.max(0.5, Math.min(2, this.scale + delta));\n \n // 如果缩放值在允许范围内，就应用它\n if (newScale !== this.scale) {\n // 计算鼠标位置相对于流程图容器的位置\n const flowEl = this.$refs.processFlow;\n const rect = flowEl.getBoundingClientRect();\n \n // 计算鼠标在流程图上的坐标（考虑当前偏移和缩放）\n const mouseX = (e.clientX - rect.left) / this.scale;\n const mouseY = (e.clientY - rect.top) / this.scale;\n \n // 获取当前偏移\n const currentLeft = parseInt(flowEl.style.left || '0');\n const currentTop = parseInt(flowEl.style.top || '0');\n \n // 计算新的偏移，保持鼠标所指位置不变\n const scaleChange = newScale - this.scale;\n const newLeft = currentLeft - mouseX * scaleChange;\n const newTop = currentTop - mouseY * scaleChange;\n \n // 应用新的缩放和偏移\n this.scale = newScale;\n flowEl.style.left = `${newLeft}px`;\n flowEl.style.top = `${newTop}px`;\n }\n },\n startPanning(e) {\n // 如果是点击流程节点，则不启用平移\n if (e.target.closest('.flow-node')) {\n return;\n }\n \n this.panEnabled = true;\n this.lastPosX = e.clientX;\n this.lastPosY = e.clientY;\n document.body.style.cursor = 'grabbing';\n },\n pan(e) {\n if (!this.panEnabled) return;\n \n const flowEl = this.$refs.processFlow;\n if (!flowEl) return;\n \n const dx = e.clientX - this.lastPosX;\n const dy = e.clientY - this.lastPosY;\n \n const currentTop = parseInt(flowEl.style.top || '0');\n const currentLeft = parseInt(flowEl.style.left || '0');\n \n flowEl.style.top = (currentTop + dy) + 'px';\n flowEl.style.left = (currentLeft + dx) + 'px';\n \n this.lastPosX = e.clientX;\n this.lastPosY = e.clientY;\n },\n stopPanning() {\n this.panEnabled = false;\n document.body.style.cursor = 'default';\n },\n handleEdit() {\n this.$message({\n message: `编辑节点: ${this.currentNode.label}`,\n type: 'info'\n });\n this.dialogVisible = false;\n },\n handleViewDetails() {\n this.$message({\n message: `查看节点详情: ${this.currentNode.label}`,\n type: 'success'\n });\n this.dialogVisible = false;\n }\n }\n}\n</script>\n\n<style>\n.process-container {\n padding: 20px;\n}\n\n.process-intro {\n margin-bottom: 30px;\n}\n\n.intro-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n}\n\n.intro-header h2 {\n margin: 0;\n color: #303133;\n}\n\n.intro-content {\n display: flex;\n justify-content: space-between;\n}\n\n.intro-description {\n flex: 1;\n padding-right: 30px;\n}\n\n.intro-description p {\n line-height: 1.6;\n color: #606266;\n}\n\n.intro-stats {\n display: flex;\n gap: 30px;\n}\n\n.stat-item {\n text-align: center;\n}\n\n.stat-value {\n font-size: 24px;\n font-weight: bold;\n color: #409EFF;\n}\n\n.stat-label {\n font-size: 14px;\n color: #909399;\n margin-top: 5px;\n}\n\n.process-flow-container {\n margin-top: 20px;\n border: 1px solid #ebeef5;\n border-radius: 4px;\n background-color: #fff;\n overflow: hidden;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n\n.process-flow {\n position: relative;\n height: 900px;\n padding: 20px;\n overflow: auto;\n transform-origin: top left;\n}\n\n.flow-node {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 120px;\n height: 60px;\n border-radius: 8px;\n background-color: #fff;\n border: 2px solid #409EFF;\n cursor: pointer;\n transform: translate(-50%, -50%);\n transition: all 0.3s;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n z-index: 10;\n}\n\n.flow-node:hover {\n box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);\n transform: translate(-50%, -50%) scale(1.05);\n}\n\n.flow-node.start {\n background-color: #f0f9eb;\n border-color: #67C23A;\n}\n\n.flow-node.end {\n background-color: #f0f9eb;\n border-color: #67C23A;\n}\n\n.flow-node.condition {\n border-color: #E6A23C;\n background-color: #fdf6ec;\n border-radius: 50%;\n width: 80px;\n height: 80px;\n}\n\n.node-label {\n font-size: 14px;\n text-align: center;\n padding: 8px;\n}\n\n.process-lines {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n}\n\n.process-line {\n stroke: #DCDFE6;\n stroke-width: 2px;\n fill: none;\n}\n\n.process-line.main {\n stroke: #409EFF;\n stroke-width: 2.5px;\n}\n\n/* Sales process specific styles */\n.sales-process .flow-node {\n border-color: #67C23A;\n}\n\n.sales-process .flow-node.condition {\n border-color: #67C23A;\n background-color: #f0f9eb;\n}\n\n.sales-process .process-line {\n stroke: #67C23A;\n}\n\n.sales-process .process-line.main {\n stroke: #67C23A;\n stroke-width: 2.5px;\n}\n\n.path-label {\n fill: #67C23A;\n font-size: 12px;\n font-weight: bold;\n}\n\n.node-details p {\n margin: 8px 0;\n}\n\n.node-actions {\n margin-top: 20px;\n display: flex;\n gap: 10px;\n}\n\n/* 缩放控制样式 */\n.zoom-controls {\n position: absolute;\n top: 20px;\n right: 20px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.zoom-btn {\n width: 36px;\n height: 36px;\n background-color: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n transition: all 0.3s;\n}\n\n.zoom-btn:hover {\n background-color: #f2f6fc;\n transform: translateY(-2px);\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);\n}\n\n.zoom-btn i {\n font-size: 18px;\n color: #409EFF;\n}\n\n.zoom-tip {\n position: absolute;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n background-color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 5px;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n z-index: 100;\n}\n\n.zoom-tip i {\n color: #409EFF;\n}\n\n.wheel-tip {\n position: absolute;\n top: 20px;\n left: 20px;\n background-color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 5px;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n z-index: 100;\n opacity: 0.8;\n transition: opacity 0.3s;\n}\n\n.wheel-tip:hover {\n opacity: 1;\n}\n\n.wheel-tip i {\n color: #67C23A;\n}\n\n/* Sales process specific zoom controls */\n.sales-process .zoom-btn i {\n color: #67C23A;\n}\n\n.sales-process .zoom-tip i {\n color: #67C23A;\n}\n\n/* 响应式样式 */\n@media screen and (max-width: 768px) {\n .process-flow {\n height: 700px;\n }\n \n .intro-content {\n flex-direction: column;\n }\n \n .intro-description {\n padding-right: 0;\n margin-bottom: 20px;\n }\n \n .flow-node {\n width: 100px;\n height: 50px;\n }\n \n .flow-node.condition {\n width: 70px;\n height: 70px;\n }\n \n .node-label {\n font-size: 12px;\n }\n \n .zoom-controls {\n bottom: 20px;\n right: 20px;\n top: auto;\n }\n \n .zoom-btn {\n width: 32px;\n height: 32px;\n }\n \n .zoom-btn i {\n font-size: 16px;\n }\n \n .zoom-tip {\n bottom: 20px;\n top: auto;\n font-size: 12px;\n }\n \n .wheel-tip {\n bottom: 20px;\n left: 20px;\n top: auto;\n font-size: 12px;\n }\n}\n</style> "],"mappings":";;;AA4KA;EACAA,IAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAC,aAAA;MACAC,WAAA;MACAC,KAAA;MACAC,UAAA;MACAC,QAAA;MACAC,QAAA;MACAC,YAAA;MACAC,QAAA;MACAC,KAAA,GACA;QACAC,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA;IAEA;EACA;EACAC,OAAA,WAAAA,QAAA;IAAA,IAAAC,KAAA;IACA;IACAC,UAAA;MACAD,KAAA,CAAAV,YAAA;IACA;EACA;EACAY,OAAA;IACAC,eAAA,WAAAA,gBAAAC,IAAA;MACA,K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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
