ITZX/ITZX-Clubs-Home-Web
4
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎈 perf: 微调五子棋样式

Browse Source
This commit is contained in:
Litrix2 2024-12-15 21:52:30 +08:00
parent ca468edd59
commit 5624d1ccd4
4 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -80,7 +80,8 @@
--el-loading-spinner-size: 30px;
position: fixed;
width: 100%;
z-index: 1000;
z-index: 100;
user-select: none;
top: 0;
background-color: white;
border-bottom: 1px solid var(--el-border-color);

3
src/assets/gobang-header.scss
View File

@ -5,5 +5,6 @@
position: fixed;
top: var(--header-height);
width: 100%;
z-index: 1000;
z-index: 100;
user-select: none;
}

7
src/components/gobang/GobangHeaderContent.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="gobang-header__content size-stretch flex align-center">
<router-link custom :to="{ name: 'GobangList' }" v-slot="{ navigate }">
<div class="flex align-center" @click="navigate">
<div class="gobang-header__content-left flex align-center" @click="navigate">
<el-icon :size="30"><icon-cs-gobang /></el-icon>
<h2 v-show="!smLess" class="gobang-header__title">五子棋</h2>
</div>
@ -9,6 +9,11 @@
<slot></slot>
</div>
</template>
<style lang="scss" scoped>
.gobang-header__content-left {
gap: 10px;
}
</style>
<script setup lang="ts">
import { useMediaStore } from '@/stores/media';
import { storeToRefs } from 'pinia';

51
src/views/GobangPlayPage.vue
View File

@ -1,6 +1,9 @@
<template>
<el-main v-loading="state !== 'idle'" class="gobang-play-page__wrapper flex">
<el-container>
<el-main
v-loading="state !== 'idle' && state !== 'waiting'"
class="gobang-play-page__wrapper flex"
>
<el-container v-if="state !== 'firstLoading'">
<el-header class="gobang-header">
<gobang-header-content class="justify-between">
<div class="flex align-center">
@ -13,34 +16,36 @@
</gobang-header-content>
</el-header>
<el-main class="gobang-play-page-main center flex">
<template v-if="state !== 'firstLoading'">
<div class="gobang-chessboard" :style="{}">
<canvas class="gobang-chessboard__background" ref="canvas"></canvas>
<template v-for="(row, y) of grid">
<template v-for="(cell, x) of row">
<!-- eslint-disable-next-line vue/require-v-for-key -->
<div
v-if="state !== 'waiting'"
class="gobang-chessboard__cell"
:class="[
cell
? cell.isWhite
? 'gobang-chessboard__cell--white'
: 'gobang-chessboard__cell--black'
: undefined,
]"
:style="getCellStyle(cell, x, y)"
></div>
</template>
<div class="gobang-chessboard" :style="{}">
<canvas class="gobang-chessboard__background" ref="canvas"></canvas>
<template v-for="(row, y) of grid">
<template v-for="(cell, x) of row">
<!-- eslint-disable-next-line vue/require-v-for-key -->
<div
v-if="state !== 'waiting'"
class="gobang-chessboard__cell"
:class="[
cell
? cell.isWhite
? 'gobang-chessboard__cell--white'
: 'gobang-chessboard__cell--black'
: undefined,
]"
:style="getCellStyle(cell, x, y)"
></div>
</template>
</div>
</template>
</template>
</div>
</el-main>
</el-container>
</el-main>
</template>
<style lang="scss" scoped>
@import url('@/assets/gobang-header.scss');
:deep(.gobang-header__content-left) {
position: relative;
z-index: 1;
}
.gobang-play-page {
&__wrapper {
background-color: white;