如何使用 Vue/Uniapp 实现美观实用的“选框”样式页面元素？

vue/uniapp页面设计优化

在vue/uniapp中，为实现类似“选框”样式的页面元素，可采用以下优化方案：

1. 创建层叠布局（flex layout）：

   • 设置外层容器的显示方式为“flex”，并启用水平排列。

2. 定义“选框”元素：

   • 为每个“选框”创建一个子元素。
   • 设置其宽度为 100%，高度为指定的选项卡高度，并在其中放置选项卡文本。

3. 设置“激活”样式：

   • 给当前激活的选项卡添加“active”类。
   • 在 css 中，为“active”类设置不同的背景色和文本颜色，使其突出显示。

4. 添加圆角效果：

   • 为容器和选项卡元素添加圆角边框，使其呈现圆角效果。

5. 调整字体大小和颜色：

   • 根据需要调整选项卡文本的字体大小和颜色。

以下是经过优化的 html 和 css 代码：

<div class="tabs">
    <div class="tab active">日</div>
    <div class="tab">周</div>
    <div class="tab">月</div>
    <div class="tab">年</div>
</div>

.tabs {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background-color: #E1E1E1;
    border-radius: 82px;
    height: 82px;
}

.tab {
    font-size: 36px;
    color: rgba(69, 69, 68, 1);
    width: 100%;
    text-align: center;
    line-height: 82px;
}

.tab.active {
    color: rgba(255, 255, 255, 1);
    background-color: #31BDEC;
    border-radius: 82px;
}

使用此优化方案，您可以轻松创建美观实用的“选框”样式页面元素，提升用户体验。