Commit b98471c0 by weiyudumei

style: 删除所有max-w-[912px]宽度限制

1. 删除Protocol页面的max-w-[912px]限制
2. 删除Chat页面的对话项和输入容器宽度限制
3. 删除ChatSlogan组件的宽度限制
4. 删除Tools页面的标题和网格容器宽度限制
5. 删除Collect页面的收藏项、加载更多按钮和底部文本宽度限制
6. 删除Home页面的输入容器宽度限制
7. 删除HomeNew页面的输入容器宽度限制
8. 优化HomeNew页面的padding样式

现在页面内容可以充分利用可用空间,不再受912px宽度限制
parent c01bf4c6
......@@ -216,7 +216,7 @@ export const Chat: React.FC = () => {
>
<div className={styles.inter}>
{allItems.map((record, index) => (
<div className="w-full chatItem max-w-[912px] mx-auto" key={`${record.role}-${index}-${record.question || record.answerList?.[0]?.answer || ''}`}>
<div className="w-full chatItem mx-auto" key={`${record.role}-${index}-${record.question || record.answerList?.[0]?.answer || ''}`}>
{record.role === 'system' && <ChatWelcome />}
{record.role === 'user' && <ChatItemUser record={record} />}
{record.role === 'ai' && <ChatAnswerBox onSubmitQuestion={handleSubmitQuestion} isLastAnswer={index === allItems.length - 1} showIndex={0} record={record} index={index} />}
......@@ -226,7 +226,7 @@ export const Chat: React.FC = () => {
</motion.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 flex-shrink-0 sm:px-0 pb-[18px]">
<div className="absolute left-1/2 ml-[-20px] top-[-45px] sm:top-[-65px]">
<motion.div
initial="hidden"
......
......@@ -6,7 +6,7 @@ export const ChatSlogan: React.FC = () => {
const navigate = useNavigate()
return (
<div className="w-full">
<div className="h-[64px] max-w-[912px] mx-auto sm:h-[112px] flex flex-col justify-center">
<div className="h-[64px] mx-auto sm:h-[112px] flex flex-col justify-center">
<div className="flex items-center cursor-pointer" onClick={() => navigate('/')}>
<TextLogo className="w-[46px] sm:w-[70px]" />
<GradualSpacing text="晓得解惑,让沟通更智能" className="ml-[8px] text-[14px] sm:text-[16px] text-[#333] font-medium" />
......
......@@ -118,7 +118,7 @@ export const Collect: React.FC = () => {
{collectList.map((item: any, index: number) => (
<ShineBorder
borderRadius={20}
className="text-[#27353C] w-full max-w-[912px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]"
className="text-[#27353C] w-full mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]"
key={`${item.collectionId}_${index}`}
>
<div className="flex mb-[20px]">
......@@ -167,14 +167,14 @@ export const Collect: React.FC = () => {
</div>
)}
{!isLoading && collectList.length < total && (
<div className="w-full max-w-[912px] mx-auto flex justify-center mt-[24px]">
<div className="w-full mx-auto flex justify-center mt-[24px]">
<Button onPress={handleLoadMore} color="primary" variant="light">
加载更多
</Button>
</div>
)}
{collectList.length === total && collectList.length !== 0 && (
<div className="w-full mt-[24px] max-w-[912px] mx-auto flex justify-center text-[#8D9795]">到底啦~</div>
<div className="w-full mt-[24px] mx-auto flex justify-center text-[#8D9795]">到底啦~</div>
)}
</div>
</motion.div>
......
......@@ -78,7 +78,7 @@ export const Home: React.FC = () => {
)} */}
{/* /> */}
</div>
<div className="box-border px-[0] mx-auto iptContainer w-full max-w-[912px] flex-shrink-0 sm:px-0 pb-[18px]">
<div className="box-border px-[0] mx-auto iptContainer w-full flex-shrink-0 sm:px-0 pb-[18px]">
<ChatEditor showContentTips onSubmit={handleCreateConversation} placeholders={RECOMMEND_QUESTIONS_OTHER} />
<div className="hidden sm:block w-full text-center mt-[12px] text-[#3333334d] text-[12px]">
内容由AI模型生成,其准确性和完整性无法保证,仅供参考
......
......@@ -195,7 +195,7 @@ export const Home: React.FC = () => {
<div className="hidden sm:flex flex-1 h-full sm:mt-[-62px]">
<div
className="w-full h-full bg-transparent box-border rounded-[24px]"
style={{ height: 'calc(100vh - 64px)', background: '#FFFFFF' }}
style={{ height: 'calc(100vh - 64px)', background: '#FFFFFF', padding: '0 30px' }}
>
<Outlet />
{/* {showOutlet
......@@ -205,7 +205,7 @@ export const Home: React.FC = () => {
: (
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
<Slogan />
<div className="box-border px-[0] mx-auto iptContainer w-full max-w-[912px] flex-shrink-0 sm:px-0 pb-[18px]">
<div className="box-border px-[0] mx-auto iptContainer w-full flex-shrink-0 sm:px-0 pb-[18px]">
<ChatEditor
showContentTips
onSubmit={handleCreateConversation}
......
......@@ -357,7 +357,7 @@ export const Protocol: React.FC = () => {
<div className={`${styles.protocolPage} relative`}>
<ChatSlogan />
<ChatMaskBar />
<TracingBeam className="bg-[#fff] flex-1 text-[#27353C] w-full max-w-[912px] p-[24px] box-border mx-auto rounded-[20px]">
<TracingBeam className="bg-[#fff] flex-1 text-[#27353C] w-full p-[24px] box-border mx-auto rounded-[20px]">
<div className="pt-4 relative leading-[32px]">
{(id === '01' ? dummyContent01 : dummyContent02).map((item, index) => (
<div key={`content-${index}`}>
......
......@@ -59,8 +59,8 @@ export const Tools: React.FC = () => {
<div className="px-[24px] pb-[24px] pt-[42px] sm:pt-[80px] lg:pt-[180px] sm:px-0">
<Slogan />
<div>
<div className="max-w-[912px] flex mx-auto mt-[64px] text-18px text-[#5AA9D0] font-light">全部工具</div>
<div className="max-w-[912px] mx-auto gap-[20px] grid grid-cols-1 sm:grid-cols-3 mt-[22px] ">
<div className="flex mx-auto mt-[64px] text-18px text-[#5AA9D0] font-light">全部工具</div>
<div className="mx-auto gap-[20px] grid grid-cols-1 sm:grid-cols-3 mt-[22px] ">
{tools.map((item, index) => (
<motion.div className="col-span-1" key={index} onClick={() => handleClickToolItem(item)} {...getAnimationProps(index + 1)}>
<ShineBorder
......
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