fix

src/components/CommodityItem.vue

@@ -0,0 +1,82 @@
+<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 calss="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="24"></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);
+				}
+				> .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>