Arithma-Battle-Lab/ArithmaBattle
Arithma-Battle-Lab/ArithmaBattle
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

更新首页视图，添加新内容和样式，优化按钮设计

Browse source
This commit is contained in:
Coldin04 2025-04-25 17:15:27 +08:00
parent 47f33b6c00
commit 8459faf63f
4 changed files with 34 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
.yarn/install-state.gz
View file

Binary file not shown.

2
src/App.vue
View file

@ -6,8 +6,6 @@ import HelloWorld from './components/HelloWorld.vue'
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
</header>
<RouterView />

2
src/assets/logo.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745571679148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4929" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M430.08 20.48H86.016c-40.448 0-57.344 24.064-57.344 57.344 0 98.304 0.512 260.096 0.512 336.896 0 40.448 20.992 65.024 56.832 65.024h344.576c40.448 0 57.344-15.36 57.344-57.344V77.824A56.448 56.448 0 0 0 430.08 20.48z m-58.368 239.616c-3.584 12.288-11.776 18.432-24.576 18.432h-179.2c-18.432 0-29.696-18.944-23.552-38.912 3.584-11.776 11.776-18.432 24.064-18.432h178.176c19.456 0.512 31.232 18.432 25.088 38.912zM946.688 20.48H602.112c-33.792 0-57.344 20.992-57.344 57.344V422.4c0 31.232 25.088 57.344 57.344 57.344h344.576c30.208 0 57.344-23.04 57.344-57.344V77.824c0-36.352-23.552-57.344-57.344-57.344z m-86.016 258.048h-57.344v57.344c0 11.264-13.824 28.672-28.672 28.672-12.8 0-28.672-12.8-28.672-28.672-0.512-34.816 0-57.344 0-57.344s-22.528 0.512-57.344 0c-11.264 0-28.672-13.312-28.672-28.672 0-12.288 13.824-28.672 28.672-28.672h57.344s-0.512-23.04 0-57.344c0-16.384 13.312-29.184 28.672-29.184 12.8 0 28.672 11.264 28.672 29.184v57.344s23.552-0.512 57.344 0c16.896 0 29.184 16.384 29.184 28.672 0 13.312-18.432 28.672-29.184 28.672zM430.08 537.088H85.504c-43.008 0-57.344 12.8-57.344 57.344v344.576c0 35.328 27.136 57.344 57.344 57.344H430.08c40.448 0 57.344-15.36 57.344-57.344V594.432a55.68 55.68 0 0 0-57.344-57.344z m-68.096 333.824c-13.312 12.8-31.744 13.312-45.056 0.512a2462.272 2462.272 0 0 1-51.712-51.712c-2.048-2.048-3.584-5.12-5.632-8.192-21.504 21.504-40.448 40.96-59.392 59.904-11.264 11.264-24.064 12.8-37.376 5.632-13.312-7.168-20.992-22.016-17.408-35.84a36.864 36.864 0 0 1 10.752-17.408c18.432-18.944 37.376-37.376 56.32-56.832a84.992 84.992 0 0 1-6.656-7.168c-17.408-17.92-35.328-35.328-52.736-53.248a30.208 30.208 0 0 1-3.072-38.4c8.704-13.312 24.576-19.456 37.888-14.336 5.12 2.048 10.24 6.144 14.336 9.728 18.944 18.432 37.376 37.376 57.344 57.856 5.12-6.144 9.728-11.776 14.848-16.896 12.8-13.312 26.112-26.112 39.424-39.424 16.384-16.384 34.816-17.408 49.152-2.56 14.336 14.336 13.312 32.768-2.56 48.64-16.384 16.384-32.256 32.768-48.64 49.152-2.048 2.048-3.584 4.096-6.144 6.656 10.24 10.24 20.48 20.48 30.72 30.208 9.216 9.216 18.944 18.432 28.16 28.16 11.776 13.312 10.752 32.256-2.56 45.568z m642.048-276.48c0-28.672-30.72-57.344-57.344-57.344H602.112c-29.696 0-57.344 30.208-57.344 57.344v344.576c0 25.088 28.672 57.344 57.344 57.344h344.576c40.448 0 57.344-27.136 57.344-69.12 0.512-99.84 0.512-233.472 0-332.8z m-143.36 258.048h-169.984c-22.528 0-30.72-13.312-30.72-28.672 0-16.384 13.824-28.672 28.672-28.672h172.032c14.336 0 28.672 11.776 28.672 28.672 0 15.872-17.408 28.672-28.672 28.672z m0-114.688c-64.512 0.512-85.504 0-172.032 0-11.264 0-28.672-11.776-28.672-28.672 0-15.872 13.824-28.672 24.576-28.672h176.128c13.824 0.512 28.672 14.848 28.672 28.672 0 14.336-14.848 28.672-28.672 28.672z" p-id="4930"></path></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 276 B

After

Width:  |  Height:  |  Size: 3 KiB

Before After
Before After

42
src/views/HomeView.vue
View file

@ -1,22 +1,34 @@
<template>
<transition name="fade">
<div class="home">
<h1>欢迎来到 ArithmaBattle！</h1>
<h1>欢迎来到 Arithma Battle！</h1>
<p>这里是心算竞技平台，快来挑战你的数学能力吧！</p>
<p>准备好练习你的数学计算能力，或者与他人一决高下了吗？</p>
<div class="actions">
<router-link to="/practice" class="btn">单人练习</router-link>
<router-link to="/pk" class="btn">在线PK</router-link>
<router-link to="/practice" class="btn btn-dopamine">单人练习</router-link>
<router-link to="/pk" class="btn btn-dopamine">在线比赛</router-link>
</div>
</div>
</transition>
</template>
<script setup lang="ts">
// 这里可以添加首页的逻辑代码
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
.home {
text-align: center;
padding: 2rem;
position: relative;
}
h1 {
@ -27,25 +39,35 @@ h1 {
p {
font-size: 1.2rem;
color: #666;
margin-bottom: 0.6rem;
}
.actions {
margin-top: 2rem;
display: flex;
justify-content: center;
gap: 1rem; /* 控制按钮之间的间距 */
}
.btn {
display: inline-block;
margin: 0 0.5rem;
padding: 0.75rem 1.5rem;
padding: 0.8rem 1.5rem; /* 统一按钮大小 */
font-size: 1rem;
color: #fff;
background-color: #42b983;
border-radius: 4px;
border-radius: 30px; /* 圆弧形 */
text-decoration: none;
transition: background-color 0.3s;
transition: background-color 0.3s, transform 0.3s;
}
.btn:hover {
background-color: #3aa876;
/* 多巴胺蓝色系按钮 */
.btn-dopamine {
background: linear-gradient(90deg, #84b9ff, #32a8ff, #0faeff); /* 霓虹蓝色渐变 */
}
.btn-dopamine:hover {
transform: scale(1.05); /* 按钮放大效果 */
box-shadow: 0 10px 20px rgba(0, 123, 255, 0.4); /* 增加阴影效果 */
}
</style>