fix

.env.dev

@@ -1,6 +1,6 @@
 NODE_ENV = 'development'
 # VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
-VUE_APP_BASE_URL = 'https://api.aida.com.hk'
+# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
 
 # VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
 # VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'

src/assets/style/style.css

@@ -596,6 +596,60 @@ li {
 .generalModel_page .generalModel_table_search .generalModel_state .header_user_content.active {
   display: block;
 }
+.generalModel {
+  -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;
+}
+.generalModel .ant-modal-body {
+  padding: 0;
+  height: calc(65rem*1.2);
+}
+.generalModel .ant-modal-body {
+  padding: calc(4rem*1.2) calc(5rem*1.2);
+}
+.generalModel .fi-rr-down-to-line,
+.generalModel .fi-rr-arrow-small-right,
+.generalModel .fi-rr-arrow-small-left {
+  font-size: 2rem;
+}
+.generalModel .generalModel_btn .generalModel_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;
+}
+.generalModel .generalModel_btn .generalModel_closeIcon.left {
+  left: calc(2rem*1.2);
+}
+.generalModel .generalModel_btn .generalModel_closeIcon .fi-rr-cross-small::before {
+  padding: calc(0.2rem*1.2);
+  border-radius: 5px;
+  border: solid 2px rgba(0, 0, 0, 0.22);
+  transition: 0.3s all;
+  color: rgba(0, 0, 0, 0.7);
+}
+.generalModel .generalModel_btn .generalModel_closeIcon.generalModel_closeIcon:hover .fi-rr-cross-small::before {
+  border: solid 2px #000000;
+  color: #000000;
+}
+.generalModel .generalModel_btn .generalModel_closeIcon .fi-rr-down-to-line {
+  transition: 0.3s all;
+  color: rgba(0, 0, 0, 0.5);
+}
+.generalModel .generalModel_btn .generalModel_closeIcon .fi-rr-down-to-line:hover {
+  color: #000000;
+}
 .generalModel_table_content {
   width: 100%;
   height: 100%;
@@ -1242,6 +1296,8 @@ textarea:focus {
   padding-bottom: calc(2rem*1.2);
   background: #fff;
   top: 0;
+  flex-wrap: wrap;
+  --width: 70%;
 }
 .collection_modal_body .input_border .input_box,
 .design_detail_modal_component .input_border .input_box,
@@ -1261,11 +1317,59 @@ textarea:focus {
 .library_page .input_border .input_box.active span {
   opacity: 1;
 }
+.collection_modal_body .input_border .search_keyword,
+.design_detail_modal_component .input_border .search_keyword,
+.library_page .input_border .search_keyword {
+  height: 0;
+  flex-basis: 100%;
+}
+.collection_modal_body .input_border .search_keyword .search_keyword_center,
+.design_detail_modal_component .input_border .search_keyword .search_keyword_center,
+.library_page .input_border .search_keyword .search_keyword_center {
+  justify-content: space-between;
+  display: flex;
+  width: var(--width);
+  background-color: #fff;
+  padding: 1rem 2rem;
+  border-radius: 0 0 0.4rem 0.4rem;
+  border-top: solid 0 #f1f1f1;
+  border-right: solid 1px #f1f1f1;
+  border-left: solid 1px #f1f1f1;
+  border-bottom: solid 1px #f1f1f1;
+  max-height: 30rem;
+  overflow-y: scroll;
+}
+.collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
+.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
+.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
+  display: flex;
+  overflow: hidden;
+  flex: 1;
+  flex-wrap: wrap;
+}
+.collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
+.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
+.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
+  border-radius: 0.4rem;
+  border: solid 1px #39215b;
+  background-color: #8156bd;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem 1rem;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+}
+.collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
+.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
+.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
+  margin-right: 0;
+}
 .collection_modal_body .input_border input,
 .design_detail_modal_component .input_border input,
 .library_page .input_border input {
   border-radius: calc(0.5rem*1.2);
-  width: 70%;
+  width: var(--width);
   border: 1px solid rgba(0, 0, 0, 0.15);
   padding-left: calc(1.5rem*1.2);
   border: calc(0.1rem*1.2) solid #F1F1F1;
@@ -1318,7 +1422,7 @@ textarea:focus {
   position: absolute;
   left: 0;
   font-size: calc(1.6rem*1.2);
-  width: 70%;
+  width: var(--width);
   border-radius: 4px;
   height: 20rem;
   top: 0.2rem;

src/assets/style/style.less

@@ -682,7 +682,67 @@ input:focus{
 	}
 }
 	
-.generalModel_table_content {
+.generalModel{//自带关闭的页面
+	-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);
+		
+	}
+	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
+		font-size: 2rem;
+	}
+    .generalModel_btn {
+		.generalModel_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);
+			}
+			&.generalModel_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);
+			}
+		}
+	}
+}
+.generalModel_table_content {//通用有数据列表的model
 	width: 100%;
 	// height: 100%;
 	height: 100%;
@@ -1340,6 +1400,8 @@ textarea:focus{
 		padding-bottom: calc(2rem*1.2);
 		background: #fff;
 		top: 0;
+		flex-wrap: wrap;
+		--width:70%;
 		.input_box{
 			position: relative;
 			z-index: 2;
@@ -1356,9 +1418,48 @@ textarea:focus{
 				}
 			}
 		}
+		.search_keyword{
+			height: 0;
+			flex-basis: 100%;
+			.search_keyword_center{
+				justify-content: space-between;
+				display: flex;
+				width: var(--width);
+				background-color: #fff;
+				padding: 1rem 2rem;
+				border-radius: 0 0 .4rem .4rem;
+				border-top: solid 0 #f1f1f1;
+				border-right: solid 1px#f1f1f1;
+				border-left: solid 1px#f1f1f1;
+				border-bottom: solid 1px#f1f1f1;
+				max-height: 30rem;
+				overflow-y: scroll;
+				.search_keyword_center_left{
+					display: flex;
+					overflow: hidden;
+					// width: 90%;
+					flex: 1;
+					flex-wrap: wrap;
+				}
+				.search_keyword_center_item{
+					border-radius: .4rem;
+					border: solid 1px #39215b;
+					background-color: #8156bd;
+					margin-right: 1rem;
+					margin-bottom: 1rem;
+					padding: .5rem 1rem;
+					color: #fff;
+					font-weight: 600;
+					cursor: pointer;
+				}
+				.search_keyword_center_item:last-child{
+					margin-right: 0;
+				}
+			}
+		}
 		input{
 			border-radius: calc(.5rem*1.2);
-			width: 70%;
+			width: var(--width);
 			border: 1px solid rgba(0,0,0,.15);
 			padding-left: calc(1.5rem*1.2);
 			border: calc(0.1rem*1.2) solid #F1F1F1;
@@ -1398,12 +1499,13 @@ textarea:focus{
 			left: 0;
 			font-size: calc(1.6rem*1.2);
 			// width: 30rem;
-			width: 70%;
+			width: var(--width);
 			border-radius: 4px;
 			height: 20rem;
 			top: .2rem;
 			border: 1px solid #dcdfe6;
 		}
+		
 		span{
 			position: absolute;
 			// bottom: calc(0rem*1.2);
@@ -1418,14 +1520,12 @@ textarea:focus{
 			// transform-origin: left bottom;
 			width: 100%;
 		}
-		
 		.generage_btn{
 			// margin: 0 auto;
 			margin-left: 2rem;
 		}
-
-		
 	}
+	
 	.upload_item{
 		display: flex;
 		flex-wrap: wrap;

src/component/Detail/DesignDetailAlter.vue

@@ -201,7 +201,7 @@
 									<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 class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event,'mousedown')" @touchstart="mousedownGradientAngle($event,'touchstart')">
 										<div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
 									</div>
 								</div>
@@ -212,7 +212,7 @@
 							<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 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,'mousedown')" @touchstart="mousedownGradient($event,item,index,'touchstart')"></div>
 							</div>
 						</div>
                     </div>
@@ -881,7 +881,13 @@ export default defineComponent({
 			}
 			let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
 		},
-		mousedownGradient(event,item,index){
+		mousedownGradient(event,item,index,str){
+			let moible = isMoible()
+			if(moible && str == 'mousedown'){
+				return
+			}else if(!moible && str == 'touchstart'){
+				return
+			}
 			event.stopPropagation();
 			this.colorList[this.selectIndex].gradient.selectIndex = index
 			let gradientRgba = item.rgba
@@ -889,25 +895,41 @@ export default defineComponent({
 			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 gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
 			let position = {
-				x:event.x,
+				x:moible?event.touches[0].screenX: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)
+				let left = ((moible?e.touches[0].screenX: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)
+				if(moible){
-				window.removeEventListener('mouseup',mouseupGradient)
+					window.removeEventListener('touchmove',mousedownGradient)
+					window.removeEventListener('touchend',mouseupGradient)
+				}else{
+					window.removeEventListener('mousemove',mousedownGradient)
+					window.removeEventListener('mouseup',mouseupGradient)
+				}
+			}
+			if(moible){
+				window.addEventListener('touchmove',mousedownGradient)
+				window.addEventListener('touchend',mouseupGradient)
+			}else{
+				window.addEventListener('mousemove',mousedownGradient)
+				window.addEventListener('mouseup',mouseupGradient)
 			}
-			window.addEventListener('mousemove',mousedownGradient)
-			window.addEventListener('mouseup',mouseupGradient)
 			// event.target.addEventListener('touchmove',)
 		},
-		mousedownGradientAngle(event){
+		mousedownGradientAngle(event,str){
+			let moible = isMoible()
+			if(moible && str == 'mousedown'){
+				return
+			}else if(!moible && str == 'touchstart'){
+				return
+			}
 			event.stopPropagation();
 			// isMoible()  true为移动端
 			let domPosition = event.target.getBoundingClientRect()
@@ -916,34 +938,33 @@ export default defineComponent({
 				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 x = (moible?e.touches[0].clientX:e?.x) - X
-				let y = Y - e.y
+				let y = Y -( moible?e.touches[0].clientY: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)
+				if(moible){
-				window.removeEventListener('mouseup',mouseupGradientAngle)
+					window.removeEventListener('touchmove',mousedownGradientAngle)
+					window.removeEventListener('touchend',mouseupGradientAngle)
+				}else{
+					window.removeEventListener('mousemove',mousedownGradientAngle)
+					window.removeEventListener('mouseup',mouseupGradientAngle)
+				}
+			}
+			if(moible){
+				window.addEventListener('touchmove',mousedownGradientAngle)
+				window.addEventListener('touchend',mouseupGradientAngle)
+			}else{
+				window.addEventListener('mousemove',mousedownGradientAngle)
+				window.addEventListener('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(){

src/component/Detail/habit.vue

@@ -55,6 +55,14 @@
 					</ul>
 				</div>
             </div>
+            <div class="habit_Overal_Single habit_style">
+				<div class="habit_style_left">
+					<div>Style:</div>
+					<span :title="workspaceItem.styleName">{{ workspaceItem.styleName }}</span>
+				</div>
+				<!-- <div class="button_second">选择</div> -->
+				<div class="started_btn" @click="setStyle">选择</div>
+			</div>
             <div class="habit_Overal_Single">
                 <div
                     class="habit_Overal_Single_text"
@@ -157,6 +165,7 @@
 				</div>
 				</div>
 			</div>
+			<habitSetStyle ref="habitSetStyle" @setParentData=setParentData @setWorkspaceStyle=setWorkspaceStyle></habitSetStyle>
         </div>
     </div>
 </template>
@@ -170,11 +179,13 @@ import { Modal,message,Upload} from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { openGuide,driverObj__ } from "@/tool/guide";
 import { useI18n } from "vue-i18n";
+import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
 import { position } from "html2canvas/dist/types/css/property-descriptors/position";
 export default defineComponent({
     components: {
         DownOutlined,
         UserOutlined,
+		habitSetStyle,
     },
 	setup(){
         const store = useStore();
@@ -225,6 +236,7 @@ export default defineComponent({
 			},
 		])
 		const {t} = useI18n()
+		let styleList = ref([])
 	return{
 			systemSeleves,
 			mannequins,
@@ -237,7 +249,8 @@ export default defineComponent({
 			singleTypeList,
 			sex,
 			position,
-			t
+			t,
+			styleList
 		}
     },
 	watch:{
@@ -288,17 +301,6 @@ export default defineComponent({
 				this.workspace.workspaceList.forEach((item:any) => {
 					item.putName = false
 				});
-				// this.workspace.workspaceList.forEach((v:any)=>{
-				// 	if(v.id == this.workspaceItem.id_){
-				// 		this.workspaceItem = v
-				// 		this.workspaceItem.id_ = v.id
-				// 	}
-				// 	if(v.id == oldVal){
-				// 		delete v.isLastIndex
-				// 		this.putWorkspace(v,newVal)
-				// 		// this.getDetail(newVal)
-				// 	}
-				// })
 			}
 		},
 		'workspaceItem.overallSingle':{
@@ -315,15 +317,7 @@ export default defineComponent({
 				}
 			}
 		},
-		// 'openType.model':{
-		// 	handler(newVal:any,oldVal:any){
-		// 		if(this.driver__.driver){
-		// 			console.log(213);
 	
-		// 			driverObj__.refresh();
-		// 		}
-		// 	}
-		// },
 		workspaceItem:{
 			handler(newVal:any,oldVal:any){
 				this.store.commit("setWorkspace", this.workspaceItem);
@@ -340,7 +334,11 @@ export default defineComponent({
 		// 	this.getPosition(resolve)
 		// })
 		await this.getPosition()
-		this.getworkspace()
+		if(this.workspaceItem.id == -1){
+			console.log(123123123123);
+			
+			this.getworkspace()
+		}
 		this.getSex()
 	},
 	directives:{
@@ -527,7 +525,7 @@ export default defineComponent({
 					if(index){
 						// this.getDetail(index)
 					}else{
-						this.getworkspace()
+						// this.getworkspace()
 					}
 					this.workspace.workspaceList[index].workSpaceName = this.workspaceItemName 
 					this.workspace.workspaceList[index].putName = false
@@ -709,7 +707,6 @@ export default defineComponent({
 					nextTick().then(()=>{
 						driverObj__.moveNext();
 						// driverObj__.moveTo(29);
-
 					})
 				}
 			}else if(v == 'workspace'){
@@ -763,6 +760,20 @@ export default defineComponent({
 		// sureSelectModel(event: any) {
 		// 	this.store.commit("setTemplateData", event);
 		// },
+		setWorkspaceStyle(data: any){
+			this.workspaceItem.styleId = data
+			this.putWorkspace(this.workspaceItem,'')
+		},
+		setStyle(){
+			this.openType.habit = false
+			let habitSetStyle:any = this.$refs.habitSetStyle;
+			habitSetStyle.habitSetStyleMask = true
+			// habitSetStyle.styleList = this.styleList
+			habitSetStyle.init();
+		},
+		setParentData(){
+			this.openType.habit = true
+		},
     },
 });
 </script>
@@ -856,6 +867,24 @@ export default defineComponent({
             justify-content: center;
             margin: calc(3rem*1.2) 0;
 			position: relative;
+			&.habit_style{
+				justify-content: space-between;
+				.habit_style_left{
+					display: flex;
+					flex: 1;
+					overflow: hidden;
+					div{
+						font-weight: 900;
+						margin-right: 2rem;
+					}
+					span{
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						flex: 1;
+					}
+				}
+			}
             .habit_Overal_Single_text {
                 font-weight: 600;
                 color: rgba(0, 0, 0, 0.5);

src/component/Detail/habitSetStyle.vue

@@ -0,0 +1,225 @@
+<template>
+	<a-modal
+		class="habitSetStyle_modal generalModel"
+		v-model:visible="habitSetStyle"
+		:footer="null"
+		width="50%"
+		:maskClosable="false"
+		:centered="true"
+		:closable="false"
+		:mask="habitSetStyleMask"
+		:keyboard="false"
+		:destroyOnClose="true"
+	>
+	<div class="generalModel_btn">
+		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+			<i class="fi fi-rr-cross-small"></i>
+		</div>
+	</div>
+	<div class="habitSetStyle_content" v-hoverAnmi>
+		<div class="modal_title_text">
+			<div>Style</div>
+			<div class="modal_title_text_intro"></div>
+		</div>
+		<div class="habitSetStyle_content_bottom">
+			<div class="content_bottom_item" v-for="item in styleList">
+				<div class="content_bottom_item_border" :class="{active:item.id == selectStyleId}" @click="setItemSelect(item)">
+					{{ item.name}}
+				</div>
+			</div>
+		</div>
+		<div class="habitSetStyle_ok started_btn" @click="setOk">
+			OK
+		</div>
+	</div>
+	<div class="mark_loading" v-show="isShowMark">
+		<a-spin size="large" />
+	</div>
+</a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
+// import { getCookie } from "@/tool/cookie";
+import { Https } from "@/tool/https";
+import { getCookie,setCookie } 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({
+emits:['setParentData','setWorkspaceStyle'],
+
+setup(props,{emit}) {
+	let habitSetStyle: any = ref(false);//弹窗
+	let habitSetStyleMask:any = ref(false)//弹窗遮罩
+	let habitSetStyleData:any = reactive({
+		styleList:[],
+		selectStyleId:'',
+		isShowMark:false,
+	})
+	let getStyleList = ()=>{
+		habitSetStyleData.isShowMark = true
+		Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
+			(rv) => {
+				habitSetStyleData.isShowMark = false
+				rv.forEach((item:any) => {
+					let name = item.value
+					item.value = item.name
+					item.name = name
+				});
+				habitSetStyleData.styleList = rv
+			}
+		).catch(res=>{
+			habitSetStyleData.isShowMark = false
+		});
+	}
+	let init = ()=>{
+		habitSetStyle.value = true
+		if(habitSetStyleData.styleList.length == 0){
+			getStyleList()
+		}
+		// habitSetStyleData.selectStyleId = 'feng2'
+	}
+	let setCover = (item:any)=>{
+		habitSetStyleData.subPublishDate.coverId = item.designOutfitId
+		habitSetStyleData.selectDate.url = item.url
+
+	}
+	let cleardata = ()=>{
+		habitSetStyle.value = false
+		habitSetStyleData.isShowMark = false
+		setParentData()
+	
+	}
+	let setParentData = ()=>{
+		emit('setParentData')
+	}
+	
+	let cancelDsign = ()=>{
+		cleardata()
+	}
+	let setOk= ()=>{
+		emit('setWorkspaceStyle',habitSetStyleData.selectStyleId)
+		cleardata()
+	}
+	let setItemSelect = (item:any)=>{
+		habitSetStyleData.selectStyleId = item.id
+	}
+	return {
+		habitSetStyle,
+		habitSetStyleMask,
+		...toRefs(habitSetStyleData),
+		init,
+		setCover,
+		cancelDsign,
+		setItemSelect,
+		setOk,
+	};
+},
+data() {
+	return {
+		// moodTemplateId: "", //模板id
+		
+	};
+},
+directives:{
+	hoverAnmi:{
+		updated (el) {
+			var elements = document.querySelectorAll(".habitSetStyle_modal .content_bottom_item");
+			el.addEventListener("mousemove", function (event:any) {
+				// 获取鼠标位置
+				var mouseX = event.pageX;
+				var mouseY = event.pageY;
+
+				// 遍历元素并输出距离鼠标的坐标
+				for (var i = 0; i < elements.length; i++) {
+					var element:any = elements[i];
+					var rect = element.getBoundingClientRect();
+					var elementX = rect.left + window.pageXOffset;
+					var elementY = rect.top + window.pageYOffset;
+
+					var distanceX = mouseX - elementX;
+					var distanceY = mouseY - elementY;
+					
+					// 将距离值设置到每一个卡片元素上面
+					element.style.setProperty('--x', distanceX + 'px');
+					element.style.setProperty('--y', distanceY + 'px');
+				}
+			});
+		}
+	}
+},
+mounted() {
+	
+},
+methods: {
+},
+});
+</script>
+
+<style lang="less">
+.habitSetStyle_modal {
+	.habitSetStyle_content{
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.habitSetStyle_content_bottom{
+			--border-color: #c4c4c4;
+			display: flex;
+			flex: 1;
+			flex-wrap: wrap;
+			align-content: flex-start;
+			.content_bottom_item{
+				width: calc((100% / 4) - (.8 * 1rem));
+				// width: calc(100% / 4);
+				// padding: 0 1rem;
+				border-radius: 2rem;
+				margin-right: 1rem;
+				margin-bottom: 1rem;
+				height: 10rem;
+				background: #f3f3f3;
+				position: relative;
+				cursor: pointer;
+				.content_bottom_item_border {
+					position: absolute;
+					inset: .2rem;
+					background: #f3f3f3;
+					border-radius: 2rem;
+					color: #595959;
+					font-weight: 600;
+					font-size: 2rem;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+			.content_bottom_item:nth-child(4n){
+				margin-right: 0rem;
+			}
+			.content_bottom_item::before {
+				content: '';
+				position: absolute;
+				width: calc(100% + .2rem);
+				height: calc(100% + .2rem);
+				top: 50%;
+				left: 50%;
+				border-radius: 2rem;
+				transform: translate(-50%, -50%);
+				background: radial-gradient(50px circle at var(--x) var(--y),#39215b 0,transparent 100%);;
+			}
+			.content_bottom_item .active{
+				background: #39215b;
+				color: #fff;
+			}
+		}
+		.habitSetStyle_ok{
+			width: 60%;
+			text-align: center;
+			margin: 0 auto;
+		}
+	}
+	
+}
+</style>

src/component/HomePage/ColorboardUpload.vue

@@ -60,7 +60,7 @@
 									<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 class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event,'mousedown')" @touchstart="mousedownGradientAngle($event,'touchstart')">
 										<div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
 									</div>
 									<!-- <input type="number"> -->
@@ -72,7 +72,7 @@
 							<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 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,'mousedown')" @touchstart="mousedownGradient($event,item,index,'touchstart')"></div>
 							</div>
 						</div>
                     </div>
@@ -163,6 +163,7 @@ export default defineComponent({
 		Sketch,
     },
     setup(){
+		// console.log(isMoible());
         let fileList = ref([])
         let colorList = ref([{},{},{},{},{},{},{},{}])
         let selectColor = ref({
@@ -621,7 +622,13 @@ export default defineComponent({
 			if(this.colorList[this.selectIndex].gradient.gradientList.length <= 2)return
 			this.colorList[this.selectIndex].gradient.gradientList.splice(this.colorList[this.selectIndex].gradient.selectIndex,1)
 		},
-		mousedownGradient(event,item,index){
+		mousedownGradient(event,item,index,str){
+			let moible = isMoible()
+			if(moible && str == 'mousedown'){
+				return
+			}else if(!moible && str == 'touchstart'){
+				return
+			}
 			event.stopPropagation();
 			this.colorList[this.selectIndex].gradient.selectIndex = index
 			let gradientRgba = item.rgba
@@ -631,23 +638,39 @@ export default defineComponent({
 			// isMoible()  true为移动端
 			let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
 			let position = {
-				x:event.x,
+				x:moible?event.touches[0].screenX: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)
+				let left = ((moible?e.touches[0].screenX: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)
+				if(moible){
-				window.removeEventListener('mouseup',mouseupGradient)
+					window.removeEventListener('touchmove',mousedownGradient)
+					window.removeEventListener('touchend',mouseupGradient)
+				}else{
+					window.removeEventListener('mousemove',mousedownGradient)
+					window.removeEventListener('mouseup',mouseupGradient)
+				}
+			}
+			if(moible){
+				window.addEventListener('touchmove',mousedownGradient)
+				window.addEventListener('touchend',mouseupGradient)
+			}else{
+				window.addEventListener('mousemove',mousedownGradient)
+				window.addEventListener('mouseup',mouseupGradient)
 			}
-			window.addEventListener('mousemove',mousedownGradient)
-			window.addEventListener('mouseup',mouseupGradient)
 			// event.target.addEventListener('touchmove',)
 		},
-		mousedownGradientAngle(event){
+		mousedownGradientAngle(event,str){
+			let moible = isMoible()
+			if(moible && str == 'mousedown'){
+				return
+			}else if(!moible && str == 'touchstart'){
+				return
+			}
 			event.stopPropagation();
 			// isMoible()  true为移动端
 			let domPosition = event.target.getBoundingClientRect()
@@ -656,22 +679,33 @@ export default defineComponent({
 				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 x = (moible?e.touches[0].clientX:e?.x) - X
-				let y = Y - e.y
+				let y = Y -( moible?e.touches[0].clientY: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)
+				if(moible){
-				window.removeEventListener('mouseup',mouseupGradientAngle)
+					window.removeEventListener('touchmove',mousedownGradientAngle)
+					window.removeEventListener('touchend',mouseupGradientAngle)
+				}else{
+					window.removeEventListener('mousemove',mousedownGradientAngle)
+					window.removeEventListener('mouseup',mouseupGradientAngle)
+				}
+			}
+			if(moible){
+				window.addEventListener('touchmove',mousedownGradientAngle)
+				window.addEventListener('touchend',mouseupGradientAngle)
+			}else{
+				window.addEventListener('mousemove',mousedownGradientAngle)
+				window.addEventListener('mouseup',mouseupGradientAngle)
 			}
-			window.addEventListener('mousemove',mousedownGradientAngle)
-			window.addEventListener('mouseup',mouseupGradientAngle)
 		},
 		setOperate(){
 			// this.colorList[this.selectIndex]

src/component/HomePage/Generate.vue

@@ -52,6 +52,7 @@
 					:maxlength='inputShow?0:9999'
 					v-model="searchPictureName"
 					@keydown.enter="getgenerate()"
+					@click="inputFocus()"
 				/>
 				<i class="icon iconfont icon-xiala" :class="{active:isTextarea}" @click.stop="setTextareaShow"></i>
 				<textarea 
@@ -67,7 +68,7 @@
 					{{ $t('Generate.Generate') }}
 					<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
 				</div>
-				<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
+				<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click="getgenerate">
 					<i class="fi fi-br-loading"></i>
 				</div>
 				<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
@@ -75,7 +76,23 @@
 				</div>
 				<span ref="inputShowText"></span>
 			</div>
-            
+            <div class="search_keyword" v-show="isInputFocus" @click.stop="">
+				<div class="search_keyword_center">
+					<div class="search_keyword_center_left">
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+					</div>
+				</div>
+			</div>
         </div>
         <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
             <div class="upload_item">
@@ -311,7 +328,8 @@ export default defineComponent({
                 type2: prop.msg,
             },
 			workspaceCom:{},
-			isTextarea:false
+			isTextarea:false,
+			isInputFocus:false,
         };
     },
 	
@@ -650,6 +668,9 @@ export default defineComponent({
 		},
 		setTextareaShow(){
 			this.isTextarea = !this.isTextarea
+		},
+		cliSetKeyword(){
+			
 		},
 		ifMaximumLength(){
 			clearTimeout(this.inputTime)
@@ -666,7 +687,17 @@ export default defineComponent({
 				}
 			},500)
 		},
-		
+		inputFocus(){
+			if(this.isInputFocus) return
+		    this.isInputFocus = true
+			let setDomCli = ()=>{
+				this.isInputFocus = false
+				document.removeEventListener('click',setDomCli)
+			}
+			setTimeout(()=>{
+				document.addEventListener('click',setDomCli)
+			},200)
+		},
         fileUploadChange(data: any) {
             let file = data.file;
 			let bor = true

src/component/HomePage/layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
 	<a-modal
-            class="layout_modal"
+            class="layout_modal generalModel"
             v-model:visible="layout"
             :footer="null"
             width="78%"
@@ -18,8 +18,10 @@
 						<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
 					</div>
 				</div>
-				<div class="collection_closeIcon" @click.stop="cancelDsign()">
+				<div class="generalModel_btn">
-					<i class="fi fi-rr-cross-small"></i>
+					<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+						<i class="fi fi-rr-cross-small"></i>
+					</div>
 				</div>
 				<div class="layout_nav">
 					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)">
@@ -641,16 +643,6 @@ export default defineComponent({
 
 <style lang="less">
 .layout_modal {
-	-moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    -khtml-user-select: none;
-    user-select: none;
-	.ant-modal-content{
-		// transform: scale(1.2);
-		// transform-origin: center !important;
-	}
-	// max-width: 1150px;
     .ant-modal-body {
         padding: 0;
 		// height: calc(65vh - 6.4rem);
@@ -681,29 +673,7 @@ export default defineComponent({
 				color: rgba(0,0,0,.45);
 			}
 		}
-		.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;
 		
-			.fi-rr-cross-small::before{
-				padding: calc(.2rem*1.2);
-				border-radius: 5px;
-				border: solid 2px rgba(0, 0, 0, 0.25);
-				transition: 1s all;
-				color: rgba(0, 0, 0, 0.55);
-			}
-			&.collection_closeIcon:hover .fi-rr-cross-small::before{
-				border: solid 2px rgba(0, 0, 0, 0.55);
-				color: rgba(0, 0, 0, 1);
-			}
-		}
 		.layout_nav{
 			display: flex;
 			margin-top: calc(2rem*1.2);

src/component/HomePage/layoutMobile.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
 	<a-modal
-            class="layoutMobile_modal"
+            class="layoutMobile_modal generalModel"
             v-model:visible="layout"
             :footer="null"
             width="78%"
@@ -18,8 +18,10 @@
 						<div class="layoutMobile_title">{{ $t('layout.MoodBoardDesign') }}</div>
 					</div>
 				</div>
-				<div class="collection_closeIcon" @touchstart.stop="cancelDsign()">
+				<div class="generalModel_btn">
-					<i class="fi fi-rr-cross-small"></i>
+					<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+						<i class="fi fi-rr-cross-small"></i>
+					</div>
 				</div>
 				<div class="layoutMobile_nav">
 					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.stop="setpitch(item,index)">
@@ -672,25 +674,9 @@ export default defineComponent({
 
 <style lang="less">
 .layoutMobile_modal {
-	-moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    -khtml-user-select: none;
-    user-select: none;
-	.ant-modal-content{
-		// transform: scale(1.2);
-		// transform-origin: center !important;
-	}
-	// max-width: 1150px;
-    .ant-modal-body {
-        padding: 0;
-		// height: calc(65vh - 6.4rem);
-		height: calc(65rem*1.2);
-    }
 	.ant-modal-content{
 		border-radius: calc(1rem*1.2);
 	}
-
     .layoutMobile_content {
         // background: #f2f3fb;
         // padding-bottom: 2.9rem*1.2);
@@ -712,29 +698,7 @@ export default defineComponent({
 				color: rgba(0,0,0,.45);
 			}
 		}
-		.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;
 	
-			.fi-rr-cross-small::before{
-				padding: calc(.2rem*1.2);
-				border-radius: 5px;
-				border: solid 2px rgba(0, 0, 0, 0.25);
-				transition: 1s all;
-				color: rgba(0, 0, 0, 0.55);
-			}
-			&.collection_closeIcon:hover .fi-rr-cross-small::before{
-				border: solid 2px rgba(0, 0, 0, 0.55);
-				color: rgba(0, 0, 0, 1);
-			}
-		}
 		.layoutMobile_nav{
 			display: flex;
 			margin-top: calc(2rem*1.2);

src/component/HomePage/scaleImage.vue

@@ -1,6 +1,6 @@
 <template>
 		<a-modal
-            class="scaleImage_modal"
+            class="scaleImage_modal generalModel"
             v-model:visible="scaleImage"
             :footer="null"
             width="78%"
@@ -11,11 +11,11 @@
 			:keyboard="false"
 			:destroyOnClose="true"
         >
-		<div class="scaleImage_btn">
+		<div class="generalModel_btn">
-			<div class="collection_closeIcon left" @click.stop="cancelDsign()">
+			<div class="generalModel_closeIcon left" @click.stop="cancelDsign()">
 				<i class="fi fi-rr-cross-small"></i>
 			</div>
-			<div class="collection_closeIcon" @click.stop="download()">
+			<div class="generalModel_closeIcon" @click.stop="download()">
 				<i class="fi fi-rr-down-to-line"></i>
 			</div>
 		</div>
@@ -168,62 +168,10 @@ export default defineComponent({
 
 <style lang="less">
 .scaleImage_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;
 		display: flex;
 		flex-direction: column;
     }
-	.ant-modal-btn{
-		
-	}
-	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
-		font-size: 2rem;
-	}
-    .scaleImage_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);
-			}
-		}
-	}
 	.scaleImage_content{
 		display: flex;
 		justify-content: center;

src/component/WorksPage/newScaleImage.vue

@@ -1,6 +1,6 @@
 <template>
 		<a-modal
-            class="newScaleImage_modal"
+            class="newScaleImage_modal generalModel"
             v-model:visible="scaleImage"
             :footer="null"
             width="78%"
@@ -11,8 +11,8 @@
 			:keyboard="false"
 			:destroyOnClose="true"
         >
-		<div class="newScaleImage_btn">
+		<div class="generalModel_btn">
-			<div class="collection_closeIcon" @click.stop="cancelDsign()">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<i class="fi fi-rr-cross-small"></i>
 			</div>
 			<!-- <div class="collection_closeIcon" @click.stop="download()">
@@ -364,26 +364,8 @@ export default defineComponent({
 
 <style lang="less">
 .newScaleImage_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: 9rem;
-		
 	}
 	.newScaleImage_page{
 		overflow-y: auto;
@@ -392,43 +374,6 @@ export default defineComponent({
 		&.newScaleImage_page::-webkit-scrollbar{display: none;}
 	}
     
-	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
-		font-size: 2rem;
-	}
-    .newScaleImage_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);
-			}
-		}
-	}
 	--margin: 3rem;
 	--padding: 2rem;
 	--border-color: #c4c4c4;

src/component/WorksPage/publish.vue

@@ -1,6 +1,6 @@
 <template>
 		<a-modal
-            class="publish_modal"
+            class="publish_modal generalModel"
             v-model:visible="publish"
             :footer="null"
             width="50%"
@@ -11,8 +11,8 @@
 			:keyboard="false"
 			:destroyOnClose="true"
         >
-		<div class="publish_btn">
+		<div class="generalModel_btn">
-			<div class="collection_closeIcon" @click.stop="cancelDsign()">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<i class="fi fi-rr-cross-small"></i>
 			</div>
 		</div>
@@ -247,70 +247,11 @@ export default defineComponent({
 
 <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;

src/tool/https.js

@@ -182,13 +182,14 @@ export const Https = {
         chatStreamTest:`/api/python/chatStream`,//机器人助力
         pictureLikeOrUnLike:`/api/python/pictureLikeOrUnLike`,//机器人生成图喜欢
         getBloodBars:`/api/python/getBloodBars`,//机器人血条
-	
+		//工作空间
         workspaceDetail:`/api/workspace/detail`,//用户习惯详情
         workspaceenumValues:`/api/workspace/enumValues`,//getSex
 		
         workspaceRemove:`/api/workspace/remove`,//删除用户习惯详情
         workspacesaveOrUpdate:`/api/workspace/saveOrUpdate`,//修改用户习惯详情
         getMannequins:`/api/workspace/getMannequins`,//模特
+        getStyleList:`/api/workspace/styleList`,//获取所有风格列表
 		
 		workspaceList:`/api/workspace/list`,
         sketchAndPrintGenerate:'/api/generate/sketchAndPrint',//sketchGenerate生成图片
@@ -224,6 +225,7 @@ export const Https = {
 		getPorfolioDetail:`/api/portfolio/detail`,//查询作品广场作品详情
 		setPorfolioChoose:`/api/portfolio/choose`,//二次创作
 
+
     },
 
     axiosGet(url,config) {