52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
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">
|
|
.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;
|
|
box-sizing: border-box;
|
|
border: 16rpx solid transparent;
|
|
border-width: 16rpx 74rpx;
|
|
border-image-source: url("/static/assets/foundation/transparent/a01-scroll-toast-v3.png");
|
|
border-image-slice: 58 280 fill;
|
|
border-image-width: 16rpx 74rpx;
|
|
border-image-repeat: stretch;
|
|
transform: translateX(-50%);
|
|
pointer-events: none;
|
|
}
|
|
.app-toast__copy {
|
|
z-index: 1;
|
|
padding: 14rpx 30rpx;
|
|
color: #5c4330;
|
|
font-size: 25rpx;
|
|
font-weight: 500;
|
|
line-height: 1.45;
|
|
text-align: center;
|
|
}
|
|
</style>
|