Commit 60ab9523 authored by Ylg's avatar Ylg

adjust mobile style

parent b2203c5d
import logoSvg from '../../assets/logo.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 classNames from 'classnames';
interface IAnswerProps {
answerValue: string;
......@@ -25,10 +24,24 @@ const Answer = (props: IAnswerProps) => {
<div>
<p className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}>
<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>
<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 &&
<p
......
@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 {
width: 1000px;
.question {
......
......@@ -2,7 +2,6 @@ import styles from './index.less';
import Issue from './issue.component';
import Answer from './answer.component';
import { Grid } from 'antd';
import classNames from 'classnames';
interface INewSessionProps {
questionValue: string;
......@@ -19,7 +18,10 @@ const NewSession = (props: INewSessionProps) => {
const isMobile = screens.xs;
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
questionValue={questionValue}
/>
......
......@@ -21,7 +21,15 @@ const Issue = (props: IIssueProps) => {
return (
<div className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}>
<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>
);
}
......
......@@ -30,7 +30,7 @@ const Chat: React.FC = () => {
const [selectSiderTabs, setSelectSiderTabs] = useState('');
const [open, setOpen] = useState(false);
const tabShow = showSider;
const tabShow = showSider && !isMobile;
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