初始化

pages/product/checkout/components/PageBanner.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="banner m-auto relative sm:flex">
+    <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg"
+         class="pointer-events-none absolute w-full top-[-2px] transition-all text-green-5 flex-shrink-0 opacity-100 duration-[400ms] opacity-80 -z-10">
+      <mask id="path-1-inside-1_414_5526" fill="white">
+        <path d="M0 0H1440V181H0V0Z"></path>
+      </mask>
+      <path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22"></path>
+      <path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)"></path>
+      <defs>
+        <linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse">
+          <stop stop-color="currentColor"></stop>
+          <stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
+        </linearGradient>
+        <linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse">
+          <stop stop-color="currentColor" stop-opacity="0"></stop>
+          <stop offset="0.395" stop-color="currentColor"></stop>
+          <stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
+        </linearGradient>
+      </defs>
+    </svg>
+    <div class="md:w-screen-xl m-auto px-3">
+      <Breadcrumb :data="form" />
+      <div class="md:py-8 sm:py-16 md:px-0 px-4 py-8" _path="/templates" _dir="" _draft="false" _partial="false"
+           _locale=""
+           _id="content:4.templates.yml" _type="yaml" _source="content" _file="4.templates.yml" _stem="4.templates"
+           _extension="yml">
+        <el-steps
+            style="max-width: 600px"
+            :space="200"
+            class="px-3"
+            :active="active"
+            finish-status="success"
+        >
+          <el-step title="选择套餐" />
+          <el-step title="订单确认" />
+          <el-step title="支付订单" />
+          <el-step title="完成订购" />
+        </el-steps>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {openSpmUrl} from "~/utils/common";
+import Breadcrumb from "~/components/Breadcrumb.vue";
+import type {Article} from "~/api/cms/article/model";
+
+
+withDefaults(
+    defineProps<{
+      title?: string;
+      desc?: string;
+      buyUrl?: string;
+      form?: Article;
+      active?: number;
+    }>(),
+    {
+      title: 'Templates',
+      desc: 'Explore community templates to get up and running in a few seconds.',
+      demoUrl: '/product/website',
+      buyUrl: 'https://github.com/websoft9/ansible-templates',
+    }
+);
+
+</script>