aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-11-27-dist 字体放大

Browse Source
This commit is contained in:
X1627315083
2023-11-27 16:25:32 +08:00
parent 1f52565aad
commit 6e39ebf5ed
50 changed files with 1995 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/style/style.css
View File

@@ -6,6 +6,10 @@ body,
height: 100%;
font-family: 'Roboto', sans-serif;
overflow: hidden;
--aida-fsize2: 2.2rem;
--aida-fsize1-8: 1.8rem;
--aida-fsize1-6: 1.6rem;
--aida-fsize1-4: 1.4rem;
}
input {
outline: none;
@@ -498,6 +502,12 @@ li {
.libraryPageCascader .ant-cascader-menu {
margin-top: 4rem;
}
.collection_modal .ant-modal-content,
.design_detail_modal_component .ant-modal-content,
.designOpenrtion_modal .ant-modal-content {
transform: scale(1.2);
transform-origin: center !important;
}
.collection_modal .ant-modal-body,
.design_detail_modal_component .ant-modal-body,
.designOpenrtion_modal .ant-modal-body,
@@ -508,7 +518,7 @@ li {
.design_detail_modal_component .design_title_text,
.designOpenrtion_modal .design_title_text,
.library_page .design_title_text {
font-size: 1.8rem;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0, 0, 0, 0.65);
align-items: center;
@@ -518,7 +528,7 @@ li {
.design_detail_modal_component .design_title_text .design_title_text_intro,
.designOpenrtion_modal .design_title_text .design_title_text_intro,
.library_page .design_title_text .design_title_text_intro {
font-size: 1.2rem;
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
}

27
src/assets/style/style.less
View File

@@ -6,6 +6,10 @@ html,body,#app{
font-family: 'Roboto', sans-serif;
overflow: hidden;
// --antd-wave-shadow-color: #341e57;
--aida-fsize2: 2.2rem;
--aida-fsize1-8: 1.8rem;
--aida-fsize1-6: 1.6rem;
--aida-fsize1-4: 1.4rem;
}
input{
outline:none
@@ -344,7 +348,14 @@ ul,li{
}
//弹窗公共样式
.ant-modal{
&.ant-modal-confirm{
&.ant-modal-confirm-confirm{
// top: 50%;
// transform: translateY(-50%);
}
}
}
.modal_component{
&.ant-modal{
@@ -352,7 +363,6 @@ ul,li{
}
.ant-modal-content{
overflow: hidden;
.ant-modal-header{
padding: 2.4rem 2.6rem;
background: #F7F7F7;
@@ -585,21 +595,26 @@ ul,li{
margin-top: 4rem;
}
}
.collection_modal,.design_detail_modal_component,.designOpenrtion_modal{
.ant-modal-content{
transform: scale(1.2);
transform-origin: center !important;
}
}
//collection 弹窗
.collection_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{
.ant-modal-body{
overflow-y: hidden;
}
.design_title_text{
font-size: 1.8rem;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
margin-bottom: 2rem;
.design_title_text_intro{
font-size: 1.2rem;
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0,0,0,.45);
}

26
src/component/Detail/DesignDetail.vue
View File

@@ -54,7 +54,7 @@
<!-- 编辑 -->
<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<!-- 层 -->
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i>
<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
</div>
@@ -113,9 +113,11 @@
</div>
</div>
<div class="design_detail_perview" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
<setDesignItem ref="setDesignItem" @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
<setDesignItem v-if="!moible" ref="setDesignItem" @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
<setDesignItemMobile v-else ref="setDesignItemMobile" @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile>
</div>
</div>
@@ -131,6 +133,7 @@ import { defineComponent,computed,ref,provide,nextTick } from 'vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
import setDesignItemMobile from '@/component/Detail/setDesignItemMobile.vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util'
@@ -145,6 +148,7 @@ export default defineComponent({
DesignDetailAlter,
setDesignItem,
magnifyingGlass,
setDesignItemMobile,
},
setup() {
const store = useStore();
@@ -182,7 +186,7 @@ export default defineComponent({
return store.state.Guide.guide
})
provide('driver__',driver__)
let moible:any = isMoible()
let {t} = useI18n()
return{
designItemDetail,
@@ -202,6 +206,7 @@ export default defineComponent({
oppositeRevocationShow,
revocationShow,
driver__,
moible,
t,
}
},
@@ -538,7 +543,7 @@ export default defineComponent({
return data
},
async setSubmit(str:any){
let setDesignItem:any = this.$refs.setDesignItem
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
let data = this.setSubmitItem(str)
this.loadingShow = true
await setDesignItem.setPreview(data)
@@ -624,8 +629,7 @@ export default defineComponent({
showDesignImgDetail(num:any){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.designShowPrview = num
let setDesignItem:any = this.$refs.setDesignItem
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
if(this.designShowPrview == 3){
setDesignItem.init()
}
@@ -720,7 +724,6 @@ export default defineComponent({
.design_detail_modal_component{
color: #000;
// max-width: 1440px ;
.ant-modal-content{
border-radius: 1rem;
@@ -977,7 +980,7 @@ export default defineComponent({
// height: 6.4rem;
margin-bottom: 1rem;
display: flex;
font-size: 1.8rem;
font-size: var(--aida-fsize1-8);
color: #000000;
justify-content: space-between;
.icon-dangqianweizhi{
@@ -986,8 +989,9 @@ export default defineComponent({
margin-right: 1rem;
}
i{
font-size: 1.8rem;
display: block;
font-size: var(--aida-fsize1-8);
display: flex;
align-items: center;
&.fi-rr-edit{
cursor: pointer;
}
@@ -1060,7 +1064,7 @@ export default defineComponent({
background: #fff;
border-radius: 0.8rem;
line-height: 4rem;
font-size: 1.6rem;
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem;
color: #000;
cursor: pointer;

8
src/component/Detail/DesignDetailAlter.vue
View File

@@ -914,7 +914,7 @@ export default defineComponent({
.detail_uploadLibrary{
.switch_type_list {
margin-bottom: 1rem;
margin-top: -1rem;
margin-top: -1rem;
display: flex;
align-items: center;
position: relative;
@@ -1386,9 +1386,9 @@ export default defineComponent({
}
.vc-sketch-color-wrap{
background-image: url(@../../../../assets/images/homePage/dropper.png);
background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
// background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
// background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
// background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
background-size: 1.5rem;
background-repeat: no-repeat;
background-position: 50%;

14
src/component/Detail/DesignDetailEnd.vue
View File

@@ -89,6 +89,7 @@
<div v-else-if="type_ == 2 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
<DesignPrintOperationMobile ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
@@ -101,13 +102,15 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Sketch} from '@ans1998/vue3-color'
import DesignPrintOperation from './DesignPrintOperation.vue';
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
import { message,Upload} from 'ant-design-vue';
import {isMoible} from '@/tool/util'
import { useI18n } from 'vue-i18n';
export default defineComponent({
props: ["msg"],
components:{
Draggable,Sketch,DesignPrintOperation
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile
},
setup(prop) {
const store = useStore();
@@ -175,7 +178,7 @@ export default defineComponent({
},
setPrint(){
if(this.current?.printObject?.prints?.[0]?.path){
let DesignPrintOperation = this.$refs.DesignPrintOperation
let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
DesignPrintOperation.init()
}else{
message.info(this.t('DesignDetailEnd.jsContent1'));
@@ -294,8 +297,9 @@ export default defineComponent({
width: 26%;
position: relative;
i{
font-size: 1.8rem;
display: block;
font-size: var(--aida-fsize1-8);
display: flex;
align-items: center;
}
.upload_title{
@@ -307,7 +311,7 @@ export default defineComponent({
}
span{
margin-left: 1rem;
font-size: 1.8rem;
font-size: var(--aida-fsize1-8);
color: #000000;
}
}

3
src/component/Detail/DesignPrintOperation.vue
View File

@@ -694,7 +694,7 @@ export default defineComponent({
okText: 'Yes',
cancelText: 'No',
mask:false,
// centered:true,
centered:true,
onOk() {
_this.designOpenrtion=false
}
@@ -902,6 +902,7 @@ export default defineComponent({
z-index: 3;
position: absolute;
inset: 0;
width: 100%;
}
>div{
position: absolute;

1064
src/component/Detail/DesignPrintOperationMobile.vue Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/component/Detail/habit.vue
View File

@@ -461,7 +461,7 @@ export default defineComponent({
mask:false,
wrapClassName:'habit',
zIndex:999999999,
// centered:true,
centered:true,
onOk() {
let data = [{
id:_this.workspace.workspaceList[index].id,

95
src/component/Detail/magnifyingGlass.vue
View File

@@ -10,6 +10,7 @@
</div>
</template>
<script>
import { getUploadUrl,isMoible } from "@/tool/util";
import { defineComponent, createVNode, ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
export default defineComponent({
@@ -35,39 +36,71 @@ export default defineComponent({
mousemove:{
mounted (el,binding) {
let mouseover = (event)=>{//移入
const mask = document.getElementsByClassName('magnifyingGlass')[0].querySelector('.initial_haver')
const initialImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".initial_img");
const bigImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".big");
const maskW = mask.getBoundingClientRect().width;
const bigImgW = bigImg.getBoundingClientRect().width;
const num = bigImgW / maskW
bigImg.style.backgroundImage = `url(${initialImg.src})`;
const { left, top} = initialImg.getBoundingClientRect();
const initialImgH = initialImg.getBoundingClientRect().height
const initialImgW = initialImg.getBoundingClientRect().width;
const {width,height} = mask.getBoundingClientRect();
let mousemove = (event)=>{//移动
const x = event.clientX - left;
const y = event.clientY - top;
const bgPosX = (-x+width/2 )* num;
const bgPosY = (-y+height/2) * num;
const bgPosW = initialImgW * num;
const bgPosH = initialImgH * num;
mask.style.top = y-height/2+'px';
mask.style.left = x-width/2+'px';
bigImg.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
bigImg.style.backgroundSize = `${bgPosW}px ${bgPosH}px`;
if(isMoible()){
let touchstart = (event)=>{//移入
const mask = document.getElementsByClassName('magnifyingGlass')[0].querySelector('.initial_haver')
const initialImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".initial_img");
const bigImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".big");
const maskW = mask.getBoundingClientRect().width;
const bigImgW = bigImg.getBoundingClientRect().width;
const num = bigImgW / maskW
bigImg.style.backgroundImage = `url(${initialImg.src})`;
const { left, top} = initialImg.getBoundingClientRect();
const initialImgH = initialImg.getBoundingClientRect().height
const initialImgW = initialImg.getBoundingClientRect().width;
const {width,height} = mask.getBoundingClientRect();
let touchmove = (event)=>{//移动
const x = event.targetTouches[0].pageX - left;
const y = event.targetTouches[0].pageY - top;
const bgPosX = (-x+width/2 )* num;
const bgPosY = (-y+height/2) * num;
const bgPosW = initialImgW * num;
const bgPosH = initialImgH * num;
mask.style.top = y-height/2+'px';
mask.style.left = x-width/2+'px';
bigImg.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
bigImg.style.backgroundSize = `${bgPosW}px ${bgPosH}px`;
}
document.addEventListener('touchmove',touchmove)
el.addEventListener('touchend',()=>{
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('touchstart',touchstart)
})
}
document.addEventListener('mousemove',mousemove)
el.addEventListener('mouseout',()=>{
document.removeEventListener('mousemove',mousemove)
document.removeEventListener('mouseover',mouseover)
})
el.addEventListener('touchstart',touchstart)
}else{
let mouseover = (event)=>{//移入
const mask = document.getElementsByClassName('magnifyingGlass')[0].querySelector('.initial_haver')
const initialImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".initial_img");
const bigImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".big");
const maskW = mask.getBoundingClientRect().width;
const bigImgW = bigImg.getBoundingClientRect().width;
const num = bigImgW / maskW
bigImg.style.backgroundImage = `url(${initialImg.src})`;
const { left, top} = initialImg.getBoundingClientRect();
const initialImgH = initialImg.getBoundingClientRect().height
const initialImgW = initialImg.getBoundingClientRect().width;
const {width,height} = mask.getBoundingClientRect();
let mousemove = (event)=>{//移动
const x = event.clientX - left;
const y = event.clientY - top;
const bgPosX = (-x+width/2 )* num;
const bgPosY = (-y+height/2) * num;
const bgPosW = initialImgW * num;
const bgPosH = initialImgH * num;
mask.style.top = y-height/2+'px';
mask.style.left = x-width/2+'px';
bigImg.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
bigImg.style.backgroundSize = `${bgPosW}px ${bgPosH}px`;
}
document.addEventListener('mousemove',mousemove)
el.addEventListener('mouseout',()=>{
document.removeEventListener('mousemove',mousemove)
document.removeEventListener('mouseover',mouseover)
})
}
el.addEventListener('mouseover',mouseover)
}
el.addEventListener('mouseover',mouseover)
},
},

576
src/component/Detail/setDesignItemMobile.vue Normal file
View File

@@ -0,0 +1,576 @@
<template>
<div class="design_compile_content" id="design_compile_content">
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<!-- <div
v-for="item,index in frontBack.back"
:key="item"
:style="item.style"
@touchstart.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
</div> -->
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @touchstart.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @touchstart.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
<div class="designOpenrtion_btn">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
</ul>
</div>
</div>
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
</div>
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
</div>
</template>
<script >
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import GO from '@/tool/GO';
import { Https } from "@/tool/https";
export default defineComponent({
// props: ["frontBack"],
setup(prop) {
const store = useStore();
let designItemDetail = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
let current = inject('current')//父组件传过来的数据
let setRevocation = inject('setRevocation')//父组件传过来的数据
let printZIndex = ref(4)//印花优先级
let printStyleList = ref([
{
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:100+'px',
height:100+'px',
// zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
}
]);
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let frontBack = ref({})
return {
designItemDetail,
current,
printZIndex,
printStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
frontBack,
setRevocation
};
},
data() {
return {
loadingShow:false,//加载中
store: useStore(),
};
},
methods: {
init(){
let DesignParent = this.$parent
// this.clearModal()
// console.log(this.current,DesignParent.frontBack);
this.printStyleList.push({
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:100+'px',
height:100+'px',
// zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
})
this.setImgSize()
},
async setImgSize(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let front = []
let back = []
let body
designItemDetail.others.forEach((item) => {
if(item.type == 'Body'){
body = item
}
});
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
let frontIndex = 6
let backIndex = 3
// let front = 3
// let back = 3
designItemDetail.clothes.forEach((v,index)=>{
for (let i = v.layersObject.length-1; i >= 0; i--) {
v.layersObject[i].style = {
top:v.layersObject[i].position?.[0]*ratio+'px',
left:v.layersObject[i].position?.[1]*ratio+'px',
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
// zIndex:zIndex-=1
}
v.layersObject[i].centers={
left:0,
top:0,
}
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
front[index].style.zIndex = frontIndex-=1
}else{
back[index] = v.layersObject[i]
back[index].style.zIndex = backIndex-=1
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
}
}
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
}
this.frontBack = {
front:front,
back:back,
body:body,
}
},
//按比设置单件衣服宽高位置
async setPostition(url){
let img = await loadImage(url)
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
const num = modal_body?.offsetHeight / img.height;
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img)
};
img.onerror = reject;
img.src = url;
});
}
return num
},
setpitch(item,index){
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
},
// 设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
this.frontBack.front[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
this.frontBack.front[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
document.addEventListener("touchend", this.touchend);
document.addEventListener("touchmove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
}else{
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
this.frontBack.front[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
this.frontBack.front[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
}
document.addEventListener("touchend", this.sizeMouseup);
document.addEventListener("touchmove", this.sizeMousemove);
},
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let x = (e.changedTouches[0].pageX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
let y = ( e.changedTouches[0].pageY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
this.frontBack.front[this.imgDomIndex].style.left = x
this.frontBack.front[this.imgDomIndex].style.top = y
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
// this.frontBack.front[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
// }
// if(x.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.left = 0+'px'
// }
// if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
// this.frontBack.front[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
// }
// if(y.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
// }
},
sizeMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let w,h
let num = height/width
//判断移动四个边
if(this.direction == 'right'){
w = (e.changedTouches[0].pageX -imgDomWH.left)
h = (e.changedTouches[0].pageX -imgDomWH.left)*num
width = w+'px'
height = w*num+'px'
}else if(this.direction == 'top'){
num = width/height
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
// this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -this.imgDom.offsetHeight - this.imgDom.offsetTop+'px'
this.frontBack.front[this.imgDomIndex].style.bottom = this.frontBack.front[this.imgDomIndex].centers.bottom+'px'
w = (e.changedTouches[0].pageX -imgDomWH.left)*num
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
num = width/height
h = (e.changedTouches[0].pageY -imgDomWH.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.right = this.frontBack.front[this.imgDomIndex].centers.right+'px'
console.log(this.frontBack.front[this.imgDomIndex].centers.right);
width = w+'px'
height = w*num+'px'
}
//判断尺寸是否到边
this.frontBack.front[this.imgDomIndex].style.width = width
this.frontBack.front[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.frontBack.front[this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
top:this.imgDom.offsetTop+'px',
height:this.imgDom.offsetHeight+'px',
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
document.removeEventListener("touchend", this.sizeMouseup);
document.removeEventListener("touchmove", this.sizeMousemove);
},
touchend(e) {
document.removeEventListener("touchend", this.touchend);
document.removeEventListener("touchmove", this.moveMousemove);
},
clearModal(){
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.clothes = []
this.printStyleList.splice(1,this.printStyleList.length-1)
},
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
setPreviewData(){
this.$emit('setSubmit','preview');
},
deleteBorder(){
this.frontBack?.front?.forEach((item)=>{
item.designOpenrtionBtn = false
})
},
async setPreview(data){
let ratio = this.frontBack.body.layersObject[0].imageSize[0]/this.frontBack.body.style.width.replace(/px/g,'')
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
// this.frontBack.back.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
// this.frontBack.front.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
data.designSingleItemDTOList.forEach((item)=>{
let front = this.frontBack.front
let imageCategory1 = front[1].imageCategory
front.forEach((i)=>{
let imageCategory = i.imageCategory.split('_')[0]
if(item.type == this.capitalizeFirstLetter(imageCategory)){
let y = ((i?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - i?.position[0])
let x = ((i?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - i?.position[1])
let scale = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale)).toFixed(2)):1
item.scale = scale
let top = y == 0 ? item.offset[1]:y+item.offset[1]
let left = x == 0 ? item.offset[0]:x+item.offset[0]
item.offset = [left,top]
// item.offset = [(i?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
}
})
if(item.type == this.capitalizeFirstLetter(imageCategory1)){
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
}
})
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
this.$parent.loadingShow = false
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
designItemDetail.designItemUrl = rv.designItemUrl
designItemDetail.ifSubmit = true
designItemDetail.currentFullBodyView = rv.currentFullBodyView
rv.clothes.forEach((item)=>{
designItemDetail.clothes.forEach((i)=>{
if(item.type === i.type){
i.layersObject = item.layersObject
}
})
})
this.$emit('setDesignCoverage');
this.store.commit("setDesignItemDetail", designItemDetail);
this.setRevocation(designItemDetail,data)
}
).catch(res=>{
});
},
},
});
</script>
<style lang="less" scoped>
.designOpenrtion_modal {
// max-width: 1440px;
.ant-modal-body{
padding: 4rem 5rem 0rem!important;
// height: calc(65vh - 6.4rem);
height: 65rem;
display: flex;
overflow-y: hidden;
flex-direction: column;
}
.ant-modal-content{
border-radius: 1rem;
overflow: hidden;
}
}
.design_compile_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.designOpenrtion_centent{
flex: 1;
display: flex;
flex-direction: column;
align-content: space-around;
flex-wrap: nowrap;
margin: 0 auto;
overflow: hidden;
justify-content: space-between;
position: relative;
user-select:none;
z-index: 2;
position: relative;
&.active{
flex-direction: row;
}
.designOpenrtion_imgMask{
width: auto;
height: auto;
position: relative;
height: 100%;
overflow: hidden;
>img{
z-index: 2;
position: relative;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
.designOpenrtion_print,.detail_modal_item_front{
z-index: 1;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
}
}
.designOpenrtion_print{
z-index: 1 !important;
}
.designOpenrtion_btn{
z-index: 9999;
ul{
list-style: none;
// width: 100%;
// height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
opacity: 0;
margin: 0;
li{
cursor: pointer;
// border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
}
&.active{
opacity: 1;
li{
pointer-events: auto;
}
}
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designOpenrtion_btn_top{
top: 0;
}
.designOpenrtion_btn_bottom{
top: 100%;
}
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designOpenrtion_btn_left{
left: 0;
}
.designOpenrtion_btn_right{
left: 100%;
}
.designOpenrtion_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designOpenrtion_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: 2px;
height: 30px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.designOpenrtion_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin-bottom: 2rem;
width: 10rem;
text-align: center;
bottom: 0;
position: relative;
}
}
.designOpenrtion_imgMask_open{
position: absolute;
width: 100%;
height: 100%;
}
}
</style>

56
src/component/HomePage/ColorboardUpload.vue
View File

@@ -509,7 +509,7 @@ export default defineComponent({
top: 0;
left: calc(47% + 3rem);
.modal_text{
font-size: 1.2rem;
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
@@ -555,7 +555,7 @@ export default defineComponent({
padding: 0.4rem 0 1.6rem 0;
font-weight: bold;
line-height: 2.4rem;
font-size: 1.6rem;
font-size: var(--aida-fsize1-8);
color: #333333;
display: flex;
align-items: center;
@@ -775,6 +775,16 @@ export default defineComponent({
border-radius: 15px;
overflow: hidden;
}
height: 1rem;
.vc-hue-picker{
width: 1.4rem;
height: 1.4rem;
}
.vc-alpha-picker{
width: 1.4rem;
height: 1.4rem;
transform: translate(-.6rem,-.4rem);
}
}
.vc-chrome-hue-wrap{
margin-bottom: .5rem;
@@ -788,30 +798,30 @@ export default defineComponent({
}
.sileder_color{
margin-top:1.3rem;
// .sileder_color{
// margin-top:1.3rem;
.vc-slider-swatches{
display:none
}
.vc-slider-hue-warp {
width: 16.5rem;
height: 2.4rem;
border-radius: 1.2rem;
overflow: hidden;
// .vc-slider-swatches{
// display:none
// }
// .vc-slider-hue-warp {
// width: 16.5rem;
// height: 2.4rem;
// border-radius: 1.2rem;
// overflow: hidden;
.vc-hue-picker{
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
transform: translate(-0.7rem, -0.2rem);
}
}
.vc-hue-pointer{
top: 0.5rem !important;
}
// .vc-hue-picker{
// width: 1.4rem;
// height: 1.4rem;
// border-radius: 50%;
// transform: translate(-0.7rem, -0.2rem);
// }
// }
// .vc-hue-pointer{
// top: 0.5rem !important;
// }
}
// }
.color_block{
// margin-top: 1rem;

13
src/component/HomePage/Cropper.vue
View File

@@ -162,6 +162,10 @@ export default defineComponent({
}
.cut_pricture_modal{
.ant-modal-content{
transform: scale(1.2);
transform-origin: center !important;
}
*{
pointer-events: auto;
}
@@ -170,13 +174,14 @@ export default defineComponent({
<style lang="less" scoped>
.cut_pricture_modal{
max-width: 1150px ;
// max-width: 1150px ;
.collection_title{
position: absolute;
width: calc(100% - 10rem);
top: 4rem;
display: flex;
font-size: 1.8rem;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
@@ -184,7 +189,7 @@ export default defineComponent({
margin-right: 4rem;
}
.collection_title_text_intro{
font-size: 1.2rem;
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0,0,0,.45);
}
@@ -303,7 +308,7 @@ export default defineComponent({
padding: 2rem;
display: flex;
align-items: center;
font-size: 1.6rem;
font-size: var(--aida-fsize1-8);
font-weight: 400;
color: #030303;
line-height: 1.8rem;

1
src/component/HomePage/Header.vue
View File

@@ -370,6 +370,7 @@ export default defineComponent({
this.t('Header.jsContent3',{numTime:_this.numTime}),
icon: createVNode(ExclamationCircleOutlined),
okText: "Ok",
centered:true,
onOk() {
_this.numTime = 30;
clearInterval(_this.timerSec);

11
src/component/HomePage/MoodboardUpload.vue
View File

@@ -421,10 +421,15 @@ export default defineComponent({
this.fileList = setboard.moodboard
},
changeTemplateModal() {
async changeTemplateModal() {
if(this.modalImg[0]?.id){
let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
// layout.init('moodboard')
if(this.layoutList.length <= 0){
await this.layout()
}
// let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
// this.layoutList = arr
layout.init()
}else{
message.info(this.t('MoodboardUpload.jsContent5'))
@@ -521,7 +526,7 @@ export default defineComponent({
background: #fff;
border-radius: 0.8rem;
line-height: 4rem;
font-size: 1.6rem;
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem;
margin-right: 8rem;
color: #000;
@@ -599,7 +604,7 @@ export default defineComponent({
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: 1.2rem;
font-size:var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;

4
src/component/HomePage/PrintboardUpload.vue
View File

@@ -718,7 +718,7 @@ export default defineComponent({
background: #fff;
border-radius: 0.8rem;
line-height: 4rem;
font-size: 1.6rem;
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem;
margin-right: 8rem;
color: #000;
@@ -896,7 +896,7 @@ export default defineComponent({
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: 1.2rem;
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;

4
src/component/HomePage/SketchboardUpload.vue
View File

@@ -687,7 +687,7 @@ export default defineComponent({
background: #fff;
border-radius: 0.8rem;
line-height: 4rem;
font-size: 1.6rem;
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem;
margin-right: 8rem;
color: #000;
@@ -860,7 +860,7 @@ export default defineComponent({
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: 1.2rem;
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;

7
src/component/HomePage/collectionModal.vue
View File

@@ -161,7 +161,7 @@ export default defineComponent({
okText: 'Yes',
cancelText: 'No',
mask:false,
// centered:true,
centered:true,
onOk() {
GO.id = 0
_this.showCollectionModal = false
@@ -211,6 +211,7 @@ export default defineComponent({
}
})
.catch((res) => {
this.isShowMark = false
});
@@ -227,7 +228,7 @@ export default defineComponent({
.collection_title{
top: 4rem;
display: flex;
font-size: 1.8rem;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
z-index: 2;
@@ -248,7 +249,7 @@ export default defineComponent({
margin-right: 4rem;
}
.collection_title_text_intro{
font-size: 1.2rem;
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0,0,0,.45);
}

30
src/component/HomePage/layout.vue
View File

@@ -377,9 +377,6 @@ export default defineComponent({
let eY:any
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
let mouseMove = (e:MouseEvent)=>{
// console.log(e.x,el.getBoundingClientRect().left);
// if(){
// }
if (mouse) {
if(angle.value == 'right'){
eX = elParent.offsetWidth - e.offsetX
@@ -398,31 +395,34 @@ export default defineComponent({
// el.style.left = e.offsetX /2 +'px'
// el.style.top = e.offsetY /2+'px'
if(100 - 100 * mouseSide/elParentSide <= 50){
let Xy = (100 - 100 * mouseSide/elParentSide) / 3.33-1
if(Xy<=0){
Xy = 0
}
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.left = Xy +'%'
el.style.top = Xy +'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.right = Xy +'%'
el.style.left = 'auto'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = Xy +'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.right = Xy +'%'
el.style.top = 'auto'
el.style.left = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.bottom = Xy +'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.left = Xy +'%'
el.style.top = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.bottom = Xy +'%'
}
}else{
if(angle.value == 'right'){
@@ -443,7 +443,7 @@ export default defineComponent({
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
mouse = false;
document.removeEventListener('mousemove',mouseMove)
el.removeEventListener('mousemove',mouseMove)
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
@@ -626,6 +626,10 @@ export default defineComponent({
-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;

100
src/component/HomePage/layoutMobile.vue
View File

@@ -188,7 +188,7 @@ export default defineComponent({
// document.addEventListener('touchmove',(e: MouseEvent)=>{
// })
document.ontouchmove = function(e){
let touchmove = function(e:any){
if(mouse){
el.style.left = e.targetTouches[0].pageX-mouseX - domX+'px'
el.style.top = e.targetTouches[0].pageY-mouseY - domY+'px'
@@ -206,10 +206,13 @@ export default defineComponent({
}
}
}
document.ontouchend = function(){
mouse = false
// document.onmousemove = false;
let removeEventListener = function(){
mouse = false;
document.removeEventListener('touchmove',touchmove );
document.removeEventListener('touchmove',touchmove );
}
document.addEventListener('touchmove',touchmove );
document.addEventListener('touchend', removeEventListener);
})
},
updated (el,layout) {
@@ -220,6 +223,7 @@ export default defineComponent({
compile:{
mounted (el,compile) {
el.addEventListener('touchstart',(e:any)=>{
console.log(e);
e.stopPropagation()
let elParent = el.parentNode.parentNode
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
@@ -251,7 +255,9 @@ export default defineComponent({
gpsXY = e.targetTouches[0].clientY
}
let mouse = true
document.ontouchmove = function(e){
let touchmove = function(e:any){
console.log(123);
if(mouse){
if(compile.value == 'left'){
elParent.style.width = parent + gpsXY - e.targetTouches[0].clientX + 'px'
@@ -280,9 +286,19 @@ export default defineComponent({
}
}
}
document.ontouchend = function(){
mouse = false
let removeEventListener = function(){
mouse = false;
el.parentNode.removeEventListener('touchmove',touchmove );
document.removeEventListener('touchmove',touchmove );
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
}
el.parentNode.addEventListener('touchmove',touchmove );
document.addEventListener('touchend', removeEventListener);
// document.ontouchend = function(){
// mouse = false
// }
})
}
},
@@ -379,13 +395,15 @@ export default defineComponent({
let eX:any
let eY:any
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
el.parentNode.addEventListener('touchmove', (e:any) => {
// if(){
let touchMove = (e:any)=>{
// if(e.changedTouches[0].pageX < el.getBoundingClientRect().left){
// mouse = false
// }else{
// mouse = true
// }
if (mouse) {
let offsetX = e.changedTouches[0].pageX - el.getBoundingClientRect().left;
let offsetY = e.changedTouches[0].pageY - el.getBoundingClientRect().top;
let offsetX = e.changedTouches[0].pageX - el.parentNode.getBoundingClientRect().left;
let offsetY = e.changedTouches[0].pageY - el.parentNode.getBoundingClientRect().top;
if(angle.value == 'right'){
eX = elParent.offsetWidth - offsetX
eY = elParent.offsetHeight - offsetY
@@ -394,40 +412,45 @@ export default defineComponent({
eY = elParent.offsetHeight - offsetY
}else if(angle.value == 'left'){
eX = elParent.offsetWidth - offsetX
eY = elParent.offsetHeight - offsetY- elParent.offsetHeight
eY = elParent.offsetHeight - elParent.offsetHeight - offsetY
}else if(angle.value == 'bottom'){
eX = elParent.offsetWidth - offsetX - elParent.offsetWidth
eY = elParent.offsetHeight - offsetY - elParent.offsetHeight
}
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
// el.style.left = e.offsetX /2 +'px'
let mouseSide = Math.sqrt(eX*eX + eY* eY)/2
// el.style.left = e.offsetX /2 +'px'
// el.style.top = e.offsetY /2+'px'
if(100 - 100 * mouseSide/elParentSide <= 50){
// console.log(angle.value);
let Xy = (100 - 100 * mouseSide/elParentSide) / 3.33-1
if(Xy<=0){
Xy = 0
}
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.left = Xy +'%'
el.style.top = Xy +'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.right = Xy +'%'
el.style.left = 'auto'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = Xy +'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.right = Xy +'%'
el.style.top = 'auto'
el.style.left = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.bottom = Xy +'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.left = Xy +'%'
el.style.top = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.bottom = Xy +'%'
}
}else{
if(angle.value == 'right'){
@@ -445,14 +468,19 @@ export default defineComponent({
}
}
}
});
// 添加鼠标松开事件监听器
document.addEventListener('touchend', () => {
mouse = false;
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
});
// 添加鼠标松开事件监听器
document.addEventListener('touchend', () => {
mouse = false;
el.parentNode.removeEventListener('touchmove',touchMove );
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
});
}
el.parentNode.addEventListener('touchmove',touchMove ,false);
});
@@ -630,6 +658,10 @@ export default defineComponent({
-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;
@@ -648,7 +680,7 @@ export default defineComponent({
position: absolute;
top: 4rem;
display: flex;
font-size: 1.8rem;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
@@ -902,7 +934,7 @@ export default defineComponent({
display: none;
}
.layout_left_text{
font-size: 1.6rem;
font-size: var(--aida-fsize1-6);
margin-bottom: 1rem;
color: #000;
}

3
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -524,7 +524,7 @@ export default defineComponent({
okText: 'Yes',
cancelText: 'No',
mask:false,
// centered:true,
centered:true,
onOk() {
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
@@ -666,6 +666,7 @@ export default defineComponent({
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
centered:true,
mask:false,
onOk() {
data.checkMd5 = 0

3
src/component/LibraryPage/ModelPlacementMobile.vue
View File

@@ -309,7 +309,7 @@ export default defineComponent({
okText: 'Yes',
cancelText: 'No',
mask:false,
// centered:true,
centered:true,
onOk() {
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
@@ -415,6 +415,7 @@ export default defineComponent({
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
centered:true,
mask:false,
onOk() {
data.checkMd5 = 0

2
src/component/LibraryPage/setLabel.vue
View File

@@ -275,7 +275,7 @@ export default defineComponent({
cancelText: 'No',
mask:false,
zIndex:99999,
// centered:true,
centered:true,
onOk() {
data.deleteConfirm = 1
_this.deleteClass(data)

4
src/tool/flexible.js
View File

@@ -2,13 +2,13 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid;
designWidth = designWidth || 1920;
maxWidth = maxWidth || 2560;
minWidth = minWidth || 1440;
minWidth = minWidth || 1024;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 1920;
width > maxWidth && (width = maxWidth);
width > maxWidth && (width = maxWidth);
// width < minWidth && (width = minWidth);
width < minWidth && (width = minWidth);
var rem = width * 10 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}

1
src/views/HistoryPage.vue
View File

@@ -188,6 +188,7 @@ export default defineComponent({
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
centered:true,
mask:false,
onOk() {
deleteGroupFun(record.id,index)

2
src/views/HomeView.vue
View File

@@ -73,7 +73,7 @@
<div class="right_content_img_item">
<!-- <draggable
group="people" > -->
<div class="content_img_block hideEvents" v-for="(
<div class="content_img_block" :class="[driver__.driver?'hideEvents':'']" v-for="(
design, index
) in designCollectionList" :key="design?.designItemId" @click="
designDetail(

8
src/views/LibraryPage.vue
View File

@@ -828,7 +828,7 @@ export default defineComponent({
okText: 'Yes',
cancelText: 'No',
mask:false,
// centered:true,
centered:true,
onOk() {
_this.confirmDeletePic(data,index)
}
@@ -846,7 +846,7 @@ export default defineComponent({
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
// centered:true,
centered:true,
onOk() {
_this.confirmDeletePic('',0)
}
@@ -879,7 +879,7 @@ export default defineComponent({
cancelText: 'No',
mask:false,
zIndex:99999,
// centered:true,
centered:true,
onOk() {
data.deleteModelConfirm = 1
_this.confirmDeletePic(data,index)
@@ -956,7 +956,7 @@ export default defineComponent({
cancelText: 'No',
mask:false,
zIndex:99999,
// centered:true,
centered:true,
onOk() {
data.checkMd5 = 0
Https.axiosPost(Https.httpUrls.libraryUpload, data,{headers:{'Content-Type': 'multipart/form-data'}}).then(