<template>
    <resource>
        <ul class="resource-products">
            <li class="product-item" v-for="(item, index) in value" :key="index">
                <img-format :src="item.src" :w="94" :h="125"></img-format>
                <p class="title">{{item.title}}</p>
                <p class="price">{{item.price}}</p>
            </li>
        </ul>
    </resource>
</template>

<script>
import Resource from './resource';

export default {
    name: 'ResourceSingleImage',
    props: {
        value: Array
    },
    computed: {
    },
    components: {Resource}
};
</script>

<style lang="scss">
.resource-products {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;

    li.product-item {
        display: inline-block;
        padding-right: 20px;
        text-align: center;
        line-height: 40px;

        img {
            width: 188px;
            height: 250px;
        }
    }
}
</style>