book-hi/pages/home/components/ServiceInfo.vue

<template>
    <view class="service-info">
        <view class="service-icons">
            <view class="icon-item" v-for="(item, index) in serviceItems" :key="index" @tap="showServiceGuarantee">
                <image
                    :src="`/static/img/${index + 1}.png`"
                    mode="widthFix"
                    style="width: 30rpx; height: 30rpx"
                ></image>
                <text style="margin-left: 6rpx">{{ item.text }}</text>
                <text style="margin-left: 4rpx"> > </text>
            </view>
        </view>

        <!-- 服务保障弹窗 -->
        <ServiceGuarantee ref="serviceGuarantee" />
    </view>
</template>

<script>
import ServiceGuarantee from "./ServiceGuarantee.vue";

export default {
    components: {
        ServiceGuarantee,
    },
    props: {
        serviceList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            serviceItems: [
                {
                    icon: "/static/img/1.png",
                    text: "免费退回",
                },
                {
                    icon: "/static/img/2.png",
                    text: "24小时验",
                },
                {
                    icon: "/static/img/3.png",
                    text: "极速打款",
                },
                {
                    icon: "/static/img/4.png",
                    text: "卖亏必赔",
                },
            ],
        };
    },
    methods: {
        showServiceGuarantee() {
            this.$refs.serviceGuarantee.openPopup();
        },
    },
};
</script>

<style lang="scss" scoped>
.service-icons {
    display: flex;
    justify-content: center;
    padding: 14rpx;
    background: #1f1303;
    box-sizing: border-box;
    gap: 14px;

    .icon-item {
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #fff6ed;
    }
}
</style>