xuexiaole-officialWebsite/src/components/illustrations/PhoneMockup.vue

<template>
  <svg viewBox="0 0 280 520" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto drop-shadow-2xl">
    <defs>
      <linearGradient id="phone-frame" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#1E1B4B" />
        <stop offset="100%" stop-color="#312E81" />
      </linearGradient>
      <linearGradient id="phone-screen-bg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#EEF2FF" />
        <stop offset="100%" stop-color="#F8FAFC" />
      </linearGradient>
      <linearGradient id="phone-progress" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#4F46E5" />
        <stop offset="100%" stop-color="#818CF8" />
      </linearGradient>
      <linearGradient id="phone-green" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#22C55E" />
        <stop offset="100%" stop-color="#4ADE80" />
      </linearGradient>
      <clipPath id="phone-clip">
        <rect x="16" y="48" width="248" height="424" rx="4" />
      </clipPath>
    </defs>

    <!-- Phone frame -->
    <rect width="280" height="520" rx="36" fill="url(#phone-frame)" />
    <rect x="4" y="4" width="272" height="512" rx="32" fill="#0F0D2E" />

    <!-- Screen area -->
    <rect x="16" y="48" width="248" height="424" rx="4" fill="url(#phone-screen-bg)" />

    <!-- Notch -->
    <rect x="90" y="12" width="100" height="28" rx="14" fill="#0F0D2E" />
    <circle cx="140" cy="26" r="6" fill="#1E1B4B" />
    <circle cx="140" cy="26" r="3" fill="#312E81" />

    <!-- Home indicator -->
    <rect x="105" y="488" width="70" height="5" rx="2.5" fill="#312E81" />

    <!-- Screen content -->
    <g clip-path="url(#phone-clip)">
      <!-- Status bar -->
      <rect x="16" y="48" width="248" height="30" fill="white" opacity="0.9" />
      <text x="32" y="67" font-size="10" font-weight="600" fill="#334155">9:41</text>
      <g transform="translate(220, 57)">
        <rect width="20" height="10" rx="2" stroke="#334155" stroke-width="1" fill="none" />
        <rect x="2" y="2" width="14" height="6" rx="1" fill="#22C55E" />
        <rect x="20" y="3" width="2" height="4" rx="1" fill="#334155" />
      </g>

      <!-- App header -->
      <rect x="16" y="78" width="248" height="50" fill="white" />
      <circle cx="40" cy="103" r="14" fill="#4F46E5" />
      <text x="40" y="108" text-anchor="middle" font-size="12" font-weight="bold" fill="white">学</text>
      <text x="62" y="100" font-size="13" font-weight="bold" fill="#1E1B4B">灵犀学</text>
      <text x="62" y="114" font-size="9" fill="#64748B">今天也要加油哦 ✨</text>

      <!-- Coins display -->
      <rect x="190" y="90" width="60" height="24" rx="12" fill="#FEF3C7" />
      <circle cx="202" cy="102" r="7" fill="#F59E0B" />
      <text x="202" y="105" text-anchor="middle" font-size="7" font-weight="bold" fill="white">¤</text>
      <text x="228" y="106" text-anchor="middle" font-size="10" font-weight="bold" fill="#D97706">2,340</text>

      <!-- Learning progress card -->
      <rect x="28" y="140" width="224" height="90" rx="16" fill="white" />
      <rect x="28" y="140" width="224" height="90" rx="16" stroke="#E2E8F0" stroke-width="1" />
      <text x="44" y="162" font-size="10" fill="#64748B">今日闯关进度</text>
      <text x="44" y="182" font-size="22" font-weight="bold" fill="#1E1B4B">3 / 5 关</text>
      <rect x="44" y="195" width="140" height="6" rx="3" fill="#EEF2FF" />
      <rect x="44" y="195" width="84" height="6" rx="3" fill="url(#phone-progress)" />
      <text x="44" y="216" font-size="9" fill="#4F46E5" font-weight="500">继续挑战 →</text>
      <!-- Mini trophy -->
      <g transform="translate(200, 155)">
        <circle cx="20" cy="20" r="18" fill="#FEF3C7" />
        <path d="M13 25 Q13 12 20 8 Q27 12 27 25 Z" fill="#F59E0B" />
        <rect x="16" y="25" width="8" height="3" rx="1" fill="#D97706" />
        <text x="20" y="22" text-anchor="middle" font-size="8" fill="white">★</text>
      </g>

      <!-- Word challenge cards -->
      <text x="28" y="255" font-size="11" font-weight="bold" fill="#1E1B4B">单词闯关</text>
      <text x="210" y="255" font-size="9" fill="#4F46E5" font-weight="500">查看全部</text>

      <!-- Word card 1 -->
      <rect x="28" y="265" width="106" height="95" rx="14" fill="#4F46E5" />
      <text x="44" y="290" font-size="16" font-weight="bold" fill="white">apple</text>
      <text x="44" y="305" font-size="9" fill="white" opacity="0.7">n. 苹果</text>
      <rect x="40" y="320" width="50" height="4" rx="2" fill="white" opacity="0.3" />
      <rect x="40" y="320" width="35" height="4" rx="2" fill="white" opacity="0.7" />
      <g transform="translate(76, 335)">
        <path d="M0 0 l3 5 5 1 -4 4 1 5 -5-2 -5 2 1-5 -4-4 5-1z" fill="#FBBF24" />
        <path d="M14 0 l3 5 5 1 -4 4 1 5 -5-2 -5 2 1-5 -4-4 5-1z" fill="#FBBF24" />
        <path d="M28 0 l3 5 5 1 -4 4 1 5 -5-2 -5 2 1-5 -4-4 5-1z" fill="#FBBF24" opacity="0.3" />
      </g>

      <!-- Word card 2 -->
      <rect x="146" y="265" width="106" height="95" rx="14" fill="#22C55E" />
      <text x="162" y="290" font-size="16" font-weight="bold" fill="white">happy</text>
      <text x="162" y="305" font-size="9" fill="white" opacity="0.7">adj. 快乐的</text>
      <rect x="158" y="320" width="50" height="4" rx="2" fill="white" opacity="0.3" />
      <rect x="158" y="320" width="50" height="4" rx="2" fill="white" opacity="0.7" />
      <g transform="translate(194, 335)">
        <path d="M0 0 l3 5 5 1 -4 4 1 5 -5-2 -5 2 1-5 -4-4 5-1z" fill="#FBBF24" />
        <path d="M14 0 l3 5 5 1 -4 4 1 5 -5-2 -5 2 1-5 -4-4 5-1z" fill="#FBBF24" />
        <path d="M28 0 l3 5 5 1 -4 4 1 5 -5-2 -5 2 1-5 -4-4 5-1z" fill="#FBBF24" />
      </g>

      <!-- Rankings preview -->
      <text x="28" y="390" font-size="11" font-weight="bold" fill="#1E1B4B">排行榜 🏆</text>
      <rect x="28" y="400" width="224" height="36" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
      <circle cx="50" cy="418" r="11" fill="#F59E0B" />
      <text x="50" y="422" text-anchor="middle" font-size="9" font-weight="bold" fill="white">1</text>
      <text x="68" y="415" font-size="10" font-weight="600" fill="#1E1B4B">张小明</text>
      <text x="68" y="427" font-size="8" fill="#64748B">2,580 乐贝</text>
      <rect x="180" y="410" width="56" height="18" rx="9" fill="#FEF3C7" />
      <text x="208" y="423" text-anchor="middle" font-size="8" font-weight="600" fill="#D97706">冠军 👑</text>

      <rect x="28" y="442" width="224" height="36" rx="10" fill="#EEF2FF" stroke="#C7D2FE" stroke-width="1" />
      <circle cx="50" cy="460" r="11" fill="#4F46E5" />
      <text x="50" y="464" text-anchor="middle" font-size="9" font-weight="bold" fill="white">3</text>
      <text x="68" y="457" font-size="10" font-weight="600" fill="#1E1B4B">我</text>
      <text x="68" y="469" font-size="8" fill="#64748B">2,340 乐贝</text>
      <rect x="180" y="452" width="56" height="18" rx="9" fill="#EEF2FF" />
      <text x="208" y="465" text-anchor="middle" font-size="8" font-weight="600" fill="#4F46E5">努力中</text>
    </g>
  </svg>
</template>