yihuo/pages/product/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-between">
                    <image :src="resource.vip_title2" style="width: 224rpx; height: 26rpx" />
                    <view class="font1 marginL10 hint-intro">
                    专业包装<text class="marginL2">{{  depositData.serviceItem && depositData.serviceItem.split(',').map(item => serviceList[item.trim()]).join(' ') || '' }}</text>
                </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import resource from '@/utils/resource'
export default {
    props: {
        data: Object,
        depositData: Object
    },
    data() {
        return {
            resource,
            parameter: [],
            serviceList: {
                'SEVEN_DAYS': '支持七天无理由退换货',
                'SEVEN_DAYS_NO': '不支持七天无理由退换货',
                'FREE_SHIP': '包邮',
                'FREIGHT_COLLECT': '到付'
            }
        }
    },
    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;
            }
        }
    }
}
.hint-intro {
    overflow: scroll;
    white-space: nowrap;
}
.hint-intro::-webkit-scrollbar {
  display: none;
}
</style>