P204_SwapUI_本节作者：[@小符](httpsx.comsmallfu666)

文档摘要

本节作者：@小符这一讲我们来实现 Wtfswap 的 Swap 部分的 UI。设计稿如下所示： ui Swap 页面是 Wtfswap 的核心页面，先来拆分下 Swap 页面，Swap 页面首先引入了 Layout 的头部，然后在页面中间实现了 Swap UI；搭建 Swap 页面需要多个组件，主要使用 Card 组件完成整个框架的搭建。这一讲课完整的代码可以在这里获取。修改 , 先引入组件搭建基础框架：然后新建文件，初始化样式：在中使用样式：这样就搭建好了基础的 Swap 页面布局，然后在此布局上进行细化。 swap1 接下来使用其他组件完善页面，选择器使用 Antd Design Web3 的 TokenSelect 组件，然后搭配，，，等组件。