Files
eparty-h5/view/eparty/modules/guild-ar/css/index.scss

1083 lines
26 KiB
SCSS

@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
// height: px2rem(1334);
background: #fff;
overflow-x: hidden;
}
.back {
width: 100%;
height: px2rem(44);
line-height: px2rem(44);
position: fixed;
left: 0;
top: px2rem(110);
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);
}
b {
width: 75%;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: none;
}
}
.header {
width: px2rem(750);
height: px2rem(440);
background: url(../images/header.png) no-repeat;
background-size: cover;
position: relative;
margin: 0 auto px2rem(0);
.tx {
width: px2rem(154);
height: px2rem(154);
position: absolute;
left: px2rem(34);
top: px2rem(216);
border-radius: px2rem(16);
border: px2rem(2) solid #FFE8A9;
}
.ts {
width: px2rem(208);
height: px2rem(208);
position: absolute;
top: px2rem(130);
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: none;
}
.audit {
width: px2rem(106);
height: px2rem(34);
line-height: px2rem(34);
text-align: center;
position: absolute;
border-radius: px2rem(34);
top: px2rem(356);
left: px2rem(56);
color: #fff;
font-size: px2rem(22);
font-weight: 500;
background: #D42E00;
display: none;
white-space: nowrap;
}
.nick {
width: 55%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
font-size: px2rem(40);
font-weight: bold;
position: absolute;
top: px2rem(242);
left: px2rem(220);
}
.id {
width: 55%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
font-size: px2rem(26);
font-weight: 500;
position: absolute;
top: px2rem(308);
left: px2rem(220);
}
.guildNick {
width: 100%;
position: absolute;
left: 0;
top: px2rem(473);
color: #FFFFFF;
opacity: 0.8;
font-size: px2rem(24);
text-align: center;
display: none;
}
.inveMember {
min-width: px2rem(118);
height: px2rem(54);
border-radius: px2rem(54);
line-height: px2rem(54);
text-align: center;
background: linear-gradient(90deg, #7CDD9B, #62D0A8);
color: #fff;
font-size: px2rem(28);
position: absolute;
top: px2rem(240);
right: px2rem(32);
z-index: 5;
padding: 0 px2rem(10);
img {
display: inline-block;
width: px2rem(38);
height: px2rem(42);
vertical-align: middle;
margin-top: -0.1rem;
display: none;
}
span {
display: inline-block;
vertical-align: middle;
}
}
.quitAgency {
display: none;
min-width: px2rem(118);
height: px2rem(54);
border-radius: px2rem(54);
line-height: px2rem(54);
text-align: center;
background: #413828;
color: #AFB1B3;
font-size: px2rem(28);
position: absolute;
top: px2rem(310);
right: px2rem(32);
z-index: 5;
padding: 0 px2rem(10);
img {
display: inline-block;
width: px2rem(38);
height: px2rem(42);
vertical-align: middle;
margin-top: -0.1rem;
display: none;
}
span {
display: inline-block;
vertical-align: middle;
}
}
}
.headerBox {
width: px2rem(750);
border-radius: px2rem(20);
margin: px2rem(-30) auto px2rem(0);
position: relative;
background: #fff;
overflow: hidden;
.headerBox_in {
width: px2rem(686);
// max-height: px2rem(230);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: px2rem(24) auto 0;
div {
width: px2rem(334);
height: px2rem(104);
line-height: px2rem(104);
margin-bottom: px2rem(18);
background: #F2F3F7;
border-radius: px2rem(24);
text-align: left;
box-sizing: border-box;
padding: 0 px2rem(10);
position: relative;
word-spacing: normal;
white-space: nowrap;
img {
display: inline;
width: px2rem(52);
height: px2rem(52);
vertical-align: middle;
}
.why {
width: px2rem(40);
height: px2rem(40);
margin-top: px2rem(-5);
// right: px2rem(50);
// top: 53%;
// transform: translateY(-50%);
// position: absolute;
}
span {
display: inline-block;
color: #313131;
font-size: px2rem(30);
font-weight: 500;
}
}
.E3F2FF {
background: #E3F2FF;
}
.FFEFE5 {
background: #FFEFE5;
}
.Game_incomeBox {
width: 100%;
background: #FFEFE5;
}
.Diamond_incomeBox {
width: 100%;
background: #E3F2FF;
}
}
}
.weeklyRewards {
width: px2rem(750);
margin: px2rem(26) auto 0;
// display: none;
.top {
width: 100%;
box-sizing: border-box;
padding: 0 px2rem(25);
height: px2rem(50);
line-height: px2rem(50);
margin-top: px2rem(31);
position: relative;
span {
float: left;
width: px2rem(8);
height: px2rem(34);
background: #C859FF;
border-radius: px2rem(692);
margin: px2rem(8) px2rem(10) 0;
display: block;
}
b {
float: left;
font-size: px2rem(36);
color: #313131;
font-weight: bold;
display: block;
margin-right: px2rem(7);
}
i {
display: block;
font-size: px2rem(36);
color: #313131;
float: left;
font-style: normal;
}
img {
display: block;
float: right;
width: px2rem(42);
height: px2rem(42);
margin-top: px2rem(4);
}
}
.weeklyRewards_in {
background: linear-gradient(180deg, #533CFF 0%, #3DA8FF 100%);
border-radius: px2rem(32);
margin: px2rem(20) px2rem(32);
padding: px2rem(26) px2rem(22);
.Total_coins {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(28);
color: #FFFFFF;
line-height: px2rem(40);
font-style: normal;
text-transform: none;
}
.Countdown_box {
margin: px2rem(26) 0;
.Countdown {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #FFFFFF;
line-height: px2rem(34);
font-style: normal;
text-transform: none;
}
.day_txt,
.hour_txt,
.min_txt,
.secs_txt {
background: #FFFFFF;
border-radius: px2rem(6);
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: px2rem(24);
color: #6152FF;
font-style: normal;
text-transform: none;
padding: px2rem(2) px2rem(4);
}
.Day,
span {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #FFFFFF;
line-height: px2rem(34);
font-style: normal;
text-transform: none;
}
}
.Level_box {
background: #FFFFFF;
border-radius: px2rem(16);
padding: px2rem(20) px2rem(18);
.Host_Level {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #313131;
line-height: px2rem(34);
font-style: normal;
text-transform: none;
}
.progress_box {
position: relative;
/* 进度条样式 */
.progress-container {
// width: 100%;
height: px2rem(34);
background-color: #F0D2FF;
overflow: hidden;
margin: px2rem(10) px2rem(20);
.progress-bar {
height: 100%;
background: #C859FF;
transition: width 0.3s ease;
position: relative;
}
}
.preLevel {
background: url(../images/level_bg.png) no-repeat;
background-size: cover;
width: px2rem(48);
height: px2rem(48);
position: absolute;
z-index: 99;
left: px2rem(-10);
top: px2rem(-6);
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(20);
color: #313131;
font-style: normal;
text-transform: none;
display: flex;
align-items: center;
justify-content: center;
}
.curLevel {
background: url(../images/level_bg.png) no-repeat;
background-size: cover;
width: px2rem(48);
height: px2rem(48);
position: absolute;
z-index: 99;
right: px2rem(-10);
top: px2rem(-6);
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(20);
color: #313131;
font-style: normal;
text-transform: none;
display: flex;
align-items: center;
justify-content: center;
}
.processNum_box {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
left: 50%;
translate: -50%;
.processNum {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: px2rem(24);
color: #313131;
font-style: normal;
text-transform: none;
}
img {
width: px2rem(34);
height: px2rem(34);
}
}
}
.bottom_box {
display: flex;
align-items: center;
justify-content: space-between;
.preMaxNum_box {
display: flex;
align-items: center;
.preMaxNum {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #7B7B7D;
line-height: px2rem(34);
font-style: normal;
text-transform: none;
}
img {
width: px2rem(22);
height: px2rem(22);
}
}
.maxNum_box {
display: flex;
align-items: center;
.maxNum {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #7B7B7D;
line-height: px2rem(34);
font-style: normal;
text-transform: none;
}
img {
width: px2rem(22);
height: px2rem(22);
}
}
}
}
.go_weeklyRewards {
display: flex;
align-items: center;
margin-top: px2rem(20);
.Reward_detail {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #FFFFFF;
font-style: normal;
text-transform: none;
}
img {
width: px2rem(34);
height: px2rem(34);
}
}
}
}
.agencylevel {
width: px2rem(750);
height: px2rem(272);
margin: px2rem(26) auto 0;
.top {
width: 100%;
box-sizing: border-box;
padding: 0 px2rem(25);
height: px2rem(50);
line-height: px2rem(50);
margin-top: px2rem(31);
position: relative;
span {
float: left;
width: px2rem(8);
height: px2rem(34);
background: #C859FF;
border-radius: px2rem(692);
margin: px2rem(8) px2rem(10) 0;
display: block;
}
b {
float: left;
font-size: px2rem(36);
color: #313131;
font-weight: bold;
display: block;
margin-right: px2rem(7);
}
i {
display: block;
font-size: px2rem(36);
color: #313131;
float: left;
font-style: normal;
}
}
.agencylevelInfo {
width: px2rem(686);
height: px2rem(202);
background: #F5EBFF;
border-radius: px2rem(16);
margin: px2rem(20) auto 0;
box-sizing: border-box;
padding: px2rem(18);
h3 {
width: 100%;
display: block;
color: #313131;
font-size: px2rem(26);
margin-bottom: px2rem(20);
font-weight: 600;
b {
color: #313131;
font-size: px2rem(26);
}
}
h4 {
color: #7B7B7D;
font-weight: 400;
margin-bottom: px2rem(20);
}
.line {
width: px2rem(650);
height: px2rem(10);
position: relative;
background: #C1B2E8;
border-radius: px2rem(10);
overflow: hidden;
margin-bottom: px2rem(20);
.line_in {
position: absolute;
top: 0;
left: 0;
width: 0%;
background: #C859FF;
height: 100%;
}
}
.bottom {
width: 100%;
display: flex;
justify-content: space-between;
color: #7B7B7D;
font-size: px2rem(24);
font-weight: 400;
}
}
}
.guildList {
width: px2rem(750);
// height: 11rem;
// height: 6.7rem;
border-radius: px2rem(20);
margin: px2rem(0) auto 0;
position: relative;
background: #fff;
overflow: hidden;
.top {
width: 100%;
box-sizing: border-box;
padding: 0 px2rem(25);
height: px2rem(50);
line-height: px2rem(50);
margin-top: px2rem(31);
position: relative;
// margin-left: px2rem(-13);
span {
float: left;
width: px2rem(8);
height: px2rem(34);
background: #C859FF;
border-radius: px2rem(692);
margin: px2rem(8) px2rem(10) 0;
display: block;
}
b {
float: left;
font-size: px2rem(36);
color: #313131;
font-weight: bold;
display: block;
margin-right: px2rem(7);
}
i {
display: block;
font-size: px2rem(36);
color: #313131;
float: left;
font-style: normal;
}
img {
float: right;
display: block;
width: px2rem(32);
height: px2rem(32);
position: absolute;
left: 6.45rem;
top: 51%;
transform: translateY(-50%);
z-index: 2;
display: none;
}
input {
border: none;
outline: none;
background: #F5F7F9;
width: px2rem(260);
height: px2rem(50);
border-radius: px2rem(50);
box-sizing: border-box;
padding-left: px2rem(54);
// position: absolute;
// left: 3.7rem;
// top: 50%;
// transform: translateY(-50%);
color: #333;
display: none;
float: right;
&::placeholder {
color: #BCBDCB;
font-size: px2rem(22);
}
}
}
ul {
width: 100%;
// height: 11rem;
height: 6.7rem;
margin: px2rem(19) auto 0;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
li {
width: px2rem(686);
height: px2rem(146);
box-sizing: border-box;
overflow: hidden;
margin: 0 auto px2rem(33);
position: relative;
box-sizing: border-box;
padding-left: px2rem(10);
background: #F2F3F7;
border-radius: px2rem(24);
.tx {
width: px2rem(110);
height: px2rem(110);
border-radius: 50%;
float: left;
margin-right: px2rem(11);
margin-left: px2rem(10);
display: block;
margin-top: px2rem(18)
}
.user {
float: left;
width: 6rem;
p {
color: #515665;
font-size: px2rem(28);
font-weight: bold;
display: inline-block;
margin-right: px2rem(8);
margin-bottom: px2rem(5);
max-width: 2.7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
padding-top: px2rem(45);
}
b {
display: block;
color: #A4ABB2;
font-size: px2rem(24);
}
.sex {
width: px2rem(18);
height: px2rem(18);
display: inline-block;
margin-top: px2rem(45);
margin-right: px2rem(8);
}
.wealth,
.charm {
display: inline-block;
width: px2rem(72);
height: px2rem(36);
margin-top: px2rem(37);
}
}
.but {
width: px2rem(88);
height: px2rem(42);
background: #62D0A8;
border-radius: px2rem(42);
position: absolute;
right: px2rem(26);
top: 0.69rem;
text-align: center;
color: #fff;
line-height: px2rem(42);
font-size: px2rem(22);
font-weight: 400;
}
.chairman {
width: px2rem(90);
height: px2rem(34);
line-height: px2rem(34);
border-radius: px2rem(34);
text-align: center;
color: #fff;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: px2rem(28);
top: px2rem(98);
background: #C859FF;
display: none;
}
.administrator {
width: px2rem(90);
height: px2rem(34);
line-height: px2rem(34);
border-radius: px2rem(34);
text-align: center;
color: #333;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: px2rem(28);
top: px2rem(98);
background: linear-gradient(-90deg, #FBE1FF, #F090FF);
display: none;
}
}
}
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 999;
display: none;
.pub_in {
background: #fff;
border-radius: px2rem(30);
box-sizing: border-box;
padding: px2rem(50) px2rem(34);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
h1 {
font-weight: 500;
font-size: px2rem(30);
color: #313131;
text-align: center;
width: 100%;
font-weight: 600;
padding-bottom: px2rem(35);
}
p {
font-size: px2rem(26);
font-weight: bold;
font-weight: 400;
color: #313131;
line-height: px2rem(36);
strong {
font-weight: 600;
}
}
.butBox {
width: px2rem(514);
display: flex;
justify-content: space-between;
margin-top: px2rem(50);
margin: px2rem(50) auto 0;
div {
width: px2rem(240);
height: px2rem(76);
text-align: center;
line-height: px2rem(76);
border-radius: px2rem(76);
font-size: px2rem(34);
font-weight: bold;
}
.close {
background: #F5F5F5;
color: #999999;
}
.ok {
background: linear-gradient(90deg, #E29030 0%, #FCC074 100%);
color: #fff;
}
}
}
}
.arabic {
.weeklyRewards .weeklyRewards_in .box .left {
float: right;
}
.weeklyRewards .weeklyRewards_in .box .right {
float: left;
}
.weeklyRewards .weeklyRewards_in .box .right .line .line_in {
left: auto;
right: 0;
}
.back img {
left: auto;
right: 0.24rem;
transform: rotate(180deg);
}
.header .tx {
left: auto;
right: 0.45333rem;
}
.header .nick {
left: auto;
right: 2.93333rem;
}
.header .id {
left: auto;
right: 2.93333rem;
}
.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: px2rem(28);
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;
}
.headerBox .headerBox_in div span {
font-size: px2rem(25);
}
}
.english {
.header .headerBox {
width: 8rem;
div {
width: 3.9rem;
span {
font-size: px2rem(16);
}
}
}
.headerBox .headerBox_in .guildInfoSet span,
.headerBox .headerBox_in .adminSet span {
// font-size: px2rem(20);
}
}
.arabic {
.header .inveMember,
.quitAgency {
right: auto;
left: px2rem(32);
}
.headerBox .headerBox_in div {
text-align: right;
}
.header .headerBox {
width: 8rem;
div {
width: 3.9rem;
span {
font-size: px2rem(22);
}
}
}
.audit {
left: auto;
right: px2rem(43);
width: px2rem(140);
}
.guildList .top b {
float: right;
}
.guildList .top i {
float: right;
}
.guildList .top input {
float: left;
}
.guildList .top img {
right: 6.3rem;
left: auto;
transform: rotate(100deg);
top: 0.1rem;
}
.guildList .top span {
float: right;
display: block;
}
.agencylevel .agencylevelInfo .line .line_in {
left: auto;
right: 0;
}
.weeklyRewards .weeklyRewards_in .go_weeklyRewards img{
transform: rotate(180deg);
}
}