cfc/cfc-web/src/views/Login.vue

<template>
  <div class="login-page">
    <!-- 左侧品牌展示区 — 五维能量轮盘 -->
    <div class="brand-panel">
      <div class="brand-content">

        <!-- ===== Logo + 品牌标识 ===== -->
        <div class="brand-header">
          <img src="logo.png" alt="浠艾福" class="logo-img" />
          <div class="brand-titles">
            <span class="brand-cn">亿图腾<span class="brand-dot">·</span>浠艾福</span>
            <span class="brand-en">Care Family</span>
          </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>
          <p class="mission-desc">
            AI 智慧家庭成长平台 · 五维能量驱动全家持续成长
          </p>
        </div>

        <!-- ===== 数据 + 角色标签 ===== -->
        <div class="brand-footer">
          <div class="stats-row">
            <div class="stat-item">
              <span class="stat-num">120,000+</span>
              <span class="stat-label">家庭信赖</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <span class="stat-num">1,000+</span>
              <span class="stat-label">专业人员</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <span class="stat-num">5</span>
              <span class="stat-label">幸福维度</span>
            </div>
          </div>
          <div class="role-tags">
            <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>

      </div>
    </div>

    <!-- 右侧登录表单区 -->
    <div class="form-panel">
      <div class="form-card">
        <div class="form-header">
          <div class="header-icon-wrap">
            <svg viewBox="0 0 32 32" fill="none" width="28" height="28" class="header-svg">
              <circle cx="16" cy="16" r="14" stroke="currentColor" stroke-width="1.8" fill="none" opacity="0.3"/>
              <circle cx="16" cy="12" r="4" stroke="currentColor" stroke-width="1.5" fill="none"/>
              <path d="M8 26c0-5 3-8 8-8s8 3 8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none"/>
            </svg>
          </div>
          <h2 class="form-title">管理后台</h2>
          <p class="form-desc">管理员 / 规划师登录</p>
        </div>

        <el-form
          :model="loginForm"
          :rules="rules"
          ref="loginForm"
          class="login-form"
          @submit.native.prevent="handleLogin"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="用户名 / 手机号"
              size="large"
              :disabled="loading"
            >
              <i slot="prefix" class="el-icon-user input-icon"></i>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="密码"
              size="large"
              :disabled="loading"
              show-password
            >
              <i slot="prefix" class="el-icon-lock input-icon"></i>
            </el-input>
          </el-form-item>

          <el-form-item prop="captcha" class="captcha-item">
            <SliderCaptcha
              ref="sliderCaptcha"
              @success="onCaptchaSuccess"
              @fail="onCaptchaFail"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="login-btn"
              @click="handleLogin"
              :loading="loading"
              :disabled="!captchaPassed"
            >
              {{ loading ? '登录中...' : '登 录' }}
            </el-button>
          </el-form-item>
        </el-form>

        <div class="form-footer">
          <span class="copyright">&copy; 2026 亿图腾（北京）科技有限公司</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { adminLogin } from '@/api/auth'
import SliderCaptcha from '@/components/SliderCaptcha'

export default {
  name: 'Login',
  components: { SliderCaptcha },
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, message: '用户名至少2个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, message: '密码至少4个字符', trigger: 'blur' }
        ]
      },
      loading: false,
      captchaPassed: false
    }
  },
  mounted() {
    // 测试环境自动跳过滑块验证码
    if (process.env.VUE_APP_SKIP_CAPTCHA === 'true') {
      this.$nextTick(() => {
        this.captchaPassed = true
        // 将 SliderCaptcha 设为已通过状态
        if (this.$refs.sliderCaptcha) {
          this.$refs.sliderCaptcha.status = 'success'
          this.$refs.sliderCaptcha.currentOffset = this.$refs.sliderCaptcha.trackWidth
        }
      })
    }
  },
  methods: {
    onCaptchaSuccess() {
      this.captchaPassed = true
    },
    onCaptchaFail() {
      this.captchaPassed = false
    },
    resetCaptcha() {
      if (this.$refs.sliderCaptcha) this.$refs.sliderCaptcha.reset()
      this.captchaPassed = false
    },
    handleLogin() {
      if (!this.captchaPassed) {
        this.$message.warning('请先完成滑动验证')
        return
      }
      if (this.loading) {
        return
      }
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return
        this.loading = true
        try {
          const res = await adminLogin({
            phone: this.loginForm.username,
            password: this.loginForm.password
          })
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('adminId', res.data.adminId)
          localStorage.setItem('adminName', res.data.realName)
          const role = res.data.role || 'admin'
          localStorage.setItem('role', role)
          const roles = res.data.roles || [role]
          localStorage.setItem('roles', JSON.stringify(roles))
          if (this.$message) {
            this.$message.success('登录成功')
          } else {
            console.log('登录成功')
          }
        await this.$nextTick()
        const redirectRole = role === 'teacher' ? '/teacher-dashboard' : '/'
        this.$router.replace({ path: redirectRole })
        } catch (e) {
          const msg = e && e.message ? e.message : '登录失败，请检查账号密码'
          if (this.$message) {
            this.$message.error(msg)
          } else {
            console.error(msg)
          }
          this.resetCaptcha()
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
/* ============================================================
   登录页面 — 亿图腾 · 浠艾福 (Care Family)
   五维能量轮盘设计 · 2026-07-02 重新设计
   品牌色: 身#FF8C42 / 智#6366F1 / 富#F59E0B / 行#10B981 / 心#FF6B9D
   ============================================================ */

.login-page {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

/* ==================== 左侧品牌区 — 暖棕渐变 ==================== */
.brand-panel {
  flex: 0 0 55%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg,
    #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 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;
}

.brand-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 480px;
  width: 100%;
  padding: 32px 36px;
  color: #fff;
  min-height: 100vh;
  box-sizing: border-box;
}

/* -------- Logo + 品牌 -------- */
.brand-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.logo-img {
  width: 40px;
  height: 40px;
  display: block;
  filter: brightness(1.1);
}

.brand-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-cn {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1.3;
  background: linear-gradient(135deg, #FFE066 0%, #F59E0B 50%, #FFE066 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-dot {
  margin: 0 2px;
  opacity: 0.6;
}

.brand-en {
  font-size: 11px;
  opacity: 0.5;
  letter-spacing: 3px;
  font-weight: 300;
  text-transform: uppercase;
}

/* -------- 五维能量轮盘 ==================== */
.orbit-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin: -6px 0;
}

.orbit-container {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 轨道 SVG */
.orbit-ring-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

/* 虚线轨道旋转 */
.orbital-dash {
  animation: rotateDash 20s linear infinite;
  transform-origin: 150px 150px;
}

@keyframes rotateDash {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 相生弧线流光 */
.arc-gen {
  stroke-dasharray: 8 6;
  animation: flowArc 1.2s linear infinite;
}

@keyframes flowArc {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -14; }
}

/* 轨道粒子公转 */
.orbit-particle {
  animation: orbitParticle 8s linear infinite;
  transform-origin: 150px 150px;
}

@keyframes orbitParticle {
  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(138px) rotate(-360deg); }
}

/* 中心节点 — 金色"家"徽章 */
.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;
}

.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;
  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;
}

/* 轨道公转: 绕中心公转 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)); }
}

.node-icon {
  font-size: 14px;
  line-height: 1;
  margin-bottom: 1px;
}

.node-label {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 图例 */
.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;
  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;
}

/* -------- 底部数据 + 角色 -------- */
.brand-footer {
  flex-shrink: 0;
  width: 100%;
  margin-top: 4px;
}

.stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 10px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
}

.stat-num {
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, #FFE066, #F59E0B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.stat-label {
  font-size: 10px;
  opacity: 0.5;
  letter-spacing: 1px;
  margin-top: 1px;
}

.stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
}

.role-tags {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.role-tag {
  display: inline-block;
  padding: 3px 14px;
  font-size: 11px;
  border: 1px solid;
  border-radius: 20px;
  opacity: 0.5;
  transition: opacity 0.3s;
  letter-spacing: 1px;
}

.role-tag:hover {
  opacity: 0.9;
}

/* ==================== 右侧表单区 ==================== */
.form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5FAFE;
  padding: 40px;
}

.form-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 20px;
  padding: 44px 40px 36px;
  box-shadow:
    0 4px 24px rgba(74, 155, 215, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s;
}

.form-card:hover {
  box-shadow:
    0 8px 40px rgba(74, 155, 215, 0.10),
    0 1px 4px rgba(0, 0, 0, 0.04);
}

.form-header {
  text-align: center;
  margin-bottom: 36px;
}

.header-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8F4FA 0%, #D6EAF8 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #3A7CC4;
}

.header-icon-wrap .header-svg {
  display: block;
}

.form-title {
  font-size: 22px;
  font-weight: 600;
  color: #1E293B;
  margin: 0 0 6px;
  letter-spacing: 2px;
}

.form-desc {
  font-size: 13px;
  color: #94A3B8;
  margin: 0;
  letter-spacing: 1px;
}

.login-form {
  margin-bottom: 4px;
}

.login-form >>> .el-input__inner {
  height: 44px;
  line-height: 44px;
  border-radius: 10px;
  border-color: #E2E8F0;
  background: #F8FAFC;
  transition: all 0.25s;
  font-size: 14px;
  padding-left: 42px;
  font-family: inherit;
}

.login-form >>> .el-input__inner:focus {
  border-color: #4A9BD7;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74, 155, 215, 0.10);
}

.login-form >>> .el-input__inner:hover {
  border-color: #8FC5E8;
}

.login-form >>> .el-input__prefix {
  left: 0;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-icon {
  font-size: 18px;
  color: #94A3B8;
  transition: color 0.25s;
}

.login-form >>> .el-input.is-focused .input-icon {
  color: #4A9BD7;
}

.login-form >>> .el-form-item {
  margin-bottom: 22px;
}

.captcha-item {
  margin-bottom: 18px !important;
}

.login-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 6px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4A9BD7, #3A7CC4);
  border: none;
  transition: all 0.3s;
  font-family: inherit;
}

.login-btn:hover {
  background: linear-gradient(135deg, #5BABE8, #4A86CE);
  box-shadow: 0 4px 16px rgba(74, 155, 215, 0.35);
  transform: translateY(-1px);
}

.login-btn:active {
  transform: translateY(0);
}

.login-btn.is-disabled {
  background: #C0C4CC !important;
  box-shadow: none !important;
}

.form-footer {
  text-align: center;
  margin-top: 8px;
}

.copyright {
  font-size: 12px;
  color: #B2BEC3;
  letter-spacing: 1px;
}

/* ==================== 响应式 ==================== */
@media screen and (max-width: 900px) {
  .brand-panel { display: none; }
  .form-panel {
    flex: 1;
    padding: 24px;
    background: linear-gradient(160deg, #1A0F00, #3D2B1F);
  }
  .form-card {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  }
  .form-card:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  }
}

@media screen and (max-width: 480px) {
  .form-panel {
    padding: 0;
    align-items: stretch;
  }
  .form-card {
    max-width: none;
    border-radius: 0;
    padding: 36px 24px 24px;
    box-shadow: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .form-card:hover {
    box-shadow: none;
  }
  .form-header {
    margin-bottom: 28px;
  }
}
</style>