<template>
    <div class="product" @click="click">
        <van-image
            width="100%"
            height="calc(37.2vw - 17.9px)"
            src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
            fit="cover"
        />

        <div class="content">
            <div class="name van-ellipsis">游戏《百分之一》游戏《百分之一》游戏《百分之一》</div>
            <div class="text">
                <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
                <like-button>20</like-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    setup() {
        const click = function () {
            console.log('wyt6w');
        };

        return { click };
    }
};
</script>

<style lang="less" scoped>
.product {
    width: calc(50vw - 24px);
    margin: 0 8px;
    position: relative;

    .van-image {
        border-radius: 8px;
        overflow: hidden;
        display: block;
    }
    .content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 3px 10px;
        background-color: rgba(0, 0, 0, 0.6);

        .name {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
        }

        .price {
            font-size: 24px;
            font-family: OSP;
            color: @prim;
            line-height: 22px;

            i {
                vertical-align: text-bottom;
                font-size: 10px;
            }
        }
    }

    .text {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
