digitalItem页面

src/components/CommodityItem.vue

@@ -34,7 +34,7 @@ const {} = toRefs(data);
 	<div class="commodity-item">
 		<img :src="props.url" alt="">
 		<div class="detail">
-			<div calss="text">
+			<div class="text">
 				<div class="name">
 					{{ props.name }}
 				</div>
@@ -44,7 +44,7 @@ const {} = toRefs(data);
 			</div>
 			<div class="btn" @click="addShopping">
 				<div class="text">
-					<SvgIcon name="add" size="24"></SvgIcon>
+					<SvgIcon name="add" size="26"></SvgIcon>
 				</div>
 			</div>
 		</div>
@@ -62,13 +62,14 @@ const {} = toRefs(data);
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-			.text{
+			> .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";

src/components/checked.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
+const props = defineProps({
+	list:{
+		type:Array,
+		default:()=>[]
+	},
+	selected:{
+		type:String,
+		default:()=>''
+	}
+})
+const emit = defineEmits([
+	'update:selected'
+])
+const checkList = computed(()=>{
+	return [props.selected]
+})
+const handleChange = (val) => {
+	if (val.length > 1) {
+		emit('update:selected', val[val.length - 1])
+	}
+}
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<el-checkbox-group v-model="checkList" @change="handleChange">
+		<el-checkbox 
+			v-for="item in props.list" 
+			:key="item.value"
+			:value="item.value"
+		>
+			{{ item.label }}
+		</el-checkbox>
+	</el-checkbox-group>
+</template>
+<style lang="less" scoped>
+	.el-checkbox-group{
+		display: flex;
+		flex-direction: column;
+		gap: 1.2rem;
+	}
+	label{
+		--el-checkbox-font-size: 1.6rem;
+		--el-checkbox-checked-text-color: #232323;
+		--el-checkbox-font-weight: 400;
+		--el-checkbox-height: 2rem;
+		--el-checkbox-checked-bg-color: #232323;
+		--el-checkbox-checked-input-border-color: #232323;
+		--el-checkbox-input-border: 1px solid #232323;
+		font-family: "KaiseiOpti-Regular";
+		line-height: 2rem;
+		.el-checkbox__label{
+			padding-left: 1.4rem;
+		}
+	}
+</style>