qiushou-kiosk/src/components/surveyBox.vue

<template>
  <n-card :title="title" class="survey-box" @click="handleDetail">
    <div class="info">
      {{ content }}
    </div>
    <template #footer>
      <div class="time">
        {{ time }}
      </div>
    </template>
  </n-card>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
defineOptions({
  name: "survey-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("/survey-detail/" + props.id);
  } else {
    console.warn("missing id");
  }
};
</script>

<style lang="scss" scoped>
.n-card.survey-box {
  --n-title-font-weight: 600 !important;
  --n-title-font-size: 1.75rem !important;
  --n-padding-top: 1.875rem !important;
  border-radius: 1.875rem;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-image: var(--main-sub-list-bg);
  background-position: top right;
  background-size: cover;
  background-repeat: no-repeat;
  height: 15.75rem;
  overflow: hidden;
}
.time {
  color: var(--main-sub-text-color);
}
.info {
  font-size: calc(var(--base-font-size) * 1.3);
}
</style>