caimei-applets-store/pages/views/goods/components/goods-unit-section/goods-unit-section.vue

<template>
    <view class="goods-unit-section">
        <view class="section" @click="$emit('click')">
            <view class="label">规格：</view>
            <view class="list"><text v-text="text"></text></view>
            <view class="iconfont icon-chakangengduo"></view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        skuList: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        text() {
            const len = this.skuList.length
            return `共${len}种规格可选`
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-unit-section {
    padding: 24rpx;
    background-color: #fff;
    .section {
        @extend .cm-flex-between;
        font-size: 28rpx;

        .label {
            color: #666;
        }

        .list {
            flex: 1;
            margin: 0 24rpx;
            color: #333;

            text {
                margin-right: 24rpx;
            }
        }
        .iconfont {
            font-size: 28rpx;
            color: #666;
        }
    }
}
</style>