mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 07:57:33 +08:00
modify dialog style
This commit is contained in:
@@ -1,20 +1,29 @@
|
||||
<template>
|
||||
<v-dialog width="400" v-model="showState">
|
||||
<v-card>
|
||||
<v-toolbar color="primary">
|
||||
<v-toolbar-title>{{ $t('global.app.title') }}</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text class="pa-4">
|
||||
<p>{{ $t('You can scan the below QR code on your mobile device.') }}</p>
|
||||
<v-dialog width="440" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-4">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<h5 class="text-h5">{{ $t('Use on Mobile Device') }}</h5>
|
||||
</div>
|
||||
</template>
|
||||
<template #subtitle>
|
||||
<div class="text-body-1 text-center text-wrap mt-6">{{ $t('You can scan the below QR code on your mobile device.') }}</div>
|
||||
</template>
|
||||
<v-card-text class="mb-md-4">
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<div class="w-100 d-flex justify-center">
|
||||
<img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath" />
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-text class="pa-4 w-100 d-flex justify-center">
|
||||
<img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath" />
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div class="w-100 d-flex justify-center gap-4">
|
||||
<v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" @click="showState = false">{{ $t('Close') }}</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="showState = false">{{ $t('Close') }}</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user