lywsvip/ThriveX-Blog
1
0
Fork 0
mirror of https://github.com/LiuYuYang01/ThriveX-Blog.git synced 2026-06-08 00:06:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

重构随机文章样式

Browse Source
This commit is contained in:
宇阳
2024-09-12 19:05:42 +08:00
parent a84dd03a0d
commit c7eb4bab05
6 changed files with 46 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/cate/[id]/page.tsx
View File

@@ -37,6 +37,4 @@ export default async ({ params, searchParams }: Props) => {
</div>
</>
)
}
export const dynamic = "force-dynamic";
}

4
src/app/page.tsx
View File

@@ -29,6 +29,4 @@ export default async ({ searchParams }: Props) => {
</Container>
</>
);
}
export const dynamic = "force-dynamic";
}

138
src/components/Sidebar/RandomArticle/index.scss
View File

@@ -1,123 +1,49 @@
@import "@/styles/var.scss";
.RandomArticleComponent {
.item {
background-size: 100%;
.HotArticleComponent {
.HotArticle {
padding: 15px;
margin-bottom: 20px;
background-color: #fff;
@include container;
// 鼠标经过效果
&:hover {
background-size: 105%;
}
// 文章模块标题
@include titleRight;
&:nth-of-type(1) .ranking {
background-color: #f83356;
// 文章列表
.list {
padding-top: 10px;
min-height: 120px;
.item {
position: relative;
height: 130px;
margin-bottom: 10px;
border-radius: $round;
background: url("https://liuyuyang.net/usr/uploads/2023/06/1705766133.jpg") center no-repeat;
background-size: 100%;
transition: background-size $move;
// 阴影
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-image: linear-gradient(transparent, #000);
transition: opacity $move;
}
// 鼠标经过效果
&:hover {
background-size: 105%;
}
a {
display: inline-block;
width: 100%;
height: 100%;
}
// 文章标题
h4 {
position: absolute;
bottom: 10px;
width: 95%;
padding: 0 10px;
color: #fff;
font-size: 15px;
font-weight: 400;
z-index: 1;
// 文本溢出隐藏
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 排名
span {
position: absolute;
top: 10px;
left: -20px;
width: 30px;
height: 25px;
padding-left: 7px;
color: #fff;
font-weight: 900;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
background-color: #f83356;
box-sizing: border-box;
&::after {
content: "";
position: absolute;
bottom: -5px;
left: 0px;
width: 0;
height: 0;
border: 5px solid;
border-color: transparent transparent transparent #f83356;
}
}
&::after {
border-color: transparent transparent transparent #f83356;
}
}
.item:nth-of-type(2) span {
background-color: #faa527;
&:nth-of-type(2) .ranking {
background-color: #faa527;
&::after {
border-color: transparent transparent transparent #faa527;
}
&::after {
border-color: transparent transparent transparent #faa527;
}
}
.item:nth-of-type(3) span {
background-color: #3c83fd;
&:nth-of-type(3) .ranking {
background-color: #3c83fd;
&::after {
border-color: transparent transparent transparent #3c83fd;
}
&::after {
border-color: transparent transparent transparent #3c83fd;
}
}
.item:nth-of-type(4) span {
background-color: #56c357;
&:nth-of-type(4) .ranking {
background-color: #56c357;
&::after {
border-color: transparent transparent transparent #56c357;
}
&::after {
border-color: transparent transparent transparent #56c357;
}
}
.item:last-of-type {
margin-bottom: 0;
&:nth-of-type(5) .ranking {
background-color: #6756c3;
&::after {
border-color: transparent transparent transparent #6756c3;
}
}
}

20
src/components/Sidebar/RandomArticle/index.tsx
View File

@@ -9,24 +9,24 @@ const HotArticle = async () => {
const { data } = await getRandomArticleListAPI()
return (
<div className='HotArticleComponent'>
<div className="HotArticle">
<h3 className="title">
<div className='RandomArticleComponent'>
<div className="flex flex-col p-4 mb-5 bg-white dark:bg-black-b tw_container tw_title">
<h3 className="w-full tw_title dark:text-white">
<Image src={article} alt="随机推荐" /> 随机推荐
</h3>
<div className="list">
<div className="w-full pt-[10px] mt-2 min-h-[120px] space-y-4">
{data.map((item, index) => (
<div
key={index}
className="item"
style={{ backgroundImage: `url(${item.cover || randomImage()})` }}
className="item relative h-32 bg-no-repeat bg-center rounded-md transition-all after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-12 after:transition-opacity after:rounded-md after:bg-[linear-gradient(transparent,#000)]"
style={{ backgroundImage: `url(${item.cover || randomImage()})`}}
>
<Link href="/">
<h4>{item.title}</h4>
<Link href="/" className='inline-block w-full h-full'>
<h4 className=' absolute bottom-[10px] w-[95%] px-[10px] text-white text-[15px] font-normal line-clamp-1 z-10'>{item.title}</h4>
</Link>
<span>{index + 1}</span>
<span className='ranking absolute top-[10px] left-[-16px] w-[30px] h-[25px] pl-[7px] text-white rounded-tr-full rounded-br-full font-black box-border after:content-[""] after:absolute after:bottom-[-5px] after:left-0 after:w-0 after:h-0 after:border-[5px] after:border-solid'>{index + 1}</span>
</div>
))}
</div>

2
src/styles/tailwind.scss
View File

@@ -7,5 +7,5 @@
}
.tw_title {
@apply flex justify-center items-center pb-4 border-b text-[17px] font-normal text-[#333] transition-all [&>img]:w-[30px] [&>img]:h-5
@apply flex justify-center items-center pb-4 border-b dark:border-black-a text-[17px] font-normal text-[#333] transition-all [&>img]:w-[30px] [&>img]:h-5
}

2
src/utils/request.ts
View File

@@ -1,4 +1,4 @@
const url = "http://localhost:9003/api"
const url = "http://localhost:9999/api"
export default async <T>(method: string, api: string, data?: any) => {
const res = await fetch(`${url}${api}`, {