Commit cad06772 authored by Ylg's avatar Ylg

complete new session mobile style

parent 192ec780
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 } from 'antd'; import { Button, Col, Grid, Row } from 'antd';
import styles from './index.less'; import styles from './index.less';
import classNames from 'classnames';
interface IAnswerProps { interface IAnswerProps {
answerValue: string; answerValue: string;
...@@ -9,18 +10,27 @@ interface IAnswerProps { ...@@ -9,18 +10,27 @@ interface IAnswerProps {
isShowRetry?: boolean; isShowRetry?: boolean;
} }
const { useBreakpoint } = Grid;
const Answer = (props: IAnswerProps) => { const Answer = (props: IAnswerProps) => {
const { answerValue, loading, isShowRetry } = props const { answerValue, loading, isShowRetry } = props
const screens = useBreakpoint();
const isMobile = screens.xs;
console.log('isMobile', isMobile)
return ( return (
<div> <div>
<p className={styles.question}> <p className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}>
<img src={logoSvg} alt="" /> <img src={logoSvg} alt="" className={styles.question_img } />
<span>回答如下:</span> <span className={classNames(isMobile && styles.mobile_question_span, styles.question_span)} style={{ marginLeft: isMobile ? '8px' : '16px' }}>回答如下:</span>
</p> </p>
<div className={styles.chat}> <div className={styles.chat}>
<div> <div className={classNames(styles.answer, isMobile && styles.mobile_answer)}>
{
!isMobile &&
<p <p
className={styles.copyAnswer} className={styles.copyAnswer}
onClick={() => { onClick={() => {
...@@ -30,15 +40,27 @@ const Answer = (props: IAnswerProps) => { ...@@ -30,15 +40,27 @@ const Answer = (props: IAnswerProps) => {
<img src={copySvg} alt="" /> <img src={copySvg} alt="" />
<span>复制回答</span> <span>复制回答</span>
</p> </p>
}
<div className={styles.answer}> <p className={styles.answerValue}>{loading ? '请耐心等待3-5秒~' : answerValue}</p>
<p>{loading ? '请耐心等待3-5秒~' : answerValue}</p>
</div>
</div> </div>
{ {
isShowRetry && <Button>重试</Button> isShowRetry && !isMobile && <Button className={styles.chat_retry}>重试</Button>
} }
</div> </div>
{
isMobile &&
<div className={styles.mobile_button}>
<Button className={styles.mobile_copyAnswer}>
<img src={copySvg} alt="" />
<span>复制回答</span>
</Button>
<Button
className={styles.mobile_chat_retry}
>
重试
</Button>
</div>
}
</div> </div>
); );
} }
......
@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 {
margin-top: 40px;
width: 1000px; width: 1000px;
.question { .question {
display: flex; display: flex;
align-items: center; align-items: flex-start;
img { .question_img {
width: 26px; width: 26px;
height: 26px; height: 26px;
} }
span { .question_span {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
line-height: 26px; line-height: 26px;
color: #333333; color: #333333;
height: 28px;
margin-left: 16px;
} }
} }
.chat { .chat {
display: flex; display: flex;
div { .answer {
position: relative; position: relative;
width: 900px;
margin-left: 28px;
background: #F0F3F6;
border-radius: 4px;
font-size: 18px;
color: rgba(0,0,0,0.85);
line-height: 32px;
min-height: 268px;
.copyAnswer { .copyAnswer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -42,21 +62,11 @@ ...@@ -42,21 +62,11 @@
} }
} }
.answer { .answerValue {
width: 900px;
margin-left: 28px;
background: #F0F3F6;
border-radius: 4px;
font-size: 18px;
color: rgba(0,0,0,0.85);
line-height: 32px;
min-height: 268px;
p {
padding: 16px; padding: 16px;
} }
} }
} .chat_retry {
button {
width: 90px; width: 90px;
height: 48px; height: 48px;
background: #FFFFFF; background: #FFFFFF;
...@@ -74,4 +84,34 @@ ...@@ -74,4 +84,34 @@
} }
} }
} }
.mobile_button {
display: flex;
justify-content: space-around;
margin-top: 16px;
margin-left: 24px;
.mobile_copyAnswer {
width: 151px;
height: 40px;
background: rgba(0,155,149,0.12);
border-radius: 4px;
img {
width: 24px;
height: 24px;
}
span {
color: #009B95;
line-height: 20px;
height: 24px;
font-size: 14px;
}
}
.mobile_chat_retry {
width: 151px;
height: 40px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #009B95;
color: #009B95;
}
}
} }
\ No newline at end of file
import styles from './index.less'; 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 classNames from 'classnames';
interface INewSessionProps { interface INewSessionProps {
questionValue: string; questionValue: string;
answerValue: string; answerValue: string;
} }
const { useBreakpoint } = Grid;
const NewSession = (props: INewSessionProps) => { const NewSession = (props: INewSessionProps) => {
const { questionValue, answerValue } = props; const { questionValue, answerValue } = props;
const screens = useBreakpoint();
const isMobile = screens.xs;
return ( return (
<div className={styles.newSession}> <div className={classNames(isMobile && styles.mobile_newSession, styles.newSession)}>
<Issue
questionValue={questionValue}
/>
<Answer
answerValue={answerValue}
loading
/>
<Issue
questionValue={questionValue}
/>
<Answer
answerValue={answerValue}
loading
/>
<Issue
questionValue={questionValue}
/>
<Answer
answerValue={answerValue}
loading
/>
<Issue <Issue
questionValue={questionValue} questionValue={questionValue}
/> />
......
import classNames from 'classnames';
import userSvg from '../../assets/user.svg'; import userSvg from '../../assets/user.svg';
import styles from './index.less'; import styles from './index.less';
import { Grid } from 'antd';
interface IIssueProps { interface IIssueProps {
questionValue: string; questionValue: string;
} }
const { useBreakpoint } = Grid;
const Issue = (props: IIssueProps) => { const Issue = (props: IIssueProps) => {
const { questionValue } = props; const { questionValue } = props;
const screens = useBreakpoint();
const isMobile = screens.xs;
console.log('isMobile', isMobile);
return ( return (
<div className={styles.question} style={{ marginBottom: '40px' }}> <div className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}>
<img src={userSvg} alt="" /> <img src={userSvg} alt="" className={styles.question_img } />
<span>{questionValue}</span> <span className={classNames(isMobile && styles.mobile_question_span, styles.question_span)} style={{ marginLeft: isMobile ? '8px' : '16px' }}>{questionValue}</span>
</div> </div>
); );
} }
......
...@@ -31,7 +31,7 @@ const Chat: React.FC = () => { ...@@ -31,7 +31,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');
...@@ -222,7 +222,6 @@ const Chat: React.FC = () => { ...@@ -222,7 +222,6 @@ const Chat: React.FC = () => {
htmlType="submit" htmlType="submit"
type="primary" type="primary"
size="large" size="large"
disabled={chat.length === 0}
> >
发送 发送
</Button> </Button>
......
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