4dkankan_official/src/page/eight/style.scss

$ani_delay: 0.4s;
$txt_delay: 0.2s;
$battery_time: 0.3s;
$num_time: 0.6s;

.product-layout {
  overflow: hidden;
  // background: url("~@/assets/images/background.jpg") top -135px center no-repeat;
}

.btns{
  font-size: 0;
}
.btns .button{
  height: 50px;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  margin-top: 20px;
  &:first-child {
    padding: 0 12px 0 11px;
    margin-right: 2px;
    margin-left: 4px;
  }

  &:last-child {
    line-height: 50px;
    color: #414141;
    padding: 0 98px;
    font-size: 14px;
  }
}

.plate01 {
  padding: 50px 0 ;
  // background:linear-gradient(
  //   65deg,
  //   #010101 20%,
  //   #171719 40%,
  //   #010101 60%
  // );
  background: #000;
  position: relative;

  .pl01-bg{
    width: 100%;
    position: absolute;
    left: 0;
    top: -100px;
    z-index: 0;
  }
  .layout {
    z-index: 1;
    max-width: 1148px;
    margin-top: 70px;
    overflow: hidden;
    position: relative;
    .product-img{
      width: 180px;
    }
    .info {
      display: inline-block;
      margin:40px 0 0 58px;
      width: 500px;
      vertical-align: top;
      >h2 {
        color: #fff;
        font-size: 48px;
        animation: fadeUp 0.5s ease-out 1 both;
        letter-spacing: -2.4px;
      }

      >h2:last-of-type{
        letter-spacing: 0;
        font-weight: 400;
        margin: 6px 0 50px;
        animation: fadeUp 0.5s ease-out 1 both $txt_delay;

      }
     
      >h3 {
        font-weight: 300;
        font-size: 36px;
        color: #fff;
        animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;

      }

      >h4 {
        font-size: 24px;
        color: #c4c3c3;
        font-weight: normal;
        margin: 76px 0 14px;
        animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;

      }
   
      >p {
        color: #c4c3c3;
        margin: 10px 0 ;
        font-size: 18px;
        letter-spacing: 0.9px;
        position: relative;
        left: 4px;
        animation: fadeUp 0.5s ease-out 1 both $txt_delay*4;

      }
      .p1{
        letter-spacing: 0.4px;
        margin: 10px 0 0;

      }
      .p2{
        font-size: 16px;
        margin: 6px 0 0px;
        padding-bottom: 10px;
        letter-spacing: 0.3px;
        display: inline-block;
      }

      ul {
        padding: 8px 0 0 22px;

        >li {
          list-style: disc;
          color: #a4a3a4;
          font-size: 14px;
          line-height: 24px;
          animation: fadeUp 0.5s ease-out 1 both $txt_delay*5;
        }
      }

      .money {
        margin-top: 15px;
        font-size: 36px;
        color: #fff;
        position: relative;
        left: -8px;
        letter-spacing: 1px;
      }
    }
    
  }

  
  .benefit {
    overflow: hidden;
    width: 1300px;
    margin: 300px auto 0;
    position: relative;
    left: -28px;

      .b-title {
      color: #ffffff;
      text-align: center;
      font-size: 48px;
      margin:8px 0 71px;
      letter-spacing: 2.5px;
      line-height: 45px;
      animation: fadeUp 0.5s ease-out 1 both;
      opacity: 0;
    }

    .item {
      float: left;
      width: 396px;
      margin-right: 56px;
      text-align: center;
      animation: fadeUp 0.5s ease-out 1 both;
      opacity: 0;

      &:last-child {
        margin-right: 0;
      }

      .iconfont{
        color: #1fe4dc;
        font-size: 74px;
      }
      
      h3 {
        font-size: 20px;
        color: #ffffff;
        font-weight: 500;
        margin:26px 0 5px;
      }

      p {
        color: #737373;
        line-height: 22px;
        font-size: 12px;
      }
    }
  }

}

.plate02 {
  margin: 0 auto ;
  background: #000;
  padding: 170px 0;
  height: 1050px;
  position: relative;
  overflow: hidden;

  .application {
    margin-left: 16.7vw;
    color: #fff;
    >h2 {
      color: #fff;
      font-size: 48px;
      letter-spacing: -1px;
      margin-top: 6px;
      animation: fadeUp 0.5s ease-out 1 both;
      opacity: 0;
    }

    >h2:last-of-type{
      font-weight: 400;
      margin-bottom: 30px;
      animation: fadeUp 0.5s ease-out 1 both $txt_delay;

    }
   
    >h3 {
      font-size: 36px;
      color: #fff;
      font-weight: 300;
      opacity: 0;
    }
    .download-btn{
      opacity: 0;
      animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
      margin-top: 126px;
      >div{
        display: inline-block;
        padding: 14px 34px 14px 92px;
        margin-right: 28px;
        cursor: pointer;
        font-size: 18px;
        font-weight: 600;
      }
      .apple{
        background: url("~@/assets/images/apple.png") #4d4d4d left 30px center no-repeat;
        background-size: 32px auto;
      }
      .android{
        background: url("~@/assets/images/android.png") #2fd36a left 30px center no-repeat;
        background-size: 32px auto;
      }
    }

  }
  .app-img{
    transform: rotate(-45deg);
    position: absolute;
    right: -563px;
    bottom: -321px;
    >img{
      width: 444px;
    }
    .i1{
      position: relative;
      transform: rotate(90deg) translate(-50%);
      transition: transform 1s cubic-bezier(.59, .01, .28, 1) .15s,
    }
    
    .i2{
      margin: 0 240px;
      position: relative;
      top: 0;
      transition: top 1s cubic-bezier(.59, .01, .28, 1) .15s,
    }

    .i3{
      transform: rotate(270deg) translateX(47%);
      transition: transform 1s cubic-bezier(.59, .01, .28, 1) .15s,
    }
    
  }
  
  
}

.plate03 {
  overflow: hidden;
  position: relative;
  padding: 140px 0 0;
  background: hsl(0, 0%, 10%); 
  .b-title {
    margin: 3px 9px 18px 0;
    font-weight: normal;
    color: #fff;
    animation: fadeUp 0.5s ease-out 1 both;
    opacity: 0;
  }

  .b-label {
    margin:0 10px 82px 0px;
    font-weight: 300;
    font-size: 36px;
    animation: fadeUp 0.5s ease-out 1 both $txt_delay;
    opacity: 0;
  }

  .info {
    width: 900px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
  }

  .front{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin: 145px auto;
    width: 1260px;
    .front-img{
      flex: 1;
      width: 380px;
      animation: fadeUp 0.5s ease-out 1 both $txt_delay;
    }
    .f-right{
      flex: 3;
      margin-left: 100px;
      p{
        width: 600px;
        color: #fff;
        font-size: 18px;
        line-height: 36px;
        font-weight: 400;
        animation: fadeUp 0.5s ease-out 1 both $txt_delay;

      }
      .f-params{
        display: flex;
        flex-wrap: wrap;
        margin-top: 70px;
        span{
          display: inline-block;
          width: 50%;
          color: #fff;
          line-height: 34px;
          position: relative;
          padding-left: 20px;
          animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
          &:before{
            content: '';
            display: inline-block;
            background: url("~@/assets/images/circle_before.png") center no-repeat;
            background-size: cover;
            position: absolute;
            top: 9px;
            left: 0;
            width: 16px;
            height: 16px;
          }
        }
      }
      .f-img{
        margin-top: 80px;
        animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
      }
      .f-intro{
        margin-top: 10px;
        p{
          font-size: 14px;
          line-height: 20px;
          color: #ccc;
          animation: fadeUp 0.5s ease-out 1 both $txt_delay*4;
          
        }
      }
    }
  }

  .bottom{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin: 145px auto;
    width: 1260px;
    .front-img{
      flex: 1;
      width: 380px;
      animation: fadeUp 0.5s ease-out 1 both;
    }
    .f-right{
      flex: 3;
      margin-left: 100px;
      .b-title{
        font-size: 36px;
        animation: fadeUp 0.5s ease-out 1 both;
      }
      p{
        width: 600px;
        color: #fff;
        font-size: 18px;
        line-height: 36px;
        font-weight: 400;
        animation: fadeUp 0.5s ease-out 1 both $txt_delay;
      }
      .f-params{
        display: flex;
        flex-wrap: wrap;
        .f-div{
          width: 50%;
          text-align: center;
          position: relative;
          top: 60px;
          animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;

        }
        .f-item{
          width: 50%;
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
          span{
            display: inline-block;
            color: #fff;
            line-height: 34px;
            position: relative;
            padding:0 20px;
          }
        }
      }
    }
  }

}

.plate04{
  background:#000;
  padding: 175px 0 130px;
  .info {
    // width: 1200px;
    position: relative;
    left: -22px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
  }

  .hsxp-layout{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 130px auto;
    .hsxp-imgcon{
      animation: fadeUp 0.5s ease-out 1 both;
      div{
        width: 57.5vw;
        height: 20vw;
        margin-left: 220px;
        background-image: url('~@/assets/images/xinpian.png');
        background-repeat: no-repeat;
        background-position: 0% 0px;
        background-size: cover;
        overflow-x: hidden;
        will-change: background;
        animation: xinpian-open 0.6s steps(4) infinite;
      }
    }
    .hsxp-right{
      color: #fff;
      position: relative;
      left: -350px;
      text-align: right;
      animation: fadeUp 0.5s ease-out 1 both;
    }
  }

  .qmjt-layout{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 130px auto;
    width: 1300px;
    .qmjt-left{
      color: #fff;
      animation: fadeUp 0.5s ease-out 1 both;
    }
    .qmjt-imgcon{
      animation: fadeUp 0.5s ease-out 1 both;
    }
  }

  .cgq-layout{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 130px auto;
    .cgq-imgcon{
      animation: fadeUp 0.5s ease-out 1 both;
      div{
        width: 34vw;
        height: 20vw;
        background-image: url('~@/assets/images/sony.png');
        background-repeat: no-repeat;
        background-position: 0% 0px;
        background-size: cover;
        overflow-x: hidden;
        will-change: background;
        animation: xinpian-open 0.2s steps(5) forwards $ani_delay;
      }
    }
    .cgq-right{
      color: #fff;
      position: relative;
      left: -250px;
      animation: fadeUp 0.5s ease-out 1 both;
      text-align: right;
    }
    
  }

  .jzxj-layout{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 130px auto;
    width: 1300px;
    .jzxj-left{
      animation: fadeUp 0.5s ease-out 1 both;
      color: #fff;
    }
    .jzxj-imgcon{
      animation: fadeUp 0.5s ease-out 1 both;
    }
  }

  .b-title {
    margin-bottom: 30px;
    animation: fadeUp 0.5s ease-out 1 both ;
    opacity: 0;
  }

  .b-label {
    font-weight: 300;
    font-size: 36px;
    animation: fadeUp 0.5s ease-out 1 both $txt_delay;
    opacity: 0;

  }
}

.plate05{
  padding: 250px 0 260px;
  background: url('~@/assets/images/lin-bg.png') top center no-repeat;
  .b-title{
    color: #fff;
    font-size: 36px;
    font-weight: 400;
  }
  .b-label{
    color: #fff;
    font-size: 36px;
    font-weight: 300;
    margin-top: 20px;
  }
  .qingxidu{
    text-align: center;
    padding: 50px 0;
    .c-qxd{
      margin-top: 40px;
    }

    .line-canvas{
      margin-top: 40px;
    }
    .line-txt{
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 1100px;
      margin: 20px auto 0;
      position: relative;
      div{
        flex: 1;
        p{
          font-size: 24px;
          color: #6b6b6c;
        }

      }
      img{
        cursor: pointer;
        width: 80px;
        position: relative;
      }
      .line-circle{
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #333;
        left: calc(50% + 19px);
        z-index: 15;
        top: 6px;
        transform: translateX(-50%);
        animation:mymove 1s infinite;
        box-sizing: content-box
      }
    }

    .qxd-3{
      display: flex;
      justify-content: space-between;
      width: 1280px;
      margin: 40px auto 0;
      div{
        width: 49%;
        video{
          width: 100%;
        }
        p{
          font-size: 24px;
          color: #6b6b6c;
          margin-top: 15px;
        }
      }
    }
    
    .qxd-4{
      margin-top: 40px;
      padding: 144px 0 172px;
      background: url('~@/assets/images/battery-bg.png') top center no-repeat;
      .qxd-4-battery{
        margin: 0 auto;
        width: 679px;
        height: 131px;
        position: relative;
        .lighting-txt{
          font-size: 30px;
          color: #dadada;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          // animation: lighting-back $battery_time linear forwards;
          font-weight: bold;
          span:first-child{
            font-weight: normal;
            color: #6b6b6c;
            padding-right: 15px;
          }
          .lighting-span{
            font-size: 30px;
          }
          .lighting-span::before{
            content: '';
            display: inline-block;
            animation: num-add $num_time linear forwards;
          }
          .num{
            color: #fff;
            padding-right: 0;
          }
        }
        .first-txt{
          width: 45%;
          animation: lighting-txt $battery_time linear forwards;
        }
        .fix-txt{
          right: 0;
          font-size: 0;
          span{
           font-size: 30px;
          }
        }
        .lighting{
          width: 80px;
          height: 130px;
          background-image: url('~@/assets/images/lighting.png');
          background-repeat: no-repeat;
          background-position: 0% 0px;
          background-size: cover;
          overflow-x: hidden;
          will-change: background;
          position: absolute;
          left: 50%;
          z-index: 20;
          // animation: lighting1 0.5s ease-in-out forwards;
          transform: translateX(-50%);
          will-change: background;
          animation: lighting1 $battery_time steps(9) forwards;
        }
        .battery-mask{
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          width: 55%;
          background: no-repeat 100% 0;
          background-image: url('~@/assets/images/battery-right.png');
          background-size: auto 100%;
          animation: lighting $battery_time linear forwards;
          clip-path: polygon(15% 0%,100% 0, 100% 100%, 0% 100%);
          .lighting-txt{
            width: 100%;
          }
        }
        img:first-child{
          position: absolute;
          top: 0;
          left: 0;
          margin: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.plate06 {
  padding: 172px 0 120px;
  background-color: #151515;
  .info {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    left: -1px;
    >img {
      max-width: 100%;
      display: block;
      margin: 0 auto 51px;
    }
  }

  .standard-layout {
    $pw: 360px;
    $bcolor: #3f3f3f;
    border-top: 1px solid $bcolor;
    border-bottom: 1px solid $bcolor;
    display: flex;
    width: 1238px;
    margin: 0 auto;

    .standard-xinghao{
      flex: 1;
      padding: 20px 0 0 67px;
      color: #fff;
      border-right: 1px solid $bcolor;
      .s-value:first-of-type{
        margin-bottom: 13px;
      }
      .s-value{
        margin-right: 7px;
      }
    }

    .standard-params{
      flex: 4.8;
      display: flex;
      flex-direction: column;
      color: #fff;
      .s-title{
        margin-bottom: 11px;
      }
      .s-value{
        letter-spacing: 1px;
      }
      .s-params1{
        display: flex;
        justify-content: space-around;
        padding: 20px 0 23px 100px;
        .s1-con{
          flex:1;
          vertical-align: top;
        }
      }
      .s-params2{
        display: flex;
        justify-content: space-around;
        padding: 20px 0 24px 100px;
        border-top: 1px solid $bcolor;

        .s2-con{
          flex:1;
          vertical-align: top;
        }
      }
    }
    .s-title{
      color: #acacac;
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 9px;
    }

    .s-value{
      font-size: 14px;
      color: #fff;
      font-weight: 300;
      line-height: 20px;
    }

  }
  
  .b-title{
    color: #fff;
    text-align: center;
    font-size: 42px;
    margin-bottom: 72px;
    letter-spacing: -1px;
    animation: fadeUp 0.5s ease-out 1 both;
    opacity: 0;    
  }
  .btns{
    text-align: center;
    margin-top: 60px;
    .button{
      margin-left: 8px;
    }
  }
  
}


.hide1{
  .info{
    h2,h3,h4,p,li{
      animation: fadeDown 0.5s ease-out 1 both!important;
    }
  }
}
.hide2{
  .b-title,.item,i,h3,p{
    animation: fadeDown 0.5s ease-out 1 both!important;
  }
}

.hide3{
  .application{
    h2,h3,.download-btn{
      animation: fadeDown 0.5s ease-out 1 both!important;
    }
  }
  .i1{
    transform: rotate(90deg) translateX(-50%) translateY(50%)!important;
  }
  .i2{
    top: 60vw!important;
  }
  .i3{
    transform: rotate(270deg) translateX(47%) translateY(80%)!important;
  }
}
.hide4{
  .b-title,.b-label,.front-img,p,.f-params span,.f-img,.f-intro p{
    animation: fadeDown 0.5s ease-out 1 both!important;
  }
}


.hide5{
  .b-title,.b-label,p,.front-img,.f-div,.f-item{
    animation: fadeDown 0.5s ease-out 1 both!important;
  }
}

.hide6{
  .b-title,.b-label,.hsxp-imgcon{
    animation: fadeDown 0.5s ease-out 1 both!important;
  }
}

.hide7,.hide8,.hide9{
  .b-title,.b-label,.qmjt-imgcon,.qmjt-imgcon,.cgq-imgcon,.jzxj-imgcon{
    animation: fadeDown 0.5s ease-out 1 both!important;
  }
  .cgq-imgcon div{
    animation: xinpian-close 0.2s steps(5) forwards $ani_delay!important;
  }
}

.hide10{
  .first-txt{
    animation:lighting-txt-back $battery_time linear forwards !important;
  }
  .battery-mask{
    animation:lighting-back $battery_time linear forwards !important;
  }
  
  .lighting{
    animation:lighting1-back $battery_time steps(9) forwards !important;
  }
  .lighting-span::before{
    animation:num-reduce $num_time linear forwards!important;
  }
}


@keyframes xinpian-open{
  0%{
		background-position: 0 0px;
  }
  100%{
		background-position: 100% 0px;
  }
}

@keyframes xinpian-close{
  0%{
		background-position: 100% 0px;
    
  }
  100%{
    background-position: 0 0px;
  }
}

@keyframes jump_a_move{
  0%{
    top:-1vw;
  }
  5%{
    top:0;
  }
  10%{
    top:-1vw;
  }
  15%{
    top:0;
  }
  20%{
    top:-1vw;
  }
  30%{
    top:-0.8vw;
    left: 20vw;

  }
  40%{
    top:-0.4vw;
    left: 18vw;
  }
  50%{
    top:0vw;
    left: 17vw;
  }
  60%{
    top:0.2vw;
    left: 15vw;
  }
  70%{
    top:0.4vw;
    left: 14.5vw;
  }
  80%{
    top:0.6vw;
    left: 14vw;
  }
  90%{
    top:1.4vw;
    left: 13.8vw;
    opacity: 0.8;
  }
  100%{
    top: 0.5vw;
    left: 13.2vw;
    opacity: 0;
  }
}

@keyframes opc{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes jump{
  0%{
    top: -15vw;
  }
  50%{
    top: -16vw;
  }
  100%{
    top: -15vw;
    opacity: 1;
  }
}

@keyframes jump1_1{
  0%{
    top: 4.5vw;
  }
  50%{
    top: 3.5vw;
  }
  
  100%{
    top: 4.5vw;
    opacity: 1;
  }
}

@keyframes jump1{
  0%{
    top: 0.5vw;
  }
  50%{
    top: 0;
  }
  
  100%{
    top: 0.5vw;
    opacity: 1;
  }
}

@keyframes jump2{
  0%{
    top: -1.2vw;
  }
  50%{
    top: 0;
  }
  
  100%{
    top: -1.2vw;
    opacity: 1;
  }
}

@keyframes jump3{
  0%{
    top: -0.1vw;
    transform: rotate(0)

  }
  // 25%{
  //   transform: rotate(30deg)
  // }
  50%{
    top: 0.1vw;
  }
  // 75%{
  //   transform: rotate(-30deg)
  // }
  100%{
    top: -0.1vw;
    opacity: 1;
    transform: rotate(0)
  }
}