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

修复ipad端模特不能缩放问题

Browse Source
This commit is contained in:
X1627315083
2023-12-18 15:34:54 +08:00
parent f8ba824bb9
commit 8f88867fb7
2 changed files with 82 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1016,30 +1016,49 @@ export default defineComponent({
width: 100%;
position: absolute;
}
.cropper-view-box-Bg::before{
transform: translateY(-40%);
background: #fff;
color: #000;
position: absolute;
}
.cropper-view-box-Top{
// border-top: 1px dashed;
/*虚线2 css*/
background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
background: linear-gradient(to left,transparent 0%,transparent 50%,#64646461 50%,#64646461 100%);background-size: 10px 1px;background-repeat: repeat-x;
height: 1rem;
opacity: .4;
top: 6%;
}
.cropper-view-box-Top::before{
content: 'Head';
}
.cropper-view-box-Bottom{
bottom: 6%;
// border-top: 1px dashed;
height: 1rem;
opacity: .4;
background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
background: linear-gradient(to left,transparent 0%,transparent 50%,#64646461 50%,#64646461 100%);background-size: 10px 1px;background-repeat: repeat-x;
}
.cropper-view-box-Bottom::before{
content: 'Foot';
}
.cropper-view-box-Center{
// border-left: 1px dashed;
left: 50%;
opacity: .4;
background: linear-gradient(to bottom,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 1px 10px;background-repeat: repeat-y;
background: linear-gradient(to bottom,transparent 0%,transparent 50%,#64646461 50%,#64646461 100%);background-size: 1px 10px;background-repeat: repeat-y;
top: 0;
width: 1rem;
height: 100%;
}
.cropper-view-box-Center::before{
content: 'Centre';
transform: translateX(-50%);
}
.vue-cropper{
.cropper-crop-box{
background: #fff;
}
}
}
.perview_mark_loading{

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

@@ -67,6 +67,10 @@
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
</div>
</div>
<div class="placement_point_item placement_point_scale">
<div class="cur_picture_opterate_item" @click="changeScale(-1)"><span class="operate_icon icon_font">-</span></div>
<div class="cur_picture_opterate_item" @click="changeScale(1)"><span class="operate_icon icon_font">+</span></div>
</div>
<div class="placement_point_item placement_point_item_btn">
<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
</div>
@@ -592,7 +596,11 @@ export default defineComponent({
}
},
changeScale(num:any) {
num = num || 1;
let cropper:any = this.$refs.cropper
cropper.changeScale(num);
},
confrimSubmit(){
let param = {
@@ -781,7 +789,7 @@ export default defineComponent({
.models_placement_body{
width: 100%;
height: 100%;
overflow: hidden;
.palcement_modal_header{
position: relative;
height: 6.6rem;
@@ -874,6 +882,7 @@ export default defineComponent({
color: #1A1A1A !important;
}
}
.placement_point_item{
display: flex;
justify-content: space-between;
@@ -924,6 +933,25 @@ export default defineComponent({
}
}
.placement_point_scale{
justify-content: center;
border: 1px solid #9a9a9a;
border-radius: 1rem;
width: 40%;
margin: 0 auto;
margin-bottom: 3rem;
div:nth-child(1){
border-right: 1px solid #9a9a9a;
}
div{
font-size: 2rem;
cursor: pointer;
width: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.placement_content_operate_list{
@@ -932,7 +960,7 @@ export default defineComponent({
position: absolute;
right: 0;
top:18.4rem;
.placement_content_operate_item{
padding: 1.5rem 0;
text-align: center;
@@ -994,7 +1022,7 @@ export default defineComponent({
-moz-user-select:none;
position: relative;
height: 57.6rem;
.img_content_block{
.img_content_block{
width: 40.8rem;
height: 100%;
max-height: 63.2rem;
@@ -1008,30 +1036,49 @@ export default defineComponent({
width: 100%;
position: absolute;
}
.cropper-view-box-Bg::before{
transform: translateY(-40%);
background: #fff;
color: #000;
position: absolute;
}
.cropper-view-box-Top{
// border-top: 1px dashed;
/*虚线2 css*/
background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
background: linear-gradient(to left,transparent 0%,transparent 50%,#64646461 50%,#64646461 100%);background-size: 10px 1px;background-repeat: repeat-x;
height: 1rem;
opacity: .4;
top: 6%;
}
.cropper-view-box-Top::before{
content: 'Head';
}
.cropper-view-box-Bottom{
bottom: 6%;
// border-top: 1px dashed;
height: 1rem;
opacity: .4;
background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
background: linear-gradient(to left,transparent 0%,transparent 50%,#64646461 50%,#64646461 100%);background-size: 10px 1px;background-repeat: repeat-x;
}
.cropper-view-box-Bottom::before{
content: 'Foot';
}
.cropper-view-box-Center{
// border-left: 1px dashed;
left: 50%;
opacity: .4;
background: linear-gradient(to bottom,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 1px 10px;background-repeat: repeat-y;
background: linear-gradient(to bottom,transparent 0%,transparent 50%,#64646461 50%,#64646461 100%);background-size: 1px 10px;background-repeat: repeat-y;
top: 0;
width: 1rem;
height: 100%;
}
.cropper-view-box-Center::before{
content: 'Centre';
transform: translateX(-50%);
}
.vue-cropper{
.cropper-crop-box{
background: #fff;
}
}
}
.perview_mark_loading{