feat: detail static
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
.detail-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.custom-navbar {
|
||||
height: 56px; /* 通常与原生导航栏高度一致 */
|
||||
@@ -11,7 +12,10 @@
|
||||
justify-content: center;
|
||||
// background-color: #fff;
|
||||
color: #000;
|
||||
padding-top: 36px; /* 适配状态栏 */
|
||||
padding-top: 44px; /* 适配状态栏 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.detail-navigator {
|
||||
@@ -94,9 +98,848 @@
|
||||
}
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
font-size: 40rpx;
|
||||
margin-top: 20px;
|
||||
transition: color 0.3s ease-in;
|
||||
.detail-page-content {
|
||||
|
||||
&-avatar-tags {
|
||||
padding: 20px 20px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
&-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
&-image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
&-tag {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
padding: 6px 12px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border-radius: 999px;
|
||||
border: 0.5px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.23px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding: 20px 20px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-text {
|
||||
overflow: hidden;
|
||||
color: #FFF;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
text-overflow: ellipsis;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 32px; /* 145.455% */
|
||||
}
|
||||
}
|
||||
|
||||
&-game-info {
|
||||
&-date-weather {
|
||||
padding: 20px 20px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// gap: 12px;
|
||||
|
||||
&-calendar-date {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
&-calendar {
|
||||
display: flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding-bottom: 6px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border-radius: 12px;
|
||||
// border: 0.5px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
overflow: hidden;
|
||||
color: #FFF;
|
||||
|
||||
.month {
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
padding: 1px auto;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: #7B828B;
|
||||
}
|
||||
|
||||
.day {
|
||||
display: flex;
|
||||
width: 48px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
gap: 4px;
|
||||
align-self: stretch;
|
||||
color: #FFF;
|
||||
|
||||
.date {
|
||||
color: #FFF;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
|
||||
.venue-time {
|
||||
color: rgba(255, 255, 255, 0.80);
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-weather {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
&-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
.weather-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
&-text-temperature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: rgba(255, 255, 255, 0.80);
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-place {
|
||||
.location-message {
|
||||
padding: 20px 20px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
&-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
background: #4D5865;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
// border: 0.5px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
|
||||
&-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
gap: 4px;
|
||||
align-self: stretch;
|
||||
|
||||
&-name-distance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px; /* 150% */
|
||||
|
||||
&-arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-address {
|
||||
color: rgba(255, 255, 255, 0.80);
|
||||
text-align: center;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location-map {
|
||||
width: 100%;
|
||||
padding: 20px 20px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
&-map {
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-detail {
|
||||
padding: 24px 15px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.venue-detail-title {
|
||||
display: flex;
|
||||
height: 31px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
padding-bottom: 6px;
|
||||
color: #FFF;
|
||||
text-overflow: ellipsis;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&-notice-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.venue-detail-content {
|
||||
padding: 16px 0 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-tag {
|
||||
overflow: hidden;
|
||||
color: #FFF;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
text-overflow: ellipsis;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 160% */
|
||||
}
|
||||
}
|
||||
|
||||
&-remarks {
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
// font-feature-settings: 'liga' off, 'clig' off;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 160% */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-gameplay-requirements {
|
||||
padding: 24px 15px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.gameplay-requirements-title {
|
||||
overflow: hidden;
|
||||
color: #FFF;
|
||||
height: 24px;
|
||||
padding-bottom: 6px;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
text-overflow: ellipsis;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px; /* 150% */
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.gameplay-requirements {
|
||||
padding: 12px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
align-self: stretch;
|
||||
|
||||
&-title {
|
||||
color: rgba(255, 255, 255, 0.80);
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 171.429% */
|
||||
}
|
||||
|
||||
&-desc {
|
||||
color: #FFF;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px; /* 160% */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-participants {
|
||||
padding: 24px 15px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.participants-title {
|
||||
display: flex;
|
||||
padding-bottom: 6px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
color: #FFF;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
text-overflow: ellipsis;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px; /* 150% */
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.participants-list {
|
||||
padding: 10px 0 0;
|
||||
height: 162px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
|
||||
&-application {
|
||||
display: flex;
|
||||
width: 108px;
|
||||
height: 162px;
|
||||
padding: 16px 12px 10px 12px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
align-self: stretch;
|
||||
border-radius: 20px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.20);
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
flex: 0 0 auto;
|
||||
|
||||
&-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
}
|
||||
|
||||
&-scroll {
|
||||
flex: 0 0 auto;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
height: 162px;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.participants-list-item {
|
||||
display: flex;
|
||||
width: 108px;
|
||||
padding: 16px 12px 10px 12px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border-radius: 20px;
|
||||
border: 0.5px solid rgba(255, 255, 255, 0.20);
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
flex: 0 0 auto;
|
||||
|
||||
&-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
&-name {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-align: center;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 184.615% */
|
||||
}
|
||||
|
||||
&-level {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
text-align: center;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
|
||||
&-role {
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-supplemental-notes {
|
||||
padding: 24px 15px 0;
|
||||
|
||||
.supplemental-notes-title {
|
||||
overflow: hidden;
|
||||
padding-bottom: 7px;
|
||||
height: 24px;
|
||||
color: #FFF;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
text-overflow: ellipsis;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px; /* 150% */
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.supplemental-notes-content {
|
||||
padding: 12px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
&-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-tag {
|
||||
overflow: hidden;
|
||||
color: #FFF;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
text-overflow: ellipsis;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 160% */
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 160% */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-organizer-recommend-games {
|
||||
padding: 24px 15px 0;
|
||||
|
||||
.organizer-title {
|
||||
overflow: hidden;
|
||||
padding-bottom: 6px;
|
||||
height: 24px;
|
||||
color: #FFF;
|
||||
font-feature-settings: 'liga' off, 'clig' off;
|
||||
text-overflow: ellipsis;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px; /* 150% */
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.organizer-avatar-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 0 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: flex-start;
|
||||
|
||||
&-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
&-name {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 184.615% */
|
||||
}
|
||||
|
||||
&-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
letter-spacing: 0.06px;
|
||||
|
||||
&-separator {
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
color: rgba(255, 255, 255, 0.20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.organizer-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
|
||||
.organizer-actions-follow, .organizer-actions-comment {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border-radius: 999px;
|
||||
// border: 0.5px solid rgba(255, 255, 255, 0.10);
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
|
||||
|
||||
& > image {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.organizer-actions-follow {
|
||||
padding: 8px 12px 8px;
|
||||
&-text {
|
||||
color: #FFF;
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 20px; /* 153.846% */
|
||||
letter-spacing: -0.23px;
|
||||
}
|
||||
}
|
||||
|
||||
.organizer-actions-comment {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.organizer-recommend-games {
|
||||
padding-top: 20px;
|
||||
|
||||
.organizer-recommend-games-title {
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-family: "PingFang SC";
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 160% */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
align-self: stretch;
|
||||
|
||||
&-arrow {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend-games-list {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.recommend-games-list-item {
|
||||
width: 246px;
|
||||
height: 122px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(33, 178, 0, 0.20);
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
padding: 12px 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px; /* 150% */
|
||||
|
||||
&-arrow {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-time-range {
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 18px; /* 150% */
|
||||
}
|
||||
|
||||
&-location-venue-distance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
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% */
|
||||
}
|
||||
|
||||
&-addon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&-message {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
&-applications, &-level-requirements, &-play-type {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 20px; /* 181.818% */
|
||||
letter-spacing: -0.23px;
|
||||
display: flex;
|
||||
height: 20px;
|
||||
padding: 6px 8px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border-radius: 999px;
|
||||
// border: 0.5px solid rgba(0, 0, 0, 0.16);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-bottom-bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
padding: 10px 10px env(safe-area-inset-bottom);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: calc(52px + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
|
||||
&-share-and-comment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 52px;
|
||||
width: 113px;
|
||||
box-sizing: border-box;
|
||||
padding: 2px 20px;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
&-join-game {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 52px;
|
||||
width: auto;
|
||||
padding: 2px 6px;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
flex: 1 0 0;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, Button, Swiper, SwiperItem, Image } from '@tarojs/components'
|
||||
import { Cell, Avatar, Progress } from '@nutui/nutui-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text, Button, Swiper, SwiperItem, Image, Map, ScrollView } from '@tarojs/components'
|
||||
import { Cell, Avatar, Progress, Popover } from '@nutui/nutui-react-taro'
|
||||
import Taro, { useRouter } from '@tarojs/taro'
|
||||
// 导入API服务
|
||||
import demoApi from '../../services/demoApi'
|
||||
import commonApi from '../../services/commonApi'
|
||||
import DetailService from '../../services/detailService'
|
||||
import {
|
||||
useUserStats,
|
||||
useUserActions
|
||||
@@ -19,7 +18,9 @@ const images = [
|
||||
'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/49d7cdf0-b03c-4a0f-91c6-e7778080cfcd.png'
|
||||
]
|
||||
|
||||
|
||||
function insertDotInTags(tags: string[]) {
|
||||
return tags.join('-·-').split('-')
|
||||
}
|
||||
|
||||
function Index() {
|
||||
// 使用Zustand store
|
||||
@@ -28,28 +29,24 @@ function Index() {
|
||||
|
||||
const [current, setCurrent] = useState(0)
|
||||
const [colors, setColors] = useState<string []>([])
|
||||
const [detail, setDetail] = useState<any>(null)
|
||||
const { params } = useRouter()
|
||||
const { id, share } = params
|
||||
|
||||
// 本地状态管理
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [userProfile, setUserProfile] = useState<any>(null)
|
||||
const [interests, setInterests] = useState<string[]>([])
|
||||
|
||||
// 页面加载时获取数据
|
||||
useEffect(() => {
|
||||
initializeData()
|
||||
fetchDetail()
|
||||
calcBgMainColors()
|
||||
}, [])
|
||||
|
||||
// 初始化数据
|
||||
const initializeData = async () => {
|
||||
try {
|
||||
// 获取推荐的兴趣爱好
|
||||
const interestsRes = await demoApi.getRecommendedInterests()
|
||||
if (interestsRes.success) {
|
||||
setInterests(interestsRes.data || [])
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取初始数据失败:', error)
|
||||
const fetchDetail = async () => {
|
||||
const res = await DetailService.getDetail(Number(id))
|
||||
if (res.code === 0) {
|
||||
console.log(res.data)
|
||||
setDetail(res.data)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,8 +59,84 @@ function Index() {
|
||||
setColors(textcolors)
|
||||
}
|
||||
|
||||
const tags = [{
|
||||
name: '🕙 急招',
|
||||
icon: '',
|
||||
}, {
|
||||
name: '🔥 本周热门',
|
||||
icon: '',
|
||||
}, {
|
||||
name: '🎉 新活动',
|
||||
icon: '',
|
||||
}, {
|
||||
name: '官方组织',
|
||||
icon: '',
|
||||
}]
|
||||
|
||||
const detailTags = ['室内', '硬地', '2号场', '有停车场', '有淋浴间', '有更衣室']
|
||||
|
||||
const { title, longitude, latitude } = detail || {}
|
||||
|
||||
const requirements = [{
|
||||
title: 'NTRP水平要求',
|
||||
desc: '2.0 - 4.5 之间',
|
||||
}, {
|
||||
title: '活动玩法',
|
||||
desc: '双打',
|
||||
}, {
|
||||
title: '人员构成',
|
||||
desc: '个人球局 · 组织者参与活动',
|
||||
}]
|
||||
|
||||
const participants = detail?.participants || []
|
||||
|
||||
const supplementalNotesTags = ['仅限男生', '装备自备', '其他']
|
||||
|
||||
const recommendGames = [
|
||||
{
|
||||
title: '黄浦日场对拉',
|
||||
time: '2025-08-25 9:00',
|
||||
timeLength: '2小时',
|
||||
venue: '上海体育场',
|
||||
veuneType: '室外',
|
||||
distance: '1.2km',
|
||||
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
applications: 10,
|
||||
checkedApplications: 3,
|
||||
levelRequirements: 'NTRP 3.5',
|
||||
playType: '双打',
|
||||
},
|
||||
{
|
||||
title: '黄浦夜场对拉',
|
||||
time: '2025-08-25 19:00',
|
||||
timeLength: '2小时',
|
||||
venue: '上海体育场',
|
||||
veuneType: '室外',
|
||||
distance: '1.2km',
|
||||
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
applications: 10,
|
||||
checkedApplications: 3,
|
||||
levelRequirements: 'NTRP 3.5',
|
||||
playType: '双打',
|
||||
},
|
||||
{
|
||||
title: '黄浦全天对拉',
|
||||
time: '2025-08-25 9:00',
|
||||
timeLength: '12小时',
|
||||
venue: '上海体育场',
|
||||
veuneType: '室外',
|
||||
distance: '1.2km',
|
||||
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
applications: 10,
|
||||
checkedApplications: 3,
|
||||
levelRequirements: 'NTRP 3.5',
|
||||
playType: '双打',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<View className='detail-page'>
|
||||
{/* custom navbar */}
|
||||
<view className="custom-navbar">
|
||||
<View className='detail-navigator'>
|
||||
<View className='detail-navigator-back'>
|
||||
@@ -73,10 +146,10 @@ function Index() {
|
||||
<Image className='detail-navigator-logo-icon' src={img.ICON_LOGO_GO} />
|
||||
</View>
|
||||
</View>
|
||||
{/* <view className="navbar-title">我的自定义标题</view> */}
|
||||
</view>
|
||||
<View className='detail-page-bg' style={{ backgroundImage: `url(${images[current]})` }} />
|
||||
<View className='detail-page-bg-text' />
|
||||
{/* swiper */}
|
||||
<Swiper
|
||||
className='detail-swiper'
|
||||
indicatorDots={false}
|
||||
@@ -100,9 +173,284 @@ function Index() {
|
||||
</SwiperItem>
|
||||
))}
|
||||
</Swiper>
|
||||
<Text className='detail-text' style={{ color: colors[current] }}>
|
||||
Five feet from the bed was an earthen wall that had suffered from numerous cracks due to the passage of time. From the other side of the wall came the nagging voice of his mother and the occasional deep breathing of his father who was smoking his pipe.
|
||||
</Text>
|
||||
{/* content */}
|
||||
<View className='detail-page-content'>
|
||||
{/* avatar and tags */}
|
||||
<View className='detail-page-content-avatar-tags'>
|
||||
<View className='detail-page-content-avatar-tags-avatar'>
|
||||
{/* network image mock */}
|
||||
<Image className='detail-page-content-avatar-tags-avatar-image' src="https://img.yzcdn.cn/vant/cat.jpeg" />
|
||||
</View>
|
||||
<View className='detail-page-content-avatar-tags-tags'>
|
||||
{tags.map((tag, index) => (
|
||||
<View key={index} className='detail-page-content-avatar-tags-tags-tag'>
|
||||
{tag.icon && <Image src={tag.icon} />}
|
||||
<Text>{tag.name}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
{/* title */}
|
||||
<View className='detail-page-content-title'>
|
||||
<Text className='detail-page-content-title-text'>{title}</Text>
|
||||
</View>
|
||||
{/* Date and Place and weather */}
|
||||
<View className='detail-page-content-game-info'>
|
||||
{/* Date and Weather */}
|
||||
<View className='detail-page-content-game-info-date-weather'>
|
||||
{/* Calendar and Date time */}
|
||||
<View className='detail-page-content-game-info-date-weather-calendar-date'>
|
||||
{/* Calendar */}
|
||||
<View className='detail-page-content-game-info-date-weather-calendar-date-calendar'>
|
||||
<View className="month">3月</View>
|
||||
<View className="day">25</View>
|
||||
</View>
|
||||
{/* Date time */}
|
||||
<View className='detail-page-content-game-info-date-weather-calendar-date-date'>
|
||||
<View className="date">3月25日 周一</View>
|
||||
<View className="venue-time">19:00-21:00 （2小时）</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* Weather */}
|
||||
<View className='detail-page-content-game-info-date-weather-weather'>
|
||||
{/* Weather icon */}
|
||||
<View className='detail-page-content-game-info-date-weather-weather-icon'>
|
||||
<Image className="weather-icon" src={img.ICON_WEATHER_SUN} />
|
||||
</View>
|
||||
{/* Weather text and temperature */}
|
||||
<View className='detail-page-content-game-info-date-weather-weather-text-temperature'>
|
||||
<Text>28℃ - 32℃</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* Place */}
|
||||
<View className='detail-page-content-game-info-place'>
|
||||
{/* venue location message */}
|
||||
<View className='location-message'>
|
||||
{/* location icon */}
|
||||
<View className='location-message-icon'>
|
||||
<Image className='location-message-icon-image' src={img.ICON_DETAIL_MAP} />
|
||||
</View>
|
||||
{/* location message */}
|
||||
<View className='location-message-text'>
|
||||
{/* venue name and distance */}
|
||||
<View className='location-message-text-name-distance'>
|
||||
<Text>上海体育场</Text>
|
||||
<Text>·</Text>
|
||||
<Text>1.2km</Text>
|
||||
<Image className='location-message-text-name-distance-arrow' src={img.ICON_DETAIL_ARROW_RIGHT} />
|
||||
</View>
|
||||
{/* venue address */}
|
||||
<View className='location-message-text-address'>
|
||||
<Text>上海市徐汇区肇嘉浜路128号</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* venue map */}
|
||||
<View className='location-map'>
|
||||
<Map
|
||||
className='location-map-map'
|
||||
longitude={longitude}
|
||||
latitude={latitude}
|
||||
onError={() => {}}
|
||||
// hide business msg
|
||||
showLocation
|
||||
theme='dark'
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* detail */}
|
||||
<View className='detail-page-content-detail'>
|
||||
{/* venue detail title and venue ordered status */}
|
||||
<View className='venue-detail-title'>
|
||||
<Text>场馆详情</Text>
|
||||
<Text>·</Text>
|
||||
<Text>已订场</Text>
|
||||
<Popover
|
||||
title="场地预定截图"
|
||||
description={<View>
|
||||
<Image src="https://img.yzcdn.cn/vant/cat.jpeg" />
|
||||
</View>}
|
||||
location='top'
|
||||
visible={false}
|
||||
>
|
||||
<Image className='venue-detail-title-notice-icon' src={img.ICON_DETAIL_NOTICE} />
|
||||
</Popover>
|
||||
</View>
|
||||
{/* venue detail content */}
|
||||
<View className='venue-detail-content'>
|
||||
{/* venue detail tags */}
|
||||
<View className='venue-detail-content-tags'>
|
||||
{insertDotInTags(detailTags).map((tag, index) => (
|
||||
<View key={index} className='venue-detail-content-tags-tag'>
|
||||
<Text>{tag}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
{/* venue remarks */}
|
||||
<View className='venue-detail-content-remarks'>
|
||||
<Text>其他这是用户在场地补充描述里自己写的东西啦啦啦啦啦啦啦啦啦啦啦啦</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* gameplay requirements */}
|
||||
<View className='detail-page-content-gameplay-requirements'>
|
||||
{/* title */}
|
||||
<View className="gameplay-requirements-title">
|
||||
<Text>玩法要求</Text>
|
||||
</View>
|
||||
{/* requirements */}
|
||||
<View className='gameplay-requirements'>
|
||||
{requirements.map((item, index) => (
|
||||
<View key={index} className='gameplay-requirements-item'>
|
||||
<Text className='gameplay-requirements-item-title'>{item.title}</Text>
|
||||
<Text className='gameplay-requirements-item-desc'>{item.desc}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
{/* participants */}
|
||||
<View className='detail-page-content-participants'>
|
||||
<View className='participants-title'>
|
||||
<Text>参与者</Text>
|
||||
<Text>·</Text>
|
||||
<Text>剩余空位 3</Text>
|
||||
</View>
|
||||
<View className='participants-list'>
|
||||
{/* application */}
|
||||
<View className='participants-list-application' onClick={() => { Taro.showToast({ title: 'To be continued', icon: 'none' }) }}>
|
||||
<Image className='participants-list-application-icon' src={img.ICON_DETAIL_APPLICATION_ADD} />
|
||||
<Text className='participants-list-application-text'>申请加入</Text>
|
||||
</View>
|
||||
{/* participants list */}
|
||||
<ScrollView className='participants-list-scroll' scrollX>
|
||||
<View className='participants-list-scroll-content' style={{ width: `${(participants.length + 1) * 108 + (participants.length) * 8 - 30}px` }}>
|
||||
{participants.map((participant) => (
|
||||
<View key={participant.id} className='participants-list-item'>
|
||||
{/* <Avatar className='participants-list-item-avatar' src={participant.user.avatar_url} /> */}
|
||||
{/* network image mock random */}
|
||||
<Avatar className='participants-list-item-avatar' src={`https://picsum.photos/800/600?random=${participant.id}`} />
|
||||
<Text className='participants-list-item-name'>{participant.user.nickname || '未知'}</Text>
|
||||
<Text className='participants-list-item-level'>{participant.level || '未知'}</Text>
|
||||
<Text className='participants-list-item-role'>{participant.role || '参与者'}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
{/* supplemental notes */}
|
||||
<View className='detail-page-content-supplemental-notes'>
|
||||
<View className='supplemental-notes-title'>
|
||||
<Text>补充说明</Text>
|
||||
</View>
|
||||
<View className='supplemental-notes-content'>
|
||||
{/* supplemental notes tags */}
|
||||
<View className='supplemental-notes-content-tags'>
|
||||
{insertDotInTags(supplementalNotesTags).map((tag, index) => (
|
||||
<View key={index} className='supplemental-notes-content-tags-tag'>
|
||||
<Text>{tag}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
{/* supplemental notes content */}
|
||||
<View className='supplemental-notes-content-text'>
|
||||
<Text>其他这是用户在补充说明里自己写的东西啦啦啦啦啦啦啦啦啦啦啦啦其他这是用户在补充说明里自己写的东西啦啦啦啦啦啦啦啦啦啦啦啦</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* organizer and recommend games by organizer */}
|
||||
<View className='detail-page-content-organizer-recommend-games'>
|
||||
{/* orgnizer title */}
|
||||
<View className='organizer-title'>
|
||||
<Text>组织者</Text>
|
||||
</View>
|
||||
{/* organizer avatar and name */}
|
||||
<View className='organizer-avatar-name'>
|
||||
<Avatar className='organizer-avatar-name-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
|
||||
<View className='organizer-avatar-name-message'>
|
||||
<Text className='organizer-avatar-name-message-name'>Light</Text>
|
||||
<View className='organizer-avatar-name-message-stats'>
|
||||
<Text>已组织 8 次</Text>
|
||||
<View className='organizer-avatar-name-message-stats-separator' />
|
||||
<Text>NTRP 3.5</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="organizer-actions">
|
||||
<View className="organizer-actions-follow">
|
||||
<Image className='organizer-actions-follow-icon' src={img.ICON_DETAIL_APPLICATION_ADD} />
|
||||
<Text className='organizer-actions-follow-text'>关注</Text>
|
||||
</View>
|
||||
<View className="organizer-actions-comment">
|
||||
<Image className='organizer-actions-comment-icon' src={img.ICON_DETAIL_COMMENT} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* recommend games by organizer */}
|
||||
<View className='organizer-recommend-games'>
|
||||
<View className='organizer-recommend-games-title'>
|
||||
<Text>TA的更多活动</Text>
|
||||
<Image className='organizer-recommend-games-title-arrow' src={img.ICON_DETAIL_ARROW_RIGHT} />
|
||||
</View>
|
||||
<ScrollView className='recommend-games-list' scrollX>
|
||||
<View className='recommend-games-list-content'>
|
||||
{recommendGames.map((game, index) => (
|
||||
<View key={index} className='recommend-games-list-item'>
|
||||
{/* game title */}
|
||||
<View className='recommend-games-list-item-title'>
|
||||
<Text>{game.title}</Text>
|
||||
<Image className='recommend-games-list-item-title-arrow' src={img.ICON_DETAIL_ARROW_RIGHT} />
|
||||
</View>
|
||||
{/* game time and range */}
|
||||
<View className='recommend-games-list-item-time-range'>
|
||||
<Text>{game.time}</Text>
|
||||
<Text>{game.timeLength}</Text>
|
||||
</View>
|
||||
{/* game location、vunue、distance */}
|
||||
<View className='recommend-games-list-item-location-venue-distance'>
|
||||
<Text>{game.venue}</Text>
|
||||
<Text>·</Text>
|
||||
<Text>{game.veuneType}</Text>
|
||||
<Text>·</Text>
|
||||
<Text>{game.distance}</Text>
|
||||
</View>
|
||||
{/* organizer avatar、applications、level requirements、play type */}
|
||||
<View className='recommend-games-list-item-addon'>
|
||||
<Avatar className='recommend-games-list-item-addon-avatar' src={game.avatar} />
|
||||
<View className='recommend-games-list-item-addon-message'>
|
||||
<View className='recommend-games-list-item-addon-message-applications'>
|
||||
<Text>报名人数 {game.checkedApplications} / {game.applications}</Text>
|
||||
</View>
|
||||
<View className='recommend-games-list-item-addon-message-level-requirements'>
|
||||
<Text>{game.levelRequirements}</Text>
|
||||
</View>
|
||||
<View className='recommend-games-list-item-addon-message-play-type'>
|
||||
<Text>{game.playType}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
{/* sticky bottom action bar */}
|
||||
<View className="sticky-bottom-bar">
|
||||
<View className="sticky-bottom-bar-share-and-comment">
|
||||
<View></View>
|
||||
<View></View>
|
||||
</View>
|
||||
<View className="sticky-bottom-bar-join-game">
|
||||
<Text>🎾</Text>
|
||||
<Text>立即加入</Text>
|
||||
<View className='game-price'>
|
||||
<Text>¥ 65</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user