Aida_Purchaser_Front/src/components/CommodityItem.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
const props = defineProps({
	url: {
		type: String,
		default: ''
	},
	name: {
		type: String,
		default: 'aaa'
	},
	price: {
		type: String,
		default: '111'
	}
})
const emit = defineEmits([
	'addShopping'
])
let data = reactive({
})
const addShopping = () => {
	emit('addShopping')
}
 
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="commodity-item">
		<img :src="props.url" alt="">
		<div class="detail">
			<div class="text">
				<div class="name">
					{{ props.name }}
				</div>
				<div class="price">
					{{ props.price }}
				</div>
			</div>
			<div class="btn" @click="addShopping">
				<div class="text">
					<SvgIcon name="add" size="26"></SvgIcon>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.commodity-item{
		width: var(--commodity-width,100%);
		> img{
			width: 100%;
			height: var(--commodity-height,auto);
			margin-bottom: var(--commodity-marginBottom,1rem);
		}
		> .detail{
			display: flex;
			justify-content: space-between;
			align-items: center;
			> .text{
				color: #232323;
				> .name{
					font-family: "KaiseiOpti-Regular";
					font-weight: 400;
					font-size: var(--commodity-name-fontSize,1.6rem);
					line-height: var(--commodity-name-lineHeight,2.3rem);
					margin-bottom: var(--commodity-name-marginBottom,0rem);
				}
				> .price{
					font-family: "KaiseiOpti-Regular";
					font-weight: 400;
					font-size: var(--commodity-price-fontSize,1.4rem);
					line-height: var(--commodity-price-lineHeight,2.3rem);
				}
			}
		}
	}
</style>