love-key-web/src/components/PageAdvantage.vue

<template>
  <section class="page page-advantage">
    <div class="content-wrapper">
      <div class="image-side">
        <div class="phone-placeholder"><span>手机截图</span></div>
      </div>
      <div class="text-side">
        <h2 class="section-title">
          Every opening is an<br />
          unknown encounter
        </h2>
        <p class="section-desc">
          每一次开启都是一场未知的邂逅。探索全新的交互体验，让沟通充满惊喜与期待。
        </p>
      </div>
    </div>
    <div class="deco deco-1">💎</div>
    <div class="deco deco-2">🎁</div>
  </section>
</template>

<script setup>
</script>

<style scoped lang="less">

.page-advantage {
  width: 100%;
  height: 100vh;
  background: #ffffff;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: @gap-section;
  max-width: @content-max;
  width: 100%;
  padding: 0 @gap-content;
}

.text-side { flex: 1; }

.section-title {
  font-size: @font-title;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: clamp(12px, 1.2vh, 28px);
  color: #1a1a1a;
}

.section-desc {
  font-size: @font-desc;
  line-height: 1.8;
  color: #888;
  max-width: clamp(260px, 22vw, 480px);
}

.image-side {
  flex: 1;
  display: flex;
  justify-content: center;
}

.phone-placeholder {
  width: @phone-w-main;
  height: @phone-h-main;
  border: 2px dashed #ddd;
  border-radius: clamp(16px, 1.5vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: @font-small;
  background: #fafafa;
}

.deco {
  position: absolute;
  font-size: clamp(24px, 2.5vw, 60px);
  opacity: 0.15;
  animation: float 3.5s ease-in-out infinite;
}

.deco-1 { top: 15%; left: 8%; animation-delay: 0.3s; }
.deco-2 { bottom: 12%; right: 10%; animation-delay: 1.2s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column-reverse;
    gap: 32px;
    padding: 0 24px;
  }
  .section-title { text-align: center; }
  .section-desc { text-align: center; }
  .phone-placeholder { width: 180px; height: 333px; }
}
</style>