bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-10-01 16:03:39 +08:00
parent 80ad8123d7
commit ce63c1a954
1 changed files with 21 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/other_pages/message/index.scss
View File

@@ -1,4 +1,4 @@
@use "~@/scss/images.scss" as img; @use '~@/scss/images.scss' as img;
.message-container { .message-container {
width: 100%; width: 100%;
@@ -6,16 +6,15 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #ffffff; background: #FFFFFF;
// 顶部导航栏 // 顶部导航栏
.navbar { .navbar {
height: 56px; height: 100px;
background: #ffffff; background: #FFFFFF;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06);
.navbar-content { .navbar-content {
height: 56px; height: 56px;
@@ -35,7 +34,7 @@
} }
.navbar-title { .navbar-title {
font-family: "PingFang SC"; font-family: 'PingFang SC';
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
line-height: 1.4; line-height: 1.4;
@@ -52,27 +51,13 @@
align-items: stretch; align-items: stretch;
gap: 20px; gap: 20px;
padding: 6px 24px; padding: 6px 24px;
background: #ffffff; background: #FFFFFF;
.tab-item { .tab-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: 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; gap: 8px;
padding: 12px 15px; padding: 12px 15px;
flex: 1; flex: 1;
@@ -87,7 +72,7 @@
} }
.tab-text { .tab-text {
font-family: "PingFang SC"; font-family: 'PingFang SC';
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
@@ -113,7 +98,7 @@
.message-scroll { .message-scroll {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
background: #ffffff; background: #FFFFFF;
.message-cards { .message-cards {
padding: 12px; padding: 12px;
@@ -125,7 +110,7 @@
// 系统消息卡片 // 系统消息卡片
.message-card { .message-card {
background: #ffffff; background: #FFFFFF;
border: 0.5px solid rgba(0, 0, 0, 0.08); border: 0.5px solid rgba(0, 0, 0, 0.08);
border-radius: 20px; border-radius: 20px;
box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
@@ -141,7 +126,7 @@
padding: 12px 15px 0; padding: 12px 15px 0;
.card-title { .card-title {
font-family: "PingFang SC"; font-family: 'PingFang SC';
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
@@ -156,7 +141,7 @@
gap: 2px; gap: 2px;
.card-time { .card-time {
font-family: "PingFang SC"; font-family: 'PingFang SC';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
@@ -171,7 +156,7 @@
gap: 2px; gap: 2px;
.card-content { .card-content {
font-family: "PingFang SC"; font-family: 'PingFang SC';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 1.43; line-height: 1.43;
@@ -197,7 +182,7 @@
cursor: pointer; cursor: pointer;
.action-text { .action-text {
font-family: "PingFang SC"; font-family: 'PingFang SC';
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 1.43; line-height: 1.43;
@@ -210,7 +195,7 @@
position: absolute; position: absolute;
left: -16px; left: -16px;
top: -9px; top: -9px;
width: 14px; width: 14px;;
height: 14px; height: 14px;
} }
} }
@@ -230,7 +215,7 @@
padding: 24px 0 12px; padding: 24px 0 12px;
.tip-text { .tip-text {
font-family: "PingFang SC"; font-family: 'PingFang SC';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 1.71; line-height: 1.71;
@@ -247,12 +232,7 @@
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient( 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%);
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); border: 2px solid rgba(0, 0, 0, 0.06);
box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08);
display: flex; display: flex;
@@ -273,31 +253,31 @@
// 加号图标 - 竖线 // 加号图标 - 竖线
&::before { &::before {
content: ""; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 4px; width: 4px;
height: 25px; height: 25px;
background: #ffffff; background: #FFFFFF;
border-radius: 2px; border-radius: 2px;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
} }
// 加号图标 - 横线 // 加号图标 - 横线
&::after { &::after {
content: ""; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 25px; width: 25px;
height: 4px; height: 4px;
background: #ffffff; background: #FFFFFF;
border-radius: 2px; border-radius: 2px;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
} }
} }
} }
} }