nuxt初始化

nuxt-web/components/ProductDetailLayout.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type LinkItem = { label: string; to: string }
+
+const props = withDefaults(defineProps<{
+  title: string
+  description?: string
+  bannerImage?: string
+  breadcrumbItems?: Array<{ label: string; to?: string }>
+  relatedProducts?: LinkItem[]
+  relatedCases?: LinkItem[]
+}>(), {
+  description: undefined,
+  bannerImage: undefined,
+  breadcrumbItems: () => [],
+  relatedProducts: () => [],
+  relatedCases: () => []
+})
+
+const bannerStyle = computed(() => {
+  if (!props.bannerImage) {
+    return undefined
+  }
+
+  return {
+    backgroundImage: `linear-gradient(rgba(16, 37, 65, 0.32), rgba(16, 37, 65, 0.32)), url(${props.bannerImage})`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center'
+  }
+})
+</script>
+
+<template>
+  <div>
+    <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>
+    <Breadcrumb v-if="breadcrumbItems.length" :items="breadcrumbItems" />
+    <slot />
+
+    <section v-if="relatedProducts.length" class="product-related-section section-padding">
+      <div class="container">
+        <div class="row">
+          <div class="col col-xs-12">
+            <div class="product-advantages-header">
+              <div>
+                <h1 class="product-advantages-title">相关产品</h1>
+                <p>继续查看与当前方案高度关联的产品能力。</p>
+              </div>
+            </div>
+            <div class="product-related-links">
+              <NuxtLink v-for="item in relatedProducts" :key="item.to" :to="item.to" class="product-related-link">
+                {{ item.label }}
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.product-related-section {
+  padding-top: 20px;
+}
+
+.product-related-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+}
+
+.product-related-link {
+  display: inline-flex;
+  align-items: center;
+  min-height: 48px;
+  padding: 0 20px;
+  border-radius: 999px;
+  background: #fff;
+  border: 1px solid rgba(20, 129, 255, 0.2);
+  color: #102541;
+  text-decoration: none;
+  box-shadow: 0 10px 24px rgba(16, 37, 65, 0.06);
+}
+</style>