| 1 |
- {"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":[]}
|
