improve the style of long tips and drag-and-drop image

This commit is contained in:
MaysWind
2025-09-21 20:48:41 +08:00
parent e9507241ed
commit 669a217180
2 changed files with 4 additions and 4 deletions
@@ -14,7 +14,7 @@
<div class="image-container display-flex justify-content-center"
style="height: 400px" @click="showOpenImage">
<img height="400px" :src="imageSrc" v-if="imageSrc" />
<div class="image-container-background display-flex justify-content-center align-items-center" v-if="!imageSrc">
<div class="image-container-background display-flex justify-content-center align-items-center padding-horizontal" v-if="!imageSrc">
<span>{{ tt('Click here to select a receipt or transaction image') }}</span>
</div>
</div>
@@ -13,10 +13,10 @@
@dragover.prevent
@dragleave.prevent="onDragLeave"
@drop.prevent="onDrop">
<div class="d-flex w-100 fill-height justify-center align-center justify-content-center"
<div class="d-flex w-100 fill-height justify-center align-center justify-content-center px-4"
:class="{ 'dropzone': true, 'dropzone-dragover': isDragOver }" style="height: 480px">
<h3 v-if="!imageFile && !isDragOver">{{ tt('Drag and drop a receipt or transaction image here, or click to select one') }}</h3>
<h3 v-if="isDragOver">{{ tt('Release to load image') }}</h3>
<h3 class="pa-2 bg-grey-200" v-if="!imageFile && !isDragOver">{{ tt('Drag and drop a receipt or transaction image here, or click to select one') }}</h3>
<h3 class="pa-2 bg-grey-200" v-if="isDragOver">{{ tt('Release to load image') }}</h3>
</div>
<v-img height="480px" :class="{ 'cursor-pointer': !loading && !recognizing && !isDragOver }"
:src="imageSrc" @click="showOpenImageDialog">