Commit 60ab9523 authored by Ylg's avatar Ylg

adjust mobile style

parent b2203c5d
import logoSvg from '../../assets/logo.svg'; import logoSvg from '../../assets/logo.svg';
import copySvg from '../../assets/copy.svg'; import copySvg from '../../assets/copy.svg';
import { Button, Col, Grid, Row } from 'antd'; import { Button, Grid } from 'antd';
import styles from './index.less'; import styles from './index.less';
import classNames from 'classnames';
interface IAnswerProps { interface IAnswerProps {
answerValue: string; answerValue: string;
...@@ -25,10 +24,24 @@ const Answer = (props: IAnswerProps) => { ...@@ -25,10 +24,24 @@ const Answer = (props: IAnswerProps) => {
<div> <div>
<p className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}> <p className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}>
<img src={logoSvg} alt="" className={styles.question_img } /> <img src={logoSvg} alt="" className={styles.question_img } />
<span className={classNames(isMobile && styles.mobile_question_span, styles.question_span)} style={{ marginLeft: isMobile ? '8px' : '16px' }}>回答如下:</span> <span
className={styles.question_span}
style={{
marginLeft: isMobile ? '8px' : '16px',
fontSize: isMobile ? '18px': '20px',
}}>
回答如下:
</span>
</p> </p>
<div className={styles.chat}> <div className={styles.chat}>
<div className={classNames(styles.answer, isMobile && styles.mobile_answer)}> <div
className={styles.answer}
style={{
width: isMobile ? '316px' : '900px',
fontSize: isMobile ? '16px': '18px',
lineHeight: isMobile ? '28px': '32px',
}}
>
{ {
!isMobile && !isMobile &&
<p <p
......
@import (reference) '~antd/es/style/themes/index'; @import (reference) '~antd/es/style/themes/index';
.mobile_newSession {
padding: 48px 16px 16px;
width: 100% !important;
}
.mobile_question_span {
font-size: 18px !important;
}
.mobile_answer {
width: 316px !important;
font-size: 16px !important;
line-height: 28px !important;
}
.newSession { .newSession {
width: 1000px; width: 1000px;
.question { .question {
......
...@@ -2,7 +2,6 @@ import styles from './index.less'; ...@@ -2,7 +2,6 @@ import styles from './index.less';
import Issue from './issue.component'; import Issue from './issue.component';
import Answer from './answer.component'; import Answer from './answer.component';
import { Grid } from 'antd'; import { Grid } from 'antd';
import classNames from 'classnames';
interface INewSessionProps { interface INewSessionProps {
questionValue: string; questionValue: string;
...@@ -19,7 +18,10 @@ const NewSession = (props: INewSessionProps) => { ...@@ -19,7 +18,10 @@ const NewSession = (props: INewSessionProps) => {
const isMobile = screens.xs; const isMobile = screens.xs;
return ( return (
<div className={classNames(isMobile && styles.mobile_newSession, styles.newSession)}> <div className={styles.newSession} style={{
padding: isMobile ? '48px 16px 16px' : '0',
width: isMobile ? '100%' : '1000px'
}}>
<Issue <Issue
questionValue={questionValue} questionValue={questionValue}
/> />
......
...@@ -21,7 +21,15 @@ const Issue = (props: IIssueProps) => { ...@@ -21,7 +21,15 @@ const Issue = (props: IIssueProps) => {
return ( return (
<div className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}> <div className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}>
<img src={userSvg} alt="" className={styles.question_img } /> <img src={userSvg} alt="" className={styles.question_img } />
<span className={classNames(isMobile && styles.mobile_question_span, styles.question_span)} style={{ marginLeft: isMobile ? '8px' : '16px' }}>{questionValue}</span> <span
className={styles.question_span}
style={{
marginLeft: isMobile ? '8px' : '16px',
fontSize: isMobile ? '18px': '20px',
}}
>
{questionValue}
</span>
</div> </div>
); );
} }
......
...@@ -30,7 +30,7 @@ const Chat: React.FC = () => { ...@@ -30,7 +30,7 @@ const Chat: React.FC = () => {
const [selectSiderTabs, setSelectSiderTabs] = useState(''); const [selectSiderTabs, setSelectSiderTabs] = useState('');
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const tabShow = showSider; const tabShow = showSider && !isMobile;
const questionValue = form.getFieldValue('chatInput'); const questionValue = form.getFieldValue('chatInput');
......
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