Skip to content

Commit

Permalink
feat(03-World): List Details
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yue-plus
Yue-plus committed Sep 25, 2024
1 parent 421c730 commit d0ae3a8
Showing 1 changed file with 65 additions and 2 deletions.
67 changes: 65 additions & 2 deletions src/pages/_views/03-World.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, {useEffect, useRef, useState} from "react";
import {useStore} from "@nanostores/react";
import {viewIndex} from "../../components/store/rootLayoutStore.ts";
import {directions} from "../../components/store/lineDecoratorStore.ts";
import {IconArrow} from "../../components/SvgIcons.tsx";

function Item({title, subTitle, delay}: { title: string; subTitle: string, delay: number }) {
const $viewIndex = useStore(viewIndex)
Expand Down Expand Up @@ -43,7 +44,7 @@ function Item({title, subTitle, delay}: { title: string; subTitle: string, delay

function List() {
return <div
className="w-[39.875rem] absolute top-[20.3703703704%] left-[9rem] transition-[opacity,visibility] duration-[600] portrait:invisible portrait:opacity-0 z-[3]">
className="w-[39.875rem] absolute top-[20.3703703704%] left-[9rem] transition-[opacity,visibility] duration-[600ms] portrait:invisible portrait:opacity-0 z-[3]">
{
[
{title: "源石", subTitle: "ORIGINIUMS"},
Expand All @@ -57,6 +58,66 @@ function List() {
</div>
}

function Details({title, subTitle, description}: { title: string, subTitle: string, description: string }) {
return <>
<div className="transition-[opacity,visibility] duration-[600ms]">
<div
className="w-[30.75rem] portrait:w-full h-px absolute top-[45.5555555556%] portrait:top-[62.3688155922%] left-[54.25rem] portrait:left-0 portrait:pl-[4.25rem] portrait:pr-[10.5rem] flex z-[3]">
<div className="min-w-0 h-px flex-auto transition-[width] duration-[600ms] portrait:hidden"
style={{
width: "100%",
backgroundImage:
"repeating-linear-gradient(90deg,#b2b2b2,#b2b2b2 .25rem,transparent 0,transparent .5rem)"
}}/>
<div className="text-[3.75rem] font-bold inline-block absolute bottom-12 overflow-hidden">
{title}
</div>
<div className="text-[2rem] font-n15eBold inline-block absolute bottom-4 overflow-hidden">
{subTitle}
</div>
<div className="w-full text-[1rem] inline-block absolute top-4 portrait:pr-[14.75rem] overflow-hidden">
{description}
</div>
</div>
<IconArrow
className="w-8 portrait:w-[1.25rem] box-content px-8 py-4 portrait:p-4 block absolute top-[48.1481481481%] portrait:top-[35.2323838081%] left-[6.625rem] portrait:left-[3.5rem] rotate-180 opacity-70 hover:opacity-100 z-[2] cursor-pointer transition-opacity duration-300"/>
<IconArrow
className="w-8 portrait:w-[1.25rem] box-content px-8 py-4 portrait:p-4 block absolute top-[48.1481481481%] portrait:top-[35.2323838081%] left-[95.5rem] portrait:left-auto portrait:right-[9.5rem] opacity-70 hover:opacity-100 z-[2] cursor-pointer transition-opacity duration-300"/>
</div>
<div
className="w-full h-2 pr-[17.25rem] portrait:pr-[5.75rem] absolute left-0 bottom-[11.25rem] portrait:bottom-[18.2908545727%] flex translate-y-full transition-[opacity,visibility] duration-[600ms] z-[2]">
<div className="w-full h-full relative flex flex-auto">
<div
className="min-w-0 w-full h-full bg-[#5a5a5a] hover:bg-[#ababab] flex-1 transition-colors duration-300 cursor-pointer"/>
<div
className="min-w-0 w-full h-full bg-[#5a5a5a] hover:bg-[#ababab] flex-1 transition-colors duration-300 cursor-pointer"/>
<div
className="min-w-0 w-full h-full bg-[#5a5a5a] hover:bg-[#ababab] flex-1 transition-colors duration-300 cursor-pointer"/>
<div
className="min-w-0 w-full h-full bg-[#5a5a5a] hover:bg-[#ababab] flex-1 transition-colors duration-300 cursor-pointer"/>
<div
className="min-w-0 w-full h-full bg-[#5a5a5a] hover:bg-[#ababab] flex-1 transition-colors duration-300 cursor-pointer"/>
<div
className="min-w-0 w-full h-full bg-[#5a5a5a] hover:bg-[#ababab] flex-1 transition-colors duration-300 cursor-pointer"/>
<div className="h-full bg-ark-blue absolute transition-[left] duration-300 cursor-pointer"
style={{
width: "16.67%",
left: 0
}}/>
</div>
</div>
<div
className="w-[17.25rem] h-[3.75rem] text-inherit no-underline hover:text-black hover:bg-white bg-[#585858] pl-[4.5rem] pr-12 flex items-center justify-between absolute right-0 bottom-[11.25rem] translate-y-1/2 z-[4] cursor-pointer portrait:hidden"
style={{transition: "color .3s, background-color .3s, transform .6s, opacity .6s, visibility .6s"}}>
<IconArrow className="w-4 rotate-180 pointer-events-none"/>
<div className="min-w-20">
<div className="text-[1.25rem] font-bold">返回</div>
<div className="text-[.875rem] font-benderBold">GO BACK</div>
</div>
</div>
</>
}

export default function World() {
const $viewIndex = useStore(viewIndex)
const world = useRef<HTMLDivElement>(null)
Expand All @@ -78,8 +139,10 @@ export default function World() {
className="w-full h-full absolute left-0 bottom-0 bg-common-mask bg-[length:100%_100%] mix-blend-overlay pointer-events-none z-[2]"/>
<List/>
<div ref={world}
className="h-[.95em] text-[#242424] text-[7rem] font-oswaldMedium whitespace-nowrap tracking-tighter absolute bottom-[11.25rem] left-[9rem] flex items-end translate-y-full overflow-hidden transition-opacity opacity-0 z-[2]">
className="h-[.95em] text-[#242424] text-[7rem] font-oswaldMedium whitespace-nowrap tracking-tighter absolute bottom-[11.25rem] left-[9rem] portrait:left-[4.25rem] portrait:bottom-[18.2908545727%] flex items-end translate-y-full overflow-hidden transition-opacity opacity-0 z-[2]">
WORLD
</div>
<Details title="源石" subTitle="ORIGINIUMS"
description="大地被起因不明的天灾四处肆虐，经由天灾席卷过的土地上出现了大量的神秘矿物——“源石”。依赖于技术的进步，源石蕴含的能量投入工业后使得文明顺利迈入现代，与此同时，源石本身也催生出“感染者”的存在。"/>
</div>
}

0 comments on commit d0ae3a8

Please sign in to comment.