48 lines
964 B
Vue
48 lines
964 B
Vue
<template>
|
|
<view
|
|
v-show="visible"
|
|
class="app-toast"
|
|
role="status"
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
>
|
|
<text class="app-toast__copy">{{ message }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
visible: { type: Boolean, default: false },
|
|
message: { type: String, default: "" },
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "../styles/adaptive-frame-profiles.scss" as adaptive;
|
|
|
|
.app-toast {
|
|
position: fixed;
|
|
z-index: 100;
|
|
top: calc(env(safe-area-inset-top) + 24rpx);
|
|
left: 50%;
|
|
display: flex;
|
|
width: 590rpx;
|
|
max-width: calc(100vw - 48rpx);
|
|
min-height: 82rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
@include adaptive.adaptive-feedback-toast;
|
|
transform: translateX(-50%);
|
|
pointer-events: none;
|
|
}
|
|
.app-toast__copy {
|
|
z-index: 1;
|
|
padding: 14rpx 30rpx;
|
|
color: #5c4330;
|
|
font-size: clamp(15px, 25rpx, 18px);
|
|
font-weight: 500;
|
|
line-height: 1.45;
|
|
text-align: center;
|
|
}
|
|
</style>
|