#

luxiaotao1123

2024-03-02 ace6f9ce2811165c1617db0c9efdf6641d1ffe89

#

 zy-asrs-flow/src/pages/map/index.css

@@ -7,6 +7,10 @@
    min-height: 50vh;
}

.ant-layout-header {
    background: transparent;
}

* {
    box-sizing: border-box;
}

 zy-asrs-flow/src/pages/map/index.jsx

@@ -1,23 +1,27 @@
import * as React from 'react'
import * as PIXI from 'pixi.js';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { Layout } from 'antd';
import { Layout, Button, Flex, } from 'antd';
const { Header, Content } = Layout;
import './index.css'
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => {
    let dark = token.colorBgBase==='#000';
    return {
        layout: {
            // overflow: 'hidden',
        },
        header: {
            textAlign: 'center',
            color: '#fff',
            height: 64,
            paddingInline: 48,
            lineHeight: '64px',
            backgroundColor: '#4096ff',
            padding: 0,
        },
        flex: {
            width: '100%',
            height: '100%',
            padding: '0 30px',
        },
        content: {
            backgroundColor: '#F8FAFB',
@@ -69,7 +73,6 @@
            const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');
            const bunny = new PIXI.Sprite(texture);
            bunny.anchor.set(0.5);
            console.log(app.screen);
            bunny.x = app.screen.width / 2;
            bunny.y = app.screen.height / 2;

@@ -78,6 +81,10 @@
            app.ticker.add((delta) => {
                bunny.rotation -= 0.01 * delta;
            });

            return () => {
                app.destroy(true, true);
            }
        }, 300)

    }, []);
@@ -91,7 +98,13 @@
    return (
        <>
            <Layout className={styles.layout}>
                <Header className={styles.header}>Header</Header>
                <Header className={styles.header}>
                    <Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>
                        <Button size={'large'}>Primary</Button>
                        <Button size={'large'}>Primary</Button>
                        <Button size={'large'}>Primary</Button>
                    </Flex>
                </Header>
                <Content ref={contentRef} className={styles.content}>
                    <div ref={mapRef}>
                    </div>