Commit cad06772 authored by Ylg's avatar Ylg

complete new session mobile style

parent 192ec780
import logoSvg from '../../assets/logo.svg';
import copySvg from '../../assets/copy.svg';
import { Button } from 'antd';
import { Button, Col, Grid, Row } from 'antd';
import styles from './index.less';
import classNames from 'classnames';
interface IAnswerProps {
answerValue: string;
......@@ -9,36 +10,57 @@ interface IAnswerProps {
isShowRetry?: boolean;
}
const { useBreakpoint } = Grid;
const Answer = (props: IAnswerProps) => {
const { answerValue, loading, isShowRetry } = props
const screens = useBreakpoint();
const isMobile = screens.xs;
console.log('isMobile', isMobile)
return (
<div>
<p className={styles.question}>
<img src={logoSvg} alt="" />
<span>回答如下:</span>
<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>
</p>
<div className={styles.chat}>
<div>
<p
className={styles.copyAnswer}
onClick={() => {
}}
>
<img src={copySvg} alt="" />
<span>复制回答</span>
</p>
<div className={styles.answer}>
<p>{loading ? '请耐心等待3-5秒~' : answerValue}</p>
</div>
<div className={classNames(styles.answer, isMobile && styles.mobile_answer)}>
{
!isMobile &&
<p
className={styles.copyAnswer}
onClick={() => {
}}
>
<img src={copySvg} alt="" />
<span>复制回答</span>
</p>
}
<p className={styles.answerValue}>{loading ? '请耐心等待3-5秒~' : answerValue}</p>
</div>
{
isShowRetry && <Button>重试</Button>
isShowRetry && !isMobile && <Button className={styles.chat_retry}>重试</Button>
}
</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>
);
}
......
@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 {
margin-top: 40px;
width: 1000px;
.question {
display: flex;
align-items: center;
img {
align-items: flex-start;
.question_img {
width: 26px;
height: 26px;
}
span {
.question_span {
font-size: 20px;
font-weight: 600;
line-height: 26px;
color: #333333;
height: 28px;
margin-left: 16px;
}
}
.chat {
display: flex;
div {
.answer {
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 {
position: absolute;
bottom: 0;
......@@ -42,21 +62,11 @@
}
}
.answer {
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;
}
.answerValue {
padding: 16px;
}
}
button {
.chat_retry {
width: 90px;
height: 48px;
background: #FFFFFF;
......@@ -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 Issue from './issue.component';
import Answer from './answer.component';
import { Grid } from 'antd';
import classNames from 'classnames';
interface INewSessionProps {
questionValue: string;
answerValue: string;
}
const { useBreakpoint } = Grid;
const NewSession = (props: INewSessionProps) => {
const { questionValue, answerValue } = props;
const screens = useBreakpoint();
const isMobile = screens.xs;
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
questionValue={questionValue}
/>
......
import classNames from 'classnames';
import userSvg from '../../assets/user.svg';
import styles from './index.less';
import { Grid } from 'antd';
interface IIssueProps {
questionValue: string;
}
const { useBreakpoint } = Grid;
const Issue = (props: IIssueProps) => {
const { questionValue } = props;
const screens = useBreakpoint();
const isMobile = screens.xs;
console.log('isMobile', isMobile);
return (
<div className={styles.question} style={{ marginBottom: '40px' }}>
<img src={userSvg} alt="" />
<span>{questionValue}</span>
<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>
</div>
);
}
......
......@@ -31,7 +31,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');
......@@ -222,7 +222,6 @@ const Chat: React.FC = () => {
htmlType="submit"
type="primary"
size="large"
disabled={chat.length === 0}
>
发送
</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