账本 1.01 版本：样式优化升级分享

在开发账本应用的过程中，持续的样式优化对于提升用户体验起着至关重要的作用。本次账本 1.02 版本着重对样式进行了全面优化，让应用在视觉上更加美观、操作上更加便捷。下面就为大家分享一些关键代码及优化思路。话不多说，先上效果图。

一、整体布局优化

 

在index.vue和add.vue中，整体布局都采用了flex布局方式。以index.vue为例：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(to bottom, #e6f7ff, #ffffff);
}

通过flex-direction: column将页面元素垂直排列，height: 100vh使容器占满整个视口高度，justify-content: space-between确保元素在垂直方向上均匀分布，背景渐变则为页面增添了视觉层次感。

在add.vue中同样如此：

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 10