Skip to content

W
web-ci-test
提交 88757264 作者: 翁进城
操作

社区论坛开发

上级 0b6974c9
正在显示 包含 340 行增加 和 8 行删除
components/NavHeader/index.tsx
......@@ -4,33 +4,33 @@ import type { TabsProps } from 'antd';
import styles from './index.module.scss';
import { useRouter } from "next/router";
const items: TabsProps['items'] = [
const items: TabsProps["items"] = [
{
key: '/home',
key: "/home",
label: ` 首页 `,
},
{
key: '1',
key: "1",
label: `作业服务`,
},
{
key: '2',
key: "2",
label: `设备租赁`,
},
{
key: '3',
key: "3",
label: `飞手服务`,
},
{
key: '/mall',
key: "/mall",
label: `产品商城`,
},
{
key: '/projectInfo',
key: "/projectInfo",
label: `项目资讯`,
},
{
key: '6',
key: "/forum",
label: `社区论坛`,
},
];
......
pages/forum/assets/errImg.js 0 → 100644
export default "data:image/png;base64,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";
pages/forum/index.module.scss 0 → 100644
.forum {
width: 690px;
margin: 18px auto 0;
}
.header {
padding: 14px 20px 14px 24px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
.title {
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
}
.btn {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ffffff;
padding: 0px 24px;
height: 38px;
}
}
.item {
padding: 18px 0 0;
background: #ffffff;
.headImg {
margin-left: 16px;
width: 52px;
height: 52px;
background: #ced1d6;
margin-right: 10px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.info {
.name {
font-size: 15px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
margin-top: 7px;
margin-bottom: 16px;
}
.desc {
font-size: 15px;
font-family: MicrosoftYaHei;
color: #000000;
margin-bottom: 16px;
}
}
.imgs {
margin-bottom: 18px;
:global .img {
border-radius: 6px;
overflow: hidden;
}
}
.ctrls {
display: flex;
gap: 20px;
margin-bottom: 18px;
.ctrlsItem {
font-size: 12px;
font-family: MicrosoftYaHei;
color: #8590a6;
display: flex;
gap: 8px;
align-items: center;
cursor: pointer;
.ctrlsItemIcon {
width: 16px;
height: 16px;
background-size: 100% 100%;
&.iconComment {
background-image: url("./assets/comment.png");
}
&.iconPraise {
background-image: url("./assets/praise.png");
&.active {
background-image: url("./assets/praiseActive.png");
}
}
}
}
}
.commentWrap {
.draftWrap {
padding: 11px 27px 0 26px;
display: flex;
gap: 18px;
align-items: center;
border-top: 1px RGBA(246, 247, 249, 1) solid;
.commentHeadImg {
width: 34px;
height: 34px;
background: #ced1d6;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #828589;
border-radius: 50%;
overflow: hidden;
}
.commentInput {
width: 585px;
height: 38px;
background: #f2f3f4;
}
}
.btnCommentWrap {
margin-top: 7px;
text-align: right;
padding-right: 30px;
}
.btnComment {
height: 33px;
padding: 0 24px;
font-size: 13px;
font-family: MicrosoftYaHei;
}
.comments {
border-top: 1px RGBA(246, 247, 249, 1) solid;
.commentItem {
padding: 8px 26px;
display: flex;
gap: 18px;
.commentHeadImg {
width: 34px;
height: 34px;
background: #ced1d6;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.info {
.nameWrap {
display: flex;
.commentName {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ff552d;
flex-shrink: 0;
line-height: 19px;
.date {
margin-top: 1px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #a6aab1;
line-height: 16px;
}
}
.commentContent {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #000000;
line-height: 19px;
}
}
}
}
}
}
}
pages/forum/index.tsx 0 → 100644
import { Button, Image, Space, Input } from "antd";
import Layout from "~/components/layout";
import styles from "./index.module.scss";
import errImg from "./assets/errImg";
export default function forum() {
return (
<Layout>
<div className={styles.forum}>
<div className={styles.header}>
<div className={styles.title}>最新讨论</div>
<Button className={styles.btn} type="primary">
发布动态
</Button>
</div>
<Space direction="vertical" size={8}>
<div className={styles.item}>
<Space size={10} align="start">
<img className={styles.headImg}></img>
<div className={styles.info}>
<div className={styles.name}>给**的</div>
<div className={styles.desc}>
今天飞的航拍效果，喜欢的给我点个赞
</div>
<div className={styles.imgs}>
<Image.PreviewGroup
preview={{
onChange: (current, prev) =>
console.log(
`current index: ${current}, prev index: ${prev}`
),
}}
>
<Space size={6} wrap>
<Image
className="img"
width={132}
height={132}
src="errImg"
fallback={errImg}
/>
<Image
className="img"
width={132}
height={132}
src="errImg"
fallback={errImg}
/>
<Image
className="img"
width={132}
height={132}
src="errImg"
fallback={errImg}
/>
<Image
className="img"
width={132}
height={132}
src="errImg"
fallback={errImg}
/>
<Image
className="img"
width={132}
height={132}
src="errImg"
fallback={errImg}
/>
<Image
className="img"
width={132}
height={132}
src="errImg"
fallback={errImg}
/>
<Image
className="img"
width={132}
height={132}
src="errImg"
fallback={errImg}
/>
</Space>
</Image.PreviewGroup>
</div>
<div className={styles.ctrls}>
<div className={styles.ctrlsItem}>
<div
className={`${styles.ctrlsItemIcon} ${styles.iconComment}`}
></div>
15评论
</div>
<div className={styles.ctrlsItem}>
<div
className={`${styles.ctrlsItemIcon} ${styles.iconPraise} ${styles.active}`}
></div>
11赞
</div>
</div>
</div>
</Space>
<div className={styles.commentWrap}>
<div className={styles.draftWrap}>
<div className={styles.commentHeadImg}>自已</div>
<Input
className={styles.commentInput}
placeholder="说点什么吧，万一火了呢~"
></Input>
</div>
<div className={styles.btnCommentWrap}>
<Button type="primary" className="btnComment">
评论
</Button>
</div>
<div className={styles.comments}>
<div className={styles.commentItem}>
<div className={styles.commentHeadImg}></div>
<div className={styles.info}>
<div className={styles.nameWrap}>
<div className={styles.commentName}>
无人机爱好者111：
<div className={styles.date}>05-16</div>
</div>
<div className={styles.commentContent}>
无人机记录生活
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Space>
</div>
</Layout>
);
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论