vueFlow.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887
  1. <template lang="">
  2. <div class="vueFlow">
  3. <div id="container"></div>
  4. <div id="stencil"></div>
  5. <div id="graph-container"></div>
  6. </div>
  7. <el-button @click="submitAll" type="primary">保存</el-button>
  8. <el-dialog
  9. :title="modalType == 'add' ? '新增' : '编辑'"
  10. v-model="dialogVisible"
  11. width="500"
  12. v-loading="loading"
  13. >
  14. <byForm
  15. :formConfig="formConfig"
  16. :formOption="formOption"
  17. v-model="formData.data"
  18. :rules="rules"
  19. ref="byform"
  20. >
  21. </byForm>
  22. <template #footer>
  23. <el-button @click="dialogVisible = false" size="large"
  24. >取 消</el-button
  25. >
  26. <el-button
  27. type="danger"
  28. @click="deleteFlowDefinitionNodeObj()"
  29. size="large"
  30. :loading="submitLoading"
  31. >
  32. </el-button>
  33. <el-button
  34. type="primary"
  35. @click="submitForm('byform')"
  36. size="large"
  37. :loading="submitLoading"
  38. >
  39. </el-button>
  40. </template>
  41. </el-dialog>
  42. </template>
  43. <script lang="ts" setup>
  44. import {
  45. defineComponent,
  46. ref,
  47. onMounted,
  48. onUnmounted,
  49. watch,
  50. reactive,
  51. toRefs,
  52. computed,
  53. nextTick,
  54. getCurrentInstance,
  55. } from 'vue'
  56. import byForm from '@/components/byForm/index'
  57. import { Graph, Shape } from '@antv/x6'
  58. import { Stencil } from '@antv/x6-plugin-stencil'
  59. import { Transform } from '@antv/x6-plugin-transform'
  60. import { Selection } from '@antv/x6-plugin-selection'
  61. import { Snapline } from '@antv/x6-plugin-snapline'
  62. import { Keyboard } from '@antv/x6-plugin-keyboard'
  63. import { Clipboard } from '@antv/x6-plugin-clipboard'
  64. import { History } from '@antv/x6-plugin-history'
  65. import Cookies from 'js-cookie'
  66. import { ElMessage, ElMessageBox } from "element-plus";
  67. defineProps({
  68. title: {
  69. type: Object,
  70. default: '',
  71. },
  72. });
  73. const { proxy } = getCurrentInstance()
  74. const internalInstance = getCurrentInstance()
  75. const dialogVisible = ref(false)
  76. const modalType = ref('add')
  77. const loading = ref(false)
  78. const submitLoading = ref(false)
  79. const formData = reactive({
  80. data: {
  81. userName: '',
  82. password: '',
  83. },
  84. })
  85. const byform = ref(null)
  86. const flowDefinitionNodeObj = ref({})
  87. const rules = reactive({
  88. nodeName: [
  89. {
  90. required: true,
  91. message: '请输入节点名称',
  92. trigger: 'blur',
  93. },
  94. ],
  95. handleObjectType: [
  96. {
  97. required: true,
  98. message: '办理人类型不能为空',
  99. trigger: 'blur',
  100. },
  101. ],
  102. handleObjectId: [
  103. {
  104. required: true,
  105. message: '办理人不能为空',
  106. trigger: 'blur',
  107. },
  108. ],
  109. })
  110. const formConfig = computed(() => {
  111. return [
  112. {
  113. type: 'input',
  114. prop: 'nodeName',
  115. label: '节点名称',
  116. required: true,
  117. itemType: 'text',
  118. },
  119. {
  120. type: 'select',
  121. prop: 'handleObjectType',
  122. label: '办理人',
  123. placeholder: '请选择办理人类型',
  124. required: true,
  125. itemWidth: 30,
  126. fn: (e) => {
  127. console.log(e)
  128. gethandleObjectList(e)
  129. },
  130. //1用户 2部门负责人 3部门总监 4岗位 5角色
  131. data: [
  132. {
  133. label: '用户',
  134. value: 1,
  135. },
  136. {
  137. label: '部门负责人',
  138. value: 2,
  139. },
  140. {
  141. label: '部门总监',
  142. value: 3,
  143. },
  144. {
  145. label: '岗位',
  146. value: 4,
  147. },
  148. {
  149. label: '角色',
  150. value: 5,
  151. },
  152. ],
  153. },
  154. // {
  155. // type: "treeSelect",
  156. // prop: "handleObjectId",
  157. // label: "请选择办理人",
  158. // itemWidth: 30,
  159. // data: [],
  160. // },
  161. {
  162. type: 'select',
  163. label: ' ',
  164. itemWidth: 30,
  165. prop: 'handleObjectId',
  166. placeholder: '请选择办理人',
  167. data: [],
  168. },
  169. {
  170. type: 'input',
  171. prop: 'handlingMethod',
  172. label: '节点后置执行方法',
  173. required: true,
  174. itemType: 'text',
  175. },
  176. {
  177. type: 'input',
  178. prop: 'jumpCondition',
  179. label: '条件表达式',
  180. required: true,
  181. itemType: 'text',
  182. },
  183. {
  184. type: 'checkbox',
  185. prop: 'nodeButtonSet',
  186. label: '节点按钮',
  187. //1通过 2驳回 3返回上一步 4退回到发起人
  188. data: [
  189. {
  190. label: '通过',
  191. value: 1,
  192. },
  193. {
  194. label: '驳回',
  195. value: 2,
  196. },
  197. {
  198. label: '返回上一步',
  199. value: 3,
  200. },
  201. {
  202. label: '退回到发起人',
  203. value: 4,
  204. },
  205. ],
  206. },
  207. {
  208. type: 'radio',
  209. prop: 'jobNumber11',
  210. label: '审批意见必填',
  211. data: [
  212. {
  213. label: '是',
  214. value: 1,
  215. },
  216. {
  217. label: '否',
  218. value: 0,
  219. },
  220. ],
  221. },
  222. ]
  223. })
  224. const formOption = reactive({
  225. inline: true,
  226. labelWidth: 100,
  227. itemWidth: 100,
  228. })
  229. let graph
  230. const submitForm = () => {
  231. byform.value.handleSubmit((valid) => {
  232. flowDefinitionNodeObj.value[formData.data.id] = formData.data
  233. console.log(flowDefinitionNodeObj.value)
  234. })
  235. }
  236. const submitFormData = {
  237. flowInfoId:null,
  238. titleTemplate:null,
  239. tenantId:Cookies.get('tenantId'),
  240. nodeObject:'',
  241. lineObject:'',
  242. flowDefinitionNodeList:[],
  243. }
  244. const submitAll = () => {
  245. if(proxy.title == '') {
  246. ElMessage({
  247. message: '请输入流程标题',
  248. type: 'warning',
  249. })
  250. return
  251. }
  252. submitFormData.titleTemplate = proxy.title
  253. const nodeList = graph.toJSON().cells
  254. console.log(nodeList)
  255. const isStart = false
  256. for (let i = 0; i < nodeList.length; i++) {
  257. const element = nodeList[i];
  258. //是办理节点
  259. if(element.id != 1 && element.shape != "edge") {
  260. console.log(element)
  261. if(!flowDefinitionNodeObj.value[element.id]) {
  262. ElMessage({
  263. message: '有节点未配置,请检查节点123123123',
  264. type: 'warning',
  265. })
  266. return
  267. }
  268. submitFormData.flowDefinitionNodeList.push({...flowDefinitionNodeObj.value[element.id],nodeType:2})
  269. }
  270. if(element.id == "1") {
  271. submitFormData.flowDefinitionNodeList.push({
  272. nodeName:'开始',
  273. nodeType:1,
  274. id:1,
  275. nodeButtonSet:'',
  276. parentId:0,
  277. })
  278. }
  279. //说明是线
  280. if(element.shape == "edge") {
  281. console.log(flowDefinitionNodeObj)
  282. if(!flowDefinitionNodeObj.value[element.target.cell]) {
  283. ElMessage({
  284. message: '有节点未配置,请检查节点',
  285. type: 'warning',
  286. })
  287. return
  288. }
  289. flowDefinitionNodeObj.value[element.target.cell].id = element.target.cell
  290. flowDefinitionNodeObj.value[element.target.cell].parentId = element.source.cell
  291. submitFormData.flowDefinitionNodeList = []
  292. }
  293. }
  294. addVersion()
  295. console.log(flowDefinitionNodeObj.value)
  296. }
  297. //选取一个随机不重复的正整数id
  298. const randomId = () => {
  299. const id = Math.floor(Math.random() * 100000000000000000)
  300. if(flowDefinitionNodeObj.value[id]) {
  301. randomId()
  302. } else {
  303. return id
  304. }
  305. }
  306. const addVersion = () => {
  307. const idObg = {}
  308. for (let i = 0; i < submitFormData.flowDefinitionNodeList.length; i++) {
  309. const element = submitFormData.flowDefinitionNodeList[i];
  310. if(isNaN(element.id)) {
  311. if(idObg[element.id]) {
  312. element.id = idObg[element.id]
  313. } else {
  314. const id = randomId()
  315. idObg[element.id] = id
  316. element.id = id
  317. }
  318. }
  319. if(isNaN(element.parentId) && element.nodeName != '开始') {
  320. if(idObg[element.parentId]) {
  321. element.parentId = idObg[element.parentId]
  322. } else {
  323. const id = randomId()
  324. idObg[element.parentId] = id
  325. element.parentId = id
  326. }
  327. }
  328. //nodeButtonSet转成字符串类型,用逗号隔开
  329. if(element.nodeButtonSet) {
  330. element.nodeButtonSet = element.nodeButtonSet.join(',')
  331. }
  332. }
  333. console.log(submitFormData)
  334. proxy.post('/flowDefinition/addVersion',submitFormData)
  335. .then((res) => {
  336. console.log(res)
  337. ElMessage({
  338. message: '保存成功',
  339. type: 'success',
  340. })
  341. })
  342. }
  343. //将组数里的id和parentId转换成整正整数类型
  344. const changeId = (arr) => {
  345. for (let i = 0; i < arr.length; i++) {
  346. const element = arr[i];
  347. element.id = parseInt(element.id)
  348. element.parentId = parseInt(element.parentId)
  349. }
  350. }
  351. const deleteFlowDefinitionNodeObj = (id) => {
  352. graph.removeNode(formData.data.id)
  353. delete flowDefinitionNodeObj.value[id]
  354. dialogVisible.value = false
  355. }
  356. const gethandleObjectList = (e) => {
  357. formData.data.handleObjectId = ''
  358. if(e === 1) {
  359. proxy.get('/tenantUser/list?pageNum=1&pageSize=1000&tenantId=' + Cookies.get('tenantId'),{})
  360. .then((res) => {
  361. formConfig.value[2].data = res.rows.map((item) => {
  362. return {
  363. label: item.nickName,
  364. value: item.userId,
  365. }
  366. })
  367. })
  368. }
  369. if(e === 3 || e === 2) {
  370. proxy.get('/tenantDept/list?pageNum=1&pageSize=1000&tenantId=' + Cookies.get('tenantId'),{})
  371. .then((res) => {
  372. formConfig.value[2].data =res.data.map(item=> {
  373. return {
  374. label: item.deptName,
  375. value: item.deptId,
  376. }
  377. })
  378. })
  379. }
  380. if(e === 4) {
  381. }
  382. if(e === 5) {
  383. proxy.get('/tenantRole/list?pageNum=1&pageSize=1000&tenantId=' + Cookies.get('tenantId'),{})
  384. .then((res) => {
  385. formConfig.value[2].data = res.rows.map((item) => {
  386. return {
  387. label: item.roleName,
  388. value: item.roleId,
  389. }
  390. })
  391. })
  392. }
  393. }
  394. const getTenantDept = () => {
  395. }
  396. getTenantDept()
  397. const recursive = (data) => {
  398. data.map((item) => {
  399. item.label = item.deptName;
  400. item.id = item.deptId;
  401. if (item.children) {
  402. recursive(item.children);
  403. } else {
  404. item.children = [];
  405. }
  406. });
  407. };
  408. const pushRoom = (port: any) => {
  409. console.log(port)
  410. if(port.node.label == '结束') {
  411. flowDefinitionNodeObj.value[port.node.id] = {
  412. nodeName:'结束',
  413. nodeType:99,
  414. id:port.id,
  415. nodeButtonSet:'',
  416. }
  417. }
  418. console.log(flowDefinitionNodeObj.value)
  419. }
  420. //用于存储流程定义节点数据
  421. const antvInit = () => {
  422. graph = new Graph({
  423. height: 600,
  424. container: document.getElementById('graph-container')!,
  425. grid: true,
  426. onPortRendered: pushRoom,
  427. mousewheel: {
  428. enabled: true,
  429. zoomAtMousePosition: true,
  430. modifiers: 'ctrl',
  431. minScale: 0.5,
  432. maxScale: 3,
  433. },
  434. connecting: {
  435. router: 'manhattan',
  436. connector: {
  437. name: 'rounded',
  438. args: {
  439. radius: 8,
  440. },
  441. },
  442. anchor: 'center',
  443. connectionPoint: 'anchor',
  444. allowBlank: false,
  445. snap: {
  446. radius: 20,
  447. },
  448. createEdge() {
  449. return new Shape.Edge({
  450. attrs: {
  451. line: {
  452. stroke: '#A2B1C3',
  453. strokeWidth: 2,
  454. targetMarker: {
  455. name: 'block',
  456. width: 12,
  457. height: 8,
  458. },
  459. },
  460. },
  461. zIndex: 0,
  462. })
  463. },
  464. validateConnection({ targetMagnet }) {
  465. return !!targetMagnet
  466. },
  467. },
  468. highlighting: {
  469. magnetAdsorbed: {
  470. name: 'stroke',
  471. args: {
  472. attrs: {
  473. fill: '#5F95FF',
  474. stroke: '#5F95FF',
  475. },
  476. },
  477. },
  478. },
  479. })
  480. const stencil = new Stencil({
  481. title: '流程图',
  482. target: graph,
  483. stencilGraphWidth: 200,
  484. stencilGraphHeight: 180,
  485. collapsable: true,
  486. groups: [
  487. {
  488. title: '基础流程图',
  489. name: 'group1',
  490. },
  491. ],
  492. layoutOptions: {
  493. columns: 2,
  494. columnWidth: 80,
  495. rowHeight: 55,
  496. },
  497. })
  498. document.getElementById('stencil')!.appendChild(stencil.container)
  499. // #region 使用插件
  500. graph
  501. .use(
  502. new Transform({
  503. resizing: true,
  504. rotating: true,
  505. })
  506. )
  507. .use(
  508. new Selection({
  509. enabled: true,
  510. rubberband: true,
  511. showNodeSelectionBox: true,
  512. })
  513. )
  514. .use(
  515. new Snapline({
  516. enabled: true,
  517. })
  518. )
  519. .use(
  520. new Keyboard({
  521. enabled: true,
  522. })
  523. )
  524. .use(
  525. new Clipboard({
  526. enabled: true,
  527. })
  528. )
  529. .use(
  530. new History({
  531. enabled: true,
  532. })
  533. )
  534. // 控制连接桩显示/隐藏
  535. const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
  536. for (let i = 0, len = ports.length; i < len; i += 1) {
  537. ports[i].style.visibility = show ? 'visible' : 'hidden'
  538. }
  539. }
  540. graph.on('node:mouseenter', () => {
  541. const container = document.getElementById('graph-container')!
  542. const ports = container.querySelectorAll(
  543. '.x6-port-body'
  544. ) as NodeListOf<SVGElement>
  545. showPorts(ports, true)
  546. })
  547. graph.on('node:mouseleave', () => {
  548. const container = document.getElementById('graph-container')!
  549. const ports = container.querySelectorAll(
  550. '.x6-port-body'
  551. ) as NodeListOf<SVGElement>
  552. showPorts(ports, false)
  553. })
  554. // #endregion
  555. graph.on('cell:click', ({ e, x, y, cell, view }) => {
  556. console.log(cell)
  557. if (cell.label === '开始' || cell.label === '结束' || cell.shape === 'edge') {
  558. return
  559. }
  560. if (flowDefinitionNodeObj.value[cell.id]) {
  561. formData.data = flowDefinitionNodeObj.value[cell.id]
  562. } else {
  563. formData.data = {
  564. id: cell.id,
  565. cell: cell,
  566. }
  567. }
  568. dialogVisible.value = true
  569. })
  570. // #region 初始化图形
  571. const ports = {
  572. groups: {
  573. top: {
  574. position: 'top',
  575. attrs: {
  576. circle: {
  577. r: 4,
  578. magnet: true,
  579. stroke: '#5F95FF',
  580. strokeWidth: 1,
  581. fill: '#fff',
  582. style: {
  583. visibility: 'hidden',
  584. },
  585. },
  586. },
  587. },
  588. right: {
  589. position: 'right',
  590. attrs: {
  591. circle: {
  592. r: 4,
  593. magnet: true,
  594. stroke: '#5F95FF',
  595. strokeWidth: 1,
  596. fill: '#fff',
  597. style: {
  598. visibility: 'hidden',
  599. },
  600. },
  601. },
  602. },
  603. bottom: {
  604. position: 'bottom',
  605. attrs: {
  606. circle: {
  607. r: 4,
  608. magnet: true,
  609. stroke: '#5F95FF',
  610. strokeWidth: 1,
  611. fill: '#fff',
  612. style: {
  613. visibility: 'hidden',
  614. },
  615. },
  616. },
  617. },
  618. left: {
  619. position: 'left',
  620. attrs: {
  621. circle: {
  622. r: 4,
  623. magnet: true,
  624. stroke: '#5F95FF',
  625. strokeWidth: 1,
  626. fill: '#fff',
  627. style: {
  628. visibility: 'hidden',
  629. },
  630. },
  631. },
  632. },
  633. },
  634. items: [
  635. {
  636. group: 'top',
  637. },
  638. {
  639. group: 'right',
  640. },
  641. {
  642. group: 'bottom',
  643. },
  644. {
  645. group: 'left',
  646. },
  647. ],
  648. }
  649. Graph.registerNode(
  650. 'custom-rect',
  651. {
  652. inherit: 'rect',
  653. width: 66,
  654. height: 36,
  655. attrs: {
  656. body: {
  657. strokeWidth: 1,
  658. stroke: '#5F95FF',
  659. fill: '#EFF4FF',
  660. },
  661. text: {
  662. fontSize: 12,
  663. fill: '#262626',
  664. },
  665. },
  666. ports: { ...ports },
  667. },
  668. true
  669. )
  670. Graph.registerNode(
  671. 'custom-polygon',
  672. {
  673. inherit: 'polygon',
  674. width: 66,
  675. height: 36,
  676. attrs: {
  677. body: {
  678. strokeWidth: 1,
  679. stroke: '#5F95FF',
  680. fill: '#EFF4FF',
  681. },
  682. text: {
  683. fontSize: 12,
  684. fill: '#262626',
  685. },
  686. },
  687. ports: {
  688. ...ports,
  689. items: [
  690. {
  691. group: 'top',
  692. },
  693. {
  694. group: 'bottom',
  695. },
  696. ],
  697. },
  698. },
  699. true
  700. )
  701. Graph.registerNode(
  702. 'custom-circle',
  703. {
  704. inherit: 'circle',
  705. width: 45,
  706. height: 45,
  707. attrs: {
  708. body: {
  709. strokeWidth: 1,
  710. stroke: '#5F95FF',
  711. fill: '#EFF4FF',
  712. },
  713. text: {
  714. fontSize: 12,
  715. fill: '#262626',
  716. },
  717. },
  718. ports: { ...ports },
  719. },
  720. true
  721. )
  722. Graph.registerNode(
  723. 'custom-image',
  724. {
  725. inherit: 'rect',
  726. width: 52,
  727. height: 52,
  728. markup: [
  729. {
  730. tagName: 'rect',
  731. selector: 'body',
  732. },
  733. {
  734. tagName: 'image',
  735. },
  736. {
  737. tagName: 'text',
  738. selector: 'label',
  739. },
  740. ],
  741. attrs: {
  742. body: {
  743. stroke: '#5F95FF',
  744. fill: '#5F95FF',
  745. },
  746. image: {
  747. width: 26,
  748. height: 26,
  749. refX: 13,
  750. refY: 16,
  751. },
  752. label: {
  753. refX: 3,
  754. refY: 2,
  755. textAnchor: 'left',
  756. textVerticalAnchor: 'top',
  757. fontSize: 12,
  758. fill: '#fff',
  759. },
  760. },
  761. ports: { ...ports },
  762. },
  763. true
  764. )
  765. let firstLi = document.createElement('li')
  766. firstLi.innerText = '指标详情'
  767. console.log(firstLi)
  768. const r1 = graph.createNode({
  769. shape: 'custom-rect',
  770. label: '开始',
  771. zIndex: 100,
  772. attrs: {
  773. body: {
  774. rx: 20,
  775. ry: 26,
  776. },
  777. },
  778. tools: [
  779. {
  780. name: 'button',
  781. args: {
  782. firstLi,
  783. },
  784. },
  785. ],
  786. })
  787. const r2 = graph.createNode({
  788. shape: 'custom-rect',
  789. label: '办理',
  790. })
  791. const r3 = graph.createNode({
  792. shape: 'custom-rect',
  793. attrs: {
  794. body: {
  795. rx: 6,
  796. ry: 6,
  797. },
  798. },
  799. label: '分支',
  800. })
  801. const r4 = graph.createNode({
  802. shape: 'custom-polygon',
  803. attrs: {
  804. body: {
  805. refPoints: '0,10 10,0 20,10 10,20',
  806. },
  807. },
  808. label: '结束',
  809. })
  810. stencil.load([ r2, r4], 'group1')
  811. graph.addNode({
  812. shape: 'custom-rect',
  813. label: '开始',
  814. id: 1,
  815. x: 500,
  816. y: 100,
  817. })
  818. }
  819. onMounted(() => {
  820. antvInit()
  821. //获取url router参数
  822. const router = useRouter();
  823. submitFormData.flowInfoId = router.currentRoute.value.query.id
  824. })
  825. </script>
  826. <style lang="scss">
  827. .x6-widget-stencil-title {
  828. display: none;
  829. }
  830. .x6-widget-stencil-content {
  831. top: 0 !important;
  832. }
  833. .vueFlow {
  834. position: relative;
  835. display: flex;
  836. justify-content: space-between;
  837. overflow: hidden;
  838. height: 600px;
  839. #stencil {
  840. position: absolute;
  841. top: 0;
  842. left: 0;
  843. z-index: 100;
  844. width: 200px;
  845. height: 500px;
  846. background: #fff;
  847. border-right: 1px solid #e8e8e8;
  848. }
  849. #container {
  850. }
  851. #graph-container {
  852. width: 100%;
  853. position: absolute;
  854. right: 0;
  855. top: 0;
  856. }
  857. }
  858. </style>