初始化

src/components/PageAdvantage.vue

@@ -0,0 +1,174 @@
+<template>
+  <section class="page page-advantage">
+    <div class="section-header">
+      <h2 class="section-title">核心优势</h2>
+      <div class="section-line"></div>
+      <p class="section-desc">我们的独特竞争力</p>
+    </div>
+    <div class="advantage-layout">
+      <div class="advantage-left">
+        <!-- 预留左侧大图位置 -->
+        <div class="left-image-placeholder">
+          <span>展示图片</span>
+        </div>
+      </div>
+      <div class="advantage-right">
+        <div class="advantage-item" v-for="(item, index) in advantages" :key="index">
+          <div class="item-icon-placeholder">
+            <span>{{ index + 1 }}</span>
+          </div>
+          <div class="item-content">
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const advantages = [
+  { title: '技术领先', desc: '持续投入研发，掌握行业核心技术，保持产品竞争力' },
+  { title: '品质保障', desc: '严格的质量管控体系，从设计到交付全流程把控' },
+  { title: '快速响应', desc: '敏捷的服务团队，7×24小时响应客户需求' },
+  { title: '生态完善', desc: '开放的合作生态，携手伙伴共建行业解决方案' },
+]
+</script>
+
+<style scoped>
+.page-advantage {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(180deg, #0a0e27 0%, #111538 50%, #0d1137 100%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-advantage::before {
+  content: '';
+  position: absolute;
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
+  top: 10%;
+  left: -100px;
+  border-radius: 50%;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 38px;
+  font-weight: 700;
+  letter-spacing: 4px;
+  margin-bottom: 16px;
+}
+
+.section-line {
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, #6366f1, #a855f7);
+  margin: 0 auto 20px;
+  border-radius: 2px;
+}
+
+.section-desc {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.5);
+  letter-spacing: 2px;
+}
+
+.advantage-layout {
+  display: flex;
+  gap: 60px;
+  max-width: 1100px;
+  width: 100%;
+  align-items: center;
+}
+
+.advantage-left {
+  flex: 1;
+}
+
+.left-image-placeholder {
+  width: 100%;
+  height: 400px;
+  border: 2px dashed rgba(255, 255, 255, 0.15);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 16px;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.advantage-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+
+.advantage-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 24px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 14px;
+  transition: all 0.3s ease;
+}
+
+.advantage-item:hover {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(99, 102, 241, 0.25);
+  transform: translateX(6px);
+}
+
+.item-icon-placeholder {
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #6366f1, #a855f7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.item-content h3 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  letter-spacing: 1px;
+}
+
+.item-content p {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+  line-height: 1.7;
+}
+
+@media (max-width: 800px) {
+  .advantage-layout {
+    flex-direction: column;
+  }
+  .left-image-placeholder {
+    height: 240px;
+  }
+}
+</style>