508 lines
14 KiB
CSS
508 lines
14 KiB
CSS
|
@font-face {
|
||
|
|
font-family: "tttgbnumber";
|
||
|
|
src: url("../../../../../resources/font/tttgbnumber.ttf");
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-size: 16px;
|
||
|
|
color: #1e1f20;
|
||
|
|
max-width: 680px;
|
||
|
|
transform: scale(1.5);
|
||
|
|
transform-origin: 0 0;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
padding: 20px 20px;
|
||
|
|
background-color: #f5f1eb;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.main_box {
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
.base_info {
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: 9px;
|
||
|
|
color: #504c49;
|
||
|
|
font-family: tttgbnumber;
|
||
|
|
font-size: 24px;
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
.base_info .id {
|
||
|
|
flex: 1;
|
||
|
|
line-height: 18px;
|
||
|
|
padding-left: 10px;
|
||
|
|
}
|
||
|
|
.base_info .id:before {
|
||
|
|
content: " ";
|
||
|
|
position: absolute;
|
||
|
|
width: 5px;
|
||
|
|
height: 24px;
|
||
|
|
border-radius: 1px;
|
||
|
|
left: 10px;
|
||
|
|
top: -3px;
|
||
|
|
background: #d3bc8d;
|
||
|
|
}
|
||
|
|
.base_info .day {
|
||
|
|
line-height: 18px;
|
||
|
|
}
|
||
|
|
.ele_info {
|
||
|
|
display: flex;
|
||
|
|
margin: 30px 0px 14px 0px;
|
||
|
|
padding: 0 10px 10px 0px;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row nowrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.tab-line {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 2%;
|
||
|
|
z-index: 1;
|
||
|
|
height: 1px;
|
||
|
|
background: #eae4db;
|
||
|
|
width: 96%;
|
||
|
|
}
|
||
|
|
.ele_info .area {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.tab-item-icon {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
position: absolute;
|
||
|
|
background: #c3b6aa;
|
||
|
|
z-index: 2;
|
||
|
|
border-radius: 50%;
|
||
|
|
left: 21px;
|
||
|
|
top: 7px;
|
||
|
|
}
|
||
|
|
.tab-item-left {
|
||
|
|
background: url(data:image/png;base64,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);
|
||
|
|
background-size: 80px 50px;
|
||
|
|
height: 50px;
|
||
|
|
width: 80px;
|
||
|
|
z-index: 1;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
.tab-item-middle {
|
||
|
|
z-index: 0;
|
||
|
|
height: 50px;
|
||
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAABAAgMAAABNSE7QAAAACVBMVEUAAADq387x6t7Yd13LAAAAAXRSTlMAQObYZgAAABNJREFUCNdjWACEIBBAZwgEILsBAMsUAXqDjfEAAAAASUVORK5CYII=);
|
||
|
|
background-repeat: repeat-x;
|
||
|
|
background-size: contain;
|
||
|
|
position: absolute;
|
||
|
|
left: 40px;
|
||
|
|
right: 40px;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
.tab-item-right {
|
||
|
|
background: url(data:image/png;base64,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);
|
||
|
|
background-size: 80px 50px;
|
||
|
|
height: 50px;
|
||
|
|
width: 80px;
|
||
|
|
z-index: 1;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
.tab-item-text {
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
color: #504c49;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 26px;
|
||
|
|
height: 50px;
|
||
|
|
line-height: 50px;
|
||
|
|
padding-left: 70px;
|
||
|
|
padding-right: 40px;
|
||
|
|
}
|
||
|
|
.ele_box {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.ele_box .ele_name {
|
||
|
|
font-size: 26px;
|
||
|
|
color: #504c49;
|
||
|
|
font-weight: 600;
|
||
|
|
line-height: 50px;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
.ele_box .ele_img {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.ele_box .ele_img .img_item {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
background-image: url(./item_bg.png);
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
margin-right: 3px;
|
||
|
|
}
|
||
|
|
.ele_box .ele_img .img_item img {
|
||
|
|
padding: 4px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.item_box {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.item {
|
||
|
|
margin: 0px 0 10px 10px;
|
||
|
|
border-radius: 7px;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 3px 6px 0 rgb(132 93 90 / 40%);
|
||
|
|
width: 95px;
|
||
|
|
background: #e9e5dc;
|
||
|
|
}
|
||
|
|
.role_box {
|
||
|
|
overflow: hidden;
|
||
|
|
height: 95px;
|
||
|
|
width: 95px;
|
||
|
|
position: relative;
|
||
|
|
background: #e9e5dc;
|
||
|
|
}
|
||
|
|
.role_box .role_img {
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
/*filter: contrast(95%);*/
|
||
|
|
}
|
||
|
|
.talent {
|
||
|
|
height: 23px;
|
||
|
|
padding: 3px 3px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #222;
|
||
|
|
font-family: tttgbnumber;
|
||
|
|
}
|
||
|
|
.talent-item {
|
||
|
|
width: 20px;
|
||
|
|
height: 16px;
|
||
|
|
line-height: 17px;
|
||
|
|
margin: 0 3px;
|
||
|
|
text-align: center;
|
||
|
|
display: block;
|
||
|
|
background-size: contain;
|
||
|
|
opacity: 0.8;
|
||
|
|
position: relative;
|
||
|
|
border-radius: 3px;
|
||
|
|
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
.bg105 {
|
||
|
|
background-image: url(../../img/other/bg105.png);
|
||
|
|
width: 100%;
|
||
|
|
height: 95px;
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.bg5 {
|
||
|
|
background-image: url(../../img/other/bg5.png);
|
||
|
|
width: 100%;
|
||
|
|
height: 95px;
|
||
|
|
/*filter: brightness(1.1);*/
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.bg4 {
|
||
|
|
width: 100%;
|
||
|
|
height: 95px;
|
||
|
|
background-image: url(../../img/other/bg4.png);
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.item .text_box {
|
||
|
|
font-size: 12px;
|
||
|
|
background: #e9e5dc;
|
||
|
|
padding: 5px 0px 4px 0px;
|
||
|
|
font-family: tttgbnumber;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
.item .text_box .weapon_box {
|
||
|
|
flex: 0 0 34px;
|
||
|
|
width: 34px;
|
||
|
|
height: 34px;
|
||
|
|
padding: 2px;
|
||
|
|
border-radius: 5px;
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
overflow: hidden;
|
||
|
|
margin-left: 3px;
|
||
|
|
}
|
||
|
|
.item .text_box .weapon_boder {
|
||
|
|
border: 1px solid #d3bc8d;
|
||
|
|
border-radius: 5px;
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.item .text_box .weapon_img {
|
||
|
|
width: 100%;
|
||
|
|
transform: scale(1.2, 1.2);
|
||
|
|
}
|
||
|
|
.item .text_box .weapon_name_box {
|
||
|
|
margin-left: 3px;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.item .text_box .weapon_name_box .weapon_level {
|
||
|
|
margin-top: 2px;
|
||
|
|
}
|
||
|
|
.item .text_box .weapon_affix {
|
||
|
|
border-radius: 2px;
|
||
|
|
background-color: #ff5722;
|
||
|
|
padding: 2px 3px;
|
||
|
|
color: #fff;
|
||
|
|
display: inline-block;
|
||
|
|
transform: scale(0.8);
|
||
|
|
transform-origin: 12px 7px;
|
||
|
|
}
|
||
|
|
.role_box .fill_img {
|
||
|
|
position: absolute;
|
||
|
|
width: 15px;
|
||
|
|
right: 0;
|
||
|
|
bottom: 17px;
|
||
|
|
}
|
||
|
|
.role_box .desc {
|
||
|
|
font-weight: 500;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 22px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
color: #ececec;
|
||
|
|
width: 100%;
|
||
|
|
height: 22px;
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: tttgbnumber;
|
||
|
|
}
|
||
|
|
.role_box .role_name {
|
||
|
|
/* overflow: hidden; */
|
||
|
|
white-space: nowrap;
|
||
|
|
margin-top: 5px;
|
||
|
|
font-weight: 500;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 14px;
|
||
|
|
/*margin-top: 5px;*/
|
||
|
|
}
|
||
|
|
.role_box .life {
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
right: 0px;
|
||
|
|
z-index: 9;
|
||
|
|
font-size: 16px;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 2px;
|
||
|
|
padding: 1px 3px;
|
||
|
|
border-radius: 3px;
|
||
|
|
font-family: "tttgbnumber";
|
||
|
|
}
|
||
|
|
.life1 {
|
||
|
|
background-color: #62a8ea;
|
||
|
|
}
|
||
|
|
.life2 {
|
||
|
|
background-color: #62a8ea;
|
||
|
|
}
|
||
|
|
.life3 {
|
||
|
|
background-color: #45b97c;
|
||
|
|
}
|
||
|
|
.life4 {
|
||
|
|
background-color: #45b97c;
|
||
|
|
}
|
||
|
|
.life5 {
|
||
|
|
background-color: #ff5722;
|
||
|
|
}
|
||
|
|
.life6 {
|
||
|
|
background-color: #ff5722;
|
||
|
|
}
|
||
|
|
.base_info span {
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.avatar {
|
||
|
|
height: 24px;
|
||
|
|
width: 24px;
|
||
|
|
background-color: #ffb285;
|
||
|
|
vertical-align: -5px;
|
||
|
|
margin-left: 2px;
|
||
|
|
margin-right: 3px;
|
||
|
|
border: 1px solid #ffb285;
|
||
|
|
border-radius: 100%;
|
||
|
|
}
|
||
|
|
.heart {
|
||
|
|
background-image: url(./心形.png);
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
z-index: 10;
|
||
|
|
color: #fff;
|
||
|
|
font-family: tttgbnumber;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 12px;
|
||
|
|
margin-left: 5px;
|
||
|
|
display: inline-block;
|
||
|
|
width: 15px;
|
||
|
|
}
|
||
|
|
.fetter {
|
||
|
|
display: inline-block;
|
||
|
|
transform: scale(0.8);
|
||
|
|
}
|
||
|
|
.explain {
|
||
|
|
color: #757c83;
|
||
|
|
font-size: 16px;
|
||
|
|
position: absolute;
|
||
|
|
left: 30px;
|
||
|
|
bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weapon_box {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.weapon_item {
|
||
|
|
width: 65px;
|
||
|
|
margin: 0px 0 10px 12px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.weapon_role_box {
|
||
|
|
overflow: hidden;
|
||
|
|
height: 80px;
|
||
|
|
border-radius: 5px;
|
||
|
|
position: relative;
|
||
|
|
/*border: 2px solid #d3bc8d;*/
|
||
|
|
background: #e9e5dc;
|
||
|
|
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
|
||
|
|
}
|
||
|
|
.weapon_role_box .weapon_role_img {
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
/*filter: contrast(95%);*/
|
||
|
|
}
|
||
|
|
.weapon_bg5 {
|
||
|
|
background-image: url(../../img/other/bg5.png);
|
||
|
|
width: 100%;
|
||
|
|
height: 70px;
|
||
|
|
/*filter: brightness(1.1);*/
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.weapon_bg4 {
|
||
|
|
width: 100%;
|
||
|
|
height: 70px;
|
||
|
|
background-image: url(../../img/other/bg4.png);
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.weapon_bg3 {
|
||
|
|
width: 100%;
|
||
|
|
height: 70px;
|
||
|
|
background-image: url(../../img/other/bg3.png);
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.weapon_bg2 {
|
||
|
|
width: 100%;
|
||
|
|
height: 70px;
|
||
|
|
background-image: url(../../img/other/bg3.png);
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.weapon_bg1 {
|
||
|
|
width: 100%;
|
||
|
|
height: 70px;
|
||
|
|
background-image: url(../../img/other/bg3.png);
|
||
|
|
background-size: 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.weapon_role_box .fill_img {
|
||
|
|
position: absolute;
|
||
|
|
width: 15px;
|
||
|
|
right: 0;
|
||
|
|
bottom: 17px;
|
||
|
|
}
|
||
|
|
.weapon_role_box .desc_1 {
|
||
|
|
font-weight: 500;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 18px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
background: #e9e5dc;
|
||
|
|
width: 100%;
|
||
|
|
height: 18px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: "tttgbnumber";
|
||
|
|
}
|
||
|
|
.role_name {
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
margin-top: 5px;
|
||
|
|
font-weight: 500;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 14px;
|
||
|
|
/*margin-top: 5px;*/
|
||
|
|
}
|
||
|
|
.weapon_role_box .life {
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
z-index: 9;
|
||
|
|
font-size: 13px;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 2px;
|
||
|
|
padding: 1px 4px;
|
||
|
|
border-radius: 3px;
|
||
|
|
font-family: "tttgbnumber";
|
||
|
|
}
|
||
|
|
.life1 {
|
||
|
|
background-color: #62a8ea;
|
||
|
|
}
|
||
|
|
.life2 {
|
||
|
|
background-color: #62a8ea;
|
||
|
|
}
|
||
|
|
.life3 {
|
||
|
|
background-color: #62a8ea;
|
||
|
|
}
|
||
|
|
.life4 {
|
||
|
|
background-color: #ff5722;
|
||
|
|
}
|
||
|
|
.life5 {
|
||
|
|
background-color: #ff5722;
|
||
|
|
}
|
||
|
|
.weapon_user {
|
||
|
|
position: absolute;
|
||
|
|
top: -5px;
|
||
|
|
right: -5px;
|
||
|
|
z-index: 9;
|
||
|
|
font-size: 12px;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
padding: 1px 3px;
|
||
|
|
border-radius: 100%;
|
||
|
|
border: 1px solid #fff;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background-color: #4e5362;
|
||
|
|
}
|
||
|
|
.user_img {
|
||
|
|
width: 32px;
|
||
|
|
position: absolute;
|
||
|
|
top: -12px;
|
||
|
|
right: -5px;
|
||
|
|
}
|