{"ast":null,"code":"export default {\n  name: 'ProcessFlow'\n};","map":{"version":3,"names":["name"],"sources":["src/views/EmployeeProcess.vue"],"sourcesContent":["<template>\n  <div class=\"process-container\">\n    <div class=\"process-flow\">\n      <div class=\"flow-chart\">\n        <!-- 面试节点 -->\n        <div class=\"node condition\">\n          <span>面试</span>\n          <div class=\"branch-line\">\n            <span class=\"branch-label\">Y</span>\n          </div>\n        </div>\n\n        <!-- 发录用通知书 -->\n        <div class=\"node process\">\n          <span>发录用通知书</span>\n        </div>\n\n        <!-- 携带入职资料 -->\n        <div class=\"node process\">\n          <span>携带入职资料在指定时间报道</span>\n        </div>\n\n        <!-- 交送入职资料 -->\n        <div class=\"node process with-branch\">\n          <span>交送入职资料</span>\n          <div class=\"branch-group right\">\n            <div class=\"branch-item\">身份证复印件</div>\n            <div class=\"branch-item\">学历证复印件</div>\n            <div class=\"branch-item\">2张1寸免冠照片</div>\n            <div class=\"branch-item\">其他证件复印件</div>\n          </div>\n        </div>\n\n        <!-- 核实 -->\n        <div class=\"node condition\">\n          <span>核实</span>\n          <div class=\"branch-line\">\n            <span class=\"branch-label\">Y</span>\n          </div>\n        </div>\n\n        <!-- 办理入职手续 -->\n        <div class=\"node process with-branch\">\n          <span>办理入职手续</span>\n          <div class=\"branch-group left\">\n            <div class=\"branch-item\">填写（员工信息登记表）</div>\n            <div class=\"branch-item\">签劳动合同</div>\n          </div>\n        </div>\n\n        <!-- 参观公司 -->\n        <div class=\"node process long\">\n          <span>参观公司并带到所在部门，介绍给其直接领导</span>\n        </div>\n\n        <!-- 讲解入职事项 -->\n        <div class=\"node process with-branch\">\n          <span>讲解入职事项及领取工作用品</span>\n          <div class=\"branch-group right\">\n            <div class=\"branch-item\">领取工牌</div>\n            <div class=\"branch-item\">领取办公用品</div>\n            <div class=\"branch-item\">录取指纹</div>\n            <div class=\"branch-item\">其他事宜</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'ProcessFlow'\n}\n</script>\n\n<style scoped>\n.process-container {\n  padding: 20px;\n}\n\n.process-flow {\n  margin: 40px auto;\n  padding: 40px;\n  background-color: #fff;\n  max-width: 1200px;\n}\n\n.flow-chart {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 30px;\n  position: relative;\n}\n\n/* 节点基础样式 */\n.node {\n  position: relative;\n  min-width: 150px;\n  padding: 15px 20px;\n  text-align: center;\n  font-size: 14px;\n  color: #333;\n  margin: 0 auto;\n}\n\n/* 条件判断节点（菱形） */\n.node.condition {\n  width: 100px;\n  height: 100px;\n  background-color: #fff;\n  border: 2px solid #333;\n  transform: rotate(45deg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.node.condition span {\n  transform: rotate(-45deg);\n  white-space: nowrap;\n}\n\n/* 普通流程节点（圆角矩形） */\n.node.process {\n  background-color: #fff;\n  border: 2px solid #333;\n  border-radius: 4px;\n  max-width: 300px;\n}\n\n/* 长文本节点 */\n.node.process.long {\n  max-width: 400px;\n}\n\n/* 分支线和标签 */\n.branch-line {\n  position: absolute;\n  width: 2px;\n  height: 30px;\n  background-color: #333;\n  bottom: -30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.branch-label {\n  position: absolute;\n  bottom: 0;\n  left: -15px;\n  color: #333;\n  font-size: 14px;\n}\n\n/* 分支组样式 */\n.branch-group {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n\n.branch-group.right {\n  left: calc(100% + 40px);\n}\n\n.branch-group.left {\n  right: calc(100% + 40px);\n}\n\n/* 分支项样式 */\n.branch-item {\n  background-color: #fff;\n  border: 1px solid #333;\n  padding: 8px 15px;\n  border-radius: 4px;\n  white-space: nowrap;\n  position: relative;\n  font-size: 13px;\n}\n\n/* 分支连接线 */\n.with-branch .branch-group.right .branch-item::before {\n  content: '';\n  position: absolute;\n  left: -40px;\n  top: 50%;\n  width: 40px;\n  height: 2px;\n  background-color: #333;\n}\n\n.with-branch .branch-group.left .branch-item::before {\n  content: '';\n  position: absolute;\n  right: -40px;\n  top: 50%;\n  width: 40px;\n  height: 2px;\n  background-color: #333;\n}\n\n/* 垂直连接线 */\n.node:not(:last-child)::after {\n  content: '';\n  position: absolute;\n  width: 2px;\n  height: 30px;\n  background-color: #333;\n  bottom: -30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n/* 响应式样式 */\n@media screen and (max-width: 768px) {\n  .process-flow {\n    padding: 20px;\n  }\n\n  .node {\n    min-width: 120px;\n    padding: 10px 15px;\n    font-size: 13px;\n  }\n\n  .node.condition {\n    width: 80px;\n    height: 80px;\n  }\n\n  .branch-group.right,\n  .branch-group.left {\n    position: relative;\n    left: auto;\n    right: auto;\n    margin-top: 20px;\n  }\n\n  .branch-item {\n    font-size: 12px;\n    padding: 6px 10px;\n  }\n}\n</style> "],"mappings":"AAuEA;EACAA,IAAA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}