|
|
|
|
@ -709,19 +709,23 @@ const handleChangeTplSubmit = async () => {
|
|
|
|
|
|
|
|
|
|
<!-- <Footer/> -->
|
|
|
|
|
|
|
|
|
|
<van-popup class="cropPopup" v-model:show="crop.show" closeable>
|
|
|
|
|
<h5 class="text-center mt-3">檔案裁切上傳</h5>
|
|
|
|
|
<div class="cropper-section">
|
|
|
|
|
<van-overlay :show="crop.show" @click="crop.show = false" />
|
|
|
|
|
<div class="cropper-section" v-if="crop.show">
|
|
|
|
|
<h5 class="text-center">檔案裁切上傳</h5>
|
|
|
|
|
<div class="crop-area">
|
|
|
|
|
<cropper class="cropper" ref="myCrop" :src="crop.img" :stencil-props="{
|
|
|
|
|
aspectRatio: 1 / 1,
|
|
|
|
|
}" :auto-zoom="true" />
|
|
|
|
|
</div>
|
|
|
|
|
<van-button round class="btn-tomatoRed rounded-pill w-50 mt-3" size="small" @click="onCrop">
|
|
|
|
|
<div class="crop-btn">
|
|
|
|
|
<van-button round class="btn-darkBlue rounded-pill w-50" size="small" @click="() => { crop.show = false }">
|
|
|
|
|
取消
|
|
|
|
|
</van-button>
|
|
|
|
|
<van-button round class="btn-tomatoRed rounded-pill w-50" size="small" @click="onCrop">
|
|
|
|
|
裁切確認
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-popup>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -834,4 +838,29 @@ const handleChangeTplSubmit = async () => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cropper-section {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
position: fixed;
|
|
|
|
|
text-align: center;
|
|
|
|
|
top: 50px;
|
|
|
|
|
height: 350px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 500px;
|
|
|
|
|
background: hsl(0, 0%, 87%);
|
|
|
|
|
z-index: 8888;
|
|
|
|
|
|
|
|
|
|
.crop-area {
|
|
|
|
|
margin: 5 auto;
|
|
|
|
|
width: 100%;
|
|
|
|
|
// height: 330px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.crop-btn {
|
|
|
|
|
text-align: center;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|