修改样式

This commit is contained in:
al 2024-08-14 12:37:34 +08:00
parent bcbcf9b489
commit 068bfaef5d
5 changed files with 19 additions and 9 deletions

View File

@ -1,9 +1,9 @@
.customTabs { .customTabs {
border: none; border: none;
--active-line-color: #ff8383; --active-line-color: #ff8383!important;
--active-title-color: #fff; --active-title-color: #fff!important;
--title-color: #a0a0a0; --title-color: #a0a0a0!important;
--inactive-title-color: #FFFFFF80; --inactive-title-color: #FFFFFF80;
--tab-border-color: #ff8383; --tab-border-color: #ff8383;
} }

View File

@ -9,6 +9,12 @@
.jumboTabs>div>div:last-child{ .jumboTabs>div>div:last-child{
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.jumboTabs {
&>div:first-child{
position: sticky;
top: 52px;
}
}
.listTimeBox>div,.listTimeBox>div>div{ .listTimeBox>div,.listTimeBox>div>div{
width: 100%; width: 100%;
padding-right: 0; padding-right: 0;

View File

@ -106,7 +106,7 @@ export default function Relationship() {
}; };
return ( return (
<div className={styles.relationshipBox}> <div className={styles.relationshipBox}>
<div className="p-4 fixed top-0 z-10 w-full"> <div className="px-4 pt-4 sticky top-0 z-10 w-full bg-[#070415]">
<div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute"> <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
<FontAwesomeIcon <FontAwesomeIcon
icon={faAngleLeft} icon={faAngleLeft}
@ -119,7 +119,7 @@ export default function Relationship() {
<p className="text-base text-center leading-9">关系</p> <p className="text-base text-center leading-9">关系</p>
</div> </div>
{/* 内容 */} {/* 内容 */}
<div className="pt-16 px-4"> <div className="px-4">
<JumboTabs <JumboTabs
onChange={(key) => setCurrentKey(key)} onChange={(key) => setCurrentKey(key)}
activeKey={currentKey} activeKey={currentKey}

View File

@ -276,7 +276,7 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
} }
); );
// debugger; // debugger;
console.log("offset", followsResponse.data.offset); // console.log("offset", followsResponse.data.offset);
setOffset(followsResponse.data.offset); setOffset(followsResponse.data.offset);
setHasMore(followsResponse.data.more); setHasMore(followsResponse.data.more);
setLoading(false); setLoading(false);

View File

@ -35,7 +35,6 @@ export default function Space() {
const [scrollHeight, setScrollHeight] = useState(0); const [scrollHeight, setScrollHeight] = useState(0);
const [offset, setOffset] = useState(0); const [offset, setOffset] = useState(0);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const scrollRef = useRef(null);
const router = useRouter(); const router = useRouter();
// 获取屏幕高度 // 获取屏幕高度
// const scrollHeight = 600; // const scrollHeight = 600;
@ -259,7 +258,7 @@ export default function Space() {
</Swiper.Item> </Swiper.Item>
<Swiper.Item> <Swiper.Item>
{!!activeIndex && ( {!!activeIndex && (
<div className="px-4 pb-20" ref={scrollRef}> <div className="px-4 pb-20" >
<List className="scrollbarBox_hidden"> <List className="scrollbarBox_hidden">
{loading && !dataList.length && ( {loading && !dataList.length && (
<> <>
@ -305,7 +304,12 @@ export default function Space() {
size="xl" size="xl"
// onClick={firstRequest} // onClick={firstRequest}
onClick={() => { onClick={() => {
scrollRef.current?.scrollTo(0, 0); // scrollRef.current?.scrollTo(0, 0);
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth", // 可选,平滑滚动效果
});
firstRequest(); firstRequest();
}} }}
/> />