447 lines
9.3 KiB
Plaintext
447 lines
9.3 KiB
Plaintext
@font-face {
|
|
font-family: pangmenzhengdao;
|
|
src: url('../assets/fonts/pangmenzhengdao.ttf');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: '阿里妈妈东方大楷 Regular';
|
|
font-weight: normal;
|
|
src: url('../assets/fonts/AlimamaDongFangDaKai-Regular.ttf') format('truetype');
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: '站酷庆科黄油体';
|
|
font-weight: normal;
|
|
src: url('../assets/fonts/zhankuqingke.ttf') format('truetype');
|
|
font-display: swap;
|
|
}
|
|
|
|
.box {
|
|
transform-origin: 0 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.blackBack {
|
|
background-image: url('../assets/login/bg.png');
|
|
width: 100%;
|
|
// height: calc(100% - 10px); // 进入全屏
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.backImage {
|
|
background-color: #021428; //021428
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.9;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.header {
|
|
background-image: url('../assets/layout/full-header.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
height: 100px;
|
|
width: 100%;
|
|
display: flex;
|
|
// align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
}
|
|
.headerText {
|
|
color: #fff;
|
|
font-size: 32px;
|
|
// font-weight: bold;
|
|
margin-top: 10px;
|
|
font-family: 'pangmenzhengdao';
|
|
}
|
|
.row {
|
|
// height: calc(65% - 200px);
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
.rowTwo {
|
|
height: 30%;
|
|
width: 100%;
|
|
}
|
|
.boxleft {
|
|
height: 100%;
|
|
// width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.risklevel {
|
|
height: 60%;
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.risklevelOne {
|
|
height: 40%;
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.risklevelTwo {
|
|
height: 100%;
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.riskChange {
|
|
width: 40%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 20px 5px;
|
|
}
|
|
.riskChangeTwo {
|
|
width: 60%;
|
|
height: 100%;
|
|
padding: 20px 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.gradient {
|
|
background-image: linear-gradient(
|
|
250deg,
|
|
rgba(47, 109, 255, 1) 0%,
|
|
rgba(255, 255, 255, 54) 50%,
|
|
rgba(47, 109, 255, 1) 100%
|
|
);
|
|
width: 60%;
|
|
height: 30%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2px;
|
|
// margin: 10px;
|
|
}
|
|
.gradientTwo {
|
|
background-image: linear-gradient(
|
|
250deg,
|
|
rgba(47, 109, 255, 1) 0%,
|
|
rgba(255, 255, 255, 54) 50%,
|
|
rgba(47, 109, 255, 1) 100%
|
|
);
|
|
width: 80%;
|
|
height: 90%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 2px;
|
|
}
|
|
.gradientThree {
|
|
background-image: linear-gradient(
|
|
275deg,
|
|
rgba(47, 109, 255, 1) 0%,
|
|
rgba(255, 255, 255, 54) 50%,
|
|
rgba(47, 109, 255, 1) 100%
|
|
);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 2px;
|
|
}
|
|
.gradientNext {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #021428;
|
|
// z-index: 999;
|
|
}
|
|
.gradientNextTwo {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(47, 109, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5px;
|
|
color: #fff;
|
|
}
|
|
.gradientText {
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
}
|
|
.gradientName {
|
|
font-size: 12px;
|
|
}
|
|
.gradientTextTwo {
|
|
font-size: 86px;
|
|
font-weight: bold;
|
|
color: #ef595a;
|
|
}
|
|
.gradientNameTwo {
|
|
font-size: 18px;
|
|
}
|
|
.title {
|
|
background-image: url('../assets/layout/title.png');
|
|
background-size: cover;
|
|
background-position: bottom;
|
|
background-repeat: no-repeat;
|
|
width: 90%;
|
|
height: 25px;
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
}
|
|
.circle {
|
|
width: 12px;
|
|
height: 12px;
|
|
background: #021428;
|
|
border-radius: 50%;
|
|
border: 3px solid #fff;
|
|
margin-right: 5px;
|
|
}
|
|
.titlename {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
font-family: '站酷庆科黄油体';
|
|
letter-spacing: 3px;
|
|
}
|
|
.risklevelOne {
|
|
height: 60%;
|
|
width: 90%;
|
|
}
|
|
.boxTwo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
// width: 100%;
|
|
}
|
|
.capsuleChart {
|
|
width: 80%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px 0px;
|
|
}
|
|
.scrollboard {
|
|
width: 90%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0px 20px 20px 20px;
|
|
flex: 1;
|
|
}
|
|
.scrollboard :global(.header) {
|
|
height: auto;
|
|
padding: 0;
|
|
}
|
|
.scrollboard :global(.dv-scroll-board .rows .ceil) {
|
|
text-align: center;
|
|
}
|
|
.scrollboard :global(.dv-scroll-board .header .header-item) {
|
|
text-align: center;
|
|
}
|
|
|
|
.scoreBox {
|
|
// background-image: url("../assets/layout/score-box.png");
|
|
// background-size: cover;
|
|
// background-position: center;
|
|
// background-repeat: no-repeat;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
.scoreBox1 {
|
|
background-image: url('../assets/layout/score-box.png');
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
// height: 140px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-bottom: 20px;
|
|
padding: 5px;
|
|
}
|
|
.score {
|
|
display: flex;
|
|
flex-direction: row;
|
|
// align-items: center;
|
|
// justify-content: space-between;
|
|
background-image: url('../assets/layout/ks.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
object-fit: cover;
|
|
// width: 230px;
|
|
width: 33%;
|
|
height: auto;
|
|
margin: 10px;
|
|
}
|
|
.score2 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
// align-items: center;
|
|
// justify-content: space-between;
|
|
background-image: url('../assets/layout/xk.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
object-fit: cover;
|
|
width: 33%;
|
|
height: auto;
|
|
margin: 10px;
|
|
}
|
|
.score3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
// align-items: center;
|
|
// justify-content: space-between;
|
|
background-image: url('../assets/layout/wk.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
object-fit: cover;
|
|
width: 33%;
|
|
height: auto;
|
|
margin: 10px;
|
|
}
|
|
.score4 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-image: url('../assets/layout/score.png');
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
width: 30%;
|
|
padding: 0px 15px;
|
|
// height: 100%;
|
|
// margin: 10px;
|
|
}
|
|
.scoreRight {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40%;
|
|
margin-left: 50%;
|
|
}
|
|
.scoreLeft {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #6cc8d9;
|
|
margin-top: 5px;
|
|
}
|
|
.scoreText {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
color: #6cc8d9;
|
|
}
|
|
.scoreText2 {
|
|
font-size: 33px;
|
|
color: #7fffff;
|
|
font-weight: bold;
|
|
// font-style: oblique;
|
|
}
|
|
.scoreText3 {
|
|
font-size: 12px;
|
|
color: #6cc8d9;
|
|
font-weight: bold;
|
|
}
|
|
.ulData {
|
|
li {
|
|
// transform: rotate(45deg);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
// margin-left: -20px;
|
|
// margin-right: -20px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
li:nth-of-type(1) {
|
|
// transform: rotate(45deg);
|
|
transform: translate(-50%, -50%) rotate(12deg) translate(-280px) rotate(-12deg);
|
|
// transform-origin: 20px 220px;
|
|
}
|
|
li:nth-of-type(2) {
|
|
transform: translate(-50%, -50%) rotate(38deg) translate(-280px) rotate(-38deg);
|
|
}
|
|
li:nth-of-type(3) {
|
|
transform: translate(-50%, -50%) rotate(64deg) translate(-280px) rotate(-64deg);
|
|
}
|
|
li:nth-of-type(4) {
|
|
transform: translate(-50%, -50%) rotate(90deg) translate(-280px) rotate(-90deg);
|
|
}
|
|
li:nth-of-type(5) {
|
|
transform: translate(-50%, -50%) rotate(116deg) translate(-280px) rotate(-116deg);
|
|
}
|
|
li:nth-of-type(6) {
|
|
transform: translate(-50%, -50%) rotate(142deg) translate(-280px) rotate(-142deg);
|
|
}
|
|
li:nth-of-type(7) {
|
|
transform: translate(-50%, -50%) rotate(168deg) translate(-280px) rotate(-168deg);
|
|
}
|
|
li:nth-of-type(8) {
|
|
transform: translate(-50%, -50%) rotate(-12deg) translate(-280px) rotate(12deg);
|
|
}
|
|
li:nth-of-type(9) {
|
|
transform: translate(-50%, -50%) rotate(-38deg) translate(-280px) rotate(38deg);
|
|
}
|
|
li:nth-of-type(10) {
|
|
transform: translate(-50%, -50%) rotate(-64deg) translate(-280px) rotate(64deg);
|
|
}
|
|
li:nth-of-type(11) {
|
|
transform: translate(-50%, -50%) rotate(-116deg) translate(-280px) rotate(116deg);
|
|
}
|
|
|
|
li:nth-of-type(12) {
|
|
transform: translate(-50%, -50%) rotate(-142deg) translate(-280px) rotate(142deg);
|
|
}
|
|
li:nth-of-type(13) {
|
|
transform: translate(-50%, -50%) rotate(-168deg) translate(-280px) rotate(168deg);
|
|
}
|
|
}
|
|
|
|
.roateData {
|
|
background-image: linear-gradient(
|
|
275deg,
|
|
rgba(47, 109, 255, 1) 0%,
|
|
rgba(255, 255, 255, 54) 50%,
|
|
rgba(47, 109, 255, 1) 100%
|
|
);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 2px;
|
|
// background-color: rgba(47, 109, 255, 0.1);
|
|
}
|
|
.roatBack {
|
|
background-color: #021428;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 5px;
|
|
}
|