|
@@ -7,185 +7,198 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.win_list_container{
|
|
.win_list_container{
|
|
|
- & .list_title{
|
|
|
|
|
|
|
+}
|
|
|
|
|
+.win_list_container_m{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ gap: 1rem;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+.list_title{
|
|
|
|
|
+ font-size: .875rem;
|
|
|
|
|
+ line-height: 22px;
|
|
|
|
|
+ color: var(--header);
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ -webkit-box-align: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin: 0 0 8px 8px;
|
|
|
|
|
+ @media screen and (max-width: 621px) {
|
|
|
font-size: .875rem;
|
|
font-size: .875rem;
|
|
|
- line-height: 22px;
|
|
|
|
|
- color: var(--header);
|
|
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ }
|
|
|
|
|
+ b{
|
|
|
|
|
+ background-color: #45d91e;
|
|
|
|
|
+ width: .5rem;
|
|
|
|
|
+ height: .5rem;
|
|
|
|
|
+ border-radius: .25rem;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
+ margin-right: .625rem;
|
|
|
|
|
+ &:after{
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ margin-top: -.25rem;
|
|
|
|
|
+ margin-left: -.25rem;
|
|
|
|
|
+ background-color: #45d91e4d;
|
|
|
|
|
+ animation: online-ani infinite 1.5s linear;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+.list_context{
|
|
|
|
|
+ background: var(--widget-grid-bg);
|
|
|
|
|
+ padding: 8px 6px;
|
|
|
|
|
+ border-radius: var(--border-radius);
|
|
|
|
|
+ & .tabs{
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- -webkit-box-align: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- margin: 0 0 8px 8px;
|
|
|
|
|
- b{
|
|
|
|
|
- background-color: #45d91e;
|
|
|
|
|
- width: .5rem;
|
|
|
|
|
- height: .5rem;
|
|
|
|
|
- border-radius: .25rem;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- margin-right: .625rem;
|
|
|
|
|
- &:after{
|
|
|
|
|
- content: "";
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- display: block;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- left: 50%;
|
|
|
|
|
- top: 50%;
|
|
|
|
|
- margin-top: -.25rem;
|
|
|
|
|
- margin-left: -.25rem;
|
|
|
|
|
- background-color: #45d91e4d;
|
|
|
|
|
- animation: online-ani infinite 1.5s linear;
|
|
|
|
|
|
|
+ padding: 0 6px;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ & .tab_btn{
|
|
|
|
|
+ padding: .3125rem .375rem;
|
|
|
|
|
+ line-height: 14px;
|
|
|
|
|
+ border-radius: var(--border-radius);
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ width: auto;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ margin-right: 2px;
|
|
|
|
|
+ color: var(--text);
|
|
|
|
|
+ &.active{
|
|
|
|
|
+ background-color:var(--nav-item-hover);
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: var(--header);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- & .list_context{
|
|
|
|
|
- background: var(--widget-grid-bg);
|
|
|
|
|
- padding: 8px 6px;
|
|
|
|
|
- border-radius: var(--border-radius);
|
|
|
|
|
- & .tabs{
|
|
|
|
|
- display: flex;
|
|
|
|
|
|
|
+ & .swiper_stop{
|
|
|
|
|
+ scroll-snap-type:none !important;
|
|
|
|
|
+ scroll-behavior:auto !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ & .swiper_container{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ overflow-x: auto;
|
|
|
|
|
+ scroll-snap-type: x mandatory;
|
|
|
|
|
+ scroll-behavior: smooth;
|
|
|
|
|
+ & .swiper_item{
|
|
|
padding: 0 6px;
|
|
padding: 0 6px;
|
|
|
- margin-bottom: 8px;
|
|
|
|
|
- & .tab_btn{
|
|
|
|
|
- padding: .3125rem .375rem;
|
|
|
|
|
- line-height: 14px;
|
|
|
|
|
- border-radius: var(--border-radius);
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- width: auto;
|
|
|
|
|
|
|
+ flex: none;
|
|
|
|
|
+ width: 96px;
|
|
|
|
|
+ scroll-snap-align: start;
|
|
|
|
|
+ & .game_icon{
|
|
|
height: auto;
|
|
height: auto;
|
|
|
- margin-right: 2px;
|
|
|
|
|
- color: var(--text);
|
|
|
|
|
- &.active{
|
|
|
|
|
- background-color:var(--nav-item-hover);
|
|
|
|
|
- font-weight: 600;
|
|
|
|
|
- color: var(--header);
|
|
|
|
|
|
|
+ img {
|
|
|
|
|
+ border-radius: var(--border-radius);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- & .swiper_stop{
|
|
|
|
|
- scroll-snap-type:none !important;
|
|
|
|
|
- scroll-behavior:auto !important;
|
|
|
|
|
- }
|
|
|
|
|
- & .swiper_container{
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- overflow-x: auto;
|
|
|
|
|
- scroll-snap-type: x mandatory;
|
|
|
|
|
- scroll-behavior: smooth;
|
|
|
|
|
- & .swiper_item{
|
|
|
|
|
- padding: 0 6px;
|
|
|
|
|
- flex: none;
|
|
|
|
|
- width: 96px;
|
|
|
|
|
- scroll-snap-align: start;
|
|
|
|
|
- & .game_icon{
|
|
|
|
|
- height: auto;
|
|
|
|
|
- img {
|
|
|
|
|
- border-radius: var(--border-radius);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- & .amount_wrap{
|
|
|
|
|
- color: var(--primary-color);
|
|
|
|
|
- font-weight: 600;
|
|
|
|
|
- font-size: 13px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
|
|
+ & .amount_wrap{
|
|
|
|
|
+ color: var(--primary-color);
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ }
|
|
|
|
|
+ & .nick_name{
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ margin-top: 6px;
|
|
|
|
|
+ color: var(--header);
|
|
|
|
|
+ & .name_txt{
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
}
|
|
|
- & .nick_name{
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- margin-top: 6px;
|
|
|
|
|
- color: var(--header);
|
|
|
|
|
- & .name_txt{
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- }
|
|
|
|
|
- img {
|
|
|
|
|
- width: 14px;
|
|
|
|
|
- height: 14px;
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- vertical-align: top;
|
|
|
|
|
- margin-right: 4px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 14px;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ vertical-align: top;
|
|
|
|
|
+ margin-right: 4px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- & .list_context_m{
|
|
|
|
|
- background-color: var(--widget-grid-bg);
|
|
|
|
|
- margin-top: .5rem;
|
|
|
|
|
- border-radius: .25rem;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- height: 9.5rem;
|
|
|
|
|
- padding:.5rem;
|
|
|
|
|
- &::after{
|
|
|
|
|
- content: '';
|
|
|
|
|
- height: 3.125rem;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- right: 0;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- background-image: var(--mask-blur);
|
|
|
|
|
- z-index: 2;
|
|
|
|
|
- }
|
|
|
|
|
- & .swiper_container_m{
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- & .swiper_item_m{
|
|
|
|
|
|
|
+}
|
|
|
|
|
+.list_context_m{
|
|
|
|
|
+ background-color: var(--widget-grid-bg);
|
|
|
|
|
+ border-radius: .25rem;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ height: 2.4rem;
|
|
|
|
|
+ padding:0.2rem .5rem;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ &::after{
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ height: 1.125rem;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ background-image: var(--mask-blur);
|
|
|
|
|
+ z-index: 2;
|
|
|
|
|
+ }
|
|
|
|
|
+ & .swiper_container_m{
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ & .swiper_item_m{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 2rem;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ & .game_icon_m{
|
|
|
|
|
+ width: 2rem;
|
|
|
|
|
+ height: 2rem;
|
|
|
|
|
+ img {
|
|
|
|
|
+ border-radius: var(--border-radius);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ & .user_name_m{
|
|
|
|
|
+ //display: flex;
|
|
|
|
|
+ //align-items: center;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ margin: 0 .5rem;
|
|
|
|
|
+ max-width: 5rem;
|
|
|
|
|
+ color: var(--text);
|
|
|
|
|
+ font-size: 0.825rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ & .play_btn{
|
|
|
|
|
+ margin-left: auto;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- height: 2.5rem;
|
|
|
|
|
- & .game_icon_m{
|
|
|
|
|
- width: 2.5rem;
|
|
|
|
|
- height: 2.5rem;
|
|
|
|
|
- img {
|
|
|
|
|
- border-radius: var(--border-radius);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- & .user_name_m{
|
|
|
|
|
- display: flex;
|
|
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ & .user_money{
|
|
|
|
|
+ display: inline-flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- margin: 0 .5rem;
|
|
|
|
|
- width: 22%;
|
|
|
|
|
- color: var(--text);
|
|
|
|
|
- }
|
|
|
|
|
- & .play_btn{
|
|
|
|
|
- margin-left: auto;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- & .user_money{
|
|
|
|
|
- display: inline-flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- justify-content: flex-end;
|
|
|
|
|
- margin-right: 0.875rem;
|
|
|
|
|
- & .amount_m{
|
|
|
|
|
- color: var(--primary-color);
|
|
|
|
|
- font-weight: 700;
|
|
|
|
|
- max-width: 10em;
|
|
|
|
|
- text-align: right;
|
|
|
|
|
- }
|
|
|
|
|
- & .coin_m{
|
|
|
|
|
- width: 0.875rem;
|
|
|
|
|
- height: 0.875rem;
|
|
|
|
|
- margin-left: 0.2em;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ //margin-right: 0.875rem;
|
|
|
|
|
+ & .amount_m{
|
|
|
|
|
+ color: var(--primary-color);
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ max-width: 10em;
|
|
|
|
|
+ text-align: right;
|
|
|
}
|
|
}
|
|
|
- & .icon_arrow{
|
|
|
|
|
- width: .875rem;
|
|
|
|
|
- height: 1.4em;
|
|
|
|
|
- fill: var(--text);
|
|
|
|
|
|
|
+ & .coin_m{
|
|
|
|
|
+ width: 0.875rem;
|
|
|
|
|
+ height: 0.875rem;
|
|
|
|
|
+ margin-left: 0.2em;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ & .icon_arrow{
|
|
|
|
|
+ width: .875rem;
|
|
|
|
|
+ height: 1.4em;
|
|
|
|
|
+ fill: var(--text);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|