| | |
| | | <section class="section-card section-card--top"> |
| | | <article class="module-title module-title--basic"> |
| | | <div class="module-title__icon"> |
| | | <span class="module-title__icon-shape"> |
| | | <svg-icon icon-class="system" /> |
| | | </span> |
| | | <img :src="jichupeizhi" alt="基础配置" /> |
| | | </div> |
| | | <div class="module-title__text"> |
| | | <h2>基础配置</h2> |
| | |
| | | <div class="flow-item"> |
| | | <article class="flow-node"> |
| | | <div class="flow-node__icon"> |
| | | <svg-icon :icon-class="item.icon" /> |
| | | <img :src="item.icon" :alt="item.name" /> |
| | | </div> |
| | | <span>{{ item.name }}</span> |
| | | </article> |
| | |
| | | <div class="panel-card panel-card--sale"> |
| | | <article class="module-title module-title--sale"> |
| | | <div class="module-title__icon"> |
| | | <span class="module-title__icon-shape"> |
| | | <svg-icon icon-class="chart" /> |
| | | </span> |
| | | <img :src="xiaoshoupeizhi" alt="销售配置" /> |
| | | </div> |
| | | <div class="module-title__text"> |
| | | <h2>销售配置</h2> |
| | |
| | | <div class="grid-cell"> |
| | | <article class="flow-node"> |
| | | <div class="flow-node__icon" :class="{ 'flow-node__icon--accent': item.accent }"> |
| | | <svg-icon :icon-class="item.icon" /> |
| | | <img :src="item.icon" :alt="item.name" /> |
| | | </div> |
| | | <span>{{ item.name }}</span> |
| | | </article> |
| | |
| | | </div> |
| | | |
| | | <div class="ai-stage"> |
| | | <div class="ai-stage__connector ai-stage__connector--top"></div> |
| | | <div class="ai-stage__connector ai-stage__connector--left"></div> |
| | | <div class="ai-stage__connector ai-stage__connector--right"></div> |
| | | <div class="ai-stage__connector ai-stage__connector--bottom"></div> |
| | | |
| | | <div class="ai-stage__ring"> |
| | | <div class="ai-stage__core"> |
| | | <img :src="aiHead" alt="AI 核心引擎" /> |
| | |
| | | <div class="panel-card panel-card--purchase"> |
| | | <article class="module-title module-title--purchase"> |
| | | <div class="module-title__icon"> |
| | | <span class="module-title__icon-shape"> |
| | | <svg-icon icon-class="shopping" /> |
| | | </span> |
| | | <img :src="caigoupeizhi" alt="采购配置" /> |
| | | </div> |
| | | <div class="module-title__text"> |
| | | <h2>采购配置</h2> |
| | |
| | | <div class="grid-cell"> |
| | | <article class="flow-node"> |
| | | <div class="flow-node__icon" :class="{ 'flow-node__icon--accent': item.accent }"> |
| | | <svg-icon :icon-class="item.icon" /> |
| | | <img :src="item.icon" :alt="item.name" /> |
| | | </div> |
| | | <span>{{ item.name }}</span> |
| | | </article> |
| | |
| | | <section class="section-card section-card--bottom"> |
| | | <article class="module-title module-title--produce"> |
| | | <div class="module-title__icon"> |
| | | <span class="module-title__icon-shape"> |
| | | <svg-icon icon-class="build" /> |
| | | </span> |
| | | <img :src="shengchanpeizhi" alt="生产配置" /> |
| | | </div> |
| | | <div class="module-title__text"> |
| | | <h2>生产配置</h2> |
| | |
| | | <div class="flow-item"> |
| | | <article class="flow-node"> |
| | | <div class="flow-node__icon" :class="{ 'flow-node__icon--green': item.green, 'flow-node__icon--accent': item.accent }"> |
| | | <svg-icon :icon-class="item.icon" /> |
| | | <img :src="item.icon" :alt="item.name" /> |
| | | </div> |
| | | <span>{{ item.name }}</span> |
| | | </article> |
| | |
| | | <section class="section-card section-card--bottom"> |
| | | <article class="module-title module-title--store"> |
| | | <div class="module-title__icon"> |
| | | <span class="module-title__icon-shape"> |
| | | <svg-icon icon-class="redis" /> |
| | | </span> |
| | | <img :src="cangchuwuliu" alt="仓储物流" /> |
| | | </div> |
| | | <div class="module-title__text"> |
| | | <h2>仓储物流</h2> |
| | |
| | | <div class="flow-item"> |
| | | <article class="flow-node"> |
| | | <div class="flow-node__icon"> |
| | | <svg-icon :icon-class="item.icon" /> |
| | | <img :src="item.icon" :alt="item.name" /> |
| | | </div> |
| | | <span>{{ item.name }}</span> |
| | | </article> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import aiHead from '@/assets/images/head.svg' |
| | | import aiHead from '@/assets/system/ai.svg' |
| | | import jichupeizhi from '@/assets/system/jichupeizhi.svg' |
| | | import xiaoshoupeizhi from '@/assets/system/xiaoshoupeizhi.svg' |
| | | import caigoupeizhi from '@/assets/system/caigoupeizhi.svg' |
| | | import shengchanpeizhi from '@/assets/system/shengchanpeizhi.svg' |
| | | import cangchuwuliu from '@/assets/system/cangchuwuliu.svg' |
| | | |
| | | import yonghuguanli from '@/assets/system/yonghuguanli.svg' |
| | | import shenpiguanli from '@/assets/system/shenpiguanli.svg' |
| | | import chanpinweihu from '@/assets/system/chanpinweihu.svg' |
| | | |
| | | import kehudangan from '@/assets/system/kehudangan.svg' |
| | | import xiaoshoubaojia from '@/assets/system/xiaoshoubaojia.svg' |
| | | import xiaoshoutaizhang from '@/assets/system/xiaoshoutaizhang.svg' |
| | | import fahuotaizhang from '@/assets/system/fahuotaizhang.svg' |
| | | import xiaoshoutuihuo from '@/assets/system/xiaoshoutuihuo.svg' |
| | | |
| | | import gongyingshangdangan from '@/assets/system/gongyingshangdangan.svg' |
| | | import caigoutaizhang from '@/assets/system/caigoutaizhang.svg' |
| | | import caigoutuihuo from '@/assets/system/caigoutuihuo.svg' |
| | | import gongyingshangwanglai from '@/assets/system/gongyingshangwanglai.svg' |
| | | import caigoubaobiao from '@/assets/system/caigoubaobiao.svg' |
| | | |
| | | import gongxu from '@/assets/system/gongxu.svg' |
| | | import BOM from '@/assets/system/BOM.svg' |
| | | import shengchandingdan from '@/assets/system/shengchandingdan.svg' |
| | | import shengchanpaichan from '@/assets/system/shengchanpaichan.svg' |
| | | import baogong from '@/assets/system/baogong.svg' |
| | | import baogongtaizhang from '@/assets/system/baogongtaizhang.svg' |
| | | import shengchanheduan from '@/assets/system/shengchanheduan.svg' |
| | | |
| | | import rukuguanli from '@/assets/system/rukuguanli.svg' |
| | | import chukuguanli from '@/assets/system/chukuguanli.svg' |
| | | import kucunguanli from '@/assets/system/kucunguanli.svg' |
| | | |
| | | const basicFlow = [ |
| | | { key: 'basic-role', name: '角色管理', icon: 'user' }, |
| | | { key: 'basic-user', name: '用户管理', icon: 'peoples' }, |
| | | { key: 'basic-post', name: '岗位管理', icon: 'tree' }, |
| | | { key: 'basic-dept', name: '部门管理', icon: 'tree' }, |
| | | { key: 'basic-product', name: '产品维护', icon: 'table' }, |
| | | { key: 'basic-approval', name: '审批管理', icon: 'form' } |
| | | { key: 'basic-user', name: '用户管理', icon: yonghuguanli }, |
| | | { key: 'basic-approval', name: '审批管理', icon: shenpiguanli }, |
| | | { key: 'basic-product', name: '产品维护', icon: chanpinweihu } |
| | | ] |
| | | |
| | | const saleFlow = [ |
| | | { key: 'sale-customer', name: '客户档案', icon: 'peoples', arrow: 'right' }, |
| | | { key: 'sale-quote', name: '销售报价', icon: 'form', arrow: 'right' }, |
| | | { key: 'sale-ledger', name: '销售台账', icon: 'monitor', arrow: 'right' }, |
| | | { key: 'sale-delivery', name: '发货台账', icon: 'clipboard', arrow: 'right' }, |
| | | { key: 'sale-return', name: '销售退货', icon: 'nested', accent: true } |
| | | { key: 'sale-customer', name: '客户档案', icon: kehudangan, arrow: 'right' }, |
| | | { key: 'sale-quote', name: '销售报价', icon: xiaoshoubaojia, arrow: 'right' }, |
| | | { key: 'sale-ledger', name: '销售台账', icon: xiaoshoutaizhang, arrow: 'right' }, |
| | | { key: 'sale-delivery', name: '发货台账', icon: fahuotaizhang, arrow: 'right' }, |
| | | { key: 'sale-return', name: '销售退货', icon: xiaoshoutuihuo, accent: true } |
| | | ] |
| | | |
| | | const purchaseFlow = [ |
| | | { key: 'purchase-supplier', name: '供应商档案', icon: 'people', arrow: 'right' }, |
| | | { key: 'purchase-ledger', name: '采购台账', icon: 'monitor', arrow: 'right' }, |
| | | { key: 'purchase-return', name: '采购退货', icon: 'nested', accent: true }, |
| | | { key: 'purchase-contact', name: '供应商往来', icon: 'peoples', arrow: 'right' }, |
| | | { key: 'purchase-report', name: '采购报表', icon: 'chart' } |
| | | { key: 'purchase-supplier', name: '供应商档案', icon: gongyingshangdangan, arrow: 'right' }, |
| | | { key: 'purchase-ledger', name: '采购台账', icon: caigoutaizhang, arrow: 'right' }, |
| | | { key: 'purchase-return', name: '采购退货', icon: caigoutuihuo, accent: true }, |
| | | { key: 'purchase-contact', name: '供应商往来', icon: gongyingshangwanglai, arrow: 'right' }, |
| | | { key: 'purchase-report', name: '采购报表', icon: caigoubaobiao } |
| | | ] |
| | | |
| | | const produceFlow = [ |
| | | { key: 'produce-process', name: '工序', icon: 'list' }, |
| | | { key: 'produce-bom', name: 'BOM', icon: 'monitor' }, |
| | | { key: 'produce-route', name: '工艺路线', icon: 'tree', green: true }, |
| | | { key: 'produce-order', name: '生产订单', icon: 'peoples', green: true }, |
| | | { key: 'produce-schedule', name: '生产排产', icon: 'time' }, |
| | | { key: 'produce-work', name: '生产报工', icon: 'edit' }, |
| | | { key: 'produce-ledger', name: '报工台账', icon: 'form' }, |
| | | { key: 'produce-cost', name: '生产核算', icon: 'money', accent: true } |
| | | { key: 'produce-process', name: '工序', icon: gongxu }, |
| | | { key: 'produce-bom', name: 'BOM', icon: BOM }, |
| | | { key: 'produce-order', name: '生产订单', icon: shengchandingdan, green: true }, |
| | | { key: 'produce-schedule', name: '生产排产', icon: shengchanpaichan }, |
| | | { key: 'produce-work', name: '生产报工', icon: baogong }, |
| | | { key: 'produce-ledger', name: '报工台账', icon: baogongtaizhang }, |
| | | { key: 'produce-cost', name: '生产核算', icon: shengchanheduan, accent: true } |
| | | ] |
| | | |
| | | const storeFlow = [ |
| | | { key: 'store-in', name: '入库管理', icon: 'download' }, |
| | | { key: 'store-out', name: '出库管理', icon: 'guide' }, |
| | | { key: 'store-stock', name: '库存管理', icon: 'redis-list' } |
| | | { key: 'store-in', name: '入库管理', icon: rukuguanli }, |
| | | { key: 'store-out', name: '出库管理', icon: chukuguanli }, |
| | | { key: 'store-stock', name: '库存管理', icon: kucunguanli } |
| | | ] |
| | | </script> |
| | | |
| | |
| | | } |
| | | |
| | | .module-title__icon { |
| | | width: 44px; |
| | | height: 50px; |
| | | position: relative; |
| | | width: 72px; |
| | | height: 72px; |
| | | display: grid; |
| | | place-items: center; |
| | | transform: translateY(-1px); |
| | | filter: drop-shadow(0 10px 14px rgba(82, 125, 211, 0.28)) |
| | | drop-shadow(0 4px 8px rgba(82, 125, 211, 0.18)); |
| | | } |
| | | |
| | | .module-title__icon-shape { |
| | | .module-title__icon img { |
| | | width: 100%; |
| | | height: 100%; |
| | | clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); |
| | | display: grid; |
| | | place-items: center; |
| | | color: #fff; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .module-title__text h2 { |
| | |
| | | color: #7f8ba3; |
| | | } |
| | | |
| | | .module-title--basic .module-title__icon { |
| | | filter: drop-shadow(0 10px 14px rgba(47, 110, 236, 0.28)) |
| | | drop-shadow(0 4px 8px rgba(47, 110, 236, 0.18)); |
| | | } |
| | | |
| | | .module-title--basic .module-title__icon-shape { |
| | | background: linear-gradient(135deg, #2069ff 0%, #5bb0ff 100%); |
| | | } |
| | | |
| | | .module-title--sale .module-title__icon { |
| | | filter: drop-shadow(0 10px 14px rgba(123, 66, 255, 0.24)) |
| | | drop-shadow(0 4px 8px rgba(123, 66, 255, 0.16)); |
| | | } |
| | | |
| | | .module-title--sale .module-title__icon-shape { |
| | | background: linear-gradient(135deg, #7b42ff 0%, #a172ff 100%); |
| | | } |
| | | |
| | | .module-title--purchase .module-title__icon { |
| | | filter: drop-shadow(0 10px 14px rgba(52, 161, 255, 0.24)) |
| | | drop-shadow(0 4px 8px rgba(52, 161, 255, 0.16)); |
| | | } |
| | | |
| | | .module-title--purchase .module-title__icon-shape { |
| | | background: linear-gradient(135deg, #34a1ff 0%, #66c6ff 100%); |
| | | } |
| | | |
| | | .module-title--produce .module-title__icon { |
| | | filter: drop-shadow(0 10px 14px rgba(36, 183, 118, 0.24)) |
| | | drop-shadow(0 4px 8px rgba(36, 183, 118, 0.16)); |
| | | } |
| | | |
| | | .module-title--produce .module-title__icon-shape { |
| | | background: linear-gradient(135deg, #24b776 0%, #62d49d 100%); |
| | | } |
| | | |
| | | .module-title--store .module-title__icon { |
| | | filter: drop-shadow(0 10px 14px rgba(119, 81, 255, 0.24)) |
| | | drop-shadow(0 4px 8px rgba(119, 81, 255, 0.16)); |
| | | } |
| | | |
| | | .module-title--store .module-title__icon-shape { |
| | | background: linear-gradient(135deg, #7751ff 0%, #9b76ff 100%); |
| | | } |
| | | |
| | | .flow-row { |
| | | display: flex; |
| | |
| | | place-items: center; |
| | | color: #3f76f3; |
| | | font-size: 24px; |
| | | } |
| | | |
| | | .flow-node__icon img { |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: contain; |
| | | } |
| | | |
| | | .flow-node__icon--accent { |
| | |
| | | font-size: 14px; |
| | | font-weight: 700; |
| | | box-shadow: 0 10px 20px rgba(118, 147, 204, 0.08); |
| | | } |
| | | |
| | | .ai-stage__connector { |
| | | position: absolute; |
| | | border-color: rgba(145, 181, 247, 0.5); |
| | | border-style: dashed; |
| | | border-width: 1px; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .ai-stage__connector--top { |
| | | top: 24px; |
| | | left: 50%; |
| | | width: 0; |
| | | height: 64px; |
| | | border-left-width: 1px; |
| | | transform: translateX(-50%); |
| | | } |
| | | |
| | | .ai-stage__connector--left, |
| | | .ai-stage__connector--right { |
| | | top: 148px; |
| | | width: 74px; |
| | | border-top-width: 1px; |
| | | } |
| | | |
| | | .ai-stage__connector--left { |
| | | left: 18px; |
| | | } |
| | | |
| | | .ai-stage__connector--right { |
| | | right: 18px; |
| | | } |
| | | |
| | | .ai-stage__connector--bottom { |
| | | bottom: 32px; |
| | | left: 50%; |
| | | width: 0; |
| | | height: 64px; |
| | | border-left-width: 1px; |
| | | transform: translateX(-50%); |
| | | } |
| | | |
| | | @media (max-width: 1440px) { |