diff --git a/view/molistar/activity/ssGuild/css/index.css b/view/molistar/activity/ssGuild/css/index.css index 01358b4..ad5aac9 100644 --- a/view/molistar/activity/ssGuild/css/index.css +++ b/view/molistar/activity/ssGuild/css/index.css @@ -1,7 +1,14 @@ html, body { width: 100%; - background: #260006; + background: #00121E; + overflow-x: hidden; +} + +html::-webkit-scrollbar, +body::-webkit-scrollbar { + display: none; + width: 0; } .back { @@ -28,1251 +35,526 @@ body { .header { width: 10rem; - height: 16.13333rem; + height: 32.90667rem; background: url(../images/header.png) no-repeat; background-size: 100% 100%; position: relative; - overflow: hidden; - margin: 0 auto; -} - -.header .rule_icon { - width: 1.86667rem; - height: 0.66667rem; - line-height: 0.66667rem; - text-align: center; - position: absolute; - right: 0; - top: 6.85333rem; - background: url(../images/rule_iconBg.png) no-repeat; - background-size: 100% 100%; - color: #3A0600; - font-size: 0.37333rem; - font-weight: 500; + margin: 0 auto 0rem; + box-sizing: border-box; + padding-top: 8.46667rem; } .header .time { - width: 100%; - height: 1.62667rem; - box-sizing: border-box; - padding: 0 0.66667rem; - margin: 13.48rem auto 0; + width: 7.6rem; + height: 1.89333rem; + margin: 0 auto 0.62667rem; + display: flex; + justify-content: space-between; } .header .time div { - float: left; - width: 1.62667rem; - height: 1.62667rem; + width: 1.33333rem; + height: 1.89333rem; background: url(../images/timeBg.png) no-repeat; background-size: 100% 100%; - position: relative; - text-align: center; - line-height: 1.62667rem; } .header .time div b { - color: #FFF783; + display: inline-block; + color: #FFEDBA; font-size: 0.58667rem; font-weight: 600; - font-family: PingFang SC; + margin-top: 0.34667rem; + margin-bottom: 0.50667rem; + width: 100%; + text-align: center; + height: 0.46667rem; } .header .time div span { + display: inline-block; width: 100%; - position: absolute; - left: 0; - bottom: -1.13333rem; text-align: center; - color: #FFF783; + color: #FFEDBA; font-size: 0.37333rem; font-weight: 400; - font-family: PingFang SC; } -.header .time .day { - background: url(../images/timeBgAct.png) no-repeat; +.header .content { + width: 9.28rem; + height: 4.02667rem; + margin: 0 auto 0.36rem; + background: url(../images/boxBg.png) no-repeat; background-size: 100% 100%; - margin-right: 0.62667rem; + box-sizing: border-box; + padding: 0.53333rem; + color: #FFEDBA; + font-size: 0.34667rem; + font-weight: 400; + line-height: 0.49rem; } -.header .time .colon { - width: 0.21333rem; - height: 0.53333rem; - background: url(../images/icon1.png) no-repeat; - background-size: 100% 100%; - margin: 0 0.22667rem; - margin-top: 0.54667rem; -} - -.myRecharge { - width: 10rem; - height: 8.34667rem; - background: url(../images/myRechargeBg.png) no-repeat; - background-size: 100% 100%; - margin: -0.26667rem auto 0.37333rem; - position: relative; -} - -.myRecharge .title { - width: 6.8rem; - height: 1.38667rem; - line-height: 1.13333rem; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 0.74667rem; - text-align: center; - color: #FFF783; - font-size: 0.45333rem; - font-weight: 600; - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; -} - -.myRecharge p { - width: 100%; - height: 1.2rem; - line-height: 1.2rem; - position: absolute; - text-align: center; - left: 0; - top: 3.4rem; -} - -.myRecharge p b { - color: #FFF783; - font-size: 1.14667rem; - font-weight: 600; - display: inline-block; -} - -.myRecharge p img { - display: inline-block; - width: 0.66667rem; - height: 0.66667rem; - margin: 0.33333rem 0.13333rem 0; -} - -.myRecharge .but { - width: 5.09333rem; - height: 1.28rem; +.header .tab { + width: 8.93333rem; + height: 1.30667rem; line-height: 1.30667rem; text-align: center; - color: #292601; - font-size: 0.42667rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 4.82667rem; - background: url(../images/myRechargeBut.png) no-repeat; - background-size: 100% 100%; -} - -.recharge10 { - width: 10rem; - margin: 0 auto 0; -} - -.recharge10 .top { - width: 100%; - height: 3.72rem; - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge10 .top .title { - width: 6.8rem; - height: 1.38667rem; - line-height: 1.13333rem; - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: 0.45333rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 1.08rem; -} - -.recharge10 .bottom { - width: 100%; - height: 2.48rem; - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge10 .bottom .but { - width: 4.12rem; - height: 1.28rem; - line-height: 1.28rem; - text-align: center; - color: #292601; - font-size: 0.42667rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 0rem; - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; -} - -.recharge10 .bottom .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; -} - -.recharge10 .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; -} - -.recharge10 .content .rewardImg { - display: block; - width: 9.06667rem; - height: 8.26667rem; - margin: 0 auto 0; - background: url(../images/recharge10.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; -} - -.recharge10 .content .rewardImg .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - right: 1.1rem; - top: 0.8rem; -} - -.recharge10 .content .rewardImg .ts canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge10 .content .rewardImg .zj { - width: 3.75rem; - height: 7.37rem; - position: absolute; - left: 1.1rem; - top: 0.2rem; -} - -.recharge10 .content .rewardImg .zj canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge100 { - width: 10rem; - margin: 0 auto 0; -} - -.recharge100 .top { - width: 100%; - height: 3.72rem; - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge100 .top .title { - width: 6.8rem; - height: 1.38667rem; - line-height: 1.13333rem; - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: 0.45333rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 1.08rem; -} - -.recharge100 .bottom { - width: 100%; - height: 2.48rem; - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge100 .bottom .but { - width: 4.12rem; - height: 1.28rem; - line-height: 1.28rem; - text-align: center; - color: #292601; - font-size: 0.42667rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 0rem; - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; -} - -.recharge100 .bottom .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; -} - -.recharge100 .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; -} - -.recharge100 .content .rewardImg { - display: block; - width: 9.06667rem; - height: 8.26667rem; - margin: 0 auto 0; - background: url(../images/recharge100.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; -} - -.recharge100 .content .rewardImg .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - right: 1.1rem; - top: 0.8rem; -} - -.recharge100 .content .rewardImg .ts canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge100 .content .rewardImg .zj { - width: 3.75rem; - height: 7.37rem; - position: absolute; - left: 1.1rem; - top: 0.2rem; -} - -.recharge100 .content .rewardImg .zj canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge300 { - width: 10rem; - margin: 0 auto 0; -} - -.recharge300 .top { - width: 100%; - height: 3.72rem; - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge300 .top .title { - width: 6.8rem; - height: 1.38667rem; - line-height: 1.13333rem; - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: 0.45333rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 1.08rem; -} - -.recharge300 .bottom { - width: 100%; - height: 2.48rem; - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge300 .bottom .but { - width: 4.12rem; - height: 1.28rem; - line-height: 1.28rem; - text-align: center; - color: #292601; - font-size: 0.42667rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 0rem; - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; -} - -.recharge300 .bottom .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; -} - -.recharge300 .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; -} - -.recharge300 .content .rewardImg { - display: block; - width: 9.06667rem; - height: 9.53333rem; - margin: 0 auto 0; - background: url(../images/recharge300.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; -} - -.recharge300 .content .rewardImg .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - right: 1.1rem; - top: 0.2rem; -} - -.recharge300 .content .rewardImg .ts canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge300 .content .rewardImg .zj { - width: 3.75rem; - height: 7.37rem; - position: absolute; - left: 1.1rem; - top: 0.87rem; -} - -.recharge300 .content .rewardImg .zj canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge300 .content .topTitle { - width: 100%; - height: 0.4rem; - line-height: 0.4rem; - display: flex; - justify-content: center; - margin-top: 0.36rem; -} - -.recharge300 .content .topTitle img { - display: inline-block; - width: 2.76rem; - height: 0.22667rem; - vertical-align: middle; -} - -.recharge300 .content .topTitle b { - display: inline-block; - color: #FFF783; - font-size: 0.4rem; - font-weight: 600; - margin: 0 0.14667rem; - vertical-align: middle; -} - -.recharge300 .content .topBox { - width: 78%; - height: 2.66667rem; display: flex; justify-content: space-between; - margin: 0.85333rem auto 0; -} - -.recharge300 .content .topBox div { - width: 2.05333rem; - height: 2.13333rem; + margin: 0 auto 0rem; position: relative; -} - -.recharge300 .content .topBox div .tx { - width: 100%; - height: 100%; - border-radius: 50%; - position: absolute; - left: 0; - top: 0; -} - -.recharge300 .content .topBox div .ts { - width: 0.93333rem; - height: 0.93333rem; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: -0.62667rem; -} - -.recharge300 .content .topBox .no2 .tx { - border: 0.02667rem solid #BEC6CD; -} - -.recharge300 .content .topBox .no3 .tx { - border: 0.02667rem solid #FCB98D; -} - -.recharge300 .content .topBox .no1 .tx { - width: 2.21333rem; - height: 2.26667rem; - border: 0.02667rem solid #FFDB00; -} - -.recharge300 .content .topBox .no1 .ts { - top: -0.65333rem; -} - -.recharge500 { - width: 10rem; - margin: 0 auto 0; -} - -.recharge500 .top { - width: 100%; - height: 3.72rem; - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge500 .top .title { - width: 6.8rem; - height: 1.38667rem; - line-height: 1.13333rem; - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: 0.45333rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 1.08rem; -} - -.recharge500 .bottom { - width: 100%; - height: 2.48rem; - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge500 .bottom .but { - width: 4.12rem; - height: 1.28rem; - line-height: 1.28rem; - text-align: center; - color: #292601; - font-size: 0.42667rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 0rem; - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; -} - -.recharge500 .bottom .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; -} - -.recharge500 .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; -} - -.recharge500 .content .rewardImg { - display: block; - width: 9.06667rem; - height: 9.76rem; - margin: 0 auto 0; - background: url(../images/recharge500.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; -} - -.recharge500 .content .rewardImg .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - right: 1.1rem; - top: 0.2rem; -} - -.recharge500 .content .rewardImg .ts canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge500 .content .rewardImg .zj { - width: 3.75rem; - height: 7.37rem; - position: absolute; - left: 1.1rem; - top: 0.2rem; -} - -.recharge500 .content .rewardImg .zj canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge500 .content .topTitle { - width: 100%; - height: 0.4rem; - line-height: 0.4rem; - display: flex; - justify-content: center; - margin-top: 0.36rem; -} - -.recharge500 .content .topTitle img { - display: inline-block; - width: 2.76rem; - height: 0.22667rem; - vertical-align: middle; -} - -.recharge500 .content .topTitle b { - display: inline-block; - color: #FFF783; - font-size: 0.4rem; - font-weight: 600; - margin: 0 0.14667rem; - vertical-align: middle; -} - -.recharge500 .content .topBox { - width: 78%; - height: 2.66667rem; - display: flex; - justify-content: space-between; - margin: 0.85333rem auto 0; -} - -.recharge500 .content .topBox div { - width: 2.05333rem; - height: 2.13333rem; - position: relative; -} - -.recharge500 .content .topBox div .tx { - width: 100%; - height: 100%; - border-radius: 50%; - position: absolute; - left: 0; - top: 0; -} - -.recharge500 .content .topBox div .ts { - width: 0.93333rem; - height: 0.93333rem; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: -0.62667rem; -} - -.recharge500 .content .topBox .no2 .tx { - border: 0.02667rem solid #BEC6CD; -} - -.recharge500 .content .topBox .no3 .tx { - border: 0.02667rem solid #FCB98D; -} - -.recharge500 .content .topBox .no1 .tx { - width: 2.21333rem; - height: 2.26667rem; - border: 0.02667rem solid #FFDB00; -} - -.recharge500 .content .topBox .no1 .ts { - top: -0.65333rem; -} - -.recharge1000 { - width: 10rem; - margin: 0 auto 0; -} - -.recharge1000 .top { - width: 100%; - height: 3.72rem; - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge1000 .top .title { - width: 6.8rem; - height: 1.38667rem; - line-height: 1.13333rem; - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: 0.45333rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 1.08rem; -} - -.recharge1000 .bottom { - width: 100%; - height: 2.48rem; - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge1000 .bottom .but { - width: 4.12rem; - height: 1.28rem; - line-height: 1.28rem; - text-align: center; - color: #292601; - font-size: 0.42667rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 0rem; - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; -} - -.recharge1000 .bottom .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; -} - -.recharge1000 .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; -} - -.recharge1000 .content .rewardImg { - display: block; - width: 9.06667rem; - height: 9.76rem; - margin: 0 auto 0; - background: url(../images/recharge1000.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; -} - -.recharge1000 .content .rewardImg .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - right: 1.1rem; - top: 0.2rem; -} - -.recharge1000 .content .rewardImg .ts canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge1000 .content .rewardImg .zj { - width: 3.75rem; - height: 7.37rem; - position: absolute; - left: 1.1rem; - top: 0.95rem; -} - -.recharge1000 .content .rewardImg .zj canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge1000 .content .topTitle { - width: 100%; - height: 0.4rem; - line-height: 0.4rem; - display: flex; - justify-content: center; - margin-top: 0.36rem; -} - -.recharge1000 .content .topTitle img { - display: inline-block; - width: 2.76rem; - height: 0.22667rem; - vertical-align: middle; -} - -.recharge1000 .content .topTitle b { - display: inline-block; - color: #FFF783; - font-size: 0.4rem; - font-weight: 600; - margin: 0 0.14667rem; - vertical-align: middle; -} - -.recharge1000 .content .topBox { - width: 78%; - height: 2.66667rem; - display: flex; - justify-content: space-between; - margin: 0.85333rem auto 0; -} - -.recharge1000 .content .topBox div { - width: 2.05333rem; - height: 2.13333rem; - position: relative; -} - -.recharge1000 .content .topBox div .tx { - width: 100%; - height: 100%; - border-radius: 50%; - position: absolute; - left: 0; - top: 0; -} - -.recharge1000 .content .topBox div .ts { - width: 0.93333rem; - height: 0.93333rem; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: -0.62667rem; -} - -.recharge1000 .content .topBox .no2 .tx { - border: 0.02667rem solid #BEC6CD; -} - -.recharge1000 .content .topBox .no3 .tx { - border: 0.02667rem solid #FCB98D; -} - -.recharge1000 .content .topBox .no1 .tx { - width: 2.21333rem; - height: 2.26667rem; - border: 0.02667rem solid #FFDB00; -} - -.recharge1000 .content .topBox .no1 .ts { - top: -0.65333rem; -} - -.recharge3000 { - width: 10rem; - margin: 0 auto 0; -} - -.recharge3000 .top { - width: 100%; - height: 3.72rem; - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge3000 .top .title { - width: 6.8rem; - height: 1.38667rem; - line-height: 1.13333rem; - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: 0.45333rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 1.08rem; -} - -.recharge3000 .bottom { - width: 100%; - height: 2.48rem; - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; -} - -.recharge3000 .bottom .but { - width: 4.12rem; - height: 1.28rem; - line-height: 1.28rem; - text-align: center; - color: #292601; - font-size: 0.42667rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 0rem; - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; -} - -.recharge3000 .bottom .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; -} - -.recharge3000 .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; -} - -.recharge3000 .content .rewardImg { - display: block; - width: 9.06667rem; - height: 17.54667rem; - margin: 0 auto 0; - background: url(../images/recharge3000.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; -} - -.recharge3000 .content .rewardImg .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - left: 1.6rem; - top: 11.1rem; -} - -.recharge3000 .content .rewardImg .ts canvas { - position: absolute; - left: 0; - top: 0; -} - -.recharge3000 .content .rewardImg .bo { - width: 0.69333rem; - height: 0.69333rem; - position: absolute; - top: 6.53333rem; - right: 2rem; z-index: 2; } -.recharge3000 .content .rewardImg .why { - width: 0.66667rem; - height: 0.66667rem; - position: absolute; - right: 1.18667rem; - top: 14.2rem; -} - -.recharge3000 .content .topTitle { - width: 100%; - height: 0.4rem; - line-height: 0.4rem; - display: flex; - justify-content: center; - margin-top: 0.36rem; -} - -.recharge3000 .content .topTitle img { - display: inline-block; - width: 2.76rem; - height: 0.22667rem; - vertical-align: middle; -} - -.recharge3000 .content .topTitle b { - display: inline-block; - color: #FFF783; - font-size: 0.4rem; +.header .tab div { + width: 4.24rem; + height: 1.30667rem; + background: url(../images/tab.png) no-repeat; + background-size: 100% 100%; + color: #FFEFC3; + font-size: 0.48rem; font-weight: 600; - margin: 0 0.14667rem; - vertical-align: middle; } -.recharge3000 .content .topBox { - width: 78%; - height: 2.66667rem; - display: flex; - justify-content: space-between; - margin: 0.85333rem auto 0; +.header .tab .act { + background: url(../images/tabAct.png) no-repeat; + background-size: 100% 100%; } -.recharge3000 .content .topBox div { - width: 2.05333rem; - height: 2.13333rem; +.page1 .cloud { + width: 10rem; + height: 11.06667rem; + background: url(../images/cloud.png) no-repeat; + background-size: 100% 100%; + margin: -17.3rem auto -2.6rem; position: relative; } -.recharge3000 .content .topBox div .tx { - width: 100%; - height: 100%; +.page1 .cloud .no1 { + width: 5rem; + height: 6.08rem; + position: absolute; + top: 1.50667rem; + left: 50%; + transform: translateX(-50%); + background: url(../images/top1.png) no-repeat; + background-size: 100% 100%; + z-index: 2; +} + +.page1 .cloud .no1 .ts { + width: 2.66667rem; + height: 2.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.93333rem; + z-index: 2; +} + +.page1 .cloud .no1 .tx { + width: 1.86667rem; + height: 1.86667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.33333rem; border-radius: 50%; - position: absolute; - left: 0; - top: 0; } -.recharge3000 .content .topBox div .ts { - width: 0.93333rem; - height: 0.93333rem; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: -0.62667rem; -} - -.recharge3000 .content .topBox .no2 .tx { - border: 0.02667rem solid #BEC6CD; -} - -.recharge3000 .content .topBox .no3 .tx { - border: 0.02667rem solid #FCB98D; -} - -.recharge3000 .content .topBox .no1 .tx { - width: 2.21333rem; - height: 2.26667rem; - border: 0.02667rem solid #FFDB00; -} - -.recharge3000 .content .topBox .no1 .ts { - top: -0.65333rem; -} - -.pub { - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - background: rgba(0, 0, 0, 0.5); - z-index: 99; - display: none; -} - -.pub .pub_in { - width: 9.2rem; - height: 9.64rem; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - background: url(../images/pubBg.png) no-repeat; - background-size: 100% 100%; -} - -.pub .pub_in .close { - width: 0.90667rem; - height: 0.90667rem; - position: absolute; - right: 0.30667rem; - top: -0.45333rem; -} - -.pub .pub_in .title { - width: 6rem; - height: 1.16rem; - line-height: 0.97333rem; - text-align: center; - color: #FFF783; - font-size: 0.4rem; - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - background: url(../images/pubTitle.png) no-repeat; - background-size: 100% 100%; - top: 0.88rem; -} - -.pub .pub_in .centent { - width: 100%; - height: 5.46667rem; - overflow-y: scroll; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 2.72rem; - box-sizing: border-box; - padding: 0 1.2rem; -} - -.pub .pub_in .centent::-webkit-scrollbar { - display: none; -} - -.pub .pub_in .centent p { - color: #FFF784; +.page1 .cloud .no1 .name { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: 0.4rem; + color: #FFEDBA; font-size: 0.37333rem; - font-weight: 400; - line-height: 0.45rem; - margin-bottom: 0.2rem; - width: 100%; -} - -.pub .pub_in .myRechargeText { - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: space-around; - align-content: center; -} - -.pub .pub_in .myRechargeText p { - padding-bottom: 0.3rem; -} - -.pub .pub_in .myRechargeTextWhy { - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: space-around; - align-content: center; -} - -.pub .pub_in .myRechargeTextWhy p { - padding-bottom: 2.3rem; -} - -.disclaimer { - width: 100%; + font-weight: 500; + position: absolute; text-align: center; - margin-top: 0.4rem; - margin-bottom: 0.56rem; - color: #FFF784; - font-size: 0.34667rem; - font-weight: 400; + left: 50%; + transform: translateX(-50%); + top: 3.6rem; } -.video { - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - background: rgba(0, 0, 0, 0.5); - z-index: 99; - display: none; +.page1 .cloud .no1 .id { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: 0.4rem; + color: #FFEDBA; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: 4.02667rem; } -.video video { +.page1 .cloud .no1 .grade { + width: 1.01333rem; + height: 0.66667rem; position: absolute; left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 65%; + transform: translateX(-50%); + top: 4.49333rem; } -.video .close { - width: 0.90667rem; - height: 0.90667rem; +.page1 .cloud .no2 { + width: 3.65333rem; + height: 5.06667rem; position: absolute; - top: 10%; - right: 0.93333rem; + top: 3.14667rem; + left: -0.4rem; + background: url(../images/top23.png) no-repeat; + background-size: 100% 100%; +} + +.page1 .cloud .no2 .ts { + width: 2.21333rem; + height: 2.21333rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.93333rem; + z-index: 2; +} + +.page1 .cloud .no2 .tx { + width: 1.54667rem; + height: 1.54667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.33333rem; + border-radius: 50%; +} + +.page1 .cloud .no2 .name { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: 0.4rem; + color: #FFEDBA; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: 3.1rem; +} + +.page1 .cloud .no2 .id { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: 0.4rem; + color: #FFEDBA; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: 3.5rem; +} + +.page1 .cloud .no2 .grade { + width: 0.8rem; + height: 0.53333rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.86667rem; +} + +.page1 .cloud .no3 { + width: 3.65333rem; + height: 5.06667rem; + position: absolute; + top: 3.14667rem; + right: -0.4rem; + background: url(../images/top23.png) no-repeat; + background-size: 100% 100%; +} + +.page1 .cloud .no3 .ts { + width: 2.21333rem; + height: 2.21333rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.93333rem; + z-index: 2; +} + +.page1 .cloud .no3 .tx { + width: 1.54667rem; + height: 1.54667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.33333rem; + border-radius: 50%; +} + +.page1 .cloud .no3 .name { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: 0.4rem; + color: #FFEDBA; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: 3.1rem; +} + +.page1 .cloud .no3 .id { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: 0.4rem; + color: #FFEDBA; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: 3.5rem; +} + +.page1 .cloud .no3 .grade { + width: 0.8rem; + height: 0.53333rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.86667rem; +} + +.page1 ul { + width: 9.86667rem; + margin: 0 auto 0.49333rem; + position: relative; +} + +.page1 ul li { + width: 100%; + height: 2.50667rem; + background: url(../images/liBg.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + padding: 0 0.96rem 0 0.89333rem; +} + +.page1 ul li .num { + float: left; + width: 0.66667rem; + height: 100%; + line-height: 2.50667rem; + color: #FFEDBA; + font-size: 0.48rem; + font-weight: 600; + margin-right: 0.50667rem; +} + +.page1 ul li .tx { + float: left; + display: block; + width: 1.24rem; + height: 1.25333rem; + border-radius: 50%; + border: 0.01333rem solid #FFEDBA; + box-sizing: border-box; + margin-top: 0.62667rem; + margin-right: 0.42667rem; +} + +.page1 ul li .user { + float: left; + color: #FFEDBA; + font-size: 0.37333rem; + font-weight: 6.66667rem; +} + +.page1 ul li .user p { + width: 3.28rem; + margin-top: 0.82667rem; + margin-bottom: 0.37333rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.page1 ul li .user b { + font-weight: 400; + font-size: 0.34667rem; +} + +.page1 ul li .grade { + display: block; + float: right; + width: 1.01333rem; + height: 0.66667rem; + margin-top: 0.93333rem; +} + +.page1 .rule { + display: block; + width: 9.33333rem; + height: 17.96rem; + margin: 0 auto 0.4rem; + position: relative; +} + +.page1 .my { + position: fixed; + left: 0; + bottom: 0; + width: 10rem; + height: 2.50667rem; + background: url(../images/myBg.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + padding: 0 0.96rem 0 0.89333rem; z-index: 9; } -.arabic .back img { - left: auto; - right: 0.24rem; - transform: rotate(180deg); +.page1 .my .num { + float: left; + width: 0.66667rem; + height: 100%; + line-height: 2.50667rem; + color: #FFEDBA; + font-size: 0.48rem; + font-weight: 600; + margin-right: 0.50667rem; } -.arabic .header { - background: url(../images/header-ar.png) no-repeat; - background-size: 100% 100%; +.page1 .my .tx { + float: left; + display: block; + width: 1.24rem; + height: 1.25333rem; + border-radius: 50%; + border: 0.01333rem solid #FFEDBA; + box-sizing: border-box; + margin-top: 0.62667rem; + margin-right: 0.42667rem; } -.arabic .header .time .day, -.arabic .header .time .hour, -.arabic .header .time .colon, -.arabic .header .time .min, -.arabic .header .time .sec { +.page1 .my .user { + float: left; + color: #FFEDBA; + font-size: 0.37333rem; + font-weight: 6.66667rem; +} + +.page1 .my .user p { + width: 3.28rem; + margin-top: 0.82667rem; + margin-bottom: 0.37333rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.page1 .my .user b { + font-weight: 400; + font-size: 0.34667rem; +} + +.page1 .my .grade { + display: block; float: right; + width: 1.01333rem; + height: 0.66667rem; + margin-top: 0.93333rem; } -.arabic .header .time .day { - margin-right: 0; - margin-left: 0.62667rem; +.page2 { + display: none; } -.arabic .recharge10 .content .rewardImg { - background: url(../images/recharge10-ar.png) no-repeat; +.page2 .my { + width: 10rem; + height: 11.54667rem; + background: url(../images/page2Bg.png) no-repeat; background-size: 100% 100%; + margin: -16.25rem auto 0; + position: relative; + box-sizing: border-box; + padding-top: 6.72rem; } -.arabic .recharge100 .content .rewardImg { - background: url(../images/recharge100-ar.png) no-repeat; - background-size: 100% 100%; +.page2 .my .ts { + position: absolute; + width: 3.6rem; + height: 3.6rem; + left: 50%; + transform: translateX(-50%); + top: 2.10667rem; + z-index: 2; } -.arabic .recharge300 .content .rewardImg { - background: url(../images/recharge300-ar.png) no-repeat; - background-size: 100% 100%; +.page2 .my .tx { + width: 2.53333rem; + height: 2.53333rem; + border-radius: 50%; + position: absolute; + top: 2.65333rem; + left: 50%; + transform: translateX(-50%); } -.arabic .recharge500 .content .rewardImg { - background: url(../images/recharge500-ar.png) no-repeat; - background-size: 100% 100%; +.page2 .my .leve { + width: 1.01333rem; + height: 0.66667rem; + position: absolute; + top: 5.74667rem; + left: 50%; + transform: translateX(-50%); } -.arabic .recharge1000 .content .rewardImg { - background: url(../images/recharge1000-ar.png) no-repeat; - background-size: 100% 100%; +.page2 .my p { + width: 100%; + text-align: center; + color: #FFEDBA; + font-size: 0.37333rem; + font-weight: 500; + margin-bottom: 0.26667rem; } -.arabic .recharge3000 .content .rewardImg { - background: url(../images/recharge3000-ar.png) no-repeat; - background-size: 100% 100%; +.page2 .rule { + width: 9.33333rem; + height: 17.77333rem; + display: block; + margin: 0 auto 0.50667rem; + position: relative; +} + +.bootomText { + width: 100%; + text-align: center; + color: #FFEDBA; + font-size: 0.37333rem; + font-weight: 400; + margin-bottom: 0.25333rem; +} + +.bootomTextPage1 { + margin-bottom: 2.8rem; } diff --git a/view/molistar/activity/ssGuild/css/index.scss b/view/molistar/activity/ssGuild/css/index.scss index 8212b70..81af666 100644 --- a/view/molistar/activity/ssGuild/css/index.scss +++ b/view/molistar/activity/ssGuild/css/index.scss @@ -5,7 +5,13 @@ html, body { width: 100%; - background: #260006; + background: #00121E; + overflow-x: hidden; + + &::-webkit-scrollbar { + display: none; + width: 0; + } } .back { @@ -32,1278 +38,531 @@ body { .header { width: px2rem(750); - height: px2rem(1210); + height: px2rem(2468); background: url(../images/header.png) no-repeat; background-size: 100% 100%; position: relative; - overflow: hidden; - margin: 0 auto; - - .rule_icon { - width: px2rem(140); - height: px2rem(50); - line-height: px2rem(50); - text-align: center; - position: absolute; - right: 0; - top: px2rem(514); - background: url(../images/rule_iconBg.png) no-repeat; - background-size: 100% 100%; - color: #3A0600; - font-size: px2rem(28); - font-weight: 500; - } + margin: 0 auto px2rem(0); + box-sizing: border-box; + padding-top: px2rem(635); .time { - width: 100%; - height: px2rem(122); - box-sizing: border-box; - padding: 0 px2rem(50); - margin: px2rem(1011) auto 0; + width: px2rem(570); + height: px2rem(142); + margin: 0 auto px2rem(47); + display: flex; + justify-content: space-between; div { - float: left; - width: px2rem(122); - height: px2rem(122); + width: px2rem(100); + height: px2rem(142); background: url(../images/timeBg.png) no-repeat; background-size: 100% 100%; - position: relative; - text-align: center; - line-height: px2rem(122); b { - color: #FFF783; + display: inline-block; + color: #FFEDBA; font-size: px2rem(44); font-weight: 600; - font-family: PingFang SC; + margin-top: px2rem(26); + margin-bottom: px2rem(38); + width: 100%; + text-align: center; + height: px2rem(35); } span { + display: inline-block; width: 100%; - position: absolute; - left: 0; - bottom: px2rem(-85); text-align: center; - color: #FFF783; + color: #FFEDBA; font-size: px2rem(28); font-weight: 400; - font-family: PingFang SC; } } - - .day { - background: url(../images/timeBgAct.png) no-repeat; - background-size: 100% 100%; - margin-right: px2rem(47); - } - - .colon { - width: px2rem(16); - height: px2rem(40); - background: url(../images/icon1.png) no-repeat; - background-size: 100% 100%; - margin: 0 px2rem(17); - margin-top: px2rem(41); - } } -} -.myRecharge { - width: px2rem(750); - height: px2rem(626); - background: url(../images/myRechargeBg.png) no-repeat; - background-size: 100% 100%; - margin: px2rem(-20) auto px2rem(28); - position: relative; - - .title { - width: px2rem(510); - height: px2rem(104); - line-height: px2rem(85); - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(56); - text-align: center; - color: #FFF783; - font-size: px2rem(34); - font-weight: 600; - background: url(../images/title.png) no-repeat; + .content { + width: px2rem(696); + height: px2rem(302); + margin: 0 auto px2rem(27); + background: url(../images/boxBg.png) no-repeat; background-size: 100% 100%; + box-sizing: border-box; + padding: px2rem(40); + color: #FFEDBA; + font-size: px2rem(26); + font-weight: 400; + line-height: 0.49rem; } - p { - width: 100%; - height: 1.2rem; - line-height: 1.2rem; - position: absolute; - text-align: center; - left: 0; - top: px2rem(255); - - b { - color: #FFF783; - font-size: px2rem(86); - font-weight: 600; - display: inline-block; - } - - img { - display: inline-block; - width: px2rem(50); - height: px2rem(50); - margin: px2rem(25) px2rem(10) 0; - } - } - - .but { - width: px2rem(382); - height: px2rem(96); + .tab { + width: px2rem(670); + height: px2rem(98); line-height: px2rem(98); text-align: center; - color: #292601; - font-size: px2rem(32); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(362); - background: url(../images/myRechargeBut.png) no-repeat; - background-size: 100% 100%; - } -} - -.recharge10 { - width: px2rem(750); - margin: 0 auto 0; - - .top { - width: 100%; - height: px2rem(279); - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; + display: flex; + justify-content: space-between; + margin: 0 auto px2rem(0); position: relative; + z-index: 2; - .title { - width: px2rem(510); - height: px2rem(104); - line-height: px2rem(85); - background: url(../images/title.png) no-repeat; + div { + width: px2rem(318); + height: px2rem(98); + background: url(../images/tab.png) no-repeat; background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: px2rem(34); + color: #FFEFC3; + font-size: px2rem(36); font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(81); - } - } - - .bottom { - width: 100%; - height: px2rem(186); - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .but { - width: px2rem(309); - height: px2rem(96); - line-height: px2rem(96); - text-align: center; - color: #292601; - font-size: px2rem(32); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(-0); - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; } .act { - background: url(../images/butAct.png) no-repeat; + background: url(../images/tabAct.png) no-repeat; background-size: 100% 100%; } } - - .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; - - .rewardImg { - display: block; - width: px2rem(680); - height: px2rem(620); - margin: 0 auto 0; - background: url(../images/recharge10.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; - - .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - right: 1.1rem; - top: 0.8rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - - .zj { - width: 3.75rem; - height: 7.37rem; - position: absolute; - left: 1.1rem; - top: 0.2rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - } - } } -.recharge100 { - width: px2rem(750); - margin: 0 auto 0; +.page1 { + // display: none; - .top { - width: 100%; - height: px2rem(279); - background: url(../images/bgTop.png) no-repeat; + .cloud { + width: px2rem(750); + height: px2rem(830); + background: url(../images/cloud.png) no-repeat; background-size: 100% 100%; + margin: -17.3rem auto -2.6rem; position: relative; - .title { - width: px2rem(510); - height: px2rem(104); - line-height: px2rem(85); - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: px2rem(34); - font-weight: 600; + .no1 { + width: px2rem(375); + height: px2rem(456); position: absolute; + top: px2rem(113); left: 50%; transform: translateX(-50%); - top: px2rem(81); - } - } - - .bottom { - width: 100%; - height: px2rem(186); - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .but { - width: px2rem(309); - height: px2rem(96); - line-height: px2rem(96); - text-align: center; - color: #292601; - font-size: px2rem(32); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(-0); - background: url(../images/but.png) no-repeat; + background: url(../images/top1.png) no-repeat; background-size: 100% 100%; - } - - .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; - } - } - - .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; - - .rewardImg { - display: block; - width: px2rem(680); - height: px2rem(620); - margin: 0 auto 0; - background: url(../images/recharge100.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; + z-index: 2; .ts { - width: 2.2rem; - height: 2.2rem; + width: px2rem(200); + height: px2rem(200); position: absolute; - right: 1.1rem; - top: 0.8rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - - .zj { - width: 3.75rem; - height: 7.37rem; - position: absolute; - left: 1.1rem; - top: 0.2rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - } - } -} - -.recharge300 { - width: px2rem(750); - margin: 0 auto 0; - - .top { - width: 100%; - height: px2rem(279); - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .title { - width: px2rem(510); - height: px2rem(104); - line-height: px2rem(85); - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: px2rem(34); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(81); - } - } - - .bottom { - width: 100%; - height: px2rem(186); - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .but { - width: px2rem(309); - height: px2rem(96); - line-height: px2rem(96); - text-align: center; - color: #292601; - font-size: px2rem(32); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(-0); - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; - } - - .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; - } - } - - .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; - - .rewardImg { - display: block; - width: px2rem(680); - height: px2rem(715); - margin: 0 auto 0; - background: url(../images/recharge300.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; - - .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - right: 1.1rem; - top: 0.2rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - - .zj { - width: 3.75rem; - height: 7.37rem; - position: absolute; - left: 1.1rem; - top: 0.87rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - } - - .topTitle { - width: 100%; - height: px2rem(30); - line-height: px2rem(30); - display: flex; - justify-content: center; - margin-top: px2rem(27); - - img { - display: inline-block; - width: px2rem(207); - height: px2rem(17); - vertical-align: middle; - } - - b { - display: inline-block; - color: #FFF783; - font-size: px2rem(30); - font-weight: 600; - margin: 0 px2rem(11); - vertical-align: middle; - } - } - - .topBox { - width: 78%; - height: px2rem(200); - display: flex; - justify-content: space-between; - margin: px2rem(64) auto 0; - - div { - width: px2rem(154); - height: px2rem(160); - position: relative; - - .tx { - width: 100%; - height: 100%; - border-radius: 50%; - position: absolute; - left: 0; - top: 0; - } - - .ts { - width: px2rem(70); - height: px2rem(70); - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(-47); - } - } - - .no2 { - .tx { - border: px2rem(2) solid #BEC6CD; - } - } - - .no3 { - .tx { - border: px2rem(2) solid #FCB98D; - } - } - - .no1 { - .tx { - width: px2rem(166); - height: px2rem(170); - border: px2rem(2) solid #FFDB00; - } - - .ts { - top: px2rem(-49); - } - } - } - } -} - -.recharge500 { - width: px2rem(750); - margin: 0 auto 0; - - .top { - width: 100%; - height: px2rem(279); - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .title { - width: px2rem(510); - height: px2rem(104); - line-height: px2rem(85); - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: px2rem(34); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(81); - } - } - - .bottom { - width: 100%; - height: px2rem(186); - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .but { - width: px2rem(309); - height: px2rem(96); - line-height: px2rem(96); - text-align: center; - color: #292601; - font-size: px2rem(32); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(-0); - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; - } - - .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; - } - } - - .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; - - .rewardImg { - display: block; - width: px2rem(680); - height: px2rem(732); - margin: 0 auto 0; - background: url(../images/recharge500.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; - - .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - right: 1.1rem; - top: 0.2rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - - .zj { - width: 3.75rem; - height: 7.37rem; - position: absolute; - left: 1.1rem; - top: 0.2rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - } - - .topTitle { - width: 100%; - height: px2rem(30); - line-height: px2rem(30); - display: flex; - justify-content: center; - margin-top: px2rem(27); - - img { - display: inline-block; - width: px2rem(207); - height: px2rem(17); - vertical-align: middle; - } - - b { - display: inline-block; - color: #FFF783; - font-size: px2rem(30); - font-weight: 600; - margin: 0 px2rem(11); - vertical-align: middle; - } - } - - .topBox { - width: 78%; - height: px2rem(200); - display: flex; - justify-content: space-between; - margin: px2rem(64) auto 0; - - div { - width: px2rem(154); - height: px2rem(160); - position: relative; - - .tx { - width: 100%; - height: 100%; - border-radius: 50%; - position: absolute; - left: 0; - top: 0; - } - - .ts { - width: px2rem(70); - height: px2rem(70); - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(-47); - } - } - - .no2 { - .tx { - border: px2rem(2) solid #BEC6CD; - } - } - - .no3 { - .tx { - border: px2rem(2) solid #FCB98D; - } - } - - .no1 { - .tx { - width: px2rem(166); - height: px2rem(170); - border: px2rem(2) solid #FFDB00; - } - - .ts { - top: px2rem(-49); - } - } - } - } -} - -.recharge1000 { - width: px2rem(750); - margin: 0 auto 0; - - .top { - width: 100%; - height: px2rem(279); - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .title { - width: px2rem(510); - height: px2rem(104); - line-height: px2rem(85); - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: px2rem(34); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(81); - } - } - - .bottom { - width: 100%; - height: px2rem(186); - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .but { - width: px2rem(309); - height: px2rem(96); - line-height: px2rem(96); - text-align: center; - color: #292601; - font-size: px2rem(32); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(-0); - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; - } - - .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; - } - } - - .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; - - .rewardImg { - display: block; - width: px2rem(680); - height: px2rem(732); - margin: 0 auto 0; - background: url(../images/recharge1000.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; - - .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - right: 1.1rem; - top: 0.2rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - - .zj { - width: 3.75rem; - height: 7.37rem; - position: absolute; - left: 1.1rem; - top: 0.95rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - - } - - .topTitle { - width: 100%; - height: px2rem(30); - line-height: px2rem(30); - display: flex; - justify-content: center; - margin-top: px2rem(27); - - img { - display: inline-block; - width: px2rem(207); - height: px2rem(17); - vertical-align: middle; - } - - b { - display: inline-block; - color: #FFF783; - font-size: px2rem(30); - font-weight: 600; - margin: 0 px2rem(11); - vertical-align: middle; - } - } - - .topBox { - width: 78%; - height: px2rem(200); - display: flex; - justify-content: space-between; - margin: px2rem(64) auto 0; - - div { - width: px2rem(154); - height: px2rem(160); - position: relative; - - .tx { - width: 100%; - height: 100%; - border-radius: 50%; - position: absolute; - left: 0; - top: 0; - } - - .ts { - width: px2rem(70); - height: px2rem(70); - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(-47); - } - } - - .no2 { - .tx { - border: px2rem(2) solid #BEC6CD; - } - } - - .no3 { - .tx { - border: px2rem(2) solid #FCB98D; - } - } - - .no1 { - .tx { - width: px2rem(166); - height: px2rem(170); - border: px2rem(2) solid #FFDB00; - } - - .ts { - top: px2rem(-49); - } - } - } - } -} - -.recharge3000 { - width: px2rem(750); - margin: 0 auto 0; - - .top { - width: 100%; - height: px2rem(279); - background: url(../images/bgTop.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .title { - width: px2rem(510); - height: px2rem(104); - line-height: px2rem(85); - background: url(../images/title.png) no-repeat; - background-size: 100% 100%; - text-align: center; - color: #FFF783; - font-size: px2rem(34); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(81); - } - } - - .bottom { - width: 100%; - height: px2rem(186); - background: url(../images/bgBottom.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .but { - width: px2rem(309); - height: px2rem(96); - line-height: px2rem(96); - text-align: center; - color: #292601; - font-size: px2rem(32); - font-weight: 600; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(-0); - background: url(../images/but.png) no-repeat; - background-size: 100% 100%; - } - - .act { - background: url(../images/butAct.png) no-repeat; - background-size: 100% 100%; - } - } - - .content { - width: 100%; - background: url(../images/bgCentent.png) no-repeat; - background-size: 100% 100%; - - .rewardImg { - display: block; - width: px2rem(680); - height: px2rem(1316); - margin: 0 auto 0; - background: url(../images/recharge3000.png) no-repeat; - background-size: 100% 100%; - position: relative; - overflow: hidden; - - .ts { - width: 2.2rem; - height: 2.2rem; - position: absolute; - left: 1.6rem; - top: 11.1rem; - - canvas { - position: absolute; - left: 0; - top: 0; - } - } - - .bo { - width: px2rem(52); - height: px2rem(52); - position: absolute; - top: px2rem(490); - right: px2rem(150); + left: 50%; + transform: translateX(-50%); + top: px2rem(70); z-index: 2; } - .why { - width: px2rem(50); + .tx { + width: px2rem(140); + height: px2rem(140); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(100); + border-radius: 50%; + } + + .name { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: px2rem(30); + color: #FFEDBA; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: px2rem(270); + } + + .id { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: px2rem(30); + color: #FFEDBA; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: px2rem(302); + } + + .grade { + width: px2rem(76); height: px2rem(50); position: absolute; - right: px2rem(89); - top: 14.2rem; + left: 50%; + transform: translateX(-50%); + top: px2rem(337); } } - .topTitle { - width: 100%; - height: px2rem(30); - line-height: px2rem(30); - display: flex; - justify-content: center; - margin-top: px2rem(27); + .no2 { + width: px2rem(274); + height: px2rem(380); + position: absolute; + top: px2rem(236); + left: -0.4rem; + background: url(../images/top23.png) no-repeat; + background-size: 100% 100%; - img { - display: inline-block; - width: px2rem(207); - height: px2rem(17); - vertical-align: middle; + .ts { + width: px2rem(166); + height: px2rem(166); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(70); + z-index: 2; + } + + .tx { + width: px2rem(116); + height: px2rem(116); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(100); + border-radius: 50%; + } + + .name { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: px2rem(30); + color: #FFEDBA; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: 3.1rem; + } + + .id { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: px2rem(30); + color: #FFEDBA; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: 3.5rem; + } + + .grade { + width: px2rem(60); + height: px2rem(40); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(290); + } + } + + .no3 { + width: px2rem(274); + height: px2rem(380); + position: absolute; + top: px2rem(236); + right: -0.4rem; + background: url(../images/top23.png) no-repeat; + background-size: 100% 100%; + + .ts { + width: px2rem(166); + height: px2rem(166); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(70); + z-index: 2; + } + + .tx { + width: px2rem(116); + height: px2rem(116); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(100); + border-radius: 50%; + } + + .name { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: px2rem(30); + color: #FFEDBA; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: 3.1rem; + } + + .id { + width: 57%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: px2rem(30); + color: #FFEDBA; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + text-align: center; + left: 50%; + transform: translateX(-50%); + top: 3.5rem; + } + + .grade { + width: px2rem(60); + height: px2rem(40); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(290); + } + } + } + + ul { + width: px2rem(740); + margin: 0 auto px2rem(37); + position: relative; + + li { + width: 100%; + height: px2rem(188); + background: url(../images/liBg.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + padding: 0 px2rem(72) 0 px2rem(67); + + .num { + float: left; + width: px2rem(50); + height: 100%; + line-height: px2rem(188); + color: #FFEDBA; + font-size: px2rem(36); + font-weight: 600; + margin-right: px2rem(38); + } + + .tx { + float: left; + display: block; + width: px2rem(93); + height: px2rem(94); + border-radius: 50%; + border: px2rem(1) solid #FFEDBA; + box-sizing: border-box; + margin-top: px2rem(47); + margin-right: px2rem(32); + } + + .user { + float: left; + color: #FFEDBA; + font-size: px2rem(28); + font-weight: px2rem(500); + + p { + width: px2rem(246); + margin-top: px2rem(62); + margin-bottom: px2rem(28); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + b { + font-weight: 400; + font-size: px2rem(26); + } + } + + .grade { + display: block; + float: right; + width: px2rem(76); + height: px2rem(50); + margin-top: px2rem(70); + } + } + } + + .rule { + display: block; + width: px2rem(700); + height: px2rem(1347); + margin: 0 auto px2rem(30); + position: relative; + } + + .my { + position: fixed; + left: 0; + bottom: 0; + width: px2rem(750); + height: px2rem(188); + background: url(../images/myBg.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + padding: 0 px2rem(72) 0 px2rem(67); + z-index: 9; + + .num { + float: left; + width: px2rem(50); + height: 100%; + line-height: px2rem(188); + color: #FFEDBA; + font-size: px2rem(36); + font-weight: 600; + margin-right: px2rem(38); + } + + .tx { + float: left; + display: block; + width: px2rem(93); + height: px2rem(94); + border-radius: 50%; + border: px2rem(1) solid #FFEDBA; + box-sizing: border-box; + margin-top: px2rem(47); + margin-right: px2rem(32); + } + + .user { + float: left; + color: #FFEDBA; + font-size: px2rem(28); + font-weight: px2rem(500); + + p { + width: px2rem(246); + margin-top: px2rem(62); + margin-bottom: px2rem(28); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } b { - display: inline-block; - color: #FFF783; - font-size: px2rem(30); - font-weight: 600; - margin: 0 px2rem(11); - vertical-align: middle; + font-weight: 400; + font-size: px2rem(26); } } - .topBox { - width: 78%; - height: px2rem(200); - display: flex; - justify-content: space-between; - margin: px2rem(64) auto 0; - - div { - width: px2rem(154); - height: px2rem(160); - position: relative; - - .tx { - width: 100%; - height: 100%; - border-radius: 50%; - position: absolute; - left: 0; - top: 0; - } - - .ts { - width: px2rem(70); - height: px2rem(70); - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(-47); - } - } - - .no2 { - .tx { - border: px2rem(2) solid #BEC6CD; - } - } - - .no3 { - .tx { - border: px2rem(2) solid #FCB98D; - } - } - - .no1 { - .tx { - width: px2rem(166); - height: px2rem(170); - border: px2rem(2) solid #FFDB00; - } - - .ts { - top: px2rem(-49); - } - } + .grade { + display: block; + float: right; + width: px2rem(76); + height: px2rem(50); + margin-top: px2rem(70); } } } -.pub { - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - background: rgba(0, 0, 0, .5); - z-index: 99; +.page2 { display: none; - .pub_in { - width: px2rem(690); - height: px2rem(723); - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - background: url(../images/pubBg.png) no-repeat; + .my { + width: px2rem(750); + height: px2rem(866); + background: url(../images/page2Bg.png) no-repeat; background-size: 100% 100%; + margin: -16.25rem auto 0; + position: relative; + box-sizing: border-box; + padding-top: px2rem(504); - .close { - width: px2rem(68); - height: px2rem(68); - position: absolute; - right: px2rem(23); - top: px2rem(-34); - } - - .title { - width: px2rem(450); - height: px2rem(87); - line-height: px2rem(73); - text-align: center; - color: #FFF783; - font-size: px2rem(30); - font-weight: 600; + .ts { position: absolute; + width: px2rem(270); + height: px2rem(270); left: 50%; transform: translateX(-50%); - background: url(../images/pubTitle.png) no-repeat; - background-size: 100% 100%; - top: px2rem(66); + top: px2rem(158); + z-index: 2; } - .centent { + .tx { + width: px2rem(190); + height: px2rem(190); + border-radius: 50%; + position: absolute; + top: px2rem(199); + left: 50%; + transform: translateX(-50%); + + } + + .leve { + width: px2rem(76); + height: px2rem(50); + position: absolute; + top: px2rem(431); + left: 50%; + transform: translateX(-50%); + } + + p { width: 100%; - height: px2rem(410); - overflow-y: scroll; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: px2rem(204); - box-sizing: border-box; - padding: 0 px2rem(90); - - &::-webkit-scrollbar { - display: none; - } - - p { - color: #FFF784; - font-size: px2rem(28); - font-weight: 400; - line-height: 0.45rem; - margin-bottom: 0.2rem; - width: 100%; - } + text-align: center; + color: #FFEDBA; + font-size: px2rem(28); + font-weight: 500; + margin-bottom: px2rem(20); } + } - .myRechargeText { - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: space-around; - align-content: center; - - p { - padding-bottom: 0.3rem; - } - } - - .myRechargeTextWhy { - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: space-around; - align-content: center; - - p { - padding-bottom: 2.3rem; - } - } + .rule { + width: px2rem(700); + height: px2rem(1333); + display: block; + margin: 0 auto px2rem(38); + position: relative; } } -.disclaimer { +.bootomText { width: 100%; text-align: center; - margin-top: px2rem(30); - margin-bottom: px2rem(42); - color: #FFF784; - font-size: px2rem(26); + color: #FFEDBA; + font-size: px2rem(28); font-weight: 400; + margin-bottom: px2rem(19); } -.video { - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - background: rgba(0, 0, 0, .5); - z-index: 99; - display: none; - - video { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 65%; - } - - .close { - width: px2rem(68); - height: px2rem(68); - position: absolute; - top: 10%; - right: px2rem(70); - z-index: 9; - } -} - -.arabic { - .back img { - left: auto; - right: 0.24rem; - transform: rotate(180deg); - } - - .header { - background: url(../images/header-ar.png) no-repeat; - background-size: 100% 100%; - } - - .header .time .day, - .header .time .hour, - .header .time .colon, - .header .time .min, - .header .time .sec { - float: right; - } - - .header .time .day { - margin-right: 0; - margin-left: 0.62667rem; - } - - .recharge10 .content .rewardImg { - background: url(../images/recharge10-ar.png) no-repeat; - background-size: 100% 100%; - } - - .recharge100 .content .rewardImg { - background: url(../images/recharge100-ar.png) no-repeat; - background-size: 100% 100%; - } - - .recharge300 .content .rewardImg { - background: url(../images/recharge300-ar.png) no-repeat; - background-size: 100% 100%; - } - - .recharge500 .content .rewardImg { - background: url(../images/recharge500-ar.png) no-repeat; - background-size: 100% 100%; - } - - .recharge1000 .content .rewardImg { - background: url(../images/recharge1000-ar.png) no-repeat; - background-size: 100% 100%; - } - - .recharge3000 .content .rewardImg { - background: url(../images/recharge3000-ar.png) no-repeat; - background-size: 100% 100%; - } +.bootomTextPage1 { + margin-bottom: px2rem(210); } \ No newline at end of file diff --git a/view/molistar/activity/ssGuild/images/A.png b/view/molistar/activity/ssGuild/images/A.png new file mode 100644 index 0000000..47f28f9 Binary files /dev/null and b/view/molistar/activity/ssGuild/images/A.png differ diff --git a/view/molistar/activity/ssGuild/images/B.png b/view/molistar/activity/ssGuild/images/B.png new file mode 100644 index 0000000..8f1edc4 Binary files /dev/null and b/view/molistar/activity/ssGuild/images/B.png differ diff --git a/view/molistar/activity/ssGuild/images/S.png b/view/molistar/activity/ssGuild/images/S.png new file mode 100644 index 0000000..d0681e8 Binary files /dev/null and b/view/molistar/activity/ssGuild/images/S.png differ diff --git a/view/molistar/activity/ssGuild/images/SS.png b/view/molistar/activity/ssGuild/images/SS.png index 2755ec4..ef2065f 100644 Binary files a/view/molistar/activity/ssGuild/images/SS.png and b/view/molistar/activity/ssGuild/images/SS.png differ diff --git a/view/molistar/activity/ssGuild/images/cloud.png b/view/molistar/activity/ssGuild/images/cloud.png new file mode 100644 index 0000000..efdb813 Binary files /dev/null and b/view/molistar/activity/ssGuild/images/cloud.png differ diff --git a/view/molistar/activity/ssGuild/images/myBg.png b/view/molistar/activity/ssGuild/images/myBg.png new file mode 100644 index 0000000..86b7ebd Binary files /dev/null and b/view/molistar/activity/ssGuild/images/myBg.png differ diff --git a/view/molistar/activity/ssGuild/images/null.png b/view/molistar/activity/ssGuild/images/null.png new file mode 100644 index 0000000..7c2c4ae Binary files /dev/null and b/view/molistar/activity/ssGuild/images/null.png differ diff --git a/view/molistar/activity/ssGuild/images/page1Rule.png b/view/molistar/activity/ssGuild/images/page1Rule.png new file mode 100644 index 0000000..d482886 Binary files /dev/null and b/view/molistar/activity/ssGuild/images/page1Rule.png differ diff --git a/view/molistar/activity/ssGuild/images/page2Bg.png b/view/molistar/activity/ssGuild/images/page2Bg.png new file mode 100644 index 0000000..b3b8854 Binary files /dev/null and b/view/molistar/activity/ssGuild/images/page2Bg.png differ diff --git a/view/molistar/activity/ssGuild/images/page2Rule.png b/view/molistar/activity/ssGuild/images/page2Rule.png new file mode 100644 index 0000000..68cc3c3 Binary files /dev/null and b/view/molistar/activity/ssGuild/images/page2Rule.png differ diff --git a/view/molistar/activity/ssGuild/images/page2Ts.png b/view/molistar/activity/ssGuild/images/page2Ts.png new file mode 100644 index 0000000..1dbca04 Binary files /dev/null and b/view/molistar/activity/ssGuild/images/page2Ts.png differ diff --git a/view/molistar/activity/ssGuild/images/ts.png b/view/molistar/activity/ssGuild/images/ts.png new file mode 100644 index 0000000..bc02ef9 Binary files /dev/null and b/view/molistar/activity/ssGuild/images/ts.png differ diff --git a/view/molistar/activity/ssGuild/images/tsBig.png b/view/molistar/activity/ssGuild/images/tsBig.png new file mode 100644 index 0000000..6462cde Binary files /dev/null and b/view/molistar/activity/ssGuild/images/tsBig.png differ diff --git a/view/molistar/activity/ssGuild/index.html b/view/molistar/activity/ssGuild/index.html index 783e048..d0ec1ca 100644 --- a/view/molistar/activity/ssGuild/index.html +++ b/view/molistar/activity/ssGuild/index.html @@ -4,7 +4,7 @@
-$0
虚位以待
+ ID:0 +虚位以待
+ ID:0 +Guild Nickname:名字
+Guild ID:0
+Anchor Nickname:名字
+Anchor ID:0
+My Diamond Flow:0
+Available Reward Gold:0
1、Recharge activity time: 0:00:00 on the 1st of each month to 23:59:59 on the last day of the month - (GMT+3).
-2、You can only get each grade reward once.
-3、Each round of activities end, the rewards will automatically expire.
-4、Contact our official customer service to get your unique ID!
-5、Recharge agent can not join the activity.
-