diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 366bc46a..bd544bdd 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -70,6 +70,44 @@ li {
   margin-top: -0.4rem;
   border: solid 0.2rem #343579;
 }
+.cliAdmin_like {
+  animation: adminLike 0.5s ease-in-out forwards;
+  transform-origin: center;
+}
+@keyframes adminLike {
+  0% {
+    transform: scale(1);
+    /*开始为原始大小*/
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}
+[adminLike='true'] {
+  animation: adminLike 0.5s ease-in-out forwards;
+  transform-origin: center;
+}
+@keyframes adminLike {
+  0% {
+    transform: scale(1);
+    /*开始为原始大小*/
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}
+[adminSix='true'] {
+  animation: adminSix 0.5s ease-in-out;
+  transform-origin: 30% center;
+}
+@keyframes adminSix {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(-20deg);
+  }
+}
 .ant-tooltip {
   z-index: 2;
 }
@@ -255,9 +293,10 @@ li {
   z-index: 9999;
 }
 .delete_like_file_block {
-  display: none;
+  opacity: 0;
   width: 3rem;
   height: 3rem;
+  cursor: pointer;
   background: rgba(0, 0, 0, 0.6);
   border-radius: calc(0.4rem*1.2);
   position: absolute;
@@ -278,6 +317,14 @@ li {
   font-size: calc(1.6rem*1.2);
   color: #fff;
 }
+.delete_like_file_block i,
+.delete_like_file_block span {
+  width: 100%;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
 .delete_like_file_block i {
   font-size: calc(1.4rem);
   color: #fff;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index f4666877..c1e100b5 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -79,6 +79,42 @@ input:focus{
    }
  }
 }
+.cliAdmin_like{
+	animation: adminLike .5s ease-in-out forwards;
+	transform-origin: center;
+	@keyframes adminLike{
+	   0% {
+		   transform: scale(1);  /*开始为原始大小*/
+	   }
+	   50% {
+		   transform: scale(1.2);
+	   }
+   }
+}
+[adminLike='true']{
+	animation: adminLike .5s ease-in-out forwards;
+	transform-origin: center;
+	@keyframes adminLike{
+	   0% {
+		   transform: scale(1);  /*开始为原始大小*/
+	   }
+	   50% {
+		   transform: scale(1.2);
+	   }
+   }
+}
+[adminSix='true']{
+	animation: adminSix .5s ease-in-out;
+	 transform-origin: 30% center;
+	 @keyframes adminSix{
+		0% {
+			transform: rotate(0deg);
+		}
+		50%{
+			transform: rotate(-20deg);
+		}
+	}
+}
 .ant-tooltip{
     // top: 74px !important;
     z-index: 2;
@@ -284,9 +320,11 @@ input:focus{
 }
 //爱心
 .delete_like_file_block{
-	display: none;
+	// display: none;
+	opacity: 0;
 	width: 3rem;
 	height: 3rem;
+	cursor: pointer;
 	background: rgba(0,0,0,0.6);
 	border-radius: calc(0.4rem*1.2);
 	position: absolute;
@@ -306,9 +344,17 @@ input:focus{
 		font-size: calc(1.6rem*1.2);
 		color: #fff;
 	}
+	i,span{
+		width: 100%;
+		display: flex;
+		height: 100%;
+		justify-content: center;
+		align-items: center;
+	}
 	i{
 		font-size: calc(1.4rem);
 		color: #fff;
+		
 		&.fi-rr-heart{
 
 		}
diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue
index 773c32d8..b670df56 100644
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -107,8 +107,9 @@
 							</div>
 							<div class="img_block_item centent" @click.stop="openCurrent(3)">
 								<div class="color_item">
-									<div class="color_content" :style="{background:`rgba(${current?.color?.r},${current?.color?.g},${current?.color?.b},${current?.color?.a?current?.color.a:1})`}"></div>
-									<div class="color_content_body">
+									<div v-if="!current?.gradient" class="color_content" :style="{background:`rgba(${current?.color?.r},${current?.color?.g},${current?.color?.b},${current?.color?.a?current?.color.a:1})`}"></div>
+									<div class="color_content" v-else :style="{height:'10rem','background-image':current?.gradient?`linear-gradient(${current?.gradient.angle}deg,${setGradient(current?.gradient)}`:'none'}"></div>
+									<div v-if="!current?.gradient" class="color_content_body">
 										<div class="color_des">{{current?.color?.tcx}}</div>
 										<div class="color_des">{{current?.color?.name}}</div>
 									</div>
@@ -155,7 +156,7 @@ import Draggable from 'vuedraggable'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
-import {getUploadUrl,isMoible} from '@/tool/util'
+import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
 import { useStore } from "vuex";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import GO from '@/tool/GO';
@@ -254,6 +255,25 @@ export default defineComponent({
 			designOrder:false,
         }
     },
+	computed:{
+		setGradient(){
+			return (gradient)=>{
+				let gradientStr = ''
+				gradient.gradientList.sort((a, b) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradient.gradientList.forEach((item,index)=>{
+					let str = ','
+					if(gradient.gradientList.length == index+1)str = ''
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+				})
+				return `${gradientStr}`
+			}
+		},
+	},
 	watch:{
 		designItemDetail:{
 			handler: async function(newVal,oldVal) {
@@ -647,10 +667,11 @@ export default defineComponent({
 			let num = -1
 			// let zIndex = 10
 			designItemDetail.clothes.forEach((item:any,index:number) => {
-				let clothesItem = {
+				let clothesItem:any = {
 					color: `${item.color.r} ${item.color.g} ${item.color.b}`,
 					id:item.id,
 					path:item.minIOPath,
+					gradient:{},
 					changed:item.changed?item.changed:false,
 					designType:item.designType?item.designType:"Library",
 					offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
@@ -663,6 +684,13 @@ export default defineComponent({
 					priority:item.priority,
 					type:item.type,
 				}
+				if(item.gradient){
+					let gradient = item.gradient
+					gradient.colorImg = setGradual(item.gradient,320,700)
+					clothesItem.gradient = item.gradient
+				}else{
+					delete clothesItem.gradient
+				}
 				if(!item.id && sub){
 					num = index
 				}else{
@@ -877,9 +905,10 @@ export default defineComponent({
 			this.designItemDetail.clothes.forEach((item:any)=>{
 				item.clothesOpen = false
 			})
-			let color
+			let color,gradient
 			if(this.designItemDetail.clothes[0]){
 				color = this.designItemDetail.clothes[0].color
+				gradient = this.designItemDetail.clothes[0].gradient
 			}else{
 				color = {
 					"id": '',
@@ -900,6 +929,7 @@ export default defineComponent({
 				"path": "",
 				"minIOPath": "",
 				"color": color,
+				gradient:gradient,
 				"printObject": {
 					"ifSingle": null,
 					"prints": [
@@ -956,6 +986,7 @@ export default defineComponent({
 			}
 			data.designSingleItemDTOList[this.currentIndex] = {
 				color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
+
 				id:this.current.id?this.current.id:'',
 				changed:this.current.changed?this.current.changed:false,
 				designType:this.current.designType?this.current.designType:'Library',
diff --git a/src/component/Detail/DesignDetailAlter.vue b/src/component/Detail/DesignDetailAlter.vue
index fd47ef1c..1f721bea 100644
--- a/src/component/Detail/DesignDetailAlter.vue
+++ b/src/component/Detail/DesignDetailAlter.vue
@@ -190,6 +190,31 @@
 							</div>
 							
 						</div> -->
+						<!-- <div class="color_setting_operateSingle">
+							<div class="started_btn" @click="setOperate">
+								{{ colorList[selectIndex]?.gradient?.gradientList>1? 'Gradual Change':'Single'}}
+							</div>
+						</div> -->
+						<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
+							<div class="color_setting_operate_item color_setting_operate_control">
+								<div class="operate_item_box">
+									<div>Alignment</div>
+								</div>
+								<div class="operate_item_box operate_item_angle">
+									<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event)" @touchstart="mousedownGradientAngle($event)">
+										<div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
+									</div>
+								</div>
+								<div class="operate_item_box operate_item_delete">
+									<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
+								</div>
+							</div>
+							<div class="color_setting_operate_item color_setting_operate_input">
+								<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':colorList[selectIndex]?.gradient?`linear-gradient(90deg,${setGradient(colorList[selectIndex].gradient)})`:'none'}">
+								</div>
+								<div v-for="item,index in colorList[selectIndex].gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == colorList[selectIndex].gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index)" @touchstart="mousedownGradient($event,item,index)"></div>
+							</div>
+						</div>
                     </div>
                 </div>
 
@@ -285,6 +310,7 @@ export default defineComponent({
 		let openClick = ref(1);
 		let searchPictureName = ref('')
 		
+		
 		let total = ref(0)
         let pageSize = ref(10)
         let currentPage = ref(1)
@@ -305,6 +331,34 @@ export default defineComponent({
 		let sketchCatecoryList = computed(()=>{
 			return store.state.Workspace.workspacePosition
 		})
+		let colorList = ref([{},{},{},{},{},{},{},{},{}])
+		let selectIndex = ref(0)
+		let gradient = ref({
+			gradientList:[
+				{
+					rgba:{
+						r:117,
+						g:119,
+						b:255,
+						a:1,
+					},
+					left:'0%'
+				},{
+					rgba:{
+						r:0,
+						g:222,
+						b:152,
+						a:1,
+					},
+					left:'100%'
+				},
+			],
+			angle:45,
+			selectIndex:-1,
+			gradientShow:false,
+		})
+		provide('colorList',colorList)
+		provide('selectIndex',selectIndex)
 		let {t} = useI18n()
         return{
             store,
@@ -329,6 +383,9 @@ export default defineComponent({
 			driver__,
 			body,
 			sketchCatecoryList,
+			colorList,
+			selectIndex,
+			gradient,
 			t,
         }
     },
@@ -362,7 +419,6 @@ export default defineComponent({
             tcxColor:'',
 			selectColorList: [],
 			colorFileList: [],
-			selectIndex:0,
 			indicator : h(LoadingOutlined, {
                 style: {
                     fontSize: '2.4rem',
@@ -416,22 +472,63 @@ export default defineComponent({
                 return data
             }
         },
+		setGradient(){
+			// return this.setGradientAngle(gradient)
+			return (gradient)=>{
+				let gradientStr = ''
+				gradient.gradientList.sort((a, b) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradient.gradientList.forEach((item,index)=>{
+					let str = ','
+					if(gradient.gradientList.length == index+1)str = ''
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+				})
+				return `${gradientStr}`
+			}
+			
+		}
     },
 	mounted(){
 	},
 	watch:{
-        selectColor(newVal,oldVal){
-			let DesignDetailEnd = this.$refs.DesignDetailEnd
-            DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
-            let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
-            this.setColorboardList(colorList)
+        // selectColor(newVal,oldVal){
+        //     this.colorList[this.selectIndex] = newVal
+        //     let colorList = this.colorList.filter((v) => v && Object.keys(v).length)
 
 
-			clearInterval(this.getPantongNameTime)
-			this.getPantongNameTime = setTimeout(() => {
-				this.getPantongName(newVal.rgba)
-			}, 100);
-        },
+		// 	clearInterval(this.getPantongNameTime)
+		// 	this.getPantongNameTime = setTimeout(() => {
+		// 		this.getPantongName(newVal.rgba)
+		// 	}, 100);
+        // },
+		selectColor:{
+			handler(newVal,oldVal){
+				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
+					this.colorList[this.selectIndex] = {}
+					return	
+				}
+				this.colorList[this.selectIndex].rgba = newVal.rgba
+				this.colorList[this.selectIndex].hex = newVal.hex
+				if(this.colorList[this.selectIndex]?.gradient && this.colorList[this.selectIndex]?.gradient?.selectIndex>-1 && this.colorList[this.selectIndex]?.gradient?.gradientShow){
+					this.colorList[this.selectIndex].gradient.gradientList[this.colorList[this.selectIndex].gradient.selectIndex].rgba = {
+						r:newVal.rgba.r,
+						g:newVal.rgba.g,
+						b:newVal.rgba.b,
+						a:1,
+					}
+				}
+				// console.log(JSON.parse(JSON.stringify(this.colorList)),JSON.parse(JSON.stringify(newVal)));
+				clearInterval(this.getPantongNameTime)
+				this.getPantongNameTime = setTimeout(() => {
+					this.getPantongName(newVal.rgba)
+				}, 100);
+			},
+			immediate: true
+		},
 		workspaceCom(newVal,oldVal){
 			this.workspace = newVal
 			this.upload.gender = newVal?.sexEnum?.name
@@ -480,7 +577,8 @@ export default defineComponent({
 					b:Number(arr.b),
 					a:Number(arr.a?arr.a:1),
 				},
-				hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
+				hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1]),
+				gradient:this.current.gradient
 			}
 			this.uploadList = []
 			if (num == 1) {
@@ -496,6 +594,19 @@ export default defineComponent({
 				this.clothesList = []
 				this.getLibraryList()
 			}
+			this.store.state.UploadFilesModule.allBoardData.colorBoards.forEach((item,index) => {
+			    this.colorList[index+1] = {
+					gradient:item.gradient,
+					rgba:item.rgbValue,
+					tcx:item.tcx,
+					name:item.name,
+				}
+				if(item.gradient){
+					this.colorList[index+1].gradient = item.gradient
+				}else{
+					delete this.colorList[index+1].gradient
+				}
+			})
 			let DesignDetailEnd = this.$refs.DesignDetailEnd
 			DesignDetailEnd.init(num)
 			this.workspaceCom = computed(()=>{
@@ -567,7 +678,7 @@ export default defineComponent({
 		terminate(){
 			let DesignDetailEnd = this.$refs.DesignDetailEnd
 			this.select = false
-			DesignDetailEnd.selectIndex = 0
+			this.selectIndex = 0
 			DesignDetailEnd.type_ = 0
 			this.colorFileList = []
 			this.selectColorList = []
@@ -581,7 +692,7 @@ export default defineComponent({
 			this.uploadList = []
 			this.apparelList = []
 			this.printList = []
-			DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{},{}]
+			this.colorList = [{},{},{},{},{},{},{},{},{}]
 			// DesignDetailEnd.colorList = [{}]
 			DesignDetailEnd.sketchImg={}
 			this.terminate()
@@ -749,7 +860,92 @@ export default defineComponent({
             ).catch(res=>{
             });
         },
+		setOperate(){
+			console.log(this.selectColor);
+			this.selectColor.rgba = this.selectColor?.rgba?.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
+			this.gradient.selectIndex = 0
+			this.gradient.gradientShow = true
+			this.colorList[this.selectIndex].rgba = this.selectColor.rgba
+			if(!this.colorList[this.selectIndex].gradient){
+				if(this.selectColor.rgba.r){
+					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
+						r:this.selectColor.rgba.r,
+						g:this.selectColor.rgba.g,
+						b:this.selectColor.rgba.b,
+						a:1,
+					}
+				}
+				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+			}else{
+				this.selectColor = {rgba:this.colorList[this.selectIndex].gradient.gradientList[0].rgba}
+				this.colorList[this.selectIndex].gradient = ''
+			}
+			let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+		},
+		mousedownGradient(event,item,index){
+			event.stopPropagation();
+			this.colorList[this.selectIndex].gradient.selectIndex = index
+			let gradientRgba = item.rgba
+			let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
+			let hex = this.rgbaToHex(rgba)
+            this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
+			// isMoible()  true为移动端
+			let gradientWidth = document.querySelector('.detail_modal_body_select .color_setting_operate_bg').clientWidth
+			let position = {
+				x:event.x,
+				left:event.target.style.left?event.target.style.left.split('%')[0]:0
+			}
+			let mousedownGradient = (e)=>{
+				let left = (e.x - position.x)/gradientWidth*100+Number(position.left)
+				left = (left<0?0:left>100?100:left)
+				item.left = left+'%'
+			}
+			let mouseupGradient = ()=>{
+				window.removeEventListener('mousemove',mousedownGradient)
+				window.removeEventListener('mouseup',mouseupGradient)
+			}
+			window.addEventListener('mousemove',mousedownGradient)
+			window.addEventListener('mouseup',mouseupGradient)
+			// event.target.addEventListener('touchmove',)
+		},
+		mousedownGradientAngle(event){
+			event.stopPropagation();
+			// isMoible()  true为移动端
+			let domPosition = event.target.getBoundingClientRect()
+			let position = {
+				x:domPosition.x+domPosition.width/2,
+				y:domPosition.y+domPosition.height/2,
+			}
+			let angle
+			let mousedownGradientAngle = (e)=>{
+				let X = position.x 
+				let Y = position.y
+				let x = e.x - X
+				let y = Y - e.y
+				angle = Math.atan2(x,y)*(180 / Math.PI)
+				// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+				this.colorList[this.selectIndex].gradient.angle = angle
 
+			}
+			let mouseupGradientAngle = ()=>{
+				window.removeEventListener('mousemove',mousedownGradientAngle)
+				window.removeEventListener('mouseup',mouseupGradientAngle)
+			}
+			window.addEventListener('mousemove',mousedownGradientAngle)
+			window.addEventListener('mouseup',mouseupGradientAngle)
+		},
+		deleteGradientItem(){
+			if(this.colorList[this.selectIndex].gradient.gradientList.length <= 2)return
+			this.colorList[this.selectIndex].gradient.gradientList.splice(this.colorList[this.selectIndex].gradient.selectIndex,1)
+		},
+		addGradient(event){
+			let gradientWidth = event.target.clientWidth
+			let left = event.offsetX/gradientWidth
+			this.colorList[this.selectIndex].gradient.gradientList.push({
+				rgba:this.selectColor.rgba,
+				left:left.toFixed(2)*100+'%'
+			})
+		},
    //通过tcx获取颜色
 		getTcxColor(){
             if(!this.tcxColor){
@@ -764,10 +960,9 @@ export default defineComponent({
 						let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a? rv.a :1])
 						this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
 						this.selectColor  = this.reviewColor
-						DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] =  {r:rv.r, g:rv.g, b:rv.b}
+						this.colorList[this.selectIndex] =  {r:rv.r, g:rv.g, b:rv.b}
 						this.pantongName = rv.name
-						let colorList =DesignDetailEnd.colorList.filter((v) => Object.keys(v).length)
-						this.setColorboardList(colorList)
+						let colorList =this.colorList.filter((v) => Object.keys(v).length)
 						this.getColorBg = true
 					}else{
 						message.info(this.t('DesignDetailAlter.jsContent6'))
@@ -794,8 +989,8 @@ export default defineComponent({
 				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
 					.then((rv) => {
 						if (rv) {
-							this.selectColor.tcx = rv[0].tcx
-							this.selectColor.name = rv[0].name
+							this.colorList[this.selectIndex].tcx = rv[0].tcx
+							this.colorList[this.selectIndex].name = rv[0].name
 							resolve();
 						}
 					})
@@ -804,19 +999,7 @@ export default defineComponent({
 					});
 			});
 		},
-		setColorboardList(colorList){
-			
-            let  newColorList = colorList.map((v)=>{
-                let data = {
-                    id:'',
-                    name:'',
-                    rgbValue:v
-                }
-				
-                return data
-            })
-
-        },
+	
         fileUploadChange(data){
             let file = data.file
             let fileData = file.originFileObj
@@ -1129,6 +1312,7 @@ export default defineComponent({
 
 	.detail_color{
 		// height: calc(100% - 5.4rem*1.2));
+		&.detail_color::-webkit-scrollbar{display: none;}
 		height: 100%;
 		overflow-y: auto;
 		overflow-x: hidden;
@@ -1273,10 +1457,9 @@ export default defineComponent({
 				}
 			}
 			.color_setting_block{
-				width: calc(17.5rem*1.2);
 				margin: auto;
 				background: linear-gradient(70deg, #eee4f3, #f3f4e6);
-
+				width: 24rem;
 				border-radius: calc(1rem*1.2);
 				overflow: hidden;
 				// box-shadow: 2px 2px 8px #000;
@@ -1286,14 +1469,15 @@ export default defineComponent({
 					box-shadow:none;
 				}
 				.chrome_color{
-					width: calc(17.5rem*1.2);
+					width: 24rem;
 					// height: 16.5rem*1.2);
 					overflow: hidden;
 
 					.vc-chrome-saturation-wrap{
 						height: 100%;
-						width: calc(16rem*1.2);
-						height: calc(16rem*1.2);
+						// width: calc(16rem*1.2);
+						width: 100%;
+						height: calc(14rem*1.2);
 						max-height: calc(17rem*1.2);
 						max-width: calc(17rem*1.2);
 						margin: calc(.7rem*1.2) auto;
@@ -1424,6 +1608,98 @@ export default defineComponent({
 						height: calc(1rem*1.2);
 					}
 				}
+				.color_setting_operateSingle{
+						text-align: center;
+						margin: 1rem 0;
+					}
+					.color_setting_operate{
+						*{
+							-webkit-touch-callout: none; /* iOS Safari */
+							-webkit-user-select: none; /* Safari */
+							-moz-user-select: none; /* Firefox */
+							-ms-user-select: none; /* Internet Explorer/Edge */
+							user-select: none;
+						}
+						.color_setting_operate_item{
+							display: flex;
+							justify-content: space-around;
+							align-items: center;
+							.operate_item_box{
+							}
+						}
+						.color_setting_operate_control{
+							.operate_item_delete,.operate_item_angle{
+								cursor: pointer;
+							}
+							.operate_item_delete{
+								i{
+								display: flex;
+									font-size: 3rem;
+								}
+							}
+							.operate_item_angle{
+								.operate_item_angle_box{
+									border-radius: 50%;
+									width: 4rem;
+									height: 4rem;
+									border: solid 2px #39215b;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									cursor: pointer;
+									>div{
+										height: 100%;
+										width: 1rem;
+										position: relative;
+										pointer-events:none;
+									}
+									>div::before{
+										position: absolute;
+										content: "";
+										top: 0.2rem;
+										width: 1rem;
+										height: 1rem;
+										border-radius: 50%;
+										background: #39215b;
+									}
+								}
+							}
+						}
+						.color_setting_operate_input{
+							width: 80%;
+							// padding: 0 10%;
+							margin: 1.2rem 10%;
+							border-radius: 10%;
+							position: relative;
+							height: 2.5rem;
+							.color_setting_operate_bg{
+								border-radius: .5rem;
+								width: 100%;
+								height: 2.5rem;
+								background: #fff;
+								position: absolute;
+							}
+						}
+						.color_setting_operate_btn{
+							position: absolute;
+							top: 50%;
+							transform: translate(-50%,-50%);
+							left: 0;
+							width: 1rem;
+							height: 110%;
+							border: .2rem solid;
+							border-radius: .5rem;
+							cursor: pointer;
+							box-sizing: content-box;
+							z-index: 2;
+							&.active{
+								border: .3rem solid;
+							}
+						}
+						.color_setting_operate_btn:hover{
+							border: .3rem solid;
+						}
+					}
 
 				.sileder_color{
 					margin-top:calc(1.3rem*1.2);
diff --git a/src/component/Detail/DesignDetailEnd.vue b/src/component/Detail/DesignDetailEnd.vue
index 5674a4a8..cc385ceb 100644
--- a/src/component/Detail/DesignDetailEnd.vue
+++ b/src/component/Detail/DesignDetailEnd.vue
@@ -73,9 +73,10 @@
 			<div class="modal_img">
 				<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
 					<div :title="color?.name?color?.name:''" @click="selectColorItem(index,color)" @dblclick="setSelectColorItem(color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
-						<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
+						<div v-if="!color?.gradient" class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
 						</div>
-						<div class="color_content_body">
+						<div class="color_content" v-else :style="{height:'100%','background-image':color?.gradient?`linear-gradient(${color?.gradient.angle}deg,${setGradient(color?.gradient)}`:'none'}"></div>
+						<div v-if="!color?.gradient" class="color_content_body">
 							<div class="color_des">{{color.tcx}}</div>
 							<div class="color_des">{{ color.name }}</div>
 						</div>
@@ -103,7 +104,7 @@ import DesignPrintOperation from './DesignPrintOperation.vue';
 import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
 import { message,Upload} from 'ant-design-vue';
 import { openGuide,driverObj__ } from "@/tool/guide";
-import {isMoible} from '@/tool/util'
+import {isMoible,setGradual} from '@/tool/util'
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
@@ -128,8 +129,9 @@ export default defineComponent({
 
 		//颜色
 		// let colorList = ref([{}])
-		let colorList = ref([{},{},{},{},{},{},{},{},{}])
-
+		// let colorList = ref([{},{},{},{},{},{},{},{},{}])
+        let colorList = inject('colorList')//父组件传过来的数据
+        let selectIndex = inject('selectIndex')//父组件传过来的数据
 		//加载中
 		let loadingShow = ref(false)
 
@@ -148,6 +150,7 @@ export default defineComponent({
 			overallSingle,
 			systemDesignerPercentage,
 			colorList,
+			selectIndex,
 			loadingShow,
 			t,
         }
@@ -156,11 +159,29 @@ export default defineComponent({
         return{
 
 			//颜色
-            selectIndex:0,//选中的文件索引
 			getRGBA:{},
 			selectColor:{},
         }
     },
+	computed:{
+		setGradient(){
+			return (gradient)=>{
+				let gradientStr = ''
+				gradient.gradientList.sort((a, b) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradient.gradientList.forEach((item,index)=>{
+					let str = ','
+					if(gradient.gradientList.length == index+1)str = ''
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+				})
+				return `${gradientStr}`
+			}
+		}
+	},
     methods:{
 		//点击判断
 		init(num){
@@ -210,24 +231,19 @@ export default defineComponent({
 
 		//颜色
 		selectColorItem(index,color){
-			let hex
-			let parent = this.$parent
 			this.selectIndex = index
-            this.$parent.selectIndex = index
+			// if(this.$parent.selectColor?.rgba?.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
+			// 	return
+			// }
 			if(color.rgba?.r){
-				hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
+				this.$parent.selectColor = color
 			}else{
-				this.$parent.selectColor = {}
-				return
+				this.$parent.selectColor.isClick = {}
 			}
 			//判断是否对一个颜色重复点击
-			if(this.$parent.selectColor?.rgba?.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
-				return
-			}
 			
-            this.$parent.selectColor =  {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex}
-            this.$parent.tcxColor = ''
-			this.$parent.pantongName = ''
+            // this.$parent.selectColor.tcxColor = ''
+			// this.$parent.selectColor.pantongName = ''
         },
 		setSelectColorItem(color){
 			let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
@@ -304,13 +320,20 @@ export default defineComponent({
 				data.designSingleItemDTOList[index].printObject.ifSingle = false
 				data.designSingleItemDTOList[index].printObject.prints = []
 			}else if(this.type_ == 3){
-				if(this.$parent.selectColor?.rgba?.r == undefined){
+				if(this.colorList[this.selectIndex]?.rgba?.r == undefined){
 					message.info(this.t('DesignDetailEnd.jsContent2'))
 					return
 				}
-				let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
+				let color = `${this.colorList[this.selectIndex].rgba.r} ${this.colorList[this.selectIndex].rgba.g} ${this.colorList[this.selectIndex].rgba.b}`
 				data.designSingleItemDTOList[index].color = color
 			}
+			if(this.colorList[this.selectIndex].gradient){
+				let gradient = this.colorList[this.selectIndex].gradient
+				gradient.colorImg = setGradual(gradient,320,700)
+				data.designSingleItemDTOList[index].gradient = gradient
+			}else{
+				delete data.designSingleItemDTOList[index].gradient
+			}
 			data.designSingleItemDTOList[index].designType = this.sketchImg.designType?this.sketchImg.designType:this.current.designType
 			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
 			this.loadingShow = true
@@ -321,6 +344,11 @@ export default defineComponent({
 						if(item.type != 'body'){
 							if(item.id == designItemDetail.clothes[index].id || item.id == this.sketchImg.id_){
 								designItemDetail.clothes[index].color = item.color
+								if(item.gradient){
+									designItemDetail.clothes[index].gradient = item.gradient
+								}else{
+									delete designItemDetail.clothes[index].gradient
+								}
 								designItemDetail.clothes[index].designType = item.designType
 								designItemDetail.clothes[index].layersObject = item.layersObject
 								designItemDetail.clothes[index].minIOPath = item.minIOPath
diff --git a/src/component/Detail/setDesignItem.vue b/src/component/Detail/setDesignItem.vue
index ac739b56..22646bdd 100644
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -299,7 +299,7 @@ export default defineComponent({
 				w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
 				h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
 				width = w+'px'
-				// height = w*num+'px'
+				height = w*num+'px'
 			}else if(this.direction == 'top'){
 				num = width/height
 				this.frontBack.front[this.imgDomIndex].style.top = 'auto'
@@ -309,19 +309,19 @@ export default defineComponent({
 				h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
 				
 				height = h+'px'
-				// width = h*num+'px'
+				width = h*num+'px'
 			}else if(this.direction == 'bottom'){
 				num = width/height
 				h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
 				height = h+'px'
-				// width = h*num+'px'
+				width = h*num+'px'
 			}else if(this.direction == 'left'){
 				this.frontBack.front[this.imgDomIndex].style.left = 'auto'
 				this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
 				w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
 				
 				width = w+'px'
-				// height = w*num+'px'
+				height = w*num+'px'
 			}
 			//判断尺寸是否到边
 			this.frontBack.front[this.imgDomIndex].style.width = width
diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue
index af6a5609..74c97b6f 100644
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -49,10 +49,15 @@
 								</div>
 							</div>
 						</div> -->
+						<!-- <div class="color_setting_operateSingle">
+							<div class="started_btn" @click="setOperate">
+								{{ colorList[selectIndex]?.gradient?.gradientShow? 'Gradual Change':'Single'}}
+							</div>
+						</div> -->
 						<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
 							<div class="color_setting_operate_item color_setting_operate_control">
 								<div class="operate_item_box">
-									<div>线性</div>
+									<div>Alignment</div>
 								</div>
 								<div class="operate_item_box operate_item_angle">
 									<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event)" @touchstart="mousedownGradientAngle($event)">
@@ -305,31 +310,8 @@ export default defineComponent({
 		const backIcon = document.createElement('div');
 		backIcon.classList.add('vc-sketch-color-wrap')
 		let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
-		let colorDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-color-wrap')[0]
-		// console.log(colorDom);
 		dropperDom.appendChild(backIcon);
-		colorDom.addEventListener('click',()=>{
-			// this.colorList[this.selectIndex]
-			this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
-			this.gradient.selectIndex = 0
-			this.gradient.gradientShow = true
-			this.colorList[this.selectIndex].rgba = this.selectColor.rgba
-			if(!this.colorList[this.selectIndex].gradient ){
-				if(this.selectColor.rgba.r){
-					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
-						r:this.selectColor.rgba.r,
-						g:this.selectColor.rgba.g,
-						b:this.selectColor.rgba.b,
-						a:1,
-					}
-				}
-				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
-			}else{
-				this.colorList[this.selectIndex].gradient = ''
-			}
-			let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
-			this.setColorboardList(colorList)
-		})
+		
 		
 		backIcon.addEventListener('click', async ()=>{
 			try {
@@ -370,7 +352,6 @@ export default defineComponent({
 		},
         //选择不同的色块
         selectColorItem(index,color){
-			console.log(this.colorList);
 			let hex
 			if(color?.rgba?.r){
 				hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
@@ -612,9 +593,15 @@ export default defineComponent({
             colorList.forEach((ele, index) => {
 				hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
                 this.colorList[index].rgba = ele.rgbValue
+				this.colorList[index].gradient = ele.gradient
+				// if(ele.gradient) this.colorList[index].gradient = ele.gradient
 				// if(ele.gradient) this.colorList[index].gradient = ele.gradient
             });
-            this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
+			if(this.colorList[0]?.gradient && this.colorList[0]?.gradient?.selectIndex>-1 && this.colorList[0]?.gradient?.gradientShow){
+				this.selectColor = {rgba:this.colorList[0].gradient.gradientList[0].rgba,hex:hex} //顔色选择器默认颜色
+			}else{
+				this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
+			}
             this.store.commit('setColorboardList',colorList)
         },
 		addGradient(event){
@@ -680,6 +667,29 @@ export default defineComponent({
 			}
 			window.addEventListener('mousemove',mousedownGradientAngle)
 			window.addEventListener('mouseup',mouseupGradientAngle)
+		},
+		setOperate(){
+			// this.colorList[this.selectIndex]
+			this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
+			this.gradient.selectIndex = 0
+			this.gradient.gradientShow = true
+			this.colorList[this.selectIndex].rgba = this.selectColor.rgba
+			if(!this.colorList[this.selectIndex].gradient){
+				if(this.selectColor.rgba.r){
+					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
+						r:this.selectColor.rgba.r,
+						g:this.selectColor.rgba.g,
+						b:this.selectColor.rgba.b,
+						a:1,
+					}
+				}
+				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+			}else{
+				this.selectColor = {rgba:this.colorList[this.selectIndex].gradient.gradientList[0].rgba}
+				this.colorList[this.selectIndex].gradient = ''
+			}
+			let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+			this.setColorboardList(colorList)
 		}
     }
 })
@@ -858,7 +868,6 @@ export default defineComponent({
 					}
 				}
 				.color_setting_block{
-					width: calc(17.5rem*1.2);
 					margin: auto;
 					background: linear-gradient(70deg, #eee4f3, #f3f4e6);
 
@@ -871,14 +880,16 @@ export default defineComponent({
 						box-shadow:none;
 					}
 					.chrome_color{
-						width: calc(17.5rem*1.2);
+						// width: calc(17.5rem*1.2);
+						width: 24rem;
 						// height: 16.5rem;
 						overflow: hidden;
 
 						.vc-chrome-saturation-wrap{
 							height: 100%;
-							width: calc(16rem*1.2);
-							height: calc(16rem*1.2);
+							// width: calc(16rem*1.2);
+							width: 100%;
+							height: calc(14rem*1.2);
 							max-height: calc(17rem*1.2);
 							max-width: calc(17rem*1.2);
 							margin: calc(.7rem*1.2) auto;
@@ -1059,9 +1070,11 @@ export default defineComponent({
 						}
 						
 					}
-					
+					.color_setting_operateSingle{
+						text-align: center;
+						margin: 1rem 0;
+					}
 					.color_setting_operate{
-						margin-top: 2rem;
 						*{
 							-webkit-touch-callout: none; /* iOS Safari */
 							-webkit-user-select: none; /* Safari */
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index e56481cf..e04ba32f 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -138,10 +138,10 @@
 				<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
 				<div
 					class="delete_like_file_block left1"
-					:class="[driver__.driver?'hideEvents':'']"
+					:class="[driver__.driver?'hideEvents':'',]"
 				>
 					<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-					<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
+					<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
 				</div>
 				<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 					<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
@@ -933,7 +933,8 @@ export default defineComponent({
                 height: calc(10rem*1.2);
             }
 			&:hover .delete_like_file_block{
-				display: block;
+				// display: block;
+				opacity: 1;
 			}
 			
         }
diff --git a/src/component/HomePage/PrintboardUpload.vue b/src/component/HomePage/PrintboardUpload.vue
index cf5e4498..b8d7bc77 100644
--- a/src/component/HomePage/PrintboardUpload.vue
+++ b/src/component/HomePage/PrintboardUpload.vue
@@ -136,7 +136,7 @@
 							:class="[driver__.driver?'hideEvents':'']"
 						>
 							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-							<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
+							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
 						</div>
 						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
diff --git a/src/component/HomePage/RobotAssist.vue b/src/component/HomePage/RobotAssist.vue
index 706f0615..6a52627f 100644
--- a/src/component/HomePage/RobotAssist.vue
+++ b/src/component/HomePage/RobotAssist.vue
@@ -25,7 +25,7 @@
 								class="delete_like_file_block"
 							>
 								<i v-if="imgItem.id == null" class="fi fi-rr-heart" @click.stop="likeFile(imgItem,imgIndex,index)"></i>
-								<i v-else class="fi fi-sr-heart" @click.stop="likeFile(imgItem,imgIndex,index)"></i>
+								<i v-else class="fi fi-sr-heart" :adminLike="!!imgItem.id" @click.stop="likeFile(imgItem,imgIndex,index)"></i>
 							</div>
 							<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 								<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(item.img,imgIndex,index)"></i>
@@ -469,8 +469,14 @@ export default defineComponent({
 					overflow: hidden;
 					margin: 0 5%;
 					margin-bottom: 5%;
+					.delete_like_file_block{
+						cursor: pointer;
+						width: 2rem;
+						height: 2rem;
+					}
 					&:hover .delete_like_file_block{
-						display: block;
+						// display: block;
+						opacity: 1;
 					}
 				}
 				img{
diff --git a/src/component/HomePage/SketchboardUpload.vue b/src/component/HomePage/SketchboardUpload.vue
index 9cd5aca1..37872089 100644
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -166,7 +166,7 @@
 							class="delete_like_file_block left1"
 						>
 							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-							<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
+							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like"  @click.stop="likeFile(item,'noLike')"></i>
 						</div>
 						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
diff --git a/src/component/HomePage/collectionModal.vue b/src/component/HomePage/collectionModal.vue
index 265e277a..54245da7 100644
--- a/src/component/HomePage/collectionModal.vue
+++ b/src/component/HomePage/collectionModal.vue
@@ -73,6 +73,7 @@ import { Https } from "@/tool/https";
 import {useStore} from 'vuex'
 import { openGuide,driverObj__ } from "@/tool/guide";
 import GO from "@/tool/GO";
+import {setGradual} from '@/tool/util'
 import { useI18n } from 'vue-i18n'
 // import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
 export default defineComponent({
@@ -96,7 +97,7 @@ export default defineComponent({
 		let position:any = computed(()=>{
 			return store.state.Workspace.workspacePosition
 		})
-		let showCollectionModal=ref(false)
+		let showCollectionModal:any=ref(false)
 		let collectionStep=ref(1)
 		provide('driver__',driver__)
 		let isShowMark = ref(false)
@@ -150,6 +151,12 @@ export default defineComponent({
 			
 			if(this.collectionStep == 3){
 				if(colorBoards.length >= 1){
+					colorBoards.forEach((colorItem:any) => {
+						if(colorItem.gradient){
+							colorItem.gradient.colorImg = setGradual(colorItem.gradient,320,700)
+						}
+					});
+					this.store.commit('setColorboardList',colorBoards)
 				}else{
 					message.info(this.$t('collectionModal.jsContent3'))
 					return
@@ -312,7 +319,6 @@ export default defineComponent({
 				.catch((res) => {
 					this.isShowMark = false
 				});
-			
 
         }
     }
diff --git a/src/component/HomePage/layoutMobile.vue b/src/component/HomePage/layoutMobile.vue
index 9f8d63b6..c1a96ee5 100644
--- a/src/component/HomePage/layoutMobile.vue
+++ b/src/component/HomePage/layoutMobile.vue
@@ -28,7 +28,7 @@
 				</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="index" @touchstart="setpitch(item,index)" ref="content" >
-						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'zoom':item.zoom}" draggable="false" v-modelImg> 
+						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}" draggable="false" 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>
@@ -317,21 +317,22 @@ export default defineComponent({
 		},
 		//操作旋转
 		rotote:{
-			mounted(el){
+			mounted(el,compile){
 				let mouse = true;
 				let angle :any = 0
 				let num:any
 				let x = 0
 				let y = 0
 				let elParent = el.parentNode.parentNode
-				if(document.defaultView){
-					let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
-					num = Number(transform[3])
-				}
+				
 				// 添加鼠标按下事件监听器
 				el.addEventListener('touchstart', (e:any) => {
 					e.stopPropagation()
 					mouse = true;
+					if(document.defaultView){
+						let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
+						num = Number(transform[3])
+					}
 					// let eX = (e.pageX - el.offsetLeft)  + el.offsetLeft
 					// let eY = elParent.offsetTop + el.offsetTop
 					var info = el.getBoundingClientRect();
@@ -345,7 +346,14 @@ export default defineComponent({
 						let x:any = e.targetTouches[0].clientX - X
 						let y:any = Y - e.targetTouches[0].clientY
 						angle = Math.atan2(x,y)*(180 / Math.PI)
-						elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
+						let instance:any = compile.instance
+						instance.layoutList.forEach((item:any) => {
+							if(item.setPitch){
+								angle = angle.toFixed(2)
+								item.angle = angle
+							}
+						});
+						// elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
 						el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
 					}
 					});
@@ -357,40 +365,6 @@ export default defineComponent({
 						// y = e.pageY
 					});
 				});
-				//缩放
-				let timeSwitch = true
-				el.parentNode.addEventListener('mousemove', (e:any) => {
-					el.parentNode.addEventListener('mousewheel',(e:any) => {
-						if(timeSwitch){
-							timeSwitch = false
-							if((e as WheelEvent).deltaY > 0){
-								if(num <= 1){
-									num -= 0.05
-								}else{
-									num -= 0.1
-								}
-							}else{
-								//放大
-								if(num <= 1){
-									num += 0.05
-								}else{
-									num += 0.1
-								}
-							}
-							if(num >= 3){
-								num = 3
-							}else if (num < .2){
-								num = .2
-							}
-							setTimeout(() => {
-								timeSwitch = true
-							}, 100);
-							elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
-						}
-						
-						
-					});
-				});
 			}
 			
 		},
@@ -600,7 +574,11 @@ export default defineComponent({
 				v.setPitch = false
 			})
 			this.layoutList = parentList
-			
+			this.layoutList[0].setPitch = true
+			this.layoutList[0].zoom = this.layoutList[0].zoom?this.layoutList[0].zoom:1
+			this.moodItemScale = this.layoutList[0].zoom*100
+			this.moodIndex = 0
+
 			this.moodbList = this.moodb[parentList.length-1]
 			this.moodbClassName = this.moodb_className
 		},
diff --git a/src/component/HomePage/scaleImage.vue b/src/component/HomePage/scaleImage.vue
index 9e2b2544..57377a6c 100644
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -23,7 +23,7 @@
 			<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
 			<div class="img_operate_block">
 				<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
-				<i v-else class="fi fi-sr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
+				<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
 			</div>
 			
 			
diff --git a/src/component/WorksPage/newScaleImage.vue b/src/component/WorksPage/newScaleImage.vue
index 3c39ed82..bb7df1aa 100644
--- a/src/component/WorksPage/newScaleImage.vue
+++ b/src/component/WorksPage/newScaleImage.vue
@@ -12,34 +12,48 @@
 			:destroyOnClose="true"
         >
 		<div class="newScaleImage_btn">
-			<div class="collection_closeIcon left" @click.stop="cancelDsign()">
+			<div class="collection_closeIcon" @click.stop="cancelDsign()">
 				<i class="fi fi-rr-cross-small"></i>
 			</div>
-			<div class="collection_closeIcon" @click.stop="download()">
+			<!-- <div class="collection_closeIcon" @click.stop="download()">
 				<i class="fi fi-rr-down-to-line"></i>
-			</div>
+			</div> -->
 		</div>
 		<div class="newScaleImage_page">
-			<div class="newScaleImage_content">
+			<div class="newScaleImage_left">
 				<div class="newScaleImage_content_right">
 					<div class="newScaleImage_content_right_img">
 						<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
-						<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
-						<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
 					</div>
 					<div class="nav_centent" v-mousewheel="{allLength:scaleImageList.length}" :style="{'margin-top':scaleImageMarginTop}">
 						<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :title="scaleImageIndex" :src="item?.imgUrl" :key="item.id">
 					</div>
 				</div>
-				<div class="newScaleImage_content_left">
-					<div class="newScaleImage_content_left_type">
+			</div>
+			<div class="newScaleImage_right">
+				<div class="newScaleImage_right_content">
+					<div class="newScaleImage_right_content_type">
 						<div class="generate_item_title_left scaleImage_chunk_title">类型：collection/generate</div>
 					</div>
-					<!-- <div class="newScaleImage_content_left_collection">
-
-					</div> -->
-					<div class="newScaleImage_content_left_generate">
-						<div v-show="true" class="scaleImage_chunk_item content_left_generate_item">
+					<div v-if="true" class="newScaleImage_right_content_collection">
+						<!-- <div class="scaleImage_chunk_item content_left_collection_detail">
+							<div class="scaleImage_chunk_title">设计模式:</div>
+							<div class="scaleImage_chunk_title_intro">
+								Overall
+							</div>
+						</div> -->
+						<div class="scaleImage_chunk_item content_left_collection_content">
+							<div class="scaleImage_chunk_title">Finished Products</div>
+							<div class="content_left_collection_content_list">
+								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+							</div>
+						</div>
+						<div class="started_btn">二创</div>
+					</div>
+					<div v-else class="newScaleImage_right_content_generate">
+						<div class="scaleImage_chunk_item content_left_generate_item">
 							<div class="content_left_generate_item_title">
 								<div class="scaleImage_chunk_title">模型：123123</div>
 								<div class="generate_item_title_right">
@@ -58,37 +72,44 @@
 						</div>
 					</div>
 				</div>
-			</div>
-			<div class="newScaleImage_detail">
-				<div class="newScaleImage_detail_left">
-					<div>comment</div>
-					<div>
-						
-					</div>
-				</div>
-				<div class="newScaleImage_detail_right">
+				<div class="newScaleImage_right_detail">
 					<div class="scaleImage_chunk_item">
-						<div class="detail_right_user detail_right_item">
+						<div class="detail_right_user detail_left_right_item">
 							<div class="detail_right_user_head">
-								<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
+								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
 							</div>
 							<div class="detail_right_user_content">
 								<div class="scaleImage_chunk_title">名字</div>
-								<div class="detail_right_user_content_intro">个性签名</div>
+								<div class="scaleImage_chunk_title_intro">个性签名</div>
 								<div class="scaleImage_chunk_btn">关注</div>
 							</div>
 						</div>
-						<div class="detail_right_operation detail_right_item">
-							<div>like</div>
-							<div>收藏</div>
+						<div class="detail_right_work_detail detail_left_right_item">
+							<div class="scaleImage_chunk_title">这是一套合成图</div>
+							<div class="scaleImage_chunk_title_intro">1111111111111111111111111111</div>
 						</div>
-						<div class="detail_right_look_operation detail_right_item">
-							<div>
-								<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
+						<div class="detail_right_date detail_left_right_item">
+							<div class="detail_right_date_setUp">
+								<div>创建时间</div>
+								<span>2024/11/1/1</span>
+							</div>
+							<div class="detail_right_date_upData">
+								<div>更新时间</div>
+								<span>2024/11/1/1</span>
+							</div>
+						</div>
+						<div class="detail_right_look_operation detail_left_right_item">
+							<div class="detail_left_right_item_click">
+								<svg :adminLike="!!true" xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
 									<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
 								</svg>
 								<span>321</span>
 							</div>
+							<div class="detail_left_right_item_click">
+								<i v-if="true" :adminLike="!!true" class="fi fi-sr-thumbs-up" style="color: rgba(158, 158, 167);"></i>
+								<i v-else class="fi fi-rr-social-network"></i>
+								<span>321</span>
+							</div>
 							<div>
 								<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
 									<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
@@ -101,11 +122,11 @@
 								<span>321</span>
 							</div>
 						</div>
-						<div class="detail_right_auther detail_right_item">
+						<div class="detail_right_auther detail_left_right_item">
 							<div class="scaleImage_chunk_title">Auther Other Products</div>
 							<div class="detail_right_auther_img">
 								<div class="detail_right_auther_img_item">
-									<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
+									<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
 								</div>
 								<div class="detail_right_auther_img_item">
 									<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
@@ -123,6 +144,58 @@
 						</div>
 					</div>
 				</div>
+				<div class="newScaleImage_right_comment scaleImage_chunk_item">
+					<div class="scaleImage_chunk_title">Comment</div>
+					<div v-if="false" class="newScaleImage_right_comment_null">
+						<div class="scaleImage_chunk_title">No Comments</div>
+						<div class="scaleImage_chunk_title">You can be the first!</div>
+					</div>
+					<div v-else class="newScaleImage_right_comment_content">
+						<div class="detail_left_content_item">
+							<div class="detail_left_content_item_img">
+								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+							</div>
+							<div class="detail_left_content_item_content">
+								<div class="scaleImage_chunk_title">名字</div>
+								<div class="scaleImage_chunk_title_intro">个性签名</div>
+								<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']">这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
+								<div class="detail_left_content_item_btn">
+									<div class="left_content_item_reply">回复</div>									
+									<div class="left_content_item_thumbs">
+										<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
+										<span>123</span>
+									</div>									
+									<div v-show="true" class="left_content_item_unfold">展开</div>
+								</div>
+								<div class="detail_left_content_item_replyContent">
+									<div class="detail_left_content_item_img">
+										<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+									</div>
+									<div class="detail_left_content_item_content">
+										<div class="scaleImage_chunk_title">名字</div>
+										<div class="scaleImage_chunk_title_intro">个性签名</div>
+										<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']"><span class="scaleImage_chunk_title">@名字</span>这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
+										<div class="detail_left_content_item_btn">
+											<div class="left_content_item_reply">回复</div>									
+											<div class="left_content_item_thumbs">
+												<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
+												<span>123</span>
+											</div>									
+											<div v-show="false" class="left_content_item_unfold">展开</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="newScaleImage_right_comment_setComment">
+						<input type="text" placeholder="回复Wxd的评论">
+						<div class="detail_left_setComment_btn">
+							<i class="fi fi-ss-paper-plane-top"></i>
+						</div>
+					</div>
+				</div>
+				
 			</div>
 		</div>
 	</a-modal>
@@ -152,8 +225,6 @@ export default defineComponent({
 			document.execCommand("copy");
 		}
 		let init = (list:any,index:any,dialogueIndex:any)=>{
-			console.log(213123);
-			
 			scaleImage.value = true
 			imgData.scaleImageList = list
 			imgData.scaleImageIndex = index
@@ -184,7 +255,7 @@ export default defineComponent({
 		// },
 		watch(()=>imgData.scaleImageIndex,
 			(newVal,oldVal)=>{
-				let dom:any = document.querySelector('.newScaleImage_content .nav_centent')
+				let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
 			if(!dom) return
 			let contentItemHeight = Number(getComputedStyle(dom).getPropertyValue('--snap-size').split('rem')[0]);
 			imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
@@ -298,6 +369,7 @@ export default defineComponent({
 	.newScaleImage_page{
 		overflow-y: auto;
 		height: 100%;
+		display: flex;
 		&.newScaleImage_page::-webkit-scrollbar{display: none;}
 	}
 
@@ -360,14 +432,34 @@ export default defineComponent({
 		font-weight: 600;
 		color: #000;
 	}
-	.newScaleImage_content{
-		width: 100%;
+	.scaleImage_chunk_title_comment{
+		font-size: 1.6rem;
+		font-weight: 600;
+		color: #000;
+		max-height: 8.5rem;
+	    overflow: hidden;
+		&.active{
+			max-height: max-content;
+		}
+	}
+	.scaleImage_chunk_title_intro{
+		font-size: 1.6rem;
+		font-weight: 300;
+		color: #535353;
+		// overflow: hidden;
+		// text-overflow: ellipsis;
+		// white-space: nowrap;
+	}
+	
+	.newScaleImage_left{
 		display: flex;
-		
+		width: 60%;
+		position: sticky;
+		top: 0;
 		.newScaleImage_content_right{
-			--content-height: 50rem;
+			--content-height: 60rem;
 			display: flex;
-			width: 60%;
+			width: 100%;
 			flex-wrap: wrap;
 			justify-content: space-between;
 			height: var(--content-height);
@@ -375,9 +467,11 @@ export default defineComponent({
 			overflow: hidden;
 			.newScaleImage_content_right_img{
 				height: 100%;
+				width: auto;
 				width: 60%;
 				overflow-x: auto;
 				display: flex;
+				justify-content: center;
 				img{
 					width: auto;
 					max-width: 100%;
@@ -405,7 +499,9 @@ export default defineComponent({
 			.nav_centent_img{
 				max-width: calc(var(--snap-size) - 2rem);
 				height: calc(var(--snap-size) - 2rem);
-				object-fit: cover;
+				object-fit: contain;
+				width: auto;
+				background-color: #fff;
 				object-position: 50%,50%;
 				border-radius: calc(1rem*1.2);
 				cursor: pointer;
@@ -433,23 +529,71 @@ export default defineComponent({
 				}
 			}
 		}
-		.newScaleImage_content_left{
-			width: 40%;
-			padding: 0 var(--padding);
+		
+	}
+	.newScaleImage_right{
+		width: 40%;
+		padding-left: var(--margin);
+		.newScaleImage_right_content{
 			display: flex;
 			flex-direction: column;
+			height: var(--content-height);
 			.generate_item_title_left{
 				font-size: 2.4rem;
 			}
-			.newScaleImage_content_left_type{
+			.newScaleImage_right_content_type{
 				padding: var(--padding) 0;
 				margin-bottom: var(--margin);
 				border-bottom: .2rem solid var(--border-color);
 			}
-			.newScaleImage_content_left_generate{
+			.newScaleImage_right_content_collection,.newScaleImage_right_content_generate{
 				display: flex;
 				flex-direction: column;
 				flex: 1;
+			}
+			.newScaleImage_right_content_collection{
+				&.newScaleImage_right_content_collection::-webkit-scrollbar{display: none;}
+				text-align: center;
+				// .content_left_collection_btn{
+				// 	display: flex;
+				// 	justify-content: space-around;	
+				// }
+				.started_btn{
+					margin-bottom: var(--margin);
+				}
+				.content_left_collection_detail{
+					height: calc(8rem + var(--padding) * 2);
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+					.scaleImage_chunk_title{
+						margin-right: 1rem;
+					}
+				}
+				.content_left_collection_content{
+					flex: 1;
+					overflow: hidden;
+					display: flex;
+					flex-direction: column;
+					align-items: flex-start;
+					
+					.content_left_collection_content_list{
+						overflow-x: auto;
+						display: flex;
+						flex: 1;
+						width: 100%;
+						align-items: center;
+						margin-top: var(--padding);
+						img{
+							height: 30rem;
+							width: auto;
+							margin-right: var(--margin);
+						}
+					}
+					
+				}
+			}
+			.newScaleImage_right_content_generate{
 				.content_left_generate_item{
 					
 					overflow: hidden;
@@ -478,7 +622,7 @@ export default defineComponent({
 						margin-top: var(--padding);
 						width: 100% !important;
 						height: 10rem !important;
-						border-radius: 4px;
+						border-radius: 4rem;
 						border: .2rem solid var(--border-color);
 						font-size: 1.8rem;
 						padding: 1rem;
@@ -493,26 +637,127 @@ export default defineComponent({
 				}
 			}
 		}
-	}
-	.newScaleImage_detail{
-		display: flex;
-		margin-top: var(--margin);
-		.newScaleImage_detail_right,.newScaleImage_detail_left{
+		.newScaleImage_right_detail,.newScaleImage_right_comment{
 			height: auto;
-		}
-		.newScaleImage_detail_left{
-			width: 60%;
-		}
-		.newScaleImage_detail_right{
-			width: 40%;
-			padding: 0 var(--padding);
-			.detail_right_item{
+			.detail_left_right_item{
 				margin-bottom: var(--margin);
 			}
-			.detail_right_item:last-child{
+			.detail_left_right_item_click{
+				cursor: pointer;
+			}
+			.detail_left_right_item:last-child{
 				margin-bottom: 0;
 			}
-			
+		}
+		.newScaleImage_right_comment{
+			display: flex;
+			flex-direction: column;
+			>.scaleImage_chunk_title{
+				text-align: center;
+			}
+			.newScaleImage_right_comment_null,.newScaleImage_right_comment_content{
+				flex: 1;
+			}
+			.newScaleImage_right_comment_null{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				.scaleImage_chunk_title{
+					font-size: 3rem;
+				}
+				
+			}		
+			.newScaleImage_right_comment_content{
+				max-height: 60rem;
+				overflow-y: auto;
+				.detail_left_content_item{
+					display: flex;
+					margin-bottom: var(--margin);
+					&.detail_left_content_item:last-child{
+						margin-bottom: 0;
+					}
+					.detail_left_content_item_img{
+						border-radius: 50%;
+						overflow: hidden;
+						width: 5rem;
+						height: 5rem;
+					}
+					.detail_left_content_item_content{
+						flex: 1;
+						margin-left: 1rem;
+						width: calc(100% - 6rem - 1rem);
+						>div{
+							margin-top: .4rem;
+							>span{
+								margin-right: .5rem;
+								color: rgba(122, 97, 220);
+							}
+						}
+
+						
+						.detail_left_content_item_btn{
+							display: flex;
+							align-items: center;
+							.left_content_item_reply,.left_content_item_thumbs,.left_content_item_unfold{
+								cursor: pointer;
+							}
+							.left_content_item_reply:hover{
+								color: #000;
+							}
+							.left_content_item_thumbs{
+								display: flex;
+								margin-left: 2rem;
+								i{
+									font-size: 2rem;
+									margin-right: 1rem;
+									display: flex;
+								}
+							}
+							.left_content_item_unfold{
+								margin-left: auto;
+								margin-right: 1rem;
+							}
+						}
+						.detail_left_content_item_replyContent{
+							margin-top: var(--padding);
+							display: flex;
+						}
+					}
+				}
+			}
+			.newScaleImage_right_comment_setComment{
+				display: flex;
+				align-items: center;
+				height: 4rem;
+				justify-content: center;
+				margin-top: var(--padding);
+				input,.detail_left_setComment_btn{
+					border-radius: 1rem;
+				}
+				input{
+					padding-left: var(--padding);
+					height: 100%;
+					width: 50%;
+					font-size: 2rem;
+					margin-right: var(--padding);
+					border: .2rem solid var(--border-color);
+				}
+				.detail_left_setComment_btn{
+					width: 4rem;
+					height: 4rem;
+					background: rgba(57, 33, 91);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					i{
+						color: #fff;
+						display: flex;
+					}
+				}
+			}
+		}
+		.newScaleImage_right_detail{
 			.detail_right_user{
 				display: flex;
 				.detail_right_user_head{
@@ -523,6 +768,9 @@ export default defineComponent({
 						height: 10rem;
 						object-fit: cover;
 					}
+				}
+				.detail_right_user_head:hover{
+
 				}
 				.detail_right_user_content{
 					flex: 1;
@@ -546,9 +794,11 @@ export default defineComponent({
 					}
 				}
 			}
-			.detail_right_operation{
-				display: flex;
-				justify-content: space-evenly;
+			.detail_right_work_detail{
+				.scaleImage_chunk_title_intro{
+					margin-top: calc(var(--padding) / 2);
+					height: auto
+				}
 			}
 			.detail_right_look_operation{
 				display: flex;
@@ -566,6 +816,19 @@ export default defineComponent({
 					}
 				}
 			}
+			.detail_right_date{
+				display: flex;
+				justify-content: space-between;
+				.detail_right_date_setUp,.detail_right_date_upData{
+					div{
+						font-size: 2rem;
+						font-weight: 600;
+					}
+					span{
+						font-size: 1.8rem;
+					}
+				}
+			}
 			.detail_right_auther{
 				.detail_right_auther_img{
 					width: 100%;
@@ -573,6 +836,7 @@ export default defineComponent({
 					margin-top: var(--padding);
 					--auther_wh: 8rem;
 					.detail_right_auther_img_item{
+						text-align: center;
 						width: var(--auther_wh);
 						height: var(--auther_wh);
 						flex-shrink: 1;
diff --git a/src/component/WorksPage/publish.vue b/src/component/WorksPage/publish.vue
new file mode 100644
index 00000000..90fcef17
--- /dev/null
+++ b/src/component/WorksPage/publish.vue
@@ -0,0 +1,371 @@
+<template>
+		<a-modal
+            class="publish_modal"
+            v-model:visible="publish"
+            :footer="null"
+            width="50%"
+            :maskClosable="false"
+            :centered="true"
+            :closable="false"
+            :mask="publishMask"
+			:keyboard="false"
+			:destroyOnClose="true"
+        >
+		<div class="publish_btn">
+			<div class="collection_closeIcon" @click.stop="cancelDsign()">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
+		</div>
+		<div class="publish_content">
+			<div class="modal_title_text">
+				<div>Publish</div>
+				<div class="modal_title_text_intro"></div>
+			</div>
+			<div class="publish_content_bottom">
+				<div class="publidh_left">
+					<div class="publidh_content_item">
+						<div class="publidh_content_item_title">Cover Picture</div>
+						<div class="publish_content_shrink publish_content_item">
+							<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
+						</div>
+					</div>
+					<div class="publidh_left_thubnai publidh_content_item">
+						<div class="publidh_content_item_title">Select Cover Picture</div>
+						<div class="publidh_left_thubnail_list publish_content_item">
+							<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
+							<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
+							<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
+							<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
+							<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
+							<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
+							<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
+						</div>
+					</div>
+				</div>
+				<div class="publidh_right">
+					<div class="publidh_right_name publidh_content_item">
+						<div class="publidh_content_item_title">Name</div>
+						<input type="text">
+					</div>
+					<div class="publidh_right_name publidh_content_item">
+						<div class="publidh_content_item_title">Description</div>
+						<textarea ref="textarea"></textarea>
+					</div>
+					<!-- <div class="publidh_right_name publidh_content_item">
+						<div class="publidh_content_item_title">Thumbnail preview</div>
+						<input type="text">
+					</div> -->
+					<div class="publidh_right_name publidh_content_item">
+						<div class="publidh_content_item_intro">
+							<span class="icon iconfont icon-zhuyi"></span>This will publish your work to the square for all users to see.
+						</div>
+					</div>
+					<div class="publidh_right_btn">
+						<div class="started_btn" @click="setClose">Close</div>
+						<div class="started_btn">Save as draft</div>
+						<div class="started_btn" @click="setPublish">Publish</div>
+					</div>
+				</div>
+			</div>
+		
+		</div>
+	</a-modal>
+
+</template>
+
+<script lang="ts">
+import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
+// import { Https } from "@/tool/https";
+// import { getCookie } from "@/tool/cookie";
+// import domTurnImg from '@/tool/domTurnImg'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Modal,message } from 'ant-design-vue';
+import { downloadIamge } from "@/tool/util";
+
+export default defineComponent({
+    setup() {
+        let publish: any = ref(false);//弹窗
+		let publishMask:any = ref(false)//弹窗遮罩
+		let publishDate:any = reactive({
+			publishName:'123123',
+			loadingShow:false,
+			publishMarginTop:0,
+			publishList:[],
+			publishIndex:0,//当前图片索引
+		})
+		// let textarea: any = ref(null)
+		// let setCopy = ()=>{
+		// 	textarea.value.select()
+		// 	document.execCommand("copy");
+		// }
+		let init = ()=>{
+			console.log(213123);
+			publish.value = true
+			// publishDate.publishList = list
+			// publishDate.publishIndex = index
+			// let publishList = this.store.state.UploadFilesModule.moodboard
+		}
+		// let download = ()=>{
+		// 	downloadIamge(publishDate.publishList[publishDate.publishIndex].imgUrl)
+		// }
+		// let setScaleImageIndex = (index:any)=>{
+		// 	publishDate.publishIndex = index
+		// }
+		// let LikeFile = (item:any,str:string)=>{
+		// 	const currentInstance = getCurrentInstance();
+		// 	let parent:any = currentInstance?.parent
+		// 	console.log(parent);
+			
+		// 	parent.likeFile(item,str)
+		// }
+	
+		// LikeFile(item:any,str:string){
+		// 	let parent:any = this.$parent
+		// 	parent.likeFile(item,str)
+		// },
+		let confrimRename = ()=>{
+		    
+		}
+		let cleardate = ()=>{
+		    publish.value = false
+		}
+		let cancelDsign = ()=>{
+			Modal.confirm({
+                title: 'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+					cleardate()
+                }
+            });
+		}
+		let setPublish= ()=>{
+			let _this = this
+			Modal.confirm({
+                title: 'This will publish your work to the square for all users to see. Please confirm whether to publish?',
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+                }
+            });
+		}
+
+        return {
+            publish,
+			publishMask,
+			...toRefs(publishDate),
+			// textarea,
+			// setCopy,
+			init,
+			// download,
+			// setScaleImageIndex,
+			// LikeFile,
+			confrimRename,
+			cancelDsign,
+			setPublish,
+        };
+    },
+    data() {
+        return {
+            // moodTemplateId: "", //模板id
+			
+        };
+    },
+    mounted() {
+    },
+    methods: {
+		// init(list:any,index:any,dialogueIndex:any){
+			
+		// },
+		// cancelDsign(){
+		// 	this.publish = false
+		// 	// this.publishList = []
+		// 	// this.publishIndex = 0
+		// },
+		// download(){
+		// 	// downloadIamge(this.publishList[this.publishIndex].imgUrl)
+		// },
+		// setScaleImageIndex(index:any){
+		// 	// this.publishIndex = index
+		// 	// console.log(this.publishIndex);
+			
+		// },
+		// LikeFile(item:any,str:string){
+		// 	let parent:any = this.$parent
+		// 	parent.likeFile(item,str)
+		// },
+    },
+});
+</script>
+
+<style lang="less">
+.publish_modal {
+	-moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+	position: relative;
+	border-radius: 1rem;
+	overflow: hidden;
+	.ant-modal-body {
+        padding: 0;
+		// height: calc(65vh - 6.4rem);
+		height: calc(65rem*1.2);
+		// background-color: #181818;
+    }
+	.ant-modal-btn{
+		
+	}
+	.ant-modal-body{
+		padding: calc(4rem*1.2) calc(5rem*1.2);
+		
+	}
+	.publish_page{
+		overflow-y: auto;
+		height: 100%;
+		&.publish_page::-webkit-scrollbar{display: none;}
+	}
+
+	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
+		font-size: 2rem;
+	}
+    .publish_btn {
+		.collection_closeIcon{
+			position: absolute;
+			top: calc(2rem*1.2);
+			right: calc(2rem*1.2);
+			cursor: pointer;
+			width: calc(4rem*1.2);
+			height: calc(4rem*1.2);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			&.left{
+				left: calc(2rem*1.2);
+			}
+			.fi-rr-cross-small::before{
+				padding: calc(.2rem*1.2);
+				border-radius: 5px;
+				border: solid 2px rgba(0, 0, 0, 0.22);
+				transition: .3s all;
+				color: rgba(0, 0, 0, 0.7);
+			}
+			&.collection_closeIcon:hover .fi-rr-cross-small::before{
+				border: solid 2px rgba(0, 0, 0, 5);
+				color: rgba(0, 0, 0, 1);
+			}
+			.fi-rr-down-to-line{
+				transition: .3s all;
+				color: rgba(0, 0, 0, .5);
+			}
+			.fi-rr-down-to-line:hover{
+				color: rgba(0, 0, 0, 1);
+			}
+		}
+	}
+	.publish_content{
+		display: flex;
+	    flex-direction: column;
+		height: 100%;
+	}
+	.publish_content_bottom{
+		--border-color: #c4c4c4;
+		display: flex;
+		justify-content: space-between;
+		flex: 1;
+		.publidh_left,.publidh_right{
+			display: flex;
+			flex-direction: column;
+		}
+		.publidh_content_item{
+			margin-bottom: 2rem;
+			.publidh_content_item_title{
+				font-weight: 600;
+				font-size: 1.8rem;
+				margin-bottom: 1rem;
+			}
+			.publidh_content_item_intro{
+				font-size: 1.4rem;
+			}
+			input{
+				width: 100%;
+				border-radius: 1rem;
+				height: 4rem;
+				padding-left: 2rem;
+				font-size: 2rem;
+				border: .2rem solid var(--border-color);
+			}
+			textarea{
+				flex: 1;
+				margin-top: var(--padding);
+				width: 100% !important;
+				height: 10rem !important;
+				border-radius: 1rem;
+				border: .2rem solid var(--border-color);
+				font-size: 1.8rem;
+				padding: 1rem;
+				color: #575757;
+				outline: none; /* 清除默认焦点样式 */
+			}
+			textarea:focus{
+				border: .2rem solid var(--border-color);
+				outline: none; /* 清除默认焦点样式 */
+			}
+		}
+		.publidh_content_item:last-child{
+			margin-bottom: 0;
+		}
+		.publidh_left{
+			width: 45%;
+			
+			.publish_content_shrink{
+				width: 100%;
+				img{
+					width: 100%;
+					height: 100%;
+					object-fit: contain;
+					max-height: 30rem;
+				}
+			}
+			.publidh_left_thubnai{
+				flex: 1;
+				.publidh_left_thubnail_list{
+					display: flex;
+					overflow-x: auto;
+					height: 24rem;
+					img{
+						height: 100%;
+						margin-right: 1rem;
+					}
+					img:last-child{
+					    margin-right: 0;
+					}
+				}
+			}
+		}
+		.publidh_right{
+			width: 45%;
+			.publidh_right_btn{
+				margin-top: auto;
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+				>div:nth-child(1){
+					margin-right: auto;
+				}
+				>div:nth-child(2){
+					margin-right: 1rem;
+				}
+			}
+		}
+	
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index d24097e5..016861a5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp,nextTick } from 'vue'
+import { createApp,nextTick, } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
@@ -17,7 +17,7 @@ import { Https } from "@/tool/https";
 // import "@/tool/color-thief.js";
 // import "@/tool/fabric.brushes.js";
 // import "@/tool/fabric.min.js";
-
+const app = createApp(App);
 flexible()
 import { getCookie, setCookie } from "@/tool/cookie";
 router.beforeEach((to, from, next) => {
@@ -67,9 +67,24 @@ async function isMurmur() {
 	
 }
 
+// app.directive('cliAdmin', {
+// 	mounted(el, binding) {
+// 		el.style.cursor = 'pointer'
+// 	},
+// 	updated (el,binding) {
+// 		// let value = binding.value
+// 		// if(value.state){
+// 		// 	el.firstElementChild.classList.add(`cliAdmin_${value.type}`)
+// 		// 	setTimeout(()=>{
+// 		// 		el.firstElementChild.classList.remove(`cliAdmin_${value.type}`)
+// 		// 	},500)
+// 		// }
+// 	}
+// });
 
 let loadingParam = {
 	loading: require('./assets/images/homePage/loading.gif'),
 	attempt: 1
 }
-createApp(App).use(store).use(router).use(Antd).use(VueLazyload, loadingParam).use(i18n).mount('#app')
+app.use(store).use(router).use(Antd).use(VueLazyload, loadingParam).use(i18n).mount('#app')
+
diff --git a/src/tool/util.js b/src/tool/util.js
index 8621cec0..d4c3ff6d 100644
--- a/src/tool/util.js
+++ b/src/tool/util.js
@@ -149,11 +149,13 @@ const formatTime = (timestamp, fmt) => {//吧时间戳转为YYYY-MM-DD hh:mm:ss
 const isMoible = () => {//判断是否是移动端
 	let is_mobile = navigator.userAgent.toLowerCase().match(/(ipad|ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
 	// alert(navigator.userAgent.toLowerCase())
-	var isiPad = /iPad/.test(navigator.platform) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 2);
+	var isiPad = (navigator.maxTouchPoints && navigator.maxTouchPoints > 0);
 	if (is_mobile) {
-		return true
-	} else {
-		return isiPad
+		return true//判断是否在正则内
+	} else if(window.matchMedia("(pointer:fine)").matches){
+		return false//判断是否支持鼠标
+	}else{
+		isiPad//判断触摸点
 	}
 }
 
@@ -203,6 +205,179 @@ async function murmur(){//生成唯一标识 ，暂时没有使用
 		});
 	})
 }
+/**
+ * @description: 计算canvas渐变起始坐标
+ * @param {number} canvas width
+ * @param {number} canvas height
+ * @param {number} angle 角度
+ * @return {*}
+ */
+function calculateGradientCoordinate(width,height,angle) {
+	if (angle >= 360) angle = angle - 360;
+	if (angle < 0) angle = angle + 360;
+	angle = Math.round(angle);
+  
+	// 当渐变轴垂直于矩形水平边上的两种结果
+	if (angle === 0) {
+	  return {
+		x0: Math.round(width / 2),
+		y0: height,
+		x1: Math.round(width / 2),
+		y1: 0,
+	  };
+	}
+	if (angle === 180) {
+	  return {
+		x0: Math.round(width / 2),
+		y0: 0,
+		x1: Math.round(width / 2),
+		y1: height,
+	  };
+	}
+  
+	// 当渐变轴垂直于矩形垂直边上的两种结果
+	if (angle === 90) {
+	  return {
+		x0: 0,
+		y0: Math.round(height / 2),
+		x1: width,
+		y1: Math.round(height / 2),
+	  };
+	}
+	if (angle === 270) {
+	  return {
+		x0: width,
+		y0: Math.round(height / 2),
+		x1: 0,
+		y1: Math.round(height / 2),
+	  };
+	}
+  
+	// 从矩形左下角至右上角的对角线的角度
+	const alpha = Math.round(
+	  (Math.asin(width / Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))) *
+		180) /
+		Math.PI,
+	);
+  
+	// 当渐变轴分别于矩形的两条对角线重合情况下的四种结果
+	if (angle === alpha) {
+	  return {
+		x0: 0,
+		y0: height,
+		x1: width,
+		y1: 0,
+	  };
+	}
+	if (angle === 180 - alpha) {
+	  return {
+		x0: 0,
+		y0: 0,
+		x1: width,
+		y1: height,
+	  };
+	}
+	if (angle === 180 + alpha) {
+	  return {
+		x0: width,
+		y0: 0,
+		x1: 0,
+		y1: height,
+	  };
+	}
+	if (angle === 360 - alpha) {
+	  return {
+		x0: width,
+		y0: height,
+		x1: 0,
+		y1: 0,
+	  };
+	}
+  
+	// 以矩形的中点为坐标原点，向上为Y轴正方向，向右为X轴正方向建立直角坐标系
+	let x0 = 0,
+	  y0 = 0,
+	  x1 = 0,
+	  y1 = 0;
+  
+	// 当渐变轴与矩形的交点落在水平线上
+	if (
+	  angle < alpha || // 处于第一象限
+	  (angle > 180 - alpha && angle < 180) || // 处于第二象限
+	  (angle > 180 && angle < 180 + alpha) || // 处于第三象限
+	  angle > 360 - alpha // 处于第四象限
+	) {
+	  // 将角度乘以（PI/180）即可转换为弧度
+	  const radian = (angle * Math.PI) / 180;
+	  // 当在第一或第四象限，y是height / 2，否则y是-height / 2
+	  const y = angle < alpha || angle > 360 - alpha ? height / 2 : -height / 2;
+	  const x = Math.tan(radian) * y;
+	  // 当在第一或第二象限，l是width / 2 - x，否则l是-width / 2 - x
+	  const l =
+		angle < alpha || (angle > 180 - alpha && angle < 180)
+		  ? width / 2 - x
+		  : -width / 2 - x;
+	  const n = Math.pow(Math.sin(radian), 2) * l;
+	  x1 = x + n;
+	  y1 = y + n / Math.tan(radian);
+	  x0 = -x1;
+	  y0 = -y1;
+	}
+  
+	// 当渐变轴与矩形的交点落在垂直线上
+	if (
+	  (angle > alpha && angle < 90) || // 处于第一象限
+	  (angle > 90 && angle < 180 - alpha) || // 处于第二象限
+	  (angle > 180 + alpha && angle < 270) || // 处于第三象限
+	  (angle > 270 && angle < 360 - alpha) // 处于第四象限
+	) {
+	  // 将角度乘以（PI/180）即可转换为弧度
+	  const radian = ((90 - angle) * Math.PI) / 180;
+	  // 当在第一或第二象限，x是width / 2，否则x是-width / 2
+	  const x =
+		(angle > alpha && angle < 90) || (angle > 90 && angle < 180 - alpha)
+		  ? width / 2
+		  : -width / 2;
+	  const y = Math.tan(radian) * x;
+	  // 当在第一或第四象限，l是height / 2 - y，否则l是-height / 2 - y
+	  const l =
+		(angle > alpha && angle < 90) || (angle > 270 && angle < 360 - alpha)
+		  ? height / 2 - y
+		  : -height / 2 - y;
+	  const n = Math.pow(Math.sin(radian), 2) * l;
+	  x1 = x + n / Math.tan(radian);
+	  y1 = y + n;
+	  x0 = -x1;
+	  y0 = -y1;
+	}
+  
+	// 坐标系更改为canvas标准，Y轴向下为正方向
+	x0 = Math.round(x0 + width / 2);
+	y0 = Math.round(height / 2 - y0);
+	x1 = Math.round(x1 + width / 2);
+	y1 = Math.round(height / 2 - y1);
+	return  {x0, y0, x1, y1};
+  }
+  
+const setGradual = (colorObj,colorWidth,colorHeight)=>{
+	let width = colorWidth || 320
+	let height = colorHeight || 700
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	canvas.width = width;
+	canvas.height = height;
+	let {x0, y0, x1, y1} = calculateGradientCoordinate(width,height,colorObj.angle)
+	const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+	colorObj.gradientList.forEach(item => {
+		let left = item.left.split('%')[0]/100
+		let rgba = `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
+		gradient.addColorStop(left, rgba); // 起始颜色
+	});
+	ctx.fillStyle = gradient;
+	ctx.fillRect(0, 0, width, height);
+	const dataURL = canvas.toDataURL('image/jpg');
+	return dataURL
+}
 export {
 	isEmail,
 	getUploadUrl,
@@ -216,4 +391,5 @@ export {
 	downloadIamge,
 	getBrowserInfo,
 	murmur,
+	setGradual,
 }
\ No newline at end of file
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index ab40ea79..8fb4cfb2 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -44,9 +44,9 @@
 				<router-link  :class="['nav_item',$route.name === 'history' ? 'select_nav' : '', ]" :to="`/home/history`">
 					{{$t('Header.HISTORY')}}
 				</router-link>
-				<router-link  :class="['nav_item',$route.name === 'works' ? 'select_nav' : '', ]" :to="`/home/works`">
+				<!-- <router-link  :class="['nav_item',$route.name === 'works' ? 'select_nav' : '', ]" :to="`/home/works`">
 					{{$t('Header.WORKS')}}
-				</router-link>
+				</router-link> -->
             </nav>
            
 			<div class="homeMain_right">
diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue
index 63875bd1..b25e43a2 100644
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -806,6 +806,7 @@ export default defineComponent({
 					id: v.id,
 					name: v.name,
 					tcx: v.tcx,
+					gradient:v.gradient,
 					rgbValue: "",
 				};
 				data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
@@ -994,6 +995,11 @@ export default defineComponent({
 						a: 1,
 					},
 				};
+				if(v.gradient){
+					newData.gradient = v.gradient;
+				}else{
+					delete newData.gradient;
+				}
 				return newData;
 			});
 			return colorList;
diff --git a/src/views/HomeView/Works.vue b/src/views/HomeView/Works.vue
index 2688e8cf..76c2f146 100644
--- a/src/views/HomeView/Works.vue
+++ b/src/views/HomeView/Works.vue
@@ -7,8 +7,8 @@
 			<div v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">{{ item.name }}</div>
 		</div>
         <div class="page_content">
-			<div class="page_content_item" v-for="item,index in worksList" :key="item" @click.stop="getImgScale(index)">
-				<div class="page_content_item_img">
+			<div class="page_content_item" v-for="item,index in worksList" :key="item">
+				<div class="page_content_item_img"  @click.stop="getImgScale(index)">
 					<img v-lazy="item.imgUrl" alt="">
 					<div class="delete_like_file_block" >
 						<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
@@ -20,19 +20,28 @@
 						{{item.name}}
 					</div>
 					<div class="page_content_item_text_bottom">
-						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" :style="{color:item.like?'red':'#9e9ea7',fill: 'currentColor'}">
-							<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-						</svg>
-						<span>
-							{{ item.likeNum }}
-						</span>
-						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
-							<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
-							<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
-						</svg>
-						<span>
-							{{ item.lookNum }}
-						</span>
+						<div>
+							<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
+								<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+							</svg>
+							<span>{{ item.likeNum }}</span>
+						</div>
+						<div>
+							<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
+							<i v-else class="fi fi-rr-social-network"></i>
+							<span>321</span>
+						</div>
+						<div>
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
+								<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
+								<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
+							</svg>
+							<span>{{ item.lookNum }}</span>
+						</div>
+						<!-- <div>
+							<i class="fi fi-rr-comment-alt-dots"></i>
+							<span>{{ item.lookNum }}</span>
+						</div> -->
 					</div>
 				</div>
 			</div>
@@ -170,7 +179,7 @@ export default defineComponent({
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					imgUrl: 'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
@@ -278,15 +287,15 @@ export default defineComponent({
 		.page_content_item{
 			display: flex;
 			flex-direction: column;
-			margin-right: 3rem;
-			margin-bottom: 3rem;
+			margin-right: 4rem;
+			margin-bottom: 4rem;
 		}
 		.page_content_item_text,.page_content_item_img{
 			display: flex;
 		}
 		.page_content_item_img{
-			width: 25rem;
-			height: 25rem;
+			width: 30rem;
+			height: 30rem;
 			overflow: hidden;
 			justify-content: center;
 			border-radius: 2rem;
@@ -328,11 +337,18 @@ export default defineComponent({
 				display: flex;
 				align-items: center;
 				justify-content: flex-end;
-				>svg{
-					width: 2rem;
-					height: 2rem;
-					margin-right: .5rem;
-					margin-left: 1rem;
+				>div{
+					display: flex;
+					align-items: center;
+					font-size: 2rem;
+					margin-right: 1rem;
+					i{
+						display: flex;
+						font-size: 2rem;
+					}
+					span{
+						margin-left: calc(var(--padding) / 2);
+					}
 				}
 			}
 		}
diff --git a/src/views/HomeView/history.vue b/src/views/HomeView/history.vue
index 805d4933..ac8876d6 100644
--- a/src/views/HomeView/history.vue
+++ b/src/views/HomeView/history.vue
@@ -69,6 +69,8 @@
 									<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
 									<div class="operate_item" @click="renameCollection(record,index)">{{ $t('LibraryPage.Rename') }}</div>
 									<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
+									<!-- <div class="operate_item" @click="setPublish(record)">Publish</div>
+									<div class="operate_item" @click="updatePublish(record)">Update Publish</div> -->
 									<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
 								</div>
 							</template>
@@ -78,7 +80,7 @@
             </div>
         </div>
         <HistoryDetail ref="historyDetail" :groupDetails="groupDetails" :collectionName="collectionName"></HistoryDetail>
-
+		<publish ref="publish"></publish>
 		<setLabel ref="setLabel"></setLabel>
 		<!-- <RobotAssist></RobotAssist> -->
 		<searchLabel ref="searchLabel"></searchLabel>
@@ -100,6 +102,7 @@ import { ElCascader } from 'element-plus'
 import { useI18n } from 'vue-i18n';
 import setLabel from '@/component/LibraryPage/setLabel.vue';
 import searchLabel from '@/component/LibraryPage/searchLabel.vue';
+import publish from "@/component/WorksPage/publish.vue";
 
 export default defineComponent({
     components: {
@@ -108,7 +111,8 @@ export default defineComponent({
 		// RobotAssist,
 		setLabel,
 		ElCascader,
-		searchLabel
+		searchLabel,
+		publish
     },
     setup() {
         let rangePickerValue:any = ref([])
@@ -121,13 +125,13 @@ export default defineComponent({
 					let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
 					return time
 				}},
-				{ title: useI18n().t('HistoryPage.SketchCounts'), align:'center', ellipsis: true, width: 150, dataIndex: 'sketchCount', key: 'sketchCounts' },
+				{ title: useI18n().t('HistoryPage.SketchCounts'), align:'center', ellipsis: true, width: 80, dataIndex: 'sketchCount', key: 'sketchCounts' },
 				{
 					title: useI18n().t('HistoryPage.Operations'),
 					key: 'operation',
 					align:'center', 
 					fixed: 'right',
-					width: 150, 
+					width: 180, 
 					// slots:{customRender:'action'}
 					Operations:true,
 				},
@@ -322,7 +326,14 @@ export default defineComponent({
             this.$router.push({name:'homePage',params: {id:record.id}})
         },
 
+		setPublish(record:any){
+			let publish:any = this.$refs.publish
+			publish.publishMask = true
+			publish.init(record)
+		},
+		updatePublish(record:any){
 
+		},
 		removeLabel(){
 			let setLabel:any = this.$refs.setLabel
 			let cascader:any = this.$refs.cascader
diff --git a/src/views/HomeView/library.vue b/src/views/HomeView/library.vue
index 1f06b2ad..8fbd2097 100644
--- a/src/views/HomeView/library.vue
+++ b/src/views/HomeView/library.vue
@@ -305,7 +305,7 @@
                                                     </div>
 													<div class="img_operate_block">
 														<i v-if="!img.like" class="fi fi-rr-heart operate_icon" @click.stop="likeFile(img,'like')"></i>
-														<i v-else class="fi fi-sr-heart operate_icon" @click.stop="likeFile(img,'noLike')"></i>
+														<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!img.like" @click.stop="likeFile(img,'noLike')"></i>
                                                     </div>
 												</div>
                                             </div>
@@ -1825,7 +1825,8 @@ export default defineComponent({
                                         }
 
                                         &:hover .img_item_hover{
-                                            display: block;
+                                            // display: block;
+											opacity: 1;
                                         }
 
                                         .img_item_hover{
@@ -1835,7 +1836,8 @@ export default defineComponent({
                                             left: 0;
                                             top:0;
                                             background: rgba(0,0,0,0.2);
-                                            display: none;
+                                            // display: none;
+											opacity: 0;
 
                                             .img_operate_content{
                                                 position: absolute;
@@ -1856,6 +1858,13 @@ export default defineComponent({
                                                 line-height: 3.6rem;
                                                 cursor: pointer;
                                                 margin-bottom: 0.4rem;
+												.operate_icon,i{
+													display: flex;
+													justify-content: center;
+													align-items: center;
+													width: 100%;
+													height: 100%;
+												}
                                                 .operate_icon{
                                                     font-size: 1.8rem;
                                                     color: #fff;
@@ -1866,6 +1875,7 @@ export default defineComponent({
 												i{
 													font-size: 1.8rem;
 													color: #fff;
+													
 												}
                                             }
 											
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index d9c91389..cc0119da 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -248,14 +248,12 @@ export default defineComponent({
         let timer:any =  0;
 		const {locale} = useI18n()
 		const store = useStore();
-	
         return{
 			store,
             timer,
 			locale
         }
     },
-
     data() {
         return {
 			checked:false,