qiushou-kiosk/src/components/noticeBox.vue

<template>
  <n-card :title="title" class="notice-box" @click="handleDetail">
    {{ content }}
    <template #footer>
      {{ time }}
    </template>
  </n-card>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
defineOptions({
  name: "notice-box",
});

const props = defineProps({
  id: {
    type: [String, Number],
    default: () => "",
  },
  title: {
    type: String,
    default: () => "",
  },
  content: {
    type: String,
    default: () => "",
  },
  time: {
    type: String,
    default: () => "",
  },
});

const handleDetail = () => {
  if (props.id) {
    router.push("/info-detail/" + props.id);
  } else {
    console.warn("missing id");
  }
};
</script>

<style lang="scss" scoped>
.n-card.notice-box {
  --n-title-font-weight: 600 !important;
  --n-title-font-size: 1.75rem !important;
  border-radius: 1.875rem;
  box-shadow: var(--main-box-shadow);
  // background-image: url("/img/notice_list_bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  // background-color: transparent;
}
</style>