aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-11-8-1

Browse Source
This commit is contained in:
X1627315083
2023-11-08 09:31:40 +08:00
parent 632959c581
commit 840a1aa82b
11 changed files with 449 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/component/HomePage/NewCollectionReview.vue
View File

@@ -42,13 +42,20 @@
</div>
</div>
</div>
<!--
<div class="img_block_item img_block_item_sketch">
<div class="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
<div class="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
<div class="all_img_item_block">
<img class="all_img_content" :src="skecth.imgUrl">
</div>
</div>
</div> -->
<div class="img_block_item img_block_item_sketch">
<div class="lager_img_item" :class="'lager_img_item'+index" v-for="(item,index) in sketch" :key="item">
<div class="all_img_item_block" v-for="v in item" :key="sketch">
<img class="all_img_content" :src="v?.imgUrl">
</div>
</div>
</div>
<div class="img_block_item">
@@ -62,20 +69,70 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { computed, defineComponent ,ref, reactive, nextTick } from 'vue'
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
import { useStore } from "vuex";
export default defineComponent({
components:{MoodTemplate},
setup() {
const store = useStore();
let sketch:any = ref([[],[],[]])
let sketchList = ref([])
let allBoardData:any = computed(()=>{
return store.state.UploadFilesModule.allBoardData})
return {
allBoardData,
sketch,
sketchList,
}
},
watch: {
allBoardData:{
handler(newVal:any,oldVal:any){
this.sketchList = []
// this.sketch = [[],[],[]]
console.log(111);
this.sketchList = this.allBoardData.sketchboardFiles
this.setSketch()
}
}
},
mounted () {
},
methods: {
setSketch(){
this.sketch = [[],[],[]]
nextTick().then(async ()=>{
let sketch1:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item0')[0]?.getBoundingClientRect()
let sketch2:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item1')[0]?.getBoundingClientRect()
let sketch3:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item2')[0]?.getBoundingClientRect()
sketch1.num = 0
sketch2.num = 1
sketch3.num = 2
console.log(this.sketchList);
for (let i = 0; i < this.sketchList.length; i++) {
let arr = [sketch1,sketch2,sketch3]
arr.sort((a,b)=>{
var a_num = a["height"];
var b_num = b["height"];
return a_num - b_num;
})
this.sketch[arr[0].num]?.push(this.sketchList[i])
await new Promise((resolve:any)=>{
nextTick().then(()=>{
sketch1 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item0')[0]?.getBoundingClientRect()
sketch2 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item1')[0]?.getBoundingClientRect()
sketch3 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item2')[0]?.getBoundingClientRect()
sketch1.num = 0
sketch2.num = 1
sketch3.num = 2
resolve()
})
})
}
})
}
}
})
</script>
@@ -191,10 +248,18 @@ export default defineComponent({
&.img_block_item_sketch{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: flex-start;
align-items: flex-start;
>div{
width: 45%;
height: 25rem;
width: 30%;
margin-left: 2rem;
height: auto;
>div{
margin-bottom: 2rem;
}
}
>div:nth-child(1){
margin: 0;
}
}
&.h30{