diff --git a/.env.dev b/.env.dev index 15d86e02..fca07508 100644 --- a/.env.dev +++ b/.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' diff --git a/src/assets/style/style.css b/src/assets/style/style.css index a4c1f537..00ff3c0e 100644 --- a/src/assets/style/style.css +++ b/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; diff --git a/src/assets/style/style.less b/src/assets/style/style.less index de8d2d29..936f1eeb 100644 --- a/src/assets/style/style.less +++ b/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; diff --git a/src/component/Detail/DesignDetailAlter.vue b/src/component/Detail/DesignDetailAlter.vue index b16da427..959da24e 100644 --- a/src/component/Detail/DesignDetailAlter.vue +++ b/src/component/Detail/DesignDetailAlter.vue @@ -201,7 +201,7 @@
Alignment
-
+
@@ -212,7 +212,7 @@
-
+
@@ -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) - window.removeEventListener('mouseup',mouseupGradient) + if(moible){ + 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 y = Y - e.y + let x = (moible?e.touches[0].clientX:e?.x) - X + 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) - window.removeEventListener('mouseup',mouseupGradientAngle) + if(moible){ + 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(){ diff --git a/src/component/Detail/habit.vue b/src/component/Detail/habit.vue index 12115505..3e0148de 100644 --- a/src/component/Detail/habit.vue +++ b/src/component/Detail/habit.vue @@ -55,6 +55,14 @@ +
+
+
Style:
+ {{ workspaceItem.styleName }} +
+ +
选择
+
+ @@ -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 + }, }, }); @@ -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); diff --git a/src/component/Detail/habitSetStyle.vue b/src/component/Detail/habitSetStyle.vue new file mode 100644 index 00000000..7eaafd2a --- /dev/null +++ b/src/component/Detail/habitSetStyle.vue @@ -0,0 +1,225 @@ + + + + + \ No newline at end of file diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue index 9887fac7..0b047b0a 100644 --- a/src/component/HomePage/ColorboardUpload.vue +++ b/src/component/HomePage/ColorboardUpload.vue @@ -60,7 +60,7 @@
Alignment
-
+
@@ -72,7 +72,7 @@
-
+
@@ -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) - window.removeEventListener('mouseup',mouseupGradient) + if(moible){ + 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 y = Y - e.y + let x = (moible?e.touches[0].clientX:e?.x) - X + 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) - window.removeEventListener('mouseup',mouseupGradientAngle) + if(moible){ + 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] diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue index f196083f..ee9d170d 100644 --- a/src/component/HomePage/Generate.vue +++ b/src/component/HomePage/Generate.vue @@ -52,6 +52,7 @@ :maxlength='inputShow?0:9999' v-model="searchPictureName" @keydown.enter="getgenerate()" + @click="inputFocus()" />