From c7eb4bab05cbd40b7caafd9f33b0692f01efe339 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com> Date: Thu, 12 Sep 2024 19:05:42 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E9=9A=8F=E6=9C=BA=E6=96=87?= =?UTF-8?q?=E7=AB=A0=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/cate/[id]/page.tsx | 4 +- src/app/page.tsx | 4 +- .../Sidebar/RandomArticle/index.scss | 138 ++++-------------- .../Sidebar/RandomArticle/index.tsx | 20 +-- src/styles/tailwind.scss | 2 +- src/utils/request.ts | 2 +- 6 files changed, 46 insertions(+), 124 deletions(-) diff --git a/src/app/cate/[id]/page.tsx b/src/app/cate/[id]/page.tsx index cafc81e..b29231b 100644 --- a/src/app/cate/[id]/page.tsx +++ b/src/app/cate/[id]/page.tsx @@ -37,6 +37,4 @@ export default async ({ params, searchParams }: Props) => { ) -} - -export const dynamic = "force-dynamic"; \ No newline at end of file +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index c6120c9..cf503c5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -29,6 +29,4 @@ export default async ({ searchParams }: Props) => { ); -} - -export const dynamic = "force-dynamic"; \ No newline at end of file +} \ No newline at end of file diff --git a/src/components/Sidebar/RandomArticle/index.scss b/src/components/Sidebar/RandomArticle/index.scss index c67d850..bd640dc 100644 --- a/src/components/Sidebar/RandomArticle/index.scss +++ b/src/components/Sidebar/RandomArticle/index.scss @@ -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; } } } diff --git a/src/components/Sidebar/RandomArticle/index.tsx b/src/components/Sidebar/RandomArticle/index.tsx index 7684376..41d2cea 100644 --- a/src/components/Sidebar/RandomArticle/index.tsx +++ b/src/components/Sidebar/RandomArticle/index.tsx @@ -9,24 +9,24 @@ const HotArticle = async () => { const { data } = await getRandomArticleListAPI() return ( -
-
-

+
+
+

随机推荐 随机推荐

-
+
{data.map((item, index) => (
- -

{item.title}

+ +

{item.title}

- - {index + 1} + + {index + 1}
))}
diff --git a/src/styles/tailwind.scss b/src/styles/tailwind.scss index 9d40f1d..c1ba247 100644 --- a/src/styles/tailwind.scss +++ b/src/styles/tailwind.scss @@ -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 } \ No newline at end of file diff --git a/src/utils/request.ts b/src/utils/request.ts index a62e559..d42ad90 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -1,4 +1,4 @@ -const url = "http://localhost:9003/api" +const url = "http://localhost:9999/api" export default async (method: string, api: string, data?: any) => { const res = await fetch(`${url}${api}`, {