modify dialog style

This commit is contained in:
MaysWind
2023-08-12 19:11:56 +08:00
parent ac2adaf4ba
commit 9a626b0d4f
8 changed files with 203 additions and 169 deletions
+23 -14
View File
@@ -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>