注释渐变色功能和作品广场

2024-05-16 09:41:16 +08:00
parent 4d86e782e6
commit 051b9e4f38
24 changed files with 1561 additions and 262 deletions
--- 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;
--- 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{

 		}
--- 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',
--- 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);
--- 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
--- 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
--- 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 */
--- 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;
 			}
 			
        }
--- 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>
--- 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{
--- 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>
--- 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
 				});
-			

        }
    }
--- 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
 		},
--- 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>
 			
 			
--- 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;
--- a/src/component/WorksPage/publish.vue
+++ 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>
--- 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')
+
--- 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,
 }
--- 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">
--- 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;
--- 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);
+					}
 				}
 			}
 		}
--- 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
--- 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;
+													
 												}
                                            }
 											
--- 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,