sketch生成基础结构

src/views/home/generateSketch/index.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import GenerateItem from './generateItem.vue'
+
+const props = defineProps({
+	generateData:{
+		type:Object,
+		default:()=>{
+			return {
+				list:[]
+			}
+		},
+	},
+})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="generateSketch">
+		<div v-for="item in generateData.list" :key="item.id" class="item">
+			<GenerateItem :item="item" />
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+	.generateSketch{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		gap: 1.2rem;
+		.item{
+			width: calc((100% - 1.2rem * 3) / 4);
+			//设置比例属性 1 / 1
+			aspect-ratio: 1 / 1;
+			background-color: #fff;
+			border-radius: 1.6rem;
+			overflow: hidden;
+		}
+	}
+</style>