a8a2c0c48d
1. 创建scripts,outputs文件夹，生成 layout 代码位于 scripts 下的generate_layout.py当中，生成结果保存在 outputs 下的 generated_code.jsx 当中
2. 实现了根据 Prompt 生成指定的 react 代码
3. 需要根据前端传递给后端的相关prompt来完善功能，故暂时未暴露给后端接口
47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
JavaScript
```jsx
|
|
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%)', textAlign: 'center' }}>
|
|
<h1></h1>
|
|
<h2></h2>
|
|
</div>
|
|
|
|
{/* 活动亮点 */}
|
|
<div style={{ position: 'absolute', bottom: '25%', left: '50%', transform: 'translateX(-50%)', width: '80%' }}>
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<div></div>
|
|
<h3></h3>
|
|
<p></p>
|
|
</div>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<div></div>
|
|
<h3></h3>
|
|
<p></p>
|
|
</div>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<div></div>
|
|
<h3></h3>
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 页脚 */}
|
|
<div style={{ position: 'absolute', bottom: '5%', left: '50%', transform: 'translateX(-50%)', textAlign: 'center' }}>
|
|
<p></p>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DragonBoatFestivalPoster;
|
|
``` |