本文已参与「新人创作礼」活动.一起开启掘金创作之路。
上一篇文章我们完成了选词填空的页面以及题目页面，这次我们来完成写作以及翻译的页面。
- 我们要完成的写作练习页面大致为下面这个样子：
-
首先，标题以及倒计时的写法之前以及介绍过了，倒计时时一个uni-app的组件。然后时题目部分，也没什么特别的，注意作文题目那里字体加粗就行，然后是用户输入答案的输入框，这里我用到了uni-app的uni-section组件以及uni-easyinput组件，具体的链接如：uniapp.dcloud.net.cn/component/u… ，uniapp.dcloud.net.cn/component/u…
-
这个easyinput是一个增强输入框，我们需要将他的属性一一加上去，这样才可以输入更多的内容，首先，我们先设置这个输入框的高度随着用户输入的字数长度自适应，我们要加上autoHeight这个属性，然后 v-model="value"来绑定这个value值，用来获取用户输入的数据，这样我们的答案输入框就设置完成了。
-
查看答案和译文部分，这里我们使用到了 uni-collapse折叠面板组件，具体的链接如：uniapp.dcloud.net.cn/component/u… ，我们设置用户点击这个查看答案以及译文就下拉显示答案，这里我们需要绑定一个:show-animation="true"属性，加上这个属性之后我们点击查看答案的时候就会有一个下拉动画的出现，提升了用户的体验感。
-
然后我们最后还有一个译文部分，大致内容如下：
这里就有一个上边框与答案划分开来就行，border-top设置上边框。
6.同理，英汉互译部分也是这个道理，具体展示效果如图：
