调整library布局

src/views/HomeView/HomeView.vue

@@ -101,7 +101,7 @@
 
 							<div class="right_content_body">
 								<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
-									<div class="right_content_img_item">
+									<div class="right_content_img_item" ref="designImg">
 										<!-- <draggable 
 											group="people" > -->
 										
@@ -127,10 +127,8 @@
 												)">
 											</div>
 										</div>
-										<div class="content_img_block" v-show="showDesignMark">
-											<div class="content_img_flex" >
-												<img class="content_img" src="@/assets/images/homePage/loading.gif" />
-											</div> 
+										<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
+											<a-spin size="large"></a-spin>
 										</div>
 										<!-- </draggable> -->
 										<div class="content_img_block" :style="collStyle" draggable v-for="(
@@ -376,16 +374,30 @@ export default defineComponent({
 			},
 			collTime:null as any,
 		})
+		let designImg = ref()
 		const setSystemDesigner = (time:any)=>{
 			clearTimeout(collItemSize.collTime)
 			collItemSize.collTime = setTimeout(()=>{
 				let wScale = 60,hScale = 92.5
 				let num = collItemSize.collValue
-				let {width,height} = collItemSize.collStyle
-				collItemSize.collStyle.width = wScale * ((num<20?20:num) / 100) + 'rem'
-				collItemSize.collStyle.height = hScale * ((num<20?20:num) / 100) + 'rem'
+				let width = wScale * ((num<20?20:num) / 100)
+				let height =hScale * ((num<20?20:num) / 100)
+				collItemSize.collStyle.width = width + 'rem'
+				collItemSize.collStyle.height = height + 'rem'
+				setDesignImgWidth()
 			},time)
 		}
+		const setDesignImgWidth = ()=>{
+			nextTick(()=>{
+				let width = designImg.value.parentElement.offsetWidth
+				let sonDom = designImg.value.querySelectorAll('div')[0]
+				if(Math.floor(width / (sonDom.offsetWidth+10 + 1)) > (likeDesignCollectionList.value.length + designCollectionList.value.length)){
+					designImg.value.style.width = 100+'%'
+				}else{
+					designImg.value.style.width = Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1) + 'px'
+				}
+			})
+		}
 		setSystemDesigner(0)
 		return {
 			store,
@@ -410,6 +422,8 @@ export default defineComponent({
 			portfolio,
 			setSystemDesigner,
 			...toRefs(collItemSize),
+			designImg,
+			setDesignImgWidth,
 		};
 	},
 	data() {
@@ -744,6 +758,7 @@ export default defineComponent({
 						await new Promise((resolve, reject) => {
 							setTimeout(() => {
 								this.designCollectionList.unshift(item)
+								this.setDesignImgWidth()
 								resolve('')
 							}, 200);
 						})
@@ -1131,6 +1146,7 @@ export default defineComponent({
 					likeDesignCollectionList
 				);
 			}
+			this.setDesignImgWidth()
 		},
 
 		//统一处理选择组的渲染数据
@@ -1544,6 +1560,7 @@ export default defineComponent({
 								align-items: center;
 								// padding-bottom: 1rem;
 								overflow-x: auto;
+								justify-content: center;
 								&.active::-webkit-scrollbar-button:single-button{
 									display: none;
 								}
@@ -1586,8 +1603,8 @@ export default defineComponent({
 									width: 24rem;
 									height: 37rem;
 									// height: 29.5rem;
-									margin-right: 1rem;
-									margin-bottom: 1rem;
+									box-sizing: border-box;
+									margin: 5px;
 									// min-height: 271px;
 									max-height: 100%;
 
@@ -1596,6 +1613,9 @@ export default defineComponent({
 									vertical-align: top;
 									flex-shrink: 0;
 									max-height: 100%;
+									display: flex;
+									align-items: center;
+									justify-content: center;
 									&:hover .icon_like,&:hover .icon_delete {
 										display: block;
 									}