@font-face { font-family: "tttgbnumber"; src: url("./../../fonts/tttgbnumber.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: "HYWenHei-55W"; src: url("../../fonts/HYWenHei-85W.ttf"); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } body { font-size: 16px; width: 530px; color: #1E1F20; transform: scale(1.5); transform-origin: 0 0; } .container { width: 530px; padding: 20px 15px 10px 15px; background-color: #F5F6FB; } .head_box { border-radius: 15px; font-family: tttgbnumber, serif; padding: 10px 20px; position: relative; box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%); } .head_box .id_text { font-size: 24px; } .head_box .day_text { font-size: 20px; } .head_box .genshin_logo { position: absolute; top: 1px; right: 15px; width: 97px; } .base_info { position: relative; padding-left: 10px; } .uid { font-family: tttgbnumber, serif; } .pool_box { font-family: HYWenHei-55W, serif; border-radius: 12px; margin-top: 20px; margin-bottom: 20px; padding: 10px 5px 5px 5px; background: #FFF; box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%); position: relative; } .title_box { display: flex; align-items: center; margin-bottom: 10px; } .title { white-space: nowrap; max-width: 210px; overflow: hidden; } .name_box { display: flex; align-items: center; flex: 1; } .title_box .date { margin-right: 10px; } .list_box { display: flex; flex-wrap: wrap; } .item { margin: 0 0 10px 10px; border-radius: 7px; overflow: hidden; box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%); height: 70px; width: 70px; background: #E9E5DC; position: relative; } .item .role_img { width: 100%; overflow: hidden; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 0; /* filter: contrast(95%); */ } .item .num { position: absolute; top: 0; right: 0; z-index: 9; font-size: 18px; text-align: center; color: #FFF; border-radius: 3px; padding: 1px 5px; background: rgb(0 0 0 / 50%); font-family: "tttgbnumber", serif; } .label_301 { background-color: rgb(235 106 75); } .label_302 { background-color: #E69449; } .label_200 { background-color: #757CC8; } .label { color: #FFF; border-radius: 10px; font-size: 16px; padding: 2px 7px; vertical-align: 2px; } .bg5 { background-image: url(./../abyss/background/roleStarBg5.png); width: 100%; height: 70px; /* filter: brightness(1.1); */ background-size: 100%; background-repeat: no-repeat; } .bg4 { width: 100%; height: 70px; background-image: url(./../abyss/background/roleStarBg4.png); background-size: 100%; background-repeat: no-repeat; } .list_box .item .life1 { background-color: #62A8EA; } .list_box .item .life2 { background-color: #62A8EA; } .list_box .item .life3 { background-color: #45B97C; } .list_box .item .life4 { background-color: #45B97C; } .list_box .item .life5 { background-color: #FF5722; } .list_box .item .life6 { background-color: #FF5722; } .logo { font-size: 14px; font-family: "tttgbnumber", serif; text-align: center; color: #7994A7; } .hasMore { font-size: 12px; margin: -6px 0 10px 6px; color: #7F858A; }