{"ast":null,"code":"import \"core-js/modules/es.math.sign.js\";\nimport \"core-js/modules/es.parse-int.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      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  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","nodes","id","type","label","x","y","url","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\">正常运行</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\">\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      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  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</style> "],"mappings":";;AA4KA;EACAA,IAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAC,aAAA;MACAC,WAAA;MACAC,KAAA;MACAC,UAAA;MACAC,QAAA;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;IACAC,eAAA,WAAAA,gBAAAC,IAAA;MACA,KAAAd,WAAA,GAAAc,IAAA;MACA,KAAAf,aAAA;IACA;IACAgB,eAAA,WAAAA,gBAAAR,IAAA;MACA,IAAAS,KAAA;QACA;QACA;QACA;QACA;M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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}