kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
yanran200730
2022-05-31 18:09:17 +08:00
parent 0e53e350f4
commit 44f2be7d9b
1 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/saas/AppCountryAlbum/Watermark.vue
View File

@@ -6,19 +6,21 @@
<image src="./images/to-right.png" />
</div>
</div>
<div ref="waterMarker" class="waterMarker-wrapper" :style="{height: canvasHeight + 'px'}">
<image class="waterMarker-img" :src="img" mode="widthFix" @load="onImgLoad" />
<div
class="watermark"
v-if="currIndex > -1 && currWatermarkConfig.length"
:style="{left: x + 'px', top: y + 'px' }"
@touchstart="onTouchstart"
@touchmove="onTouchmove">
<component ref="WatermarkItem" :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
<div v-if="!isHide" @click.stop="currIndex = -1" class="watermark-close" data-html2canvas-ignore>
<image src="./images/close-b.png" />
<div class="photo-wrapper">
<div ref="waterMarker" class="waterMarker-wrapper" :style="{height: canvasHeight + 'px'}">
<img class="waterMarker-img" :src="img" mode="widthFix" @load="onImgLoad" />
<div
class="watermark"
v-if="currIndex > -1 && currWatermarkConfig.length"
:style="{left: x + 'px', top: y + 'px' }"
@touchstart="onTouchstart"
@touchmove="onTouchmove">
<component ref="WatermarkItem" :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
<div v-if="!isHide" @click.stop="currIndex = -1" class="watermark-close" data-html2canvas-ignore>
<image src="./images/close-b.png" />
</div>
<span v-if="!isHide" class="watermark-edit" @click.stop="toEdit" data-html2canvas-ignore>编辑</span>
</div>
<span v-if="!isHide" class="watermark-edit" @click.stop="toEdit" data-html2canvas-ignore>编辑</span>
</div>
</div>
<div class="photo-bottom" data-html2canvas-ignore>
@@ -393,15 +395,21 @@
<style lang="scss" scoped>
.photo {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background: #333;
overflow: hidden;
.photo-wrapper {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 128px;
left: 0;
width: 100%;
height: calc(100vh - 321px - 128px);
}
.newImg {
position: fixed;
left: 0;
@@ -564,13 +572,13 @@
}
.waterMarker-wrapper {
width: 100%;
max-height: 100vh;
position: relative;
max-height: calc(100vh - 321px - 128px);
overflow: hidden;
.waterMarker-img {
width: 100%;
max-height: 100vh;
max-height: calc(100vh - 321px - 128px);
}
.watermark {
@@ -637,7 +645,7 @@
left: 0;
z-index: 10;
width: 100%;
padding-bottom: 40px;
height: 321px;
background: #FFFFFF;
border-radius: 32px 32px 0px 0px;
border: 1px solid #DDDDDD;