45ecb5cb4b
1. 创建scripts,outputs文件夹，生成 layout 代码位于 scripts 下的generate_layout.py当中，生成结果保存在 outputs 下的 generated_code.jsx 当中 2. 实现了根据 Prompt 生成指定的 react 代码 3. 需要根据前端传递给后端的相关prompt来完善功能，故暂时未暴露给后端接口
51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
|
|
const DragonBoatFestivalPoster = () => {
|
|
return (
|
|
<div style={{ position: 'relative', width: '1080px', height: '1920px' }}>
|
|
{/* 背景图层 */}
|
|
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}></div>
|
|
|
|
{/* 主体图层 */}
|
|
<div style={{ position: 'absolute', top: '25%', left: '50%', transform: 'translate(-50%, -50%)' }}>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
|
|
{/* 活动亮点 */}
|
|
<div style={{
|
|
position: 'absolute',
|
|
bottom: '25%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, 0)',
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
gap: '20px'
|
|
}}>
|
|
<div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 页脚 */}
|
|
<div style={{ position: 'absolute', bottom: 0, left: '50%', transform: 'translateX(-50%)' }}>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DragonBoatFestivalPoster; |