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
2024-05-16 11:44:30 +08:00
parent 9444e386aa
commit 3abb2bf79e
5 changed files with 123 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,11 +49,11 @@
</div>
</div>
</div> -->
<div class="color_setting_operateSingle">
<!-- <div class="color_setting_operateSingle">
<div class="started_btn" @click="setOperate">
{{ colorList[selectIndex]?.gradient?.gradientShow? 'Gradual Change':'Single'}}
</div>
</div>
</div> -->
<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
<div class="color_setting_operate_item color_setting_operate_control">
<div class="operate_item_box">

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

@@ -1,7 +1,7 @@
<template>
<div>
<a-modal
class="layout_modal"
class="layoutMobile_modal"
v-model:visible="layout"
:footer="null"
width="78%"
@@ -12,35 +12,35 @@
:keyboard="false"
:destroyOnClose="true"
>
<div class="layout_content">
<div class="layoutMobile_content">
<div class="collection_title">
<div class="collection_title_text">
<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
<div class="layoutMobile_title">{{ $t('layout.MoodBoardDesign') }}</div>
</div>
</div>
<div class="collection_closeIcon" @touchstart.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="layout_nav">
<div class="layoutMobile_nav">
<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 class="layoutMobile_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @touchstart="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}" draggable="false" v-modelImg>
<ul v-show="item.setPitch" class="layout_btn" >
<li class="layout_btn_top" v-compile.stop="'top'"></li>
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
<li class="layout_btn_left" v-compile.stop="'left'"></li>
<li class="layout_btn_right" v-compile.stop="'right'"></li>
<li class="layout_rotote" v-rotote.stop></li>
<li class="layout_translate" v-translate.stop></li>
<!-- <li class="layout_translate" v-translate.stop></li> -->
<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
<li class="layout_angle_tl" v-angle.stop = "'right'"></li>
<li class="layout_angle_br" v-angle.stop = "'bottom'"></li>
<li class="layout_angle_bl" v-angle.stop = "'left'"></li>
<ul v-show="item.setPitch" class="layoutMobile_btn" >
<li class="layoutMobile_btn_top" v-compile.stop="'top'"></li>
<li class="layoutMobile_btn_bottom" v-compile.stop="'bottom'"></li>
<li class="layoutMobile_btn_left" v-compile.stop="'left'"></li>
<li class="layoutMobile_btn_right" v-compile.stop="'right'"></li>
<li class="layoutMobile_rotote" v-rotote.stop></li>
<li class="layoutMobile_translate" v-translate.stop></li>
<!-- <li class="layoutMobile_translate" v-translate.stop></li> -->
<li class="layoutMobile_angle_tr" v-angle.stop = "'top'"></li>
<li class="layoutMobile_angle_tl" v-angle.stop = "'right'"></li>
<li class="layoutMobile_angle_br" v-angle.stop = "'bottom'"></li>
<li class="layoutMobile_angle_bl" v-angle.stop = "'left'"></li>
</ul>
</div>
<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
@@ -59,17 +59,17 @@
</draggable> -->
</div>
<div class="layout_left">
<div class="layout_left_text">
<div class="layoutMobile_left">
<div class="layoutMobile_left_text">
{{ $t('layout.LayerOptions') }}
</div>
<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">
<div v-for="item,index in moodbList" class="layoutMobile_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layoutMobile_left_item">
</div>
</div>
</div>
<div class="layout_right">
<div class="layout_right_text">
<div class="layoutMobile_right">
<div class="layoutMobile_right_text">
{{ $t('DesignPrintOperation.Scale') }}
</div>
<a-slider
@@ -78,9 +78,9 @@
>
</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">
<!-- <div class="layoutMobile_right">
<div v-for="item,index in moodbList" class="layoutMobile_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layoutMobile_left_item">
</div>
</div>
</div> -->
@@ -671,7 +671,7 @@ export default defineComponent({
</script>
<style lang="less">
.layout_modal {
.layoutMobile_modal {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
@@ -691,7 +691,7 @@ export default defineComponent({
border-radius: calc(1rem*1.2);
}
.layout_content {
.layoutMobile_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem*1.2);
height: 100%;
@@ -735,7 +735,7 @@ export default defineComponent({
color: rgba(0, 0, 0, 1);
}
}
.layout_nav{
.layoutMobile_nav{
display: flex;
margin-top: calc(2rem*1.2);
justify-content: center;
@@ -761,7 +761,7 @@ export default defineComponent({
}
}
.layout_centent{
.layoutMobile_centent{
display: flex;
// height: 55%;
height: calc(35rem*1.2);
@@ -779,7 +779,7 @@ export default defineComponent({
&.active{
flex-direction: row;
}
.layout_btn{
.layoutMobile_btn{
list-style: none;
width: 100%;
height: 100%;
@@ -800,36 +800,36 @@ export default defineComponent({
position: absolute;
z-index: 1049;
}
.layout_btn_top,.layout_btn_bottom{
.layoutMobile_btn_top,.layoutMobile_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.layout_btn_top{
.layoutMobile_btn_top{
top: 0;
}
.layout_btn_bottom{
.layoutMobile_btn_bottom{
top: 100%;
}
.layout_btn_left,.layout_btn_right{
.layoutMobile_btn_left,.layoutMobile_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.layout_btn_left{
.layoutMobile_btn_left{
left: 0;
}
.layout_btn_right{
.layoutMobile_btn_right{
left: 100%;
}
.layout_rotote{
.layoutMobile_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.layout_rotote::after{
.layoutMobile_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
@@ -839,7 +839,7 @@ export default defineComponent({
bottom: 0;
transform: translateX(-50%);
}
.layout_rotote::before{
.layoutMobile_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
@@ -850,31 +850,31 @@ export default defineComponent({
height: calc(2rem*1.2);
border-radius: 50%;
}
.layout_translate{
.layoutMobile_translate{
top: 50%;
left: 50%;
transform: translate(-50%,-50%) ;
cursor: crosshair;
cursor: move;
}
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
.layoutMobile_angle_tr,.layoutMobile_angle_tl,.layoutMobile_angle_br,.layoutMobile_angle_bl{
// opacity: 0;
width: calc(2rem*1.2);
height: calc(2rem*1.2);
}
.layout_angle_tr{
.layoutMobile_angle_tr{
right: 0%;
top: 0;
}
.layout_angle_tl{
.layoutMobile_angle_tl{
left: 0%;
top: 0;
}
.layout_angle_br{
.layoutMobile_angle_br{
right: 0%;
bottom: 0%;
}
.layout_angle_bl{
.layoutMobile_angle_bl{
left: 0%;
bottom: 0%;
}
@@ -882,7 +882,7 @@ export default defineComponent({
pointer-events: none;
}
}
.layout_centent_bor{
.layoutMobile_centent_bor{
}
.modal_imgItem{
@@ -939,7 +939,7 @@ export default defineComponent({
width: 48.5%;
height: 48%;
}
.layout_left{
.layoutMobile_left{
position: absolute;
top: 50%;
transform: translateY(-50%);
@@ -948,15 +948,15 @@ export default defineComponent({
// background-color: #000;
width: 10%;
height: 50%;
&.layout_left::-webkit-scrollbar {
&.layoutMobile_left::-webkit-scrollbar {
display: none;
}
.layout_left_text{
.layoutMobile_left_text{
font-size: var(--aida-fsize1-6);
margin-bottom: calc(1rem*1.2);
color: #000;
}
.layout_left_items{
.layoutMobile_left_items{
width: 100%;
height: calc(6rem*1.2);
display: flex;
@@ -966,13 +966,13 @@ export default defineComponent({
flex-direction: column;
margin-bottom: calc(2rem*1.2);
cursor: pointer;
.layout_left_item{
.layoutMobile_left_item{
box-sizing: border-box;
border: 1px solid #000;
}
}
}
.layout_right{
.layoutMobile_right{
position: absolute;
top: 50%;
transform: translateY(-50%);
@@ -980,15 +980,15 @@ export default defineComponent({
// background-color: #000;
width: 8%;
height: 50%;
&.layout_left::-webkit-scrollbar {
&.layoutMobile_left::-webkit-scrollbar {
display: none;
}
.layout_left_text{
.layoutMobile_left_text{
font-size: var(--aida-fsize1-6);
margin-bottom: calc(1rem*1.2);
color: #000;
}
.layout_left_items{
.layoutMobile_left_items{
width: 100%;
height: calc(6rem*1.2);
display: flex;
@@ -998,7 +998,7 @@ export default defineComponent({
flex-direction: column;
margin-bottom: calc(2rem*1.2);
cursor: pointer;
.layout_left_item{
.layoutMobile_left_item{
box-sizing: border-box;
border: 1px solid #000;
}