antissoft / lvqianmeiye_ERP

<template>
  <div class="login-container">
    <!-- 液态玻璃背景 - 柔和的彩色光晕 -->
    <div class="liquid-bg">
      <div class="blob blob-1"></div>
      <div class="blob blob-2"></div>
      <div class="blob blob-3"></div>
    </div>

    <div class="login-wrapper">
      <!-- 左侧品牌区域 - Apple 深色风格 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="system-section">
            <h1 class="system-title">绿纤门店</h1>
            <p class="system-desc">美业 · 门店工作台</p>
          </div>
          <div class="core-feature">
            <div class="feature-highlight">
              <i class="el-icon-s-shop"></i>
              <span>高效运营 · 对接 ERP</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录表单 - Apple 简洁风格 -->
      <div class="form-section">
        <div class="login-form-wrapper">
          <div class="form-header">
            <h2>欢迎登录</h2>
            <p>请输入门店账号信息</p>
          </div>
          <el-form ref="form" :model="form" :rules="rules" class="login-form" @keyup.enter.native="handleLogin">
            <el-form-item prop="userName">
              <el-input
                v-model="form.userName"
                placeholder="用户名 / 手机号"
                prefix-icon="el-icon-user"
                size="large"
                autocomplete="username"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="form.password"
                type="password"
                placeholder="密码"
                prefix-icon="el-icon-lock"
                size="large"
                show-password
                autocomplete="current-password"
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              size="large"
              class="login-btn"
              @click.native.prevent="handleLogin"
            >
              {{ loading ? '登录中...' : '登 录' }}
            </el-button>
          </el-form>
          <div class="footer">
            <p>门店账号 · 对接绿纤 ERP 系统</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5'
import qs from 'qs'
import request from '@/utils/request'

export default {
  name: 'Login',
  data() {
    return {
      form: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    handleLogin() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.loading = true

        request({
          url: '/api/oauth/Login',
          method: 'post',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          data: qs.stringify({
            account: this.form.userName.trim(),
            password: md5(this.form.password),
            client_id: 'admin',
            client_secret: '123456',
            scope: 'all',
            grant_type: 'password'
          })
        }).then(res => {
          const token = res.data.token
          this.$store.commit('SET_TOKEN', token)

          return request({
            url: '/api/Extend/LqStoreAuth/MyProfile',
            method: 'GET'
          })
        }).then(res => {
          const profile = res.data
          if (!profile.isAllowed) {
            this.$store.commit('LOGOUT')
            this.$message.error('仅店长和店助可登录门店系统')
            this.loading = false
            return
          }
          this.$store.commit('SET_USER', {
            userId: profile.userId,
            userName: profile.userName,
            realName: profile.userName,
            account: profile.account,
            gw: profile.gw,
            mdid: profile.mdid,
            headIcon: profile.headIcon,
            mobilePhone: profile.mobilePhone
          })
          this.$store.commit('SET_STORE', {
            storeId: profile.mdid,
            storeName: profile.storeName
          })
          this.$message.success('登录成功')
          this.$router.push('/')
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* Apple 毛玻璃 + 液态玻璃风格 */
.login-container {
  min-height: 100vh;
  background: linear-gradient(165deg, #e8f4fd 0%, #f5f0ff 50%, #fff5eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  position: relative;
  overflow: hidden;
}

/* 液态玻璃背景 - 有机彩色光晕 */
.liquid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.6;
  animation: blobDrift 25s ease-in-out infinite;
}
.blob-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #818cf8 0%, #a78bfa 40%, #c084fc 100%);
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  animation: blobDriftCenter 25s ease-in-out infinite;
}
.blob-2 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, #fde68a 0%, #fcd34d 100%);
  bottom: -15%;
  right: -10%;
  animation-delay: -8s;
}
.blob-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #ddd6fe 0%, #a5b4fc 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -16s;
}
@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 40px) scale(0.95); }
}
.blob-3 {
  animation-name: blobDriftCenter;
}
@keyframes blobDriftCenter {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  33% { transform: translate(calc(-50% + 40px), calc(-50% - 30px)) scale(1.08); }
  66% { transform: translate(calc(-50% - 30px), calc(-50% + 40px)) scale(0.95); }
}

/* 主卡片 - 毛玻璃（低不透明让液态背景透出） */
.login-wrapper {
  width: 100%;
  max-width: 960px;
  min-height: 560px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
    0 8px 32px rgba(0, 0, 0, 0.08);
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* 左侧 - 深色毛玻璃（紫蓝渐变 + 毛玻璃模糊） */
.brand-section {
  flex: 1;
  background: linear-gradient(
    165deg,
    rgba(67, 56, 202, 0.55) 0%,
    rgba(79, 70, 229, 0.45) 40%,
    rgba(99, 102, 241, 0.5) 100%
  );
  backdrop-filter: blur(80px) saturate(200%);
  -webkit-backdrop-filter: blur(80px) saturate(200%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  .brand-content {
    text-align: center;
    max-width: 320px;
  }
  .system-section {
    margin-bottom: 48px;
    .system-title {
      font-size: 40px;
      font-weight: 600;
      letter-spacing: -0.8px;
      margin-bottom: 12px;
      color: #f5f5f7;
    }
    .system-desc {
      font-size: 17px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.72);
    }
  }
  .core-feature .feature-highlight {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    i {
      font-size: 20px;
      color: rgba(255, 255, 255, 0.8);
    }
    span {
      font-size: 15px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}

/* 右侧 - 浅色毛玻璃 */
.form-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(60px) saturate(150%);
  -webkit-backdrop-filter: blur(60px) saturate(150%);
}

.login-form-wrapper {
  width: 100%;
  max-width: 340px;
  .form-header {
    margin-bottom: 44px;
    h2 {
      font-size: 28px;
      font-weight: 600;
      letter-spacing: -0.5px;
      color: #1d1d1f;
      margin-bottom: 8px;
    }
    p {
      font-size: 15px;
      color: #86868b;
      font-weight: 400;
    }
  }
}

.login-form {
  ::v-deep .el-form-item {
    margin-bottom: 20px;
  }
  ::v-deep .el-input__inner {
    height: 48px;
    padding-left: 44px;
    padding-right: 44px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    font-size: 16px;
    color: #1d1d1f;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    &::placeholder {
      color: #86868b;
    }
    &:focus {
      border-color: rgba(0, 122, 255, 0.5);
      box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
      background: rgba(255, 255, 255, 0.9);
    }
    &:hover:not(:focus) {
      border-color: rgba(0, 0, 0, 0.15);
      background: rgba(255, 255, 255, 0.85);
    }
  }
  ::v-deep .el-input__prefix {
    left: 14px;
    .el-input__icon {
      color: #86868b;
      font-size: 18px;
    }
  }
  ::v-deep .el-input__suffix {
    right: 12px;
    height: 48px;
    .el-input__icon {
      color: #86868b;
    }
  }
}

/* Apple Blue 登录按钮 */
.form-section .login-btn,
.form-section .login-btn.el-button--primary,
.form-section .login-btn:hover,
.form-section .login-btn:focus,
.form-section .login-btn.is-loading {
  background: #007aff !important;
  background-color: #007aff !important;
  color: #ffffff !important;
  border: none !important;
}

.form-section .login-btn {
  width: 100%;
  height: 48px;
  font-size: 17px;
  font-weight: 500;
  border-radius: 10px;
  margin-top: 8px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
}

.form-section .login-btn:hover:not(:disabled):not(.is-loading) {
  background: #0051d5 !important;
  background-color: #0051d5 !important;
  color: #ffffff !important;
}

.form-section .login-btn:active:not(:disabled):not(.is-loading) {
  transform: scale(0.99);
}

.footer {
  margin-top: 32px;
  text-align: center;
  p {
    font-size: 13px;
    color: #86868b;
  }
}

@media (max-width: 768px) {
  .login-wrapper {
    flex-direction: column;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  .brand-section {
    padding: 40px 24px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    .system-section {
      margin-bottom: 32px;
      .system-title { font-size: 32px; }
      .system-desc { font-size: 15px; }
    }
  }
  .form-section {
    padding: 40px 24px;
  }
}

@media (max-width: 480px) {
  .form-section {
    padding: 32px 20px;
  }
  .blob {
    filter: blur(60px);
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none;
  }
}
</style>