website/src/components/pages/index.vue

<template>
  <div>
    <div class="section" :style="{'height':offsetheight+'px'}">
      <headerTab></headerTab>
      <icon></icon>
      <div class="container" :style="{'transform': 'translate3d(0px,-'+ fullPage*offsetheight +'px, 0px)'}">
        <div class="page-1 page fp-auto-height">
          <div class="part-1" :class="page1 == true ? 'animated fadeIn5' :''">
            <p class="part1-tit">荟房智慧管家</p>
            <span>智慧案场</span>
            <span>迎宾系统</span>
            <span>智慧社区</span>
            <p class="part1-desc">您最贴心的地产智慧管家</p>
            <p class="part1-tip">银城旗下品牌</p>
          </div>
        </div>
        <div class="page-2 fp-auto-height">
          <div class="page-2_con">
            <p class="title">一站式解决方案</p>
            <div class="swiper">
              <div class="frame">
                <div class="frame1"></div>
                <div class="frame2"></div>
                <div class="frame3"></div>
                <div class="frame4"></div>
              </div>
              <!-- <span class="arrow-left" @click="arrow_left()"></span>
              <span class="arrow-right" @click="arrow_right()"></span>-->

              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div class="swiper-slide red-slide" style="width:960px;">
                    <div class="Tittle">
                      <div class="con">
                        <div class="content_left">
                          <img src="../../assets/image/home/littleImg/01.png" alt>
                          <div class="left_con">
                            <p class="Trad">传统案场</p>
                            <p class="trad_p1">营销费用高，效果差</p>
                            <p class="trad_p2">营销手段传统，数据反馈慢</p>
                            <p class="trad_p3">渠道商载客、大量飞单</p>
                            <p class="trad_p4">客户归属、划分不清</p>
                          </div>
                        </div>
                        <div class="content_right">
                          <div class="right_con">
                            <p class="case">智慧案场</p>
                            <p class="case_p1">智慧人脸风控系统</p>
                            <p class="case_p1">支撑从人像抓拍、到访识别、销售跟进、置业顾问管理到数据分析等闭环场景</p>
                            <p class="case_p1">极大地提升了案场管理效率和客户跟进效率</p>
                            <p class="case_p1">实现传统案场工作的智慧升级</p>
                          </div>
                        </div>
                        <div class="vs">VS</div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide blue-slide" style="width:960px;">
                    <div class="Tittle">
                      <div class="con">
                        <div class="content_left">
                          <img src="../../assets/image/home/littleImg/02.png" alt>
                          <div class="left_con">
                            <p class="Trad">传统社区</p>
                            <p class="trad_p1">传统物业管理效率低、成本高</p>
                            <p class="trad_p2">居民生活体验不佳，便捷度不够</p>
                            <p class="trad_p3">社区安全有待提高</p>
                          </div>
                        </div>

                        <div class="content_right">
                          <div class="right_con">
                            <p class="case">智慧社区</p>
                            <p class="case_p1">一个全系平台，四大集群系统</p>
                            <p class="case_p1">智慧物业、智慧物联、生活服务、社区活动、公共服务、社区大数据</p>
                            <p class="case_p1">实现多元化、人性化、社会化的智慧社区智能服务</p>
                          </div>
                        </div>
                        <div class="vs">VS</div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide orange-slide" style="width:960px;">
                    <div class="Tittle">
                      <div class="con">
                        <div class="content_left">
                          <img src="../../assets/image/home/littleImg/03.png" alt>
                          <div class="left_con">
                            <p class="Trad">产品开发</p>
                            <p class="trad_p1">自建团队费时费力成本高</p>
                            <p class="trad_p2">存在技术壁垒，项目周期长</p>
                            <p class="trad_p3">企业业务分散，难专注</p>
                          </div>
                        </div>

                        <div class="content_right">
                          <div class="right_con">
                            <p class="case">产品定制</p>
                            <p class="case_p1">按需定制、软件开发、工具软件定制</p>
                            <p class="case_p1">创新的互联网技术整合智能硬件接口</p>
                            <p class="case_p1">你想要的服务我们都有，实现与客户的共赢</p>
                          </div>
                        </div>
                        <div class="vs">VS</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>-->
                <div class="pagination"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="page-3 fp-auto-height">
          <div class="page-3_con">
            <div class="produce">
              <p class="title">产品简介</p>
              <div class="peoduce_top">
                <router-link to="../productCenter/AIwelcome" class="list first" :class="page3 == true ? 'animation fadeIn1' :''">
                  <div>
                    <p class="list-name">AI迎宾判客系统</p>
                    <img src="../../assets/image/home/produce/Group45.png" alt style="margin-top: 10.5%;">
                    <p class="list-desc">智慧人脸风控应用于案场、地铁、银行等</p>
                  </div>
                </router-link>
                <router-link to="../productCenter/bigscreen" class="list" :class="page3 == true ? 'animation fadeIn2' :''">
                  <div>
                    <p class="list-name">智慧大屏机</p>
                    <img src="../../assets/image/home/produce/Group46.png" alt>
                    <p class="list-desc">无人售楼终端机结合VR技术, 沉浸式看房体验</p>
                  </div>
                </router-link>
              </div>
              <div class="produce_bottom">
                <router-link to="../productCenter/community" class="list" :class="page3 == true ? 'animation fadeIn3' :''">
                  <div>
                    <p class="list-name">银城慧家APP</p>
                    <img src="../../assets/image/home/produce/Group47.png" alt style="margin-top: 10.5%;">
                    <p class="list-desc">智慧社区管理软件,一键开启智慧社区美好生活</p>
                  </div>
                </router-link>
                <router-link to="../productCenter/online" class="list" :class="page3 == true ? 'animation fadeIn4' :''">
                  <div>
                    <p class="list-name">全楼盘</p>
                    <img src="../../assets/image/home/produce/Group48.png" alt>
                    <p class="list-desc">线上售楼处平台, 满足开发商和购房者共同需求</p>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="page-4 fp-auto-height">
          <div class="page-4-con">
            <img class="opt" src="../../assets/image/home/background/opt.png" alt>
            <div class="page-4-swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide green-slide">
                  <p class="swiper-tittle">服务优势</p>
                  <div class="service">
                    <p class="service-p1">定制化服务</p>
                    <p class="service-p2">增值运维服务</p>
                    <p class="service-p3">专业售后</p>
                  </div>
                </div>
                <div class="swiper-slide blue-slide">
                  <p class="swiper-tittle">技术优势</p>
                  <div class="skill">
                    <p class="skill-p1">超过十年的行业应用软件开发经验</p>
                    <p class="skill-p2">丰富的智慧社区及智慧案场建设经验</p>
                    <p class="skill-p3">长期的Java、Net、PHP、软件测试人才储备</p>
                  </div>
                </div>

                <div class="swiper-slide orange-slide">
                  <p class="swiper-tittle">运营推广</p>
                  <div class="operation">
                    <p class="Operation-p1">精准数字营销、专业策划设计</p>
                    <p class="Operation-p2">DSP信息流广告</p>
                    <p class="Operation-p3">线下社群活动</p>
                  </div>
                </div>
              </div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          </div>
        </div>
        <div class="page-5 fp-auto-height">
          <div class="page-5-con">
            <p class="title">我们的客户</p>
            <div class="logo-box">
              <div>
                <img src="../../assets/image/home/logo/Group29.png" alt>
                <img src="../../assets/image/home/logo/Group32.png" alt>
                <img src="../../assets/image/home/logo/Group35.png" alt>
                <img src="../../assets/image/home/logo/Group40.png" alt>
                <img src="../../assets/image/home/logo/Group41.png" alt>
              </div>
              <div>
                <img src="../../assets/image/home/logo/Group30.png" alt>
                <img src="../../assets/image/home/logo/Group33.png" alt>
                <img src="../../assets/image/home/logo/Group36.png" alt>
                <img src="../../assets/image/home/logo/Group39.png" alt>
                <img src="../../assets/image/home/logo/Group42.png" alt>
              </div>

              <div>
                <img src="../../assets/image/home/logo/Group31.png" alt>
                <img src="../../assets/image/home/logo/Group34.png" alt>
                <img src="../../assets/image/home/logo/Group37.png" alt>
                <img src="../../assets/image/home/logo/Group38.png" alt>
                <img src="../../assets/image/home/logo/Group43.png" alt>
              </div>
            </div>
          </div>
          <footerNav class="foot"></footerNav>
        </div>
      </div>
      <div class="fixed-list">
        <div v-for="(i,index) in bannerList" :class="fullPage==index?'color':''" @click="pageInfo(index)" :key="index+'fiexd'"></div>
      </div>
    </div>
  </div>
</template>


<script>

import Swiper from 'swiper';
import headerTab from "@/components/commonComponents/headerTab";
import footerNav from "@/components/commonComponents/footerNav";
import icon from "@/components/commonComponents/icon";
export default {
  components: { headerTab, footerNav, Swiper, icon },
  data () {
    return {
      bannerList: [
        //盒子背景颜色
        {
          width: "100%"
        },
        {
          width: "100%"
        },
        {
          width: "100%"
        },
        {
          width: "100%"
        },
        {
          width: "100%"
        }
      ],

      offsetheight: document.documentElement.clientHeight, //获取当前页面的高度
      fullPage: 0, //当前在第几页
      fullPageNum: false, //是否在滑动
      page1: true,
      page2: false, //是否在第二页
      page3: false, //是否在第三页
    };
  },
  mounted () {
    //在元素加载完毕的时候添加鼠标滑动事件
    //
    if (document.addEventListener) {
      document.addEventListener("DOMMouseScroll", this.scroll, false);
      document.addEventListener('wheel', this.scroll, false);
      document.addEventListener('mousewheel', this.scroll, false);
    }else{
      document.attachEvent('onmousewheel', this.scroll);
    }
    window.onmousewheel = document.onmousewheel = this.scroll;
    var mySwiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      loop: true,
      // autoplay: 4000,
      autoplay: {
        delay: 4000,
        disableOnInteraction: false,
      },
      paginationClickable: true,
      slideToClickedSlide: true,
      centeredSlides: true,
    });
    var mySwiper = new Swiper('.page-4-swiper-container', {
      centeredSlides: true,
      slidesPerView: 3,
      loop: true,
      // autoplay: 4000,
      autoplay: {
        delay: 4000,
        disableOnInteraction: false,
      },
      grabCursor: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  },
  methods: {
    //
    //点击左侧小点时跳转到相应的page
    //
    pageInfo (index) {
      this.fullPage = index;
    },
    //
    //鼠标事件
    //
    scroll (e) {
      e = e || window.event;
      //
      //是否正在滑动
      //
      if (this.fullPageNum) {
        return false;
      }
      if (e.wheelDelta < 0 || -e.deltaY < 0 || -e.detail < 0) {
        // console.log("下滑")
        if (this.fullPage >= 4) {
          return false;
        }
        this.fullPageNum = true;
        this.pageInfo(this.fullPage + 1);
        //
        //  css设置动画事件为1000，所以等到1000ms后滚动状态为false
        //
        setTimeout(() => {
          this.fullPageNum = false;
        }, 500);
        //
        //   否则就是向上划
        //
      } else {
        // console.log("上划")
        if (this.fullPage <= 0) {
          return false;
        }
        this.fullPageNum = true;
        this.pageInfo(this.fullPage - 1);
        setTimeout(() => {
          this.fullPageNum = false;
        }, 1000);
      }
      console.log(this.fullPage, "fullPage");
      if (this.fullPage == "2") {
        this.page3 = true;
      } else {
        this.page3 = false;
      }
      if (this.fullPage == "1") {
        this.page2 = true;
      } else {
        this.page2 = false;
      }
      if (this.fullPage == "0") {
        this.page1 = true;
      } else {
        this.page1 = false;
      }
    },
  },
  beforeDestroy(){
    console.log(this.scroll,"aaa")
    window.removeEventListener("DOMMouseScroll",this.scroll)
    window.removeEventListener("wheel",this.scroll)
    window.removeEventListener("mousewheel",this.scroll)
  },
};
</script>
<style scoped lang="less">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  margin: 0;
}

.swiper-tittle {
  font-size: 60px;
  font-weight: 500;
  margin: 0 auto 58px auto;
  color: rgba(255, 255, 255, 1);
}
.service,
.skill,
.operation {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  p {
    width: 573px;
    height: 98px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 98px;
    margin-bottom: 10px;
    background: #2f2f80;
    border-radius: 4px;
  }
}
.section {
  overflow: hidden;
  .page-1 {
    background: url("../../assets/image/home/background/Group2.jpg") no-repeat
      center;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    overflow: hidden;
    .part-1 {
      color: #fff;
      position: relative;
      top: 25.8%;
      // margin-top: 31.8%;
      // transform: translateX(605px);
      .part1-tit {
        width: 480px;
        font-size: 80px;
        border-bottom: 4px solid #3b99fc;
        margin: 0 auto;
      }
      span {
        display: inline-block;
        font-size: 34px;
        margin: 15px 30px 10px 30px;
        letter-spacing: 9px;
      }
      .part1-desc {
        font-size: 34px;
        letter-spacing: 9px;
      }
      .part1-tip {
        background-color: #4e84ff;
        font-size: 24px;
        margin: 20px auto;
        width: 350px;
        letter-spacing: 26px;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        padding-left: 16px;
      }
    }
  }
  .page-2 {
    background: url("../../assets/image/home/background/Group26.jpg") no-repeat
      center;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    color: #fff;
    overflow: hidden;
    position: relative;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    .page-2_con {
      margin-top: 11%;
      .title {
        font-size: 56px;
      }
      img {
        width: 100%;
      }
    }
  }
  .page-3 {
    background: url("../../assets/image/home/background/Group27.jpg") no-repeat
      center;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
    .page-3_con {
      width: 100%;
      margin: auto;
      position: absolute;
      bottom: 1%;
      // padding: 8.5% 0 3% 0;
      .title {
        font-size: 56px;
        margin: 1%;
        // margin-top: 7%;
        // padding-top: 5%;
        color: #fff;
      }
      .produce {
        // width: 1090px;
        // width: 56.77%;
        // height: 680px;
        width: 50%;
        min-width: 540px;
        margin: 20px auto;
        .peoduce_top {
          display: flex;
          // justify-content: space-between;
        }
        .produce_bottom {
          display: flex;
          // justify-content: space-between;
        }
        .list {
          width: 54.48%;
          /* height: 23.81%; */
          background-color: #fff;
          border-radius: 4px;
          padding: 0 4%;
          margin: 0.5%;
          .list-name {
            color: #03033f;
            border-bottom: 1.5px dashed #040445;
            padding: 2.5% 0 2% 0;
            font-size: 30px;
          }
          img {
            // height: 143px;
            width: 80%;
            margin-top: 5%;
          }
          .list-desc {
            font-size: 18px;
            margin: 5% 0;
            color: #000;
          }
        }
      }
    }
  }
  .page-4 {
    background: url("../../assets/image/home/background/Group28.jpg") no-repeat
      center;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    .page-4-con {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      position: relative;
      // background: url("../../assets/image/home/background/opt.jpg") no-repeat center;
      // background-size:
      .page-4-swiper-container {
        width: 87%;
        overflow: hidden;
        position: relative;
        .swiper-wrapper {
          // margin: auto;
          width: 87%;
          // overflow: hidden;
        }
        .swiper-button-prev{
          width: 27%;
          height: 45%;
          background-color: #fff;
          position: absolute;
          top: 41%;
          opacity: 0;
        }
        .swiper-button-next{
          width: 27%;
          height: 45%;
          background-color: #fff;
          position: absolute;
          top: 41%;
          opacity: 0;
        }
      }
      .opt {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
      }
      .page-4-swiper-container {
        width: 87%;
        /* height: 250px; */
        // background-color: #fff;
        margin: 0 6.5%;
        text-align: center;
      }
      .swiper-wrapper {
        display: flex;
        justify-content: space-between;
      }
      .swiper-slide {
        opacity: 1;
        text-align: center;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        transition: 300ms;
        /* height: 100%; */
        -webkit-transition: 300ms;
        -moz-transition: 300ms;
        -ms-transition: 300ms;
        -o-transition: 300ms;
        transition: 300ms;
        // -webkit-transform: scale(0.6735);
        // -moz-transform: scale(0.6735);
        // -ms-transform: scale(0.6735);
        // -o-transform: scale(0.6735);
        // transform: scale(0.6735);
      }
      .swiper-slide:not(.swiper-slide-active) {
        transform: scale(0.6735);
      }
      // .swiper-slide-visible {
      //   opacity: 1;
      //   -webkit-transform: scale(0.6735);
      //   -moz-transform: scale(0.6735);
      //   -ms-transform: scale(0.6735);
      //   -o-transform: scale(0.6735);
      //   transform: scale(0.6735);
      // }

      // .swiper-slide-active {
      //   /* top: 0; */
      //   opacity: 1;
      //   -webkit-transform: scale(1);
      //   -moz-transform: scale(1);
      //   -ms-transform: scale(1);
      //   -o-transform: scale(1);
      //   transform: scale(1);
      //   z-index: 1000;
      // }

      // .blue-slide {

      //   width: 573px !important;
      //   height: 500px !important;
      // }

      // .orange-slide {

      //   width: 573px !important;
      //   height: 500px !important;
      // }

      // .green-slide {

      //   width: 573px !important;
      //   height: 500px !important;
      // }

      .swiper-tittle {
        font-size: 60px;
        font-weight: 500;
        margin: 0 auto 58px auto;
        color: rgba(255, 255, 255, 1);
      }

      .service,
      .skill,
      .operation {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
      }

      .operation p,
      .skill p,
      .service p {
        width: 573px !important;
        height: 98px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 98px;
        margin-bottom: 10px;
        background: #2f2f80;
        border-radius: 4px;
      }
    }
    .title {
      font-size: 60px;
      padding-top: 140px;
      color: #fff;
    }
  }

  .page-5 {
    position: relative;
    background: url("../../assets/image/home/background/Group29.jpg") no-repeat
      center;
    width: 100%;
    min-width: 1280px;
    height: 100%;
    background-size: 100% 100%;
    overflow: hidden;
    .page-5-con {
      // margin: 13%;
      position: absolute;
      bottom: 30%;
      .title {
        font-size: 56px;
        margin-bottom: 30px;
        color: #fff;
      }
      .logo-box {
        width: 65.63%;
        min-width: 980px;
        margin: auto;
        // margin: 0.63% auto;
        img {
          width: 13.14%;
          min-width: 183px;
          height: 19.7%;
          margin: 0.39%;
        }
      }
    }
  }
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translate3d(0px, 0px, 0px);
  transition: all 1000ms ease;
}
.fixed-list {
  position: fixed;
  top: 46%;
  right: 20px;
  z-index: 2;
  div {
    width: 10px;
    height: 10px;
    background: #ccc;
    margin-bottom: 14px;
  }
  div.color {
    background: #4e84ff;
  }
}

//一站式轮播

.swiper {
  position: relative;
}
.swiper-container {
  margin: 80px auto;
  width: 100%;
  /* background: #000; */
  height: 250px;
  color: #fff;

  /* text-align: center; */
}

.frame {
  width: 967px;
  height: 397px;
  margin: auto;
  /* box-shadow: 0px 2px 4px 0px rgba(78, 132, 255, 1); */
  /* border: 2px solid rgba(190, 190, 190, 1); */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.frame1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 65px;
  height: 65px;
  border-left: 2px solid rgba(190, 190, 190, 1);
  border-top: 2px solid rgba(190, 190, 190, 1);
}
.frame2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 65px;
  height: 65px;
  border-right: 2px solid rgba(190, 190, 190, 1);
  border-top: 2px solid rgba(190, 190, 190, 1);
}
.frame3 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 65px;
  height: 65px;
  border-left: 2px solid rgba(190, 190, 190, 1);
  border-bottom: 2px solid rgba(190, 190, 190, 1);
}
.frame4 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65px;
  height: 65px;
  border-right: 2px solid rgba(190, 190, 190, 1);
  border-bottom: 2px solid rgba(190, 190, 190, 1);
}

.swiper-slide {
  height: 100%;
  opacity: 0.4;
  margin: 0 auto;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -ms-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}

.swiper-slide-active {
  opacity: 1;
  margin: 0 auto;
}
.swiper-slide .title {
  margin-bottom: 0;
}

.pagination {
  position: absolute;
  z-index: 20;
  left: 10px;
  bottom: 10px;
}

.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #222;
  margin-right: 8px;
  opacity: 0.8;
  border: 1px solid #fff;
  cursor: pointer;
}

.swiper-visible-switch {
  background: #aaa;
}

.swiper-active-switch {
  background: #fff;
}

.con {
  width: 864px;
  height: 248px;
  margin: 0 auto;
  position: relative;
}

.content_left {
  width: 396px;
  height: 218px;
  background: rgba(2, 2, 56, 1);
  border-radius: 10px;
  /* display: inline-block; */
  position: absolute;
  left: 0;
  top: 0;
  padding: 15px 36px 15px 0;
}

.content_left img {
  position: absolute;
  top: 0;
  left: 0;
}

.content_right {
  width: 360px;
  height: 218px;
  background: rgba(78, 132, 255, 1);
  border-radius: 10px;
  /* display: inline-block; */
  position: absolute;
  right: 0;
  top: 0;
  padding: 15px 36px;
  .right_con {
    text-align: left;
  }
}

.vs {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(78, 132, 255, 1);
  text-align: center;
  line-height: 60px;
  font-size: 34px;
}

.swiper-slide .title {
  /* position: relative; */
}

.content_left img {
  width: 142px !important;
  height: 144px;
}

.left_con {
  text-align: left;
  margin-left: 115px;
}

.Trad,
.case {
  margin: 0 !important;
  font-size: 40px;
  color: rgba(255, 255, 255, 1);
  line-height: 56px;
}

.trad_p1,
.trad_p2,
.trad_p3,
.trad_p4,
.case_p1,
.case_p2,
.case_p3,
.case_p4 {
  margin: 0 !important;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 30px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn2 {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn1 {
  animation: fadeIn 1s;
}
.fadeIn2 {
  animation: fadeIn2 2s;
}
.fadeIn3 {
  animation: fadeIn2 3s;
}
.fadeIn4 {
  animation: fadeIn2 4s;
}
.fadeIn5 {
  animation: fadeIn 5s;
}
.foot {
  width: 100%;
  position: absolute;
  bottom: 0;
}
</style>