310 lines
10 KiB
CSS
310 lines
10 KiB
CSS
@font-face {
|
|
font-family: "HYWenHei-55W";
|
|
src: url("../../font/HYWenHei-55W.ttf");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
font-family: HYWenHei-55W;
|
|
font-weight: bold;
|
|
}
|
|
|
|
body {
|
|
font-size: 18px;
|
|
color: #1e1f20;
|
|
font-family: PingFangSC-Medium, PingFang SC, sans-serif;
|
|
transform: scale(1.5);
|
|
transform-origin: 0 0;
|
|
width: 1200px;
|
|
}
|
|
|
|
.container {
|
|
width: 1200px;
|
|
height: 1835px;
|
|
background-color: #f5f6fb;
|
|
background-image: url("../../StarRail/img/note/bg.png");
|
|
}
|
|
|
|
.uid {
|
|
border-radius: 0 25px 25px 0px;
|
|
display: flex;
|
|
width: 670px;
|
|
height: 200px;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
margin-top: 195px;
|
|
margin-left: 50px;
|
|
background-image: url('../../StarRail/img/note/uidbg.png');
|
|
}
|
|
|
|
.uid_item {
|
|
/* background-color: #302b25; */
|
|
color: #fff;
|
|
margin-left: 50px;
|
|
align-items: center;
|
|
justify-content: left;
|
|
display: flex;
|
|
padding: 8px 10px;
|
|
font-size: 45px;
|
|
height: 100px;
|
|
border-radius: 0 12px 0 0px;
|
|
font-family: MiSans-Demibold;
|
|
}
|
|
|
|
.uid_span {
|
|
text-indent: 1em;
|
|
font-size: 48px;
|
|
display: flex;
|
|
}
|
|
|
|
.uid_name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 10em;
|
|
}
|
|
|
|
.day_span {
|
|
text-indent: 1em;
|
|
font-size: 48px;
|
|
display: flex;
|
|
margin-left: -30px;
|
|
}
|
|
|
|
.uid_item:nth-child(2) {
|
|
/* background-color: #595045; */
|
|
border-radius: 0 0 12px 0px;
|
|
font-size: 40px;
|
|
font-family: MiSans-Medium;
|
|
}
|
|
|
|
.uid_text {
|
|
width: 150px;
|
|
text-align: right;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.title_date {
|
|
width: 370px;
|
|
height: 470px;
|
|
position: absolute;
|
|
right: 83px;
|
|
top: 27px;
|
|
padding: 10px;
|
|
transform: rotate(4deg);
|
|
background-color: #fff;
|
|
border-bottom: 10px solid #b47f4c;
|
|
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.icon {
|
|
width: 350px;
|
|
height: 350px;
|
|
}
|
|
|
|
.title_date_text {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
font-size: 36px;
|
|
color: #808080;
|
|
height: 100px;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.subject {
|
|
width: 1000px;
|
|
margin: 0 auto;
|
|
margin-top: 60px;
|
|
height: 400px;
|
|
background-color: #e5e5e5;
|
|
padding-left: 60px;
|
|
}
|
|
|
|
.subject_note {
|
|
font-size: 24px;
|
|
margin-top: 49px;
|
|
padding-top: 24px;
|
|
color: #000000;
|
|
}
|
|
|
|
.subject_note span:nth-child(1) {
|
|
font-size: 82px;
|
|
color: #b47f4c;
|
|
}
|
|
|
|
.subject_solid {
|
|
display: flex;
|
|
width: 880px;
|
|
border-radius: 10px;
|
|
background-color: #a1a1a1;
|
|
height: 20px;
|
|
margin-top: 44px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.subject_solid span {
|
|
background-color: #b47f4c;
|
|
width: 50%;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.data-box {
|
|
display: flex;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.data-box .head {
|
|
margin-bottom: 6px;
|
|
font-weight: 700;
|
|
font-size: 48px;
|
|
}
|
|
|
|
.month .primogems {
|
|
background: url(data:image/png;base64,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) no-repeat;
|
|
background-size: auto 100%;
|
|
width: 500px;
|
|
height: 120px;
|
|
line-height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: -50px;
|
|
}
|
|
|
|
.primogems .icon-ys {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-left: 20px;
|
|
background: url(https://webstatic.mihoyo.com/upload/event/2023/03/28/77cb5426637574ba524ac458fa963da0_8938800417123864478.png) no-repeat 50% / cover;
|
|
;
|
|
}
|
|
|
|
.primogems .icon-mola {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-left: 20px;
|
|
background: url(../../StarRail/img/other/rails_pass.png) no-repeat 50% / cover;
|
|
}
|
|
|
|
.primogems .text {
|
|
margin-left: 35px;
|
|
white-space: nowrap;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.day {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.day .primogems {
|
|
background: url(data:image/png;base64,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) no-repeat;
|
|
background-size: auto 100%;
|
|
width: 500px;
|
|
height: 120px;
|
|
line-height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
.chart-box .chart-info {
|
|
display: flex;
|
|
}
|
|
|
|
.chart-box .head {
|
|
margin-bottom: 30px;
|
|
font-weight: 800;
|
|
font-size: 48px;
|
|
margin-left: 70px;
|
|
}
|
|
|
|
.title_wt {
|
|
margin: 30px 0;
|
|
background-color: #b47f4c;
|
|
display: flex;
|
|
height: 80px;
|
|
width: 330px;
|
|
margin-left: 100px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.title_wt div {
|
|
font-size: 38px;
|
|
color: #fff;
|
|
background-color: #302b25;
|
|
height: 80px;
|
|
display: flex;
|
|
margin-left: 30px;
|
|
padding-left: 30px;
|
|
justify-content: left;
|
|
align-items: center;
|
|
width: calc(100% - 30px);
|
|
}
|
|
|
|
#chartContainer {
|
|
width: 440px;
|
|
height: 440px;
|
|
background: url(../../StarRail/img/other/chart.png) no-repeat 50% / cover;
|
|
margin-left: 70px;
|
|
}
|
|
|
|
.tooltip {
|
|
margin-left: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tooltip li {
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.tooltip li i {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.tooltip li .action {
|
|
width: 250px;
|
|
}
|
|
|
|
.tooltip li em {
|
|
font-size: 40px;
|
|
color: #28384d;
|
|
font-style: normal;
|
|
width: 30px;
|
|
}
|
|
|
|
.tooltip li .num {
|
|
width: 180px;
|
|
}
|
|
|
|
.tooltip li .percent {
|
|
width: 10px;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
bottom: 90px;
|
|
left: 130px;
|
|
color: #fff;
|
|
} |