缩放
This commit is contained in:
parent
606cd45502
commit
9200e1c2a9
@ -30,18 +30,18 @@
|
||||
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-92 w-92 justify-center items-center fixed"
|
||||
class="rounded-full flex h-86 w-86 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)` }")
|
||||
span {{ item.卦 }}
|
||||
div.bg-white.h-2.w-11.my-1.flex.justify-center.items-center.duration-700.transition-all.rounded-sm(
|
||||
div.bg-white.flex.justify-center.items-center.duration-700.transition-all.rounded-sm(
|
||||
class="h-2 my-0.5 w-9"
|
||||
v-for="x in item.爻"
|
||||
:classx="stretch ? 'w-full' : 'w-11'"
|
||||
)
|
||||
div.w-2.h-2.bg-black(v-if="x === '阴'")
|
||||
div.w-2.h-full.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-120 top-1/2 left-1/2 w-120 -translate-x-1/2"
|
||||
|
Loading…
Reference in New Issue
Block a user