@import "./base/index.scss";
|
@import "./dc/index.scss";
|
@import "./icon/index.scss";
|
@import "./tool/index.scss";
|
@import "./element-ui/element-ui.scss";
|
|
@font-face {
|
font-family: Roboto-Bold;
|
src: url(./font/Roboto-Bold.ttf);
|
}
|
.pageContainer {
|
color: #fff;
|
width: 100%;
|
.mt-15 {
|
margin-top: 15px;
|
}
|
.flex {
|
display: flex;
|
align-items: center;
|
}
|
.justify-between {
|
justify-content: space-between;
|
}
|
.justify-center {
|
justify-content: center;
|
}
|
.common-text {
|
font-size: 16px;
|
font-family: Alibaba PuHuiTi;
|
font-style: italic;
|
color: #F6F9FE;
|
}
|
.left-container,
|
.right-container {
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
top: 0;
|
width: 408px;
|
height: 100%;
|
pointer-events: auto;
|
background: rgba(28, 115, 195, 0.05);
|
|
&>div {
|
display: flex;
|
flex-direction: column;
|
flex-shrink: 0;
|
|
.title-box {
|
position: relative;
|
height: 38px;
|
line-height: 38px;
|
background: url(/images/title-box.png) no-repeat center / 100% 100%;
|
|
.title {
|
margin-left: 30px;
|
text-align: left;
|
font-size: 18px;
|
font-family: Alibaba PuHuiTi;
|
font-weight: bold;
|
font-style: italic;
|
color: transparent;
|
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
|
background-image: linear-gradient(180deg, rgba(14, 197, 236, 0.36) 5%, rgba(49, 190, 255, 0.36) 20%, rgba(255, 255, 255, 1) 40%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparen
|
}
|
.title-sub {
|
position: absolute;
|
right: 10px;
|
bottom: 4px;
|
line-height: 1;
|
}
|
}
|
|
.content-box {
|
flex: 1;
|
}
|
}
|
.chart-box {
|
// background: rgba(42,64,120,0.68);
|
}
|
}
|
.common-empty {
|
padding-top: 46px;
|
display: flex;
|
justify-content: center;
|
}
|
.left-container {
|
left: 0;
|
|
.one {
|
height: 258px;
|
position: relative;
|
.content-data {
|
padding-left: 18px;
|
&>.common-text {
|
margin-right: 8px
|
}
|
};
|
.data-item {
|
height: 26px;
|
line-height: 26px;
|
background: #879EC7;
|
border-radius: 6px;
|
padding: 0 15px;
|
margin-right: 12px;
|
}
|
.more-text {
|
position: absolute;
|
color: #3BCAFF;
|
right: 10px;
|
bottom: 36px;
|
cursor: pointer;
|
}
|
}
|
|
.two {
|
height: 454px;
|
}
|
|
.three {
|
flex: 1;
|
}
|
}
|
|
.right-container {
|
right: 0;
|
|
.one {
|
height: 266px;
|
}
|
|
.two {
|
height: 260px;
|
}
|
|
.three {
|
height: 210px;
|
}
|
|
.four {
|
flex: 1;
|
}
|
}
|
.scroll-table {
|
font-family: Alibaba PuHuiTi;
|
font-weight: 400;
|
font-style: italic;
|
color: #AFBED8;
|
.scroll-table-head {
|
height: 38px;
|
font-size: 16px;
|
border-bottom: 2px solid #6187E4;
|
background: rgba(42,64,120,0.68);
|
&>div {
|
flex: 1;
|
text-align: center;
|
}
|
}
|
.scroll-table-body {
|
overflow: hidden;
|
height: 155px;
|
margin-top: 10px;
|
}
|
.scroll-item {
|
margin-top: 5px;
|
height: 38px;
|
border: 1px solid rgba(36, 57, 110, 1);
|
background: rgba(36,57,110,0.34);
|
&>div {
|
text-align: center;
|
flex: 1;
|
color: #D4E8F8;
|
font-size: 14px;
|
}
|
}
|
.type-img {
|
margin-left: 5px;
|
}
|
}
|
.carousel-box {
|
position: relative;
|
.el-carousel__container {
|
height: 142px;
|
}
|
.card-item {
|
height: 142px;
|
width: 122px;
|
border: 1px solid rgba(110, 135, 197, .32);
|
background: rgba(36,57,110,0.34);
|
line-height: 1;
|
padding: 10px 0 0 0;
|
text-align: left;
|
text-indent: 10px;
|
.type-img {
|
margin-left: 5px;
|
position: relative;
|
top: 3px;
|
}
|
&>div:nth-of-type(2) {
|
margin-top: 10px;
|
& .num {
|
font-size: 20px;
|
font-family: Roboto-Bold;
|
font-weight: bold;
|
}
|
}
|
&>div:nth-of-type(3) {
|
margin-top: 8px;
|
color: #F7101A;
|
}
|
&>div:nth-of-type(4) {
|
margin-top: 12px;
|
}
|
&>div:nth-of-type(5) {
|
margin-top: 5px;
|
}
|
}
|
.justify-between {
|
padding: 0 10px;
|
}
|
.btn-item {
|
width: 40px;
|
height: 40px;
|
cursor: pointer;
|
}
|
.btn-left {
|
background-image: url(./../../public/images/ctrl-left.png);
|
}
|
.btn-right {
|
margin-left: 3px ;
|
transform: rotate(180deg);
|
}
|
}
|
.big-num {
|
margin: 10px 0;
|
line-height: 1;
|
.num-num {
|
margin-left: 10px;
|
font-size: 48px;
|
font-family: Roboto-Bold;
|
font-weight: bold;
|
}
|
.num-text{
|
margin-left: 10px;
|
}
|
}
|
.big-section {
|
flex: 1;
|
.big-num {
|
padding-left: 30px;
|
}
|
.section-text {
|
height: 22px;
|
line-height: 22px;
|
text-align: right;
|
}
|
.time {
|
margin-top: 5px;
|
color: #B5C5D4;
|
}
|
}
|
}
|
