diff --git a/src/pages/draw/index.module.less b/src/pages/draw/index.module.less index 96356bf..eb0b5fc 100644 --- a/src/pages/draw/index.module.less +++ b/src/pages/draw/index.module.less @@ -13,18 +13,26 @@ max-width: 900px; align-self: center; overflow: auto; + padding-bottom: 100px; &::-webkit-scrollbar { display: none; } } &_two{ + max-width: 1000px; + margin: auto; + position: absolute; + left: 0; + right: 0; + bottom: 0; padding: 12px 12px 20px; + transition: bottom 0.4s ease-in-out; } } &_config{ padding: 12px 20px 20px; - background-color: rgba(231,234,243,.5); + background-color: rgba(231,234,243,1); position: relative; top: 8px; border-top-right-radius: 12px; diff --git a/src/pages/draw/index.tsx b/src/pages/draw/index.tsx index 8d8bf94..94c3417 100644 --- a/src/pages/draw/index.tsx +++ b/src/pages/draw/index.tsx @@ -11,7 +11,7 @@ import { notification, message } from 'antd' -import { useState } from 'react' +import { useLayoutEffect, useRef, useState } from 'react' import { drawStore, userStore } from '@/store' import OpenAiLogo from '@/components/OpenAiLogo' import { postImagesGenerations } from '@/request/api' @@ -24,6 +24,10 @@ function DrawPage() { const { token, setLoginModal } = userStore() const { historyDrawImages, clearhistoryDrawImages, addDrawImage } = drawStore() + const containerOneRef = useRef(null) + const containerTwoRef = useRef(null) + const [bottom, setBottom] = useState(0); + const [drawConfig, setDrawConfig] = useState({ prompt: '', n: 1, @@ -75,11 +79,28 @@ function DrawPage() { }) } + const handleScroll = () => { + const twoClientHeight = containerTwoRef.current?.clientHeight || 0; + const oneScrollTop = containerOneRef.current?.scrollTop || 0; + if(oneScrollTop > 100){ + setBottom(-(twoClientHeight + 100)); + }else{ + setBottom(0); + } + } + + useLayoutEffect(()=>{ + containerOneRef.current?.addEventListener('scroll', handleScroll); + return () => { + containerOneRef.current?.removeEventListener('scroll', handleScroll); + }; + },[]) + return (
-
+
-
+

图片尺寸({drawConfig.size})