feiyang-web/src/views/HomeView.vue

<template>
  <div>
    <div class="banner" style="height: 581px;">

      <div class="bd" style="height: 581px;position: relative;">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="@/assets/images/1.png" style="width: 100%;height:100%;"></div>
            <div class="swiper-slide"><img src="@/assets/images/2.png" style="width: 100%;height:100%;"></div>
            <div class="swiper-slide"><img src="@/assets/images/3.png" style="width: 100%;height:100%;"></div>
            <div class="swiper-slide"><img src="@/assets/images/4.png" style="width: 100%;height:100%;"></div>
          </div>
          <div class="swiper-pagination"></div>
          <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
          <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        </div>
      </div>
      <div>

      </div>

    </div>
    <div class="Wrapper index" style="">
      <div class="index_1" style="width: 80%;margin: 0 auto;padding: 50px 0;">
        <div class="content-top">
          <div class="content-left">
            <h3>企业新闻</h3>
            <h6>CORPORATE NEWS</h6>
            <!-- <div class="shares" style="">
                        <h3 style="font-size: 14px;
                        display: inline-block;
    color: #42424e;
    color: rgba(66, 66, 78, .6);
    padding-top: 4px;"><em style="display: block;">SH 600048</em>
    保利发展控股股票代码</h3>
                        <h5 class="red green"><em style="display: block;">8.03</em>RMB</h5>
                    </div> -->
          </div>
          <div class="content-right">
            <div class="index-top">
              <h3 style="    font-size: 24px;
    color: #3c3c48;
    color: rgba(60, 60, 72, .8);
    line-height: 30px;">飞阳建设南江滨东大道获得福州市2020年度市政道路工程品质</h3>
              <h5 style="    width: auto;
    float: none;
    font-size: 30px;
    color: #c0a988;
    margin: 3px 0 6px;    line-height: 1;
    font-weight: bold;
    letter-spacing: -.2px;font-family: 'Rajdhani';">2023.12.31</h5>
              <p style="    color: rgba(115, 115, 124, .6);    font-size: 13px;
    color: #95959d;
    line-height: 24px;
    text-align: justify;">最近,一场以品质为核心的比拼在福州城区多条道路悄悄展开。聚焦工程质量、路面铺装、绿化景观、安全文明等“赛点” ，包括我
                司承建的南江滨东大道项目在内的74个在建市政道路工程进行百日比拼。作为三江口片区的进出城主通道,南江滨东大道上每日车来
                车往，但因过往重型车辆较多,路面出现沉降等病害。针对需进行沉降病害处理的车行道，工程采用高分子聚
              </p>
            </div>
            <div>
              <h5 style="    font-family: 'Rajdhani';
    font-size: 23px;
    color: #8e8e95;
    line-height: 1;
    font-weight: bold;
    letter-spacing: -.2px;
    float: left;
    margin: 0;
    width: 18%;">2020.03.07 </h5>
              <h3 style="    float: left;
              margin: 0;
    width: 78%;
    font-size: 17px;
    color: #8e8e95;
    color: rgba(142, 142, 149, .8);
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;">核酸筛选检测进工地为疫情期间有序复工送上“定心丸”</h3>
            </div>
          </div>



        </div>
      </div>
      <div class="index_2" style="padding-bottom: 70px;width: 80%;margin: 0 auto;">
        <div style="display: flex;">
          <div class="content2-left">
            <div>
              <h3>行业动态</h3>
              <h6>INDUSTRY TRENDS</h6>
            </div>
            <div class="textbox">
              <h3>齐心战役 民族担当</h3>
              <!-- <h3></h3> -->
              <h5>飞阳建设援建疫情防控集中点</h5>
              <!-- <h5></h5> -->
            </div>
          </div>
          <div class="content2-right">
            <img src="@/assets/images/vedio.png" style="width: 100%;height: 320px;">
          </div>
        </div>
      </div>
      <div class="index_3">
        <div style="position: relative;height: 100%;width: 80%;margin: 0 auto;">
          <div class="tiltle">
            <h3>飞扬建设工程业务领域<br>
              建筑产业<br>
              现代化发展趋势
            </h3>
            <p>飞扬包含房屋建筑市政公路、工业建筑，金属门窗、”钢结构广等业务领域
            </p>
            <p>
              致力于数据化、智能化创新发展，积极探索建筑产业现代化发展趋势
            </p>
          </div>
          <div class="list" style="position: absolute;
    left: 0;
    bottom: -42px;
    margin-right: -14px;
    z-index: 2;">
            <div class="swiper2" style="max-width: 80vw;overflow: hidden;height: 100%;">
              <div class="swiper-wrapper">
                <div class="swiper-slide1"><img src="@/assets/images/index3_1.png"></div>
                <div class="swiper-slide1"><img src="@/assets/images/index3_2.png"></div>
                <div class="swiper-slide1"><img src="@/assets/images/index3_3.png"></div>
                <div class="swiper-slide1"><img src="@/assets/images/index3_2.png"></div>
                <div class="swiper-slide1"><img src="@/assets/images/index3_3.png"></div>

              </div>
              <div class="swiper-pagination1" style="text-align: center;"></div>

            </div>
            <!-- <div><img src=""></div>
        <div></div>
        <div></div>
        <div></div> -->
          </div>
        </div>
      </div>
      <div class="index_4">
        <div style="padding: 120px 0 42px;
    position: relative;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;">
          <div class="content2-left">
            <div>
              <h3 style="    line-height: 60px;
    font-weight: lighter;    font-size: 48px">公司荣耀<br>及成就展示</h3>
            </div>
            <div class="textbox">

              <!-- <h3></h3> -->
              <h5 style="line-height: 20px;">荣获行业诸多奖项<br>
                拥有一支高素质的专业管理团队
              </h5>
              <!-- <h5></h5> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
// @ is an alias to /src
// import Swiper  from 'swiper';


import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  data() {
    return {

    }

  },
  mounted() {
    // 创建交叉观察器实例
    // this.observer = new IntersectionObserver(entries => {
    //   entries.forEach(entry => {
    //     if (entry.isIntersecting) {
    //       entry.target.classList.add('visible');
    //     } else {
    //       entry.target.classList.remove('visible');
    //     }
    //   });
    // });

    // 观察每个项目元素
    // this.items.forEach((item, index) => {
    //   const target = this.$refs['box' + index][0]; // 获取对应的元素
    //   this.observer.observe(target); // 开始观察元素
    // });



    // 初始化Swiper

    new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 4100,
        disableOnInteraction: false,
      },

      pagination: {
        el: '.swiper-pagination',

      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    }
    )
    new Swiper('.swiper2', {
      slidesPerView: 3,
      slidesPerGroup: 1,
      spaceBetween: 20,
      pagination: {
        el: '.swiper-pagination1'
      }
    })
  },
  beforeDestroy() {
    // 在组件销毁之前停止观察器
    // if (this.observer) {
    //   this.items.forEach((item, index) => {
    //     const target = this.$refs['box' + index][0];
    //     this.observer.unobserve(target);
    //   });
    // }
  }
}

</script>
<style scoped>
.banner {
  width: 100%;
  margin: 0 auto !important;
  overflow: hidden;
  min-width: 1260px;
  height: 700px;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  background-color: black;
}

.banner .bd {
  width: 100%;

}

.Wrapper {
  position: relative;
  background-color: #fff;
  z-index: 100;
}

.content {
  width: 1280px;
  margin: 0 auto;
}

/* 样式可根据需求自定义 */
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide1 {
  min-width: calc(26.66666vw - 14px);
  max-width: calc(26.66666vw - 14px);

  margin-right: 14px;

}

.swiper-slide1 img {
  width: 100%;
  border-radius: 10px;
}


.swiper-slide::after {
  content: '';
  left: 0px;
  position: absolute;
  bottom: 0px;
  width: 0%;
  height: 4px;
  background-color: #DDCAB8;
  transition: width ease-in-out 4s;
}

.swiper-slide-active::after {
  width: 100%;
}

h3 {
  font-size: 30px;
  color: RGB(48, 113, 183);
  line-height: 1;
  font-weight: lighter;
  margin-bottom: 9px;
  font-weight: 400;
}

h6 {
  font-family: 'Rajdhani';
  font-size: 15px;
  color: #c0a988;
  line-height: 1;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
}

.content-left {
  width: 33.5%;
}

.content-right {
  width: 66%;
}

.shares h5 {
  font-family: 'Rajdhani';
  font-size: 20px;
  color: #474747;
  line-height: 1;
  font-weight: bold;
  letter-spacing: -.2px;
  position: relative;
  padding-left: 12px;
  margin-left: 14px;
  display: inline-block;
}


.shares h5:before {
  content: '';
  width: 2px;
  height: 30px;
  background-color: #d9d9d9;
  position: absolute;
  left: 0;
  top: 8px;
}

.index-top {
  position: relative;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 2px solid #c9c9c9;
  border-bottom: 2px solid rgba(201, 201, 201, .5);

}

.content-top {
  display: flex;
}

.content2-left {
  padding-top: 14px;
  width: 33%;
}

.content2-left .textbox h3 {
  font-size: 14.5px;
  color: #293d48
}

.content2-left .textbox h5 {
  color: #8e8e95;
  margin-top: 18px;
  font-weight: normal;
}

.content2-right {
  width: 66.5%;
  float: right;
}

.index_3 {
  padding-top: 140px;
  width: 100%;
  height: 787px;
  background: url(../assets/images/index3.png) no-repeat center;
  background-attachment: fixed;
  background-size: cover;
}

.tiltle h3 {
  font-size: 48px;
  color: RGB(48, 113, 183);
  line-height: 60px;
  margin-bottom: 14px;
  font-weight: lighter;
}

.tiltle p {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, .5);
  font-weight: bold;
}
</style>