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

style: 修复message页的样式

Browse Source
This commit is contained in:
刘杰
2025-09-21 10:06:19 +08:00
parent b2e64b1ea7
commit b9bba68b25
1 changed files with 41 additions and 21 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 {
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);
}
}
}
}
}