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

fix

Browse Source
This commit is contained in:
X1627315083
2023-12-18 13:05:51 +08:00
parent 5d6a420447
commit 8585aa7907
9 changed files with 98 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,17 +18,17 @@
<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
</div>
</div>
<div class="collection_closeIcon" @click.stop="cancelDsign()">
<div class="collection_closeIcon" @touchstart.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="layout_nav">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item,index)">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.stop="setpitch(item,index)">
<img :src="item.imgUrl">
</div>
</div>
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" v-modelImg>
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @touchstart="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'zoom':item.zoom}" draggable="false" v-modelImg>
<ul v-show="item.setPitch" class="layout_btn" >
<li class="layout_btn_top" v-compile.stop="'top'"></li>
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
@@ -68,12 +68,16 @@
</div>
</div>
</div>
<!-- <div class="layout_right">
<div class="layout_right">
<div class="layout_right_text">
{{ $t('DesignPrintOperation.Scale') }}
</div>
<input type="text">
</div> -->
<a-slider
v-model:value="moodItemScale"
@change="setMoodItemScale"
>
</a-slider>
</div>
<!-- <div class="layout_right">
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
@@ -132,6 +136,7 @@ export default defineComponent({
let layoutList:any = ref([])
const content = ref<HTMLElement | null>(null);
let loadingShow = ref(false)
let moodItemScale = ref(0)
return {
layout,
templateFileList,
@@ -139,7 +144,8 @@ export default defineComponent({
drag,
layoutList,
content,
loadingShow
loadingShow,
moodItemScale
};
},
data() {
@@ -158,6 +164,7 @@ export default defineComponent({
setabsolute:false,
token: "",
uploadUrl: "",
moodIndex:0,
upload: {
isPin: 0,
gender:'',
@@ -600,13 +607,33 @@ export default defineComponent({
this.layout = false
},
setpitch(item:any,index:any){
// console.log(item);
// let dom:any = document.getElementsByClassName('modal_imgItem')[index]
// console.log(dom);
// let img = new Image()
// img.src = item.imgUrl
// img.onload = ()=>{
// console.log(dom.offsetWidth/img.width);
// console.log(img.width/dom.offsetWidth);
// }
if(!item.zoom){
item.zoom = 1
}
this.moodIndex = index
this.moodItemScale = (item.zoom?item.zoom:1)*100
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
item.setPitch = true
if(this.content){
(this.content as any)[index].style.zIndex = GO.zIndex++
}
// item.style =
},
setMoodItemScale(value:any){
if(value > 2){
this.layoutList[this.moodIndex].zoom = value/100
}
},
setmoodb(item:any){
@@ -902,7 +929,7 @@ export default defineComponent({
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(1);
transform: translate(-50%,-50%);
}
::selection {
// background: rgba(0,0,0,0);
@@ -972,7 +999,6 @@ export default defineComponent({
top: 50%;
transform: translateY(-50%);
right: 5rem;
overflow-x: hidden;
// background-color: #000;
width: 8%;
height: 50%;
@@ -999,6 +1025,33 @@ export default defineComponent({
border: 1px solid #000;
}
}
.ant-slider{
margin: 0;
margin-top: 2rem;
padding: 0 1rem;
.ant-slider-track,
.ant-slider-rail {
height: .6rem;
background-color: #e1e1e1;
border-radius: 0.5rem;
}
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle {
background-color: #2d2e76 !important;
border: none !important;
}
.ant-slider-handle:hover {
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
.habit_System_Designer_text_max {
display: flex;
justify-content: space-between;
.habit_System_Designer_text {
}
}
}
}
.submit_button {
margin: 2rem auto 0;