|
|
@@ -1,196 +1,175 @@
|
|
|
-@import "media.scss";
|
|
|
+@charset "UTF-8";
|
|
|
@import "base/base.scss";
|
|
|
+
|
|
|
@import "swiper.css";
|
|
|
|
|
|
-.page-stake-main {
|
|
|
+.page-stake-main{
|
|
|
width: 1136px;
|
|
|
margin: 0 auto;
|
|
|
+ background-color: #36353b;
|
|
|
word-break: normal;
|
|
|
- position: relative;
|
|
|
}
|
|
|
-
|
|
|
// 押注
|
|
|
-.page-stake {
|
|
|
- padding: 18px 32px 20px 32px;
|
|
|
+.page-stake{
|
|
|
+ padding: 0px 32px 20px 32px;
|
|
|
position: relative;
|
|
|
-
|
|
|
- .top-swiper-container {
|
|
|
+ background: url("src/img/allstar-guessbg.png") no-repeat ;
|
|
|
+ background-size: 1136px 385px;
|
|
|
+ .top-swiper-container{
|
|
|
margin-top: 6px;
|
|
|
- }
|
|
|
|
|
|
- .match-container {
|
|
|
- padding: 72px 20px 20px 20px;
|
|
|
+ }
|
|
|
+ .match-container{
|
|
|
+ padding: 50px 20px 10px 20px !important;
|
|
|
box-sizing: border-box;
|
|
|
- border: 1px solid #3364b0;
|
|
|
- border-bottom: none;
|
|
|
- .match-title-hidden {
|
|
|
+ position: relative !important;
|
|
|
+ & > .title:first-child{
|
|
|
+ color: #fff !important;
|
|
|
+ font-size: 16px !important;
|
|
|
+ background-color: #27277a !important;
|
|
|
+ padding: 12px 0 !important;
|
|
|
+ position: absolute !important;
|
|
|
+ top: 0 !important;
|
|
|
+ left: 0 !important;
|
|
|
+ right: 0 !important;
|
|
|
+ }
|
|
|
+ .match-title-hidden{
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .match-container > .title{
|
|
|
- position: absolute;
|
|
|
- padding: 24px 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- background-color: #e54747;
|
|
|
- font-size: 24px !important;
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
-
|
|
|
- .top-swiper-slide {
|
|
|
+ .top-swiper-slide{
|
|
|
// height: 300px;
|
|
|
box-sizing: border-box;
|
|
|
- background-color: #111d43;
|
|
|
-
|
|
|
- .title {
|
|
|
+ background: url("src/img/allstar-bg.png") !important;
|
|
|
+ .title{
|
|
|
font-size: 14px;
|
|
|
- color: #d4af3d;
|
|
|
+ color: #313036;
|
|
|
font-weight: bold;
|
|
|
text-align: center;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
-
|
|
|
- .info {
|
|
|
+ .info{
|
|
|
padding: 12px 0 10px 0;
|
|
|
- border-bottom: 2px solid #3364b0;
|
|
|
-
|
|
|
- .date {
|
|
|
+ border-bottom: 2px solid #27277a;
|
|
|
+ .date{
|
|
|
font-size: 12px;
|
|
|
color: #fff;
|
|
|
display: inline-block;
|
|
|
margin-right: 16px;
|
|
|
}
|
|
|
-
|
|
|
- .status {
|
|
|
+ .status{
|
|
|
float: right;
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
- .start {
|
|
|
+ .start{
|
|
|
color: #009944;
|
|
|
}
|
|
|
-
|
|
|
- .unstart {
|
|
|
+ .unstart{
|
|
|
color: #6f6d7a;
|
|
|
}
|
|
|
-
|
|
|
- .end {
|
|
|
- color: #d90639;
|
|
|
+ .end{
|
|
|
+ color: #e54747 !important;
|
|
|
}
|
|
|
-
|
|
|
- .pause {
|
|
|
+ .pause{
|
|
|
color: #1f77fb;
|
|
|
}
|
|
|
-
|
|
|
- .cancel {
|
|
|
+ .cancel{
|
|
|
color: #009944;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .match {
|
|
|
- .match-item {
|
|
|
+ .match{
|
|
|
+ .match-item{
|
|
|
float: left;
|
|
|
width: 33.33%;
|
|
|
text-align: center;
|
|
|
-
|
|
|
- img {
|
|
|
+ img{
|
|
|
width: 56px;
|
|
|
height: auto;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .score {
|
|
|
+ .score{
|
|
|
padding-top: 54px;
|
|
|
text-align: center;
|
|
|
font-size: 30px;
|
|
|
color: #fff;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
- .title {
|
|
|
+ .title{
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
padding: 14px 0 8px 0;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .match-precent {
|
|
|
+ .match-precent{
|
|
|
height: 26px;
|
|
|
-
|
|
|
- &.pre-hidden {
|
|
|
+ &.pre-hidden{
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
-
|
|
|
- .progress {
|
|
|
+ .progress{
|
|
|
margin-top: 10px;
|
|
|
width: 50%;
|
|
|
-
|
|
|
- .length {
|
|
|
+ display: flex !important;
|
|
|
+ position: relative !important;
|
|
|
+ .length{
|
|
|
height: 4px;
|
|
|
- display: block;
|
|
|
+ display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
-
|
|
|
- &.red {
|
|
|
- background-color: #e50033;
|
|
|
- display: block
|
|
|
+ &.red{
|
|
|
+ background-color: #e54747 !important;
|
|
|
// width: 80px;
|
|
|
}
|
|
|
-
|
|
|
- &.blue {
|
|
|
- background-color: #01ffff;
|
|
|
- display: block;
|
|
|
- float: right;
|
|
|
+ &.blue{
|
|
|
+ background-color: #01ffff !important;
|
|
|
+ float: right !important;
|
|
|
+ position: absolute !important;
|
|
|
+ right: 0 !important;
|
|
|
// width: 20px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .num {
|
|
|
+ .num{
|
|
|
display: inline-block;
|
|
|
color: #fff;
|
|
|
font-size: 12px;
|
|
|
width: 32px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .left {
|
|
|
+ .left{
|
|
|
float: left;
|
|
|
+ position: relative !important;
|
|
|
+ .num{
|
|
|
+ position: absolute !important;
|
|
|
+ top: 8px !important;
|
|
|
+ left: 0 !important;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .right {
|
|
|
- float: right;
|
|
|
- text-align: right;
|
|
|
- position: relative;
|
|
|
- .num {
|
|
|
- position: absolute;
|
|
|
- text-align: left;
|
|
|
- right: 0;
|
|
|
- top: 7px;
|
|
|
+ .right{
|
|
|
+ float: right !important;
|
|
|
+ text-align: right !important;
|
|
|
+ .num{
|
|
|
+ text-align: left !important;
|
|
|
+ position: absolute !important;
|
|
|
+ top: 8px !important;
|
|
|
+ right: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .match-res-title {
|
|
|
- &.hidden {
|
|
|
+ .match-res-title{
|
|
|
+ &.hidden{
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
-
|
|
|
- color: #fff;
|
|
|
+ color: #4f4e54;
|
|
|
font-size: 12px;
|
|
|
padding-left: 12px;
|
|
|
- border-left: 4px solid #ba0632;
|
|
|
+ border-left: 4px solid #e54747 !important;
|
|
|
margin-top: 14px;
|
|
|
}
|
|
|
-
|
|
|
- .team-btn-wrap {
|
|
|
+ .team-btn-wrap{
|
|
|
margin-top: 10px;
|
|
|
-
|
|
|
- .team-btn {
|
|
|
+ .team-btn{
|
|
|
display: inline-block;
|
|
|
width: 104px;
|
|
|
height: 34px;
|
|
|
@@ -198,76 +177,57 @@
|
|
|
font-size: 12px;
|
|
|
text-align: center;
|
|
|
line-height: 34px;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
+ &:last-child{
|
|
|
float: right;
|
|
|
}
|
|
|
-
|
|
|
- &.team-unselect {
|
|
|
+ &.team-unselect{
|
|
|
background-color: #807d8c;
|
|
|
-
|
|
|
- &:hover {
|
|
|
+ &:hover{
|
|
|
background-color: #807d8c;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .red-team {
|
|
|
+ .red-team{
|
|
|
background-color: #d90639;
|
|
|
-
|
|
|
- &:hover {
|
|
|
+ &:hover{
|
|
|
background-color: #b7052f;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .blue-team {
|
|
|
- background-color: #39b932;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: #29a922;
|
|
|
+ .blue-team{
|
|
|
+ background-color: #066ebd;
|
|
|
+ &:hover{
|
|
|
+ background-color: #055796;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .end-team {
|
|
|
- &:nth-child(1) {
|
|
|
- background: #47b7e9 url(//pub.dwstatic.com/zt2018/lolrise//img/line.png) no-repeat 50% 50%;
|
|
|
- color: #333;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: #B3E2F4;
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
+ .end-team{
|
|
|
+ &:first-child{
|
|
|
+ background: url("src/img/allstarbtn-l.png") no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- background: rgba(255, 255, 255, 0) url(//pub.dwstatic.com/zt2018/lolrise//img/line2.png) no-repeat 50% 50%;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: rgba(255, 255, 255, .3);
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
+ &:last-child{
|
|
|
+ background: url("src/img/allstarbtn-r.png") no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: #65636f;
|
|
|
+ &:hover{
|
|
|
+ filter: brightness(1.4);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .match-guess-btn {
|
|
|
- height: 30px;
|
|
|
+ .match-guess-btn{
|
|
|
+ height: 30px !important;
|
|
|
line-height: 30px;
|
|
|
- color: #e54747;
|
|
|
+ background-color: #1c0455 !important;
|
|
|
+ color: #ffffff !important;
|
|
|
font-size: 12px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- filter: brightness(2);
|
|
|
+ transition: all 0.3s ease-in-out;
|
|
|
+ &:hover{
|
|
|
+ background: url("src/img/allstar-moreguess.png") center no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .match-guess-btn_m {
|
|
|
+ .match-guess-btn_m{
|
|
|
display: none;
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
@@ -278,17 +238,42 @@
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+.swiper-button-prev{
|
|
|
+ background: url("src/img/allstar-arrow.png") no-repeat !important;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-button-next{
|
|
|
+ background: url("src/img/allstar-arrow.png") no-repeat !important;
|
|
|
+ transform: rotateZ(180deg);
|
|
|
+}
|
|
|
|
|
|
-.week-select {
|
|
|
- .week-btn-wrap {
|
|
|
+.swiper-button-prev, .swiper-button-next{
|
|
|
+ width: 12px !important;
|
|
|
+ height: 23px !important;
|
|
|
+ margin-top: 2px !important;
|
|
|
+}
|
|
|
+.week-select{
|
|
|
+ position: relative !important;
|
|
|
+ &:after{
|
|
|
+ content: '' !important;
|
|
|
+ position: relative !important;
|
|
|
+ width: 100% !important;
|
|
|
+ left: 0 !important;
|
|
|
+ right: 0 !important;
|
|
|
+ bottom: 0 !important;
|
|
|
+ height: 1px !important;
|
|
|
+ background: -webkit-linear-gradient(left, #e54747 , #190828) !important; /* Safari 5.1 - 6.0 */
|
|
|
+ background: -o-linear-gradient(right, #e54747 , #190828) !important; /* Opera 11.1 - 12.0 */
|
|
|
+ background: -moz-linear-gradient(right, #e54747 , #190828) !important; /* Firefox 3.6 - 15 */
|
|
|
+ background: linear-gradient(to right, #e54747 , #190828) !important; /* 标准的语法 */
|
|
|
+ }
|
|
|
+ .week-btn-wrap{
|
|
|
float: left;
|
|
|
- width: 100%;
|
|
|
+ width: 90%;
|
|
|
// display: flex;
|
|
|
height: 38px;
|
|
|
overflow: hidden;
|
|
|
- border-bottom: 1px solid #e54747;
|
|
|
-
|
|
|
- .btn {
|
|
|
+ .btn{
|
|
|
float: left;
|
|
|
margin-right: 3px;
|
|
|
margin-bottom: 3px;
|
|
|
@@ -296,170 +281,127 @@
|
|
|
&:nth-child(n+4){
|
|
|
display: none;
|
|
|
}
|
|
|
- &:active {
|
|
|
- background-color: #e54747;
|
|
|
- }
|
|
|
}
|
|
|
-
|
|
|
- &.showmore {
|
|
|
+ &.showmore{
|
|
|
height: auto;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .btn-more {
|
|
|
+ .btn-more{
|
|
|
float: left;
|
|
|
width: 10%;
|
|
|
}
|
|
|
-
|
|
|
.btn {
|
|
|
- height: 36px;
|
|
|
- line-height: 38px;
|
|
|
- cursor: pointer;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- color: #e54747;
|
|
|
- font-weight: 500;
|
|
|
- border-radius: 3px;
|
|
|
- transition: background-color 0.3s ease;
|
|
|
- position: relative;
|
|
|
+ height: 38px !important;
|
|
|
+ line-height: 38px !important;
|
|
|
+ cursor: pointer !important;
|
|
|
+ text-align: center !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+ color: #e54747 !important;
|
|
|
+ font-weight: 500 !important;
|
|
|
+ border-radius: 3px !important;
|
|
|
+ position: relative !important;
|
|
|
+ &:after{
|
|
|
+ transition: all 0.3s ease-in-out;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ font-weight: bolder;
|
|
|
+ &:after{
|
|
|
+ content: '' !important;
|
|
|
+ display: block !important;
|
|
|
+ position: absolute !important;
|
|
|
+ left: 0 !important;
|
|
|
+ right: 0 !important;
|
|
|
+ bottom: 0 !important;
|
|
|
+ height: 9px !important;
|
|
|
+ background: url("src/img/bottom-border.png") !important;
|
|
|
+ background-size: 100% 100% !important;
|
|
|
+ }
|
|
|
|
|
|
- &.active {
|
|
|
- border-bottom: 3px solid #e54747;
|
|
|
- &:after {
|
|
|
- position: absolute;
|
|
|
- display: inline-block;
|
|
|
- content: '';
|
|
|
- height: 0;
|
|
|
- width: 0;
|
|
|
- left: 50%;
|
|
|
- bottom: 0;
|
|
|
- margin-left: -2px;
|
|
|
- border: 4px solid #e54747;
|
|
|
- border-color: transparent transparent #e54747 transparent;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ font-weight: bolder!important;
|
|
|
+ &:after{
|
|
|
+ content: ''!important;
|
|
|
+ display: block!important;
|
|
|
+ position: absolute!important;
|
|
|
+ left: 0!important;
|
|
|
+ right: 0!important;
|
|
|
+ bottom: 0!important;
|
|
|
+ height: 9px!important;
|
|
|
+ background: url("src/img/bottom-border.png")!important;
|
|
|
+ background-size: 100% 100%!important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.arrow-down-icon {
|
|
|
- display: none;
|
|
|
+.arrow-down-icon{
|
|
|
+ display: inline-block;
|
|
|
margin-left: 4px;
|
|
|
width: 9px;
|
|
|
height: 6px;
|
|
|
- background: url(//pub.dwstatic.com/zt2018/lolrise//img/down.png);
|
|
|
+ background: url('../img/arrow-down-icon.png');
|
|
|
vertical-align: middle;
|
|
|
-
|
|
|
- &.rotate {
|
|
|
+ &.rotate{
|
|
|
transform: rotate(180deg);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.match-guess-wrap {
|
|
|
+.match-guess-wrap{
|
|
|
padding: 0 20px 20px 20px;
|
|
|
display: none;
|
|
|
- border-left: 1px solid #3364b0;
|
|
|
- border-right: 1px solid #3364b0;
|
|
|
-
|
|
|
- .que-item {
|
|
|
- .que-title {
|
|
|
+ .que-item{
|
|
|
+ .que-title{
|
|
|
font-size: 12px;
|
|
|
color: #fff;
|
|
|
font-weight: bold;
|
|
|
padding-left: 16px;
|
|
|
position: relative;
|
|
|
line-height: 1.6;
|
|
|
-
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- color: #3364b0;
|
|
|
- }
|
|
|
-
|
|
|
- ::before {
|
|
|
+ ::before{
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
- width: 2px;
|
|
|
- height: 4px;
|
|
|
- background-color: #fff;
|
|
|
+ width: 4px;
|
|
|
+ height: 12px;
|
|
|
+ background-color: #ba0632;
|
|
|
left: 0;
|
|
|
- top: 8px;
|
|
|
+ top: 4px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .tips {
|
|
|
+ .tips{
|
|
|
font-size: 12px;
|
|
|
- color: #8c8b94;
|
|
|
+ color: #ddd;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .que-radio {
|
|
|
+ .que-radio{
|
|
|
margin-top: 10px;
|
|
|
padding-left: 16px;
|
|
|
-
|
|
|
- label {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #ddd;
|
|
|
+ label{
|
|
|
+ display: inline-block;
|
|
|
+ color: #fff;
|
|
|
font-size: 12px;
|
|
|
margin-right: 15px;
|
|
|
margin-bottom: 6px;
|
|
|
-
|
|
|
- input[type="radio"] {
|
|
|
- -webkit-appearance: none;
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- border: 1px solid #3364B0;
|
|
|
- border-radius: 2px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- input[type="radio"]:checked {
|
|
|
- background: url(//pub.dwstatic.com/zt2018/lolrise//img/ok.png) no-repeat;
|
|
|
+ input{
|
|
|
+ margin-right: 6px;
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .submit-btn {
|
|
|
+ .submit-btn{
|
|
|
display: inline-block;
|
|
|
- width: 100%;
|
|
|
+ width: 104px;
|
|
|
height: 34px;
|
|
|
- color: #111d43;
|
|
|
- font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
text-align: center;
|
|
|
line-height: 34px;
|
|
|
- background-color: #47B7E9;
|
|
|
margin-top: 10px;
|
|
|
cursor: pointer;
|
|
|
- outline: 0;
|
|
|
- border: 0;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 3px;
|
|
|
- top: 6px;
|
|
|
- display: block;
|
|
|
- width: 2px;
|
|
|
- height: 22px;
|
|
|
- background-color: #111d43;
|
|
|
+ background: url("src/img/allstarbtn-l.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &:hover{
|
|
|
+ background-color: #65636f;
|
|
|
}
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- right: 3px;
|
|
|
- top: 6px;
|
|
|
- display: block;
|
|
|
- width: 2px;
|
|
|
- height: 22px;
|
|
|
- background-color: #111d43;
|
|
|
- }
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: #B3E2F4;;
|
|
|
- }
|
|
|
-
|
|
|
- &.disabled {
|
|
|
+ &.disabled{
|
|
|
pointer-events: none;
|
|
|
cursor: default;
|
|
|
opacity: 0.6;
|
|
|
@@ -467,201 +409,47 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.swiper-button-prev {
|
|
|
- background-image: url(src/img/allstar-l.png) !important;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-image: url(src/img/allstar-l.png) !important;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.swiper-button-next {
|
|
|
- &:hover {
|
|
|
- background-image: url(src/img/allstar-r.png) !important;
|
|
|
- }
|
|
|
-
|
|
|
- background-image: url(src/img/allstar-r.png) !important;
|
|
|
-}
|
|
|
+@import "media.scss";
|
|
|
|
|
|
@media screen and (max-width: 750px) {
|
|
|
- .page-stake {
|
|
|
- padding: 18px 31px 20px;
|
|
|
+ .page-stake{
|
|
|
+ background: none !important;
|
|
|
}
|
|
|
- .page-stake-main .page-stake .week-select .btn {
|
|
|
- width: calc(33.33% - 3px);
|
|
|
- color: #e54747;
|
|
|
- margin-bottom: 0px;
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- &:nth-child(n+4) {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- border-bottom: 3px solid #e54747;
|
|
|
- }
|
|
|
- }
|
|
|
- .week-select .btn {
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- }
|
|
|
- .btn-more {
|
|
|
- font-size: 12px !important;
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .week-select {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .page-stake .match-container {
|
|
|
- padding: 64px 10px 10px 10px;
|
|
|
- background: #160345;
|
|
|
- border: none;
|
|
|
- }
|
|
|
- .page-stake .match-container > .title{
|
|
|
- font-size: 16px !important;
|
|
|
- }
|
|
|
- .page-stake .top-swiper-slide .info .date {
|
|
|
- color: #ddd;
|
|
|
- }
|
|
|
- .page-stake .top-swiper-slide .info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- border-bottom: 1px solid #3364b0;
|
|
|
- }
|
|
|
- .page-stake .top-swiper-slide .info .date {
|
|
|
- margin-right: 1vw;
|
|
|
- }
|
|
|
- .page-stake .match .score {
|
|
|
- color: #fff;
|
|
|
- font-size: 22px;
|
|
|
- text-indent: 1vw;
|
|
|
- margin-left: 1vw;
|
|
|
- }
|
|
|
- .page-stake .match-res-title {
|
|
|
- visibility: visible !important;
|
|
|
- padding-left: 1vw;
|
|
|
- border-left: 2px solid #ff0056;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .page-stake-main .page-stake .team-btn-wrap .team-btn:first-child {
|
|
|
- background-color: #47b7e9;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- .page-stake-main .page-stake .team-btn-wrap .team-btn:nth-child(2) {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- .page-stake-main .page-stake .team-btn-wrap .team-btn {
|
|
|
- width: 46%;
|
|
|
- color: #111d43;
|
|
|
- }
|
|
|
- .page-stake .match-precent .progress .length{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .page-stake .match-precent .progress .length.blue {
|
|
|
- background-color: #01ffff;
|
|
|
- float: right;
|
|
|
- }
|
|
|
- .page-stake-main .page-stake .match-guess-btn {
|
|
|
- background-color: #1c0455;
|
|
|
+ .week-select .btn-more{
|
|
|
+ display: none !important;
|
|
|
}
|
|
|
- .page-stake .top-swiper-slide {
|
|
|
- border: 1px solid #3364b0;
|
|
|
+ .week-select .week-btn-wrap{
|
|
|
+ height: 34px !important;
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
- .swiper-container-android .top-swiper-slide, .swiper-wrapper {
|
|
|
- background-color: transparent;
|
|
|
+ .week-select .week-btn-wrap .btn{
|
|
|
+ width: 33.33% !important;
|
|
|
+ margin-right: 0 !important;
|
|
|
+ height: 34px !important;
|
|
|
}
|
|
|
- .page-stake .match-precent .right{
|
|
|
- position: relative;
|
|
|
+ .page-stake .match-container > .title:first-child{
|
|
|
+ background-color: #e54747 !important;
|
|
|
}
|
|
|
- .page-stake .match-precent .right{
|
|
|
- .num{
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- .match-guess-wrap {
|
|
|
- background-color: #111d43;
|
|
|
- padding: 10px;
|
|
|
- border: none;
|
|
|
- }
|
|
|
- .match-guess-wrap .que-item .que-title {
|
|
|
- color: #fff;
|
|
|
- padding-left: 1vw;
|
|
|
- }
|
|
|
- .match-guess-wrap .que-item .que-title ::before {
|
|
|
- width: 2px;
|
|
|
- height: 12px;
|
|
|
- background-color: #fff;
|
|
|
- top: 4px;
|
|
|
- }
|
|
|
- .match-guess-wrap .que-item .tips {
|
|
|
- display: block;
|
|
|
+ .page-stake .match-guess-btn{
|
|
|
+ color: #e54747 !important;
|
|
|
}
|
|
|
- .match-guess-wrap .que-radio {
|
|
|
- padding-left: 1vw;
|
|
|
+ .swiper-button-prev, .swiper-button-next{
|
|
|
+ width: 24px !important;
|
|
|
+ height: 40px !important;
|
|
|
}
|
|
|
- .match-guess-wrap .que-radio label {
|
|
|
- color: #fff;
|
|
|
+ .swiper-button-next{
|
|
|
+ background: url("src/img/allstar-r.png") no-repeat center !important;
|
|
|
+ transform: rotateZ(0deg) !important;
|
|
|
+ background-size: 100% 100% !important;
|
|
|
+ right: 0 !important;
|
|
|
}
|
|
|
- .match-guess-wrap .submit-btn {
|
|
|
- width: 100%;
|
|
|
- background-color: #47b7e9;
|
|
|
- color: #111d43;
|
|
|
- border-radius: 3px;
|
|
|
+ .swiper-button-prev{
|
|
|
+ background: url("src/img/allstar-r.png") no-repeat center !important;
|
|
|
+ transform: rotateZ(180deg) !important;
|
|
|
+ background-size: 100% 100% !important;
|
|
|
+ left: 0 !important;
|
|
|
}
|
|
|
- .page-stake-main .page-stake .top-swiper-slide {
|
|
|
- background-color: #111d43;
|
|
|
+ .page-stake .top-swiper-slide{
|
|
|
+ background: #160345 !important;
|
|
|
}
|
|
|
- .page-stake .team-btn-wrap .end-team {
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- .page-stake .team-btn-wrap .end-team:nth-child(1) {
|
|
|
- background-image: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.guess-tag {
|
|
|
- background-color: #fff;
|
|
|
- position: absolute;
|
|
|
- width: 32px;
|
|
|
- background: url("src/img/guess-tag.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- color: #111d43;
|
|
|
- padding: 10px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: bolder;
|
|
|
- line-height: 16px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- transform: translateX(3px);
|
|
|
- z-index: 2;
|
|
|
- left: 0;
|
|
|
- top: 250px;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- transform: translate3d(-1px, -5px, 0);
|
|
|
- color: #111d43;
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
-
|
|
|
- @media screen and (max-width: 750px) {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.swiper-button-prev, .swiper-button-next{
|
|
|
- width: 30px;
|
|
|
- height: 52px;
|
|
|
- margin-top: -16px;
|
|
|
- background-size: 30px 52px;
|
|
|
-}
|
|
|
-.swiper-button-prev{
|
|
|
- left: 6px;
|
|
|
}
|
