页面调整优化

zxl

14 小时以前 b7ce92d35fde3704297163010c320e336a5dd681

 pages/kitchen/KitchenCustomize.vue

@@ -9,7 +9,7 @@
            <scroll-view class="tags-scroll" scroll-x="true" :show-scrollbar="false">
                <view class="tags">
                    <view v-for="tag in tags" :key="tag.value" class="tag" :class="{ active: tag.selected }"
                        @click="toggleTag(tag)">
                        :style="{ width: tags.length <= 4 ? (100 / tags.length) + '%' : '25%' }" @click="toggleTag(tag)">
                        <text>{{ tag.label }}</text>
                    </view>
                </view>
@@ -218,7 +218,7 @@
}

.content {
    padding: 24rpx;
    padding: 0 24rpx 0 24rpx;
}

.tags-scroll {
@@ -230,11 +230,12 @@
    display: flex;
    flex-wrap: nowrap;
    padding: 10rpx 0;
    width: 100%;
}

.tag {
    height: 80rpx;
    display: inline-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
@@ -244,6 +245,7 @@
    background-color: #f7f7f7;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

.tag.active {
@@ -275,11 +277,11 @@

.product-info {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    align-items: flex-end;
    justify-content: space-between;
    overflow: hidden; // 确保子元素溢出隐藏
    margin-top: 10rpx;
}

.product-top {
@@ -333,14 +335,19 @@

.product-price {
    color: #ff573e;
    display: flex;
    align-items: flex-end;

    .symbol {
        font-size: 24rpx;
        line-height: 1.2; // 稍微调整行高以对齐
        margin-bottom: 6rpx; // 符号通常较小，手动微调使其看起来更贴合底部
    }

    .value {
        font-size: 50rpx;
        font-weight: bold;
        line-height: 1;
    }
}