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-07 20:39:36 +08:00
parent 30a4ccae4d
commit 1a01ffa17b
5 changed files with 415 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/pages/detail/index.scss
View File

@@ -16,6 +16,8 @@
position: sticky;
top: 0;
z-index: 100;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.2);
}
.detail-navigator {
@@ -63,12 +65,26 @@
left: 0;
top: 0;
background-size: cover;
filter: blur(40px);
transform: scale(1.5);
// filter: blur(40px);
// transform: scale(1.5);
z-index: -2;
width: calc(100% + 20px);
height: calc(100% + 20px);
margin: -10px;
// width: calc(100% + 20px);
// height: calc(100% + 20px);
// margin: -10px;
width: 100vw;
height: 100vh;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.40) 100%);
backdrop-filter: blur(100px);
}
}
.detail-page-bg-text {
@@ -215,7 +231,6 @@
display: flex;
width: 48px;
height: 48px;
padding-bottom: 6px;
box-sizing: border-box;
flex-direction: column;
align-items: center;
@@ -225,6 +240,7 @@
background: rgba(255, 255, 255, 0.25);
overflow: hidden;
color: #FFF;
background: #536272;
.month {
width: 100%;
@@ -235,20 +251,21 @@
box-sizing: border-box;
justify-content: center;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
// border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: #7B828B;
}
.day {
display: flex;
width: 48px;
padding-bottom: 6px;
height: 30px;
// padding-bottom: 6px;
box-sizing: border-box;
flex-direction: column;
align-items: center;
gap: 4px;
// border: 0.5px solid rgba(255, 255, 255, 0.08);
// background: rgba(255, 255, 255, 0.25);
// background-color: #536272;
}
}
@@ -334,7 +351,7 @@
align-items: center;
overflow: hidden;
// border: 0.5px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.25);
// background: rgba(255, 255, 255, 0.25);
&-image {
width: 20px;
@@ -399,7 +416,7 @@
}
}
&-detail {
&-venue {
padding: 24px 15px 0;
box-sizing: border-box;
@@ -408,7 +425,7 @@
height: 31px;
align-items: center;
justify-content: flex-start;
gap: 4px;
gap: 8px;
padding-bottom: 6px;
color: #FFF;
text-overflow: ellipsis;
@@ -419,9 +436,15 @@
line-height: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
&-notice-icon {
width: 14px;
height: 14px;
.venue-reserve-status {
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 4px;
.venue-reserve-screenshot {
width: 16px;
height: 16px;
}
}
}
@@ -461,6 +484,51 @@
line-height: 24px; /* 160% */
}
}
.venue-screenshot-title {
display: flex;
padding: 18px 20px 10px 20px;
align-items: center;
align-self: stretch;
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
letter-spacing: -0.23px;
}
.venue-screenshot-scroll-view {
max-height: calc(100vh - 260px);
overflow-y: auto;
padding-bottom: 40px;
.venue-screenshot-image-list {
width: 100%;
padding: 0 16px;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 10px;
.venue-screenshot-image-item {
aspect-ratio: 1/1;
border-radius: 9px;
border: 1px solid rgba(0, 0, 0, 0.12);
box-sizing: border-box;
background: rgba(0, 0, 0, 0.06);
margin: 0;
position: relative;
.venue-screenshot-image-item-image {
width: 100%;
height: 100%;
border-radius: 9px;
margin: 0;
}
}
}
}
}
&-gameplay-requirements {
@@ -591,7 +659,7 @@
.participants-list-item {
display: flex;
width: 108px;
padding: 16px 12px 10px 12px;
padding: 16px 4px 10px 4px;
box-sizing: border-box;
flex-direction: column;
justify-content: center;
@@ -608,6 +676,7 @@
}
&-name {
width: 100%;
color: rgba(255, 255, 255, 0.85);
text-align: center;
font-feature-settings: 'liga' off, 'clig' off;
@@ -616,6 +685,9 @@
font-style: normal;
font-weight: 500;
line-height: 24px; /* 184.615% */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-level {