52 lines
953 B
Vue
52 lines
953 B
Vue
|
<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>
|