qy_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/bg.png') no-repeat top center #02061a;
}

.page-wrapper{
  width: 100%;
	height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #001244;
  padding-top: 1.5625rem;
  overflow: hidden;
}

.loading {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	z-index: 99999999;
}

// 头部主题标题
.header-container {
	position: relative;
	width: 100%;
	height: 1.25rem;
	font-size: .375rem;
	color: #fff;
  z-index: 9999;
	// &::before,
	// &::after{
	//   content: "";
	//   position: absolute;
	//   top: 0;
	//   width: 6.2rem;
	//   height: 1.05rem;
	// }
	// &::before{
	//   left: 0;
	//   background: url('~@/assets/images/header-left.png') no-repeat top center;
	// }
	// &::after{
	//   right: 0;
	//   background: url('~@/assets/images/header-right.png') no-repeat top center;
	// }
	.header-title {
		position: relative;
		width: 19.5875rem;
		height: 1.25rem;
		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-text {
		position: absolute;
	}
	.header-weather {
		top: .1875rem;
    width: 3.125rem;
		right: -.2rem;
		overflow: hidden;
	}
	.header-date {
		top: .2125rem;
		left: .2125rem;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.time {
			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;
			}
		}
	}
}

// // 头部动态效果
// .line1,
// .line2{
//   position: absolute;
//   top: 0;
// }

// .line1{
//   right: 632px;
//   transform: rotateY(-180deg);
// }

// .line2{
//   left: 632px;
// }

// .top-line1,
// .top-line2{
//   display: block;
//   width: 7.925rem;
//   height: 1.075rem;
//   animation: topline 4s linear infinite both;
// }

// .top-line1{
//   background: url('~@/assets/images/top-line.png') no-repeat;
// }

// .top-line2{
//   background: url('~@/assets/images/top-line.png') no-repeat;
// }

// @keyframes topline {
//   from {
//       width: 0;
//   }
//   50%,
//   to {
//       width: 643px;
//   }
// }

// 底部底色
.bottom-bg {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 19.775rem;
	height: .6rem;
	background: url('~@/assets/images/bottom-bg.png') no-repeat top left;
	background-size: cover;
  z-index: 999;
}

// 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;
    align-items: center;
    & img{
      display: block;
    }
    .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;
      }
    }
	}
}

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

.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 .4rem 0 .125rem;
  .allTotal{
    width: 2.5rem;
    height: 1.1rem;
    padding-left: 1.2125rem;
    background: url('~@/assets/images/database-icon1.png') no-repeat left top;
    background-size: 100% 100%;
  }
  .currentNum{
    width: 2.5rem;
    height: 1.1rem;
    padding-left: 1.2125rem;
    background: url('~@/assets/images/database-icon2.png') no-repeat left top;
    background-size: 100% 100%;
  }
}

.flop-figure {
	position: relative;
	display: inline-block;
	width: .275rem;
	height: 100%;
	line-height: .175rem;
	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: .275rem;
		i {
			font-size: .275rem;
      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: .1875rem;
}


// 左边进度条
.pageOne-left-progress{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 .475rem 0 .35rem;
  li{
    position: relative;
    width: 2.2rem;
    font-size: .175rem;
    padding-left: .2875rem;
    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: .25rem;
      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;
      }
      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;
  .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: #B5C1D1;
              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.375rem;
            text-align: right;
          }
        }
      }
    }
  }
  .lib-text{
    width: 100%;
    height: calc(100vh - 8.625rem);
    font-size: .225rem;
    line-height: .35rem;
    background: linear-gradient(-180deg, rgba(40, 74, 142, 0.4),rgba(0,0,0,0));
    border-radius: 4px;
    padding: .25rem  .2875rem 0 .2875rem;
    color: #ADC7FF;
    overflow: hidden;
    overflow-y: scroll;
  }
}
.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: cover;
  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;
  // height: 10.45rem;
  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;
    // line-height: .5rem;
    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{
      // height: calc(100vh - 6.875rem);
      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: .15rem;
      color: #79B8FF;
      background: linear-gradient(90deg, rgba(66,139,221,0.2), rgba(66,139,221,0));
      li {
        &:last-child{
          width: 1.375rem;
        }
      }
    }
    .ranking-list{
      li{
        display: flex;
        justify-content: space-around;
        font-size: .175rem;
        color: #eef6ff;
        line-height: .375rem;
        padding-top: .125rem;
        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{
  position: relative;
  min-width: 3rem;
  .tooltip-line{
    width: .15rem;
    height: 0;
    background: url('~@/assets/images/line.png') no-repeat top left;
    position: absolute;
    left: -0.25rem;
    bottom: -0.625rem;
    transform-origin: bottom center;
    animation: growBar 1s forwards;
  }
}
.tooltip-content{
  opacity: 0;
  line-height: .4125rem;
  border: 1px solid #D1793D;
  background-color:  rgba(0,31,87,0.8);
  animation: slideInFromLeft 1s forwards;
  animation-delay:1s;
  .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{
    padding: .125rem .1875rem;
    font-size: 0.2rem;
    color: rgba(197, 209, 232, 1);
  }
}
@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;
  .three-item{
    width: 11.25rem;
    margin-bottom: .575rem;
    background-color: #01103D;
  }
  .three01,.three02{
    height: 5.25rem;
  }
  .three03,.three04{
    height: 4.7rem;
    margin-bottom: 0;
  }
  .database-title{
    width: 6.0375rem;
  }
}