fix: 前端页面架构重构初版

Yi.Ai.Vue3/src/layouts/components0/Header/components/BuyBtn.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { showProductPackage } from '@/utils/product-package';
+
+// 点击购买按钮
+function onProductPackage() {
+  showProductPackage();
+}
+</script>
+
+<template>
+  <div class="buy-btn-container">
+    <el-button
+      class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg"
+      data-tour="buy-btn"
+      @click="onProductPackage"
+    >
+      <span>立即购买</span>
+    </el-button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.buy-btn-container {
+  display: flex;
+  align-items: center;
+  margin: 0 22px 0 0;
+
+  .buy-btn {
+    background: linear-gradient(90deg, #FFD700, #FFC107);
+    color: #fff;
+    border: none;
+    border-radius: 9999px;
+    transition: transform 0.2s, box-shadow 0.2s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
+      background: linear-gradient(90deg, #FFC107, #FFD700);
+    }
+
+    .icon-rocket {
+      color: #fff;
+    }
+
+    .animate-bounce {
+      animation: bounce 1.2s infinite;
+    }
+  }
+}
+
+// 移动端，屏幕小于756px
+@media screen and (max-width: 756px) {
+  .buy-btn-container {
+    margin: 0 ;
+
+    .buy-btn {
+      font-size: 12px;
+      max-width: 60px;
+      padding: 8px 12px;
+    }
+  }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
+</style>