|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="login-page">
|
|
|
- <!-- 左侧品牌展示区 — 浠艾福品牌故事 + 五维能量 -->
|
|
|
+ <!-- 左侧品牌展示区 — 五维能量轮盘 -->
|
|
|
<div class="brand-panel">
|
|
|
<div class="brand-content">
|
|
|
|
|
|
@@ -13,6 +13,77 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- ===== 五维能量轮盘 ===== -->
|
|
|
+ <div class="orbit-section">
|
|
|
+ <div class="orbit-container">
|
|
|
+ <!-- 中心"家"徽章 -->
|
|
|
+ <div class="orbit-center-node">
|
|
|
+ <span class="center-text">家</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 轨道装饰 SVG -->
|
|
|
+ <svg class="orbit-ring-svg" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <!-- 外层装饰轨道 -->
|
|
|
+ <circle cx="150" cy="150" r="138" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
|
|
|
+ <circle cx="150" cy="150" r="134" fill="none" stroke="rgba(255,215,0,0.08)" stroke-width="0.5" stroke-dasharray="2,4" class="orbital-dash" />
|
|
|
+
|
|
|
+ <!-- 相生弧线 -->
|
|
|
+ <defs>
|
|
|
+ <marker id="orbitArrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
|
+ <polygon points="0,0 10,3.5 0,7" fill="#FFD700" opacity="0.6"/>
|
|
|
+ </marker>
|
|
|
+ </defs>
|
|
|
+ <path d="M 150,22 A 128,128 0 0,1 271,83" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.5" class="arc-gen" marker-end="url(#orbitArrow)" />
|
|
|
+ <path d="M 271,83 A 128,128 0 0,1 226,260" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.5" class="arc-gen" marker-end="url(#orbitArrow)" />
|
|
|
+ <path d="M 226,260 A 128,128 0 0,1 74,260" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.5" class="arc-gen" marker-end="url(#orbitArrow)" />
|
|
|
+ <path d="M 74,260 A 128,128 0 0,1 29,83" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.5" class="arc-gen" marker-end="url(#orbitArrow)" />
|
|
|
+ <path d="M 29,83 A 128,128 0 0,1 150,22" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.5" class="arc-gen" marker-end="url(#orbitArrow)" />
|
|
|
+
|
|
|
+ <!-- 轨道粒子 -->
|
|
|
+ <circle cx="150" cy="12" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
|
|
|
+ <circle cx="278" cy="80" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
|
|
|
+ <circle cx="232" cy="265" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
|
|
|
+ <circle cx="68" cy="265" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
|
|
|
+ <circle cx="22" cy="80" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ <!-- 五维节点 (CSS 公转，72°等分) -->
|
|
|
+ <!-- 身(橙) 0° -->
|
|
|
+ <div class="orbit-node" style="--node-color:#FF8C42; --orbit-angle:0deg; --orbit-delay:0s;">
|
|
|
+ <span class="node-icon">🌏</span>
|
|
|
+ <span class="node-label">身</span>
|
|
|
+ </div>
|
|
|
+ <!-- 智(紫) 72° -->
|
|
|
+ <div class="orbit-node" style="--node-color:#6366F1; --orbit-angle:72deg; --orbit-delay:-3s;">
|
|
|
+ <span class="node-icon">⚔️</span>
|
|
|
+ <span class="node-label">智</span>
|
|
|
+ </div>
|
|
|
+ <!-- 富(金) 144° -->
|
|
|
+ <div class="orbit-node" style="--node-color:#F59E0B; --orbit-angle:144deg; --orbit-delay:-6s;">
|
|
|
+ <span class="node-icon">💧</span>
|
|
|
+ <span class="node-label">富</span>
|
|
|
+ </div>
|
|
|
+ <!-- 行(绿) 216° -->
|
|
|
+ <div class="orbit-node" style="--node-color:#10B981; --orbit-angle:216deg; --orbit-delay:-9s;">
|
|
|
+ <span class="node-icon">🌿</span>
|
|
|
+ <span class="node-label">行</span>
|
|
|
+ </div>
|
|
|
+ <!-- 心(粉) 288° -->
|
|
|
+ <div class="orbit-node" style="--node-color:#FF6B9D; --orbit-angle:288deg; --orbit-delay:-12s;">
|
|
|
+ <span class="node-icon">🔥</span>
|
|
|
+ <span class="node-label">心</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图例 -->
|
|
|
+ <div class="orbit-legend">
|
|
|
+ <span class="legend-item">
|
|
|
+ <svg width="20" height="6" viewBox="0 0 20 6"><line x1="0" y1="3" x2="14" y2="3" stroke="#FFD700" stroke-width="1.5"/><polygon points="14,3 18,1 18,5" fill="#FFD700"/></svg>
|
|
|
+ <span>相生</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- ===== 核心主张 ===== -->
|
|
|
<div class="brand-mission">
|
|
|
<h1 class="mission-title">给全家的<span class="highlight">一站式幸福提案</span></h1>
|
|
|
@@ -21,175 +92,6 @@
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
- <!-- ===== 五维能量沙盘 ===== -->
|
|
|
- <div class="sand-table-wrap">
|
|
|
- <svg class="sand-table-svg" viewBox="0 0 340 370" xmlns="http://www.w3.org/2000/svg">
|
|
|
- <defs>
|
|
|
- <!-- 相生箭头 -->
|
|
|
- <marker id="arrowGen" markerWidth="52" markerHeight="10" refX="48" refY="5" orient="auto" markerUnits="userSpaceOnUse">
|
|
|
- <polygon points="7,5 0,0 0,10" fill="#FFE066" />
|
|
|
- </marker>
|
|
|
- <!-- 相克箭头 -->
|
|
|
- <marker id="arrowOve" markerWidth="45" markerHeight="12" refX="41" refY="6" orient="auto" markerUnits="userSpaceOnUse">
|
|
|
- <polygon points="7,6 0,0 0,12" fill="#FF8A80" />
|
|
|
- </marker>
|
|
|
-
|
|
|
- <!-- 节点径向渐变 -->
|
|
|
- <radialGradient id="gradEarth" cx="40%" cy="35%" r="60%">
|
|
|
- <stop offset="0%" stop-color="#D4B896" />
|
|
|
- <stop offset="100%" stop-color="#9A7B4F" />
|
|
|
- </radialGradient>
|
|
|
- <radialGradient id="gradMetal" cx="40%" cy="35%" r="60%">
|
|
|
- <stop offset="0%" stop-color="#F0DA70" />
|
|
|
- <stop offset="100%" stop-color="#D4A843" />
|
|
|
- </radialGradient>
|
|
|
- <radialGradient id="gradWater" cx="40%" cy="35%" r="60%">
|
|
|
- <stop offset="0%" stop-color="#8FC5E8" />
|
|
|
- <stop offset="100%" stop-color="#5B9BD5" />
|
|
|
- </radialGradient>
|
|
|
- <radialGradient id="gradWood" cx="40%" cy="35%" r="60%">
|
|
|
- <stop offset="0%" stop-color="#81C784" />
|
|
|
- <stop offset="100%" stop-color="#4CAF50" />
|
|
|
- </radialGradient>
|
|
|
- <radialGradient id="gradFire" cx="40%" cy="35%" r="60%">
|
|
|
- <stop offset="0%" stop-color="#FFAB91" />
|
|
|
- <stop offset="100%" stop-color="#F08A7A" />
|
|
|
- </radialGradient>
|
|
|
-
|
|
|
- <!-- 外环渐变轨道 -->
|
|
|
- <linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
|
- <stop offset="0%" stop-color="#FFD700" stop-opacity="0.25" />
|
|
|
- <stop offset="25%" stop-color="#FFE066" stop-opacity="0.15" />
|
|
|
- <stop offset="50%" stop-color="#FFD700" stop-opacity="0.08" />
|
|
|
- <stop offset="75%" stop-color="#FFE066" stop-opacity="0.15" />
|
|
|
- <stop offset="100%" stop-color="#FFD700" stop-opacity="0.25" />
|
|
|
- </linearGradient>
|
|
|
-
|
|
|
- <!-- 发光滤镜 -->
|
|
|
- <filter id="glowStrong">
|
|
|
- <feGaussianBlur stdDeviation="4" result="blur"/>
|
|
|
- <feMerge>
|
|
|
- <feMergeNode in="blur"/>
|
|
|
- <feMergeNode in="blur"/>
|
|
|
- <feMergeNode in="SourceGraphic"/>
|
|
|
- </feMerge>
|
|
|
- </filter>
|
|
|
- <filter id="glowNode">
|
|
|
- <feGaussianBlur stdDeviation="2.5" result="blur"/>
|
|
|
- <feMerge>
|
|
|
- <feMergeNode in="blur"/>
|
|
|
- <feMergeNode in="blur"/>
|
|
|
- <feMergeNode in="SourceGraphic"/>
|
|
|
- </feMerge>
|
|
|
- </filter>
|
|
|
- </defs>
|
|
|
-
|
|
|
- <!-- 背景光晕 -->
|
|
|
- <circle cx="170" cy="190" r="140" fill="url(#ringGrad)" />
|
|
|
-
|
|
|
- <!-- 外层装饰轨道 -->
|
|
|
- <circle cx="170" cy="190" r="132" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
|
|
|
- <circle cx="170" cy="190" r="129" fill="none" stroke="rgba(255,215,0,0.10)" stroke-width="0.5" stroke-dasharray="2,4" class="orbital-ring" />
|
|
|
-
|
|
|
- <!-- 轨道粒子 -->
|
|
|
- <circle cx="170" cy="58" r="2" fill="#FFE066" opacity="0.5" class="particle" />
|
|
|
- <circle cx="271" cy="133" r="2" fill="#FFE066" opacity="0.5" class="particle" />
|
|
|
- <circle cx="240" cy="280" r="2" fill="#FFE066" opacity="0.5" class="particle" />
|
|
|
- <circle cx="100" cy="280" r="2" fill="#FFE066" opacity="0.5" class="particle" />
|
|
|
- <circle cx="69" cy="133" r="2" fill="#FFE066" opacity="0.5" class="particle" />
|
|
|
-
|
|
|
- <!-- 相生环 -->
|
|
|
- <path d="M 170,85 A 105,105 0 0,1 270,158" fill="none" stroke="#FFD700" stroke-width="2.5" stroke-opacity="0.8" class="arc-gen" marker-end="url(#arrowGen)" />
|
|
|
- <path d="M 270,158 A 105,105 0 0,1 232,275" fill="none" stroke="#FFD700" stroke-width="2.5" stroke-opacity="0.8" class="arc-gen" marker-end="url(#arrowGen)" />
|
|
|
- <path d="M 232,275 A 105,105 0 0,1 108,275" fill="none" stroke="#FFD700" stroke-width="2.5" stroke-opacity="0.8" class="arc-gen" marker-end="url(#arrowGen)" />
|
|
|
- <path d="M 108,275 A 105,105 0 0,1 70,158" fill="none" stroke="#FFD700" stroke-width="2.5" stroke-opacity="0.8" class="arc-gen" marker-end="url(#arrowGen)" />
|
|
|
- <path d="M 70,158 A 105,105 0 0,1 170,85" fill="none" stroke="#FFD700" stroke-width="2.5" stroke-opacity="0.8" class="arc-gen" marker-end="url(#arrowGen)" />
|
|
|
-
|
|
|
- <!-- 相克线 -->
|
|
|
- <line x1="108" y1="275" x2="170" y2="85" stroke="#FF8A80" stroke-width="1.5" stroke-dasharray="6,6" stroke-opacity="0.45" class="line-ove-quiet" marker-end="url(#arrowOve)" />
|
|
|
- <line x1="170" y1="85" x2="232" y2="275" stroke="#FF8A80" stroke-width="2" stroke-dasharray="6,6" class="line-ove" marker-end="url(#arrowOve)" />
|
|
|
- <line x1="232" y1="275" x2="70" y2="158" stroke="#FF8A80" stroke-width="2" stroke-dasharray="6,6" class="line-ove" marker-end="url(#arrowOve)" />
|
|
|
- <line x1="70" y1="158" x2="270" y2="158" stroke="#FF8A80" stroke-width="2" stroke-dasharray="6,6" class="line-ove" marker-end="url(#arrowOve)" />
|
|
|
- <line x1="270" y1="158" x2="108" y2="275" stroke="#FF8A80" stroke-width="2" stroke-dasharray="6,6" class="line-ove" marker-end="url(#arrowOve)" />
|
|
|
-
|
|
|
- <!-- 五维节点 -->
|
|
|
- <!-- 身(土) -->
|
|
|
- <g class="node-group">
|
|
|
- <circle cx="170" cy="85" r="34" fill="url(#gradEarth)" stroke="rgba(212,184,150,0.5)" stroke-width="2" filter="url(#glowNode)" />
|
|
|
- <circle cx="170" cy="85" r="30" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
|
|
|
- <text x="170" y="79" text-anchor="middle" fill="#fff" font-size="18">🌏</text>
|
|
|
- <text x="170" y="100" text-anchor="middle" fill="#fff" font-size="15" font-weight="600">身</text>
|
|
|
- <text x="170" y="114" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="9">土</text>
|
|
|
- </g>
|
|
|
- <!-- 智(金) -->
|
|
|
- <g class="node-group">
|
|
|
- <circle cx="270" cy="158" r="34" fill="url(#gradMetal)" stroke="rgba(240,218,112,0.5)" stroke-width="2" filter="url(#glowNode)" />
|
|
|
- <circle cx="270" cy="158" r="30" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
|
|
|
- <text x="270" y="152" text-anchor="middle" fill="#fff" font-size="18">⚔️</text>
|
|
|
- <text x="270" y="173" text-anchor="middle" fill="#fff" font-size="15" font-weight="600">智</text>
|
|
|
- <text x="270" y="187" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="9">金</text>
|
|
|
- </g>
|
|
|
- <!-- 富(水) -->
|
|
|
- <g class="node-group">
|
|
|
- <circle cx="232" cy="275" r="34" fill="url(#gradWater)" stroke="rgba(143,197,232,0.5)" stroke-width="2" filter="url(#glowNode)" />
|
|
|
- <circle cx="232" cy="275" r="30" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
|
|
|
- <text x="232" y="269" text-anchor="middle" fill="#fff" font-size="18">💧</text>
|
|
|
- <text x="232" y="290" text-anchor="middle" fill="#fff" font-size="15" font-weight="600">富</text>
|
|
|
- <text x="232" y="304" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="9">水</text>
|
|
|
- </g>
|
|
|
- <!-- 行(木) -->
|
|
|
- <g class="node-group">
|
|
|
- <circle cx="108" cy="275" r="34" fill="url(#gradWood)" stroke="rgba(129,199,132,0.5)" stroke-width="2" filter="url(#glowNode)" />
|
|
|
- <circle cx="108" cy="275" r="30" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
|
|
|
- <text x="108" y="269" text-anchor="middle" fill="#fff" font-size="18">🌿</text>
|
|
|
- <text x="108" y="290" text-anchor="middle" fill="#fff" font-size="15" font-weight="600">行</text>
|
|
|
- <text x="108" y="304" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="9">木</text>
|
|
|
- </g>
|
|
|
- <!-- 心(火) -->
|
|
|
- <g class="node-group">
|
|
|
- <circle cx="70" cy="158" r="34" fill="url(#gradFire)" stroke="rgba(255,171,145,0.5)" stroke-width="2" filter="url(#glowNode)" />
|
|
|
- <circle cx="70" cy="158" r="30" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
|
|
|
- <text x="70" y="152" text-anchor="middle" fill="#fff" font-size="18">🔥</text>
|
|
|
- <text x="70" y="173" text-anchor="middle" fill="#fff" font-size="15" font-weight="600">心</text>
|
|
|
- <text x="70" y="187" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="9">火</text>
|
|
|
- </g>
|
|
|
-
|
|
|
- <!-- 中心文字 -->
|
|
|
- <text x="170" y="188" text-anchor="middle" fill="rgba(255,255,255,0.07)" font-size="13" letter-spacing="5">五行 · 相生相克</text>
|
|
|
-
|
|
|
- <!-- 图例 -->
|
|
|
- <g transform="translate(170, 345)">
|
|
|
- <line x1="-50" y1="0" x2="-22" y2="0" stroke="#FFD700" stroke-width="2" />
|
|
|
- <polygon points="-22,0 -17,-3 -17,3" fill="#FFD700" />
|
|
|
- <text x="-8" y="4" text-anchor="start" fill="rgba(255,255,255,0.5)" font-size="9">相生</text>
|
|
|
- <line x1="44" y1="0" x2="72" y2="0" stroke="#FF8A80" stroke-width="1.5" stroke-dasharray="4,3" />
|
|
|
- <polygon points="72,0 77,-3 77,3" fill="#FF8A80" />
|
|
|
- <text x="80" y="4" text-anchor="start" fill="rgba(255,255,255,0.5)" font-size="9">相克</text>
|
|
|
- </g>
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- ===== 品牌价值 ===== -->
|
|
|
- <div class="brand-values">
|
|
|
- <div class="value-item">
|
|
|
- <span class="value-icon">🌏</span>
|
|
|
- <span class="value-label">身</span>
|
|
|
- <span class="value-arrow">→</span>
|
|
|
- <span class="value-icon">⚔️</span>
|
|
|
- <span class="value-label">智</span>
|
|
|
- <span class="value-arrow">→</span>
|
|
|
- <span class="value-icon">💧</span>
|
|
|
- <span class="value-label">富</span>
|
|
|
- <span class="value-arrow">→</span>
|
|
|
- <span class="value-icon">🌿</span>
|
|
|
- <span class="value-label">行</span>
|
|
|
- <span class="value-arrow">→</span>
|
|
|
- <span class="value-icon">🔥</span>
|
|
|
- <span class="value-label">心</span>
|
|
|
- </div>
|
|
|
- <p class="value-subtitle">相生相克 · 动态平衡 · 全家成长</p>
|
|
|
- </div>
|
|
|
-
|
|
|
<!-- ===== 数据 + 角色标签 ===== -->
|
|
|
<div class="brand-footer">
|
|
|
<div class="stats-row">
|
|
|
@@ -209,9 +111,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="role-tags">
|
|
|
- <span class="role-tag" style="border-color:#5B9BD5;color:#8FC5E8">家庭客户</span>
|
|
|
- <span class="role-tag" style="border-color:#F08A7A;color:#FFAB91">服务商</span>
|
|
|
- <span class="role-tag" style="border-color:#4CAF50;color:#81C784">平台运营</span>
|
|
|
+ <span class="role-tag" style="border-color:#6366F1;color:#818CF8">家庭客户</span>
|
|
|
+ <span class="role-tag" style="border-color:#FF6B9D;color:#FF8CB3">服务商</span>
|
|
|
+ <span class="role-tag" style="border-color:#10B981;color:#34D399">平台运营</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -394,8 +296,8 @@ export default {
|
|
|
<style scoped>
|
|
|
/* ============================================================
|
|
|
登录页面 — 亿图腾 · 浠艾福 (Care Family)
|
|
|
- 品牌色: #4A9BD7 · #F59E0B
|
|
|
- 设计灵感: 企业官网 web/ 品牌体系
|
|
|
+ 五维能量轮盘设计 · 2026-07-02 重新设计
|
|
|
+ 品牌色: 身#FF8C42 / 智#6366F1 / 富#F59E0B / 行#10B981 / 心#FF6B9D
|
|
|
============================================================ */
|
|
|
|
|
|
.login-page {
|
|
|
@@ -407,7 +309,7 @@ export default {
|
|
|
'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
|
|
|
}
|
|
|
|
|
|
-/* ==================== 左侧品牌区 ==================== */
|
|
|
+/* ==================== 左侧品牌区 — 暖棕渐变 ==================== */
|
|
|
.brand-panel {
|
|
|
flex: 0 0 55%;
|
|
|
position: relative;
|
|
|
@@ -415,23 +317,22 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background: linear-gradient(160deg,
|
|
|
- #0A1F3A 0%,
|
|
|
- #0F2F55 20%,
|
|
|
- #1A4D7A 45%,
|
|
|
- #2E6FA0 70%,
|
|
|
- #4A9BD7 100%);
|
|
|
+ #1A0F00 0%,
|
|
|
+ #2D1810 30%,
|
|
|
+ #3D2B1F 60%,
|
|
|
+ #4A3020 100%);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-/* 背景纹理 — 抽象山水波纹 */
|
|
|
+/* 背景纹理 — 暖金粒子光晕 */
|
|
|
.brand-panel::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
|
background:
|
|
|
- radial-gradient(ellipse 120% 50% at 10% 20%, rgba(255, 215, 0, 0.03) 0%, transparent 70%),
|
|
|
- radial-gradient(ellipse 80% 40% at 90% 80%, rgba(74, 155, 215, 0.06) 0%, transparent 70%),
|
|
|
- radial-gradient(circle 60% 60% at 50% 100%, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
|
|
|
+ radial-gradient(ellipse 100% 40% at 50% 30%, rgba(255, 215, 0, 0.04) 0%, transparent 70%),
|
|
|
+ radial-gradient(ellipse 80% 60% at 80% 80%, rgba(255, 140, 66, 0.05) 0%, transparent 70%),
|
|
|
+ radial-gradient(circle 50% 50% at 20% 80%, rgba(99, 102, 241, 0.03) 0%, transparent 60%);
|
|
|
pointer-events: none;
|
|
|
z-index: 0;
|
|
|
}
|
|
|
@@ -443,9 +344,9 @@ export default {
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- max-width: 520px;
|
|
|
+ max-width: 480px;
|
|
|
width: 100%;
|
|
|
- padding: 24px 40px;
|
|
|
+ padding: 32px 36px;
|
|
|
color: #fff;
|
|
|
min-height: 100vh;
|
|
|
box-sizing: border-box;
|
|
|
@@ -457,7 +358,7 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 14px;
|
|
|
- margin-bottom: 12px;
|
|
|
+ margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
.logo-img {
|
|
|
@@ -474,11 +375,11 @@ export default {
|
|
|
}
|
|
|
|
|
|
.brand-cn {
|
|
|
- font-size: 22px;
|
|
|
+ font-size: 24px;
|
|
|
font-weight: 700;
|
|
|
- letter-spacing: 3px;
|
|
|
+ letter-spacing: 4px;
|
|
|
line-height: 1.3;
|
|
|
- background: linear-gradient(135deg, #FFE066 0%, #FFD700 50%, #FFE066 100%);
|
|
|
+ background: linear-gradient(135deg, #FFE066 0%, #F59E0B 50%, #FFE066 100%);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
background-clip: text;
|
|
|
@@ -497,156 +398,196 @@ export default {
|
|
|
text-transform: uppercase;
|
|
|
}
|
|
|
|
|
|
-/* -------- 核心主张 -------- */
|
|
|
-.brand-mission {
|
|
|
- flex-shrink: 0;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.mission-title {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 700;
|
|
|
- letter-spacing: 2px;
|
|
|
- margin: 0 0 4px;
|
|
|
- line-height: 1.4;
|
|
|
-}
|
|
|
-
|
|
|
-.mission-title .highlight {
|
|
|
- background: linear-gradient(135deg, #FFE066, #F59E0B);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- background-clip: text;
|
|
|
-}
|
|
|
-
|
|
|
-.mission-desc {
|
|
|
- font-size: 13px;
|
|
|
- opacity: 0.55;
|
|
|
- letter-spacing: 1px;
|
|
|
- margin: 0;
|
|
|
- font-weight: 300;
|
|
|
-}
|
|
|
-
|
|
|
-/* -------- 五维能量沙盘 -------- */
|
|
|
-.sand-table-wrap {
|
|
|
+/* -------- 五维能量轮盘 ==================== */
|
|
|
+.orbit-section {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 100%;
|
|
|
min-height: 0;
|
|
|
- margin: -8px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.sand-table-svg {
|
|
|
- width: 100%;
|
|
|
- max-width: 320px;
|
|
|
- height: auto;
|
|
|
- display: block;
|
|
|
+ margin: -6px 0;
|
|
|
}
|
|
|
|
|
|
-/* 相生环流动 */
|
|
|
-.sand-table-svg .arc-gen {
|
|
|
- stroke-dasharray: 10 8;
|
|
|
- animation: flowArc 1.2s linear infinite;
|
|
|
-}
|
|
|
-.sand-table-svg .arc-gen:nth-child(4) { animation-delay: 0.00s; }
|
|
|
-.sand-table-svg .arc-gen:nth-child(5) { animation-delay: 0.24s; }
|
|
|
-.sand-table-svg .arc-gen:nth-child(6) { animation-delay: 0.48s; }
|
|
|
-.sand-table-svg .arc-gen:nth-child(7) { animation-delay: 0.72s; }
|
|
|
-.sand-table-svg .arc-gen:nth-child(8) { animation-delay: 0.96s; }
|
|
|
-
|
|
|
-@keyframes flowArc {
|
|
|
- 0% { stroke-dashoffset: 0; }
|
|
|
- 100% { stroke-dashoffset: -18; }
|
|
|
+.orbit-container {
|
|
|
+ position: relative;
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
-/* 相克线脉冲 */
|
|
|
-.sand-table-svg .line-ove {
|
|
|
- animation: pulseLine 2.2s ease-in-out infinite;
|
|
|
+/* 轨道 SVG */
|
|
|
+.orbit-ring-svg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ overflow: visible;
|
|
|
}
|
|
|
-.sand-table-svg .line-ove:nth-child(10) { animation-delay: 0.00s; }
|
|
|
-.sand-table-svg .line-ove:nth-child(11) { animation-delay: 0.44s; }
|
|
|
-.sand-table-svg .line-ove:nth-child(12) { animation-delay: 0.88s; }
|
|
|
-.sand-table-svg .line-ove:nth-child(13) { animation-delay: 1.32s; }
|
|
|
|
|
|
-@keyframes pulseLine {
|
|
|
- 0%, 100% { stroke-opacity: 0.35; stroke-width: 1.5; }
|
|
|
- 50% { stroke-opacity: 0.75; stroke-width: 2.5; }
|
|
|
+/* 虚线轨道旋转 */
|
|
|
+.orbital-dash {
|
|
|
+ animation: rotateDash 20s linear infinite;
|
|
|
+ transform-origin: 150px 150px;
|
|
|
}
|
|
|
|
|
|
-.sand-table-svg .line-ove-quiet {
|
|
|
- stroke-opacity: 0.35;
|
|
|
+@keyframes rotateDash {
|
|
|
+ 0% { transform: rotate(0deg); }
|
|
|
+ 100% { transform: rotate(360deg); }
|
|
|
}
|
|
|
|
|
|
-/* 节点呼吸 */
|
|
|
-.sand-table-svg .node-group {
|
|
|
- animation: nodeBreathe 3.2s ease-in-out infinite;
|
|
|
+/* 相生弧线流光 */
|
|
|
+.arc-gen {
|
|
|
+ stroke-dasharray: 8 6;
|
|
|
+ animation: flowArc 1.2s linear infinite;
|
|
|
}
|
|
|
-.sand-table-svg .node-group:nth-child(14) { animation-delay: 0.0s; }
|
|
|
-.sand-table-svg .node-group:nth-child(15) { animation-delay: 0.64s; }
|
|
|
-.sand-table-svg .node-group:nth-child(16) { animation-delay: 1.28s; }
|
|
|
-.sand-table-svg .node-group:nth-child(17) { animation-delay: 1.92s; }
|
|
|
-.sand-table-svg .node-group:nth-child(18) { animation-delay: 2.56s; }
|
|
|
|
|
|
-@keyframes nodeBreathe {
|
|
|
- 0%, 100% { opacity: 0.85; transform: scale(1); }
|
|
|
- 50% { opacity: 1; transform: scale(1.03); }
|
|
|
+@keyframes flowArc {
|
|
|
+ 0% { stroke-dashoffset: 0; }
|
|
|
+ 100% { stroke-dashoffset: -14; }
|
|
|
}
|
|
|
|
|
|
/* 轨道粒子公转 */
|
|
|
-.sand-table-svg .particle {
|
|
|
+.orbit-particle {
|
|
|
animation: orbitParticle 8s linear infinite;
|
|
|
- transform-origin: 170px 190px;
|
|
|
+ transform-origin: 150px 150px;
|
|
|
}
|
|
|
-.sand-table-svg .particle:nth-child(3) { animation-delay: 0.0s; }
|
|
|
|
|
|
@keyframes orbitParticle {
|
|
|
- 0% { opacity: 0; transform: rotate(0deg) translateX(132px) rotate(0deg); }
|
|
|
+ 0% { opacity: 0; transform: rotate(0deg) translateX(138px) rotate(0deg); }
|
|
|
12% { opacity: 0.6; }
|
|
|
88% { opacity: 0.6; }
|
|
|
- 100% { opacity: 0; transform: rotate(360deg) translateX(132px) rotate(-360deg); }
|
|
|
+ 100% { opacity: 0; transform: rotate(360deg) translateX(138px) rotate(-360deg); }
|
|
|
}
|
|
|
|
|
|
-/* -------- 品牌价值 -------- */
|
|
|
-.brand-values {
|
|
|
- flex-shrink: 0;
|
|
|
- text-align: center;
|
|
|
- margin: 2px 0 8px;
|
|
|
+/* 中心节点 — 金色"家"徽章 */
|
|
|
+.orbit-center-node {
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ width: 72px;
|
|
|
+ height: 72px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(135deg, #FFD700, #F59E0B);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow:
|
|
|
+ 0 0 20px rgba(245, 158, 11, 0.3),
|
|
|
+ 0 0 60px rgba(245, 158, 11, 0.1);
|
|
|
+ animation: pulseCenter 3s ease-in-out infinite;
|
|
|
}
|
|
|
|
|
|
-.value-item {
|
|
|
- display: inline-flex;
|
|
|
+.center-text {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ text-shadow: 0 1px 4px rgba(0,0,0,0.15);
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes pulseCenter {
|
|
|
+ 0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), 0 0 60px rgba(245, 158, 11, 0.1); transform: scale(1); }
|
|
|
+ 50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.5), 0 0 80px rgba(245, 158, 11, 0.2); transform: scale(1.05); }
|
|
|
+}
|
|
|
+
|
|
|
+/* 五维节点公转 */
|
|
|
+.orbit-node {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ width: 52px;
|
|
|
+ height: 52px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: var(--node-color);
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.2);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- gap: 2px;
|
|
|
- flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
+ box-shadow: 0 0 12px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.15);
|
|
|
+ animation: orbitRotate 15s linear infinite;
|
|
|
+ animation-delay: var(--orbit-delay);
|
|
|
+ left: calc(50% - 26px);
|
|
|
+ top: calc(50% - 26px);
|
|
|
+ transform-origin: center;
|
|
|
}
|
|
|
|
|
|
-.value-icon {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 1;
|
|
|
+/* 轨道公转: 绕中心公转 125px 半径 */
|
|
|
+@keyframes orbitRotate {
|
|
|
+ 0% { transform: rotate(var(--orbit-angle)) translateX(125px) rotate(calc(-1 * var(--orbit-angle))); }
|
|
|
+ 100% { transform: rotate(calc(var(--orbit-angle) + 360deg)) translateX(125px) rotate(calc(-1 * var(--orbit-angle) - 360deg)); }
|
|
|
}
|
|
|
|
|
|
-.value-label {
|
|
|
+.node-icon {
|
|
|
font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- letter-spacing: 1px;
|
|
|
line-height: 1;
|
|
|
+ margin-bottom: 1px;
|
|
|
}
|
|
|
|
|
|
-.value-arrow {
|
|
|
+.node-label {
|
|
|
font-size: 11px;
|
|
|
- opacity: 0.3;
|
|
|
- margin: 0 6px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
line-height: 1;
|
|
|
+ text-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
|
}
|
|
|
|
|
|
-.value-subtitle {
|
|
|
- font-size: 11px;
|
|
|
+/* 图例 */
|
|
|
+.orbit-legend {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ font-size: 9px;
|
|
|
opacity: 0.4;
|
|
|
- letter-spacing: 3px;
|
|
|
- margin: 4px 0 0;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.legend-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.legend-item svg {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+/* -------- 核心主张 -------- */
|
|
|
+.brand-mission {
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.mission-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ margin: 0 0 4px;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+
|
|
|
+.mission-title .highlight {
|
|
|
+ background: linear-gradient(135deg, #FF8C42, #F59E0B);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+}
|
|
|
+
|
|
|
+.mission-desc {
|
|
|
+ font-size: 13px;
|
|
|
+ opacity: 0.55;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ margin: 0;
|
|
|
font-weight: 300;
|
|
|
}
|
|
|
|
|
|
@@ -654,6 +595,7 @@ export default {
|
|
|
.brand-footer {
|
|
|
flex-shrink: 0;
|
|
|
width: 100%;
|
|
|
+ margin-top: 4px;
|
|
|
}
|
|
|
|
|
|
.stats-row {
|
|
|
@@ -661,18 +603,18 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 0;
|
|
|
- margin-bottom: 12px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.stat-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- padding: 0 14px;
|
|
|
+ padding: 0 16px;
|
|
|
}
|
|
|
|
|
|
.stat-num {
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 22px;
|
|
|
font-weight: 700;
|
|
|
background: linear-gradient(135deg, #FFE066, #F59E0B);
|
|
|
-webkit-background-clip: text;
|
|
|
@@ -691,7 +633,7 @@ export default {
|
|
|
.stat-divider {
|
|
|
width: 1px;
|
|
|
height: 28px;
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
+ background: rgba(255, 255, 255, 0.12);
|
|
|
}
|
|
|
|
|
|
.role-tags {
|
|
|
@@ -876,7 +818,7 @@ export default {
|
|
|
.form-panel {
|
|
|
flex: 1;
|
|
|
padding: 24px;
|
|
|
- background: linear-gradient(160deg, #0A1F3A, #1A4D7A);
|
|
|
+ background: linear-gradient(160deg, #1A0F00, #3D2B1F);
|
|
|
}
|
|
|
.form-card {
|
|
|
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
|
|
|
@@ -885,4 +827,4 @@ export default {
|
|
|
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
