From 8f88867fb737ef12d488db164ea8ebf7c6455201 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Mon, 18 Dec 2023 15:34:54 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dipad=E7=AB=AF=E6=A8=A1?= =?UTF-8?q?=E7=89=B9=E4=B8=8D=E8=83=BD=E7=BC=A9=E6=94=BE=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/LibraryPage/ModelPlacement.vue | 31 +++++++-- .../LibraryPage/ModelPlacementMobile.vue | 67 ++++++++++++++++--- 2 files changed, 82 insertions(+), 16 deletions(-) diff --git a/src/component/LibraryPage/ModelPlacement.vue b/src/component/LibraryPage/ModelPlacement.vue index fa231c4b..38b4ae5e 100644 --- a/src/component/LibraryPage/ModelPlacement.vue +++ b/src/component/LibraryPage/ModelPlacement.vue @@ -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{ diff --git a/src/component/LibraryPage/ModelPlacementMobile.vue b/src/component/LibraryPage/ModelPlacementMobile.vue index e498af94..370906df 100644 --- a/src/component/LibraryPage/ModelPlacementMobile.vue +++ b/src/component/LibraryPage/ModelPlacementMobile.vue @@ -67,6 +67,10 @@
+
+
-
+
+
+
{{ $t('ModelPlacement.Point') }}
@@ -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{