html {
background: #fff;
}
.game-park-modal-btn-text {
font-size: 15px !important;
}
.page-mobile-index {
width: 100%;
height: auto;
color: #0f172a;
background: #fff;
.user-center-mobile {
padding: 12px;
.section-card-grid {
gap: 12px;
flex-wrap: wrap;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.dashboard-card {
display: flex;
flex-direction: column;
color: #fff;
text-decoration: none;
&.deleted {
opacity: 0.4;
}
.deleted-text {
font-size: 14px;
color: rgba(255, 26, 0, 1);
}
&:hover {
.card-cover {
.cover {
transform: scale(1.05);
}
}
}
.card-cover {
position: relative;
width: 100%;
/*height: auto;*/
border-radius: 4px;
overflow: hidden;
height: 26vw;
min-height: 80px;
max-height: 200px;
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.2s ease;
}
.card-tag {
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 16px;
border-top-right-radius: 4px;
border-bottom-left-radius: 8px;
background: linear-gradient(258.14deg, #FAB157 -7495.68%, #FFF3CC 1132.99%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(102, 56, 0, 1);
font-size: 10px;
font-weight: 600;
border-left: 1px solid #ebd58d;
border-bottom: 1px solid #ebd58d;
&.card-tag-free {
background: radial-gradient(10000.06% 28181.97% at 109.93% 4923.15%, #BAF5D2 0%, #5CE6A1 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
color: #05331C;
border-left: 1px solid #6cd8a0;
border-bottom: 1px solid #6cd8a0;
}
}
.game-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.5) 100%);
display: flex;
align-items: center;
justify-content: space-between;
color: #FFFFFF;
padding-left: 8px;
padding-top: 12px;
padding-right: 8px;
height: 38px;
.platform {
display: flex;
align-items: center;
gap: 16px;
.platform-item {
display: flex;
align-items: center;
gap: 8px;
position: relative;
font-size: 12px;
font-weight: 500;
color: #fff;
line-height: 10px;
&::after {
content: '';
width: 1px;
height: 8px;
background: #fff;
position: absolute;
right: -8px;
}
&:last-child {
&::after {
display: none;
}
}
}
}
}
.rate {
display: flex;
align-items: center;
gap: 2px;
font-size: 12px;
font-weight: 600;
.rate-fraction {
font-size: 10px;
font-weight: 600;
}
}
}
.game-title {
margin-top: 4px;
line-height: 20px;
color: rgba(0, 0, 0, 1);
font-weight: 400;
font-size: 13px;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.flex {
display: flex;
align-items: center;
}
.flex-1 {
flex: 1;
}
.card-bottom {
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
.time-text {
font-size: 11px;
color: rgba(118, 120, 123, 1);
}
.oprate {
position: relative;
display: flex;
align-items: center;
justify-content: center;
.oprate-single {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
img {
width: 16px;
height: 16px;
}
&:hover {
background: #fff;
img {
opacity: 0.7;
}
}
}
.oprate-trigger {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
&:hover,
&:focus-visible {
background: #fff;
svg {
opacity: 0.7;
}
}
}
.oprate-mask {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
&.show {
opacity: 1;
pointer-events: auto;
}
}
.oprate-menu {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
z-index: 10;
/* 动画关键 */
transform: translateY(100%);
transition: transform 0.25s ease;
will-change: transform;
padding: 0 12px 12px;
.menu-item {
height: 48px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
background: transparent;
font-size: 14px;
cursor: pointer;
border-bottom: 1px solid #F5F5F5;
&:last-child {
border-bottom: 0
}
img {
width: 20px;
height: 20px;
}
&:hover {
background: #fff;
}
}
&.show {
display: block;
transform: translateY(0);
}
}
}
}
.game-card-price {
display: flex;
align-items: center;
gap: 4px;
}
.game-card-price .price-free {
color: #27C4A4;
font-size: 14px;
}
.game-card-price .price-disconut {
display: flex;
align-items: center;
gap: 4px;
}
.discount-price-proportion {
height: 14px;
display: flex;
padding: 0 6px;
justify-content: center;
align-items: center;
font-size: 10px;
line-height: 8px;
font-weight: 600;
color: #fff;
border-radius: 15px;
background: #67C23A;
text-decoration: none;
gap: 8px;
}
.game-card-price .price-final {
color: #ED4840;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: baseline;
}
.game-card-price .price-final .price-symbol {
font-size: 12px;
}
.game-card-price .price-original {
color: rgba(0, 0, 0, 0.5);
font-size: 11px;
text-decoration-line: line-through;
line-height: 20px;
}
}
.empty-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 36px 0;
img{
width: 96px;
height: 96px;
}
.empty-title {
font-size: 14px;
line-height: 22px;
color: rgba(118, 120, 123, 1);
}
&.empty-box-full {
height: calc(100vh - 66px - 40px - 6px);
justify-content: center;
padding: 0;
}
}
}
/*// 分页器样式*/
.game-list-pagination-container {
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0;
gap: 16px;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
a {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
border-radius: 4px;
background-color: #FFFFFF;
color: #1A1A1A;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
border: 1px solid #F0F0F0;
&:hover:not(.disabled) {
background-color: #fff;
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
}
.current {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
border-radius: 4px;
background-color: #FF6B00;
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
}
.more {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
color: #1A1A1A;
font-size: 14px;
font-weight: 500;
}
.prev,
.next {
width: 74px;
height: 32px;
padding: 0;
justify-content: center;
color: #1A1A1A;
font-weight: 500;
font-size: 14px;
}
}
.pagination-jump {
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
color: #1A1A1A;
font-weight: 500;
&-input {
width: 40px;
height: 32px;
border: 1px solid #F0F0F0;
border-radius: 4px;
text-align: center;
font-size: 14px;
}
&-btn {
width: 60px;
height: 32px;
background-color: #FFFFFF;
border: 1px solid #F0F0F0;
border-radius: 4px;
color: #1A1A1A;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
margin-left: 16px;
&:hover {
background-color: #fff;
}
}
}
}
.pagination-mobile-component .pagination-mobile .page-prev, .pagination-mobile-component .pagination-mobile .page-next {
line-height: 28px;
}