satori/satori
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

缩小卦盘

Browse Source
This commit is contained in:
satori
2024-08-27 20:29:06 +08:00
parent 3703b7cbe0
commit 606cd45502
1 changed files with 10 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pages/numerology.vue
View File

@@ -1,9 +1,9 @@
<template lang="pug">
.h-screen.mx-auto.pt-32
.h-screen.mx-auto
// 太极
div.duration-700.transition-all.overflow-hidden.transform.cursor-pointer.fixed.flex.justify-center.items-center(
class="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
:class="stretch ? 'rounded-0 w-full h-full' : 'rounded-full w-64 h-64'"
:class="stretch ? 'rounded-0 w-full h-full' : 'rounded-full w-48 h-48'"
@click="stretch = !stretch"
)
div.duration-700.transition-all.absolute.bg-white.top-0.left-0(
@@ -13,9 +13,9 @@
:class="stretch ? 'rounded-r-0 w-1/1 h-1/2 rounded-l-full' : 'rounded-r-full w-1/2 h-1/1'"
)
div.duration-700.transition-all.bg-white.flex.top-0.absolute.justify-center.items-center(
:class="stretch ? 'rounded-0 w-full h-1/2 left-0' : 'rounded-full w-32 h-32 left-1/4'"
:class="stretch ? 'rounded-0 w-full h-1/2 left-0' : 'rounded-full w-24 h-24 left-1/4'"
)
div.bg-white.rounded-full.h-8.w-8.mix-blend-difference
div.bg-white.rounded-full.h-6.w-6.mix-blend-difference
div.transition-all.absolute.bg-red(
:class="stretch ? 'opacity-100 duration-1200' : 'opacity-0 duration-200'"
)
@@ -25,21 +25,17 @@
li(v-if="六十四卦[selectItem].翼").text-gray-500 象曰: {{ 六十四卦[selectItem].翼.象 }}
li(v-if="六十四卦[selectItem].翼").text-gray-500 彖曰: {{ 六十四卦[selectItem].翼.彖 }}
div.duration-700.transition-all.flex.justify-center.items-center.absolute.bg-black.bottom-0(
:class="stretch ? 'rounded-0 w-full h-1/2 right-0' : 'rounded-full w-32 h-32 right-1/4'"
:class="stretch ? 'rounded-0 w-full h-1/2 right-0' : 'rounded-full w-24 h-24 right-1/4'"
)
div.bg-white.rounded-full.h-8.w-8.mix-blend-difference
div.bg-white.rounded-full.h-6.w-6.mix-blend-difference
// 八个卦相 -translate-x-1/2 -translate-y-1/2
div.duration-700.transition-all.overflow-hidden.transform.cursor-pointer(
class="rounded-full flex h-128 w-128 justify-center items-center fixed"
class="rounded-full flex h-92 w-92 justify-center items-center fixed"
class="text-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mix-blend-difference"
:class="stretch ? 'opacity-0' : 'opacity-100'"
@click="stretch = !stretch"
)
div.flex.flex-col.absolute.items-center(
v-for="item,i in 八卦" :key="item.卦"
class="h-1/1 w-1/1"
:style="{ transform: `rotate(${i * 45}deg)` }"
)
div.flex.flex-col.absolute.items-center(v-for="item,i in 八卦" :key="item.卦" class="h-1/1 w-1/1" :style="{ transform: `rotate(${i * 45}deg)` }")
span {{ item.卦 }}
div.bg-white.h-2.w-11.my-1.flex.justify-center.items-center.duration-700.transition-all.rounded-sm(
v-for="x in item.爻"
@@ -48,7 +44,7 @@
div.w-2.h-2.bg-black(v-if="x === '阴'")
// 六十四卦(阴卦阳卦各三十二)
div.duration-700.transition-all.transform.cursor-pointer.flex.justify-center.items-center.fixed.text-white.mix-blend-difference(
class="rounded-full h-256 top-1/2 left-1/2 w-256 -translate-x-1/2"
class="rounded-full h-120 top-1/2 left-1/2 w-120 -translate-x-1/2"
:class="stretch ? '-translate-y-1/3' : '-translate-y-1/2'"
@click="stretch = !stretch"
)
@@ -66,7 +62,7 @@
span {{ item.卦 }}
div
div(
class="bg-white flex h-1 m-1 w-7 mix-blend-difference items-center justify-center"
class="bg-white flex h-1 m-1 w-6 mix-blend-difference items-center justify-center"
v-for="(x, index) in item.爻" :key="index"
:class="{'mt-2': index === 3}"
)