545 lines
12 KiB
Vue
545 lines
12 KiB
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>
|