diff --git a/view/molistar/activity/exp/css/DIN-BlackItalic.ttf b/view/molistar/activity/exp/css/DIN-BlackItalic.ttf new file mode 100644 index 00000000..522cc2db Binary files /dev/null and b/view/molistar/activity/exp/css/DIN-BlackItalic.ttf differ diff --git a/view/molistar/activity/exp/css/Source-KeynoteartHans.ttf b/view/molistar/activity/exp/css/Source-KeynoteartHans.ttf new file mode 100644 index 00000000..273aa307 Binary files /dev/null and b/view/molistar/activity/exp/css/Source-KeynoteartHans.ttf differ diff --git a/view/molistar/activity/exp/css/index.css b/view/molistar/activity/exp/css/index.css new file mode 100644 index 00000000..04dd0a77 --- /dev/null +++ b/view/molistar/activity/exp/css/index.css @@ -0,0 +1,1291 @@ +@font-face { + font-family: 'SourceKeynoteartHans'; + src: url("./Source-KeynoteartHans.ttf"); +} + +@font-face { + font-family: 'DINBlackItalic'; + src: url("./DIN-BlackItalic.ttf"); +} + +html, +body { + width: 100%; + background: #0C0538; +} + +.back { + width: 100%; + height: 0.58667rem; + line-height: 0.58667rem; + position: fixed; + left: 0; + top: 0.86667rem; + text-align: center; + color: #FFFFFF; + font-size: 0.50667rem; + font-weight: bold; + z-index: 10; +} + +.back img { + width: 0.58667rem; + height: 0.58667rem; + position: absolute; + left: 0.24rem; + top: 0rem; +} + +.header { + width: 10rem; + height: 9.92rem; + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + position: relative; +} + +.header .ruleIcon { + width: 1.84rem; + height: 0.69333rem; + line-height: 0.69333rem; + position: absolute; + right: 0; + top: 4.90667rem; + color: #FBA5FF; + font-weight: bold; + font-size: 0.37333rem; + text-align: center; + background: url(../images/rule_iconBg.png) no-repeat; + background-size: 100% 100%; + text-indent: 13px; + text-shadow: 0.02667rem 0rem 0rem #7D0084; + text-align: center; + font-style: normal; +} + +.header .tiem { + width: 100%; + position: absolute; + top: 5.94667rem; + left: 50%; + transform: translateX(-50%); + text-align: center; + color: #fff; + font-weight: 400; + font-size: 0.32rem; + text-shadow: 0rem 0rem 0.08rem #FF7A7A; + -webkit-text-stroke: 0.01333rem #FF7A7A; + font-family: 'SourceKeynoteartHans', sans-serif; +} + +.giftBox { + width: 9.17333rem; + height: 18.08rem; + margin: -0.46667rem auto 1.09333rem; + position: relative; + background: url(../images/giftBg.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; +} + +.giftBox h3 { + width: 100%; + text-align: center; + color: #E0C677; + font-size: 0.42667rem; + font-weight: 500; + margin-top: 3.94667rem; +} + +.giftBox .textBox { + width: 7.89333rem; + height: 2rem; + margin: 0.26667rem auto 0.90667rem; + background: url(../images/textBox.png) no-repeat; + background-size: 100% 100%; + position: relative; + box-sizing: border-box; + padding-top: 0.24rem; +} + +.giftBox .textBox .vip { + width: 2.58667rem; + height: 2.50667rem; + position: absolute; + left: -0.26667rem; + top: 0rem; +} + +.giftBox .textBox .p1 { + width: 100%; + box-sizing: border-box; + text-align: right; + padding-right: 0.69333rem; + color: #E0C677; + font-size: 0.32rem; + font-weight: 400; +} + +.giftBox .textBox .p2 { + width: 100%; + box-sizing: border-box; + text-align: right; + padding-right: 0.93333rem; + color: #E0C677; + margin-top: 0.18667rem; + font-size: 0.69333rem; + font-weight: 400; + font-family: 'DINBlackItalic'; +} + +.giftBox .giftList { + width: 7.89333rem; + height: 8.66667rem; + margin: 0 auto 0; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.giftBox .giftList div { + width: 3.6rem; + height: 3.6rem; + background: url(../images/giftListBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin-bottom: 1.44rem; +} + +.giftBox .giftList div .exp { + width: 2.05333rem; + height: 1.06667rem; + line-height: 0.66667rem; + font-weight: 600; + position: absolute; + left: 0; + top: 0; + text-align: center; + color: #7F5300; + font-size: 0.26667rem; + background: url(../images/expIcon.png) no-repeat; + background-size: 100% 100%; + white-space: nowrap; +} + +.giftBox .giftList div .gift { + width: 2.50667rem; + height: 2.50667rem; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.giftBox .giftList div p { + width: 100%; + text-align: center; + color: #C5C3CF; + font-size: 0.42667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.53333rem; + font-weight: 500; + white-space: nowrap; +} + +.giftBox .giftList div span { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -1.09333rem; + height: 0.29333rem; + line-height: 0.29333rem; +} + +.giftBox .giftList div span img { + width: 0.4rem; + height: 0.29333rem; + display: inline-block; +} + +.giftBox .giftList div span i { + font-style: normal; + display: inline-block; + color: #EE9E37; + font-size: 0.32rem; +} + +.listBox { + width: 9.14667rem; + height: 25.57333rem; + margin: 0 auto 0.88rem; + background: url(../images/listBox.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + position: relative; + padding-top: 0.85333rem; +} + +.listBox .tab { + position: absolute; + width: 7.46667rem; + height: 0.85333rem; + line-height: 0.85333rem; + top: -0.42667rem; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; + font-weight: 600; +} + +.listBox .tab div { + text-align: center; + width: 3.62667rem; + font-size: 0.37333rem; +} + +.listBox .tab .tab1 { + color: #B37500; + background: url(../images/tab1.png) no-repeat; + background-size: 100% 100%; +} + +.listBox .tab .tab2 { + color: #E0BEFF; + background: url(../images/tab2.png) no-repeat; + background-size: 100% 100%; +} + +.listBox h3 { + width: 100%; + height: 0.4rem; + line-height: 0.4rem; + text-align: center; + margin: 0 auto 0.96rem; + color: #C9C7D3; + font-size: 0.32rem; + font-weight: 400; +} + +.listBox h3 img { + width: 0.4rem; + height: 0.4rem; + display: inline-block; + margin-left: 0.26667rem; +} + +.listBox .expBox { + width: 7.52rem; + height: 22.90667rem; + background: url(../images/boxBg.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + position: relative; +} + +.listBox .expBox .dam { + position: absolute; + width: 1.81333rem; + height: 1.84rem; + right: -0.34667rem; + top: -1.01333rem; +} + +.listBox .expBox .top { + width: 7.54667rem; + height: 1.6rem; + line-height: 1.6rem; + color: #A897FF; + font-size: 0.42667rem; + font-weight: 600; + display: flex; +} + +.listBox .expBox .top div { + text-align: center; +} + +.listBox .expBox .top .l { + flex: 2.5; +} + +.listBox .expBox .top .r { + flex: 7.5; +} + +.listBox .expBox .bottom { + overflow: hidden; + width: 7.54667rem; + height: 2.42667rem; + line-height: 2.42667rem; + color: #A897FF; + font-size: 0.42667rem; + font-weight: 600; + display: flex; +} + +.listBox .expBox .bottom div { + text-align: center; +} + +.listBox .expBox .bottom .l { + flex: 2.5; +} + +.listBox .expBox .bottom .r { + flex: 7.5; +} + +.listBox .expBox .bottom .r .gift_sbox { + width: 1.52rem; + height: 1.38667rem; + background: url(../images/s-giftBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + float: left; + margin-top: 0.26667rem; + margin-left: 0.26667rem; +} + +.listBox .expBox .bottom .r .gift_sbox .title { + width: 1.12rem; + height: 0.32rem; + line-height: 0.26667rem; + position: absolute; + top: 0.08rem; + left: 50%; + transform: translateX(-50%); + text-align: center; + color: #BE7800; + font-size: 0.24rem; + font-weight: 400; + background: url(../images/title.png) no-repeat; + background-size: 100% 100%; + z-index: 2; +} + +.listBox .expBox .bottom .r .gift_sbox .gift { + width: 1.25333rem; + height: 0.88rem; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.listBox .expBox .bottom .r .gift_sbox .ts { + width: 1.2rem; + height: 1.2rem; + top: 53%; +} + +.listBox .expBox .bottom .r .gift_sbox .xz { + width: 1.2rem; + height: 1.2rem; + top: 55%; +} + +.listBox .expBox .bottom .r .gift_sbox .qp { + width: 1.25333rem; + height: 0.98667rem; + top: 60%; +} + +.listBox .expBox .bottom .r .gift_sbox .zj { + width: 1.52rem; + height: 1.06667rem; + top: 54%; +} + +.listBox .expBox .bottom .r .gift_sbox p { + width: 100%; + height: 0.32rem; + line-height: 0.32rem; + text-align: center; + color: #C9C7D3; + font-size: 0.32rem; + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.53333rem; + white-space: nowrap; +} + +.listBox .expBox .bottom .r .gift_sbox p img { + display: inline-block; + width: 0.32rem; + height: 0.32rem; +} + +.listBox .expBox .bottom .r .but { + width: 1.46667rem; + height: 0.65333rem; + border-radius: 0.65333rem; + line-height: 0.65333rem; + color: #ECCE91; + font-size: 0.32rem; + font-weight: 400; + background: #857277; + margin-top: 0.93333rem; + margin-left: 0.34667rem; + float: left; +} + +.listBox .expBox .bottom .r .act { + color: #A06C00; + background: #ECCE91; +} + +.listBox .expBox .my { + width: 7.52rem; + height: 1.86667rem; + background: #221A58; + box-shadow: 0px 0px 0.26667rem 0px rgba(195, 183, 255, 0.37); + border-radius: 0px 0px 0.21333rem 0.21333rem; + border: 0.05333rem solid #C3B7FF; + box-sizing: border-box; +} + +.listBox .expBox .my .tx { + float: left; + display: block; + width: 1.12rem; + height: 1.12rem; + border-radius: 50%; + box-sizing: border-box; + margin-top: 0.16rem; + margin-left: 0.58667rem; + margin-right: 0.26667rem; +} + +.listBox .expBox .my .user { + float: left; +} + +.listBox .expBox .my .user p { + width: 4.74667rem; + color: #D4CEFF; + font-size: 0.42667rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: 0.2rem; + margin-bottom: 0.16rem; +} + +.listBox .expBox .my .user .lineBox { + width: 4.74667rem; + height: 0.32rem; + margin-bottom: 0.10667rem; + background: rgba(195, 183, 255, 0.3); + border-radius: 0.32rem; + border: 0.02667rem solid #C3B7FF; + position: relative; + overflow: hidden; + box-sizing: border-box; +} + +.listBox .expBox .my .user .lineBox .line { + width: 10%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} + +.listBox .expBox .my .user .lineBox .content { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + text-align: center; + color: #D3CAFF; + font-size: 0.29333rem; + font-weight: 400; +} + +.listBox .expBox .my .user .exp { + width: 4.74667rem; + display: flex; + justify-content: space-between; + color: #8079B0; + font-size: 0.32rem; + font-weight: 400; +} + +.listBox2 { + width: 9.14667rem; + height: 39.68rem; + margin: 0 auto 0.88rem; + background: url(../images/listBox2.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + position: relative; + padding-top: 13.62667rem; + display: none; +} + +.listBox2 .tab { + position: absolute; + width: 7.46667rem; + height: 0.85333rem; + line-height: 0.85333rem; + top: -0.42667rem; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; + font-weight: 600; +} + +.listBox2 .tab div { + text-align: center; + width: 3.62667rem; + font-size: 0.37333rem; +} + +.listBox2 .tab .tab1 { + color: #B37500; + background: url(../images/tab1.png) no-repeat; + background-size: 100% 100%; +} + +.listBox2 .tab .tab2 { + color: #E0BEFF; + background: url(../images/tab2.png) no-repeat; + background-size: 100% 100%; +} + +.listBox2 .topReward { + width: 9.57333rem; + height: 12.53333rem; + background: url(../images/topReward.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: 0.96rem; + left: 50%; + transform: translateX(-50%); +} + +.listBox2 .topReward .listRule { + width: 1.6rem; + height: 0.61333rem; + line-height: 0.61333rem; + text-align: center; + color: #725B00; + font-size: 0.26667rem; + position: absolute; + right: 0.69333rem; + top: 1.14667rem; + background: linear-gradient(180deg, #F8BA47 0%, #FFF297 100%); + border-radius: 0.21333rem 0px 0px 0.21333rem; +} + +.listBox2 .content1 { + width: 6.61333rem; + height: 0.90667rem; + text-align: center; + color: #C5C3CF; + font-size: 0.32rem; + font-weight: 500; + margin: 0 auto 0.13333rem; + line-height: 0.45rem; +} + +.listBox2 .content2 { + width: 100%; + text-align: center; + color: #C5C3CF; + font-size: 0.26667rem; + font-weight: 500; + margin: 0 auto 0.13333rem; + line-height: 0.4rem; +} + +.listBox2 .top1 { + width: 4.32rem; + height: 4.32rem; + position: absolute; + top: 16.13333rem; + left: 50%; + transform: translateX(-50%); +} + +.listBox2 .top1 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.listBox2 .top1 .tx { + width: 2.6rem; + height: 2.6rem; + position: absolute; + top: 0.8rem; + left: 50%; + transform: translateX(-51%); + border-radius: 50%; +} + +.listBox2 .top1 .nick { + width: 65%; + height: 0.58667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.53333rem; + color: #FFFA8B; + font-size: 0.42667rem; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-weight: 500; +} + +.listBox2 .top1 .score { + width: 65%; + height: 0.58667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 5.06667rem; + color: #FFFA8B; + font-size: 0.42667rem; + text-align: center; + font-weight: 400; +} + +.listBox2 .top2 { + width: 4.32rem; + height: 4.32rem; + position: absolute; + top: 21.36rem; + left: 0rem; +} + +.listBox2 .top2 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.listBox2 .top2 .tx { + width: 2.6rem; + height: 2.6rem; + position: absolute; + top: 0.53333rem; + left: 50%; + transform: translateX(-51%); + border-radius: 50%; +} + +.listBox2 .top2 .nick { + width: 65%; + height: 0.58667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.53333rem; + color: #FFFA8B; + font-size: 0.42667rem; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-weight: 500; +} + +.listBox2 .top2 .score { + width: 65%; + height: 0.58667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 5.06667rem; + color: #FFFA8B; + font-size: 0.42667rem; + text-align: center; + font-weight: 400; +} + +.listBox2 .top3 { + width: 4.32rem; + height: 4.32rem; + position: absolute; + top: 21.36rem; + right: 0rem; +} + +.listBox2 .top3 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} + +.listBox2 .top3 .tx { + width: 3.2rem; + height: 3.2rem; + position: absolute; + top: 0.53333rem; + left: 50%; + transform: translateX(-51%); + border-radius: 50%; +} + +.listBox2 .top3 .nick { + width: 65%; + height: 0.58667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.53333rem; + color: #FFFA8B; + font-size: 0.42667rem; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-weight: 500; +} + +.listBox2 .top3 .score { + width: 65%; + height: 0.58667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 5.06667rem; + color: #FFFA8B; + font-size: 0.42667rem; + text-align: center; + font-weight: 400; +} + +.listBox2 ul { + width: 9.09333rem; + height: 10.29333rem; + overflow-y: scroll; + background: url(../images/ulBg.png) no-repeat; + background-size: 100% 100%; + margin: 13.46667rem auto 0; + padding-bottom: 2.4rem; +} + +.listBox2 ul::-webkit-scrollbar { + display: none; +} + +.listBox2 ul li { + width: 100%; + height: 1.81333rem; + border-bottom: 0.02667rem solid; + border-image: linear-gradient(225deg, #f8d296, #eccd81, #97561b, #e0ab28) 2 2; + box-sizing: border-box; + overflow: hidden; + padding: 0 0.26667rem 0 0.29333rem; +} + +.listBox2 ul li .num { + float: left; + width: 0.93333rem; + line-height: 1.81333rem; + height: 100%; + color: #FFFA8B; + font-size: 0.32rem; + font-weight: 400; + margin-right: 0.4rem; +} + +.listBox2 ul li .tx { + display: block; + float: left; + margin-top: 0.34667rem; + margin-right: 0.13333rem; + border-radius: 50%; + width: 1.12rem; + height: 1.12rem; +} + +.listBox2 ul li .nick { + width: 3rem; + line-height: 1.81333rem; + height: 100%; + float: left; + color: #FFFA8B; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 0.42667rem; + font-weight: 500; +} + +.listBox2 ul li .right { + float: right; + text-align: right; +} + +.listBox2 ul li .right p { + color: #B4B04F; + font-size: 0.32rem; + font-weight: 400; + margin-bottom: 0.26667rem; + margin-top: 0.4rem; +} + +.listBox2 ul li .right span { + color: #FFFA8B; + font-size: 0.42667rem; + font-weight: 400; + display: block; +} + +.listBox2 .my { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + height: 1.81333rem; + box-sizing: border-box; + padding: 0 0.26667rem 0 0.29333rem; + background: #221A58; + border-radius: 0.26667rem 0.26667rem 0 0; + z-index: 8; +} + +.listBox2 .my .rank { + position: absolute; + top: -0.61333rem; + left: 50%; + transform: translateX(-50%); + width: 4.24rem; + height: 1.22667rem; + line-height: 1.22667rem; + background: url(../images/myListBg.png) no-repeat; + background-size: 100% 100%; + text-align: center; + color: #FFFA8B; + font-size: 0.32rem; + font-weight: 500; +} + +.listBox2 .my .num { + float: left; + width: 0.93333rem; + line-height: 1.81333rem; + height: 100%; + color: #FFFA8B; + font-size: 0.32rem; + font-weight: 400; + margin-right: 0.4rem; + white-space: nowrap; +} + +.listBox2 .my .tx { + display: block; + float: left; + margin-top: 0.34667rem; + margin-right: 0.13333rem; + border-radius: 50%; + width: 1.12rem; + height: 1.12rem; +} + +.listBox2 .my .nick { + width: 3rem; + line-height: 1.81333rem; + height: 100%; + float: left; + color: #FFFA8B; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 0.42667rem; + font-weight: 500; +} + +.listBox2 .my .right { + float: right; + text-align: right; +} + +.listBox2 .my .right p { + color: #B4B04F; + font-size: 0.32rem; + font-weight: 400; + margin-bottom: 0.26667rem; + margin-top: 0.4rem; +} + +.listBox2 .my .right span { + color: #FFFA8B; + font-size: 0.42667rem; + font-weight: 400; + display: block; + margin-top: 0.75rem; +} + +.exp_pub { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 9; + background: rgba(0, 0, 0, 0.46); + display: none; +} + +.exp_pub .exp_pub_in { + width: 9.14667rem; + height: 17.14667rem; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: url(../images/expRule.png) no-repeat; + background-size: 100% 100%; + padding-top: 0.93333rem; + box-sizing: border-box; +} + +.exp_pub .exp_pub_in .title { + width: 4.48rem; + height: 1.38667rem; + line-height: 1.38667rem; + text-align: center; + color: #E1D6FF; + font-size: 0.42667rem; + font-weight: 600; + top: -0.69333rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + background: url(../images/expTitle.png) no-repeat; + background-size: 100% 100%; +} + +.exp_pub .exp_pub_in h3 { + width: 100%; + text-align: center; + color: #C9C7D3; + font-size: 0.32rem; + font-weight: 400; + margin-bottom: 0.53333rem; +} + +.exp_pub .exp_pub_in .box { + width: 7.52rem; + height: 14.32rem; + background: linear-gradient(180deg, #473891 0%, #221A58 100%); + border-radius: 0.21333rem; + border: 0.05333rem solid #C3B7FF; + margin: 0 auto; + overflow-y: scroll; +} + +.exp_pub .exp_pub_in .box::-webkit-scrollbar { + display: none; +} + +.exp_pub .exp_pub_in .box .top { + width: 7.52rem; + height: 1.6rem; + line-height: 1.6rem; + color: #A897FF; + font-size: 0.42667rem; + font-weight: 600; + display: flex; +} + +.exp_pub .exp_pub_in .box .top div { + text-align: center; +} + +.exp_pub .exp_pub_in .box .top .l { + flex: 3; + border-right: 0.05333rem solid #C3B7FF; + border-bottom: 0.05333rem solid #C3B7FF; +} + +.exp_pub .exp_pub_in .box .top .r { + flex: 7; + border-bottom: 0.05333rem solid #C3B7FF; +} + +.exp_pub .exp_pub_in .box .bottom { + width: 7.52rem; + height: 1.38667rem; + line-height: 1.38667rem; + color: #C3B7FF; + font-size: 0.42667rem; + font-weight: 600; + display: flex; +} + +.exp_pub .exp_pub_in .box .bottom div { + text-align: center; +} + +.exp_pub .exp_pub_in .box .bottom .l { + flex: 3; + border-right: 0.05333rem solid #C3B7FF; + border-bottom: 0.05333rem solid #C3B7FF; +} + +.exp_pub .exp_pub_in .box .bottom .r { + flex: 7; + border-bottom: 0.05333rem solid #C3B7FF; + color: #C9C7D3; +} + +.rule { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 9; + background: rgba(0, 0, 0, 0.46); + display: none; +} + +.rule .rule_in { + width: 9.14667rem; + height: 13.68rem; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: url(../images/ruleBg.png) no-repeat; + background-size: 100% 100%; + padding-top: 0.93333rem; + box-sizing: border-box; + overflow: hidden; +} + +.rule .rule_in .tab { + width: 5.44rem; + height: 0.90667rem; + line-height: 0.90667rem; + display: flex; + justify-content: space-between; + margin: 0 auto; +} + +.rule .rule_in .tab div { + text-align: center; + width: 2.45333rem; + font-size: 0.42667rem; + font-weight: 400; + border-radius: 0.21333rem; + white-space: nowrap; +} + +.rule .rule_in .tab .stab1 { + background: #857277; + color: #B9A084; +} + +.rule .rule_in .tab .stab2 { + background: #493D9A; + color: #8377CB; +} + +.rule .rule_in .tab .act1 { + background: linear-gradient(135deg, #F8BA47 0%, #FFF297 100%); + color: #DC7400; + font-weight: 500; +} + +.rule .rule_in .tab .act2 { + background: linear-gradient(135deg, #67309F 0%, #AF7ADC 100%); + color: #BEB4FF; + font-weight: 500; +} + +.rule .rule_in .box { + width: 8.26667rem; + height: 10.6rem; + overflow-y: scroll; + margin: 0.53333rem auto 0; +} + +.rule .rule_in .box::-webkit-scrollbar { + display: none; +} + +.rule .rule_in .box img { + width: 8.26667rem; + display: block; +} + +.rule .rule_in .box .img1 { + height: 31.38667rem; +} + +.rule .rule_in .box .img2 { + height: 43.73333rem; + display: none; +} + +.english .giftBox .textBox .p1 { + width: 70%; + margin-left: 2rem; + padding-right: 0; + line-height: 0.34rem; +} + +.english .giftBox .giftList div .exp { + font-size: 0.26667rem; +} + +.english .giftBox .giftList div p { + font-size: 0.34667rem; +} + +.english .rule .rule_in .tab { + width: 7.44rem; +} + +.english .rule .rule_in .tab div { + width: 3.5rem; + font-size: 0.33333rem; +} + +.english .listBox2 .content1 { + font-size: 0.29333rem; + width: 8rem; +} + +.english .listBox2 .my .num { + margin-right: 0.9rem; +} + +.english .listBox2 .my .rank { + display: none; +} + +.arabic .header .tiem { + top: 6.1rem; +} + +.arabic .header .ruleIcon { + text-indent: -13px; +} + +.arabic .giftBox .textBox .p1 { + width: 75%; + padding-right: 0; + white-space: nowrap; + font-size: 0.21333rem; +} + +.arabic .giftBox .giftList div .exp { + font-size: 0.29333rem; +} + +.arabic .listBox .expBox { + background: url(../images/boxBg2.png) no-repeat; + background-size: 100% 100%; +} + +.arabic .listBox .expBox .bottom .r .but { + float: right; + white-space: nowrap; + font-size: 0.25333rem; + margin-left: 0; + margin-right: 0.2rem; +} + +.arabic .listBox .expBox .bottom .r .gift_sbox { + float: right; +} + +.arabic .listBox .expBox .bottom .l { + margin-right: 0.05rem; + margin-left: 0.1rem; + font-size: 0.32rem; +} + +.arabic .listBox .expBox .my .tx { + float: right; +} + +.arabic .listBox .expBox .my .user { + float: right; +} + +.arabic .listBox .expBox .my .user .lineBox .line { + left: auto; + right: 0; +} + +.arabic .rule .rule_in .tab div { + font-size: 0.33333rem; +} + +.arabic .listBox2 .my .rank { + display: none; +} + +.arabic .listBox2 .my .num { + float: right; + margin-right: 0; + margin-left: 0.6rem; +} + +.arabic .listBox2 .my .tx { + float: right; + margin-right: 0; + margin-left: 0.3rem; +} + +.arabic .listBox2 .my .nick { + float: right; +} + +.arabic .listBox2 .my .right { + float: left; +} + +.arabic .listBox2 ul li .right { + float: left; + text-align: left; +} + +.arabic .listBox2 ul li .nick { + float: right; +} + +.arabic .listBox2 ul li .tx { + float: right; + margin-left: 0.2rem; +} + +.arabic .listBox2 ul li .num { + float: right; + margin-right: 0; + margin-left: 0rem; +} + +.arabic .listBox2 .topReward .listRule { + right: 0.3rem; +} diff --git a/view/molistar/activity/exp/css/index.scss b/view/molistar/activity/exp/css/index.scss new file mode 100644 index 00000000..603eebf6 --- /dev/null +++ b/view/molistar/activity/exp/css/index.scss @@ -0,0 +1,1313 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +@font-face { + font-family: 'SourceKeynoteartHans'; + src: url('./Source-KeynoteartHans.ttf'); +} + +@font-face { + font-family: 'DINBlackItalic'; + src: url('./DIN-BlackItalic.ttf'); +} + +html, +body { + width: 100%; + background: #0C0538; +} + +.back { + width: 100%; + height: px2rem(44); + line-height: px2rem(44); + position: fixed; + left: 0; + top: px2rem(65); + text-align: center; + color: #FFFFFF; + font-size: px2rem(38); + font-weight: bold; + z-index: 10; + + img { + width: px2rem(44); + height: px2rem(44); + position: absolute; + left: px2rem(18); + top: px2rem(0); + } +} + +.header { + width: px2rem(750); + height: px2rem(744); + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + position: relative; + + .ruleIcon { + width: px2rem(138); + height: px2rem(52); + line-height: px2rem(52); + position: absolute; + right: 0; + top: px2rem(368); + color: #FBA5FF; + font-weight: bold; + font-size: px2rem(28); + text-align: center; + background: url(../images/rule_iconBg.png) no-repeat; + background-size: 100% 100%; + text-indent: 13px; + text-shadow: px2rem(2) px2rem(0) px2rem(0) #7D0084; + text-align: center; + font-style: normal; + } + + .tiem { + width: 100%; + position: absolute; + top: px2rem(446); + left: 50%; + transform: translateX(-50%); + text-align: center; + color: #fff; + font-weight: 400; + font-size: px2rem(24); + text-shadow: px2rem(0) px2rem(0) px2rem(6) #FF7A7A; + -webkit-text-stroke: px2rem(1) #FF7A7A; + font-family: 'SourceKeynoteartHans', sans-serif; + } +} + +.giftBox { + width: px2rem(688); + height: px2rem(1356); + margin: px2rem(-35) auto px2rem(82); + position: relative; + background: url(../images/giftBg.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; + + h3 { + width: 100%; + text-align: center; + color: #E0C677; + font-size: px2rem(32); + font-weight: 500; + margin-top: px2rem(296); + } + + .textBox { + width: px2rem(592); + height: px2rem(150); + margin: px2rem(20) auto px2rem(68); + background: url(../images/textBox.png) no-repeat; + background-size: 100% 100%; + position: relative; + box-sizing: border-box; + padding-top: px2rem(18); + + .vip { + width: px2rem(194); + height: px2rem(188); + position: absolute; + left: px2rem(-20); + top: px2rem(0); + } + + .p1 { + width: 100%; + box-sizing: border-box; + text-align: right; + padding-right: px2rem(52); + color: #E0C677; + font-size: px2rem(24); + font-weight: 400; + } + + .p2 { + width: 100%; + box-sizing: border-box; + text-align: right; + padding-right: px2rem(70); + color: #E0C677; + margin-top: px2rem(14); + font-size: px2rem(52); + font-weight: 400; + font-family: 'DINBlackItalic'; + } + } + + .giftList { + width: px2rem(592); + height: px2rem(650); + margin: 0 auto 0; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + div { + width: px2rem(270); + height: px2rem(270); + background: url(../images/giftListBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin-bottom: px2rem(108); + + .exp { + width: px2rem(154); + height: px2rem(80); + line-height: px2rem(50); + font-weight: 600; + position: absolute; + left: 0; + top: 0; + text-align: center; + color: #7F5300; + font-size: px2rem(20); + background: url(../images/expIcon.png) no-repeat; + background-size: 100% 100%; + white-space: nowrap; + } + + .gift { + width: px2rem(188); + height: px2rem(188); + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + + p { + width: 100%; + text-align: center; + color: #C5C3CF; + font-size: px2rem(32); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-40); + font-weight: 500; + white-space: nowrap; + } + + span { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-82); + height: px2rem(22); + line-height: px2rem(22); + + img { + width: px2rem(30); + height: px2rem(22); + display: inline-block; + } + + i { + font-style: normal; + display: inline-block; + color: #EE9E37; + font-size: px2rem(24); + } + } + } + } +} + +.listBox { + width: px2rem(686); + height: px2rem(1918); + margin: 0 auto px2rem(66); + background: url(../images/listBox.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + position: relative; + padding-top: px2rem(64); + // display: none; + + .tab { + position: absolute; + width: px2rem(560); + height: px2rem(64); + line-height: px2rem(64); + top: px2rem(-32); + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; + font-weight: 600; + + div { + text-align: center; + width: px2rem(272); + font-size: px2rem(28); + } + + .tab1 { + color: #B37500; + background: url(../images/tab1.png) no-repeat; + background-size: 100% 100%; + } + + .tab2 { + color: #E0BEFF; + background: url(../images/tab2.png) no-repeat; + background-size: 100% 100%; + } + } + + h3 { + width: 100%; + height: px2rem(30); + line-height: px2rem(30); + text-align: center; + margin: 0 auto px2rem(72); + color: #C9C7D3; + font-size: px2rem(24); + font-weight: 400; + + img { + width: px2rem(30); + height: px2rem(30); + display: inline-block; + margin-left: px2rem(20); + } + } + + .expBox { + width: px2rem(564); + height: px2rem(1718); + background: url(../images/boxBg.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + position: relative; + + .dam { + position: absolute; + width: px2rem(136); + height: px2rem(138); + right: px2rem(-26); + top: px2rem(-76); + } + + .top { + width: px2rem(566); + height: px2rem(120); + line-height: px2rem(120); + color: #A897FF; + font-size: px2rem(32); + font-weight: 600; + display: flex; + + div { + text-align: center; + } + + .l { + flex: 2.5; + } + + .r { + flex: 7.5; + } + } + + .bottom { + overflow: hidden; + width: px2rem(566); + height: px2rem(182); + line-height: px2rem(182); + color: #A897FF; + font-size: px2rem(32); + font-weight: 600; + display: flex; + + div { + text-align: center; + } + + .l { + flex: 2.5; + } + + .r { + flex: 7.5; + + .gift_sbox { + width: px2rem(114); + height: px2rem(104); + background: url(../images/s-giftBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + float: left; + margin-top: px2rem(20); + margin-left: px2rem(20); + + .title { + width: px2rem(84); + height: px2rem(24); + line-height: px2rem(20); + position: absolute; + top: px2rem(6); + left: 50%; + transform: translateX(-50%); + text-align: center; + color: #BE7800; + font-size: px2rem(18); + font-weight: 400; + background: url(../images/title.png) no-repeat; + background-size: 100% 100%; + z-index: 2; + } + + .gift { + width: px2rem(94); + height: px2rem(66); + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + + .ts { + width: px2rem(90); + height: px2rem(90); + top: 53%; + } + + .xz { + width: px2rem(90); + height: px2rem(90); + top: 55%; + } + + .qp { + width: px2rem(94); + height: px2rem(74); + top: 60%; + } + + .zj { + width: px2rem(114); + height: px2rem(80); + top: 54%; + } + + p { + width: 100%; + height: px2rem(24); + line-height: px2rem(24); + text-align: center; + color: #C9C7D3; + font-size: px2rem(24); + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-40); + white-space: nowrap; + + img { + display: inline-block; + width: px2rem(24); + height: px2rem(24); + } + } + } + + .but { + width: px2rem(110); + height: px2rem(49); + border-radius: px2rem(49); + line-height: px2rem(49); + color: #ECCE91; + font-size: px2rem(24); + font-weight: 400; + background: #857277; + margin-top: px2rem(70); + margin-left: px2rem(26); + float: left; + } + + .act { + color: #A06C00; + background: #ECCE91; + } + } + } + + .my { + width: px2rem(564); + height: px2rem(140); + background: #221A58; + box-shadow: 0px 0px px2rem(20) 0px rgba(195, 183, 255, 0.37); + border-radius: 0px 0px px2rem(16) px2rem(16); + border: px2rem(4) solid #C3B7FF; + box-sizing: border-box; + + .tx { + float: left; + display: block; + width: px2rem(84); + height: px2rem(84); + border-radius: 50%; + box-sizing: border-box; + margin-top: px2rem(12); + margin-left: px2rem(44); + margin-right: px2rem(20); + } + + .user { + float: left; + + p { + width: px2rem(356); + color: #D4CEFF; + font-size: px2rem(32); + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: px2rem(15); + margin-bottom: px2rem(12); + } + + .lineBox { + width: px2rem(356); + height: px2rem(24); + margin-bottom: px2rem(8); + background: rgba(195, 183, 255, 0.3); + border-radius: px2rem(24); + border: px2rem(2) solid #C3B7FF; + position: relative; + overflow: hidden; + box-sizing: border-box; + + .line { + width: 10%; + height: 100%; + position: absolute; + left: 0; + top: 0; + } + + .content { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + text-align: center; + color: #D3CAFF; + font-size: px2rem(22); + font-weight: 400; + } + } + + .exp { + width: px2rem(356); + display: flex; + justify-content: space-between; + color: #8079B0; + font-size: px2rem(24); + font-weight: 400; + } + } + } + + + } +} + +.listBox2 { + width: px2rem(686); + height: px2rem(2976); + margin: 0 auto px2rem(66); + background: url(../images/listBox2.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + position: relative; + padding-top: px2rem(1022); + display: none; + + .tab { + position: absolute; + width: px2rem(560); + height: px2rem(64); + line-height: px2rem(64); + top: px2rem(-32); + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; + font-weight: 600; + + div { + text-align: center; + width: px2rem(272); + font-size: px2rem(28); + } + + .tab1 { + color: #B37500; + background: url(../images/tab1.png) no-repeat; + background-size: 100% 100%; + } + + .tab2 { + color: #E0BEFF; + background: url(../images/tab2.png) no-repeat; + background-size: 100% 100%; + } + } + + .topReward { + width: px2rem(718); + height: px2rem(940); + background: url(../images/topReward.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: px2rem(72); + left: 50%; + transform: translateX(-50%); + + .listRule { + width: px2rem(120); + height: px2rem(46); + line-height: px2rem(46); + text-align: center; + color: #725B00; + font-size: px2rem(20); + position: absolute; + right: px2rem(52); + top: px2rem(86); + background: linear-gradient(180deg, #F8BA47 0%, #FFF297 100%); + border-radius: px2rem(16) 0px 0px px2rem(16); + } + } + + .content1 { + width: px2rem(496); + height: px2rem(68); + text-align: center; + color: #C5C3CF; + font-size: px2rem(24); + font-weight: 500; + margin: 0 auto px2rem(10); + line-height: 0.45rem; + } + + .content2 { + width: 100%; + text-align: center; + color: #C5C3CF; + font-size: px2rem(20); + font-weight: 500; + margin: 0 auto px2rem(10); + line-height: 0.4rem; + } + + .top1 { + width: px2rem(324); + height: px2rem(324); + position: absolute; + top: px2rem(1210); + left: 50%; + transform: translateX(-50%); + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(195); + height: px2rem(195); + position: absolute; + top: px2rem(60); + left: 50%; + transform: translateX(-51%); + border-radius: 50%; + } + + .nick { + width: 65%; + height: px2rem(44); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(340); + color: #FFFA8B; + font-size: px2rem(32); + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-weight: 500; + + } + + .score { + width: 65%; + height: px2rem(44); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(380); + color: #FFFA8B; + font-size: px2rem(32); + text-align: center; + font-weight: 400; + } + } + + .top2 { + width: px2rem(324); + height: px2rem(324); + position: absolute; + top: px2rem(1602); + left: px2rem(-0); + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(195); + height: px2rem(195); + position: absolute; + top: px2rem(40); + left: 50%; + transform: translateX(-51%); + border-radius: 50%; + } + + .nick { + width: 65%; + height: px2rem(44); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(340); + color: #FFFA8B; + font-size: px2rem(32); + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-weight: 500; + + } + + .score { + width: 65%; + height: px2rem(44); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(380); + color: #FFFA8B; + font-size: px2rem(32); + text-align: center; + font-weight: 400; + } + } + + .top3 { + width: px2rem(324); + height: px2rem(324); + position: absolute; + top: px2rem(1602); + right: px2rem(-0); + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(240); + height: px2rem(240); + position: absolute; + top: px2rem(40); + left: 50%; + transform: translateX(-51%); + border-radius: 50%; + } + + .nick { + width: 65%; + height: px2rem(44); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(340); + color: #FFFA8B; + font-size: px2rem(32); + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-weight: 500; + + } + + .score { + width: 65%; + height: px2rem(44); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(380); + color: #FFFA8B; + font-size: px2rem(32); + text-align: center; + font-weight: 400; + } + } + + ul { + width: px2rem(682); + height: px2rem(772); + overflow-y: scroll; + background: url(../images/ulBg.png) no-repeat; + background-size: 100% 100%; + margin: px2rem(1010) auto 0; + padding-bottom: 2.4rem; + + &::-webkit-scrollbar { + display: none; + } + + li { + width: 100%; + height: px2rem(136); + border-bottom: px2rem(2) solid; + border-image: linear-gradient(225deg, rgba(248, 210, 150, 1), rgba(236, 205, 129, 1), rgba(151, 86, 27, 1), rgba(224, 171, 40, 1)) 2 2; + box-sizing: border-box; + overflow: hidden; + padding: 0 px2rem(20) 0 px2rem(22); + + .num { + float: left; + width: px2rem(70); + line-height: px2rem(136); + height: 100%; + color: #FFFA8B; + font-size: px2rem(24); + font-weight: 400; + margin-right: px2rem(30); + } + + .tx { + display: block; + float: left; + margin-top: px2rem(26); + margin-right: px2rem(10); + border-radius: 50%; + width: px2rem(84); + height: px2rem(84); + } + + .nick { + width: 3rem; + line-height: px2rem(136); + height: 100%; + float: left; + color: #FFFA8B; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: px2rem(32); + font-weight: 500; + } + + .right { + float: right; + text-align: right; + + p { + color: #B4B04F; + font-size: px2rem(24); + font-weight: 400; + margin-bottom: px2rem(20); + margin-top: px2rem(30); + } + + span { + color: #FFFA8B; + font-size: px2rem(32); + font-weight: 400; + display: block; + } + } + } + } + + .my { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + height: px2rem(136); + box-sizing: border-box; + // overflow: hidden; + padding: 0 px2rem(20) 0 px2rem(22); + background: #221A58; + border-radius: px2rem(20) px2rem(20) 0 0; + z-index: 8; + + .rank { + position: absolute; + top: px2rem(-46); + left: 50%; + transform: translateX(-50%); + width: px2rem(318); + height: px2rem(92); + line-height: px2rem(92); + background: url(../images/myListBg.png) no-repeat; + background-size: 100% 100%; + text-align: center; + color: #FFFA8B; + font-size: px2rem(24); + font-weight: 500; + } + + .num { + float: left; + width: px2rem(70); + line-height: px2rem(136); + height: 100%; + color: #FFFA8B; + font-size: px2rem(24); + font-weight: 400; + margin-right: px2rem(30); + white-space: nowrap; + } + + .tx { + display: block; + float: left; + margin-top: px2rem(26); + margin-right: px2rem(10); + border-radius: 50%; + width: px2rem(84); + height: px2rem(84); + } + + .nick { + width: 3rem; + line-height: px2rem(136); + height: 100%; + float: left; + color: #FFFA8B; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: px2rem(32); + font-weight: 500; + } + + .right { + float: right; + text-align: right; + + p { + color: #B4B04F; + font-size: px2rem(24); + font-weight: 400; + margin-bottom: px2rem(20); + margin-top: px2rem(30); + } + + span { + color: #FFFA8B; + font-size: px2rem(32); + font-weight: 400; + display: block; + margin-top: 0.75rem; + } + } + } +} + +.exp_pub { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 9; + background: rgba(0, 0, 0, .46); + display: none; + + .exp_pub_in { + width: px2rem(686); + height: px2rem(1286); + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: url(../images/expRule.png) no-repeat; + background-size: 100% 100%; + padding-top: px2rem(70); + box-sizing: border-box; + + .title { + width: px2rem(336); + height: px2rem(104); + line-height: px2rem(104); + text-align: center; + color: #E1D6FF; + font-size: px2rem(32); + font-weight: 600; + top: px2rem(-52); + position: absolute; + left: 50%; + transform: translateX(-50%); + background: url(../images/expTitle.png) no-repeat; + background-size: 100% 100%; + } + + h3 { + width: 100%; + text-align: center; + color: #C9C7D3; + font-size: px2rem(24); + font-weight: 400; + margin-bottom: px2rem(40); + } + + .box { + width: px2rem(564); + height: px2rem(1074); + background: linear-gradient(180deg, #473891 0%, #221A58 100%); + border-radius: px2rem(16); + border: px2rem(4) solid #C3B7FF; + margin: 0 auto; + overflow-y: scroll; + + &::-webkit-scrollbar { + display: none; + } + + .top { + width: px2rem(564); + height: px2rem(120); + line-height: px2rem(120); + color: #A897FF; + font-size: px2rem(32); + font-weight: 600; + display: flex; + + div { + text-align: center; + } + + .l { + flex: 3; + border-right: px2rem(4) solid #C3B7FF; + border-bottom: px2rem(4) solid #C3B7FF; + } + + .r { + flex: 7; + border-bottom: px2rem(4) solid #C3B7FF; + } + } + + .bottom { + width: px2rem(564); + height: px2rem(104); + line-height: px2rem(104); + color: #C3B7FF; + font-size: px2rem(32); + font-weight: 600; + display: flex; + + div { + text-align: center; + } + + .l { + flex: 3; + border-right: px2rem(4) solid #C3B7FF; + border-bottom: px2rem(4) solid #C3B7FF; + } + + .r { + flex: 7; + border-bottom: px2rem(4) solid #C3B7FF; + color: #C9C7D3; + } + } + } + } +} + +.rule { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 9; + background: rgba(0, 0, 0, .46); + display: none; + + .rule_in { + width: px2rem(686); + height: px2rem(1026); + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: url(../images/ruleBg.png) no-repeat; + background-size: 100% 100%; + padding-top: px2rem(70); + box-sizing: border-box; + overflow: hidden; + + .tab { + width: px2rem(408); + height: px2rem(68); + line-height: px2rem(68); + display: flex; + justify-content: space-between; + margin: 0 auto; + + div { + text-align: center; + width: px2rem(184); + font-size: px2rem(32); + font-weight: 400; + border-radius: px2rem(16); + white-space: nowrap; + } + + .stab1 { + background: #857277; + color: #B9A084; + } + + .stab2 { + background: #493D9A; + color: #8377CB; + } + + .act1 { + background: linear-gradient(135deg, #F8BA47 0%, #FFF297 100%); + color: #DC7400; + font-weight: 500; + } + + .act2 { + background: linear-gradient(135deg, #67309F 0%, #AF7ADC 100%); + color: #BEB4FF; + font-weight: 500; + } + } + + .box { + width: px2rem(620); + height: 10.6rem; + overflow-y: scroll; + margin: px2rem(40) auto 0; + + &::-webkit-scrollbar { + display: none; + } + + img { + width: px2rem(620); + display: block; + } + + .img1 { + height: px2rem(2354); + } + + .img2 { + height: px2rem(3280); + display: none; + } + } + } +} + +// 英语 +.english { + .giftBox .textBox .p1 { + width: 70%; + margin-left: 2rem; + padding-right: 0; + line-height: 0.34rem; + } + + .giftBox .giftList div .exp { + font-size: px2rem(20); + } + + .giftBox .giftList div p { + font-size: px2rem(26); + } + + .rule .rule_in .tab { + width: 7.44rem; + + div { + width: 3.5rem; + font-size: px2rem(25); + } + } + + .listBox2 .content1 { + font-size: px2rem(22); + width: px2rem(600); + } + + .listBox2 .my .num { + margin-right: 0.9rem; + } + + .listBox2 .my { + .rank { + display: none; + } + } +} + +// 阿拉伯 +.arabic { + .header .tiem { + top: 6.1rem; + } + + .header .ruleIcon { + text-indent: -13px; + } + + .giftBox .textBox .p1 { + width: 75%; + padding-right: 0; + white-space: nowrap; + font-size: px2rem(16); + } + + .giftBox .giftList div .exp { + font-size: px2rem(22); + } + + .listBox .expBox { + background: url(../images/boxBg2.png) no-repeat; + background-size: 100% 100%; + } + + .listBox .expBox .bottom .r .but { + float: right; + white-space: nowrap; + font-size: px2rem(19); + margin-left: 0; + margin-right: 0.2rem; + } + + .listBox .expBox .bottom .r .gift_sbox { + float: right; + } + + .listBox .expBox .bottom .l { + margin-right: 0.05rem; + margin-left: 0.1rem; + font-size: px2rem(24); + } + + .listBox .expBox .my .tx { + float: right; + } + + .listBox .expBox .my .user { + float: right; + } + + .listBox .expBox .my .user .lineBox .line { + left: auto; + right: 0; + } + + .rule .rule_in .tab div { + font-size: px2rem(25); + } + + .listBox2 .my { + .rank { + display: none; + } + + .num { + float: right; + margin-right: 0; + margin-left: 0.6rem; + } + + .tx { + float: right; + margin-right: 0; + margin-left: 0.3rem; + } + + .nick { + float: right; + } + + .right { + float: left; + } + } + + .listBox2 ul li { + .right { + float: left; + text-align: left; + } + + .nick { + float: right; + } + + .tx { + float: right; + margin-left: 0.2rem; + } + + .num { + float: right; + margin-right: 0; + margin-left: 0rem; + } + } + .listBox2 .topReward .listRule{ + right: 0.3rem; + } +} \ No newline at end of file diff --git a/view/molistar/activity/exp/images/VIP.png b/view/molistar/activity/exp/images/VIP.png new file mode 100644 index 00000000..907697c6 Binary files /dev/null and b/view/molistar/activity/exp/images/VIP.png differ diff --git a/view/molistar/activity/exp/images/bigGold.png b/view/molistar/activity/exp/images/bigGold.png new file mode 100644 index 00000000..2a74b41a Binary files /dev/null and b/view/molistar/activity/exp/images/bigGold.png differ diff --git a/view/molistar/activity/exp/images/boxBg.png b/view/molistar/activity/exp/images/boxBg.png new file mode 100644 index 00000000..86532177 Binary files /dev/null and b/view/molistar/activity/exp/images/boxBg.png differ diff --git a/view/molistar/activity/exp/images/boxBg2.png b/view/molistar/activity/exp/images/boxBg2.png new file mode 100644 index 00000000..5610fde3 Binary files /dev/null and b/view/molistar/activity/exp/images/boxBg2.png differ diff --git a/view/molistar/activity/exp/images/dam.png b/view/molistar/activity/exp/images/dam.png new file mode 100644 index 00000000..1b3c9388 Binary files /dev/null and b/view/molistar/activity/exp/images/dam.png differ diff --git a/view/molistar/activity/exp/images/expIcon.png b/view/molistar/activity/exp/images/expIcon.png new file mode 100644 index 00000000..ab73ffb3 Binary files /dev/null and b/view/molistar/activity/exp/images/expIcon.png differ diff --git a/view/molistar/activity/exp/images/expRule.png b/view/molistar/activity/exp/images/expRule.png new file mode 100644 index 00000000..956d1893 Binary files /dev/null and b/view/molistar/activity/exp/images/expRule.png differ diff --git a/view/molistar/activity/exp/images/expTitle.png b/view/molistar/activity/exp/images/expTitle.png new file mode 100644 index 00000000..fcb0a068 Binary files /dev/null and b/view/molistar/activity/exp/images/expTitle.png differ diff --git a/view/molistar/activity/exp/images/giftBg.png b/view/molistar/activity/exp/images/giftBg.png new file mode 100644 index 00000000..ae6b3fda Binary files /dev/null and b/view/molistar/activity/exp/images/giftBg.png differ diff --git a/view/molistar/activity/exp/images/giftBg_ar.png b/view/molistar/activity/exp/images/giftBg_ar.png new file mode 100644 index 00000000..20b73b88 Binary files /dev/null and b/view/molistar/activity/exp/images/giftBg_ar.png differ diff --git a/view/molistar/activity/exp/images/giftBg_en.png b/view/molistar/activity/exp/images/giftBg_en.png new file mode 100644 index 00000000..73fca542 Binary files /dev/null and b/view/molistar/activity/exp/images/giftBg_en.png differ diff --git a/view/molistar/activity/exp/images/giftList1.png b/view/molistar/activity/exp/images/giftList1.png new file mode 100644 index 00000000..5b708e87 Binary files /dev/null and b/view/molistar/activity/exp/images/giftList1.png differ diff --git a/view/molistar/activity/exp/images/giftList1_ar.png b/view/molistar/activity/exp/images/giftList1_ar.png new file mode 100644 index 00000000..c4536906 Binary files /dev/null and b/view/molistar/activity/exp/images/giftList1_ar.png differ diff --git a/view/molistar/activity/exp/images/giftList1_en.png b/view/molistar/activity/exp/images/giftList1_en.png new file mode 100644 index 00000000..c4536906 Binary files /dev/null and b/view/molistar/activity/exp/images/giftList1_en.png differ diff --git a/view/molistar/activity/exp/images/giftList2.png b/view/molistar/activity/exp/images/giftList2.png new file mode 100644 index 00000000..c8abe5bd Binary files /dev/null and b/view/molistar/activity/exp/images/giftList2.png differ diff --git a/view/molistar/activity/exp/images/giftList2_ar.png b/view/molistar/activity/exp/images/giftList2_ar.png new file mode 100644 index 00000000..dba2035e Binary files /dev/null and b/view/molistar/activity/exp/images/giftList2_ar.png differ diff --git a/view/molistar/activity/exp/images/giftList2_en.png b/view/molistar/activity/exp/images/giftList2_en.png new file mode 100644 index 00000000..73c990cf Binary files /dev/null and b/view/molistar/activity/exp/images/giftList2_en.png differ diff --git a/view/molistar/activity/exp/images/giftList3.png b/view/molistar/activity/exp/images/giftList3.png new file mode 100644 index 00000000..f04eb702 Binary files /dev/null and b/view/molistar/activity/exp/images/giftList3.png differ diff --git a/view/molistar/activity/exp/images/giftList3_ar.png b/view/molistar/activity/exp/images/giftList3_ar.png new file mode 100644 index 00000000..71ff3a64 Binary files /dev/null and b/view/molistar/activity/exp/images/giftList3_ar.png differ diff --git a/view/molistar/activity/exp/images/giftList3_en.png b/view/molistar/activity/exp/images/giftList3_en.png new file mode 100644 index 00000000..71ff3a64 Binary files /dev/null and b/view/molistar/activity/exp/images/giftList3_en.png differ diff --git a/view/molistar/activity/exp/images/giftList4.png b/view/molistar/activity/exp/images/giftList4.png new file mode 100644 index 00000000..1a4b1152 Binary files /dev/null and b/view/molistar/activity/exp/images/giftList4.png differ diff --git a/view/molistar/activity/exp/images/giftList4_ar.png b/view/molistar/activity/exp/images/giftList4_ar.png new file mode 100644 index 00000000..a8682152 Binary files /dev/null and b/view/molistar/activity/exp/images/giftList4_ar.png differ diff --git a/view/molistar/activity/exp/images/giftList4_en.png b/view/molistar/activity/exp/images/giftList4_en.png new file mode 100644 index 00000000..a8682152 Binary files /dev/null and b/view/molistar/activity/exp/images/giftList4_en.png differ diff --git a/view/molistar/activity/exp/images/giftListBg.png b/view/molistar/activity/exp/images/giftListBg.png new file mode 100644 index 00000000..5c341ec4 Binary files /dev/null and b/view/molistar/activity/exp/images/giftListBg.png differ diff --git a/view/molistar/activity/exp/images/gold.png b/view/molistar/activity/exp/images/gold.png new file mode 100644 index 00000000..8b6d4717 Binary files /dev/null and b/view/molistar/activity/exp/images/gold.png differ diff --git a/view/molistar/activity/exp/images/header.png b/view/molistar/activity/exp/images/header.png new file mode 100644 index 00000000..a67aa153 Binary files /dev/null and b/view/molistar/activity/exp/images/header.png differ diff --git a/view/molistar/activity/exp/images/header_ar.png b/view/molistar/activity/exp/images/header_ar.png new file mode 100644 index 00000000..a259bef2 Binary files /dev/null and b/view/molistar/activity/exp/images/header_ar.png differ diff --git a/view/molistar/activity/exp/images/header_en.png b/view/molistar/activity/exp/images/header_en.png new file mode 100644 index 00000000..525bcf55 Binary files /dev/null and b/view/molistar/activity/exp/images/header_en.png differ diff --git a/view/molistar/activity/exp/images/line.png b/view/molistar/activity/exp/images/line.png new file mode 100644 index 00000000..7d29d5cd Binary files /dev/null and b/view/molistar/activity/exp/images/line.png differ diff --git a/view/molistar/activity/exp/images/listBox.png b/view/molistar/activity/exp/images/listBox.png new file mode 100644 index 00000000..3fb8490a Binary files /dev/null and b/view/molistar/activity/exp/images/listBox.png differ diff --git a/view/molistar/activity/exp/images/listBox2.png b/view/molistar/activity/exp/images/listBox2.png new file mode 100644 index 00000000..d748ab56 Binary files /dev/null and b/view/molistar/activity/exp/images/listBox2.png differ diff --git a/view/molistar/activity/exp/images/logo.png b/view/molistar/activity/exp/images/logo.png new file mode 100644 index 00000000..c2e895f8 Binary files /dev/null and b/view/molistar/activity/exp/images/logo.png differ diff --git a/view/molistar/activity/exp/images/myListBg.png b/view/molistar/activity/exp/images/myListBg.png new file mode 100644 index 00000000..bb7bd2e7 Binary files /dev/null and b/view/molistar/activity/exp/images/myListBg.png differ diff --git a/view/molistar/activity/exp/images/qp.png b/view/molistar/activity/exp/images/qp.png new file mode 100644 index 00000000..537d1181 Binary files /dev/null and b/view/molistar/activity/exp/images/qp.png differ diff --git a/view/molistar/activity/exp/images/rule1.png b/view/molistar/activity/exp/images/rule1.png new file mode 100644 index 00000000..a302df6d Binary files /dev/null and b/view/molistar/activity/exp/images/rule1.png differ diff --git a/view/molistar/activity/exp/images/rule1_ar.png b/view/molistar/activity/exp/images/rule1_ar.png new file mode 100644 index 00000000..340fdb2f Binary files /dev/null and b/view/molistar/activity/exp/images/rule1_ar.png differ diff --git a/view/molistar/activity/exp/images/rule1_en.png b/view/molistar/activity/exp/images/rule1_en.png new file mode 100644 index 00000000..c9407d93 Binary files /dev/null and b/view/molistar/activity/exp/images/rule1_en.png differ diff --git a/view/molistar/activity/exp/images/rule2.png b/view/molistar/activity/exp/images/rule2.png new file mode 100644 index 00000000..6c7718de Binary files /dev/null and b/view/molistar/activity/exp/images/rule2.png differ diff --git a/view/molistar/activity/exp/images/rule2_ar.png b/view/molistar/activity/exp/images/rule2_ar.png new file mode 100644 index 00000000..0f075879 Binary files /dev/null and b/view/molistar/activity/exp/images/rule2_ar.png differ diff --git a/view/molistar/activity/exp/images/rule2_en.png b/view/molistar/activity/exp/images/rule2_en.png new file mode 100644 index 00000000..404b672b Binary files /dev/null and b/view/molistar/activity/exp/images/rule2_en.png differ diff --git a/view/molistar/activity/exp/images/ruleBg.png b/view/molistar/activity/exp/images/ruleBg.png new file mode 100644 index 00000000..c4a9c359 Binary files /dev/null and b/view/molistar/activity/exp/images/ruleBg.png differ diff --git a/view/molistar/activity/exp/images/rule_iconBg.png b/view/molistar/activity/exp/images/rule_iconBg.png new file mode 100644 index 00000000..45f36cc5 Binary files /dev/null and b/view/molistar/activity/exp/images/rule_iconBg.png differ diff --git a/view/molistar/activity/exp/images/s-giftBg.png b/view/molistar/activity/exp/images/s-giftBg.png new file mode 100644 index 00000000..e4871695 Binary files /dev/null and b/view/molistar/activity/exp/images/s-giftBg.png differ diff --git a/view/molistar/activity/exp/images/tab1.png b/view/molistar/activity/exp/images/tab1.png new file mode 100644 index 00000000..1d39cb9d Binary files /dev/null and b/view/molistar/activity/exp/images/tab1.png differ diff --git a/view/molistar/activity/exp/images/tab2.png b/view/molistar/activity/exp/images/tab2.png new file mode 100644 index 00000000..9994c6ba Binary files /dev/null and b/view/molistar/activity/exp/images/tab2.png differ diff --git a/view/molistar/activity/exp/images/textBox.png b/view/molistar/activity/exp/images/textBox.png new file mode 100644 index 00000000..2ebe7aa0 Binary files /dev/null and b/view/molistar/activity/exp/images/textBox.png differ diff --git a/view/molistar/activity/exp/images/title.png b/view/molistar/activity/exp/images/title.png new file mode 100644 index 00000000..68c68cfe Binary files /dev/null and b/view/molistar/activity/exp/images/title.png differ diff --git a/view/molistar/activity/exp/images/top1.png b/view/molistar/activity/exp/images/top1.png new file mode 100644 index 00000000..358001dd Binary files /dev/null and b/view/molistar/activity/exp/images/top1.png differ diff --git a/view/molistar/activity/exp/images/top2.png b/view/molistar/activity/exp/images/top2.png new file mode 100644 index 00000000..9a36e20b Binary files /dev/null and b/view/molistar/activity/exp/images/top2.png differ diff --git a/view/molistar/activity/exp/images/top3.png b/view/molistar/activity/exp/images/top3.png new file mode 100644 index 00000000..c8ac2015 Binary files /dev/null and b/view/molistar/activity/exp/images/top3.png differ diff --git a/view/molistar/activity/exp/images/topReward.png b/view/molistar/activity/exp/images/topReward.png new file mode 100644 index 00000000..9b128e85 Binary files /dev/null and b/view/molistar/activity/exp/images/topReward.png differ diff --git a/view/molistar/activity/exp/images/topReward_ar.png b/view/molistar/activity/exp/images/topReward_ar.png new file mode 100644 index 00000000..8b23c542 Binary files /dev/null and b/view/molistar/activity/exp/images/topReward_ar.png differ diff --git a/view/molistar/activity/exp/images/topReward_en.png b/view/molistar/activity/exp/images/topReward_en.png new file mode 100644 index 00000000..bc411f00 Binary files /dev/null and b/view/molistar/activity/exp/images/topReward_en.png differ diff --git a/view/molistar/activity/exp/images/travel/back.png b/view/molistar/activity/exp/images/travel/back.png new file mode 100644 index 00000000..2b3812da Binary files /dev/null and b/view/molistar/activity/exp/images/travel/back.png differ diff --git a/view/molistar/activity/exp/images/travel/backB.png b/view/molistar/activity/exp/images/travel/backB.png new file mode 100644 index 00000000..92e190c7 Binary files /dev/null and b/view/molistar/activity/exp/images/travel/backB.png differ diff --git a/view/molistar/activity/exp/images/ts.png b/view/molistar/activity/exp/images/ts.png new file mode 100644 index 00000000..d8c2c876 Binary files /dev/null and b/view/molistar/activity/exp/images/ts.png differ diff --git a/view/molistar/activity/exp/images/ulBg.png b/view/molistar/activity/exp/images/ulBg.png new file mode 100644 index 00000000..d6cf7082 Binary files /dev/null and b/view/molistar/activity/exp/images/ulBg.png differ diff --git a/view/molistar/activity/exp/images/why.png b/view/molistar/activity/exp/images/why.png new file mode 100644 index 00000000..06e5d48b Binary files /dev/null and b/view/molistar/activity/exp/images/why.png differ diff --git a/view/molistar/activity/exp/images/xz.png b/view/molistar/activity/exp/images/xz.png new file mode 100644 index 00000000..542ec1d6 Binary files /dev/null and b/view/molistar/activity/exp/images/xz.png differ diff --git a/view/molistar/activity/exp/images/zj.png b/view/molistar/activity/exp/images/zj.png new file mode 100644 index 00000000..5466fb78 Binary files /dev/null and b/view/molistar/activity/exp/images/zj.png differ diff --git a/view/molistar/activity/exp/index.html b/view/molistar/activity/exp/index.html new file mode 100644 index 00000000..87ff61af --- /dev/null +++ b/view/molistar/activity/exp/index.html @@ -0,0 +1,334 @@ + + + +
+ + +头饰
+气泡
+头饰
+*50
+座駕
+*100
+勳章
+*300
+氣泡
+*500
+頭飾
+*1000
+*1500
+勳章
+*2000
+${langReplace(localLang.demoModule.text37)}
+ ${unitProcessingAr(res.score, 1)} +