hs_bigScreen/src/assets/styles/index.scss

#screen-container {
	width: 100%;
	height: 100vh;
	font-size: .3125rem;
	line-height: .4375rem;
	color: #fff;
	overflow: hidden;
  background: url('~@/assets/images/bg2.png') no-repeat top center #02061a;
  background-size: 100% 100%;
  font-family: 'DingTalk_JinBuTi_Regular';
}

.page-wrapper{
  width: 100%;
	height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #001244;
  padding-top: 1.5625rem;
  overflow: hidden;
}
.page-four-wrapper{
  background: #000629;
}
.loading {
	position: fixed;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	z-index: 99999999;
}
.header-page{
  // position: fixed; 
  // right: .175rem; 
  // top: .175rem;
  margin-left: .125rem;
  margin-top: -0.125rem;
  font-size:.175rem; 
  background: rgba(82,146,255,0.2);
  border: 1px solid #5292FF; 
  height: .3125rem;
  padding: 0 .075rem; 
  line-height: .3125rem; 
  z-index: 999999;
  cursor: pointer;
}

.dot-container {
  display: flex;
  justify-content: space-around;
  width: .75rem;
}
.dot {
  width: .1375rem;
  height: .075rem;
  margin-right: .075rem;
  animation: blink 1s infinite;
}
// 头部主题标题
.header-container {
	position: relative;
	width: 100%;
  height: 1.0625rem;
	color: #fff;
  z-index: 9999;
	.header-title {
		position: relative;
    font-family: 'Microsoft YaHei';
    width: 18.1375rem;
    height: 1.0625rem;
		margin: 0 auto;
		background: url('~@/assets/images/header-bg.png') no-repeat top left;
		background-size: cover;
		h2 {
			font-size: .375rem;
			font-weight: bold;
			line-height: .75rem;
			text-align: center;
			background: -webkit-linear-gradient(180deg, #fff 30%, #77baff 100%);
			background: linear-gradient(180deg, #fff 30%, #77baff 100%);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			color: transparent;
			text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
		}
    .header-bottom{
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 2.45rem;
      height: .075rem;
      background: url('~@/assets/images/header_13_b.png') no-repeat top left;
		  background-size: contain;
      margin-left: -1.175rem;
      overflow: hidden;
      .bottom-block{
        position: absolute;
        // left: 50%;
        bottom: 0;
        width: .8rem;
        height: .0625rem;
        background: url('~@/assets/images/header_13.png') no-repeat top left;
        background-size: contain;
        transform: translateX(-50%) rotate(180deg);
        animation: runblock 3s infinite;
      }
    }
    .left-dots{
      position: absolute;
      left: 2.25rem;
      top: .0625rem;
      .dot:nth-child(1) {
        background: url('~@/assets/images/header_03.png') no-repeat top left;
        background-size: contain;
      }
      .dot:nth-child(2) {
        background: url('~@/assets/images/header_05.png') no-repeat top left;
        background-size: contain;
      }
      .dot:nth-child(3) {
        background: url('~@/assets/images/header_07.png') no-repeat top left;
        background-size: contain;
      }
    
      .dot:nth-child(3) {
        animation-delay: 0.4s;
      }
    }
    .right-dots{
      position: absolute;
      right: 2rem;
      top: .0625rem;
      .dot:nth-child(1) {
        background: url('~@/assets/images/header_09.png') no-repeat top left;
        background-size: contain;
      }
      .dot:nth-child(2) {
        background: url('~@/assets/images/header_11.png') no-repeat top left;
        background-size: contain;
      }
      .dot:nth-child(3) {
        background: url('~@/assets/images/header_15.png') no-repeat top left;
        background-size: contain;
      }
      .dot:nth-child(1) {
        animation-delay: 0.4s;
      }
    }
	}
  @keyframes runblock{
    0%{
      left: calc(.375rem);
    }
    50%{
      left: calc(100% - .375rem);
    }
    100%{
      left: calc(.375rem);
    }
  }

	.header-text {
		position: absolute;
	}
	.header-weather {
		// top: .175rem;
    max-width: 2rem;
    height: .625rem;
    margin-top: .125rem;
		// right: 0.25rem;
		overflow: hidden;
	}
	.header-date {
		top: .125rem;
		left: .2125rem;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.time {
      width: 1.625rem;
			font-size: .375rem;
			font-weight: bold;
			line-height:  .375rem;
			padding-right: .2125rem;
			border-right: 1px solid rgba(255, 255, 255, 0.5);
		}
		.time-other {
			font-size: .175rem;
			line-height: .275rem;
			padding-left: .2125rem;
			span {
				display: block;
			}
		}
	}
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}
 
@keyframes blink {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

// 底部底色
.bottom-bg {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 18.2625rem;
	height: .725rem;
	background: url('~@/assets/images/bottom-bg.png') no-repeat top left;
	background-size: cover;
  z-index: 999;
  .bottom-content{
    position: relative;
    width: 100%;
    height: 100%;
  }
  .left-dots{
    position: absolute;
    left: 4rem;
    bottom: .1875rem;
    .dot:nth-child(1) {
      background: url('~@/assets/images/header_15.png') no-repeat top left;
      background-size: contain;
    }
    .dot:nth-child(2) {
      background: url('~@/assets/images/header_11.png') no-repeat top left;
      background-size: contain;
    }
    .dot:nth-child(3) {
      background: url('~@/assets/images/header_09.png') no-repeat top left;
      background-size: contain;
    }
    .dot:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
  .right-dots{
    position: absolute;
    right: 4rem;
    bottom: .1875rem;

    .dot:nth-child(1) {
      background: url('~@/assets/images/header_07.png') no-repeat top left;
      background-size: contain;
    }
    .dot:nth-child(2) {
      background: url('~@/assets/images/header_05.png') no-repeat top left;
      background-size: contain;
    }
    .dot:nth-child(3) {
      background: url('~@/assets/images/header_03.png') no-repeat top left;
      background-size: contain;
    }
    .dot:nth-child(1) {
      animation-delay: 0.4s;
    }
  }

}

// pageOne
.pageOne-database {
	display: flex;
	justify-content: space-between;
  height: 6.25rem;
  margin-top: .1875rem;
	.database-left,
	.database-right {
		width: 5.7875rem;
		height: 5.625rem;
		background-color: #041232;
	}
	.database-middle {
    position: relative;
    margin-top: -0.25rem;
		flex: 1;
    display: flex;
    justify-content: center;
    .middle-item{
      position: absolute;
      width: 1.975rem;
      height: 1.75rem;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      background: url('~@/assets/images/database-img2.png') no-repeat top left;
	    background-size: cover;
      p{
        margin-top: .3rem;
        font-size: .275rem;
        font-weight: 600;
        font-style: italic;
        color: #44C1EF;
        text-shadow: 0 0 10px rgba(73,223,255,.1), 0 0 10px rgba(73,223,255,.1), 0 0 10px rgba(73,223,255,.1), 0 0 10px rgba(73,223,255,.1); 
        background: linear-gradient(0deg, #50CEF2 0%, #54D2F3 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: .025rem;
      }
      &.totalBook{
        top: .85rem;
        left: .4125rem;
      }
      &.fansNum{
        top: 3.575rem;
        left: 1.3rem;
      }
      &.lendingNum{
        top: 3.575rem;
        right: 1.6375rem
      }
      &.cardNum{
        top: .85rem;
        right: .55rem;
      }
    }

    .middle2-item{
      position: absolute;
      width: 3.3375rem;
      height: 1.275rem;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      p{
        font-size: .225rem;
        margin-top: .125rem;
        color: #CCDEFF;
        letter-spacing: .025rem;
      }
      .middle-num{
        display: flex; 
        justify-content: flex-start;
        align-items: center;
        margin-top: -0.0625rem;
        .middle-unit{
          display: block;
          font-size: .175rem;
          color: #CCDEFF;
          padding-left: .0625rem;
          margin-top: .125rem;
        }
      }
      &.totalBook{
        top: 1.1625rem;
        left: 1.1125rem;
      }
      &.fansNum{
        top: 3.3rem;
        left: .6125rem;
      }
      &.totalBook,
      &.fansNum{
        background: url('~@/assets/images/pageOne-1.png') no-repeat top left;
	      background-size: cover;
        p{
          padding-left: .45rem;
        }
      }
      &.lendingNum{
        top: 3.3rem;
        right: .2375rem;
      }
      &.cardNum{
        top: 1.1625rem;
        right: .7375rem;
      }
      &.lendingNum,
      &.cardNum{
        background: url('~@/assets/images/pageOne-2.png') no-repeat top left;
	      background-size: cover;
        p{
          text-align: right;
          padding-right: .45rem;
        }
        .middle-num{
          padding-right: .275rem;
          justify-content: flex-end;
          .chartNum{
            justify-content: flex-end;
          }
        }
      }

    }
	}
}

.small-module{
  height: .4rem;
  overflow: hidden;
}

.middle-img{
  position: relative;
  width: 5.4rem;
  .middle-img-book{
    position: absolute;
    top: .375rem;
    left: 50%;
    width: 4.8875rem;
    height: 3.925rem;
    transform: translateX(-50%);
    z-index: 999;
    background: url('~@/assets/images/pageOne-3.png') no-repeat center center;
    background-size: cover;
    animation: hovering 1s infinite alternate-reverse ease-in-out;
  }
  .wq{
    position: absolute;
    top: .375rem;
    left: 50%;
    width: 4.8875rem;
    height: 3.925rem;
    background: url('~@/assets/images/wq.png') no-repeat center center;
    background-size: cover;
    transform: translateX(-51%);
    z-index: 9999;
    animation: hovering 1s infinite alternate-reverse ease-in-out;
    animation-delay: 1s;
  }

  .line-box {
    position: absolute;
    top: 0;
    left: .2875rem;
    width: 5.125rem;
    height: 5.125rem;
    border-radius: 50%;
    border: 6px solid #fff;
    border-top-color: transparent;
    transform: rotate(-20deg) scaleY(0.3);
    z-index: 9999;
  }
  .box {
    position: relative;
    width: 5.125rem;
    height: 5.125rem;
    border-radius: 50%;
    transform: rotate(-10deg) scaleY(0.1);
    animation: spin 3s infinite linear;
    border: 1px solid red;
  }
  .ball {
    display: inline-block;
    background: #a0b8f3;
    width: .375rem;
    height: .375rem;
    background: url('~@/assets/images/pageOne-5.png') no-repeat center center;
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    text-align: center;
    left: .5625rem;
    top:  .5625rem;
    animation: ball-spin 3s infinite linear;
  }
  .middle-img-bottom{
    position: absolute;
    bottom: -0.25rem;
    left: 0;
    width: 5.4rem;
    height: 3.4375rem;
    background: url('~@/assets/images/pageOne-4.png') no-repeat center center;
    background-size: cover;
    // animation: middleMove 3s infinite linear;
    svg path { stroke: transparent; fill: none; stroke-width: 2; }
    .rect {
      position: absolute;
      top: 0; 
      left: 0;
      width: .75rem;
      height: .125rem;
      background: linear-gradient( 
        to right, 
        rgba(0,0,0,0) 0%, 
        rgba(255, 255, 255,0.5) 40%, 
        rgba(255, 255, 255,0.6) 50%,
        rgba(255, 255, 255,0.5) 60%, 
        rgba(0,0,0,0) 100%
      );
      border-radius: 50%;
      filter: blur(2px);
    }
    .qxRect{
      offset-path: path("M0 80 S 170 160, 400 70");
      offset-distance: 0%;
      animation: svg-path-animation 6s ease-in-out 0s infinite normal;
    }
    @keyframes svg-path-animation {
      0% {offset-distance: 10%;}
      70% {offset-distance: 80%;}
      100% {offset-distance: 90%; opacity: 0.2;}
    }
  }
  .middle-img-dot{
    position: absolute;
    top: 3rem;
    left: -1.25rem;
    width: 7.625rem;
    height: 2.0375rem;
    background: url('~@/assets/images/pageOne-6.png') no-repeat center center;
    background-size: cover;
  }
}
@keyframes spin {
  0% {
    transform:  rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes ball-spin {
  0% {
    transform: rotate(0deg) scaleY(2) rotate(30deg) scale(1);
  }
  100% {
    transform: rotate(-360deg) scaleY(2) rotate(30deg) scale(1);
  }
}

@keyframes middleMove{
  from {
    transform: rotateX(75deg) rotateZ(0);
  }
  to {
    transform: rotateX(75deg) rotateZ(360deg);
  }
}

.database-box {
  position: relative;
  transform-style: preserve-3d;
  animation: hovering 2s infinite alternate-reverse ease-in-out;
}

.logo {
  display: block;
  width: 5.825rem;
  height: 6.4125rem;
  position: relative;
}
.logo:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 5.825rem;
  height: 6.4125rem;
  background: url('~@/assets/images/database-middle.png') no-repeat center center;
  background-size: contain;
  transition: 5s ease-out;
}
.logo:hover:after {
  transform: scale(1);
}

.ring {
  pointer-events: none;
  width: 5.825rem;
  height: 5.825rem;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
}
.ring .particle {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 10px solid;
  width: 5.825rem;
  height: 5.825rem;
  border-radius: 50%;
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
  box-shadow: 0 0 1px 0px currentColor;
  transform-style: preserve-3d;
}
.ring .particle:after {
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 5px 0px white;
}

.ring1 {
  color: rgba(44, 198, 255,1);
  animation: rotateAnimate1 16s infinite reverse linear;
}
.ring1 .particle {
  -webkit-animation: rotateAnimate1 6s infinite linear;
          animation: rotateAnimate1 6s infinite linear;
}

.ring2 {
  color: rgba(255, 255, 255,1);
  animation: rotateAnimate1 16s infinite reverse linear;
}

.ring2 .particle {
  width: 5.575rem;
  height: 5.575rem;
  -webkit-animation: rotateAnimate2 6s infinite linear;
          animation: rotateAnimate2 6s infinite linear;
}

.ring2 .particle:after {
  top: 0%;
}

.ring3 {
  color: rgba(14, 93, 182, 1);
  animation: rotateAnimate1 16s infinite reverse linear;
}
.ring3 .particle {
  width: 5.575rem;
  height: 5.575rem;
  -webkit-animation: rotateAnimate3 6s infinite linear;
          animation: rotateAnimate3 6s infinite linear;
}

@-webkit-keyframes rotateAnimate1 {
  0% {
    transform: rotateX(45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(45deg) rotateZ(360deg);
  }
}

@keyframes rotateAnimate1 {
  0% {
    transform: rotateX(45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(45deg) rotateZ(360deg);
  }
}
@-webkit-keyframes rotateAnimate2 {
  0% {
    transform: rotateY(45deg) rotateX(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateY(45deg) rotateX(-45deg) rotateZ(-360deg);
  }
}
@keyframes rotateAnimate2 {
  0% {
    transform: rotateY(45deg) rotateX(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateY(45deg) rotateX(-45deg) rotateZ(-360deg);
  }
}
@-webkit-keyframes rotateAnimate3 {
  0% {
    transform: rotateY(-45deg) rotateX(-45deg) rotateZ(180deg);
  }
  100% {
    transform: rotateY(-45deg) rotateX(-45deg) rotateZ(540deg);
  }
}
@keyframes rotateAnimate3 {
  0% {
    transform: rotateY(-45deg) rotateX(-45deg) rotateZ(180deg);
  }
  100% {
    transform: rotateY(-45deg) rotateX(-45deg) rotateZ(540deg);
  }
}
@-webkit-keyframes hovering {
  0% {
    transform: translateX(-50%) translate3d(0, 0, 0);
  }
  100% {
    transform:  translateX(-50%) translate3d(0, -10px, 0);
  }
}
@keyframes hovering {
  0% {
    transform:  translateX(-50%) translate3d(0, 0, 0);
  }
  100% {
    transform:  translateX(-50%) translate3d(0, -10px, 0);
  }
}

.database-title {
	height: .6rem;
	padding-left: .4rem;
  margin-top: -0.25rem;
	font-size: .25rem;
	line-height: .5625rem;
	color: #f6f9fe;
	text-shadow: 0px 2px 8px rgba(0, 9, 35, 1);
	background: url('~@/assets/images/title-small.png') no-repeat  -0.2rem top;
	background-size: cover;
}

.inLib-num{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding: .625rem .125rem 0 0;
  .allTotal{
    width: 50%;
    height: 1.1rem;
    padding-left: 1.15rem;
    background: url('~@/assets/images/database-icon1.png') no-repeat left top;
    background-size: 100% 100%;
  }
  .currentNum,
  .lastYearTotal{
    width: 50%;
    height: 1.1rem;
    padding-left: 1.1rem;
    background: url('~@/assets/images/database-icon2.png') no-repeat left top;
    background-size: 100% 100%;
  }
  .flop-figure {
    position: relative;
    display: inline-block;
    width: .28rem;
    height: 100%;
    line-height: 0.15rem;
    overflow: hidden;
    writing-mode: vertical-lr;
    text-orientation: upright;
    i{
      position: absolute;
      text-align: center;
      transition: transform 0.6s ease-in-out;
      color: #fff;
      // background: -webkit-linear-gradient(90deg,  rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%);
      // background: linear-gradient(90deg,  rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%);
      // -webkit-background-clip: text;
      // background-clip: text;
      // -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 8px rgba(5,28,55,0.42);
    }
  }

}

.pageLeft-flop-box {
  position: relative;
  height: .325rem;
  margin-top: .125rem;
  overflow: hidden;
  & div:first-child {
    height: .325rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .flop-figure {
    width: .325rem;
    i {
      font-size: .3rem;
      font-weight: bold;
    }
  }
  .flop-comma {
    margin-left: -0.025rem;
    span {
      left: 0;
      font-size: .275rem;
      color: #fff;
      // background: -webkit-linear-gradient(90deg,  rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%);
      // background: linear-gradient(90deg,  rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%);
      // -webkit-background-clip: text;
      // background-clip: text;
      // -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 8px rgba(5,28,55,0.42);
    }
  }
  & em{
    font-style: normal;
    font-size: .175rem;
    font-weight: bold;
    color: #A8CBF6;
    height: .375rem;
  }
}
.flop-item-name{
  font-size: .225rem;
}

// 左边进度条
.pageOne-left-progress{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 .25rem 0 .38rem;
  li{
    position: relative;
    width: 2.38rem;
    font-size: .225rem;
    padding-left: .1625rem;
    margin-top: .7rem;
    p{
      position: relative;
      &::before{
        position: absolute;
        left: -0.2875rem;
        top: .075rem;
        content: "";
        width: .275rem;
        height: .2875rem;
        background: url('~@/assets/images/arrow2.png') no-repeat left top;
        background-size: .275rem .2875rem;
      }
    }
    .progress-num{
      position: absolute;
      right: 0;
      top: 0;
      font-size: .3rem;
      font-weight: bold;
      color: #fff;
      background: -webkit-linear-gradient(to bottom, #fff 40%,  #69A4D6 60%);
      background: linear-gradient(to bottom, #fff 40%,  #69A4D6 60%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 8px rgba(5,28,55,0.42);
      i{
        font-size: .15rem;
        font-style: normal;
      }
    }
    .el-progress {
      .el-progress-bar {
        .el-progress-bar__outer {
          background: #122550;
        }
        .el-progress-bar__inner {
          background: linear-gradient(to right, #7ACAEE, #397FFF)
        }
      }
    }
    &.orange-progress{
      & p{
        &::before{
          background: url('~@/assets/images/arrow1.png') no-repeat left top;
          background-size: .275rem .2875rem;
        }
      }
      .progress-num{
        background: -webkit-linear-gradient(to bottom, #fff 40%,  #FF9239 60%);
        background: linear-gradient(to bottom, #fff 40%,  #FF9239 60%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(5,28,55,0.42);
      }
      .el-progress {
        .el-progress-bar {
          .el-progress-bar__outer {
            background: #122550;
          }
          .el-progress-bar__inner {
            background: linear-gradient(to right, #FF9239, #FFB84B)
          }
        }
      }
    }
  }
}

// pageOne 底部图书
.pageOne-book{
  background-color: #031437;
  border: 1px solid #031A47;
  margin-top: -0.1875rem;
  .database-title{
    width: 14.5rem;
    height: .6rem;
    background: url('~@/assets/images/title-big.png') no-repeat  left top;
	  background-size: cover;
  }
  .pageOne-book-content{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: .125rem;
    .wechat-code{
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      width: 4.025rem;
      height: 5.25rem;
      background: url('~@/assets/images/wechat-img1.png') no-repeat  left top;
	    background-size: cover;
      margin-top: -0.5rem;
      .wechat-img{
        width: 1.9rem;
        height: 1.9rem;
        background: url('~@/assets/images/wechat-img2.png') no-repeat left top;
	      background-size: cover;
        margin: 0 auto .3rem auto;
        text-align: center;
        line-height: 1.9rem;
        overflow: hidden;
        img{
          display: block;
          padding: .125rem;
          width: 100%;
        }
      }
      span{
        display: block;
        font-size: .2rem;
        color: #4DDBFF;
        text-align: center;
      }
    }
  }
}

// 地图页
.map-wrapper{
  width: 100%;
	height: 100vh;
  background: url('~@/assets/images/mapBg.png') no-repeat top left; 
  position: absolute;
  left: 0; 
  top: 0;
	background-size: cover;
  font-family: 'DingTalk_JinBuTi_Regular';
  overflow: hidden;
  .map-content{
    display: flex; 
    justify-content: space-around; 
    padding:  1.275rem .5rem .625rem .5rem;
    height: 100vh;
    .database-title{
      width: 100%;
      height: .3375rem;
      padding-left: .35rem;
      margin-top: 0;
      line-height: 0;
      background: url('~@/assets/images/title-middle.png') no-repeat left top;
      background-size: cover;
      font-weight: bold;
    }
  }
}

.lib-info{
  width: 5.9375rem;
  background-color: rgba(10, 26, 66, 0.6);
  .lib-content{
    padding: .375rem .35rem 0 .4rem;
  }
  .lib-cont01{
    display: flex;
    justify-content: space-between;
    margin-top: .325rem;
  }
  .lib-cont-item {
    li{
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 2.5rem;
      height: 1.05rem;
      font-size: .225rem;
      background: linear-gradient(-180deg, rgba(40, 74, 142, 0.4),rgba(0,0,0,0));
      border-radius: 4px;
      &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 2rem;
        height: .025rem;
        background: linear-gradient( 
          to right, 
          rgba(0,0,0,0) 0%, 
          rgba(142, 176, 239,0.2) 20%, 
          rgba(142, 176, 239,0.5) 40%, 
          rgba(142, 176, 239,0.6) 50%,
          rgba(142, 176, 239,0.5) 60%, 
          rgba(142, 176, 239,0.2) 80%, 
          rgba(0,0,0,0) 100%
        );
      }
      img{
        display: block;
        width: .725rem;
        height: .65rem;
        margin-right: .125rem;
      }
      p{
        color: #B5C1D1;
        line-height: 0.45rem;
        span{
          display: block;
          
          &:last-child{
            font-size: .3rem;
            color: #fff;
            font-weight: bold;
            text-shadow: 
            0 0 10px rgba(18,104,245, 0.24),
            0 0 20px rgba(18,104,245, 0.24),
            0 0 30px rgba(18,104,245, 0.24),
            0 0 40px rgba(18,104,245, 0.24),
            0 0 50px rgba(18,104,245, 0.24),
            0 0 60px rgba(18,104,245, 0.24),
            0 0 70px rgba(18,104,245, 0.24),
            0 0 80px rgba(18,104,245, 0.24),
            0 0 90px rgba(18,104,245, 0.24),
            0 0 100px rgba(18,104,245, 0.24);
            i{
              color: rgba(154, 197, 255, 0.4);
              font-size: .2rem;
              font-weight: normal;
              padding-left: .075rem;
              font-style: normal;
            }
          }
        }
      }
    }
  }
  .lib-cont02{
    position: relative;
    margin: .1625rem 0 .1rem 0;
    &::after{
      content: "";
      position: absolute;
      right: 1px;
      bottom: 0;
      width: .775rem;
      height: .5rem;
      background: url('~@/assets/images/map_30.png') no-repeat  left top;
	    background-size: cover;
      opacity: .5;
    }
    li{
      width: 100%;
      p{
        display: flex;
        justify-content: space-between;
        line-height: 1.05rem;
        align-items: center;
        span{
          &:last-child{
            width: 2.825rem;
            text-align: right;
          }
        }
      }
    }
  }
  .scroll-container{
    position: relative;
    width: calc(100%);
    height: calc(100vh - 8.625rem);
    background: linear-gradient(-180deg, rgba(40, 74, 142, 0.4),rgba(0,0,0,0));
    border-radius: 4px;
    padding: .25rem 0 0 .2875rem;
    overflow: hidden;
  }
  .lib-text{
    position: relative;
    margin-right: .175rem;
    font-size: .225rem;
    line-height: .35rem;
    color: #ADC7FF;
    overflow: hidden;
  }
}


.lib-animation {
  animation: myLib 26s linear infinite;
  animation-fill-mode: forwards;
}

@keyframes myLib {
  0% {
    transform: translateY(1rem);
  }
  100% {
    transform: translateY(calc(-1 * var(--container-height)));
  }
}

.map-hx-bg{
  width: 16.325rem;
  height: 11.3125rem;
  background: url('~@/assets/images/map-hx-dot.png') no-repeat top left;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-45%,-50%);
}
.map-hx-small{
  width: 11.3125rem;
  height: 9.15rem;
  border-radius: 50%;
  overflow: hidden;
  background: url('~@/assets/images/map-hx-small.png') no-repeat center center;
  background-size: cover;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-58%,-45%);
}
.map-hx-big{
  width: 12.5rem;
  height: 12.5rem;
  // border-radius: 50%;
  overflow: hidden;
  background: url('~@/assets/images/map-hx-big2.png') no-repeat center center;
  background-size: contain;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-58%,-40%);
  animation: rotateTrack 40s infinite linear;
}
@keyframes rotateTrack {
  0% {
    transform: translate(-58%,-50%) rotateX(40deg) rotateZ(0);
  }
  100% {
    transform: translate(-58%,-50%) rotateX(40deg) rotateZ(360deg);
  }
}

.read-num{
  width: 5.9375rem;
  background-color: rgba(10, 26, 66, .6);
  .online{
    height: 1.6875rem;
    background: url('~@/assets/images/map_03.png') no-repeat left top;
    background-size: 1.9rem 1.525rem;
    margin: .25rem 0 .4rem 0;
    padding: 0 .15rem 0 2.25rem;
    font-size: .25rem;
    color: #C8DFFF;
    p{
      padding-top: .25rem;
    }
    .num{
      
      span{
        font-size: .6rem;
        font-weight: 500;
        font-style: italic;
        color: #fff;
        text-shadow: 
              0 0 10px rgba(18,104,245, 0.24),
              0 0 20px rgba(18,104,245, 0.24),
              0 0 30px rgba(18,104,245, 0.24),
              0 0 40px rgba(18,104,245, 0.24),
              0 0 50px rgba(18,104,245, 0.24),
              0 0 60px rgba(18,104,245, 0.24),
              0 0 70px rgba(18,104,245, 0.24),
              0 0 80px rgba(18,104,245, 0.24),
              0 0 90px rgba(18,104,245, 0.24),
              0 0 100px rgba(18,104,245, 0.24);
      }
      i{
        font-size: .4125rem;
        font-weight: normal;
        font-style: normal;
        color: rgba(154,197,255,.4);
        padding-left: .125rem;
      }
    }
  }
  
}
.lending-ranking{
  padding: 0 .2625rem 0 .425rem;
  h5{
    font-size: .225rem;
    color: #79B8FF;
    margin-bottom: .25rem;
  }
  .ranking-cont{
    background: linear-gradient(-90deg, rgba(66,139,221,0.1), rgba(66,139,221,0));
    border: 1px solid rgba(83, 196, 255, .2);
    padding-bottom: .375rem;
  }
  .ranking-title{
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    font-size: .225rem;
    color: #79B8FF;
    line-height: .5rem;
    background: linear-gradient(90deg, rgba(66,139,221,0.2), rgba(66,139,221,0));
    li {
      &:last-child{
        width: 1.375rem;
      }
    }
  }
  .ranking-list{
    li,
    .ranking-item{
      display: flex;
      justify-content: space-around;
      font-size: .225rem;
      color: #eef6ff;
      line-height: .375rem;
      padding: .0625rem 0;
      text-align: center;
      div{
        &:last-child{
          font-weight: bold;
        }
        i{
          padding-left: .125rem;
          font-style: normal;
          font-weight: normal;
          color: #b6d4f7;
        }
      }
      .ranking-progress .el-progress{
        width: 1.725rem;
        margin: 0 auto;
        .el-progress-bar__outer {
          background-color: #054076;
        }
      }
      .ranking-num1{
        background: url('~@/assets/images/ranking01.png') no-repeat center center;
        background-size: .225rem .3125rem;
      }
      .ranking-num2{
        background: url('~@/assets/images/ranking02.png') no-repeat center center;
        background-size: .225rem .3125rem;
      }
      .ranking-num3{
        background: url('~@/assets/images/ranking03.png') no-repeat center center;
        background-size: .225rem .3125rem;
      }
    }
  }
}
.tooltip-main{
  font-family: 'DingTalk_JinBuTi_Regular';
  position: relative;
  // min-width: 3rem;
  width: 4rem;
  // text-wrap: wrap;
  .tooltip-line{
    width: .15rem;
    height: 0;
    background: url('~@/assets/images/line.png') no-repeat top left;
    position: absolute;
    left: -0.225rem;
    bottom: -0.25rem;
    transform-origin: bottom center;
    animation: growBar 1s forwards;
  }
}
.tooltip-content{
  height: 1.8125rem;
  opacity: 0;
  line-height: .35rem;
  border: 1px solid #D1793D;
  background-color:  rgba(0,31,87,0.8);
  animation: slideInFromLeft 1s forwards;
  animation-delay: 2s;
  .title{
    width: 100%;
    padding: .05rem .1875rem;
    font-weight: bold;
    font-size: .225rem;
    background: linear-gradient(90deg, rgba(255, 116, 32, 1), rgba(255,255,255,0.22));
  }
  .place{
    text-wrap: wrap;
    padding: .125rem .1875rem;
    font-size: 0.2rem;
    color: #fff;
  }
}
@keyframes growBar {
  0% {height: 0;}
  100% {height: 1.8125rem;}
}
@keyframes slideInFromLeft {
  0% {width: 0; opacity: 0;}
  100% {width: 100%; opacity: 1;}
}

// 第三页 统计表
.page-three{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 .525rem 0 .45rem;
  font-family: 'DingTalk_JinBuTi_Regular';
  .three-item{
    width: 11.25rem;
    margin-bottom: .575rem;
    background-color: #01103D;
  }
  .three01,.three02{
    height: 5.5rem;
  }
  .three03,.three04{
    height: 4.7rem;
    margin-bottom: 0;
  }
  .database-title{
    // width: 6.0375rem;
    height: .6rem;
    font-weight: bold;
    background: url('~@/assets/images/title-big.png') no-repeat  -0.2rem top;
	  background-size: cover;
  }
  .three-lending{
    display: flex;
    justify-content: space-between;
    padding: .1875rem .3125rem 0 .4125rem;
    h5{
      font-size: .225rem;
      color: #47A6FF;
    }
    .three-lending-left{
      width: calc(100% - 5.25rem);
      .totalItem{
        .pageLeft-flop-box{
          position: relative;
          height: 0.9125rem;
          margin: .2875rem 0 .4rem 0;
          overflow: hidden;
          & div:first-child {
            height: 0.875rem;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: flex-start;
          }
          .flop-figure {
            position: relative;
            display: inline-block;
            width: 0.7rem;
            height: 100%;
            line-height: 0.55rem;
            letter-spacing: .25rem;
            padding: 0.1rem 0;
            overflow: hidden;
            writing-mode: vertical-lr;
            text-orientation: upright;
            background: rgba(13,145,214,0.25);
            margin-right: .1625rem;
            border: 2px solid #0D79FF;
            border-radius: .05rem;
            i {
              font-size: .6rem;
              font-weight: 600;
              position: absolute;
              // text-align: center;
              transition: transform 0.6s ease-in-out;
              color: #BFE0FF;
            }
          }
        }
      }
    }

    .three-lending-right{
      width: 5.25rem;
      h5{
        position: relative;
        padding-left: .2rem;
        &::before{
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          width: .0625rem;
          height: .2rem;
          background-color: #47A6FF;
          transform: translateY(-50%);
        }
      }
      .ranking-cont{
        padding-bottom: .125rem;
        .ranking-list{
          .ranking-progress .el-progress{
            width: 1.25rem;
          }
        }
      }
    }
  }
}

// page4
.page-four{
  display: flex;
  justify-content: space-between;
  padding: 0 .4rem 0 .55rem;
  font-family: 'DingTalk_JinBuTi_Regular';
}
.four-video{
  width: 16.625rem;
  height: 10.875rem;
  padding: 0 .375rem;
  background: url('~@/assets/images/page4_03.png') no-repeat top left;
  background-size: cover;
  overflow: hidden;
  h4{
    height: .9rem;
    line-height: 1.05rem;
    font-size: .325rem;
    font-weight: bold;
    color: #DFFDFE;
    background: url('~@/assets/images/page4_02.png') no-repeat bottom left;
    background-size: 100% .0375rem;
  }
}
.four-right{
  width: 5.9375rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .database-title{
    font-weight: bold;
  }
}
.four-notice,
.four-ranking{
  width: 5.9375rem;
  background-color: #011244;
}
.four-notice{
  height: 3rem;
  .seamless-warp{
    position: relative;
    width: calc(100%);
    height: 2.25rem;
    margin-top: .125rem;
    overflow: hidden;
    .notice-text{
      position: relative;
      padding: 0 .375rem;
      margin-bottom: .25rem;
      font-size: .225rem;
      color: #ADC7FF;
      line-height: .375rem;
      font-weight: bold;
      .notice-title{
        position: absolute; 
        left: 0;
        top: 0;
        z-index: 9999;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        width: calc(100%);
        height: .5rem;
        line-height: .5rem;
        padding: 0 .375rem;
        color: #7D93C2;
        font-size: .2rem;
        background-color: #011244;
        span{
          display: block;
        }
      }
      p{
        color: #fff;
        text-indent: 2em;
      }
    }
  }
}

.scroll-animation {
  animation: myMove 16s linear infinite;
  animation-fill-mode: forwards;
}

@keyframes myMove {
  0% {
    transform: translateY(1rem);
  }
  100% {
    transform: translateY(calc(-1 * var(--container-height)));
  }
}

.four-ranking{
  height: 4.85rem;
  &.lending-ranking{
    padding: 0;
  }
  .ranking-cont{
    margin: .25rem .375rem 0 .3125rem;
    .ranking-list{
      padding-top: .125rem;
    }
  }
}

.ranking-list{
  li.hovered{
    background-color: #142B76;
    border-radius: .05rem;
    animation: myListScale 1s forwards;
  }
}

@keyframes myListScale {
  to {
    -webkit-transform: scaleX(1.06) scaleY(1.03);
    transform: scaleX(1.06) scaleY(1.03);
  }
}
.four-contact{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.9375rem;
  height: 2.125rem;
  background: url('~@/assets/images/page4_06.png') no-repeat top left;
  background-size: contain;
  .wechat-img{
    width: 1.35rem;
    height: 1.35rem;
    background: url('~@/assets/images/wechat-img2.png') no-repeat left top;
    background-size: contain;
    margin-right: .475rem;
    text-align: center;
    line-height: 1.35rem;
    overflow: hidden;
    img{
      display: block;
      padding: .125rem;
      width: 100%;
    }
  }
  span{
    display: block;
    font-size: .25rem;
    color: #4DDBFF;
    text-align: center;
  }
}





@media (max-width: 1440px) {
  .pageOne-database{
    margin-top: .375rem;
    height: 6.5rem;
  }
  .pageOne-book {
    .pageOne-book-content {
      padding: .375rem 0;
      .wechat-code{
        width: 4.25rem;
        height: 5.5rem;
        .wechat-img{
          width: 2.25rem;
          height: 2.25rem;
          line-height: 2.5rem;
        }
        span{
          font-size: .275rem;
        }
      }
    }
  }
  .scrollBox{
    .seamless01{
      margin-bottom: .5rem;
    }
    ul{
      height: 2.3rem;
      li{
        width:  1.625rem;
        height: 2.3rem;
        margin-right: .7375rem;
        .bord{
          .book-img{
            width: 1.625rem;
            height: 2.3rem;
          }
        }
      }
    }
  }

  .page-three {
    .three03, 
    .three04{
      height: calc(100vh/2 - 1.375rem);
    }
  }

  .four-video{
    width: 16.625rem;
    height: calc(100vh - 2.5rem);
    background-size: 100% 100%;
  }

  .el-carousel__container{
    height: calc(100vh - 4.5rem);
    overflow: hidden;
  }

  .four-notice{
    height: 4rem;
    .seamless-warp{
      height: 3.25rem;
    }
  }

  .four-contact{
    width: 5.9375rem;
    height: 2.5rem;
    background-size: 100% 100%;
    .wechat-img{
      width: 1.5rem;
      height: 1.5rem;
    }
    span{
      font-size: .275rem;
    }
  }

}