fix: 登录与首页修改
This commit is contained in:
Shu Guang
parent
2cbcb14ff7
commit
cd8148f65a
@ -29,17 +29,10 @@
|
||||
<span>联系我们</span>
|
||||
<div class="link-hover-effect"></div>
|
||||
</a>
|
||||
<button class="cyber-button" onclick="window.location.href='/login'">
|
||||
<button class="cyber-button" @click="goToLogin">
|
||||
<span class="btn-text">登录</span>
|
||||
<span class="btn-glitch"></span>
|
||||
</button>
|
||||
<button
|
||||
class="cyber-button outline"
|
||||
onclick="window.location.href='/register'"
|
||||
>
|
||||
<span class="btn-text">注册</span>
|
||||
<span class="btn-glitch"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="menu-toggle">
|
||||
<div class="hamburger">
|
||||
@ -68,18 +61,12 @@
|
||||
<span class="typing-cursor">|</span>
|
||||
</p>
|
||||
<div class="index-cta-buttons animate-slide-up-delay-2">
|
||||
<button
|
||||
class="cyber-btn glow-button"
|
||||
onclick="window.location.href='/login'"
|
||||
>
|
||||
<button class="cyber-btn glow-button" @click="goToLogin">
|
||||
<span class="cyber-btn-text">开始使用</span>
|
||||
<span class="cyber-btn-glitch"></span>
|
||||
<span class="cyber-btn-glow"></span>
|
||||
</button>
|
||||
<button
|
||||
class="cyber-btn outline-button"
|
||||
onclick="window.scrollTo({top: document.querySelector('#features').offsetTop, behavior: 'smooth'})"
|
||||
>
|
||||
<button class="cyber-btn outline-button" @click="goToLogin">
|
||||
<span class="cyber-btn-text">了解更多</span>
|
||||
<span class="cyber-arrow">→</span>
|
||||
</button>
|
||||
@ -1618,169 +1605,13 @@ h6 {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
// 移动菜单控制
|
||||
const menuOpen = ref(false);
|
||||
|
||||
const toggleMenu = () => {
|
||||
menuOpen.value = !menuOpen.value;
|
||||
const navLinks = document.querySelector(".index-nav-links");
|
||||
if (navLinks) {
|
||||
if (menuOpen.value) {
|
||||
navLinks.classList.add("active");
|
||||
} else {
|
||||
navLinks.classList.remove("active");
|
||||
}
|
||||
}
|
||||
<script>
|
||||
export default {
|
||||
name: "Index",
|
||||
methods: {
|
||||
goToLogin() {
|
||||
this.$router.push("/login");
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 设置菜单切换事件
|
||||
const menuToggle = document.querySelector(".menu-toggle");
|
||||
if (menuToggle) {
|
||||
menuToggle.addEventListener("click", toggleMenu);
|
||||
}
|
||||
|
||||
// 添加随机数字元素到背景
|
||||
const addMatrixElements = () => {
|
||||
const grid = document.createElement("div");
|
||||
grid.classList.add("matrix-bg");
|
||||
document.body.appendChild(grid);
|
||||
|
||||
for (let i = 0; i < 50; i++) {
|
||||
const digit = document.createElement("div");
|
||||
digit.classList.add("matrix-digit");
|
||||
digit.style.left = `${Math.random() * 100}%`;
|
||||
digit.style.top = `${Math.random() * 100}%`;
|
||||
digit.style.animationDelay = `${Math.random() * 5}s`;
|
||||
digit.textContent = Math.floor(Math.random() * 10);
|
||||
grid.appendChild(digit);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化 particles.js（如果有）
|
||||
if (typeof particlesJS !== "undefined") {
|
||||
particlesJS("particles-js", {
|
||||
particles: {
|
||||
number: { value: 80, density: { enable: true, value_area: 800 } },
|
||||
color: { value: "#4e54c8" },
|
||||
shape: { type: "circle" },
|
||||
opacity: { value: 0.5, random: true },
|
||||
size: { value: 3, random: true },
|
||||
line_linked: {
|
||||
enable: true,
|
||||
distance: 150,
|
||||
color: "#4e54c8",
|
||||
opacity: 0.2,
|
||||
width: 1,
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 1.5,
|
||||
direction: "none",
|
||||
random: true,
|
||||
straight: false,
|
||||
out_mode: "out",
|
||||
bounce: false,
|
||||
},
|
||||
},
|
||||
interactivity: {
|
||||
detect_on: "canvas",
|
||||
events: {
|
||||
onhover: { enable: true, mode: "grab" },
|
||||
onclick: { enable: true, mode: "push" },
|
||||
resize: true,
|
||||
},
|
||||
modes: {
|
||||
grab: { distance: 140, line_linked: { opacity: 0.5 } },
|
||||
push: { particles_nb: 3 },
|
||||
},
|
||||
},
|
||||
retina_detect: true,
|
||||
});
|
||||
} else {
|
||||
// 如果 particlesJS 未加载，创建备用背景
|
||||
addMatrixElements();
|
||||
}
|
||||
|
||||
// 动画字符效果
|
||||
const subtitleElement = document.querySelector(".index-subtitle");
|
||||
if (subtitleElement) {
|
||||
const text = subtitleElement.textContent.trim().replace("|", "");
|
||||
subtitleElement.textContent = "";
|
||||
|
||||
const typeText = async () => {
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
subtitleElement.textContent = text.substring(0, i + 1);
|
||||
if (i === text.length - 1) {
|
||||
subtitleElement.innerHTML += '<span class="typing-cursor">|</span>';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(typeText, 1000);
|
||||
}
|
||||
|
||||
// 添加滚动动画
|
||||
const scrollElements = document.querySelectorAll(
|
||||
".index-feature-card, .index-stat-item"
|
||||
);
|
||||
|
||||
const isElementInView = (el) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
return (
|
||||
rect.top <=
|
||||
(window.innerHeight || document.documentElement.clientHeight) * 0.8
|
||||
);
|
||||
};
|
||||
|
||||
const displayScrollElement = (element) => {
|
||||
element.classList.add("scrolled");
|
||||
};
|
||||
|
||||
const hideScrollElement = (element) => {
|
||||
element.classList.remove("scrolled");
|
||||
};
|
||||
|
||||
const handleScrollAnimation = () => {
|
||||
scrollElements.forEach((el) => {
|
||||
if (isElementInView(el)) {
|
||||
displayScrollElement(el);
|
||||
} else {
|
||||
hideScrollElement(el);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 添加滚动类
|
||||
const styleSheet = document.styleSheets[0];
|
||||
styleSheet.insertRule(
|
||||
`
|
||||
.index-feature-card, .index-stat-item {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
`,
|
||||
styleSheet.cssRules.length
|
||||
);
|
||||
|
||||
styleSheet.insertRule(
|
||||
`
|
||||
.index-feature-card.scrolled, .index-stat-item.scrolled {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
`,
|
||||
styleSheet.cssRules.length
|
||||
);
|
||||
|
||||
// 初始检查和添加滚动监听
|
||||
setTimeout(handleScrollAnimation, 100);
|
||||
window.addEventListener("scroll", handleScrollAnimation);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,26 +1,245 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<UserLogin class="login" />
|
||||
<p style="position: fixed;bottom: 0;text-align: center;left: 0;right: 0;font-family: '宋体';">@ 2024-青创先锋</p>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import UserLogin from '@/components/common/UserLogin.vue';
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: { UserLogin },
|
||||
metaInfo: {
|
||||
title: '登录',
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
.container
|
||||
height 100vh
|
||||
background #f0f2f5 url('~@/assets/bg.svg') repeat
|
||||
.login
|
||||
center()
|
||||
|
||||
background-image url('https://www.sxhju.cn/images/weixintupian_20240717112809.jpg')
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user