{/* 四个板块 */}
{forumTag.map((item, index) => {
- const isSelected = forumTagDetail && forumTagDetail.id === item.id;
- const forums = item.essencePosts && item.essencePosts[0] || {};
+ const isSelected = activeId === item.id;
return (
-
{setForumTagDetail(item); setPage(1)}}>
- 
-
-
+ handleMouseEnter(item)}
+ onMouseLeave={handleMouseLeave}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+ 查看更多
+
+
+
)
})}
- {/* 板块对应的帖子列表 */}
-
- {forumListByTag.map((item, index) => {
- const orderIndex = index+LIMIT*(page-1)
- return
-
- {orderIndex < 3 ?
:
{orderIndex + 1}}
-
-
- {item.subject}
-
-
- {item.sticky &&
置顶}
- {item.is_original &&
原创}
- {item.is_fine &&
精华}
-
-
-
- {item.username}
-
{item.published_time}
-
-
- {item.praises_count}
-
- {item.replies_count}
-
- {/*
- 
- {item.viewed_count}
- */}
+
+
+
diff --git a/src/forums/list/index.scss b/src/forums/list/index.scss
index 770448b6..eb1557fc 100644
--- a/src/forums/list/index.scss
+++ b/src/forums/list/index.scss
@@ -4,23 +4,27 @@
color: #091221;
background-color: #f1f6fd;
font-family: "alibabaReg";
+ background-image: url('../image/banner.png');
+ background-size: 100% 100%;
.ant-tag {
line-height: 16px;
padding: 0 3px;
- margin-left: 10px;
margin-right: 0px;
&+.ant-tag {
margin-left: 6px;
}
}
+
+ .font-bd{
+ font-weight: normal;
+ font-family: "alibaba";
+ }
}
.forums-banner-box {
- background-image: url('../image/banner.png');
- background-size: 100% 100%;
- padding: 70px 0 145px;
+ padding: 70px 0 120px;
.forums-banner-title1 {
font-family: 'DouyinSansBold';
@@ -49,14 +53,7 @@
}
.carousel-text {
- background-image: linear-gradient(313.07deg, #d62ece 0%, #1664ff 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-
- &:nth-of-type(2) {
- background-image: linear-gradient(313.07deg, #1664ff 0%, #06050e 100%);
- }
+ color: #2149d4;
}
.forums-banner-title2 {
@@ -69,7 +66,7 @@
width: 168px;
height: 60px;
border-radius: 30px;
- border: 4px solid #CCD3E8;
+ border: 4px solid #E2D5DC;
line-height: 52px;
position: relative;
--offsetTop: 26px;
@@ -82,30 +79,11 @@
}
}
- .ant-carousel {
- width: 48.3%;
- border-radius: 15px 0px 0px 15px;
- overflow: hidden;
- }
-
- .forums-list-left-Carousel {
- img {
- height: 392px;
- object-fit: cover;
- }
- }
-
- .forums-list1 {
- width: 23.4%;
- background-color: #ffffff;
- border-radius: 0px 15px 15px 0px;
- padding: 10px 15px;
-
- }
+}
.hot-forums-list {
background-color: #ffffff;
- border-radius: 8px;
+ border-radius: 15px;
box-shadow: 0px 0px 10px rgba(35, 44, 121, 0.07);
}
@@ -139,15 +117,14 @@
}
}
- .forums-list-item:not(:last-of-type):not(.forums-list-item-active) {
+ .forums-list-item:not(:last-of-type) {
.forums-subject {
border-bottom: 1px dashed rgba(130, 132, 164, 0.4);
}
-
+
}
-
- .forums-list-item:hover,
- .forums-list-item-active {
+
+ .forums-list-item:hover {
background-image: linear-gradient(180deg, #f7f9fd00 0%, #f7f9fd 100%);
border-radius: 4px;
font-weight: bold;
@@ -162,13 +139,13 @@
}
.hot-forums-list-header {
- padding: 12px 25px 10px 25px;
+ padding: 12px 16px 10px 16px;
background-image: url('../image/bk2.png');
background-size: 100% 100%;
}
.forums-list2 {
- padding: 0 25px 12px 25px;
+ padding: 0 16px 12px 16px;
}
.forums-hot-list {
@@ -176,17 +153,49 @@
--offsetTop: 56px;
animation: itemUp .4s ease-in-out 1.36s forwards, bgOpacity .4s linear 1.36s reverse backwards;
}
-}
.forums-list3-box {
- padding: 60px 0 60px;
- background-image: linear-gradient(179.88deg, #ffffff 0%, rgba(255, 255, 255, 0.62) 16.1%, rgba(255, 255, 255, 0) 100%);
- border-radius: 40px;
position: relative;
--offsetTop: 116px;
--top: -60px;
animation: itemUp .4s ease-in-out 1.56s forwards, bgOpacity .4s linear 1.56s reverse backwards;
+
+ .forums-list3-content {
+ gap: 20px;
+
+ &>div.flex1{
+ background-color: white;
+ border-radius: 0px 0px 15px 15px;
+ }
+ }
+
+ .forums-list3-right{
+ width: 26.5%;
+ flex-shrink: 0;
+ }
+
+}
+
+a.add_forum, a.add_forum:link{
+ display: block;
+ height:48px;
+ line-height: 48px;
+ background:#091221;
+ border-radius:15px;
+ color:#ffffff;
+ font-size:18px;
+ text-align: center;
+ &:hover{
+ opacity: 0.8;
+ }
+}
+
+.forums-list4-box {
+ background-color: #ffffff;
+ border-radius: 0 0 15px 15px;
+
+
.user-img {
width: 24px;
height: 24px;
@@ -195,124 +204,38 @@
margin-right: 10px;
}
- .forums-section-box {
- gap: 20px;
- }
-
- .forums-section-item-box {
- border-radius: 15px;
- border: 2px solid transparent;
- box-shadow: 0px 3px 6px rgba(22, 100, 255, 0.02);
+ .forums-list4-item {
+ padding: 25px 30px 0 25px;
position: relative;
- &.active {
- border-color: #2149d4;
-
- &::before {
- width: 106%;
- height: 110%;
- content: '';
- position: absolute;
- background-color: rgb(33 72 212 / 20%);
- top: -5%;
- left: -3%;
- border-radius: 15px;
+ &:hover{
+ background:#f7f9fd;
+ border-radius:10px;
+ .forums-list4-item-link{
+ font-family: "alibaba";
}
- &::after {
- content: "";
- position: absolute;
- top: 105%;
- left: 50%;
- transform: translateX(-50%);
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-top: 10px solid rgb(33 72 212 / 20%);
- }
- }
-
- &:nth-of-type(3) .forums-section-item {
- background-image: url('../image/forums3.png');
- background-size: 100% 100%;
- }
-
- &:nth-of-type(2) .forums-section-item {
- background-image: url('../image/forums2.png');
- background-size: 100% 100%;
- }
-
- &:nth-of-type(4) .forums-section-item {
- background-image: url('../image/forums4.png');
- background-size: 100% 100%;
- }
- }
-
- .forums-section-item {
- position: relative;
- cursor: pointer;
- border-radius: 15px;
- background-image: url('../image/forums1.png');
- background-size: 100% 100%;
-
- .memo_image_info {
- width: 100%;
- height: auto;
- object-fit: cover;
- border-radius: 15px 15px 0 0;
- transition: transform .4s cubic-bezier(.25, .46, .45, .94);
- }
-
- .memo_image_info_box {
- margin: 15px;
- overflow: hidden;
- border-radius: 15px;
- }
-
- .forums-section-item-content {
- // background-color: white;
- border-radius: 15px;
- overflow: hidden;
- }
-
- .icon-jiantou3 {
- display: none;
- }
-
- &:hover {
- .icon-jiantou3 {
- // color:#2149d4;
- // display: inline-block;
+ .ant-tag {
+ display: none;
}
- a {
- // color:#2149d4;
- }
-
- .memo_image_info {
- transform: scale(1.05);
- }
- }
-
- a:hover {
- color: #2149d4;
-
- .icon-jiantou3 {
+ .icon-jiantou21{
display: inline-block;
}
+
+ .forums-list4-item-link{
+ color: #091221;
+ }
}
- }
-}
-.forums-list4-box {
- background-color: #ffffff;
- border-radius: 15px;
- padding: 25px 30px;
+ .forums-list4-item-bottom{
+ border-bottom: 1px dashed rgba(130, 132, 164, 0.4);
+ padding-bottom: 25px;
+ }
- .forums-list4-item {
- position: relative;
- border-bottom: 1px dashed rgba(130, 132, 164, 0.4);
- padding-bottom: 12px;
- margin-bottom: 20px;
+ .icon-jiantou21{
+ display: none;
+ }
}
.viewed_count {
@@ -332,22 +255,11 @@
animation: fire 1s ease-in-out infinite;
}
}
-
- .forums-list4-item-link {
- &:hover {
- .hover-underline {
- padding-right: 30px;
- }
-
- &~.ant-tag {
- display: none;
- }
- }
- }
}
.team {
display: flex;
+ gap: 20px;
margin-top: 40px;
width: 100%;
padding-left: 0px;
@@ -361,103 +273,70 @@
}
li {
- height: 280px;
+ height: 260px;
padding: 30px 30px 34px 30px;
box-sizing: border-box;
- border-radius: 15px;
flex: 1 1;
display: flex;
- flex-direction: column;
+ align-items: center;
+ justify-content: center;
width: 0;
- margin-right: 20px;
transition: 0.2s;
- text-align: left;
position: relative;
transition-duration: 1s;
cursor: pointer;
background-size: 100% 100%;
-
- &>span {
- margin-bottom: auto;
- font-size: 18px;
- }
-
- &::after {
- position: absolute;
- width: 100%;
- height: 100%;
- content: "";
- right: 0;
- top: 0;
- background-position: right bottom;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- border-radius: 15px;
- transition-duration: 1s;
- }
+ border-radius: 15px;
&:nth-child(1) {
- background-image: url("../image/image13.png");
-
- &::after {
- background-image: url("../image/image9.png");
- width: 100%;
+ background-image: url("../image/image5.png");
+ .t-title{
+ background:linear-gradient(94.98deg,#ffffff 3.87%,#ffffff 83.9%,#eca2b9 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
}
&:nth-child(2) {
background-image: url("../image/image6.png");
-
- &::after {
- background-image: url("../image/image10.png");
- width: 100%;
+ .t-title{
+ background:linear-gradient(92.24deg,#ffffff 2.21%,#ffffff 86.8%,#87e1e8 99.78%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
}
&:nth-child(3) {
background-image: url("../image/image7.png");
-
- &::after {
- background-image: url("../image/image11.png");
- width: 100%;
+ .t-title{
+ background:linear-gradient(97.88deg,#ffffff 3.83%,#ffffff 83.89%,#eca2b9 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
}
&:nth-child(4) {
background-image: url("../image/image8.png");
-
- &::after {
- background-image: url("../image/image12.png");
- width: 100%;
+ .t-title{
+ background:linear-gradient(94.26deg,#ffffff 2.16%,#ffffff 81.2%,#9cd8f8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
}
- &.hovered {
- color: white;
- background-image: url("../image/image5.png");
- .t-title span{
- font-size: 26px;
- line-height: 32px;
- }
- }
- // &:hover{
- // .t-title span{
- // font-size: 26px;
- // }
- // }
-
- &:last-child {
- margin-right: 0px;
- }
&.hovered, &:hover {
- flex: 2 1;
-
- &:nth-child(1)::after {
- width: 50%;
+ transform: translateY(-24px);
+ .highlight-card-bottom{
+ font-family: "alibaba";
}
-
- &:not(:nth-child(1))::after {
- width: 70%;
+
+ .iconfont {
+ display: inline-block;
+ animation: arrow-move 1.2s ease-in-out infinite;
}
}
@@ -467,30 +346,84 @@
span {
display: block;
- font-size: 18px;
- line-height: 30px;
+ font-size: 28px;
+ line-height: 36px;
font-family: "alibabaBold";
}
}
- .t-desc {
- font-size: 14px;
- line-height: 22px;
- text-align: left;
- word-break: break-all;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- font-family: alibabaPuhuiR;
- -webkit-line-clamp: 2;
- opacity: 0.8;
+ .highlight-card-bottom{
+ position: absolute;
+ left: 0px;
+ bottom: 10px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 25px;
+ color: white;
+ font-size:20px;
}
+ }
+}
- .t-time {
- font-size: 15px;
- text-align: left;
+.forums_header{
+ background-image: url('../image/bk3.png');
+ background-size: 100% 100%;
+ align-items: center;
+ padding: 11px 30px;
+
+ .forums_search{
+ width: 320px;
+ margin-right: auto;
+
+ .ant-input{
+ border: none;
+ border-radius:18px;
+ height: 36px;
+ padding-left: 16px;
}
+ .ant-input-search-icon{
+ position: relative;
+ width: 15px;
+ svg{
+ display: none;
+ }
+ &::before{
+ content: "\ea0e";
+ font-family: iconfont;
+ position: absolute;
+ display: inline-block;
+ color: #191919;
+ left: 0px;
+ font-size: 16px;
+ }
+ }
+ }
+
+ a{
+ color:#8284a4;
+ font-size:15px;
+ &.active{
+ color: #2149d4;
+ }
+ }
+}
+
+.forumListById_box{
+ background-image: url('../image/bk4.png');
+ background-size: 100% 100%;
+ padding-bottom: 100px;
+ min-height: 89vh;
+
+ a.add_forum{
+ padding: 0 18px;
+ border-radius:24px;
+ margin-left: auto;
+ }
+
+ .ant-pagination{
+ padding-bottom: 40px;
}
}
diff --git a/src/forums/list/listById.jsx b/src/forums/list/listById.jsx
new file mode 100644
index 00000000..41fca574
--- /dev/null
+++ b/src/forums/list/listById.jsx
@@ -0,0 +1,84 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { Breadcrumb } from "antd";
+import { Link } from "react-router-dom";
+import icon19 from '../image/icon19.png';
+import { getForumHead, getForumsById } from "../api";
+import ForumList from "./forumList";
+import './index.scss';
+
+function forumListById(props){
+ const LIMIT = 10;
+ const { match: { params: { id } }, current_user, showLoginDialog } = props;
+ const [detail, setDetail] = useState({});
+ const [forumsList, setForumsList] = useState([]);
+ const [total, setTotal] = useState(0);
+ const [page, setPage] = useState(1);
+ const [search, setSearch] = useState()
+ const [sort, setSort] = useState("published_at")
+
+ const {forum_section={}, bread_crumb} = detail || {};
+ const {forum_tag} = bread_crumb || {};
+
+ // 递归提取 forum_tag 及其 children_bread_crumb 的所有 ID
+ const getTagIds = (tag) => {
+ if (!tag) return [];
+ const ids = [tag.id];
+ if (tag.children_bread_crumb && tag.children_bread_crumb.id) {
+ ids.push(...getTagIds(tag.children_bread_crumb));
+ }
+ return ids;
+ };
+
+ const tagIdsStr = useMemo(() => getTagIds(forum_tag).join(','), [forum_tag]);
+
+ useEffect(()=>{
+ if(!id) return
+ getForumHead(id).then(res=>{
+ setDetail(res || {});
+ document.title = `${res && res.forum_section && res.forum_section.title}-论坛交流`;
+ })
+ }, [id])
+
+ useEffect(()=>{
+ if(!id) return
+ getForumsById(id, {
+ page: page,
+ limit: LIMIT,
+ sort: sort,
+ select_type: 'all',
+ search: search
+ }).then(res => {
+ if (res) {
+ setForumsList(res.memos || []);
+ setTotal(res.memos_count);
+ }
+ })
+ }, [id, page, sort, search])
+
+ return
+
+ 论坛交流
+ {forum_section.title}详情
+
+
+ {/* 板块对应的帖子列表 */}
+
+
+
+
+}
+
+export default forumListById;
\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
index a98137e6..5fa6eb83 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -315,10 +315,11 @@ i.color-orange05:hover {
color:#fff !important;
}
}
- .ant-pagination-item:hover, .ant-pagination-item:focus, .ant-pagination-item:active, .ant-pagination-next:hover .ant-pagination-item-link, .ant-pagination-prev:hover .ant-pagination-item-link{
- border-color:#091221;
- a, i{
+ li, li:hover, li:focus, li:active{
+ border-color:#091221 !important;
+ a, i, a.ant-pagination-item-link i{
color:#091221;
+ border-color:#091221 !important;
}
}
.ant-pagination-options-quick-jumper input:hover{