feiyang-web/src/views/HomeView.vue

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

      <div class="bd" style="height: 581px;position: relative;">
        <div class="swiper-container swiper5">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in imgarr" :key="item.id"><img :src="item.url"
                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 style="width: 50%;"></div>

          </div>
          <div class="content-right">
            <div class="index-top" @click="changeto(newsitem.id)" style="cursor: pointer;">
              <h3 style="    font-size: 24px;
    color: #3c3c48;
    color: rgba(60, 60, 72, .8);
    line-height: 30px;">{{ newsitem.name }}</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';">{{ newsitem.releaseTime }}</h5>
              <p style="    color: rgba(115, 115, 124, .6);    font-size: 13px;
    color: #95959d;
    line-height: 24px;
    text-align: justify;">{{ newsitem.source }}
              </p>
            </div>
            <div style="overflow: hidden;">
            </div>
            <div @click="changeto(false)" style="cursor: pointer;">
              <div class="dot_box" style="    font-size: 0;
            margin-top: 20px;
            top: -2px;
            display: inline-block;
    text-align: center;
    position: relative;">
                <div class="i"></div>
                <div class="i"></div>
                <div class="i"></div>
              </div>
              <div class="text">更多新闻</div>
            </div>
          </div>



        </div>
      </div>
      <div class="index_2" style="padding-bottom: 75px;width: 80%;margin: 0 auto;">
        <div style="display: flex;">
          <div class="content2-left">
            <div>
              <h3>行业动态</h3>
              <h6>INDUSTRY TRENDS</h6>
            </div>
            <div class="textbox" v-html="hydata.content">

            </div>
          </div>
          <div class="content2-right">
            <img :src="hydata.src" style="width: 100%;object-fit: contain;">
          </div>
        </div>
      </div>
      <div class="index_3" :style=" {background: `url(${bgtextitem.url})`, norepeat: 'center'}">
        <div style="position: relative;height: 100%;width: 80%;margin: 0 auto;">
          <div class="tiltle">
            <!-- 飞阳建设工程业务领域<br>
              建筑产业<br>
              现代化发展趋势 -->
            <h3 class="init" v-html="bgtextitem.contentUp">


            </h3>
            <div class="init2" v-html="bgtextitem.contentDown">

            </div>
            <!-- <p style="width: 500px;">
          飞阳包含房屋建筑市政公路、工业建筑，金属门窗、”钢结构广等业务领域 致力于数据化、智能化创新发展，积极探索建筑产业现代化发展趋势
        </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 swiper9">

                <div class="swiper-slide" style="height: 100%;" v-for="item in smallPicturearr" :key="item.id"><img
                    :src="item.picture" style=" border-radius: 10px;width: 396px;height:263px;"></div>


              </div>
              <div class="swiper-pagination2" 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" style="width:100%">
            <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>
                拥有一支高素质的专业管理团队<span style="color:RGB(48, 113, 183);float: right;font-weight: bold;cursor: pointer;"
                  @click="switchto">MORE...</span>
              </h5>
              <!-- <h5></h5> -->
            </div>
          </div>
        </div>
        <div>

        </div>
      </div>
      <div style="max-width: 80vw;overflow: hidden;height: 100%;margin: auto;">
        <div class="swiper3">
          <div class="swiper-wrapper swiper9">
            <div class="swiper-slide" v-for="item in achievementarr" :key="item.id" 
            @click="honorto(item.id)"
              style="background-color: rgb(240,246,250);border-radius: 10px;padding: 40px;box-sizing: border-box;cursor: pointer;">
              <img :src="item.picture" style=" width: 100%;margin: auto;"></div>
                    
          </div>
          <div class="swiper-pagination1" style="text-align: center;"></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'
import { achievementPic, hyDtai, swiperimg, getnews, backgroundText, smallPicture,honor } from '@/api'
export default {
  data() {
    return {
      hydata: { src: '' },
      imgarr: [],
      achievementarr: [],
      newsitem: {},
      bgtextitem: {},
      smallPicturearr: []
    }

  },
  mounted() {

    //大图轮播图
    swiperimg().then((res) => {
      this.imgarr = res.data
      this.$nextTick(() => {
        new Swiper('.swiper5', {
          loop: true,
          autoplay: {
            delay: 4100,
            disableOnInteraction: false,
          },

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

          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        }
        )
      })

    })

    //行业动态
    hyDtai().then((res) => {
      this.hydata.src = res.data[0].picture
      this.hydata.content = res.data[0].content
    })
    //背景图文轮播图
    smallPicture().then((res) => {
      this.smallPicturearr = res.data
      this.$nextTick(() => {
        new Swiper('.swiper2', {
          slidesPerView: 3,
          slidesPerGroup: 1,
          spaceBetween: 20,
          pagination: {
            el: '.swiper-pagination2'
          }
        })
      })
    })
    //荣誉展示
    honor({'year':'all'}).then((res) => {
      this.achievementarr = res.data
      this.$nextTick(() => {
        new Swiper('.swiper3', {
          slidesPerView: 4,
          slidesPerGroup: 1,
          spaceBetween: 20,
          pagination: {
            el: '.swiper-pagination1'
          }
        })
      })
    })
    //新闻展示
    getnews({ 'page': 0 }).then((res) => {
      this.newsitem = res.data.content[1]
    })
    //图文展示
    backgroundText().then((res) => {
      this.bgtextitem = res.data[0]

    })

    // 创建交叉观察器实例
    // 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

  },
  methods: {
    switchto() {
      this.$router.push({
        path: '/aboutus',
       query:{'category':'honor'}
      })
    },
    changeto(id) {
      if (id) {

        this.$router.push({
          path: '/detail?id=' + id
        })
      } else {
        console.log(id)
        this.$router.push({
          path: '/news'
        })
      }

    },
    honorto(id){
      this.$router.push({
          path: '/honordetail?id=' + id
        })
    }
  },
  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-slide2 {
  width: 100%;

}

.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: 604px;
 
  background-attachment: fixed;
  background-size: cover;
}

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

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

.swiper9 .swiper-slide::after {
  all: initial
}

.swiper-slide9 img {
  width: 100%;

}

.dot_box .i {
  display: inline-block;
  width: 6px;
  height: 6px;

  background-color: RGB(48, 113, 183);
  border-radius: 50%;
  margin: 0 2px;
}

.text {
  font-size: 14.5px;
  color: RGB(48, 113, 183);
  display: inline-block;
}

.init p {
  margin: 0 !important;
}

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