CodeMaster/src/views/Login.vue

<template>
  <div class="container">
    <div class="background-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
    </div>
    <div class="content-wrapper">
      <div class="left-section">
        <h1 class="welcome-text">欢迎使用</h1>
        <div class="brand">
          <div class="logo-container">
            <!-- <img src="@/assets/logo.png" alt="Logo" class="logo" /> -->
            <!-- <h2 class="gradient-text">CodeMaster</h2> -->
          </div>
          <div class="brand-description">
            <p class="main-slogan">基于ChatGLM大模型的高校竞赛管理系统</p>
            <p class="sub-slogan">智能辅助 · 高效管理 · 实时评测</p>
          </div>
        </div>
        <div class="features">
          <div class="feature-item">
            <i class="el-icon-trophy"></i>
            <span>竞赛管理</span>
          </div>
          <div class="feature-item">
            <i class="el-icon-monitor"></i>
            <span>实时评测</span>
          </div>
          <div class="feature-item">
            <i class="el-icon-data-line"></i>
            <span>数据分析</span>
          </div>
        </div>
      </div>
      <div class="login-wrapper">
        <UserLogin class="login" />
      </div>
    </div>
    <p class="copyright">@ 2025-基于ChatGLM大模型的高校竞赛管理系统</p>
  </div>
</template>

<style scoped lang="stylus">
.container
  height 100vh
  background-image url('https://www.sxhju.cn/images/weixintupian_20240717112809.jpg')
  background-size cover
  background-position center
  background-repeat no-repeat
  position relative
  display flex
  justify-content center
  align-items center
  overflow hidden

.content-wrapper
  display flex
  background rgba(255, 255, 255, 0.8)
  backdrop-filter blur(10px)
  border-radius 20px
  box-shadow 0 10px 30px rgba(0, 0, 0, 0.1)
  width 900px
  height 560px
  position relative
  z-index 2
  animation fadeIn 0.8s ease-out

.left-section
  flex 1
  padding 60px
  background linear-gradient(135deg, #2196f3 0%, #00bcd4 100%)
  border-radius 20px 0 0 20px
  color white
  display flex
  flex-direction column
  justify-content space-between

.welcome-text
  font-size 32px
  margin-bottom 20px
  font-weight 300

.brand
  margin-bottom 40px

.logo-container
  display flex
  align-items center
  gap 15px
  margin-bottom 15px

.logo
  width 48px
  height 48px
  object-fit contain

.gradient-text
  font-size 36px
  background linear-gradient(45deg, #ffffff, #e0f7fa)
  -webkit-background-clip text
  color transparent
  margin 0
  font-weight 700
  letter-spacing 1px

.brand-description
  margin-top 20px

.main-slogan
  font-size 20px
  font-weight 500
  margin-bottom 8px
  color #ffffff
  letter-spacing 0.5px

.sub-slogan
  font-size 16px
  color rgba(255, 255, 255, 0.8)
  font-weight 300
  letter-spacing 0.5px
  display flex
  align-items center
  gap 15px

  &::before, &::after
    content ''
    height 1px
    flex 1
    background linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)

.slogan
  font-size 18px
  opacity 0.9
  margin-top 10px

.features
  display flex
  flex-direction column
  gap 20px

.feature-item
  display flex
  align-items center
  gap 15px
  font-size 18px
  opacity 0.9
  transition transform 0.3s ease

  &:hover
    transform translateX(10px)

  i
    font-size 24px

.login-wrapper
  flex 1
  padding 40px
  display flex
  align-items center
  justify-content center

.shape
  position absolute
  border-radius 50%
  opacity 0.1
  animation float 20s infinite

.shape-1
  width 300px
  height 300px
  top -150px
  right -150px
  background white
  animation-delay -5s

.shape-2
  width 200px
  height 200px
  bottom -100px
  left -100px
  background white
  animation-delay -10s

.shape-3
  width 150px
  height 150px
  top 50%
  right -75px
  background white
  animation-delay -15s

.copyright
  position fixed
  bottom 20px
  left 0
  right 0
  text-align center
  color #666
  font-size 14px
  z-index 2

@keyframes float
  0%, 100%
    transform translate(0, 0)
  50%
    transform translate(20px, -20px)

@keyframes fadeIn
  from
    opacity 0
    transform translateY(20px)
  to
    opacity 1
    transform translateY(0)

@media (max-width: 992px)
  .content-wrapper
    width 95%
    flex-direction column
    height auto

  .left-section
    border-radius 20px 20px 0 0
    padding 40px

  .login-wrapper
    padding 30px
  .main-slogan
    font-size 20px
    font-weight 500
    margin-bottom 8px
    color #ffffff
    letter-spacing 0.5px
</style>

<script>
import UserLogin from "@/components/common/UserLogin.vue";

export default {
  name: "Login",
  components: { UserLogin },
  metaInfo: {
    title: "登录",
  },
};
</script>