diff --git a/src/other_pages/message/index.scss b/src/other_pages/message/index.scss index b644b3d..026a6a3 100644 --- a/src/other_pages/message/index.scss +++ b/src/other_pages/message/index.scss @@ -1,4 +1,4 @@ -@use '~@/scss/images.scss' as img; +@use "~@/scss/images.scss" as img; .message-container { width: 100%; @@ -6,15 +6,16 @@ box-sizing: border-box; display: flex; flex-direction: column; - background: #FFFFFF; + background: #ffffff; // 顶部导航栏 .navbar { - height: 100px; - background: #FFFFFF; + height: 56px; + background: #ffffff; position: sticky; top: 0; z-index: 100; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06); .navbar-content { height: 56px; @@ -34,7 +35,7 @@ } .navbar-title { - font-family: 'PingFang SC'; + font-family: "PingFang SC"; font-weight: 600; font-size: 20px; line-height: 1.4; @@ -51,13 +52,27 @@ align-items: stretch; gap: 20px; padding: 6px 24px; - background: #FFFFFF; + background: #ffffff; .tab-item { display: flex; flex-direction: column; justify-content: center; align-items: center; + } + } + // 消息列表 + .message-list { + flex: 1; + overflow: hidden; + box-sizing: border-box; + // margin-bottom:100px; + background-color: none !important; + + .message-list-content { + display: flex; + flex-direction: column; + padding: 12px 12px 112px; gap: 8px; padding: 12px 15px; flex: 1; @@ -72,7 +87,7 @@ } .tab-text { - font-family: 'PingFang SC'; + font-family: "PingFang SC"; font-weight: 600; font-size: 16px; line-height: 1.5; @@ -98,7 +113,7 @@ .message-scroll { flex: 1; overflow: hidden; - background: #FFFFFF; + background: #ffffff; .message-cards { padding: 12px; @@ -110,7 +125,7 @@ // 系统消息卡片 .message-card { - background: #FFFFFF; + background: #ffffff; border: 0.5px solid rgba(0, 0, 0, 0.08); border-radius: 20px; box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06); @@ -126,7 +141,7 @@ padding: 12px 15px 0; .card-title { - font-family: 'PingFang SC'; + font-family: "PingFang SC"; font-weight: 600; font-size: 16px; line-height: 1.5; @@ -141,7 +156,7 @@ gap: 2px; .card-time { - font-family: 'PingFang SC'; + font-family: "PingFang SC"; font-weight: 400; font-size: 12px; line-height: 1.5; @@ -156,7 +171,7 @@ gap: 2px; .card-content { - font-family: 'PingFang SC'; + font-family: "PingFang SC"; font-weight: 400; font-size: 14px; line-height: 1.43; @@ -182,7 +197,7 @@ cursor: pointer; .action-text { - font-family: 'PingFang SC'; + font-family: "PingFang SC"; font-weight: 600; font-size: 14px; line-height: 1.43; @@ -195,7 +210,7 @@ position: absolute; left: -16px; top: -9px; - width: 14px;; + width: 14px; height: 14px; } } @@ -215,7 +230,7 @@ padding: 24px 0 12px; .tip-text { - font-family: 'PingFang SC'; + font-family: "PingFang SC"; font-weight: 400; font-size: 14px; line-height: 1.71; @@ -232,7 +247,12 @@ width: 60px; height: 60px; border-radius: 50%; - background: radial-gradient(circle at 27% 8%, rgba(189, 255, 74, 1) 17%, rgba(149, 242, 62, 1) 54%, rgba(50, 216, 56, 1) 100%); + background: radial-gradient( + circle at 27% 8%, + rgba(189, 255, 74, 1) 17%, + rgba(149, 242, 62, 1) 54%, + rgba(50, 216, 56, 1) 100% + ); border: 2px solid rgba(0, 0, 0, 0.06); box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08); display: flex; @@ -253,31 +273,31 @@ // 加号图标 - 竖线 &::before { - content: ''; + content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4px; height: 25px; - background: #FFFFFF; + background: #ffffff; border-radius: 2px; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2); } // 加号图标 - 横线 &::after { - content: ''; + content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 25px; height: 4px; - background: #FFFFFF; + background: #ffffff; border-radius: 2px; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2); } } } -} \ No newline at end of file +}