abstract-logo-v4.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <h2>Logo V4 — "家是小国,国是大家"</h2>
  2. <p class="subtitle">传统中式屋顶线条,圆形圆满构图,家国一体</p>
  3. <div style="text-align:center;padding:20px;background:linear-gradient(135deg,#f0f4ff,#f5f0ff);border-radius:24px;">
  4. <svg width="240" height="260" viewBox="0 0 240 260" xmlns="http://www.w3.org/2000/svg">
  5. <defs>
  6. <linearGradient id="blueGrad" x1="0%" y1="0%" x2="100%" y2="100%">
  7. <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
  8. <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
  9. </linearGradient>
  10. <linearGradient id="redGrad" x1="0%" y1="0%" x2="100%" y2="100%">
  11. <stop offset="0%" style="stop-color:#FF6B6B;stop-opacity:1" />
  12. <stop offset="100%" style="stop-color:#FF4757;stop-opacity:1" />
  13. </linearGradient>
  14. <linearGradient id="redLight" x1="0%" y1="0%" x2="100%" y2="100%">
  15. <stop offset="0%" style="stop-color:#FF6B6B;stop-opacity:0.2" />
  16. <stop offset="100%" style="stop-color:#FF4757;stop-opacity:0.2" />
  17. </linearGradient>
  18. </defs>
  19. <!-- 外层圆形 — 象征天圆地方、家国一体、圆满和谐 -->
  20. <circle cx="120" cy="75" r="62"
  21. fill="none" stroke="url(#blueGrad)" stroke-width="1.5" opacity="0.2" stroke-dasharray="4,4"/>
  22. <!-- 中式屋顶 — 飞檐翘角,家与国的连接 -->
  23. <!-- 屋顶主体:传统中式弧线屋顶 -->
  24. <path d="M120 18 C80 25, 40 50, 30 65
  25. L30 68 C35 60, 55 50, 70 48
  26. C55 52, 40 58, 35 65
  27. L35 130 L205 130 L205 65
  28. C200 58, 185 52, 170 48
  29. C185 50, 205 60, 210 68
  30. L210 65 C200 50, 160 25, 120 18 Z"
  31. fill="none" stroke="url(#blueGrad)" stroke-width="3" stroke-linejoin="round"/>
  32. <!-- 屋顶下方横梁 — 家国根基 -->
  33. <line x1="30" y1="68" x2="210" y2="68" stroke="url(#blueGrad)" stroke-width="2.5" opacity="0.6"/>
  34. <!-- 房子主体轮廓(简洁) -->
  35. <rect x="35" y="68" width="170" height="62" rx="4"
  36. fill="none" stroke="url(#blueGrad)" stroke-width="3"/>
  37. <!-- 爱心 — 家国情怀的核心 -->
  38. <path d="M120 78 C110 68, 90 66, 82 76 C70 90, 82 102, 120 118"
  39. fill="none" stroke="url(#redGrad)" stroke-width="3" stroke-linecap="round"/>
  40. <path d="M120 78 C130 68, 150 66, 158 76 C170 90, 158 102, 120 118"
  41. fill="none" stroke="url(#redGrad)" stroke-width="3" stroke-linecap="round"/>
  42. <path d="M120 78 C110 68, 90 66, 82 76 C70 90, 82 102, 120 118 C158 102, 170 90, 158 76 C150 66, 130 68, 120 78 Z"
  43. fill="url(#redLight)"/>
  44. <!-- 幼苗 — 从爱心中生长,代表家庭的未来、国家的希望 -->
  45. <path d="M120 118 C120 108, 118 100, 115 95"
  46. fill="none" stroke="url(#blueGrad)" stroke-width="3" stroke-linecap="round"/>
  47. <path d="M115 95 C110 90, 108 92, 106 96"
  48. fill="none" stroke="url(#blueGrad)" stroke-width="2.5" stroke-linecap="round"/>
  49. <path d="M115 95 C118 88, 120 85, 118 80"
  50. fill="none" stroke="url(#blueGrad)" stroke-width="2" stroke-linecap="round"/>
  51. <!-- 三颗星 — 从左到右,代表家庭的阶段性成就,也呼应国旗的星 -->
  52. <circle cx="58" cy="82" r="4" fill="url(#redGrad)" opacity="0.7"/>
  53. <circle cx="52" cy="90" r="2.5" fill="url(#redGrad)" opacity="0.5"/>
  54. <circle cx="64" cy="89" r="2" fill="url(#redGrad)" opacity="0.4"/>
  55. <!-- 装饰点 — 艺术氛围 -->
  56. <circle cx="175" cy="55" r="2" fill="url(#blueGrad)" opacity="0.2"/>
  57. <circle cx="185" cy="75" r="1.5" fill="url(#blueGrad)" opacity="0.15"/>
  58. <circle cx="55" cy="110" r="1.5" fill="url(#blueGrad)" opacity="0.15"/>
  59. </svg>
  60. <div style="margin-top:16px;">
  61. <span style="font-size:32px;font-weight:bold;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:6px;">
  62. 知行益家
  63. </span>
  64. </div>
  65. <div style="color:#999;font-size:13px;margin-top:4px;letter-spacing:3px;">家是小国 · 国是大家</div>
  66. </div>
  67. <div style="margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px;">
  68. <div style="background:#f8f9ff;padding:16px;border-radius:12px;">
  69. <h4 style="margin:0 0 6px 0;color:#667eea;">中式飞檐屋顶</h4>
  70. <p style="margin:0;font-size:14px;color:#666;">传统中式建筑弧线,连接家庭与民族文化根脉</p>
  71. </div>
  72. <div style="background:#fff0f0;padding:16px;border-radius:12px;">
  73. <h4 style="margin:0 0 6px 0;color:#FF6B6B;">红色爱心</h4>
  74. <p style="margin:0;font-size:14px;color:#666;">家国情怀的核心,小家的爱汇聚成大家的情</p>
  75. </div>
  76. <div style="background:#f8f9ff;padding:16px;border-radius:12px;">
  77. <h4 style="margin:0 0 6px 0;color:#667eea;">爱心中的幼苗</h4>
  78. <p style="margin:0;font-size:14px;color:#666;">从爱心中生长出的新芽,代表孩子的成长也是国家的未来</p>
  79. </div>
  80. <div style="background:#fff0f0;padding:16px;border-radius:12px;">
  81. <h4 style="margin:0 0 6px 0;color:#FF6B6B;">三颗红星</h4>
  82. <p style="margin:0;font-size:14px;color:#666;">左侧三颗红星,既代表家庭阶段性成就,也呼应家国情怀</p>
  83. </div>
  84. </div>
  85. <div style="margin-top:24px;padding:16px;background:#fffbe6;border-radius:12px;border:1px solid #ffe58f;">
  86. <p style="font-size:14px;color:#b8860b;margin:0;"><strong>💡 理念解读:</strong></p>
  87. <p style="font-size:14px;color:#666;margin:8px 0 0 0;">
  88. 圆形外框 → 天圆地方,家国圆满<br>
  89. 中式飞檐 → 传统文化根脉,家与国的精神连接<br>
  90. 红心 + 幼苗 → 小家的爱孕育未来的希望<br>
  91. 三颗红星 → 家庭成就,也暗合家国情怀<br>
  92. 整体 → 家是最小国,国是千万家
  93. </p>
  94. </div>