nuxt初始化

nuxt-web/components/SectionBanner.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  title: string
+  description?: string
+  backgroundImage?: string
+}>()
+
+const bannerStyle = computed(() => {
+  if (!props.backgroundImage) {
+    return undefined
+  }
+
+  return {
+    backgroundImage: `linear-gradient(rgba(16, 37, 65, 0.32), rgba(16, 37, 65, 0.32)), url(${props.backgroundImage})`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center'
+  }
+})
+</script>
+
+<template>
+  <section class="page-title" :style="bannerStyle">
+    <div class="container">
+      <div class="row">
+        <div class="col col-xs-12">
+          <h2>{{ title }}</h2>
+          <p v-if="description">{{ description }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>