mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-21 02:04:26 +08:00
improve the style of long tips and drag-and-drop image
This commit is contained in:
@@ -14,7 +14,7 @@
|
|||||||
<div class="image-container display-flex justify-content-center"
|
<div class="image-container display-flex justify-content-center"
|
||||||
style="height: 400px" @click="showOpenImage">
|
style="height: 400px" @click="showOpenImage">
|
||||||
<img height="400px" :src="imageSrc" v-if="imageSrc" />
|
<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>
|
<span>{{ tt('Click here to select a receipt or transaction image') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -13,10 +13,10 @@
|
|||||||
@dragover.prevent
|
@dragover.prevent
|
||||||
@dragleave.prevent="onDragLeave"
|
@dragleave.prevent="onDragLeave"
|
||||||
@drop.prevent="onDrop">
|
@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">
|
: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 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 v-if="isDragOver">{{ tt('Release to load image') }}</h3>
|
<h3 class="pa-2 bg-grey-200" v-if="isDragOver">{{ tt('Release to load image') }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<v-img height="480px" :class="{ 'cursor-pointer': !loading && !recognizing && !isDragOver }"
|
<v-img height="480px" :class="{ 'cursor-pointer': !loading && !recognizing && !isDragOver }"
|
||||||
:src="imageSrc" @click="showOpenImageDialog">
|
:src="imageSrc" @click="showOpenImageDialog">
|
||||||
|
|||||||
Reference in New Issue
Block a user