ftExhibition/css/index.css

/**滚动条的宽度*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/**滚动条的滑块*/
::-webkit-scrollbar-thumb {
  background-color:  #13439E;
  border-radius: 4px;
}

/**只需要加上这一行*/
::-webkit-scrollbar-corner {
  background-color: transparent;
}

textarea {  
  resize: none; /* 禁止用户手动拖动调整大小 */  
} 

textarea::-webkit-input-placeholder { /* Chrome, Opera, Safari */
  color: #fff;
}
 
textarea:-moz-placeholder { /* Firefox 18- */
  color: #fff;
  opacity: 1; /* 修复老版本Firefox的不透明度问题 */
}
 
textarea::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
  opacity: 1; /* 修复Firefox的不透明度问题 */
}
 
textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

@font-face {
  font-family: "DOUYU-Regular";
  src: url('../fonts/斗鱼追光体.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PingFang";
  src: url('../fonts/PingFang.ttc');
  font-weight: normal;
  font-style: normal;
}

.ai-wrapper{
  position: relative;
  width: 100vw;
  height: 100vh;
  /* background-color: #0F1B46; */
  font-family: 'DOUYU-Regular';
  overflow: hidden;
}

.doubleExit{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  z-index: 9999;
}

.ai-bg{
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
}
/* 头部 */
.ai-header-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.8125rem;
  overflow: hidden;
  z-index: 999;
}

.ai-header{
  position: relative;
  width: 100%;
  height: 100%;
}
.header-left{
  position: absolute;
  top: .45rem;
  left: 0;
  display: flex;
  justify-content: flex-start;
}
.header-btn{
  display: flex;
  justify-content: center;
  width: 2.2875rem;
  height: 1.1125rem;
  line-height: .7rem;
  font-size: .175rem;
  color: #fff;
  background: url('../images/header-btn.png') no-repeat left top;
  background-size:cover;
}

.header-btn span{
  display: block;
  width: .25rem;
  height: .25rem;
  margin-top: .175rem;
  margin-right: .025rem;
}

.header-home span{
  background: url('../images/icon_home_full.png') no-repeat left top;
  background-size:cover;
}

.header-return{
  margin-left: -0.75rem;
}

.header-return span{
  background: url('../images/return.png') no-repeat left top;
  background-size:cover;
}

.header-login{
  position: absolute;
  top: .45rem;
  right: 0;
}

.header-login span{
  background: url('../images/icon_my_full.png') no-repeat left top;
  background-size:cover;
}

.header-btn:hover{
  background: url('../images/header-btn-hover.png') no-repeat left top;
  background-size:cover;
  cursor: pointer;
}

.header-title {
  width: 24.025rem;
  height: 1.8125rem;
  margin: 0 auto;
  background: url('../images/header.png') no-repeat left top;
  background-size:cover;
}

.header-title h2{
  font-size: .475rem;
  line-height: 1.25rem;
  font-weight: 300;
  text-align: center;
  background: -webkit-linear-gradient(90deg, #fff 0%, #9FCAFF 70%);
  background: linear-gradient(180deg, #fff 0%, #9FCAFF 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0px 11px 11px rgba(105,173,255,0.34), 0px 0px 24px rgba(105,173,255,0.68);
}
/* 首页菜单部分 */
.ai-index{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.index-list {
  position: absolute;
  top: 2.5rem;
}

.list-left{
  left: 1.5rem;
}

.list-right{
  right: 1.5rem;
}

.index-list li{
  position: relative;
  width: 5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  z-index: 9999;
  cursor: pointer;
}

.index-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5rem;
  height: 2.5rem;
  background: url('../images/index-box2.png') no-repeat left top;
  background-size:cover;
  z-index: 10;
}

.other-bg li::before{
  background: url('../images/index-box.png') no-repeat left top;
  background-size:cover;
}


.index-list li a{
  position: relative;
  display: block;
  width: calc(100% - .625rem);
  height: calc(100% - .5rem);
  padding: .5rem 0 0 .625rem;
  cursor: pointer;
}

.index-list li a p{
  position: relative;
  font-size: .4rem;
  z-index: 99;
  color: #fff;
}

.index-list li a span{
  position: relative;
  font-size: .3rem;
  font-family: 'PingFang';
  background: -webkit-linear-gradient(360deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(360deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  z-index: 99;
}

.index-list li a img{
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 99;
}

.list-right li::before{
  transform: rotateY(-180deg)
  /* transform: scaleY(-1); */
}

.list-left li:nth-child(1),
.list-left li:nth-child(3){
  margin-left: 1rem;
}

.list-right li:nth-child(2){
  /* margin-left: 1rem; */
}

.list-right li a{
  text-align: right;
  padding: .5rem .625rem 0 0;
}

.list-right li a{
  padding: .5rem .625rem 0 0;
}

.list-right li img{
  left: 0;
}

/* 没有背景框的时候 */
.no-box-style li::before{
  background: none;
}

.no-box-style li a img{
  position: absolute;
  right: -0.25rem;
  top: -.75rem;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
}

.no-box-style.list-right li a img{
  left:  -0.25rem;
}

.no-box-style li a span{
  background: none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:#3D528B;
  color: #3D528B;
}


.list-left li:nth-child(1) {
  position: absolute;
  left: 0;
  top: 0;
}

.list-left  li:nth-child(2) {
  position: absolute;
  left: 0;
  top: 280px;
  animation-delay: .3s;
}

.list-left li:nth-child(3) {
  position: absolute;
  left: 0;
  top: 560px;
  animation-delay: .6s;
}

.list-right li:nth-child(1) {
  position: absolute;
  right: 1rem;
  top: 0;
}

.list-right li:nth-child(2) {
  position: absolute;
  right: 0;
  top: 280px;
  animation-delay: .3s;
}

.list-right li:nth-child(3) {
  position: absolute;
  right: 1rem;
  top: 560px;
  animation-delay: .6s;
}


/* 首页-机器人+底图 */
.index-middle{
  width: 11.25rem;
}

.index-middle img{
  display: block;
}

.ai-human{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  /* animation-duration: .4s;
  animation-delay: .3s; */
}

.ai-bottom{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}

/* 编程体验 */
.page-content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 2.75rem);
  padding-top: 2.75rem;
  z-index: 10;
  font-family: 'PingFang';
}

/* AI资源库 */
.ai-resource{
  width: calc(100% - 2.5rem);
  height: calc(100% - 2.5rem);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
}

.ai-resource li a{
  display: block;
  width: 5rem;
  height: 3.5rem;
  background: url("../images/page-box2.png") no-repeat left top;
  background-size: cover;
  backdrop-filter: blur(10px);
}

.list-img {
  width: 4.6rem;
  height: 2.725rem;
  padding-top: .2rem;
  margin: 0 auto .125rem auto;
  border-radius: .1rem;
  overflow: hidden;
}
.list-img img{
  display: block;
  height: 2.725rem;
  border-radius: .1rem;
}

.ai-resource li p{
  font-size: .25rem;
  height: .375rem;
  line-height: .375rem;
  color: #fff;
  text-align: center;
}

/* 作品展示 */
.work-wrapper{
  width: 1692px;
  height: 948px;
  margin: -1.425rem auto 0 auto;
  background: url("../images/list-bg.png") no-repeat left top;
  background-size: cover;
  /* overflow: hidden; */
}

.work-content{
  position: relative;
  padding: .125rem .5rem 0 .5rem;
}

.work-header{
  display: flex;
  justify-content: flex-start;
  padding: .35rem .5rem .125rem .4rem;
  height: .525rem;
  line-height: .525rem;
  font-size: .35rem;
  color: #90B6FF;
  text-align: left;
}

.work-header p:first-child{
  width: .8rem;
}

.work-header p.item-name{
  width: 6.725rem;
}

.work-header p:last-child{
  flex: 1;
}
.swiper-container {
  padding-top: .1875rem;
  height: 10.25rem;
}
.swiper-btn {
  position: absolute;
  top: 50%;
  width: .5rem;
  height: 2.5rem;
  margin-top: -1.25rem;
  cursor: pointer;
}
.swiper-prev{
  left: -0.875rem;
  background: url("../images/left.png") no-repeat left top;
  background-size: cover;
}

.swiper-next{
  right: -0.875rem;
  background: url("../images/right.png") no-repeat left top;
  background-size: cover;
}

.work-list li a{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: .5rem;
  margin-bottom: .275rem;
  height: 1.25rem;
  line-height: 1.25rem;
  font-size: .35rem;
  color: #fff;
  text-align: left;
  background: linear-gradient( 90deg, #2C509B 0%, rgba(44,80,155,0.6) 100%);
  border-radius: .2rem;
}

.item-num{
  width: .525rem;
  height: .525rem;
  border-radius: 100%;
  text-align: center;
  line-height: .525rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 60%);
}

.item-name {
  width: 6.875rem;
  margin: 0 .25rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-author,
.item-time{
  width: 3rem;
  margin-right: .25rem;
}

.list-star{
  display: flex;
  justify-content: flex-start;
  width: 3rem;
}

.list-star span{
  display: block;
  width: .4rem;
  height: .4rem;
  margin-right: .125rem;
  background: url("../images/index-img5.png") no-repeat left top;
  background-size: cover;
}
.list-star span.active-star{
  position: relative;
  display: block;
  background: url("../images/index-img4.png") no-repeat left top;
  background-size: cover;
}

.list-star span.active-star::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: .25rem;
  height: .25rem;
  border-radius: 100%;
  background-color: rgba(255,183,76,0.3);
  box-shadow: 0px 0px 12px 0px rgba(255,183,76,0.34), 0px 0px 24px 0px #FFB74C;
  filter: blur(4px);
  transform: translate(-50%,-50%);
}
.item-handle{
  width: 1.75rem;
  height: 1.1rem;
  background: url("../images/index-img6.png") no-repeat left top;
  background-size: cover;
  margin-left: -0.125rem;
  cursor: pointer;
}

/* ai数字人 start */
.chat-wrapper {
  position: absolute;
  right: .5rem;
  top: 1.4rem;
  width: 14.8125rem;
  height: 11rem;
  padding: .3rem;
  background: url("../images/list-bg.png") no-repeat left top;
  background-size: 100% 100%;
  z-index: 99;
  font-family: 'PingFang';
}

.chat-content {
  width: 100%;
  height: calc(100% - 2.925rem);
  overflow: hidden;
  overflow-y: scroll;
}

.chat-message {
  display: flex;
  justify-content: flex-end;
  font-size: .35rem;
  color: #fff;
  margin-bottom: .2rem;
}

.chat-message p {
  position: relative;
  line-height: .625rem;
  padding: .125rem .2rem;
  background: rgba(0,0,0,0.2);
  border-radius: .35rem .1rem .35rem .35rem;
  max-width: 90%;
}

.chat-message p span{
  position: absolute;
  left: .05rem;
  bottom: -0.5rem;
  width: 1rem;
  padding-left: .3rem;
  height: .4rem;
  text-align: center;
  line-height: .4rem;
  border: 1px solid #4CA7FF;
  color: #4CA7FF;
  border-radius: .075rem;
  font-size: .2rem;
  cursor: pointer;
}

.chat-message p span::before{
  content: '';
  position: absolute;
  left: .05rem;
  top: 50%;
  width: .3rem;
  height: .3rem;
  background: url("../images/index-img7.png") no-repeat left top;
  background-size: 100% 100%;
  margin-top: -0.15rem;
}

.chat-message p span:hover{
  background-color: rgba(255,255,255,.2);
}

.chat-message p span.remove-btn{
  padding-left: 0;
  border: none;
  color: #999;
}

.chat-message p span.remove-btn::before{
  border: none;
  color: #999;
  background: none;
}

.chat-message p span.remove-btn:hover{
  background-color: transparent;
  cursor: default;
}

/* .chat-message img {
  display: block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
} */

.bot-message {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.bot-message p {
  line-height: .6rem;
  background-color: rgb(255,255,255,0.2);
  border-radius: .1rem .35rem .35rem .35rem;
}

.loading{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: .825rem;
}
.loading img{
  display: block;
  width: .8375rem;
  margin:  0 .1rem;
}

/* .loading i {
  display: block;
  width: .15rem;
  height: .15rem;
  margin: 0 .075rem;
  border-radius: 50%;
  background-color: #fff;
  animation: rotate 2s linear infinite;
}

.loading i:nth-child(1) {
  animation: jump 1.2s -0.4s linear infinite;
}

.loading i:nth-child(2) {
  animation: jump 1.2s -0.2s linear infinite;
}

.loading i:nth-child(3) {
  animation: jump 1.2s linear infinite;
}

@keyframes jump {
 0%,
 80%,
 100% {
  transform: scale(0.8);
  opacity: 1.0;
 }
 40% {
   transform: scale(1.1);
   opacity: 0.8;
 }
} */

.chat-send {
  width: 100%;
  height: 2.625rem;
  margin-top: .3rem;
  background: linear-gradient( 90deg, #2C509B 0%, rgba(44,80,155,0.6) 100%);
  border-radius: .2rem;
}

.chat-send textarea {
  display: block;
  width: calc(100% - .5rem);
  height: 1rem;
  font-size: .3rem;
  line-height: .45rem;
  border: none;
  padding: .25rem;
  background-color: transparent;
  color: #fff;
}

.send-button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .25rem 0 0;
  margin-top: .2rem;
}

.hot-word span{
  position: relative;
  display: inline-block;
  font-size: .25rem;
  color: #fff;
  line-height: .625rem;
  margin: 0 .125rem;
  padding: .075rem .2rem .075rem .6rem;
  background: rgba(0,0,0,0.2);
  border-radius: .35rem .1rem .35rem .35rem;
}

.hot-word span::before{
  content: "";
  position: absolute;
  left: .15rem;
  top: 50%;
  width: .375rem;
  height: .375rem;
  background: url("../images/wenhao.png") no-repeat left top;
  background-size: 100% 100%;
  transform: translateY(-50%);
}

.hot-word span:hover{
  background-color: rgba(0,0,0,0.6);
  cursor: pointer;
}

.send-button {
  position: relative;
  display: inline-block;
  width: .9rem;
  height: .725rem;
  line-height: .725rem;
  padding-left: .75rem;
  font-size: .325rem;
  text-align: left;
  color: #fff;
  background: linear-gradient(135deg, #06BFFF 0%, #2B74FF 100%);
  border-radius: .725rem;
  cursor: pointer;
}

.send-button::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: 50%;
  width: .45rem;
  height: .45rem;
  background: url("../images/index-img8.png") no-repeat left top;
  background-size: .45rem .45rem;
  transform: translateY(-50%);
}

.send-disabled-button {
  background: rgba(255,255,255,.2);
  cursor: not-allowed;
}

.run-btn {
  position: relative;
  width: 1.25rem;
  height: .725rem;
  line-height: .725rem;
  padding-left: .75rem;
  font-size: .325rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #06BFFF 0%, #2B74FF 100%);
  border-radius: .725rem;
  cursor: pointer;
  margin: .5rem 0 0 .25rem;
}

.run-btn::before {
  content: "";
  position: absolute;
  left: .375rem;
  top: 50%;
  width: .45rem;
  height: .45rem;
  background: url("../images/run.png") no-repeat left top;
  background-size: .45rem .45rem;
  transform: translateY(-50%);
}

/* ai数字人 end */

.page-big-ai{
  display: block;
  height: 7.5rem;
  margin: -1rem auto 0 auto;
}

.program-mode {
  position: relative;
  /* margin: 0 auto; */
}

.program-mode .ai-resource{
  justify-content: center;
} 

.program-mode .ai-resource li{
  margin: 0 .5rem;
} 

.program-mode .swiper-prev{
  left: 1rem;
}

.program-mode .swiper-next{
  right: 1rem;
}

/* layer 样式修改 */
.layui-layer-video{
  background: linear-gradient( 180deg, #183375 0%, #122050 100%);
  border-radius: 0.1rem !important;
}
.layui-layer-video .layui-layer-title{
  font-size: .3rem !important;
  font-weight: 500;
  color: #fff !important;
  background: linear-gradient( 90deg, #5B9DFF 0%, rgba(91,157,255,0) 100%);
  border-bottom: none !important;
  border-radius: 0.1rem .1rem 0 0  !important;
}
.layui-layer-setwin{
  right: .125rem !important;
  top: .125rem !important;
}
.layui-layer-setwin a.layui-layer-close{
  width: .4rem !important;
  height: .4rem !important;
  color: #fff !important;
  background: url("../images/index-img3.png") no-repeat left top  !important;
  background-size: .4rem .4rem  !important;
}
.layui-layer-video .layui-layer-content{
  padding: .3rem !important;
}
.layui-layer-video .layui-layer-content .empty-data{
  width: 50%;
}
.layui-layer-video .layui-layer-content .empty-data img{
  width: 2.125rem;
  margin: 0 auto;
}

.layui-layer-video.layui-layer-iframe iframe{
  height: 8.75rem !important;
}

#videoBox{
  width: 100%;
  height: 100%;
}

/* pdf页面 */
.perview-wrapper{
  background: linear-gradient( 180deg, #183375 0%, #122050 100%);
  font-family: 'PingFang';
}
.style-line-top{
  width: 100%;
  height: .05rem;
  background: linear-gradient( 90deg, rgba(91, 157, 255, 0.8) 0%, rgba(91, 157, 255, 0.1) 60%);
  box-shadow: 0px 0px 5px 0px #1766FF, 0px 0px 12px 0px #1766FF, 0px 0px 20px 0px #1766FF;
}
.perview-wrapper .ai-header-wrapper{
  height: 1rem;
  font-family: 'DOUYU-Regular';
}
.perview-wrapper .ai-header{
  height: calc(100% - .05rem);
}
.perview-wrapper .header-left{
  top: .15rem;
  left: -0.125rem;
}
.perview-wrapper .header-login{
  top: .15rem;
}

#my-pdf {
  position: fixed;
  top: 1rem;
  left: 0;
  width: calc(100vw);
  height: calc(100vh - 1rem);
  z-index: 999;
}

#leftpdf{
  height: calc(100%);
}

.perview-codeVideo{
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  height: calc(100vh - 1.3rem);
  padding: 0 .3rem .3rem .3rem;
  background: url("../images/content-bg.png") no-repeat right bottom;
  background-size: 9.2875rem 8.55rem;
}

.perview-code{
  position: relative;
  width: 15.7rem;
  height: 12.2rem;
  overflow: hidden;
  background-color: #000;
}

.empty-data{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.125rem;
  text-align: center;
  font-size: .35rem;
  color: #fff;
  transform: translate(-50%,-50%);
}
.empty-data img{
  display: block;
  width: 100%;
}

.perview-video{
  width: 7.4rem;
}

.perview-video .video-content {
  width: 100%;
  height: 4.5rem;
  background-color: #000;
  overflow: hidden;
}

.perview-info{
  font-size: .35rem;
  color: #fff;
}

.perview-info li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  line-height: .525rem;
  margin-top: .5rem;
}

.perview-info li i{
  position: relative;
  display: block;
  color: #83D2FE;
  padding-left: .5rem;
}

.perview-info li i::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .45rem;
  height: .45rem;
  margin-top: -0.225rem;
}

.perview-info li:nth-child(1) i::before {
  background: url("../images/index-img10.png") no-repeat left top;
  background-size: cover;
}
.perview-info li:nth-child(2) i::before {
  background: url("../images/index-img11.png") no-repeat left top;
  background-size: cover;
}
.perview-info li:nth-child(3) i::before {
  background: url("../images/index-img12.png") no-repeat left top;
  background-size: cover;
}
.perview-info li:nth-child(4) i::before {
  background: url("../images/index-img13.png") no-repeat left top;
  background-size: cover;
}
.perview-info li:nth-child(5) i::before {
  background: url("../images/index-img14.png") no-repeat left top;
  background-size: cover;
}

.perview-contentInfo{
  width: 100%;
}

.perview-contentInfo .video-content {
  background-color: #000;
}

.perview-contentInfo .perview-info {
  margin-left: .25rem;
}

/* 登录 */
.layui-layer.layui-layer-login{
  background-color: transparent !important;
}

.layui-layer.layui-layer-login .layui-layer-setwin{
  right: 40px !important;
  top: 40px !important;
}

.layer-login{
  font-family: 'PingFang';
  width: 400px!important;
  height: 560px!important;
  padding: .5rem !important;
  background: linear-gradient( 180deg, #183375 0%, #122050 100%);
  border-radius: .1rem!important;
  z-index: 9999;
}
.layer-login h3{
  font-family: 'DOUYU-Regular';
  text-align: center;
  font-size: .45rem;
  background: -webkit-linear-gradient(90deg, #fff 0%, #9FCAFF 70%);
  background: linear-gradient(180deg, #fff 0%, #9FCAFF 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0px 0px 11px rgba(105,173,255,0.34), 0px 0px 24px rgba(105,173,255,0.68);
}
.login-form{
  font-size: .35rem;
  color: #fff;
  padding: .8rem 0 .375rem 0;
}
.login-form input{
  display: block;
  width: calc(100% - .4rem);
  height: .8rem;
  line-height: .8rem;
  padding: 0 .2rem;
  border: 1px solid #6078CB;
  background-color: #111E4B;
  border-radius: .1rem;
  font-size: .3rem;
  color: #CCCCCC;
  margin: .075rem 0 .3rem 0;
}

::-ms-reveal {
  filter: invert(100%);
}

.login-submit{
  width: 100%;
  height: .8rem;
  line-height: .8rem;
  font-size: .35rem;
  color: #fff;
  background: linear-gradient( 135deg, #06BFFF 0%, #2B74FF 100%);
  text-align: center;
  border-radius: .8rem;
  cursor: pointer;
}
.user-info {
  font-size: .35rem;
  color: #fff;
  text-align: center;
}
.user-info img{
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

.user-name{
  margin-top: .3rem;
  font-size: .5rem;
}
.user-other{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: .5rem 0 .75rem 0;
}
.user-other li span{
  font-size: .3rem;
  color: rgba(255,255,255,0.6);
}

.change-accout-btn{
  width: 100%;
  height: .8rem;
  line-height: .8rem;
  text-align: center;
  border-radius: .8rem;
  border: 1px solid #06BFFF;
  cursor: pointer;
}
.wechat-login{
  padding-top: .8rem;
}

.wechat-login img{
  display: block;
  width: 4rem;
  margin: 0 auto;
}

.wechat-login span{
  display: block;
  font-size: .35rem;
  color: #fff;
  margin-top: .3rem;
  text-align: center;
}

.page-iframe{
  margin-top: 1rem;
  height: calc(100vh - 1rem);
}
.iframe {
  background-color: #fff;
  border: none;
  margin: 0 auto;
}

.page-cont-title{
  font-family: 'PingFang';
  font-size: .3rem;
  font-weight: 500;
  color: #fff;
  line-height: .7rem;
  text-shadow: 0px 0px 20px #0B88FC, 0px 0px 35px #0B0B88, 0px 0px 51px #0B88FC;
}