如何空tab1中每条数据的间距

要在 `tab1` 中增加每条数据之间的间距，可以通过调整 CSS 样式来实现。具体来说，可以在 `.text-item` 类中设置 `margin` 或 `padding` 属性。

以下是如何在现有样式基础上进行修改：

1. 找到 `.text-item` 类，并在其定义中添加 `margin` 或 `padding` 属性。

.text-item {
    margin-bottom: 20px; /* 在每条数据之间添加 20px 的间距 */
    padding: 10px; /* 可以同时添加内边距以进一步美化布局 */
    border: 1px solid #ddd; /* 可选：添加边框以区分不同项 */
    border-radius: 4px; /* 可选：圆角边框 */
}

2. 将上述样式添加到现有的 SCSS 样式部分中。

完整的样式部分如下：

<style lang="scss">
.container {
    // ... (其他样式)
}

.input-prefix {
    display: inline-block;
    vertical-align: middle;
    width: 82px; /* 调整为你希望的宽度 */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #ffffff;
    text-align: left; /* 让前缀文本右对齐 */
}

.input-field {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 110px); /* 减去前缀的宽度和一定的间距 */
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 10px; /* 增加左边距以分隔 span 和 input */
}

.tab-bar {
    display: flex;
    justify-content: space-around;
    background-color: #f1f1f1;
    padding: 10px 0;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
}

.tab-item.active {
    color: #409EFF;
    border-bottom: 2px solid #409EFF;
}

.tab-content {
    // ... (其他样式，确保 tab 页内容有足够的空间显示)
}

.tab-page {
    // ... (每个 tab 页的样式，可以根据需要调整)
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
}

.modal-content h3 {
    margin-top: 0;
}

.modal-content label {
    display: block;
    margin-bottom: 5px;
}

.modal-content input {
    display: block;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.modal-content button {
    margin-right: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.modal-content button[type="submit"] {
    background-color: #4CAF50;
    color: white;
}

.modal-content button[type="submit"]:hover {
    background-color: #45a049;
}

.modal-content button[type="button"] {
    background-color: #f44336;
    color: white;
}

.modal-content button[type="button"]:hover {
    background-color: #e74c3c;
}

.text-item {
    margin-bottom: 20px; /* 在每条数据之间添加 20px 的间距 */
    padding: 10px; /* 可以同时添加内边距以进一步美化布局 */
    border: 1px solid #ddd; /* 可选：添加边框以区分不同项 */
    border-radius: 4px; /* 可选：圆角边框 */
}
</style>

通过以上修改，`tab1` 中每条数据之间的间距将会增加，从而提高可读性和美观性。