intelligent-inquiry-machine/src/assets/styles/index.scss

#screen-container {
  width: 100%;
  height: 100vh;
  padding: 0 0.175rem;
  font-size: 0.25rem;
  line-height: 0.35rem;
  color: #fff;
  background-color: #010326;
  overflow: hidden;
}
.index-box{
  background: url('~@/assets/images/index/bg.png') no-repeat 0 0;
  background-size: cover;
  header{
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 60px;
    .logo{
      width: 675px;
      height: 90px;
      background: url('~@/assets/images/index/logo.png') no-repeat 0 0;
      margin-right: 70px;
    }
    .header-title{
      width: 800px;
      height: 100px;
      background: url('~@/assets/images/index/title.png') no-repeat 0 0;
    }
  }
  main{
    width: 1200px;
    margin: 0 auto;
    color: #333;
    font-size: 40px;
    .up-box{
      height: calc(100vh - 241px);
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: relative;
      .bg-middle{
        width: 760px;
        height: 180px;        
        .span-middle{
          padding-left: 127px;
          position: relative;
          line-height: 180px;
          &::before{
            display: block;
            width: 87px;
            height: 80px;
            content: "";
            position: absolute;
            left: 0;
            top: -20px;
          }
        }
      }
      .bg-big{
        width: 400px;
        height: 620px;
        .span-big{
          padding-top: 350px;
          display: inline-block;
          position: relative;
          &::before{
            display: block;
            content: "";
            position: absolute;
            left: 0;
            bottom: 80px;
          }
        }
      }
      .bg-small{
        .span-small{
          line-height: 180px;
          position: relative;
          margin-left: 90px;
          &::before{
            display: block;
            width: 73px;
            height: 59px;
            content: "";
            position: absolute;
            left: -83px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
      .up-left{
        height: calc(100vh - 255px);
        .brief{              
          margin-bottom: 40px;
          background: url('~@/assets/images/index/760 180 up.png') no-repeat 0 0;
          background-size: contain;
          span::before{
          background: url('~@/assets/images/index/brief.png') no-repeat 0 0;
          background-size: contain;
          }
        }
        .up-left-down{
          width: 760px;
          height: 620px;
          // height: 100%;
          display: flex;
          justify-content: space-between;
          .guide{
            background: url('~@/assets/images/index/400 620 left.png') no-repeat 0 0; 
            background-size: contain;
            span::before{
              width: 153px;
              height: 200px;
              background: url('~@/assets/images/index/guide.png') no-repeat 0 0; 
              background-size: contain;
            }
          }
          .right-of-guide{
            div{
              width: 320px;
              height: 180px;
              &.new-book{
                background: url('~@/assets/images/index/320 180 up.png') no-repeat 0 0; 
                background-size: contain;
                margin-bottom: 40px;
                span::before{
                  background: url('~@/assets/images/index/newbook.png') no-repeat 0 0; 
                  background-size: contain;
                }
              }
              &.digital{
                background: url('~@/assets/images/index/320 180 down.png') no-repeat 0 0; 
                background-size: contain;
                span::before{
                  background: url('~@/assets/images/index/digital.png') no-repeat 0 0; 
                  background-size: contain;
                }
              }
            }
          }

        }
      }
      .up-right{
        background: url('~@/assets/images/index/400 620 right.png') no-repeat 0 0; 
        background-size: contain;
        span::before{
          width: 240px;
          height: 200px;
          left: -40px !important;
          background: url('~@/assets/images/index/search.png') no-repeat 0 0; 
          background-size: contain;
        }
      }
      .activities{
        background: url('~@/assets/images/index/760 180 down.png') no-repeat 0 0; 
        background-size: contain;
        position: absolute;
        right: 0;
        top: 660px;
        span::before{
          background: url('~@/assets/images/index/activities.png') no-repeat 0 0; 
          background-size: contain;
        }
      }
    }
  }
}

.tac{
  text-align: center;
}

.content-main{
  display: flex;
  justify-content: space-between;
  height: 880px;
  background: #F4F4F4;
  overflow: hidden;
}