feat: 评论界面
This commit is contained in:
landaiqing
1
src/assets/icons/favorite.svg
Normal file
1
src/assets/icons/favorite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg t="1720834001446" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4550" width="200" height="200"><path d="M512 512.8704m-432.3328 0a432.3328 432.3328 0 1 0 864.6656 0 432.3328 432.3328 0 1 0-864.6656 0Z" fill="#F8A10F" p-id="4551"></path><path d="M287.0272 418.7136c-85.0432 0-160.4096 41.3696-207.104 105.0624 4.5568 182.7328 122.368 337.3056 285.952 396.032 103.2192-33.28 177.92-130.048 177.92-244.3776 0-141.7216-114.944-256.7168-256.768-256.7168z" fill="#FFBD48" p-id="4552"></path><path d="M573.184 251.4944L624.64 355.7888a45.8752 45.8752 0 0 0 34.5088 25.088l115.0976 16.7424c37.5808 5.4784 52.5824 51.6608 25.3952 78.1824l-83.3024 81.2032a45.78816 45.78816 0 0 0-13.1584 40.5504l19.6608 114.6368c6.4 37.4272-32.8704 65.9968-66.5088 48.3328l-102.9632-54.1184a45.8496 45.8496 0 0 0-42.6496 0l-102.9632 54.1184c-33.6384 17.664-72.9088-10.8544-66.5088-48.3328l19.6608-114.6368c2.56-14.848-2.3552-30.0544-13.1584-40.5504L264.4992 475.7504c-27.1872-26.5216-12.1856-72.704 25.3952-78.1824l115.0976-16.7424a45.63968 45.63968 0 0 0 34.5088-25.088L491.008 251.4944c16.7936-34.048 65.3824-34.048 82.176 0z" fill="#FFFFFF" p-id="4553"></path><path d="M510.7712 706.3552a45.8496 45.8496 0 0 1 42.6496 0l102.9632 54.1184c33.6384 17.664 72.9088-10.8544 66.5088-48.3328l-19.6608-114.6368c-2.56-14.848 2.3552-30.0544 13.1584-40.5504l-205.6192 149.4016z" fill="#FFEACC" p-id="4554"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
1
src/assets/icons/like.svg
Normal file
1
src/assets/icons/like.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg t="1720833921345" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1614" width="200" height="200"><path d="M511.4368 512m-432.3328 0a432.3328 432.3328 0 1 0 864.6656 0 432.3328 432.3328 0 1 0-864.6656 0Z" fill="#FF6161" p-id="1615"></path><path d="M286.464 417.8432c-85.0432 0-160.4096 41.3696-207.104 105.0624 4.5568 182.7328 122.368 337.3056 285.952 396.032 103.2192-33.28 177.92-130.048 177.92-244.3776 0-141.7728-114.944-256.7168-256.768-256.7168z" fill="#FF7D7D" p-id="1616"></path><path d="M342.6304 721.6128h6.7584V427.9808h-6.7584c-36.096 0-65.3824 29.2864-65.3824 65.3824v162.9184c0.0512 36.0448 29.2864 65.3312 65.3824 65.3312z" fill="#FFCAC7" p-id="1617"></path><path d="M710.656 390.9632h-136.8064c10.6496-34.9696 24.9344-106.8032-25.088-137.1648-23.5008-14.1824-78.8992-24.1664-77.568 37.9904 1.28 62.1568-2.2528 130.4064-81.152 136.192v293.632h280.2688c31.744 0 59.136-22.3232 65.4848-53.4528l40.2944-196.9152c8.5504-41.472-23.0912-80.2816-65.4336-80.2816z" fill="#FFFFFF" p-id="1618"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -8,8 +8,6 @@ import {
|
|||||||
HeartOutlined,
|
HeartOutlined,
|
||||||
InfoCircleOutlined,
|
InfoCircleOutlined,
|
||||||
LeftOutlined,
|
LeftOutlined,
|
||||||
LikeOutlined,
|
|
||||||
StarOutlined,
|
|
||||||
TagsOutlined,
|
TagsOutlined,
|
||||||
WarningOutlined,
|
WarningOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
@@ -22,6 +20,8 @@ import { Typography } from "antd";
|
|||||||
import Comment from "@/components/Main/Share/components/ShareDetail/components/Comment";
|
import Comment from "@/components/Main/Share/components/ShareDetail/components/Comment";
|
||||||
import getRandomColor from "@/constant/random-color.ts";
|
import getRandomColor from "@/constant/random-color.ts";
|
||||||
const { Paragraph } = Typography;
|
const { Paragraph } = Typography;
|
||||||
|
import like from "@/assets/icons/like.svg";
|
||||||
|
import favorite from "@/assets/icons/favorite.svg";
|
||||||
const ShareDetail: React.FunctionComponent = () => {
|
const ShareDetail: React.FunctionComponent = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
return (
|
return (
|
||||||
@@ -139,7 +139,7 @@ const ShareDetail: React.FunctionComponent = () => {
|
|||||||
justify={"space-between"}
|
justify={"space-between"}
|
||||||
align={"center"}>
|
align={"center"}>
|
||||||
<div>
|
<div>
|
||||||
<Avatar src={logo}></Avatar>
|
<Avatar src={logo as any}></Avatar>
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
marginLeft: 10,
|
marginLeft: 10,
|
||||||
@@ -196,11 +196,12 @@ const ShareDetail: React.FunctionComponent = () => {
|
|||||||
</Tag>
|
</Tag>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
<Flex vertical={false} align={"center"} justify={"center"}>
|
<Flex vertical={false} align={"center"} justify={"center"} style={{height: 50}}>
|
||||||
<LikeOutlined style={{ fontSize: 30, color: "red" }} />
|
<Avatar className={styles.like_icon} src={like as any} size={"large"}></Avatar>
|
||||||
<StarOutlined
|
<Avatar
|
||||||
style={{ fontSize: 30, marginLeft: 20, color: "orange" }}
|
className={styles.favtorie_icon}
|
||||||
/>
|
src={favorite as any}
|
||||||
|
size={"large"}></Avatar>
|
||||||
</Flex>
|
</Flex>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
.like_icon {
|
||||||
|
font-size: 13px;
|
||||||
|
color: grey;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.like_icon:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
color: #ce1111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment_icon{
|
||||||
|
font-size: 13px;
|
||||||
|
color: grey;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.comment_icon:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
color: #08a327;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,15 +1,23 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { ProCard } from "@ant-design/pro-components";
|
import { ProCard } from "@ant-design/pro-components";
|
||||||
import { Avatar, Button, Flex, Input, Segmented } from "antd";
|
import { Avatar, Button, Flex, Input, Segmented, Tag } from "antd";
|
||||||
import logo from "@/assets/icons/gitee.svg";
|
import logo from "@/assets/icons/gitee.svg";
|
||||||
import {
|
import {
|
||||||
BarsOutlined,
|
BarsOutlined,
|
||||||
|
CloseOutlined,
|
||||||
|
CommentOutlined,
|
||||||
|
CrownOutlined,
|
||||||
FireOutlined,
|
FireOutlined,
|
||||||
|
LikeOutlined,
|
||||||
PictureOutlined,
|
PictureOutlined,
|
||||||
SendOutlined,
|
SendOutlined,
|
||||||
SmileOutlined,
|
SmileOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
|
import { useState } from "react";
|
||||||
|
import styles from "./index.module.less";
|
||||||
const Comment = () => {
|
const Comment = () => {
|
||||||
|
const [isReply, setIsReply] = useState<boolean>(false);
|
||||||
|
const [isReplyComment, setIsReplyComment] = useState<boolean>(false);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
@@ -51,6 +59,458 @@ const Comment = () => {
|
|||||||
{ label: "最热", value: "Kanban", icon: <FireOutlined /> },
|
{ label: "最热", value: "Kanban", icon: <FireOutlined /> },
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
<Flex vertical={true} style={{ marginTop: 20, width: "100%" }}>
|
||||||
|
<Flex vertical={false}>
|
||||||
|
<Flex vertical={true} justify={"flex-start"}>
|
||||||
|
<Avatar src={logo as any} size={"large"}></Avatar>
|
||||||
|
</Flex>
|
||||||
|
<Flex vertical={true} style={{ marginLeft: 15, width: "100%" }}>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<span style={{ fontSize: 16, fontWeight: 500 }}>
|
||||||
|
landaiqing
|
||||||
|
</span>
|
||||||
|
<Tag
|
||||||
|
bordered={false}
|
||||||
|
icon={<CrownOutlined />}
|
||||||
|
color={"cyan"}
|
||||||
|
style={{ marginLeft: 5 }}>
|
||||||
|
作者
|
||||||
|
</Tag>
|
||||||
|
</Flex>
|
||||||
|
<ProCard
|
||||||
|
bordered={true}
|
||||||
|
boxShadow={false}
|
||||||
|
extra={<></>}
|
||||||
|
style={{ width: "100%" }}>
|
||||||
|
<span>
|
||||||
|
i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是
|
||||||
|
</span>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
style={{ marginTop: 10, width: "100%" }}>
|
||||||
|
<span style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
1 小时前
|
||||||
|
</span>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<LikeOutlined className={styles.like_icon} />
|
||||||
|
<span style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
10
|
||||||
|
</span>
|
||||||
|
</Flex>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<CommentOutlined className={styles.comment_icon} />
|
||||||
|
<span style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
10
|
||||||
|
</span>
|
||||||
|
</Flex>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
size={"small"}
|
||||||
|
onClick={() => setIsReply(true)}
|
||||||
|
style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
回复
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</ProCard>
|
||||||
|
{isReply && (
|
||||||
|
<>
|
||||||
|
<Flex vertical={true}>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<span style={{ fontSize: 13 }}> 回复： </span>
|
||||||
|
<span style={{ fontSize: 13 }}>
|
||||||
|
{" "}
|
||||||
|
landaiqing
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
icon={<CloseOutlined />}
|
||||||
|
style={{ fontSize: 13, marginLeft: 5 }}
|
||||||
|
type={"dashed"}
|
||||||
|
onClick={() => setIsReply(false)}
|
||||||
|
size={"small"}>
|
||||||
|
{" "}
|
||||||
|
取消回复
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
<Flex vertical={false} style={{ marginTop: 5 }}>
|
||||||
|
<Flex vertical={true} justify={"flex-start"}>
|
||||||
|
<Avatar
|
||||||
|
src={logo as any}
|
||||||
|
size={"default"}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
<Flex vertical={true} style={{ width: "100%" }}>
|
||||||
|
<Input.TextArea
|
||||||
|
style={{
|
||||||
|
marginLeft: 10,
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
rows={3}
|
||||||
|
maxLength={500}
|
||||||
|
showCount
|
||||||
|
placeholder={
|
||||||
|
"平等表达，友善交流"
|
||||||
|
}></Input.TextArea>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
align={"center"}
|
||||||
|
style={{
|
||||||
|
marginTop: 10,
|
||||||
|
marginLeft: 10,
|
||||||
|
}}>
|
||||||
|
<SmileOutlined
|
||||||
|
style={{
|
||||||
|
fontSize: 20,
|
||||||
|
color: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<PictureOutlined
|
||||||
|
style={{
|
||||||
|
marginLeft: 20,
|
||||||
|
fontSize: 20,
|
||||||
|
color: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
align={"center"}
|
||||||
|
justify={"flex-end"}>
|
||||||
|
<Button
|
||||||
|
icon={<SendOutlined />}
|
||||||
|
type={"primary"}>
|
||||||
|
发表
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Flex vertical={false}>
|
||||||
|
<Flex vertical={true} justify={"flex-start"}>
|
||||||
|
<Avatar src={logo as any} size={"default"}></Avatar>
|
||||||
|
</Flex>
|
||||||
|
<Flex
|
||||||
|
vertical={true}
|
||||||
|
style={{ marginLeft: 15, width: "100%" }}>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<span style={{ fontSize: 14, fontWeight: 500 }}>
|
||||||
|
sjm 回复 landaiqing
|
||||||
|
</span>
|
||||||
|
{/*<Tag*/}
|
||||||
|
{/* bordered={false}*/}
|
||||||
|
{/* icon={<CrownOutlined />}*/}
|
||||||
|
{/* color={"cyan"}*/}
|
||||||
|
{/* style={{ marginLeft: 5 }}>*/}
|
||||||
|
{/* 作者*/}
|
||||||
|
{/*</Tag>*/}
|
||||||
|
</Flex>
|
||||||
|
<ProCard
|
||||||
|
bordered={true}
|
||||||
|
boxShadow={false}
|
||||||
|
extra={<></>}
|
||||||
|
style={{ width: "100%" }}>
|
||||||
|
<span>
|
||||||
|
i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是
|
||||||
|
</span>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
style={{ marginTop: 10, width: "100%" }}>
|
||||||
|
<span style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
1 小时前
|
||||||
|
</span>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<LikeOutlined
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
color: "grey",
|
||||||
|
marginLeft: 10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
10
|
||||||
|
</span>
|
||||||
|
</Flex>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<CommentOutlined
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
color: "grey",
|
||||||
|
marginLeft: 10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
10
|
||||||
|
</span>
|
||||||
|
</Flex>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
size={"small"}
|
||||||
|
onClick={() => setIsReplyComment(true)}
|
||||||
|
style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
回复
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</ProCard>
|
||||||
|
{isReplyComment && (
|
||||||
|
<>
|
||||||
|
<Flex vertical={true}>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<span style={{ fontSize: 13 }}>
|
||||||
|
{" "}
|
||||||
|
回复：{" "}
|
||||||
|
</span>
|
||||||
|
<span style={{ fontSize: 13 }}>
|
||||||
|
{" "}
|
||||||
|
landaiqing
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
icon={<CloseOutlined />}
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
marginLeft: 5,
|
||||||
|
}}
|
||||||
|
type={"dashed"}
|
||||||
|
onClick={() =>
|
||||||
|
setIsReplyComment(false)
|
||||||
|
}
|
||||||
|
size={"small"}>
|
||||||
|
{" "}
|
||||||
|
取消回复
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
style={{ marginTop: 5 }}>
|
||||||
|
<Flex
|
||||||
|
vertical={true}
|
||||||
|
justify={"flex-start"}>
|
||||||
|
<Avatar
|
||||||
|
src={logo as any}
|
||||||
|
size={"default"}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
<Flex
|
||||||
|
vertical={true}
|
||||||
|
style={{ width: "100%" }}>
|
||||||
|
<Input.TextArea
|
||||||
|
style={{
|
||||||
|
marginLeft: 10,
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
rows={3}
|
||||||
|
maxLength={500}
|
||||||
|
showCount
|
||||||
|
placeholder={
|
||||||
|
"平等表达，友善交流"
|
||||||
|
}></Input.TextArea>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
align={"center"}
|
||||||
|
style={{
|
||||||
|
marginTop: 10,
|
||||||
|
marginLeft: 10,
|
||||||
|
}}>
|
||||||
|
<SmileOutlined
|
||||||
|
style={{
|
||||||
|
fontSize: 20,
|
||||||
|
color: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<PictureOutlined
|
||||||
|
style={{
|
||||||
|
marginLeft: 20,
|
||||||
|
fontSize: 20,
|
||||||
|
color: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
align={"center"}
|
||||||
|
justify={"flex-end"}>
|
||||||
|
<Button
|
||||||
|
icon={<SendOutlined />}
|
||||||
|
type={"primary"}>
|
||||||
|
发表
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
<Flex vertical={false}>
|
||||||
|
<Flex vertical={true} justify={"flex-start"}>
|
||||||
|
<Avatar src={logo as any} size={"default"}></Avatar>
|
||||||
|
</Flex>
|
||||||
|
<Flex
|
||||||
|
vertical={true}
|
||||||
|
style={{ marginLeft: 15, width: "100%" }}>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<span style={{ fontSize: 14, fontWeight: 500 }}>
|
||||||
|
sjm 回复 landaiqing
|
||||||
|
</span>
|
||||||
|
{/*<Tag*/}
|
||||||
|
{/* bordered={false}*/}
|
||||||
|
{/* icon={<CrownOutlined />}*/}
|
||||||
|
{/* color={"cyan"}*/}
|
||||||
|
{/* style={{ marginLeft: 5 }}>*/}
|
||||||
|
{/* 作者*/}
|
||||||
|
{/*</Tag>*/}
|
||||||
|
</Flex>
|
||||||
|
<ProCard
|
||||||
|
bordered={true}
|
||||||
|
boxShadow={false}
|
||||||
|
extra={<></>}
|
||||||
|
style={{ width: "100%" }}>
|
||||||
|
<span>
|
||||||
|
i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是
|
||||||
|
</span>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
style={{ marginTop: 10, width: "100%" }}>
|
||||||
|
<span style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
1 小时前
|
||||||
|
</span>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<LikeOutlined
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
color: "grey",
|
||||||
|
marginLeft: 10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
10
|
||||||
|
</span>
|
||||||
|
</Flex>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<CommentOutlined
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
color: "grey",
|
||||||
|
marginLeft: 10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
10
|
||||||
|
</span>
|
||||||
|
</Flex>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
size={"small"}
|
||||||
|
onClick={() => setIsReplyComment(true)}
|
||||||
|
style={{ fontSize: 13, color: "grey" }}>
|
||||||
|
回复
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</ProCard>
|
||||||
|
{isReplyComment && (
|
||||||
|
<>
|
||||||
|
<Flex vertical={true}>
|
||||||
|
<Flex vertical={false} align={"center"}>
|
||||||
|
<span style={{ fontSize: 13 }}>
|
||||||
|
{" "}
|
||||||
|
回复：{" "}
|
||||||
|
</span>
|
||||||
|
<span style={{ fontSize: 13 }}>
|
||||||
|
{" "}
|
||||||
|
landaiqing
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
icon={<CloseOutlined />}
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
marginLeft: 5,
|
||||||
|
}}
|
||||||
|
type={"dashed"}
|
||||||
|
onClick={() =>
|
||||||
|
setIsReplyComment(false)
|
||||||
|
}
|
||||||
|
size={"small"}>
|
||||||
|
{" "}
|
||||||
|
取消回复
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
style={{ marginTop: 5 }}>
|
||||||
|
<Flex
|
||||||
|
vertical={true}
|
||||||
|
justify={"flex-start"}>
|
||||||
|
<Avatar
|
||||||
|
src={logo as any}
|
||||||
|
size={"default"}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
<Flex
|
||||||
|
vertical={true}
|
||||||
|
style={{ width: "100%" }}>
|
||||||
|
<Input.TextArea
|
||||||
|
style={{
|
||||||
|
marginLeft: 10,
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
rows={3}
|
||||||
|
maxLength={500}
|
||||||
|
showCount
|
||||||
|
placeholder={
|
||||||
|
"平等表达，友善交流"
|
||||||
|
}></Input.TextArea>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
align={"center"}
|
||||||
|
style={{
|
||||||
|
marginTop: 10,
|
||||||
|
marginLeft: 10,
|
||||||
|
}}>
|
||||||
|
<SmileOutlined
|
||||||
|
style={{
|
||||||
|
fontSize: 20,
|
||||||
|
color: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<PictureOutlined
|
||||||
|
style={{
|
||||||
|
marginLeft: 20,
|
||||||
|
fontSize: 20,
|
||||||
|
color: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
align={"center"}
|
||||||
|
justify={"flex-end"}>
|
||||||
|
<Button
|
||||||
|
icon={<SendOutlined />}
|
||||||
|
type={"primary"}>
|
||||||
|
发表
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -8,3 +8,16 @@
|
|||||||
.link_btn:hover{
|
.link_btn:hover{
|
||||||
color: #1890ff;
|
color: #1890ff;
|
||||||
}
|
}
|
||||||
|
.like_icon:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
width: 50px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.favtorie_icon{
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.favtorie_icon:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
width: 50px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user