Skip to content

S
sdream-ai-fe
Commit c92cf151 by HoMeTown
Options

feat: h5媒体查询适配

parent e54c9b0a
Showing with 21 additions and 24 deletions
src/pages/Chat/Chat.tsx
...@@ -201,7 +201,7 @@ export const Chat: React.FC = () => { ...@@ -201,7 +201,7 @@ export const Chat: React.FC = () => {
)} )}
</div> </div>
<div className="relative box-border px-[0] mx-auto iptContainer w-full max-w-[912px] flex-shrink-0 sm:px-0 pb-[18px]"> <div className="relative box-border px-[0] mx-auto iptContainer w-full max-w-[912px] flex-shrink-0 sm:px-0 pb-[18px]">
<div className="absolute left-1/2 ml-[-20px] top-[-65px]"> <div className="absolute left-1/2 ml-[-20px] top-[-45px] sm:top-[-65px]">
<motion.div <motion.div
initial="hidden" initial="hidden"
animate={(position?.top as number) < -20 ? 'visible' : 'hidden'} animate={(position?.top as number) < -20 ? 'visible' : 'hidden'}
...@@ -218,7 +218,7 @@ export const Chat: React.FC = () => { ...@@ -218,7 +218,7 @@ export const Chat: React.FC = () => {
</div> </div>
<ChatEditor onSubmit={handleSubmitQuestion} placeholders={RECOMMEND_QUESTIONS_OTHER} /> <ChatEditor onSubmit={handleSubmitQuestion} placeholders={RECOMMEND_QUESTIONS_OTHER} />
<div className="w-full text-center mt-[12px] text-[#3333334d] text-[12px]"> <div className="hidden sm:block w-full text-center mt-[12px] text-[#3333334d] text-[12px]">
内容由AI模型生成，其准确性和完整性无法保证，仅供参考 内容由AI模型生成，其准确性和完整性无法保证，仅供参考
</div> </div>
</div> </div>
......
src/pages/Chat/components/ChatItem/ChatAnswerAttchment.tsx
...@@ -63,11 +63,8 @@ export const ChatAnswerAttachment: React.FC<ChatAnswerAttachmentProps> = ({ from ...@@ -63,11 +63,8 @@ export const ChatAnswerAttachment: React.FC<ChatAnswerAttachmentProps> = ({ from
篇资料作为参考： 篇资料作为参考：
</p> </p>
<div className="flex flex-col gap-[9px]"> <div className="flex flex-col gap-[9px]">
{ attachment.content.docList.map((doc, docIdx) => ( { attachment.content.docList.map(doc => (
<Link className="cursor-pointer" onPress={() => handleClickDocLink(doc.documentName)} size="sm" key={doc.documentName} isExternal showAnchorIcon underline="hover"> <Link className="cursor-pointer" onPress={() => handleClickDocLink(doc.documentName)} size="sm" key={doc.documentName} isExternal showAnchorIcon underline="hover">
{docIdx + 1}
.
{' '}
{doc.documentAlias} {doc.documentAlias}
</Link> </Link>
))} ))}
......
src/pages/Chat/components/ChatItem/ChatAnswerBox.tsx
...@@ -52,9 +52,9 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex, ...@@ -52,9 +52,9 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
index === showIndex && ( index === showIndex && (
<div className="chatItemBotContainer w-full" key={`${item.recordId}-${index}`}> <div className="chatItemBotContainer w-full" key={`${item.recordId}-${index}`}>
<div className="flex"> <div className="flex">
<Avatar className="flex-shrink-0" src={AvatarBot} /> <Avatar className="sm:mr-[20px] hidden sm:block flex-shrink-0" src={AvatarBot} />
<div <div
className="ml-[12px] sm:ml-[20px] bg-white rounded-[20px] box-border px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]" className="bg-white rounded-[20px] box-border px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]"
> >
{(item.answer?.length || item.cardList?.length) {(item.answer?.length || item.cardList?.length)
? ( ? (
...@@ -79,7 +79,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex, ...@@ -79,7 +79,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
&& isShowRecommend && isShowRecommend
&& recommendUseAnswer && recommendUseAnswer
&& <ChatAnswerRecommend onSubmitQuestion={onSubmitQuestion} answer={recommendUseAnswer} />} && <ChatAnswerRecommend onSubmitQuestion={onSubmitQuestion} answer={recommendUseAnswer} />}
<div className="h-[32px] w-full"></div> <div className="h-[20px] sm:h-[32px] w-full"></div>
</div> </div>
) )
) )
......
src/pages/Chat/components/ChatItem/ChatAnswerShower.tsx
...@@ -15,7 +15,7 @@ export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer, isLa ...@@ -15,7 +15,7 @@ export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer, isLa
return ( return (
<div className="answerShower"> <div className="answerShower">
{answer.answer && ( {answer.answer && (
<div className={answer.cardList?.length ? 'sm:mb-[20px]' : ''}> <div className={answer.cardList?.length ? 'mb-[12px] sm:mb-[20px]' : ''}>
<MarkdownDetail> <MarkdownDetail>
{formatMarkdown(answer.answer || '')} {formatMarkdown(answer.answer || '')}
</MarkdownDetail> </MarkdownDetail>
......
src/pages/Chat/components/ChatItem/ChatItemUser.tsx
...@@ -11,10 +11,10 @@ export const ChatItemUser: React.FC<ChatItemUserProps> = ({ record }) => { ...@@ -11,10 +11,10 @@ export const ChatItemUser: React.FC<ChatItemUserProps> = ({ record }) => {
<div className="chatItemUser"> <div className="chatItemUser">
<div className="flex justify-end"> <div className="flex justify-end">
<div className="sm:block w-[65px] flex-shrink-0"></div> <div className="sm:block w-[65px] flex-shrink-0"></div>
<div className="text-[15px] mr-[20px] bg-[#29B6FD] rounded-[20px] box-border text-[#fff] px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]">{record.question}</div> <div className="text-[15px] bg-[#29B6FD] rounded-[20px] box-border text-[#fff] px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]">{record.question}</div>
<Avatar className="flex-shrink-0" src={AvatarUser} /> <Avatar className="hidden sm:block ml-[20px] flex-shrink-0" src={AvatarUser} />
</div> </div>
<div className="h-[32px] w-full"></div> <div className="h-[20px] sm:h-[32px] w-full"></div>
</div> </div>
) )
} }
src/pages/Chat/components/ChatMaskBar/index.tsx
export const ChatMaskBar: React.FC = () => { export const ChatMaskBar: React.FC = () => {
return ( return (
<div className="absolute top-[85px] w-full h-[32px] z-[2] sm:top-[110px] bg-gradient-to-b from-[hsl(var(--sdream-background))] to-transparent"></div> <div className="absolute top-[64px] w-full h-[32px] z-[2] sm:top-[110px] bg-gradient-to-b from-[hsl(var(--sdream-background))] to-transparent"></div>
) )
} }
src/pages/Chat/components/ChatSlogan/ChatSlogan.tsx
...@@ -6,12 +6,12 @@ export const ChatSlogan: React.FC = () => { ...@@ -6,12 +6,12 @@ export const ChatSlogan: React.FC = () => {
const navigate = useNavigate() const navigate = useNavigate()
return ( return (
<div className="w-full"> <div className="w-full">
<div className="h-[86px] max-w-[912px] mx-auto sm:h-[112px] flex flex-col justify-center"> <div className="h-[64px] max-w-[912px] mx-auto sm:h-[112px] flex flex-col justify-center">
<div className="flex items-center cursor-pointer" onClick={() => navigate('/')}> <div className="flex items-center cursor-pointer" onClick={() => navigate('/')}>
<TextLogo className="w-[70px]" /> <TextLogo className="w-[46px] sm:w-[70px]" />
<GradualSpacing text="晓得解惑，让沟通更智能" className="ml-[8px] text-[16px] text-[#333] font-medium" /> <GradualSpacing text="晓得解惑，让沟通更智能" className="ml-[8px] text-[14px] sm:text-[16px] text-[#333] font-medium" />
</div> </div>
<h3 className="text-[12px] text-[#333] font-light">知晓市场脉搏，引领行业潮流，晓得AI助手全方位为您保驾护航</h3> <h3 className="hidden sm:block text-[12px] text-[#333] font-light">知晓市场脉搏，引领行业潮流，晓得AI助手全方位为您保驾护航</h3>
</div> </div>
</div> </div>
) )
......
src/pages/Chat/components/ChatWelcome/index.tsx
...@@ -5,19 +5,19 @@ import AvatarBot from '@/assets/avatarBot.png' ...@@ -5,19 +5,19 @@ import AvatarBot from '@/assets/avatarBot.png'
export const ChatWelcome: React.FC = () => { export const ChatWelcome: React.FC = () => {
return ( return (
<div className="chatWelcomeContainer w-full"> <div className="chatWelcomeContainer w-full">
<div className="h-[32px] w-full"></div> <div className="h-[20px] sm:h-[32px] w-full"></div>
<div className="flex"> <div className="flex">
<Avatar className="flex-shrink-0" src={AvatarBot} /> <Avatar className="mr-[12px] hidden sm:block flex-shrink-0" src={AvatarBot} />
<motion.div <motion.div
className="ml-[12px] sm:ml-[20px] bg-white rounded-[20px] box-border px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]" className="sm:ml-[20px] bg-white rounded-[20px] box-border px-[16px] py-[16px] sm:px-[24px] sm:py-[20px]"
> >
<div className="content"> <div className="content">
<p className="text-[16px] sm:text-[18px] font-medium text-[#333]">您好，我是晓得</p> <p className="text-[16px] sm:text-[18px] font-medium text-[#333]">您好，我是晓得</p>
<p className="text-[15px] sm:mt-[8px] sm:text-13px text-[#27353C] font-300">作为您的智能保险伙伴，您有各类专业相关的问题都可以抛给我哟~让我们互相帮助共同成长吧~</p> <p className="text-[15px] mt-[4px] sm:mt-[8px] sm:text-13px text-[#27353C] font-300">作为您的智能保险伙伴，您有各类专业相关的问题都可以抛给我哟~让我们互相帮助共同成长吧~</p>
</div> </div>
</motion.div> </motion.div>
</div> </div>
<div className="h-[32px] w-full"></div> <div className="h-[20px] sm:h-[32px] w-full"></div>
</div> </div>
) )
} }
src/pages/Collect/Collect.module.less
...@@ -37,5 +37,5 @@ ...@@ -37,5 +37,5 @@
flex-shrink: 0; flex-shrink: 0;
height: fit-content; height: fit-content;
width: 100%; width: 100%;
padding: 32px 0; padding: 0 0 32px 0;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment