UI布局 效果
<img src="data:image/png;base64,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