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

feat: 订单列表 & 球局详情头像

Browse Source
This commit is contained in:
刘杰
2025-09-15 23:20:55 +08:00
parent 8d639aed28
commit 66ba7b4b66
8 changed files with 663 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
src/order_pages/orderList/index.module.scss
View File

@@ -1,81 +1,158 @@
@use "~@/scss/images.scss" as img;
.container {
padding: 12px;
padding: 12px 12px 40px;
background-color: #fafafa;
min-height: 100vh;
height: 100vh;
width: 100%;
box-sizing: border-box;
.list {
height: 100%;
width: 100%;
position: relative;
background-color: #fff;
// .bg {
// position: absolute;
// left: 0;
// top: 0;
// width: 100%;
// height: 100%;
// background-color: #fafafa;
// z-index: -1;
// }
.endTips {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.8);
font-feature-settings:
"liga" off,
"clig" off;
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px;
background-color: #f9f9f9;
}
}
.orderItem {
width: 100%;
height: 222px;
// height: 222px;
background-color: #fff;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.06);
margin-bottom: 12px;
.orderTitle {
height: 18px;
padding: 15px 15px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: space-between;
// .orderTitle {
// height: 18px;
// padding: 15px 15px 12px;
// border-bottom: 1px solid rgba(0, 0, 0, 0.06);
// display: flex;
// align-items: center;
// justify-content: space-between;
.userInfo {
// .userInfo {
// display: flex;
// align-items: center;
// justify-content: flex-start;
// gap: 6px;
// .avatar {
// width: 16px;
// height: 16px;
// }
// .nickName {
// display: contents;
// .nickNameText {
// color: #000;
// font-feature-settings:
// "liga" off,
// "clig" off;
// font-family: "PingFang SC";
// font-size: 12px;
// font-style: normal;
// font-weight: 500;
// line-height: 18px;
// }
// .arrowRight {
// width: 8px;
// height: 8px;
// }
// }
// }
// .paidInfo {
// display: flex;
// align-items: center;
// justify-content: flex-end;
// gap: 8px;
// .payTime {
// font-feature-settings:
// "liga" off,
// "clig" off;
// font-family: "PingFang SC";
// font-size: 12px;
// font-style: normal;
// font-weight: 400;
// line-height: 18px;
// &.paid {
// color: rgba(60, 60, 67, 0.6);
// }
// &.pending {
// color: #000;
// }
// }
// .payNum {
// font-feature-settings:
// "liga" off,
// "clig" off;
// font-family: "PingFang SC";
// font-size: 12px;
// font-style: normal;
// font-weight: 600;
// line-height: 18px;
// &.paid {
// color: #000;
// }
// &.pending {
// color: #ff3b30;
// }
// }
// }
// }
.gameInfo {
height: 122px;
.gameTitle {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
justify-content: space-between;
padding: 12px 15px 0;
.avatar {
width: 16px;
height: 16px;
}
.nickName {
display: contents;
.nickNameText {
color: #000;
font-feature-settings:
"liga" off,
"clig" off;
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px;
}
.arrowRight {
width: 8px;
height: 8px;
}
}
}
.paidInfo {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
.payTime {
font-feature-settings:
"liga" off,
"clig" off;
.title {
overflow: hidden;
color: #000;
font-feature-settings: 'liga' off, 'clig' off;
text-overflow: ellipsis;
font-family: "PingFang SC";
font-size: 12px;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 18px;
&.paid {
color: rgba(60, 60, 67, 0.6);
}
&.pending {
color: #000;
}
font-weight: 600;
line-height: 24px; /* 150% */
}
.payNum {
@@ -96,14 +173,96 @@
}
}
}
}
.gameInfo {
height: 122px;
.gameTime {
padding: 6px 0 0 15px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
color: rgba(60, 60, 67, 0.60);
font-feature-settings: 'liga' off, 'clig' off;
text-overflow: ellipsis;
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 150% */
}
.address {
padding: 6px 0 0 15px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
color: rgba(60, 60, 67, 0.60);
font-feature-settings: 'liga' off, 'clig' off;
text-overflow: ellipsis;
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 150% */
}
.gameOtherInfo {
padding: 8px 0 12px 15px;
height: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
.avatarCards {
display: flex;
align-items: center;
justify-content: flex-start;
height: 20px;
.avatar {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.06);
&+.avatar {
margin-left: -10px;
}
}
}
.participantProgress, .levelReq, .playType {
display: flex;
height: 20px;
padding: 0px 8px;
align-items: center;
gap: 4px;
border-radius: 999px;
border: 0.5px solid rgba(0, 0, 0, 0.16);
background: #FFF;
color: #000;
font-feature-settings: 'liga' off, 'clig' off;
font-family: "PingFang SC";
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 181.818% */
letter-spacing: -0.23px;
}
.participantProgress {
color: #c4c4c7;
.current {
color: #000;
}
}
}
}
.orderActions {
height: 28px;
min-height: 28px;
padding: 12px 12px 15px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
@@ -135,6 +294,9 @@
&:last-child {
background: #000;
color: #fff;
&.payNow {
background-color: #ff3b30;
}
}
}
@@ -142,6 +304,7 @@
}
.payNow {
background-color: #ff3b30;
}
}
}
@@ -215,3 +378,47 @@
}
}
}
.dialogFooter {
// width: 100%;
width: calc(100% + 1px);
height: 44px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
// margin: 0 -24px -24px;
bottom: 0;
left: 0;
border-top: 1px solid rgba(0, 0, 0, 0.06);
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
overflow: hidden;
& > .cancel, & > .confirm {
padding: 12px 10px;
height: 44px;
width: 50%;
text-align: center;
// border: 0.5px solid rgba(0, 0, 0, 0.06);
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px;
&:last-child {
background: #000;
color: #fff;
}
}
& > .cancel {
border-radius: 0;
}
& > .confirm {
border-radius: 0;
}
}