From c1b051a18520b89acc0d5d8d73183e3faa3ce5fc Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Mon, 1 Dec 2025 15:29:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=83=85=E7=BB=AA=E7=89=88la?=
 =?UTF-8?q?yout=E5=87=BA=E7=8E=B0=E6=8B=89=E4=BC=B8=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/style.css                    |  8 +++-
 src/assets/style/style.less                   |  8 +++-
 src/component/HomePage/layout.vue             | 33 ++++----------
 .../design/collection/MoodboardUpload.vue     | 43 +++----------------
 4 files changed, 28 insertions(+), 64 deletions(-)

diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index d917340c..ea80571e 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -1250,10 +1250,14 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
   background: #000 !important;
   border-color: #000 !important;
 }
+.ant-spin .ant-spin-dot {
+  width: 1.5em;
+  height: 1.5em;
+}
 .ant-spin-dot-item {
   background-color: #000000 !important;
-  width: 9px !important;
-  height: 9px !important;
+  width: 0.9em !important;
+  height: 0.9em !important;
 }
 .ant-spin {
   color: #000;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 938f0a7b..382f48ef 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -1378,10 +1378,14 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	}
 }
 //loding样式
+.ant-spin .ant-spin-dot{
+	width: 1.5em;
+	height: 1.5em;
+}
 .ant-spin-dot-item{
     background-color: #000000 !important;
-	width: 9px !important;
-    height: 9px !important;
+	width: .9em !important;
+    height: .9em !important;
 }
 .ant-spin{
 	color: #000;
diff --git a/src/component/HomePage/layout.vue b/src/component/HomePage/layout.vue
index 7a929856..3147483e 100644
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -34,8 +34,8 @@
 					</div>
 				</div>
 				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
-					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content" >
-						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':`translate(-50%, -50%) scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg> 
+					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content"  :style="{'background-image':`url(${item.imgUrl})`,'transform':`scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}">
+						<!-- <img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':`translate(-50%, -50%) scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg>  -->
 						<ul v-show="item.setPitch" class="layout_btn" >
 							<li class="layout_btn_top" v-compile.stop="'top'"></li>
 							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
@@ -736,6 +736,7 @@ export default defineComponent({
 		setmoodb(item:any){
 			this.moodbClassName = item
 			this.$emit('setmoodbClass',this.moodbClassName)
+			this.styleObj.class = this.moodbClassName
 			if(this.content){
 				for (item of (this.content as any)) {
 					item.classList.remove('active')
@@ -772,7 +773,7 @@ export default defineComponent({
 		initDomStyle(){
 			nextTick(()=>{
 				this.content.forEach((item:any,index:any) => {
-					if(this.styleObj.domStyle[index]){
+					if(this.styleObj.domStyle[index]?.left){
 						item.classList.add('active')
 						this.initStyle(item,this.styleObj.domStyle[index])
 					}
@@ -794,7 +795,7 @@ export default defineComponent({
 			})
 		},
 		initStyle(dom:any,style:any){
-			if(!style)return
+			if(!style || !dom)return
 			for (const [property, value] of Object.entries(style)) {
 				
 				dom.style.setProperty(property, value);
@@ -806,7 +807,7 @@ export default defineComponent({
 				this.styleObj.domStyle.push(this.setStyle(item.style))
 				this.domObj.dom.forEach((domName:any,index:any) => {
 					let style = this.domObj.domStyle[index]
-					let dom = item.querySelector(domName)
+					let dom = item.querySelector(domName) || item
 					this.styleObj[style].push(this.setStyle(dom.style))
 				})
 			});
@@ -840,7 +841,6 @@ export default defineComponent({
 					let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
 					Https.axiosPost(Https.httpUrls.elementUpload,param,config)
 					.then((rv: any) => {
-							// console.log(rv);
 							rv.imgUrl = rv.url
 							this.layout = false
 							this.loadingShow = false
@@ -1062,27 +1062,12 @@ export default defineComponent({
 				// 	height: 100%;
 				// }
 				overflow: hidden;
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: cover;
 				&.active{
 					position: absolute;
 				}
-				img{
-					// object-fit: cover;
-					// width: 100%;
-					// height: 100%;
-					pointer-events: none;
-					float: left;
-					user-select:none;
-					-webkit-user-drag: none;
-					position: absolute;
-					top: 50%;
-					left: 50%;
-					transform: translate(-50%,-50%) scale(1);
-				}
-				::selection {
-						// background: rgba(0,0,0,0);
-						// background: yellow;
-					}
-			
 			}
 		}
 		.wh1{
diff --git a/src/component/home/design/collection/MoodboardUpload.vue b/src/component/home/design/collection/MoodboardUpload.vue
index 9afe46aa..77e20dec 100644
--- a/src/component/home/design/collection/MoodboardUpload.vue
+++ b/src/component/home/design/collection/MoodboardUpload.vue
@@ -132,8 +132,8 @@
 				</div>
 				<div class="modal_img_max">
 					<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
-						<div v-for="item,index in layoutList" :class="[moodb_className[index]]"  class="modal_imgItem">
-							<img :src="item.imgUrl" v-modelImg>
+					<!-- <div class="modal_img" id="modal_img" :class="{active:flex_direction}"> -->
+						<div v-for="item,index in layoutList" :class="[moodb_className[index]]" :style="{'background-image':`url(${item.imgUrl})`}" class="modal_imgItem">
 						</div>
 					</div>
 					<div v-else class="modal_img">
@@ -244,30 +244,6 @@ export default defineComponent({
         this.token = getCookie("token") || "";
         this.uploadUrl = getUploadUrl();
     },
-	directives:{
-		modelImg:{
-			mounted(el) {
-				let parentNode = el.parentNode
-				if(parentNode.offsetHeight >= parentNode.offsetWidth){
-					el.style.height = 100+'%'
-					el.style.width = 'auto'
-				}else{
-					el.style.width = 100+'%'
-					el.style.height = 'auto'
-				}
-			},
-			updated (el) {
-				let parentNode = el.parentNode
-				if(parentNode.offsetHeight >= parentNode.offsetWidth){
-					el.style.height = 100+'%'
-					el.style.width = 'auto'
-				}else{
-					el.style.width = 100+'%'
-					el.style.height = 'auto'
-				}
-			}
-		}
-	},
     methods: {
         open(num: Number) {
             this.openClick = num;
@@ -445,7 +421,7 @@ export default defineComponent({
 					}
 				}
 				this.edieShow = true
-				if(this.moodb_[arr.length-1].length == 2){
+				if(this.moodb_[arr.length-1].length == 1){
 					this.moodb_className = this.moodb_[arr.length-1][0]
 				}else{
 					this.moodb_className = this.moodb_[arr.length-1][random]
@@ -628,6 +604,7 @@ export default defineComponent({
 				height: calc(5rem*1.2);
 				overflow-x: hidden;
 				display: flex;
+				
 				&.modal_img::-webkit-scrollbar {
 					display: none;
 				}
@@ -706,15 +683,9 @@ export default defineComponent({
 					position: relative;
 					overflow: hidden;
 					text-align: center;
-					img{
-						position: absolute;
-						top: 50%;
-						left: 50%;
-						transform: translate(-50%,-50%);
-						// float: left;
-						// user-select:none;
-						// -webkit-user-drag: none;
-					}
+					background-repeat: no-repeat;
+					background-position: center;
+					background-size: cover;
 				}
 				.wh1{
 					width: 23%;