icechen
/
tbeg-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

master
icechen 2022-03-14 03:58:22 +08:00
parent 4fba4f2b27
commit 8fbdeba60d
5 changed files with 136 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="light">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fileset</title> <title>fileset</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
</body> </body>
</html> </html>

1
package.json
View File

@ -11,6 +11,7 @@
"@reduxjs/toolkit": "^1.8.0", "@reduxjs/toolkit": "^1.8.0",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"axios": "^0.26.1", "axios": "^0.26.1",
"daisyui": "^2.6.4",
"filesize": "^8.0.7", "filesize": "^8.0.7",
"mtproton": "^6.0.0", "mtproton": "^6.0.0",
"postcss": "^8.4.8", "postcss": "^8.4.8",

54
pnpm-lock.yaml
View File

@ -9,6 +9,7 @@ specifiers:
'@vitejs/plugin-react': ^1.2.0 '@vitejs/plugin-react': ^1.2.0
autoprefixer: ^10.4.2 autoprefixer: ^10.4.2
axios: ^0.26.1 axios: ^0.26.1
daisyui: ^2.6.4
filesize: ^8.0.7 filesize: ^8.0.7
mtproton: ^6.0.0 mtproton: ^6.0.0
postcss: ^8.4.8 postcss: ^8.4.8
@ -27,6 +28,7 @@ dependencies:
'@reduxjs/toolkit': 1.8.0_react-redux@7.2.6+react@17.0.2 '@reduxjs/toolkit': 1.8.0_react-redux@7.2.6+react@17.0.2
autoprefixer: 10.4.2_postcss@8.4.8 autoprefixer: 10.4.2_postcss@8.4.8
axios: 0.26.1 axios: 0.26.1
daisyui: 2.6.4_554c024960c0d85659bdf1e5e950b7f7
filesize: 8.0.7 filesize: 8.0.7
mtproton: 6.0.0 mtproton: 6.0.0
postcss: 8.4.8 postcss: 8.4.8
@ -639,6 +641,21 @@ packages:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
dev: false dev: false
/color-string/1.9.0:
resolution: {integrity: sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==}
dependencies:
color-name: 1.1.4
simple-swizzle: 0.2.2
dev: false
/color/4.2.1:
resolution: {integrity: sha512-MFJr0uY4RvTQUKvPq7dh9grVOTYSFeXja2mBXioCGjnjJoXrAp9jJ1NQTDR73c9nwBSAQiNKloKl5zq9WB9UPw==}
engines: {node: '>=12.5.0'}
dependencies:
color-convert: 2.0.1
color-string: 1.9.0
dev: false
/configstore/5.0.1: /configstore/5.0.1:
resolution: {integrity: sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==} resolution: {integrity: sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==}
engines: {node: '>=8'} engines: {node: '>=8'}
@ -673,6 +690,13 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dev: false dev: false
/css-selector-tokenizer/0.8.0:
resolution: {integrity: sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==}
dependencies:
cssesc: 3.0.0
fastparse: 1.1.2
dev: false
/cssesc/3.0.0: /cssesc/3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'} engines: {node: '>=4'}
@ -682,6 +706,22 @@ packages:
/csstype/3.0.11: /csstype/3.0.11:
resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==} resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
/daisyui/2.6.4_554c024960c0d85659bdf1e5e950b7f7:
resolution: {integrity: sha512-3l7WHgpOTdyUBVu2TD6uZH4+IbwaBnPXdoWjjvmzT6hxR5+WUHMl4vvPP+7/VB+CcoxSB296qaYWXQcoWcbISw==}
peerDependencies:
autoprefixer: ^10.0.2
postcss: ^8.1.6
dependencies:
autoprefixer: 10.4.2_postcss@8.4.8
color: 4.2.1
css-selector-tokenizer: 0.8.0
postcss: 8.4.8
postcss-js: 4.0.0_postcss@8.4.8
tailwindcss: 3.0.23_autoprefixer@10.4.2
transitivePeerDependencies:
- ts-node
dev: false
/debug/4.3.3: /debug/4.3.3:
resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==} resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==}
engines: {node: '>=6.0'} engines: {node: '>=6.0'}
@ -967,6 +1007,10 @@ packages:
micromatch: 4.0.4 micromatch: 4.0.4
dev: false dev: false
/fastparse/1.1.2:
resolution: {integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==}
dev: false
/fastq/1.13.0: /fastq/1.13.0:
resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==} resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
dependencies: dependencies:
@ -1085,6 +1129,10 @@ packages:
resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=} resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
dev: false dev: false
/is-arrayish/0.3.2:
resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
dev: false
/is-binary-path/2.1.0: /is-binary-path/2.1.0:
resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
engines: {node: '>=8'} engines: {node: '>=8'}
@ -1518,6 +1566,12 @@ packages:
resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
dev: false dev: false
/simple-swizzle/0.2.2:
resolution: {integrity: sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=}
dependencies:
is-arrayish: 0.3.2
dev: false
/source-map-js/1.0.2: /source-map-js/1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}

2
src/index.css
View File

@ -3,5 +3,5 @@
@tailwind utilities; @tailwind utilities;
body { body {
background-color: #eae4de; letter-spacing: 0.1rem;
} }

98
src/pages/home/index.tsx
View File

@ -1,9 +1,25 @@
import { useState } from "react";
export default function Home() { export default function Home() {
let [hiddenDrawer, setHiddenDrawer] = useState(true);
return ( return (
<div className={"grid grid-cols-2 grid-rows-2"}> <div className={""}>
<Logo /> <Logo />
<Menu /> <Menu
onClickLogin={() => {
setHiddenDrawer(!hiddenDrawer);
}}
/>
<Drawer
hidden={hiddenDrawer}
setHidden={() => {
setHiddenDrawer(true);
}}
/>
<FileButton openLogin={() => setHiddenDrawer(false)} />
</div> </div>
); );
} }
@ -12,7 +28,7 @@ function Logo() {
return ( return (
<div <div
className={ className={
"m-4 box-border w-16 cursor-pointer select-none border border-4 border-red-900 bg-white text-center shadow-lg" "absolute top-0 m-4 box-border h-8 w-24 cursor-pointer select-none border border-4 border-base-300 bg-white bg-base-100 text-center shadow-lg"
} }
> >
LOGO LOGO
@ -20,27 +36,69 @@ function Logo() {
); );
} }
function Menu() { function Menu(props: { onClickLogin: () => void }) {
return ( return (
<div <ul
className={ className={
"top-2 right-2 flex origin-center items-center justify-end gap-2 pr-5 align-middle underline underline-offset-2" "absolute right-8 top-0 m-4 flex justify-end gap-4 rounded-xl bg-base-200 px-12 py-4 shadow"
} }
> >
<div className={"cursor-pointer bg-green-300"}>定价</div> <li
<div className={"cursor-pointer bg-green-300"}>注册/登录</div> className={"cursor-pointer select-none text-base hover:text-base-300"}
<input type="date" className="mt-1 block w-full" /> >
<select className="form-select px-4 py-3"> 定价
<optgroup label={"xxx"}> </li>
<title>xxx</title> <li
<option>中文</option> className={"cursor-pointer select-none text-base hover:text-base-300"}
<option>英文</option> onClick={props.onClickLogin}
</optgroup> >
<optgroup label={"www"}> 注册/登录
<option>中文</option> </li>
<option>英文</option> </ul>
</optgroup> );
</select> }
function FileButton(props: { openLogin: () => void }) {
return (
<div className={"btn-group absolute top-1/2 left-1/4"}>
<button className={"btn"}>上传文件</button>
<button className={"btn"} onClick={props.openLogin}>
口令下载
</button>
</div>
);
}
function Drawer(props: { hidden: boolean; setHidden: () => void }) {
return props.hidden ? (
<></>
) : (
<div className={"absolute right-0 z-0 h-screen w-screen transition-all"}>
<div
className={"absolute z-40 h-screen w-screen bg-gray-400 opacity-60"}
onClick={() => {
console.log("hidden");
props.setHidden();
}}
></div>
<div
className={
"absolute right-0 z-50 h-screen w-1/3 origin-right animate-fade-in-down bg-base-100"
}
>
<div className={"container mt-20 flex items-center justify-center"}>
<LoginContent />
</div>
</div>
</div>
);
}
function LoginContent() {
return (
<div className={"flex bg-base-100"}>
<label className={"label mr-5 text-base-content"}>手机号</label>
<input className={"input input-primary"} />
</div> </div>
); );
} }