ftExhibition/css/index.css

@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;
}

.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-btn{
  position: absolute;
  top: .45rem;
  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{
  left: 0;
}

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

.header-login{
  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数字人 start */
.chat-wrapper {
  position: relative;
  width: 10rem;
  height: 10rem;
  margin: 1.75rem auto 0 auto;
  background-color: #fff;
  border-radius: .125rem;
  z-index: 99;
}

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

.chat-message {
  display: flex;
  justify-content: flex-end;
  margin: .125rem;
  padding: .125rem;
  line-height: .5rem;
  font-size: .25rem;
  color: #000;
}

.chat-message p {
  position: relative;
  line-height: .5rem;
  padding: 0 .125rem;
  margin-right: .125rem;
  background-color: burlywood;
  border-radius: .05rem;
}

.chat-message p span{
  position: absolute;
  left: 0;
  bottom: -0.45rem;
  width: 1rem;
  height: .375rem;
  text-align: center;
  line-height: .375rem;
  border: 1px solid #000;
  border-radius: .05rem;
  font-size: .175rem;
  cursor: pointer;
}

.chat-message p span:hover{
  background-color: #999;
}

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

.chat-message p span.remove-btn:hover{
  background-color: #fff;
}

.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 {
  margin-left: .125rem;
  background-color: rgb(0, 209, 112);
}
.loading{
  position: relative;
}
.loading img {
  display: block;
  width: .25rem;
  height: .25rem;
  margin-top: .125rem;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.chat-send {
  width: 100%;
  height: 2.5rem;
  background-color: #fff;
  border-radius: .125rem;
}

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

.send-button-container {
  text-align: right;
}

.send-button {
  margin: .125rem .25rem 0 0;
  padding: 0 .25rem;
  line-height: .5rem;
  font-size: .325rem;
  color: #000;
}

.send-disabled-button {
  color: #7c7c7c;
}

/* ai数字人 end */