diff --git a/view/molistar/modules/guildAr/css/guildInfoSet.css b/view/molistar/modules/guildAr/css/guildInfoSet.css index b2ce18c0..8c06e6e7 100644 --- a/view/molistar/modules/guildAr/css/guildInfoSet.css +++ b/view/molistar/modules/guildAr/css/guildInfoSet.css @@ -4,7 +4,7 @@ body { height: 17.78667rem; background: #F5F7F9; box-sizing: border-box; - padding: 0 0.42667rem; + padding: 1.73333rem 0rem 0 0; } .back { @@ -30,91 +30,137 @@ body { top: 54%; } -.nick { - margin-top: 2.93333rem; +input { + background: none; + outline: none; + bottom: none; +} + +h3 { color: #333333; font-size: 0.42667rem; - font-weight: 800; + margin-bottom: 0.57333rem; + font-weight: 500; + margin-left: 0.42667rem; + text-align: left; } -.nick input { - border: none; - outline: none; - background: #F5F7F9; - width: 5.4rem; - height: 0.66667rem; - border-radius: 0.66667rem; - box-sizing: border-box; - color: #333; - font-size: 0.42667rem; - box-sizing: border-box; - padding-left: 0.13333rem; - margin-bottom: 0.74667rem; -} - -.nick input::placeholder { - color: #515665; -} - -.bg { - width: 100%; - height: 2.26667rem; +.name { + width: 9.01333rem; + height: 1.01333rem; + line-height: 1.01333rem; position: relative; + margin: 0 auto 0.85333rem; + background: #fff; + border-radius: 0.09333rem; } -.bg span { +.name input { + position: absolute; + left: 0; + top: 0; + width: 80%; + height: 100%; + color: #3C3C3C; + font-size: 0.37333rem; + font-weight: 400; + box-sizing: border-box; + padding-left: 0.37333rem; +} + +.name span { + position: absolute; + right: 0.50667rem; + top: 0; + height: 100%; + color: #E13B3F; + font-size: 0.37333rem; + font-weight: 400; +} + +.name .act { + color: #67D2A6; +} + +.background { + position: relative; + width: 6.66667rem; + height: 4rem; + margin-bottom: 0.89333rem; +} + +.background img { display: inline-block; - color: #333; - font-size: 0.42667rem; - line-height: 2.26667rem; - font-weight: 800; + margin-left: 0.42667rem; + margin-right: 0.22667rem; + width: 4rem; + height: 4rem; + border-radius: 0.06667rem; } -.bg img { - width: 2.26667rem; - height: 2.26667rem; +.background span { + color: #E13B3F; + font-size: 0.37333rem; + font-weight: 400; + margin-top: 3.65333rem; + display: inline-block; +} + +.background input { position: absolute; - top: 0; - left: 2.53333rem; - z-index: 1; - border-radius: 0.13333rem; + right: 1.2rem; + bottom: -0.2rem; + width: 0.93333rem; + height: 0.8rem; } -.bg .upload { - width: 2.26667rem; - height: 2.26667rem; +.background .act { + color: #67D2A6; +} + +.account { + width: 9.01333rem; + height: 1.01333rem; + line-height: 1.01333rem; + position: relative; + margin: 0 auto 0.85333rem; + background: #fff; + border-radius: 0.09333rem; +} + +.account i { + font-style: normal; + color: #3C3C3C; + font-weight: 400; + font-size: 0.37333rem; + height: 100%; position: absolute; + left: 0.26667rem; +} + +.account input { + position: absolute; + left: 2.13333rem; top: 0; - left: 2.53333rem; - z-index: 2; + height: 100%; + color: #000; + font-size: 0.37333rem; + font-weight: 500; + box-sizing: border-box; + padding-left: 0.46667rem; + width: 60%; } -.boxBut { - width: 7.06667rem; - height: 0.93333rem; - margin: 1.73333rem auto 0; - display: flex; - justify-content: space-between; +.account span { + position: absolute; + right: 0.50667rem; + top: 0; + height: 100%; + color: #E13B3F; + font-size: 0.37333rem; + font-weight: 400; } -.boxBut .close { - width: 2.88rem; - height: 0.93333rem; - line-height: 0.93333rem; - border-radius: 0.93333rem; - text-align: center; - color: #fff; - font-size: 0.42667rem; - background: #CCCBCE; -} - -.boxBut .ok { - width: 2.88rem; - height: 0.93333rem; - line-height: 0.93333rem; - border-radius: 0.93333rem; - text-align: center; - color: #fff; - font-size: 0.42667rem; - background: linear-gradient(90deg, #867FFF, #66E3FF); +.account .act { + color: #67D2A6; } diff --git a/view/molistar/modules/guildAr/css/guildInfoSet.scss b/view/molistar/modules/guildAr/css/guildInfoSet.scss index 8cf46924..f31a6b5c 100644 --- a/view/molistar/modules/guildAr/css/guildInfoSet.scss +++ b/view/molistar/modules/guildAr/css/guildInfoSet.scss @@ -8,7 +8,7 @@ body { height: px2rem(1334); background: #F5F7F9; box-sizing: border-box; - padding: 0 px2rem(32); + padding: px2rem(130) px2rem(0) 0 0; } .back { @@ -34,91 +34,138 @@ body { } } -.nick { - margin-top: px2rem(220); +input { + background: none; + outline: none; + bottom: none; +} + +h3 { color: #333333; font-size: px2rem(32); - font-weight: 800; + margin-bottom: px2rem(43); + font-weight: 500; + margin-left: px2rem(32); + text-align: left; +} + +.name { + width: px2rem(676); + height: px2rem(76); + line-height: px2rem(76); + position: relative; + margin: 0 auto px2rem(64); + background: #fff; + border-radius: px2rem(7); input { - border: none; - outline: none; - background: #F5F7F9; - width: 5.4rem; - height: px2rem(50); - border-radius: px2rem(50); + position: absolute; + left: 0; + top: 0; + width: 80%; + height: 100%; + color: #3C3C3C; + font-size: px2rem(28); + font-weight: 400; box-sizing: border-box; - color: #333; - font-size: px2rem(32); - box-sizing: border-box; - padding-left: px2rem(10); - margin-bottom: px2rem(56); - - &::placeholder { - color: #515665; - } + padding-left: px2rem(28); } -} - -.bg { - width: 100%; - height: px2rem(170); - position: relative; span { - display: inline-block; - color: #333; - font-size: px2rem(32); - line-height: px2rem(170); - font-weight: 800; + position: absolute; + right: px2rem(38); + top: 0; + height: 100%; + color: #E13B3F; + font-size: px2rem(28); + font-weight: 400; } - img { - width: px2rem(170); - height: px2rem(170); - position: absolute; - top: 0; - left: px2rem(190); - z-index: 1; - border-radius: px2rem(10); - } - - .upload { - width: px2rem(170); - height: px2rem(170); - position: absolute; - top: 0; - left: px2rem(190); - z-index: 2; + .act { + color: #67D2A6; } } -.boxBut { - width: px2rem(530); - height: px2rem(70); - margin: px2rem(130) auto 0; - display: flex; - justify-content: space-between; +.background { + position: relative; + width: px2rem(500); + height: px2rem(300); + margin-bottom: px2rem(67); - .close { - width: px2rem(216); - height: px2rem(70); - line-height: px2rem(70); - border-radius: px2rem(70); - text-align: center; - color: #fff; - font-size: px2rem(32); - background: #CCCBCE; + img { + display: inline-block; + margin-left: px2rem(32); + margin-right: px2rem(17); + width: px2rem(300); + height: px2rem(300); + border-radius: px2rem(5); } - .ok { - width: px2rem(216); - height: px2rem(70); - line-height: px2rem(70); - border-radius: px2rem(70); - text-align: center; - color: #fff; - font-size: px2rem(32); - background: linear-gradient(90deg, #867FFF, #66E3FF); + span { + color: #E13B3F; + font-size: px2rem(28); + font-weight: 400; + margin-top: px2rem(274); + display: inline-block; + + } + + input { + position: absolute; + right: 1.2rem; + bottom: -0.2rem; + width: px2rem(70); + height: px2rem(60); + } + + .act { + color: #67D2A6; + } +} + +.account { + width: px2rem(676); + height: px2rem(76); + line-height: px2rem(76); + position: relative; + margin: 0 auto px2rem(64); + background: #fff; + border-radius: px2rem(7); + + i { + font-style: normal; + color: #3C3C3C; + font-weight: 400; + font-size: px2rem(28); + height: 100%; + position: absolute; + left: px2rem(20); + } + + input { + position: absolute; + left: px2rem(160); + top: 0; + height: 100%; + color: #000; + font-size: px2rem(28); + font-weight: 500; + box-sizing: border-box; + padding-left: px2rem(35); + width: 60%; + } + + span { + position: absolute; + right: px2rem(38); + top: 0; + height: 100%; + color: #E13B3F; + font-size: px2rem(28); + font-weight: 400; + } + + .act { + color: #67D2A6; } } \ No newline at end of file diff --git a/view/molistar/modules/guildAr/css/index.css b/view/molistar/modules/guildAr/css/index.css index f2120ea2..15fa8899 100644 --- a/view/molistar/modules/guildAr/css/index.css +++ b/view/molistar/modules/guildAr/css/index.css @@ -94,86 +94,6 @@ body { top: 5.64rem; } -.header .adminSet { - padding: 0rem 0.21333rem; - box-sizing: border-box; - height: 0.58667rem; - line-height: 0.58667rem; - color: #fff; - font-size: 0.42667rem; - font-weight: 400; - background: linear-gradient(90deg, rgba(82, 59, 85, 0.98), rgba(21, 5, 16, 0.98)); - border-radius: 0.58667rem 0px 0px 0.58667rem; - position: absolute; - right: 0; - top: 2.45333rem; - display: none; -} - -.header .guildInfoSet { - padding: 0rem 0.21333rem; - box-sizing: border-box; - height: 0.58667rem; - line-height: 0.58667rem; - color: #fff; - font-size: 0.42667rem; - font-weight: 400; - background: linear-gradient(90deg, rgba(82, 59, 85, 0.7), rgba(21, 5, 16, 0.7)); - border-radius: 0.58667rem 0px 0px 0.58667rem; - position: absolute; - right: 0; - top: 3.18667rem; - display: none; -} - -.header .memberFlow { - width: 2.77333rem; - height: 0.74667rem; - line-height: 0.74667rem; - text-align: center; - color: #fff; - font-size: 0.42667rem; - font-weight: 400; - background: linear-gradient(90deg, rgba(128, 146, 255, 0.6) 0%, rgba(108, 208, 255, 0.6) 100%); - border-radius: 0.18667rem; - position: absolute; - left: 2.08rem; - top: 6.21333rem; - display: none; -} - -.header .memberFlowMy { - width: 2.77333rem; - height: 0.74667rem; - line-height: 0.74667rem; - text-align: center; - color: #fff; - font-size: 0.42667rem; - font-weight: 400; - background: linear-gradient(90deg, rgba(128, 146, 255, 0.6) 0%, rgba(108, 208, 255, 0.6) 100%); - border-radius: 0.18667rem 0 0 0.18667rem; - position: absolute; - right: 0rem; - top: 2.90667rem; - display: none; -} - -.header .inveMember { - width: 2.77333rem; - height: 0.74667rem; - line-height: 0.74667rem; - text-align: center; - color: #fff; - font-size: 0.42667rem; - font-weight: 400; - background: linear-gradient(90deg, rgba(128, 146, 255, 0.6) 0%, rgba(108, 208, 255, 0.6) 100%); - border-radius: 0.18667rem; - position: absolute; - right: 2.08rem; - top: 6.21333rem; - display: none; -} - .header .guildNick { width: 100%; position: absolute; @@ -186,11 +106,50 @@ body { display: none; } +.header .headerBox { + width: 8.86667rem; + display: flex; + justify-content: center; + flex-wrap: wrap; + position: absolute; + top: 6.37333rem; + left: 50%; + transform: translateX(-50%); +} + +.header .headerBox div { + width: 3.62667rem; + height: 0.74667rem; + line-height: 0.74667rem; + color: #fff; + font-size: 0.34667rem; + text-align: center; + background: linear-gradient(90deg, rgba(128, 146, 255, 0.8) 0%, rgba(108, 208, 255, 0.8) 100%); + border-radius: 0.18667rem; + margin-bottom: 0.33333rem; + overflow: hidden; + white-space: nowrap; + margin: 0 auto 0.33333rem; +} + +.header .headerBox div img { + width: 0.42667rem; + height: 0.42667rem; + margin-right: 0.17333rem; + float: left; + margin-top: 0.16rem; + margin-left: 0.38667rem; +} + +.header .headerBox div span { + float: left; +} + .guildList { width: 9.25333rem; - height: 13.33333rem; + height: 11rem; border-radius: 0.26667rem; - margin: -1.66667rem auto 0rem; + margin: -0.3rem auto 0rem; position: relative; background: #fff; overflow: hidden; @@ -260,7 +219,7 @@ body { .guildList ul { width: 100%; - height: 11.8rem; + height: 11rem; margin: 0.52rem auto 0; overflow-y: scroll; } @@ -334,7 +293,7 @@ body { .guildList ul li .but { width: 1.17333rem; height: 0.56rem; - background: #7F95FF; + background: #62D0A8; border-radius: 0.56rem; position: absolute; right: 0.34667rem; @@ -342,7 +301,7 @@ body { text-align: center; color: #fff; line-height: 0.56rem; - font-size: 0.34667rem; + font-size: 0.29333rem; font-weight: 400; } @@ -434,3 +393,92 @@ body { background: linear-gradient(90deg, #53C7D4, #7C5EFD); color: #fff; } + +.inveMember { + width: 4.08rem; + height: 1.28rem; + border-radius: 1.28rem; + line-height: 1.22667rem; + text-align: center; + background: linear-gradient(90deg, #7CDD9B, #62D0A8); + color: #fff; + font-size: 0.45333rem; + position: fixed; + left: 50%; + transform: translateX(-50%); + z-index: 5; + bottom: 1.06667rem; +} + +.inveMember img { + display: inline-block; + width: 0.50667rem; + height: 0.56rem; + vertical-align: middle; + margin-top: -0.1rem; +} + +.inveMember span { + display: inline-block; + vertical-align: middle; +} + +.arabic .guildList .top img { + right: 0.4rem; +} + +.arabic .guildList .top input { + padding-right: 0.5rem; +} + +.arabic .guildList ul li .but { + left: 0.34667rem; + right: auto; +} + +.arabic .guildList ul li .chairman, +.arabic .guildList ul li .administrator { + right: 0.1rem; + left: auto; +} + +.arabic .guildList ul li .tx, +.arabic .guildList ul li .user { + float: right; +} + +.arabic .guildList ul li .user { + padding-right: 0.2rem; +} + +.arabic .header .headerBox div img { + float: right; +} + +.arabic .header .headerBox div span { + float: right; +} + +.english .header .headerBox { + width: 8rem; +} + +.english .header .headerBox div { + width: 3.9rem; +} + +.english .header .headerBox div span { + font-size: 0.21333rem; +} + +.arabic .header .headerBox { + width: 8rem; +} + +.arabic .header .headerBox div { + width: 3.9rem; +} + +.arabic .header .headerBox div span { + font-size: 0.29333rem; +} diff --git a/view/molistar/modules/guildAr/css/index.scss b/view/molistar/modules/guildAr/css/index.scss index c33a59fc..f0f6fc84 100644 --- a/view/molistar/modules/guildAr/css/index.scss +++ b/view/molistar/modules/guildAr/css/index.scss @@ -98,85 +98,85 @@ body { top: px2rem(423); } - .adminSet { - padding: px2rem(0) px2rem(16); - box-sizing: border-box; - height: px2rem(44); - line-height: px2rem(44); - color: #fff; - font-size: px2rem(32); - font-weight: 400; - background: linear-gradient(90deg, rgba(82, 59, 85, 0.98), rgba(21, 5, 16, 0.98)); - border-radius: px2rem(44) 0px 0px px2rem(44); - position: absolute; - right: 0; - top: px2rem(184); - display: none; - } + // .adminSet { + // padding: px2rem(0) px2rem(16); + // box-sizing: border-box; + // height: px2rem(44); + // line-height: px2rem(44); + // color: #fff; + // font-size: px2rem(32); + // font-weight: 400; + // background: linear-gradient(90deg, rgba(82, 59, 85, 0.98), rgba(21, 5, 16, 0.98)); + // border-radius: px2rem(44) 0px 0px px2rem(44); + // position: absolute; + // right: 0; + // top: px2rem(184); + // display: none; + // } - .guildInfoSet { - padding: px2rem(0) px2rem(16); - box-sizing: border-box; - height: px2rem(44); - line-height: px2rem(44); - color: #fff; - font-size: px2rem(32); - font-weight: 400; - background: linear-gradient(90deg, rgba(82, 59, 85, 0.7), rgba(21, 5, 16, 0.7)); - border-radius: px2rem(44) 0px 0px px2rem(44); - position: absolute; - right: 0; - top: px2rem(239); - display: none; - } + // .guildInfoSet { + // padding: px2rem(0) px2rem(16); + // box-sizing: border-box; + // height: px2rem(44); + // line-height: px2rem(44); + // color: #fff; + // font-size: px2rem(32); + // font-weight: 400; + // background: linear-gradient(90deg, rgba(82, 59, 85, 0.7), rgba(21, 5, 16, 0.7)); + // border-radius: px2rem(44) 0px 0px px2rem(44); + // position: absolute; + // right: 0; + // top: px2rem(239); + // display: none; + // } - .memberFlow { - width: px2rem(208); - height: px2rem(56); - line-height: px2rem(56); - text-align: center; - color: #fff; - font-size: px2rem(32); - font-weight: 400; - background: linear-gradient(90deg, rgba(128, 146, 255, .6) 0%, rgba(108, 208, 255, .6) 100%); - border-radius: px2rem(14); - position: absolute; - left: px2rem(156); - top: px2rem(466); - display: none; - } + // .memberFlow { + // width: px2rem(208); + // height: px2rem(56); + // line-height: px2rem(56); + // text-align: center; + // color: #fff; + // font-size: px2rem(32); + // font-weight: 400; + // background: linear-gradient(90deg, rgba(128, 146, 255, .6) 0%, rgba(108, 208, 255, .6) 100%); + // border-radius: px2rem(14); + // position: absolute; + // left: px2rem(156); + // top: px2rem(466); + // display: none; + // } - .memberFlowMy { - width: px2rem(208); - height: px2rem(56); - line-height: px2rem(56); - text-align: center; - color: #fff; - font-size: px2rem(32); - font-weight: 400; - background: linear-gradient(90deg, rgba(128, 146, 255, .6) 0%, rgba(108, 208, 255, .6) 100%); - border-radius: px2rem(14) 0 0 px2rem(14); - position: absolute; - right: px2rem(0); - top: px2rem(218); - display: none; - } + // .memberFlowMy { + // width: px2rem(208); + // height: px2rem(56); + // line-height: px2rem(56); + // text-align: center; + // color: #fff; + // font-size: px2rem(32); + // font-weight: 400; + // background: linear-gradient(90deg, rgba(128, 146, 255, .6) 0%, rgba(108, 208, 255, .6) 100%); + // border-radius: px2rem(14) 0 0 px2rem(14); + // position: absolute; + // right: px2rem(0); + // top: px2rem(218); + // display: none; + // } - .inveMember { - width: px2rem(208); - height: px2rem(56); - line-height: px2rem(56); - text-align: center; - color: #fff; - font-size: px2rem(32); - font-weight: 400; - background: linear-gradient(90deg, rgba(128, 146, 255, .6) 0%, rgba(108, 208, 255, .6) 100%); - border-radius: px2rem(14); - position: absolute; - right: px2rem(156); - top: px2rem(466); - display: none; - } + // .inveMember { + // width: px2rem(208); + // height: px2rem(56); + // line-height: px2rem(56); + // text-align: center; + // color: #fff; + // font-size: px2rem(32); + // font-weight: 400; + // background: linear-gradient(90deg, rgba(128, 146, 255, .6) 0%, rgba(108, 208, 255, .6) 100%); + // border-radius: px2rem(14); + // position: absolute; + // right: px2rem(156); + // top: px2rem(466); + // display: none; + // } .guildNick { width: 100%; @@ -189,13 +189,53 @@ body { text-align: center; display: none; } + + .headerBox { + width: px2rem(665); + display: flex; + justify-content: center; + flex-wrap: wrap; + position: absolute; + top: px2rem(478); + // left: px2rem(93); + left: 50%; + transform: translateX(-50%); + + div { + width: px2rem(272); + height: px2rem(56); + line-height: px2rem(56); + color: #fff; + font-size: px2rem(26); + text-align: center; + background: linear-gradient(90deg, rgba(128, 146, 255, .8) 0%, rgba(108, 208, 255, .8) 100%); + border-radius: px2rem(14); + margin-bottom: px2rem(25); + overflow: hidden; + white-space: nowrap; + margin: 0 auto px2rem(25); + + img { + width: px2rem(32); + height: px2rem(32); + margin-right: px2rem(13); + float: left; + margin-top: px2rem(12); + margin-left: px2rem(29); + } + + span { + float: left; + } + } + } } .guildList { width: px2rem(694); - height: px2rem(1000); + height: 11rem; border-radius: px2rem(20); - margin: px2rem(-125) auto px2rem(0); + margin: -0.3rem auto px2rem(0); position: relative; background: #fff; overflow: hidden; @@ -265,7 +305,7 @@ body { ul { width: 100%; - height: 11.8rem; + height: 11rem; margin: px2rem(39) auto 0; overflow-y: scroll; @@ -337,7 +377,7 @@ body { .but { width: px2rem(88); height: px2rem(42); - background: #7F95FF; + background: #62D0A8; border-radius: px2rem(42); position: absolute; right: px2rem(26); @@ -345,7 +385,7 @@ body { text-align: center; color: #fff; line-height: px2rem(42); - font-size: px2rem(26); + font-size: px2rem(22); font-weight: 400; } @@ -439,4 +479,100 @@ body { } } } +} + +.inveMember { + width: px2rem(306); + height: px2rem(96); + border-radius: px2rem(96); + line-height: px2rem(92); + text-align: center; + background: linear-gradient(90deg, #7CDD9B, #62D0A8); + color: #fff; + font-size: px2rem(34); + position: fixed; + left: 50%; + transform: translateX(-50%); + z-index: 5; + bottom: px2rem(80); + + img { + display: inline-block; + width: px2rem(38); + height: px2rem(42); + vertical-align: middle; + margin-top: -0.1rem; + } + + span { + display: inline-block; + vertical-align: middle; + } +} + +.arabic { + .guildList .top img { + right: px2rem(30); + } + + .guildList .top input { + padding-right: 0.5rem; + } + + .guildList ul li .but { + left: 0.34667rem; + right: auto; + } + + .guildList ul li .chairman, + .guildList ul li .administrator { + right: 0.1rem; + left: auto; + } + + .guildList ul li .tx, + .guildList ul li .user { + float: right; + } + + .guildList ul li .user { + padding-right: 0.2rem; + } + + .header .headerBox div img { + float: right; + } + + .header .headerBox div span { + float: right; + } + +} + +.english { + .header .headerBox { + width: 8rem; + + div { + width: 3.9rem; + + span { + font-size: px2rem(16); + } + } + } +} + +.arabic { + .header .headerBox { + width: 8rem; + + div { + width: 3.9rem; + + span { + font-size: px2rem(22); + } + } + } } \ No newline at end of file diff --git a/view/molistar/modules/guildAr/css/lay-picker.min.css b/view/molistar/modules/guildAr/css/lay-picker.min.css new file mode 100644 index 00000000..a814ae0f --- /dev/null +++ b/view/molistar/modules/guildAr/css/lay-picker.min.css @@ -0,0 +1,9 @@ +/** + * + * 移动端底部抽屉选择器 + * @author yyq + * @CSDN 慕云枫 + * @date 2023-12-07 + * @version 1.5 + */ +ul,li{margin:0;padding:0}.lay-picker{position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999999999999;display:none;overflow:hidden}.lay-picker-shade{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:9}.lay-picker-container{position:absolute;left:0;bottom:0;z-index:99;width:100%;background:#fff;color:#333;font-size:17px;-webkit-transition:transform .25s;-webkit-transform:translate3d(0,100%,0);transition:transform .25s;transform:translate3d(0,100%,0)}.lay-picker-header{height:50px;line-height:50px;border-bottom:1px solid #f3f3f3;margin-bottom:1px;margin:0 15px}.lay-picker-title{text-align:center;position:absolute;top:0;left:0;z-index:9;width:100%;color:#333}.lay-picker-search{margin:0 15px;text-align:center;padding:5px 0}.lay-picker-search input{text-align:center;height:40px;line-height:40px;border:0;border-bottom:1px solid #f3f3f3;transition:all .2s;-webkit-transition:all .2s;box-shadow:none !important;font-size:14px}.lay-picker-search input:hover,.lay-picker-search input:focus{border:none !important;border-bottom:1px solid #e5e5e5 !important}.lay-picker-btn{position:relative;z-index:99}.lay-picker-cancel{color:#333}.lay-picker-confirm{float:right;color:#228fff}.lay-picker-shadowup,.lay-picker-shadowdown{height:120px;width:100%;position:absolute;left:0;z-index:50}.lay-picker-shadowup{height:115px;top:-1px;background:-webkit-linear-gradient(to bottom,#FFF,rgba(255,255,255,.6));background:linear-gradient(to bottom,#FFF,rgba(255,255,255,.6));pointer-events:none;border-bottom:1px solid #efefef}.lay-picker-shadowdown{height:130px;bottom:0;background:-webkit-linear-gradient(to top,#FFF,rgba(255,255,255,.6));background:linear-gradient(to top,#FFF,rgba(255,255,255,.6));pointer-events:none;border-top:1px solid #efefef}.lay-picker-content{position:relative;height:300px;margin:15px;overflow:hidden}.lay-picker-box{overflow:hidden}.lay-picker-box:after{display:table;height:0;clear:both;content:''}.lay-picker-list-wrap{float:left;height:300px;overflow:hidden;-webkit-transition:width .2s;transition:width .2s}.lay-picker-list-wrap ul{position:relative;padding:100px 0;margin-top:17px;-webkit-transition:transform .1s ease-out;transition:transform .1s ease-out}.lay-picker-list-wrap ul:after{position:absolute;top:0;left:0;right:0;bottom:0;z-index:55;content:''}.lay-picker-list-wrap li{line-height:50px;height:50px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.lay-picker-bottom{text-align:center;margin-top:10px;margin-bottom:30px;font-size:16px}.lay-picker-bottom-btn{border-radius:6px;display:inline-block;width:30%;height:40px;line-height:40px}.lay-picker-bottom-btn-cancel{color:#333;background:#efefef;margin-right:3%}.lay-picker-bottom-btn-confirm{color:#fff;background:#33c119} diff --git a/view/molistar/modules/guildAr/css/memberFlow.css b/view/molistar/modules/guildAr/css/memberFlow.css index 827c5eae..a7eb3781 100644 --- a/view/molistar/modules/guildAr/css/memberFlow.css +++ b/view/molistar/modules/guildAr/css/memberFlow.css @@ -38,6 +38,8 @@ body { color: #333333; font-size: 0.45333rem; font-weight: bold; + width: 100%; + text-align: center; } .back .text { @@ -50,207 +52,292 @@ body { font-size: 0.4rem; } -.timeBox { +.header { width: 9.46667rem; - height: 2.54667rem; + height: 4.18667rem; background: #fff; border-radius: 0.4rem; - margin: 2.53333rem auto 0.25333rem; - position: relative; -} - -.timeBox .line { - width: 0.02667rem; - height: 1.90667rem; - background: #D7DCE6; - position: absolute; - left: 2.92rem; - top: 50%; - transform: translateY(-50%); - border-radius: 0.02667rem; -} - -.timeBox .year { - width: 2.92rem; - position: absolute; - left: 0; - top: 0.33333rem; - color: #A4ABB2; - font-size: 0.32rem; - font-weight: bold; - text-align: center; - text-indent: -0.8rem; -} - -.timeBox .startTime { - width: 2.92rem; - position: absolute; - left: 0; - top: 0.96rem; - color: #848D9C; - font-size: 0.37333rem; - font-weight: bold; -} - -.timeBox .startTime b { - margin-right: 0.1rem; - text-indent: 0.45rem; - display: inline-block; -} - -.timeBox .startTime img { - width: 0.32rem; - height: 0.21333rem; - display: inline-block; - margin-top: 0.1rem; -} - -.timeBox .endTime { - width: 2.92rem; - position: absolute; - left: 0; - top: 1.62667rem; - color: #848D9C; - font-size: 0.37333rem; - font-weight: bold; -} - -.timeBox .endTime b { - margin-right: 0.1rem; - text-indent: 0.45rem; - display: inline-block; -} - -.timeBox .endTime img { - width: 0.32rem; - height: 0.21333rem; - display: inline-block; - margin-top: 0.1rem; -} - -.timeBox .right { - width: 5.5rem; - height: 2.54667rem; - position: absolute; - right: 0.55rem; - top: 0; - display: flex; - justify-content: space-between; -} - -.timeBox .right div { - width: 50%; - text-align: center; + margin: 2.8rem auto 0.34667rem; overflow: hidden; } -.timeBox .right div p { - color: #A4ABB2; - font-size: 0.32rem; - font-weight: bold; - margin-top: 0.53333rem; - margin-bottom: 0.33333rem; - line-height: 0.34rem; -} - -.timeBox .right div b { - color: #848D9C; - font-size: 0.37333rem; - font-weight: bold; -} - -.list { - width: 9.46667rem; - height: 12.8rem; - background: #fff; - border-radius: 0.4rem; - margin: 0.25333rem auto 0.13333rem; - overflow-y: scroll; - position: relative; - padding-top: 1.45rem; - box-sizing: border-box; -} - -.list::-webkit-scrollbar { - display: none; -} - -.list .top { - height: 1.5rem; - width: 9.46667rem; - box-sizing: border-box; - padding: 0.53333rem 0.26667rem 0; +.header .time { + width: 100%; + height: 0.53333rem; + line-height: 0.53333rem; display: flex; justify-content: space-between; - line-height: 0.4rem; + box-sizing: border-box; + margin: 0.38667rem auto 0.76rem; + text-align: center; + padding: 0 0.53333rem; + color: #848D9C; + font-size: 0.4rem; + font-weight: 500; +} + +.header .time div { + width: 3.06667rem; +} + +.header .time div b { + display: inline-block; + vertical-align: middle; +} + +.header .time div img { + width: 0.32rem; + height: 0.21333rem; + display: inline-block; + vertical-align: middle; + margin-left: 0.13333rem; +} + +.header .time span { + display: block; + width: 0.53333rem; + height: 0.05333rem; + background: #848D9C; + margin-top: 0.25rem; +} + +.header h3 { + width: 100%; + box-sizing: border-box; + padding-left: 0.65333rem; + color: #141515; + font-size: 0.45333rem; + font-weight: 500; + margin-bottom: 0.72rem; +} + +.header p { + height: 0.53333rem; + line-height: 0.53333rem; + width: 100%; + text-align: center; + color: #232424; + font-size: 0.69333rem; + font-weight: 500; +} + +.header p img { + display: inline-block; + width: 0.53333rem; + height: 0.53333rem; +} + +.box { + width: 9.46667rem; + min-height: 10.66667rem; + background: #fff; + border-radius: 0.4rem; + margin: 0 auto 0.4rem; + box-sizing: border-box; + padding: 0.49333rem 0rem 0 0.30667rem; +} + +.box h3 { + color: #141515; + font-size: 0.45333rem; + font-weight: 600; + margin: 0; + margin-left: 0.26667rem; + margin-bottom: 0.50667rem; +} + +.box h3 span { + display: inline-block; + width: 0.06667rem; + height: 0.37333rem; + margin-left: -0.17333rem; + background: #62D0A8; + margin-right: 0.13333rem; +} + +.box .box_in { + width: 100%; + height: 100%; + display: flex; +} + +.box .box_in .fistBox { + width: 2.4rem; + float: left; +} + +.box .box_in .fistBox .fist { + width: 2.26667rem; + height: 2.01333rem; + margin-right: 0.4rem; +} + +.box .box_in .fistBox .fist .title { + color: #666666; + width: 100%; + text-align: center; + font-size: 0.37333rem; + margin-bottom: 0.30667rem; + white-space: nowrap; +} + +.box .box_in .fistBox .fist .user { + position: relative; +} + +.box .box_in .fistBox .fist .ts { + width: 0.42667rem; + height: 0.42667rem; + border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); top: 0rem; - background: #fff; - border-radius: 0.4rem 0.4rem 0 0; + z-index: 2; + display: none; } -.list .top div { - width: 25%; +.box .box_in .fistBox .fist .ts i { + width: 100%; + border-radius: 0.16rem; + height: 0.16rem; + line-height: 0.16rem; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); text-align: center; - color: #5D95FF; - font-size: 0.29333rem; - font-weight: 600; + background: linear-gradient(90deg, #FFEB67, #FFFCE7); + color: #333333; + font-size: 0.16rem; + font-weight: 400; + font-style: normal; } -.list .other { - width: 8.76rem; - height: 2.01333rem; - margin: 0 auto 0; - border-bottom: 0.02667rem solid #D7DCE6; - display: flex; - justify-content: space-between; -} - -.list .other:last-child { - border: none; -} - -.list .other div { - width: 25%; - text-align: center; - height: 100%; - line-height: 2.01333rem; - color: #848D9C; - font-size: 0.32rem; - font-weight: 500; - white-space: nowrap; -} - -.list .other div img { +.box .box_in .fistBox .fist .i { + display: block; +} + +.box .box_in .fistBox .fist img { display: block; - margin: 0.45333rem auto 0.06667rem; width: 0.42667rem; height: 0.42667rem; border-radius: 50%; + margin: 0 auto 0.06667rem; } -.list .other div p { - width: 98%; - height: 0.33333rem; - line-height: 0.32rem; +.box .box_in .fistBox .fist p { + width: 100%; + text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + color: #848D9C; + font-size: 0.32rem; + font-weight: 500; + margin-bottom: 0.06667rem; +} + +.box .box_in .fistBox .fist b { + color: #A4ABB2; + font-size: 0.24rem; + font-weight: 500; + text-align: center; + display: block; + width: 100%; +} + +.box .box_in .ordinaryBox { + height: 100%; + overflow-x: scroll; +} + +.box .box_in .ordinaryBox .ordinaryBox_in { + width: 8rem; + height: 100%; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + width: 2.26667rem; + height: 2.01333rem; + float: left; + margin-right: 0.4rem; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .title { + color: #666666; + width: 100%; + text-align: center; + font-size: 0.37333rem; + margin-bottom: 0.30667rem; + white-space: nowrap; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary p { + width: 100%; text-align: center; color: #848D9C; font-size: 0.32rem; - margin-bottom: 0.12rem; + font-weight: 500; + line-height: 1.2rem; + white-space: nowrap; } -.list .other div .id { - width: 100%; - text-align: center; - color: #A4ABB2; - font-size: 0.24rem; +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .true { + color: #4EA686; } -.list .other .div11 { - line-height: 0rem; +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .false { + color: #DC865D; +} + +.box .box_in .fistBox .fistAct .title { + opacity: 0; +} + +.box .box_in .ordinaryBox_inAct .ordinary .title { + opacity: 0; + margin-bottom: -0.26667rem; +} + +.english .box .box_in .ordinaryBox .ordinaryBox_in { + width: 11.6rem; +} + +.english .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + width: 3.2rem; +} + +.english .box .box_in .ordinaryBox .ordinaryBox_in .ordinary .title { + font-size: 0.30667rem; +} + +.arabic .box .box_in .fistBox .fist { + margin-right: 0; + margin-left: 0.4rem; +} + +.arabic .box .box_in .ordinaryBox .ordinaryBox_in { + width: 10rem; +} + +.arabic .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + width: 2.8rem; +} + +.arabic .header h3 { + margin-right: 0.3rem; +} + +.arabic .box h3 span { + margin-right: 0.3rem; + margin-left: 0; +} + +.arabic .box h3 b { + margin-right: 0.3rem; +} + +.arabic .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + float: right; } diff --git a/view/molistar/modules/guildAr/css/memberFlow.scss b/view/molistar/modules/guildAr/css/memberFlow.scss index 4695f091..017ffd24 100644 --- a/view/molistar/modules/guildAr/css/memberFlow.scss +++ b/view/molistar/modules/guildAr/css/memberFlow.scss @@ -41,6 +41,8 @@ body { color: #333333; font-size: px2rem(34); font-weight: bold; + width: 100%; + text-align: center; } .text { @@ -54,211 +56,310 @@ body { } } -.timeBox { +.header { width: px2rem(710); - height: px2rem(191); + height: px2rem(314); background: #fff; border-radius: px2rem(30); - margin: px2rem(190) auto px2rem(19); - position: relative; + margin: px2rem(210) auto px2rem(26); + overflow: hidden; - .line { - width: px2rem(2); - height: px2rem(143); - background: #D7DCE6; - position: absolute; - left: px2rem(219); - top: 50%; - transform: translateY(-50%); - border-radius: px2rem(2); - } - - .year { - width: px2rem(219); - position: absolute; - left: 0; - top: px2rem(25); - color: #A4ABB2; - font-size: px2rem(24); - font-weight: bold; - text-align: center; - text-indent: -0.8rem; - } - - .startTime { - width: px2rem(219); - position: absolute; - left: 0; - top: px2rem(72); - color: #848D9C; - font-size: px2rem(28); - font-weight: bold; - // text-align: center; - - b { - margin-right: 0.1rem; - text-indent: 0.45rem; - display: inline-block; - } - - img { - width: px2rem(24); - height: px2rem(16); - display: inline-block; - margin-top: 0.1rem; - } - } - - .endTime { - width: px2rem(219); - position: absolute; - left: 0; - top: px2rem(122); - color: #848D9C; - font-size: px2rem(28); - font-weight: bold; - // text-align: center; - - b { - margin-right: 0.1rem; - text-indent: 0.45rem; - display: inline-block; - } - - img { - width: px2rem(24); - height: px2rem(16); - display: inline-block; - margin-top: 0.1rem; - } - } - - .right { - width: 5.5rem; - height: px2rem(191); - position: absolute; - right: 0.55rem; - top: 0; + .time { + width: 100%; + height: px2rem(40); + line-height: px2rem(40); display: flex; justify-content: space-between; + box-sizing: border-box; + margin: px2rem(29) auto px2rem(57); + text-align: center; + padding: 0 px2rem(40); + color: #848D9C; + font-size: px2rem(30); + font-weight: 500; div { - width: 50%; - text-align: center; - overflow: hidden; - - p { - color: #A4ABB2; - font-size: px2rem(24); - font-weight: bold; - margin-top: px2rem(40); - margin-bottom: px2rem(25); - line-height: 0.34rem; - } + width: px2rem(230); b { - color: #848D9C; - font-size: px2rem(28); - font-weight: bold; + display: inline-block; + vertical-align: middle; + } + + img { + width: px2rem(24); + height: px2rem(16); + display: inline-block; + vertical-align: middle; + margin-left: px2rem(10); + } + } + + span { + display: block; + width: px2rem(40); + height: px2rem(4); + background: #848D9C; + margin-top: 0.25rem; + } + } + + h3 { + width: 100%; + box-sizing: border-box; + padding-left: px2rem(49); + color: #141515; + font-size: px2rem(34); + font-weight: 500; + margin-bottom: px2rem(54); + } + + p { + height: px2rem(40); + line-height: px2rem(40); + width: 100%; + text-align: center; + color: #232424; + font-size: px2rem(52); + font-weight: 500; + + img { + display: inline-block; + width: px2rem(40); + height: px2rem(40); + } + } +} + +.box { + width: px2rem(710); + min-height: px2rem(800); + background: #fff; + border-radius: px2rem(30); + margin: 0 auto px2rem(30); + box-sizing: border-box; + padding: px2rem(37) px2rem(0) 0 px2rem(23); + + h3 { + color: #141515; + font-size: px2rem(34); + font-weight: 600; + margin: 0; + margin-left: px2rem(20); + margin-bottom: px2rem(38); + + span { + display: inline-block; + width: px2rem(5); + height: px2rem(28); + margin-left: px2rem(-13); + background: #62D0A8; + margin-right: px2rem(10); + } + } + + .box_in { + width: 100%; + height: 100%; + display: flex; + + .fistBox { + width: px2rem(180); + float: left; + + .fist { + width: px2rem(170); + height: px2rem(151); + margin-right: px2rem(30); + + .title { + color: #666666; + width: 100%; + text-align: center; + font-size: px2rem(28); + margin-bottom: px2rem(23); + white-space: nowrap; + } + + .user { + position: relative; + } + + .ts { + width: px2rem(32); + height: px2rem(32); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(0); + z-index: 2; + display: none; + + i { + width: 100%; + border-radius: px2rem(12); + height: px2rem(12); + line-height: px2rem(12); + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + text-align: center; + background: linear-gradient(90deg, #FFEB67, #FFFCE7); + color: #333333; + font-size: px2rem(12); + font-weight: 400; + font-style: normal; + } + } + + .i { + display: block; + } + + img { + display: block; + width: px2rem(32); + height: px2rem(32); + border-radius: 50%; + margin: 0 auto px2rem(5); + } + + p { + width: 100%; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #848D9C; + font-size: px2rem(24); + font-weight: 500; + margin-bottom: px2rem(5); + } + + b { + color: #A4ABB2; + font-size: px2rem(18); + font-weight: 500; + text-align: center; + display: block; + width: 100%; + } + } + } + + .ordinaryBox { + height: 100%; + overflow-x: scroll; + + &::-webkit-scrollbar { + // display: none; + } + + .ordinaryBox_in { + width: 8rem; + height: 100%; + + .ordinary { + width: px2rem(170); + height: px2rem(151); + float: left; + margin-right: px2rem(30); + + .title { + color: #666666; + width: 100%; + text-align: center; + font-size: px2rem(28); + margin-bottom: px2rem(23); + white-space: nowrap; + } + + p { + width: 100%; + text-align: center; + color: #848D9C; + font-size: px2rem(24); + font-weight: 500; + line-height: px2rem(90); + white-space: nowrap; + } + + .true { + color: #4EA686; + } + + .false { + color: #DC865D; + } + } + } + } + + .fistBox .fistAct { + .title { + opacity: 0; + } + } + + .ordinaryBox_inAct .ordinary { + .title { + opacity: 0; + margin-bottom: px2rem(-20); } } } } -.list { - width: px2rem(710); - height: px2rem(960); - background: #fff; - border-radius: px2rem(30); - margin: px2rem(19) auto px2rem(10); - overflow-y: scroll; - position: relative; - padding-top: 1.45rem; - box-sizing: border-box; +.english { + .box .box_in .ordinaryBox .ordinaryBox_in { + width: 11.6rem; - &::-webkit-scrollbar { - display: none; + .ordinary { + width: 3.2rem; + + .title { + font-size: px2rem(23); + } + } + } +} + +.arabic { + .box .box_in .fistBox .fist { + margin-right: 0; + margin-left: 0.4rem; } - .top { - height: 1.5rem; - width: px2rem(710); - box-sizing: border-box; - padding: px2rem(40) px2rem(20) 0; - display: flex; - justify-content: space-between; - line-height: 0.4rem; - position: absolute; - left: 50%; - transform: translateX(-50%); - // top: 5.3rem; - top: 0rem; - background: #fff; - border-radius: px2rem(30) px2rem(30) 0 0; + .box .box_in .ordinaryBox { + .ordinaryBox_in { + width: 10rem; - div { - width: 25%; - text-align: center; - color: #5D95FF; - font-size: px2rem(22); - font-weight: 600; + .ordinary { + width: 2.8rem; + + .title { + // font-size: px2rem(28); + } + } } } - .other { - width: px2rem(657); - height: px2rem(151); - margin: 0 auto 0; - border-bottom: px2rem(2) solid #D7DCE6; - display: flex; - justify-content: space-between; - // background: pink; + .header h3 { + margin-right: 0.3rem; + } - &:last-child { - border: none; - } + .box h3 span { + margin-right: 0.3rem; + margin-left: 0; + } - div { - width: 25%; - text-align: center; - height: 100%; - line-height: px2rem(151); - color: #848D9C; - font-size: px2rem(24); - font-weight: 500; - white-space: nowrap; + .box h3 b { + margin-right: 0.3rem; + } - img { - display: block; - margin: px2rem(34) auto px2rem(5); - width: px2rem(32); - height: px2rem(32); - border-radius: 50%; - } - - p { - width: 98%; - height: px2rem(25); - line-height: 0.32rem; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-align: center; - color: #848D9C; - font-size: px2rem(24); - margin-bottom: px2rem(9); - } - - .id { - width: 100%; - text-align: center; - color: #A4ABB2; - font-size: px2rem(18); - } - } - - .div11 { - line-height: 0rem; - } + .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + float: right; } } \ No newline at end of file diff --git a/view/molistar/modules/guildAr/css/memberFlow2.css b/view/molistar/modules/guildAr/css/memberFlow2.css index 1bf92ff6..309e3000 100644 --- a/view/molistar/modules/guildAr/css/memberFlow2.css +++ b/view/molistar/modules/guildAr/css/memberFlow2.css @@ -38,6 +38,7 @@ body { color: #333333; font-size: 0.45333rem; font-weight: bold; + width: 100%; } .back .text { @@ -50,220 +51,472 @@ body { font-size: 0.4rem; } -.timeBox { +.header { width: 9.46667rem; - height: 2.54667rem; + height: 6.34667rem; background: #fff; border-radius: 0.4rem; - margin: 2.53333rem auto 0.25333rem; - position: relative; -} - -.timeBox .line { - width: 0.02667rem; - height: 1.90667rem; - background: #D7DCE6; - position: absolute; - left: 2.92rem; - top: 50%; - transform: translateY(-50%); - border-radius: 0.02667rem; -} - -.timeBox .year { - width: 2.92rem; - position: absolute; - left: 0; - top: 0.33333rem; - color: #A4ABB2; - font-size: 0.32rem; - font-weight: bold; - text-align: center; - text-indent: -0.8rem; -} - -.timeBox .startTime { - width: 2.92rem; - position: absolute; - left: 0; - top: 0.96rem; - color: #848D9C; - font-size: 0.37333rem; - font-weight: bold; -} - -.timeBox .startTime b { - margin-right: 0.1rem; - text-indent: 0.45rem; - display: inline-block; -} - -.timeBox .startTime img { - width: 0.32rem; - height: 0.21333rem; - display: inline-block; - margin-top: 0.1rem; -} - -.timeBox .endTime { - width: 2.92rem; - position: absolute; - left: 0; - top: 1.62667rem; - color: #848D9C; - font-size: 0.37333rem; - font-weight: bold; -} - -.timeBox .endTime b { - margin-right: 0.1rem; - text-indent: 0.45rem; - display: inline-block; -} - -.timeBox .endTime img { - width: 0.32rem; - height: 0.21333rem; - display: inline-block; - margin-top: 0.1rem; -} - -.timeBox .right { - width: 5.5rem; - height: 2.54667rem; - position: absolute; - right: 0.55rem; - top: 0; - display: flex; - justify-content: space-between; -} - -.timeBox .right div { - width: 50%; - text-align: center; + margin: 2.8rem auto 0.34667rem; overflow: hidden; position: relative; } -.timeBox .right div p { - color: #A4ABB2; - font-size: 0.32rem; - font-weight: bold; - margin-top: 0.53333rem; - margin-bottom: 0.33333rem; - line-height: 0.34rem; -} - -.timeBox .right div b { - color: #848D9C; - font-size: 0.37333rem; - font-weight: bold; - position: absolute; - left: 50%; - transform: translateX(-50%); - bottom: 0.6rem; -} - -.timeBox .right .goToExchangeGold { - position: absolute; - top: 2.06667rem; - right: 0rem; - color: #D25555; - font-size: 0.26667rem; -} - -.list { - width: 9.46667rem; - height: 12.8rem; - background: #fff; - border-radius: 0.4rem; - margin: 0.25333rem auto 0.13333rem; - overflow-y: scroll; - position: relative; - padding-top: 1.45rem; - box-sizing: border-box; -} - -.list::-webkit-scrollbar { - display: none; -} - -.list .top { - height: 1.5rem; - width: 9.46667rem; - box-sizing: border-box; - padding: 0.53333rem 0.26667rem 0; +.header .time { + width: 100%; + height: 0.53333rem; + line-height: 0.53333rem; display: flex; justify-content: space-between; - line-height: 0.4rem; - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 0; - background: #fff; - border-radius: 0.4rem 0.4rem 0 0; -} - -.list .top div { - width: 25%; + box-sizing: border-box; + margin: 0.38667rem auto 0.76rem; text-align: center; - color: #5D95FF; - font-size: 0.29333rem; - font-weight: 600; -} - -.list .other { - width: 8.76rem; - height: 2.01333rem; - margin: 0 auto 0; - border-bottom: 0.02667rem solid #D7DCE6; - display: flex; - justify-content: space-between; -} - -.list .other:last-child { - border: none; -} - -.list .other div { - width: 25%; - text-align: center; - height: 100%; - line-height: 2.01333rem; + padding: 0 0.26667rem; color: #848D9C; - font-size: 0.32rem; + font-size: 0.4rem; font-weight: 500; +} + +.header .time div { + color: #5D636E; + width: 4rem; +} + +.header .time div b { + display: inline-block; + vertical-align: middle; white-space: nowrap; } -.list .other div img { - display: block; - margin: 0.45333rem auto 0.06667rem; - width: 0.42667rem; - height: 0.42667rem; - border-radius: 50%; +.header .time div img { + width: 0.32rem; + height: 0.21333rem; + display: inline-block; + vertical-align: middle; + margin-left: 0.13333rem; } -.list .other div p { - width: 98%; - height: 0.33333rem; - line-height: 0.32rem; +.header .time span { + display: block; + width: 3rem; +} + +.header h3 { + width: 100%; + box-sizing: border-box; + padding-left: 0.53333rem; + color: #141515; + font-size: 0.45333rem; + margin-bottom: 0.72rem; +} + +.header p { + height: 0.53333rem; + line-height: 0.53333rem; + width: 100%; + text-align: center; + color: #232424; + font-size: 0.69333rem; + font-weight: 500; +} + +.header p img { + display: inline-block; + width: 0.28rem; + height: 0.61333rem; + margin-top: -0.05rem; +} + +.header .user { + width: 1.70667rem; + height: 1.14667rem; + position: absolute; + left: 0.88rem; + top: 1.4rem; + text-align: center; +} + +.header .user img { + display: block; + width: 1.14667rem; + height: 1.14667rem; + border-radius: 50%; + margin: 0 auto 0.05333rem; +} + +.header .user p { + width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + color: #333333; + font-size: 0.34667rem; + font-weight: 400; + margin-bottom: 0.02667rem; +} + +.header .user b { + color: #A4ABB2; + font-size: 0.29333rem; +} + +.header .line { + width: 8.76rem; + height: 0.01333rem; + background: #B0BACD; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.88rem; +} + +.header .line1 { + width: 0.01333rem; + height: 1.02667rem; + background: #B0BACD; + position: absolute; + left: 2.94667rem; + top: 4.65333rem; +} + +.header .line2 { + width: 0.01333rem; + height: 1.02667rem; + background: #B0BACD; + position: absolute; + left: 6.37333rem; + top: 4.65333rem; +} + +.header .datas { + width: 8.76rem; + height: 1.24rem; + margin: 1.24rem auto 0; + display: flex; + justify-content: space-between; +} + +.header .datas div { + width: 2.54667rem; + text-align: center; +} + +.header .datas div p { + color: #232424; + font-size: 0.48rem; + font-weight: 500; + margin-bottom: 0.30667rem; + width: 100%; +} + +.header .datas div p img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + vertical-align: middle; +} + +.header .datas div p .dor { + width: 0.25333rem; + height: 0.56rem; + margin-top: -0.05rem; +} + +.header .datas div p b { + display: inline-block; + vertical-align: middle; +} + +.header .datas div span { + color: #666666; + font-size: 0.37333rem; + font-weight: 400; + white-space: nowrap; +} + +.datasAct .line1 { + left: 50%; + transform: translateX(-50%); +} + +.datasAct .line2 { + display: none; +} + +.datasAct .datas { + width: 7rem; +} + +.datasAct .datas .datas3 { + display: none; +} + +.box { + width: 9.46667rem; + min-height: 10.66667rem; + background: #fff; + border-radius: 0.4rem; + margin: 0 auto 0.4rem; + box-sizing: border-box; + padding: 0.49333rem 0rem 0 0.30667rem; +} + +.box h3 { + color: #141515; + font-size: 0.45333rem; + font-weight: 600; + margin: 0; + margin-left: 0.26667rem; + margin-bottom: 0.50667rem; +} + +.box h3 span { + display: inline-block; + width: 0.06667rem; + height: 0.37333rem; + margin-left: -0.17333rem; + background: #62D0A8; + margin-right: 0.13333rem; +} + +.box .box_in { + width: 100%; + height: 100%; + display: flex; +} + +.box .box_in .fistBox { + width: 2.4rem; + float: left; +} + +.box .box_in .fistBox .fist { + width: 2.26667rem; + height: 2.01333rem; + margin-right: 0.4rem; +} + +.box .box_in .fistBox .fist .title { + color: #666666; + width: 100%; + text-align: center; + font-size: 0.37333rem; + margin-bottom: 0.30667rem; + white-space: nowrap; +} + +.box .box_in .fistBox .fist .user { + position: relative; +} + +.box .box_in .fistBox .fist .ts { + width: 0.42667rem; + height: 0.42667rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0rem; + z-index: 2; + display: none; +} + +.box .box_in .fistBox .fist .ts i { + width: 100%; + border-radius: 0.16rem; + height: 0.16rem; + line-height: 0.16rem; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + text-align: center; + background: linear-gradient(90deg, #FFEB67, #FFFCE7); + color: #333333; + font-size: 0.16rem; + font-weight: 400; + font-style: normal; +} + +.box .box_in .fistBox .fist .i { + display: block; +} + +.box .box_in .fistBox .fist img { + display: block; + width: 0.42667rem; + height: 0.42667rem; + border-radius: 50%; + margin: 0 auto 0.06667rem; +} + +.box .box_in .fistBox .fist p { + width: 100%; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #848D9C; + font-size: 0.32rem; + font-weight: 500; + margin-bottom: 0.06667rem; +} + +.box .box_in .fistBox .fist b { + color: #A4ABB2; + font-size: 0.24rem; + font-weight: 500; + text-align: center; + display: block; + width: 100%; +} + +.box .box_in .ordinaryBox { + height: 100%; + overflow-x: scroll; +} + +.box .box_in .ordinaryBox .ordinaryBox_in { + width: 13.5rem; + height: 100%; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + width: 2.26667rem; + height: 2.01333rem; + float: left; + margin-right: 0.4rem; + white-space: nowrap; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .title { + color: #666666; + width: 100%; + text-align: center; + font-size: 0.37333rem; + margin-bottom: 0.30667rem; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary p { + width: 100%; text-align: center; color: #848D9C; font-size: 0.32rem; - margin-bottom: 0.12rem; + font-weight: 500; + line-height: 1.2rem; } -.list .other div .id { - width: 100%; - text-align: center; - color: #A4ABB2; - font-size: 0.24rem; +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .true { + color: #4EA686; } -.list .other .div11 { - line-height: 0rem; +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .false { + color: #DC865D; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .details { + color: #269ceb; +} + +.box .box_in .fistBox .fistAct .title { + opacity: 0; +} + +.box .box_in .ordinaryBox_inAct .ordinary .title { + opacity: 0; + margin-bottom: -0.26667rem; +} + +.english .header .time span { + font-size: 0.34667rem; +} + +.english .header .datas div span { + font-size: 0.32rem; +} + +.english .box h3 { + font-size: 0.4rem; +} + +.english .box .box_in .ordinaryBox .ordinaryBox_in { + width: 15rem; +} + +.english .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + width: 2.6rem; +} + +.english .header .time span { + width: 2rem; + white-space: nowrap; + font-size: 0.32rem; +} + +.english .header .time b { + white-space: nowrap; + font-size: 0.37333rem; +} + +.english .header .time img { + margin-right: 0.1rem; +} + +.english .header .time div { + width: 5rem; +} + +.arabic .header h3 { + margin-right: 0.3rem; +} + +.arabic .box h3 span { + margin-right: 0.3rem; + margin-left: 0; +} + +.arabic .box h3 b { + margin-right: 0.3rem; +} + +.arabic .box h3 strong { + margin-right: 0.3rem; +} + +.arabic .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + float: right; +} + +.arabic .box .box_in .ordinaryBox { + margin-right: 0.4rem; +} + +.arabic .header .time span { + width: 2rem; + white-space: nowrap; + font-size: 0.32rem; +} + +.arabic .header .time b { + white-space: nowrap; + font-size: 0.34667rem; +} + +.arabic .header .time img { + margin-right: 0.1rem; +} + +.arabic .header .time div { + width: 5rem; +} + +.arabic .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + width: 3.2rem; +} + +.arabic .box .box_in .ordinaryBox .ordinaryBox_in { + width: 18rem; +} + +.arabic .header .datas div span { + font-size: 0.32rem; } diff --git a/view/molistar/modules/guildAr/css/memberFlow2.scss b/view/molistar/modules/guildAr/css/memberFlow2.scss index b837f022..cb225f6d 100644 --- a/view/molistar/modules/guildAr/css/memberFlow2.scss +++ b/view/molistar/modules/guildAr/css/memberFlow2.scss @@ -19,7 +19,7 @@ body { color: #FFFFFF; font-size: px2rem(38); font-weight: bold; - z-index: 10; + z-index: 10; background: #fff; .backs { @@ -31,8 +31,6 @@ body { z-index: 2; } - - .title { position: absolute; left: 50%; @@ -43,6 +41,7 @@ body { color: #333333; font-size: px2rem(34); font-weight: bold; + width: 100%; } .text { @@ -56,223 +55,494 @@ body { } } -.timeBox { +.header { width: px2rem(710); - height: px2rem(191); + height: px2rem(476); background: #fff; border-radius: px2rem(30); - margin: px2rem(190) auto px2rem(19); + margin: px2rem(210) auto px2rem(26); + overflow: hidden; position: relative; - .line { - width: px2rem(2); - height: px2rem(143); - background: #D7DCE6; - position: absolute; - left: px2rem(219); - top: 50%; - transform: translateY(-50%); - border-radius: px2rem(2); - } - - .year { - width: px2rem(219); - position: absolute; - left: 0; - top: px2rem(25); - color: #A4ABB2; - font-size: px2rem(24); - font-weight: bold; + .time { + width: 100%; + height: px2rem(40); + line-height: px2rem(40); + display: flex; + justify-content: space-between; + box-sizing: border-box; + margin: px2rem(29) auto px2rem(57); text-align: center; - text-indent: -0.8rem; + padding: 0 px2rem(20); + color: #848D9C; + font-size: px2rem(30); + font-weight: 500; + + div { + color: #5D636E; + width: 4rem; + + b { + display: inline-block; + vertical-align: middle; + white-space: nowrap; + } + + img { + width: px2rem(24); + height: px2rem(16); + display: inline-block; + vertical-align: middle; + margin-left: px2rem(10); + } + } + + span { + display: block; + width: 3rem; + } } - .startTime { - width: px2rem(219); - position: absolute; - left: 0; - top: px2rem(72); - color: #848D9C; - font-size: px2rem(28); - font-weight: bold; + h3 { + width: 100%; + box-sizing: border-box; + padding-left: px2rem(40); + color: #141515; + font-size: px2rem(34); + // font-weight: 600; + margin-bottom: px2rem(54); // text-align: center; + } - b { - margin-right: 0.1rem; - text-indent: 0.45rem; - display: inline-block; - } + p { + height: px2rem(40); + line-height: px2rem(40); + width: 100%; + text-align: center; + color: #232424; + font-size: px2rem(52); + font-weight: 500; img { - width: px2rem(24); - height: px2rem(16); display: inline-block; - margin-top: 0.1rem; + width: px2rem(21); + height: px2rem(46); + margin-top: -0.05rem; } } - .endTime { - width: px2rem(219); + .user { + width: px2rem(128); + height: px2rem(86); position: absolute; - left: 0; - top: px2rem(122); - color: #848D9C; - font-size: px2rem(28); - font-weight: bold; - // text-align: center; - - b { - margin-right: 0.1rem; - text-indent: 0.45rem; - display: inline-block; - } + left: px2rem(66); + top: px2rem(105); + text-align: center; img { - width: px2rem(24); - height: px2rem(16); - display: inline-block; - margin-top: 0.1rem; + display: block; + width: px2rem(86); + height: px2rem(86); + border-radius: 50%; + margin: 0 auto px2rem(4); + } + + p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #333333; + font-size: px2rem(26); + font-weight: 400; + margin-bottom: px2rem(2); + } + + b { + color: #A4ABB2; + font-size: px2rem(22); } } - .right { - width: 5.5rem; - height: px2rem(191); + .line { + width: px2rem(657); + height: px2rem(1); + background: #B0BACD; position: absolute; - right: 0.55rem; - top: 0; + left: 50%; + transform: translateX(-50%); + top: px2rem(291); + } + + .line1 { + width: px2rem(1); + height: px2rem(77); + background: #B0BACD; + position: absolute; + left: px2rem(221); + top: px2rem(349); + } + + .line2 { + width: px2rem(1); + height: px2rem(77); + background: #B0BACD; + position: absolute; + left: px2rem(478); + top: px2rem(349); + } + + .datas { + width: px2rem(657); + height: px2rem(93); + margin: px2rem(93) auto 0; display: flex; justify-content: space-between; div { - width: 50%; + width: px2rem(191); text-align: center; - overflow: hidden; - position: relative; p { - color: #A4ABB2; - font-size: px2rem(24); - font-weight: bold; - margin-top: px2rem(40); - margin-bottom: px2rem(25); - line-height: 0.34rem; + color: #232424; + font-size: px2rem(36); + font-weight: 500; + margin-bottom: px2rem(23); + width: 100%; + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + vertical-align: middle; + } + + .dor { + width: px2rem(19); + height: px2rem(42); + margin-top: -0.05rem; + } + + b { + display: inline-block; + vertical-align: middle; + } } - b { - color: #848D9C; + span { + color: #666666; font-size: px2rem(28); - font-weight: bold; - position: absolute; - left: 50%; - transform: translateX(-50%); - bottom: px2rem(45); + font-weight: 400; + white-space: nowrap; } } - - .goToExchangeGold { - position: absolute; - top: px2rem(155); - right: px2rem(0); - color: #D25555; - font-size: px2rem(20); - } } } -.list { - width: px2rem(710); - height: px2rem(960); - background: #fff; - border-radius: px2rem(30); - margin: px2rem(19) auto px2rem(10); - overflow-y: scroll; - position: relative; - padding-top: 1.45rem; - box-sizing: border-box; +.datasAct { + .line1 { + left: 50%; + transform: translateX(-50%); + } - &::-webkit-scrollbar { + .line2 { display: none; } - .top { - height: 1.5rem; - width: px2rem(710); - box-sizing: border-box; - padding: px2rem(40) px2rem(20) 0; - display: flex; - justify-content: space-between; - line-height: 0.4rem; - position: absolute; - left: 50%; - transform: translateX(-50%); - // top: 5.3rem; - top: 0; - background: #fff; - border-radius: px2rem(30) px2rem(30) 0 0; - div { - width: 25%; - text-align: center; - color: #5D95FF; - font-size: px2rem(22); - font-weight: 600; + .datas { + width: 7rem; + + .datas3 { + display: none; + } + } +} + +.box { + width: px2rem(710); + min-height: px2rem(800); + background: #fff; + border-radius: px2rem(30); + margin: 0 auto px2rem(30); + box-sizing: border-box; + padding: px2rem(37) px2rem(0) 0 px2rem(23); + + h3 { + color: #141515; + font-size: px2rem(34); + font-weight: 600; + margin: 0; + margin-left: px2rem(20); + margin-bottom: px2rem(38); + + span { + display: inline-block; + width: px2rem(5); + height: px2rem(28); + margin-left: px2rem(-13); + background: #62D0A8; + margin-right: px2rem(10); } } - .other { - width: px2rem(657); - height: px2rem(151); - margin: 0 auto 0; - border-bottom: px2rem(2) solid #D7DCE6; + .box_in { + width: 100%; + height: 100%; display: flex; - justify-content: space-between; - &:last-child { - border: none; + .fistBox { + width: px2rem(180); + float: left; + + .fist { + width: px2rem(170); + height: px2rem(151); + margin-right: px2rem(30); + + .title { + color: #666666; + width: 100%; + text-align: center; + font-size: px2rem(28); + margin-bottom: px2rem(23); + white-space: nowrap; + } + + .user { + position: relative; + } + + .ts { + width: px2rem(32); + height: px2rem(32); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(0); + z-index: 2; + display: none; + + i { + width: 100%; + border-radius: px2rem(12); + height: px2rem(12); + line-height: px2rem(12); + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + text-align: center; + background: linear-gradient(90deg, #FFEB67, #FFFCE7); + color: #333333; + font-size: px2rem(12); + font-weight: 400; + font-style: normal; + } + } + + .i { + display: block; + } + + img { + display: block; + width: px2rem(32); + height: px2rem(32); + border-radius: 50%; + margin: 0 auto px2rem(5); + } + + p { + width: 100%; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #848D9C; + font-size: px2rem(24); + font-weight: 500; + margin-bottom: px2rem(5); + } + + b { + color: #A4ABB2; + font-size: px2rem(18); + font-weight: 500; + text-align: center; + display: block; + width: 100%; + } + } } - div { - width: 25%; - text-align: center; + .ordinaryBox { height: 100%; - line-height: px2rem(151); - color: #848D9C; - font-size: px2rem(24); - font-weight: 500; - white-space: nowrap; + overflow-x: scroll; - img { - display: block; - margin: px2rem(34) auto px2rem(5); - width: px2rem(32); - height: px2rem(32); - border-radius: 50%; + &::-webkit-scrollbar { + // display: none; } - p { - width: 98%; - height: px2rem(25); - line-height: 0.32rem; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-align: center; - color: #848D9C; - font-size: px2rem(24); - margin-bottom: px2rem(9); - } + .ordinaryBox_in { + width: 13.5rem; + height: 100%; - .id { - width: 100%; - text-align: center; - color: #A4ABB2; - font-size: px2rem(18); + .ordinary { + width: px2rem(170); + height: px2rem(151); + float: left; + margin-right: px2rem(30); + white-space: nowrap; + + .title { + color: #666666; + width: 100%; + text-align: center; + font-size: px2rem(28); + margin-bottom: px2rem(23); + } + + p { + width: 100%; + text-align: center; + color: #848D9C; + font-size: px2rem(24); + font-weight: 500; + line-height: px2rem(90); + } + + .true { + color: #4EA686; + } + + .false { + color: #DC865D; + } + + .details { + color: rgb(38, 156, 235); + } + } } } - .div11 { - line-height: 0rem; + .fistBox .fistAct { + .title { + opacity: 0; + } } + + .ordinaryBox_inAct .ordinary { + .title { + opacity: 0; + margin-bottom: px2rem(-20); + } + } + } +} + +.english { + .header .time span { + font-size: px2rem(26); + } + + .header .datas div span { + font-size: px2rem(24); + } + + .box h3 { + font-size: px2rem(30); + } + + .box .box_in .fistBox .fist { + // width: 4rem; + } + + .box .box_in .ordinaryBox .ordinaryBox_in { + width: 15rem; + + .ordinary { + width: 2.6rem; + } + } + + .header .time span { + width: 2rem; + white-space: nowrap; + font-size: px2rem(24); + } + + .header .time b { + white-space: nowrap; + font-size: px2rem(28); + } + + .header .time img { + margin-right: 0.1rem; + } + + .header .time div { + width: 5rem; + } +} + +.arabic { + + .header h3 { + margin-right: 0.3rem; + } + + .box h3 span { + margin-right: 0.3rem; + margin-left: 0; + } + + .box h3 b { + margin-right: 0.3rem; + } + + .box h3 strong { + margin-right: 0.3rem; + } + + .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + float: right; + } + + .box .box_in .ordinaryBox { + margin-right: 0.4rem; + } + + .header .time span { + width: 2rem; + white-space: nowrap; + font-size: px2rem(24); + } + + .header .time b { + white-space: nowrap; + font-size: px2rem(26); + } + + .header .time img { + margin-right: 0.1rem; + } + + .header .time div { + width: 5rem; + } + + .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + width: 3.2rem; + } + + .box .box_in .ordinaryBox .ordinaryBox_in { + width: 18rem; + } + + .header .datas div span { + font-size: px2rem(24); } } \ No newline at end of file diff --git a/view/molistar/modules/guildAr/css/memberFlow22.css b/view/molistar/modules/guildAr/css/memberFlow22.css new file mode 100644 index 00000000..86d8d576 --- /dev/null +++ b/view/molistar/modules/guildAr/css/memberFlow22.css @@ -0,0 +1,488 @@ +html, +body { + width: 100%; + height: 17.78667rem; + background: #F5F7F9; +} + +.back { + width: 100%; + height: 2.4rem; + position: fixed; + left: 0; + top: 0rem; + text-align: center; + color: #FFFFFF; + font-size: 0.50667rem; + font-weight: bold; + z-index: 10; + background: #fff; +} + +.back .backs { + width: 0.58667rem; + height: 0.58667rem; + position: absolute; + left: 0.24rem; + top: 58%; + z-index: 2; +} + +.back .title { + position: absolute; + left: 50%; + transform: translateX(-50%); + height: 100%; + top: 0; + line-height: 3.46667rem; + color: #333333; + font-size: 0.45333rem; + font-weight: bold; + white-space: nowrap; +} + +.back .text { + position: absolute; + right: 0.62667rem; + height: 100%; + top: 0; + line-height: 3.46667rem; + color: #333333; + font-size: 0.4rem; +} + +.header { + width: 9.46667rem; + height: 6.34667rem; + background: #fff; + border-radius: 0.4rem; + margin: 2.8rem auto 0.34667rem; + overflow: hidden; + position: relative; +} + +.header .time { + width: 100%; + height: 0.53333rem; + line-height: 0.53333rem; + display: flex; + justify-content: space-between; + box-sizing: border-box; + margin: 0.38667rem auto 0.76rem; + text-align: center; + padding: 0 0.26667rem; + color: #848D9C; + font-size: 0.4rem; + font-weight: 500; +} + +.header .time div { + color: #5D636E; + width: 4rem; +} + +.header .time div b { + display: inline-block; + vertical-align: middle; + white-space: nowrap; +} + +.header .time div img { + width: 0.32rem; + height: 0.21333rem; + display: inline-block; + vertical-align: middle; + margin-left: 0.13333rem; +} + +.header .time span { + display: block; + width: 3rem; +} + +.header h3 { + width: 78%; + box-sizing: border-box; + padding-left: 0.65333rem; + color: #232424; + font-size: 0.37333rem; + font-weight: bold; + margin-bottom: 0.72rem; + text-align: center; + float: right; +} + +.header p { + height: 0.53333rem; + line-height: 0.53333rem; + width: 70%; + text-align: center; + color: #232424; + font-size: 0.69333rem; + font-weight: 500; + float: right; +} + +.header p img { + display: inline-block; + width: 0.28rem; + height: 0.61333rem; + margin-top: -0.05rem; +} + +.header .user { + width: 1.70667rem; + height: 1.14667rem; + position: absolute; + left: 0.88rem; + top: 1.4rem; + text-align: center; +} + +.header .user img { + display: block; + width: 1.14667rem; + height: 1.14667rem; + border-radius: 50%; + margin: 0 auto 0.05333rem; +} + +.header .user p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #333333; + font-size: 0.34667rem; + font-weight: 400; + margin-bottom: 0.02667rem; +} + +.header .user b { + color: #A4ABB2; + font-size: 0.29333rem; +} + +.header .line { + width: 8.76rem; + height: 0.01333rem; + background: #B0BACD; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.88rem; +} + +.header .line1 { + width: 0.01333rem; + height: 1.02667rem; + background: #B0BACD; + position: absolute; + left: 2.94667rem; + top: 4.65333rem; +} + +.header .line2 { + width: 0.01333rem; + height: 1.02667rem; + background: #B0BACD; + position: absolute; + left: 6.37333rem; + top: 4.65333rem; +} + +.header .datas { + width: 8.76rem; + height: 1.24rem; + margin: 3.5rem auto 0; + display: flex; + justify-content: space-between; +} + +.header .datas div { + width: 2.54667rem; + text-align: center; +} + +.header .datas div p { + color: #232424; + font-size: 0.48rem; + font-weight: 500; + margin-bottom: 0.30667rem; + width: 100%; +} + +.header .datas div p img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + vertical-align: middle; +} + +.header .datas div p .dor { + width: 0.25333rem; + height: 0.56rem; + margin-top: -0.05rem; +} + +.header .datas div p b { + display: inline-block; + vertical-align: middle; +} + +.header .datas div span { + color: #666666; + font-size: 0.37333rem; + font-weight: 400; + white-space: nowrap; +} + +.datasAct .line1 { + left: 50%; + transform: translateX(-50%); +} + +.datasAct .line2 { + display: none; +} + +.datasAct .datas { + width: 7rem; +} + +.datasAct .datas .datas3 { + display: none; +} + +.box { + width: 9.46667rem; + min-height: 10.66667rem; + background: #fff; + border-radius: 0.4rem; + margin: 0 auto 0.4rem; + box-sizing: border-box; + padding: 0.49333rem 0rem 0 0.30667rem; +} + +.box h3 { + color: #141515; + font-size: 0.45333rem; + font-weight: 600; + margin: 0; + margin-left: 0.26667rem; + margin-bottom: 0.50667rem; +} + +.box h3 span { + display: inline-block; + width: 0.06667rem; + height: 0.37333rem; + margin-left: -0.17333rem; + background: #62D0A8; + margin-right: 0.13333rem; +} + +.box .box_in { + width: 100%; + height: 100%; + display: flex; +} + +.box .box_in .fistBox { + width: 2.4rem; + float: left; +} + +.box .box_in .fistBox .fist { + width: 2.26667rem; + height: 2.01333rem; + margin-right: 0.4rem; +} + +.box .box_in .fistBox .fist .title { + color: #666666; + width: 100%; + text-align: center; + font-size: 0.37333rem; + margin-bottom: 0.30667rem; + white-space: nowrap; +} + +.box .box_in .fistBox .fist img { + display: block; + width: 0.42667rem; + height: 0.42667rem; + border-radius: 50%; + margin: 0 auto 0.06667rem; +} + +.box .box_in .fistBox .fist p { + width: 100%; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #848D9C; + font-size: 0.32rem; + font-weight: 500; + margin-bottom: 0.06667rem; +} + +.box .box_in .fistBox .fist b { + color: #A4ABB2; + font-size: 0.24rem; + font-weight: 500; + text-align: center; + display: block; + width: 100%; +} + +.box .box_in .ordinaryBox { + height: 100%; + overflow-x: scroll; +} + +.box .box_in .ordinaryBox .ordinaryBox_in { + width: 14.5rem; + height: 100%; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + min-width: 2.4rem; + height: 2.01333rem; + float: left; + margin-right: 0.4rem; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .title { + color: #666666; + width: 100%; + text-align: center; + font-size: 0.37333rem; + margin-bottom: 0.30667rem; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary p { + width: 100%; + text-align: center; + color: #848D9C; + font-size: 0.32rem; + font-weight: 500; + line-height: 1.2rem; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .true { + color: #4EA686; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .false { + color: #DC865D; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .details { + color: #269ceb; +} + +.box .box_in .fistBox .fistAct .title { + opacity: 0; +} + +.box .box_in .ordinaryBox_inAct .ordinary .title { + opacity: 0; + margin-bottom: -0.26667rem; +} + +.english .back .title { + font-size: 0.42667rem; +} + +.english .header .datas div span { + font-size: 0.29333rem; +} + +.english .box .box_in .ordinaryBox .ordinaryBox_in { + width: 15rem; +} + +.english .box .box_in .ordinaryBox .ordinaryBox_in .title { + font-size: 0.34667rem; +} + +.english .header .time span { + width: 2rem; + white-space: nowrap; + font-size: 0.32rem; +} + +.english .header .time b { + white-space: nowrap; + font-size: 0.37333rem; +} + +.english .header .time img { + margin-right: 0.1rem; +} + +.english .header .time div { + width: 5rem; +} + +.arabic .back .title { + font-size: 0.42667rem; +} + +.arabic .header .datas div span { + font-size: 0.29333rem; +} + +.arabic .box h3 { + margin-right: 0.26667rem; +} + +.arabic .box span { + margin-left: 0; + margin-right: 0; +} + +.arabic .box h3 b { + margin-right: 0.3rem; +} + +.arabic .box h3 strong { + margin-right: 0.3rem; +} + +.arabic .box .box_in .ordinaryBox .ordinaryBox_in { + width: 20rem; +} + +.arabic .box .box_in .ordinaryBox .ordinaryBox_in .title { + font-size: 0.33333rem; +} + +.arabic .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + float: right; +} + +.arabic .box .box_in .ordinaryBox { + margin-right: 0.4rem; +} + +.arabic .header .time span { + width: 2rem; + white-space: nowrap; + font-size: 0.32rem; +} + +.arabic .header .time b { + white-space: nowrap; + font-size: 0.34667rem; +} + +.arabic .header .time img { + margin-right: 0.1rem; +} + +.arabic .header .time div { + width: 5rem; +} diff --git a/view/molistar/modules/guildAr/css/memberFlow22.scss b/view/molistar/modules/guildAr/css/memberFlow22.scss new file mode 100644 index 00000000..a24c6c02 --- /dev/null +++ b/view/molistar/modules/guildAr/css/memberFlow22.scss @@ -0,0 +1,508 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + width: 100%; + height: px2rem(1334); + background: #F5F7F9; +} + +.back { + width: 100%; + height: px2rem(180); + position: fixed; + left: 0; + top: px2rem(0); + text-align: center; + color: #FFFFFF; + font-size: px2rem(38); + font-weight: bold; + z-index: 10; + background: #fff; + + .backs { + width: px2rem(44); + height: px2rem(44); + position: absolute; + left: px2rem(18); + top: 58%; + z-index: 2; + } + + .title { + position: absolute; + left: 50%; + transform: translateX(-50%); + height: 100%; + top: 0; + line-height: px2rem(260); + color: #333333; + font-size: px2rem(34); + font-weight: bold; + white-space: nowrap; + } + + .text { + position: absolute; + right: px2rem(47); + height: 100%; + top: 0; + line-height: px2rem(260); + color: #333333; + font-size: px2rem(30); + } +} + +.header { + width: px2rem(710); + height: px2rem(476); + background: #fff; + border-radius: px2rem(30); + margin: px2rem(210) auto px2rem(26); + overflow: hidden; + position: relative; + + .time { + width: 100%; + height: px2rem(40); + line-height: px2rem(40); + display: flex; + justify-content: space-between; + box-sizing: border-box; + margin: px2rem(29) auto px2rem(57); + text-align: center; + padding: 0 px2rem(20); + color: #848D9C; + font-size: px2rem(30); + font-weight: 500; + + div { + color: #5D636E; + width: 4rem; + + b { + display: inline-block; + vertical-align: middle; + white-space: nowrap; + } + + img { + width: px2rem(24); + height: px2rem(16); + display: inline-block; + vertical-align: middle; + margin-left: px2rem(10); + } + } + + span { + display: block; + width: 3rem; + } + } + + h3 { + width: 78%; + box-sizing: border-box; + padding-left: px2rem(49); + color: #232424; + font-size: px2rem(28); + font-weight: bold; + margin-bottom: px2rem(54); + text-align: center; + float: right; + } + + p { + height: px2rem(40); + line-height: px2rem(40); + width: 70%; + text-align: center; + color: #232424; + font-size: px2rem(52); + font-weight: 500; + float: right; + + img { + display: inline-block; + width: px2rem(21); + height: px2rem(46); + margin-top: -0.05rem; + } + } + + .user { + width: px2rem(128); + height: px2rem(86); + position: absolute; + left: px2rem(66); + top: px2rem(105); + text-align: center; + + img { + display: block; + width: px2rem(86); + height: px2rem(86); + border-radius: 50%; + margin: 0 auto px2rem(4); + } + + p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #333333; + font-size: px2rem(26); + font-weight: 400; + margin-bottom: px2rem(2); + } + + b { + color: #A4ABB2; + font-size: px2rem(22); + } + } + + .line { + width: px2rem(657); + height: px2rem(1); + background: #B0BACD; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(291); + } + + .line1 { + width: px2rem(1); + height: px2rem(77); + background: #B0BACD; + position: absolute; + left: px2rem(221); + top: px2rem(349); + } + + .line2 { + width: px2rem(1); + height: px2rem(77); + background: #B0BACD; + position: absolute; + left: px2rem(478); + top: px2rem(349); + } + + .datas { + width: px2rem(657); + height: px2rem(93); + margin: 3.5rem auto 0; + display: flex; + justify-content: space-between; + + div { + width: px2rem(191); + text-align: center; + + p { + color: #232424; + font-size: px2rem(36); + font-weight: 500; + margin-bottom: px2rem(23); + width: 100%; + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + vertical-align: middle; + } + + .dor { + width: px2rem(19); + height: px2rem(42); + margin-top: -0.05rem; + } + + b { + display: inline-block; + vertical-align: middle; + } + } + + span { + color: #666666; + font-size: px2rem(28); + font-weight: 400; + white-space: nowrap; + } + } + } +} + +.datasAct { + .line1 { + left: 50%; + transform: translateX(-50%); + } + + .line2 { + display: none; + } + + + .datas { + width: 7rem; + + .datas3 { + display: none; + } + } +} + +.box { + width: px2rem(710); + min-height: px2rem(800); + background: #fff; + border-radius: px2rem(30); + margin: 0 auto px2rem(30); + box-sizing: border-box; + padding: px2rem(37) px2rem(0) 0 px2rem(23); + + h3 { + color: #141515; + font-size: px2rem(34); + font-weight: 600; + margin: 0; + margin-left: px2rem(20); + margin-bottom: px2rem(38); + + span { + display: inline-block; + width: px2rem(5); + height: px2rem(28); + margin-left: px2rem(-13); + background: #62D0A8; + margin-right: px2rem(10); + } + } + + .box_in { + width: 100%; + height: 100%; + display: flex; + + .fistBox { + width: px2rem(180); + float: left; + + .fist { + width: px2rem(170); + height: px2rem(151); + margin-right: px2rem(30); + + .title { + color: #666666; + width: 100%; + text-align: center; + font-size: px2rem(28); + margin-bottom: px2rem(23); + white-space: nowrap; + } + + img { + display: block; + width: px2rem(32); + height: px2rem(32); + border-radius: 50%; + margin: 0 auto px2rem(5); + } + + p { + width: 100%; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #848D9C; + font-size: px2rem(24); + font-weight: 500; + margin-bottom: px2rem(5); + } + + b { + color: #A4ABB2; + font-size: px2rem(18); + font-weight: 500; + text-align: center; + display: block; + width: 100%; + } + } + } + + .ordinaryBox { + height: 100%; + overflow-x: scroll; + + &::-webkit-scrollbar { + // display: none; + } + + .ordinaryBox_in { + width: 14.5rem; + height: 100%; + + .ordinary { + min-width: px2rem(180); + height: px2rem(151); + float: left; + margin-right: px2rem(30); + + .title { + color: #666666; + width: 100%; + text-align: center; + font-size: px2rem(28); + margin-bottom: px2rem(23); + } + + p { + width: 100%; + text-align: center; + color: #848D9C; + font-size: px2rem(24); + font-weight: 500; + line-height: px2rem(90); + } + + .true { + color: #4EA686; + } + + .false { + color: #DC865D; + } + + .details { + color: rgb(38, 156, 235); + } + } + } + } + + .fistBox .fistAct { + .title { + opacity: 0; + } + } + + .ordinaryBox_inAct .ordinary { + .title { + opacity: 0; + margin-bottom: px2rem(-20); + } + } + } +} + +.english { + .back .title { + font-size: px2rem(32); + } + + .header .datas div span { + font-size: px2rem(22); + } + + .box .box_in .ordinaryBox .ordinaryBox_in { + width: 15rem; + + .title { + font-size: px2rem(26); + } + } + + .header .time span { + width: 2rem; + white-space: nowrap; + font-size: px2rem(24); + } + + .header .time b { + white-space: nowrap; + font-size: px2rem(28); + } + + .header .time img { + margin-right: 0.1rem; + } + + .header .time div { + width: 5rem; + } +} + +.arabic { + .back .title { + font-size: px2rem(32); + } + + .header .datas div span { + font-size: px2rem(22); + } + + .box h3 { + margin-right: px2rem(20); + } + + .box span { + // margin-right: px2rem(); + margin-left: 0; + margin-right: 0; + } + + .box h3 b { + margin-right: 0.3rem; + } + + .box h3 strong { + margin-right: 0.3rem; + } + + .box .box_in .ordinaryBox .ordinaryBox_in { + width: 20rem; + + .title { + font-size: px2rem(25); + } + } + + .box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + float: right; + } + + .box .box_in .ordinaryBox { + margin-right: 0.4rem; + } + + .header .time span { + width: 2rem; + white-space: nowrap; + font-size: px2rem(24); + } + + .header .time b { + white-space: nowrap; + font-size: px2rem(26); + } + + .header .time img { + margin-right: 0.1rem; + } + + .header .time div { + width: 5rem; + } +} \ No newline at end of file diff --git a/view/molistar/modules/guildAr/css/memberFlow3.css b/view/molistar/modules/guildAr/css/memberFlow3.css new file mode 100644 index 00000000..c3b10b1c --- /dev/null +++ b/view/molistar/modules/guildAr/css/memberFlow3.css @@ -0,0 +1,344 @@ +html, +body { + width: 100%; + height: 17.78667rem; + background: #F5F7F9; +} + +.back { + width: 100%; + height: 2.4rem; + position: fixed; + left: 0; + top: 0rem; + text-align: center; + color: #FFFFFF; + font-size: 0.50667rem; + font-weight: bold; + z-index: 10; + background: #fff; +} + +.back .backs { + width: 0.58667rem; + height: 0.58667rem; + position: absolute; + left: 0.24rem; + top: 58%; + z-index: 2; +} + +.back .title { + position: absolute; + left: 50%; + transform: translateX(-50%); + height: 100%; + top: 0; + line-height: 3.46667rem; + color: #333333; + font-size: 0.45333rem; + font-weight: bold; +} + +.back .text { + position: absolute; + right: 0.62667rem; + height: 100%; + top: 0; + line-height: 3.46667rem; + color: #333333; + font-size: 0.4rem; +} + +.header { + width: 9.46667rem; + height: 6.34667rem; + background: #fff; + border-radius: 0.4rem; + margin: 2.8rem auto 0.34667rem; + overflow: hidden; + position: relative; +} + +.header .time { + width: 100%; + height: 0.53333rem; + line-height: 0.53333rem; + display: flex; + justify-content: space-between; + box-sizing: border-box; + margin: 0.38667rem auto 0.76rem; + text-align: center; + padding: 0 0.26667rem; + color: #848D9C; + font-size: 0.4rem; + font-weight: 500; +} + +.header .time div { + color: #5D636E; + width: 3rem; +} + +.header .time span { + display: block; + width: 3rem; +} + +.header h3 { + width: 100%; + box-sizing: border-box; + padding-left: 0.65333rem; + color: #141515; + font-size: 0.42667rem; + font-weight: 500; + margin-bottom: 0.72rem; +} + +.header p { + height: 0.53333rem; + line-height: 0.53333rem; + width: 100%; + text-align: center; + color: #232424; + font-size: 0.69333rem; + font-weight: 500; +} + +.header p img { + display: inline-block; + width: 0.53333rem; + height: 0.53333rem; +} + +.header .user { + width: 1.70667rem; + height: 1.14667rem; + position: absolute; + left: 0.88rem; + top: 1.4rem; + text-align: center; +} + +.header .user img { + display: block; + width: 1.14667rem; + height: 1.14667rem; + border-radius: 50%; + margin: 0 auto 0.05333rem; +} + +.header .user p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #333333; + font-size: 0.34667rem; + font-weight: 400; + margin-bottom: 0.02667rem; +} + +.header .user b { + color: #A4ABB2; + font-size: 0.29333rem; +} + +.header .line { + width: 8.76rem; + height: 0.01333rem; + background: #B0BACD; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.88rem; +} + +.header .line1 { + width: 0.01333rem; + height: 1.02667rem; + background: #B0BACD; + position: absolute; + left: 2.94667rem; + top: 4.65333rem; +} + +.header .line2 { + width: 0.01333rem; + height: 1.02667rem; + background: #B0BACD; + position: absolute; + left: 6.37333rem; + top: 4.65333rem; +} + +.header .datas { + width: 8.76rem; + height: 1.24rem; + margin: 1.24rem auto 0; + display: flex; + justify-content: space-between; +} + +.header .datas div { + width: 2.54667rem; + text-align: center; +} + +.header .datas div p { + color: #232424; + font-size: 0.48rem; + font-weight: 500; + margin-bottom: 0.30667rem; + width: 100%; +} + +.header .datas div p img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + vertical-align: middle; +} + +.header .datas div p b { + display: inline-block; + vertical-align: middle; +} + +.header .datas div span { + color: #666666; + font-size: 0.37333rem; + font-weight: 400; +} + +.box { + width: 9.46667rem; + min-height: 10.66667rem; + background: #fff; + border-radius: 0.4rem; + margin: 0 auto 0.4rem; + box-sizing: border-box; + padding: 0.49333rem 0rem 0 0.30667rem; +} + +.box h3 { + color: #141515; + font-size: 0.45333rem; + font-weight: 600; + margin: 0; + margin-left: 0.26667rem; + margin-bottom: 0.50667rem; +} + +.box h3 span { + display: inline-block; + width: 0.06667rem; + height: 0.37333rem; + margin-left: -0.17333rem; + background: #62D0A8; + margin-right: 0.13333rem; +} + +.box .box_in { + width: 100%; + height: 100%; + display: flex; +} + +.box .box_in .fistBox { + width: 2.4rem; + float: left; +} + +.box .box_in .fistBox .fist { + width: 2.26667rem; + height: 2.01333rem; + margin-right: 0.4rem; +} + +.box .box_in .fistBox .fist .title { + color: #666666; + width: 100%; + text-align: center; + font-size: 0.37333rem; + margin-bottom: 0.30667rem; + white-space: nowrap; +} + +.box .box_in .fistBox .fist img { + display: block; + width: 0.42667rem; + height: 0.42667rem; + border-radius: 50%; + margin: 0 auto 0.06667rem; +} + +.box .box_in .fistBox .fist p { + width: 100%; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #848D9C; + font-size: 0.32rem; + font-weight: 500; +} + +.box .box_in .fistBox .fist b { + color: #A4ABB2; + font-size: 0.24rem; + font-weight: 500; + text-align: center; + display: block; + width: 100%; +} + +.box .box_in .ordinaryBox { + height: 100%; + overflow-x: scroll; +} + +.box .box_in .ordinaryBox .ordinaryBox_in { + width: 15rem; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary { + width: 2.26667rem; + height: 2.01333rem; + float: left; + margin-right: 0.4rem; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .title { + color: #666666; + width: 100%; + text-align: center; + font-size: 0.37333rem; + margin-bottom: 0.30667rem; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary p { + width: 100%; + text-align: center; + color: #848D9C; + font-size: 0.32rem; + font-weight: 500; + line-height: 1.2rem; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .true { + color: #4EA686; +} + +.box .box_in .ordinaryBox .ordinaryBox_in .ordinary .false { + color: #DC865D; +} + +.box .box_in .fistBox .fistAct .title { + opacity: 0; +} + +.box .box_in .ordinaryBox_inAct .ordinary .title { + opacity: 0; + margin-bottom: -0.26667rem; +} diff --git a/view/molistar/modules/guildAr/css/memberFlow3.scss b/view/molistar/modules/guildAr/css/memberFlow3.scss new file mode 100644 index 00000000..2e7e17c2 --- /dev/null +++ b/view/molistar/modules/guildAr/css/memberFlow3.scss @@ -0,0 +1,355 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + width: 100%; + height: px2rem(1334); + background: #F5F7F9; +} + +.back { + width: 100%; + height: px2rem(180); + position: fixed; + left: 0; + top: px2rem(0); + text-align: center; + color: #FFFFFF; + font-size: px2rem(38); + font-weight: bold; + z-index: 10; + background: #fff; + + .backs { + width: px2rem(44); + height: px2rem(44); + position: absolute; + left: px2rem(18); + top: 58%; + z-index: 2; + } + + .title { + position: absolute; + left: 50%; + transform: translateX(-50%); + height: 100%; + top: 0; + line-height: px2rem(260); + color: #333333; + font-size: px2rem(34); + font-weight: bold; + } + + .text { + position: absolute; + right: px2rem(47); + height: 100%; + top: 0; + line-height: px2rem(260); + color: #333333; + font-size: px2rem(30); + } +} + +.header { + width: px2rem(710); + height: px2rem(476); + background: #fff; + border-radius: px2rem(30); + margin: px2rem(210) auto px2rem(26); + overflow: hidden; + position: relative; + + .time { + width: 100%; + height: px2rem(40); + line-height: px2rem(40); + display: flex; + justify-content: space-between; + box-sizing: border-box; + margin: px2rem(29) auto px2rem(57); + text-align: center; + padding: 0 px2rem(20); + color: #848D9C; + font-size: px2rem(30); + font-weight: 500; + + div { + color: #5D636E; + width: 3rem; + } + + span { + display: block; + width: 3rem; + } + } + + h3 { + width: 100%; + box-sizing: border-box; + padding-left: px2rem(49); + color: #141515; + font-size: px2rem(32); + font-weight: 500; + margin-bottom: px2rem(54); + } + + p { + height: px2rem(40); + line-height: px2rem(40); + width: 100%; + text-align: center; + color: #232424; + font-size: px2rem(52); + font-weight: 500; + + img { + display: inline-block; + width: px2rem(40); + height: px2rem(40); + } + } + + .user { + width: px2rem(128); + height: px2rem(86); + position: absolute; + left: px2rem(66); + top: px2rem(105); + text-align: center; + + img { + display: block; + width: px2rem(86); + height: px2rem(86); + border-radius: 50%; + margin: 0 auto px2rem(4); + } + + p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #333333; + font-size: px2rem(26); + font-weight: 400; + margin-bottom: px2rem(2); + } + + b { + color: #A4ABB2; + font-size: px2rem(22); + } + } + + .line { + width: px2rem(657); + height: px2rem(1); + background: #B0BACD; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(291); + } + + .line1 { + width: px2rem(1); + height: px2rem(77); + background: #B0BACD; + position: absolute; + left: px2rem(221); + top: px2rem(349); + } + + .line2 { + width: px2rem(1); + height: px2rem(77); + background: #B0BACD; + position: absolute; + left: px2rem(478); + top: px2rem(349); + } + + .datas { + width: px2rem(657); + height: px2rem(93); + margin: px2rem(93) auto 0; + display: flex; + justify-content: space-between; + + div { + width: px2rem(191); + text-align: center; + + p { + color: #232424; + font-size: px2rem(36); + font-weight: 500; + margin-bottom: px2rem(23); + width: 100%; + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + vertical-align: middle; + } + b{ + display: inline-block; + vertical-align: middle; + } + } + + span { + color: #666666; + font-size: px2rem(28); + font-weight: 400; + } + } + } +} + +.box { + width: px2rem(710); + min-height: px2rem(800); + background: #fff; + border-radius: px2rem(30); + margin: 0 auto px2rem(30); + box-sizing: border-box; + padding: px2rem(37) px2rem(0) 0 px2rem(23); + + h3 { + color: #141515; + font-size: px2rem(34); + font-weight: 600; + margin: 0; + margin-left: px2rem(20); + margin-bottom: px2rem(38); + + span { + display: inline-block; + width: px2rem(5); + height: px2rem(28); + margin-left: px2rem(-13); + background: #62D0A8; + margin-right: px2rem(10); + } + } + + .box_in { + width: 100%; + height: 100%; + display: flex; + + .fistBox { + width: px2rem(180); + float: left; + + .fist { + width: px2rem(170); + height: px2rem(151); + margin-right: px2rem(30); + + .title { + color: #666666; + width: 100%; + text-align: center; + font-size: px2rem(28); + margin-bottom: px2rem(23); + white-space: nowrap; + } + + img { + display: block; + width: px2rem(32); + height: px2rem(32); + border-radius: 50%; + margin: 0 auto px2rem(5); + } + + p { + width: 100%; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #848D9C; + font-size: px2rem(24); + font-weight: 500; + } + + b { + color: #A4ABB2; + font-size: px2rem(18); + font-weight: 500; + text-align: center; + display: block; + width: 100%; + } + } + } + + .ordinaryBox { + height: 100%; + overflow-x: scroll; + + &::-webkit-scrollbar { + // display: none; + } + + .ordinaryBox_in { + width: 15rem; + + .ordinary { + width: px2rem(170); + height: px2rem(151); + float: left; + margin-right: px2rem(30); + + .title { + color: #666666; + width: 100%; + text-align: center; + font-size: px2rem(28); + margin-bottom: px2rem(23); + } + + p { + width: 100%; + text-align: center; + color: #848D9C; + font-size: px2rem(24); + font-weight: 500; + line-height: px2rem(90); + } + + .true { + color: #4EA686; + } + + .false { + color: #DC865D; + } + } + } + } + + .fistBox .fistAct { + .title { + opacity: 0; + } + } + + .ordinaryBox_inAct .ordinary { + .title { + opacity: 0; + margin-bottom: px2rem(-20); + } + } + } +} \ No newline at end of file diff --git a/view/molistar/modules/guildAr/guildInfoSet.html b/view/molistar/modules/guildAr/guildInfoSet.html index 9ffd0215..7d28413b 100644 --- a/view/molistar/modules/guildAr/guildInfoSet.html +++ b/view/molistar/modules/guildAr/guildInfoSet.html @@ -17,19 +17,35 @@ -