yihuo/pages/sell_detail/argument.vue

<template>
    <view class="wrapper">
        <view class="paddingY18" style="border-bottom: 2rpx solid #EEEEEE">
            <view class="flex-align paddingT8">
                <view class="color-2 font2" style=" width: 92rpx">参数</view>
                <scroll-view scroll-x class="scroll-wrapper flex1">
                    <view v-for="item in parameter" :key="item.label" class="item">
                        <view class="color-2">{{item.label}}</view>
                        <view class="paddingT8 color-1">{{item.value}}</view>
                    </view>
                </scroll-view>
            </view>
            <view class="paddingT20 flex-align">
                <view class="color-2 font2 flex-shrink0" style=" width: 92rpx">IP</view>
                <text class="color-1 font4">{{data.worksName}}</text>
            </view>
            <view class="paddingT20 flex-align" v-if="data.brandName">
                <view class="color-2 font2" style=" width: 92rpx">品牌</view>
                <text class="color-1 font4">{{data.brandName}}</text>
            </view>
        </view>
        <view class="paddingY15 flex-align">
            <view class="flex1">
                <view class="flex-align">
                    <image :src="resource.sell_detail_soag" style="width: 238rpx; height: 26rpx" />
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import resource from '@/utils/resource'
export default {
    props: {
        data: Object
    },
    data() {
        return {
            resource,
            parameter: []
        }
    },
    mounted() {
        if (this.data.parameter) {
            this.parameter = JSON.parse(this.data.parameter)
        }
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    margin-top: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 0 28rpx;
    .scroll-wrapper {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        .item {
            display: inline-block;
            font-size: 28rpx;
            min-width: 152rpx;
            padding: 0 20rpx;
            border-right: 2rpx solid #eeeeee;
            &:first-child {
                padding-left: 0;
            }
        }
    }
}
</style>