diff --git a/public/fonts/Exo2-Black.ttf b/public/fonts/Exo2-Black.ttf new file mode 100644 index 0000000..475c7c7 Binary files /dev/null and b/public/fonts/Exo2-Black.ttf differ diff --git a/public/images/rslg.webp b/public/images/rslg.webp new file mode 100644 index 0000000..f52391e Binary files /dev/null and b/public/images/rslg.webp differ diff --git a/src/components/HighText.tsx b/src/components/HighText.tsx index 2b4fd83..38bb789 100644 --- a/src/components/HighText.tsx +++ b/src/components/HighText.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; -export default function HighText({text, show, eg, large, inputed}:{text?: string, show: boolean, eg?: string, large?: boolean, inputed?: boolean}) { +export default function HighText({text, show, eg, large, inputed, value}:{text?: string, show: boolean, eg?: string, large?: boolean, inputed?: boolean, value?: string}) { const [quickInput , setQuickInput] = useState('') useEffect(()=>{ if(inputed){ @@ -10,18 +10,20 @@ export default function HighText({text, show, eg, large, inputed}:{text?: string return (
- {quickInput} + {quickInput}{value} {/* {show?
:'' } */}
{show?
-
-
- {/*
*/} -
{text}
-
+ {text? +
+
+ {/*
*/} +
{text}
+
:'' + } {eg?
{setQuickInput(eg)}}> {/*
*/} diff --git a/src/index.css b/src/index.css index 5b9b02f..edf203e 100644 --- a/src/index.css +++ b/src/index.css @@ -14,6 +14,12 @@ -webkit-text-size-adjust: 100%; } */ +@font-face { + font-family: 'exo'; + font-style: normal; + src: local('code'), url('/fonts/Exo2-Black.ttf') format('truetype'); +} + @font-face { font-family: 'code'; font-style: normal; diff --git a/src/pages/tools/rseg.tsx b/src/pages/tools/rseg.tsx new file mode 100644 index 0000000..65fbb75 --- /dev/null +++ b/src/pages/tools/rseg.tsx @@ -0,0 +1,233 @@ +import { Button, Slider, SliderFilledTrack, SliderThumb, SliderTrack, Switch, FormLabel, FormControl } from '@chakra-ui/react' +import HighText from "../../components/HighText"; +import { useOutletContext } from "react-router-dom"; +import { ChangeEvent, RefObject, useState } from "react"; +import BaseCard from "../../components/BaseCard"; + +export default function Instagram() { + const [highLight, ref]:[highLight: boolean, ref: RefObject] = useOutletContext(); + + const [image, setImage] = useState(''); + const [head, setHead] = useState(''); + const [bleedingLine, setBleedingLine] = useState(false); + + const [imageX , setImageX] = useState(0) + const [imageY , setImageY] = useState(0) + const [imageZoom , setImageZoom] = useState(100) + + const handleImageChange = (e: ChangeEvent) => { + const file = e.target.files && e.target.files[0]; + + if (file) { + const reader = new FileReader(); + + reader.onloadend = () => { + setImage(reader.result as string); + }; + + reader.readAsDataURL(file); + } + }; + + const handleHeadChange = (e: ChangeEvent) => { + const file = e.target.files && e.target.files[0]; + + if (file) { + const reader = new FileReader(); + + reader.onloadend = () => { + setHead(reader.result as string); + }; + + reader.readAsDataURL(file); + } + }; + + return ( +
+
+ + +
+
+
+
+ 请到「预览模式」调整图片以获得准确的比例 +
+
+ + + + + + + + + + + +
+
+
+
+
裁剪区
+ 		+ {setImageY(v)}} orientation='vertical' minH='100px'> + + + + + +
+ {setImageX(v)}}> + + + + + +
+
+
图片缩放
+ {setImageZoom(v)}}> + + + + + +
详细参数
+
X:{imageX}% Y:{imageY}% Zoom:{imageZoom}%
+
+
+ + + 3mm 出血线（印刷需打开） + + {setBleedingLine(v.target.checked)}} /> + +
+ +
+
+ + + + + + + + + + + + + + {/* + */} + + + +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+ 		+
+
+
+ +
+
+
12 + +
+
+ {/*
+ logo +
+ + +
+
+
+
+
+
+ {head? +
: +
+ } +
+
+
+ +
+ more +
+ {image? +
+
+
: +
请上传图片
+ } + +
+ liked + message + send +
+ collect +
+
+ +
+
+
+ home + search + add + video + user + +
*/} +
+ +
+ ) +} diff --git a/src/utils/router.ts b/src/utils/router.ts index 9ee0ca7..c389d44 100644 --- a/src/utils/router.ts +++ b/src/utils/router.ts @@ -11,6 +11,13 @@ const hot = ['#FEE2E2','#DC2626'] const list = { done: [ + // { + // name: ['人生二格', '85mm*54mm'], + // logo: '/images/rslg.webp', + // url: '/tools/rseg', + // tag: '新上线', + // tag_color: ['#dcfce7','#16a34a'] + // }, { name: ['Instagram', '三寸 小卡/透卡'], logo: '/images/instagram/logo.webp',