GithubBackup/geekgeekrun
1
0
Fork 0
mirror of https://github.com/geekgeekrun/geekgeekrun.git synced 2026-09-06 16:07:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

enhance layout of grid

Browse Source
This commit is contained in:
bossgeekgo
2024-02-22 09:41:43 +08:00
parent 888742cc94
commit b860e77e6b
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/renderer/src/features/FlyingCompanyLogoList/index.vue
+13 -6
View File
@@ -1,5 +1,11 @@
<template> <template>
<div class="container"> <div
class="container"
:style="{
gridTemplateColumns: `repeat(${colCount}, 1fr)`,
gridTemplateRows: `repeat(${rowCount}, 1fr)`
}"
>
<img <img
v-for="n in rowCount * colCount" v-for="n in rowCount * colCount"
:key="n" :key="n"
@@ -20,8 +26,8 @@ import { logoQueueInjectKey } from './types'
const logoQueue = ref<string[]>([]) const logoQueue = ref<string[]>([])
const rowCount = 6 const rowCount = 4
const colCount = 5 const colCount = 6
const currentIndexToSrcMap: string[] = ref([]) const currentIndexToSrcMap: string[] = ref([])
Promise.all( Promise.all(
@@ -59,8 +65,6 @@ const handleAnimationiteration = (ev, indexInSrcMap) => {
height: 600px; height: 600px;
perspective: 1200px; perspective: 1200px;
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, 1fr);
align-items: center; align-items: center;
justify-items: center; justify-items: center;
justify-content: center; justify-content: center;
@@ -69,12 +73,15 @@ const handleAnimationiteration = (ev, indexInSrcMap) => {
.dot { .dot {
display: block; display: block;
--dot-run-duration: 1.5s; --dot-run-duration: 1s;
animation: fly-in var(--dot-run-duration) linear infinite; animation: fly-in var(--dot-run-duration) linear infinite;
transform-origin: center; transform-origin: center;
mix-blend-mode: darken; mix-blend-mode: darken;
width: 200px; width: 200px;
} }
.dot:nth-child(2n) {
animation-delay: calc(-1 * var(--dot-run-duration));
}
.dot:nth-child(2n + 1) { .dot:nth-child(2n + 1) {
animation-delay: calc(-0.1 * var(--dot-run-duration)); animation-delay: calc(-0.1 * var(--dot-run-duration));
} }