zouma-short/src/components/NewsModal.vue

<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="end">
                    <ion-button @click="dismiss()">{{ $t('common.close') }}</ion-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <div class="title">{{ detail.title }}</div>
            <div class="time">{{ detail.createdAt }}</div>
            <div class="content-wrapper">
                <div class="content" v-html="detail.detail"></div>
            </div>
        </ion-content>
    </ion-page>
</template>
<script setup>
import { modalController } from '@ionic/vue'
const props = defineProps({
    detail: {
        type: Object
    }
})
const dismiss = async () => {
    return await modalController.dismiss()
}
</script>
<style lang="less" scoped>
.title {
    text-align: center;
    padding: 10px 16px;
    line-height: 24px;
    font-size: 16px;
    font-weight: bold;
}
.time {
    line-height: 24px;
    font-size: 12px;
    color: var(--ion-color-step-400);
    text-align: center;
}
.content-wrapper {
    padding: 16px;
    line-height: 1.5;
    color: var(--ion-color-step-800);
    :deep(img) {
        width: 100%;
        height: auto;
    }
}
</style>