105 lines
2.4 KiB
Vue
105 lines
2.4 KiB
Vue
|
<!--
|
||
|
|
Ported from legacy henza_pwa/src/components/DialogVantOneButton.vue — the
|
||
|
|
single-action variant of DialogVant (one full-width button instead of a
|
||
|
|
two-column grid). Used by App.vue's "new version available" dialog.
|
||
|
|
|
||
|
|
Same structure as DialogVant.vue: `show` is not a declared prop; the parent's
|
||
|
|
v-model:show falls through onto <van-dialog>, which is this component's sole
|
||
|
|
root element. Legacy's internal watch on an undeclared `modelValue` prop was
|
||
|
|
dead code and is not carried over.
|
||
|
|
|
||
|
|
Visual pass: same card chrome as DialogVant.vue's redesign (rounded
|
||
|
|
@canvas card, wine-wash art badge, filled @ink pill button), kept in sync
|
||
|
|
so the two dialog variants read as one family. The art badge is sized
|
||
|
|
larger here than DialogVant's since this component's sole caller
|
||
|
|
(App.vue's update dialog) fills it with a full animated Lottie player, not
|
||
|
|
a static icon.
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<van-dialog class="mDialog mDialog--single">
|
||
|
|
<div class="mDialog__body">
|
||
|
|
<div class="mDialog__art">
|
||
|
|
<slot name="img">{{ text2 }}</slot>
|
||
|
|
</div>
|
||
|
|
<div class="mDialog__title">
|
||
|
|
<slot name="title">{{ text1 }}</slot>
|
||
|
|
</div>
|
||
|
|
<div class="mDialog__actions">
|
||
|
|
<slot name="button">{{ text3 }}</slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</van-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { Dialog as VanDialog } from 'vant'
|
||
|
|
|
||
|
|
withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
timeOut: number
|
||
|
|
text1?: string
|
||
|
|
text2?: string
|
||
|
|
text3?: string
|
||
|
|
}>(),
|
||
|
|
{},
|
||
|
|
)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.van-dialog__confirm,
|
||
|
|
.van-dialog__cancel {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mDialog.van-dialog {
|
||
|
|
width: min(320px, calc(100vw - 48px));
|
||
|
|
border-radius: 26px;
|
||
|
|
background: @canvas;
|
||
|
|
box-shadow: 0 30px 60px -24px rgba(20, 22, 26, 0.45);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mDialog__body {
|
||
|
|
padding: 26px 22px 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mDialog--single .mDialog__art {
|
||
|
|
width: 100%;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mDialog__title {
|
||
|
|
font-size: 14.5px;
|
||
|
|
font-weight: 700;
|
||
|
|
line-height: 1.9;
|
||
|
|
color: @ink;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mDialog__actions {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 9px;
|
||
|
|
margin-top: 10px;
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mDialog__actions > * {
|
||
|
|
padding: 12px;
|
||
|
|
border-radius: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: transform 0.18s ease, opacity 0.18s ease;
|
||
|
|
color: #fff !important;
|
||
|
|
background: @ink;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mDialog__actions > *:active {
|
||
|
|
transform: scale(0.97);
|
||
|
|
}
|
||
|
|
</style>
|