526 lines
14 KiB
Vue
526 lines
14 KiB
Vue
<template>
|
|
<div class="page-home">
|
|
<div class="screen1">
|
|
<div class="banner-wrapper">
|
|
<HomeCarousel
|
|
:carouselData="screen1.carouselData"
|
|
:current.sync="screen1.currentIndicator"
|
|
/>
|
|
</div>
|
|
<HomeCarouselIndicator
|
|
class="indicator-wrapper"
|
|
:carouselData="screen1.carouselData"
|
|
:current="screen1.currentIndicator"
|
|
@set-current="handleSetHomeCarouselIndicator"
|
|
/>
|
|
</div>
|
|
<div class="screen2">
|
|
<div class="wrapper1680">
|
|
<transition name="fade-slide-bottom">
|
|
<div
|
|
v-show="screen2.offsetLevel >= 0"
|
|
class="text-posi-abs"
|
|
style="--l:1rem;--t:100rem;--ff:MicrosoftYaHeiLight;--fs:14rem;--fw:300;"
|
|
>
|
|
About Us
|
|
</div>
|
|
</transition>
|
|
<transition name="fade-slide-bottom">
|
|
<div
|
|
v-show="screen2.offsetLevel >= 0"
|
|
class="text-posi-abs"
|
|
style="--l:0;--t:170rem;--fs:36rem;--fw:400;--tde:0.3s;"
|
|
>
|
|
关于我们
|
|
</div>
|
|
</transition>
|
|
<transition name="fade-slide-bottom">
|
|
<div
|
|
v-show="screen2.offsetLevel >= 0"
|
|
class="text-posi-abs"
|
|
style="--r:1rem;--t:95rem;--ff:MicrosoftYaHeiSemibold;--fs:14rem;--fw:400;"
|
|
>
|
|
坤合盛世集团 —创造并实现共同价值
|
|
</div>
|
|
</transition>
|
|
<transition name="fade-slide-left">
|
|
<div
|
|
v-show="screen2.offsetLevel >= 0"
|
|
class="image-posi-abs"
|
|
style="--l:0;--t:408rem;--w:925rem;--h:490rem;--tde:0.6s;--br:20px;"
|
|
>
|
|
<img
|
|
:src="screen2.imgSrc"
|
|
alt=""
|
|
style="width:100%;height:100%;object-fit: cover;"
|
|
>
|
|
</div>
|
|
</transition>
|
|
<transition name="fade-slide-right">
|
|
<div
|
|
v-show="screen2.offsetLevel >= 0"
|
|
class="text-posi-abs"
|
|
style="--r:0;--t:393rem;--w:616rem;--ff:MicrosoftYaHei;--fs:18rem;--fw:400;--c:#ffffff;--lh:48rem;--ls:-0.9rem;--tde:0.9s;--ws:pre-line;--ta:justify;"
|
|
v-html="screen2.contentCn"
|
|
></div>
|
|
</transition>
|
|
<transition name="fade-slide-bottom">
|
|
<div
|
|
v-show="screen2.offsetLevel >= 0"
|
|
class="learn-more"
|
|
style="--tde:1.2s;"
|
|
>
|
|
<!-- @click="() => $router.push('/about/companyIntroduction')" -->
|
|
<div class="label">
|
|
了解更多
|
|
</div>
|
|
<div class="icon-wrapper">
|
|
<ArrowHalfRound />
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
<div class="screen3">
|
|
<div class="wrapper1680">
|
|
<transition name="fade-slide-left">
|
|
<div
|
|
v-show="screen3.offsetLevel >= 0"
|
|
class="text-posi-abs"
|
|
style="--l:0;--t:78rem;--fs:14rem;--fw:400;--c:#010101;"
|
|
>
|
|
Scope of Business
|
|
</div>
|
|
</transition>
|
|
<transition name="fade-slide-left">
|
|
<div
|
|
v-show="screen3.offsetLevel >= 0"
|
|
class="text-posi-abs"
|
|
style="--l:0;--t:150rem;--fs:36rem;--lh:48rem;--fw:400;--c:#000000;--ws:pre-line;--tde:0.6s;"
|
|
>
|
|
<span v-if="screen3.currentIndicator >= 0">{{ screen3.carouselData[screen3.currentIndicator].titleChinese }}</span>
|
|
</div>
|
|
</transition>
|
|
<!-- <transition name="fade-slide-left">
|
|
<div
|
|
v-show="screen3.offsetLevel >= 0"
|
|
class="text-posi-abs"
|
|
style="--l:0;--b:180rem;--fs:14rem;--lh:36rem;--fw:400;--c:#323233;--ws:pre-line;--tde:0.9s;"
|
|
>
|
|
{{ screen3.currentIndicator > -1 ? screen3.carouselData[screen3.currentIndicator].titleEnglish : '' }}
|
|
</div>
|
|
</transition> -->
|
|
<transition name="fade-slide-right">
|
|
<div
|
|
v-show="screen3.offsetLevel >= 0"
|
|
class="box-posi-abs"
|
|
style="--l:0rem;--t:324rem;--w:1680rem;--h:752rem;--tde:0.3s;"
|
|
>
|
|
<BusinessCarousel
|
|
:carouselData="screen3.carouselData"
|
|
:current.sync="screen3.currentIndicator"
|
|
/>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
<div class="screen4">
|
|
<div class="wrapper1680">
|
|
<transition name="fade-slide-bottom">
|
|
<div
|
|
v-show="screen4.offsetLevel >= 0"
|
|
class="text-posi-abs"
|
|
style="--l:0;--t:78rem;--fs:14rem;--fw:400;--c:#010101;"
|
|
>
|
|
News Update
|
|
</div>
|
|
</transition>
|
|
<transition name="fade-slide-bottom">
|
|
<div
|
|
v-show="screen4.offsetLevel >= 0"
|
|
class="text-posi-abs"
|
|
style="--l:0;--t:150rem;--fs:36rem;--fw:400;--c:#000000;--tde:0.3s;"
|
|
>
|
|
新闻动态
|
|
</div>
|
|
</transition>
|
|
<div
|
|
class="box-posi-abs"
|
|
style="--l:0;--r:0;--t:280rem;"
|
|
>
|
|
<div class="news-wrapper">
|
|
<div
|
|
v-for="item in screen4.newsData"
|
|
:key="item.id"
|
|
class="news-item"
|
|
@click="() => $router.push('/newsTrend/detail/' + item.id)"
|
|
>
|
|
<div class="news-image">
|
|
<img
|
|
:src="item.cover"
|
|
alt=""
|
|
style="width:100%;height:100%;object-fit:cover;"
|
|
>
|
|
</div>
|
|
<div class="news-info">
|
|
<div class="title">
|
|
{{ item.captionName }}
|
|
</div>
|
|
<div class="abstracts">
|
|
{{ item.abstracts }}
|
|
</div>
|
|
<div
|
|
class="learn-more"
|
|
@click="() => $router.push('/newsTrend/detail/' + item.id)"
|
|
>
|
|
<div class="label">
|
|
了解更多
|
|
</div>
|
|
<div class="icon-wrapper">
|
|
<ArrowHalfRound />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<FootBar
|
|
id="myfooter"
|
|
theme="dark"
|
|
></FootBar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapState } from 'vuex';
|
|
import ArrowHalfRound from '@/components/ArrowHalfRound.vue';
|
|
import HomeCarousel from './components/HomeCarousel.vue';
|
|
import HomeCarouselIndicator from './components/HomeCarouselIndicator.vue';
|
|
import BusinessCarousel from './components/BusinessCarousel.vue';
|
|
import FootBar from '@/components/FootBar.vue';
|
|
|
|
export default {
|
|
components: {
|
|
ArrowHalfRound,
|
|
FootBar,
|
|
HomeCarousel,
|
|
HomeCarouselIndicator,
|
|
BusinessCarousel,
|
|
},
|
|
data () {
|
|
return {
|
|
screen1: {
|
|
carouselData: [],
|
|
currentIndicator: -1,
|
|
timer: null,
|
|
},
|
|
screen2: {
|
|
offsets: [700],
|
|
offsetLevel: -1,
|
|
imgSrc: '',
|
|
contentCn: '',
|
|
},
|
|
screen3: {
|
|
offsets: [1700],
|
|
offsetLevel: -1,
|
|
carouselData: [],
|
|
currentIndicator: -1,
|
|
},
|
|
screen4: {
|
|
offsets: [2800],
|
|
offsetLevel: -1,
|
|
newsData: [],
|
|
pageSize: 6,
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
scrollTop: state => state.scroll.scrollTop,
|
|
webScale: state => state.web.scale,
|
|
}),
|
|
},
|
|
watch: {
|
|
scrollTop (val) {
|
|
const v = val / this.webScale;
|
|
if (v < 50) {
|
|
this.$event.$emit('nav-theme', 'dark');
|
|
} else {
|
|
this.$event.$emit('nav-theme', 'light');
|
|
}
|
|
const i2 = this.screen2.offsetLevel + 1;
|
|
if (v >= this.screen2.offsets[i2]) {
|
|
this.screen2.offsetLevel = i2;
|
|
}
|
|
const i3 = this.screen3.offsetLevel + 1;
|
|
if (v >= this.screen3.offsets[i3]) {
|
|
this.screen3.offsetLevel = i3;
|
|
}
|
|
const i4 = this.screen4.offsetLevel + 1;
|
|
if (v >= this.screen4.offsets[i4]) {
|
|
this.screen4.offsetLevel = i4;
|
|
}
|
|
},
|
|
$route () {
|
|
if (this.$route.hash) {
|
|
this.forceScroll({
|
|
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
|
behavior: 'smooth',
|
|
});
|
|
}
|
|
},
|
|
},
|
|
created () {
|
|
this.$event.$emit('nav-theme', 'dark');
|
|
this.getScreen1CarouselData();
|
|
this.getScreen2Data();
|
|
this.getScreen3CarouselData();
|
|
this.getScreen4NewsData();
|
|
},
|
|
mounted () {
|
|
if (this.$route.hash) {
|
|
this.forceScroll({
|
|
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
|
behavior: 'smooth',
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations(['forceScroll', 'setScrollTop']),
|
|
async getScreen1CarouselData () {
|
|
try {
|
|
const res = await this.$request.get(
|
|
'/official/index/list',
|
|
{ params: { pageNum: 1, pageSize: 8, captionName: '首页/banner' } },
|
|
);
|
|
this.screen1.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
|
|
setTimeout(() => {
|
|
this.startHomeCarousel(0);
|
|
}, 10);
|
|
} catch (error) {}
|
|
},
|
|
startHomeCarousel (indicator) {
|
|
this.screen1.currentIndicator = indicator;
|
|
if (this.screen1.timer) {
|
|
clearTimeout(this.screen1.timer);
|
|
}
|
|
this.screen1.timer = setTimeout(() => {
|
|
this.startHomeCarousel((this.screen1.currentIndicator + 1) % this.screen1.carouselData.length);
|
|
}, 6000);
|
|
},
|
|
handleSetHomeCarouselIndicator (indicator) {
|
|
if (indicator === this.screen1.currentIndicator) return;
|
|
this.startHomeCarousel(indicator);
|
|
},
|
|
async getScreen2Data () {
|
|
try {
|
|
const res = await this.$request.get(
|
|
'/official/index/list',
|
|
{ params: { pageNum: 1, pageSize: 1, captionName: '首页/about' } },
|
|
);
|
|
this.screen2.imgSrc = res.rows[0].imageurl;
|
|
this.screen2.contentCn = res.rows[0].titleChinese;
|
|
} catch (error) {}
|
|
},
|
|
async getScreen3CarouselData () {
|
|
try {
|
|
const res = await this.$request.get(
|
|
'/official/index/list',
|
|
{ params: { pageNum: 1, pageSize: 8, captionName: '首页/businessBanner' } },
|
|
);
|
|
this.screen3.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
|
|
this.screen3.currentIndicator = 0;
|
|
} catch (error) {}
|
|
},
|
|
async getScreen4NewsData () {
|
|
try {
|
|
const res = await this.$request.get('/official/slideshow/list', { params: { pageNum: 1, pageSize: 3, type: '1' } });
|
|
this.screen4.newsData = res.rows;
|
|
} catch (error) {}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-home {
|
|
width: 100%;
|
|
}
|
|
.screen1 {
|
|
height: calc(100vw * 1080 / 1920);
|
|
max-height: 100vh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.screen1 .banner-wrapper {
|
|
height: calc(100vw * 1080 / 1920);
|
|
}
|
|
.screen1 .indicator-wrapper {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
width: 100%;
|
|
height: 293rem;
|
|
padding-top: 193rem;
|
|
max-width: 1920rem;
|
|
z-index: 100;
|
|
color: #ffffff;
|
|
background-image: url("@/assets/bottomBg.png");
|
|
}
|
|
.screen2 {
|
|
height: 1080rem;
|
|
background-color: #1B1B1B;
|
|
color: #ffffff;
|
|
position: relative;
|
|
}
|
|
.screen2 .wrapper1680 {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.screen2 .learn-more {
|
|
position: absolute;
|
|
right: 481rem;
|
|
bottom: 181rem;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
.screen2 .learn-more .label {
|
|
font-size: 16rem;
|
|
letter-spacing: 6rem;
|
|
}
|
|
.screen2 .learn-more .icon-wrapper {
|
|
margin-left: 10rem;
|
|
}
|
|
.screen2 .learn-more .icon-wrapper >>> .svg-wrapper {
|
|
width: 38rem;
|
|
height: 38rem;
|
|
}
|
|
.screen2 >>> .learn-more:hover .group-hover\:translate-x-0\.5 {
|
|
--tw-translate-x: 2rem;
|
|
}
|
|
.screen2 >>> .learn-more:hover .group-hover\:dashoffset-0 {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
.screen3 {
|
|
height: 1155rem;
|
|
background-color: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
.screen3 .wrapper1680 {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.screen3 .carousel-wrapper {
|
|
position: absolute;
|
|
top: 324rem;
|
|
left: 526rem;
|
|
width: 1100rem;
|
|
height: 690rem;
|
|
}
|
|
.screen4 {
|
|
height: 1000rem;
|
|
background-color: #EFEFEF;
|
|
position: relative;
|
|
}
|
|
.screen4 .wrapper1680 {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
.screen4 .news-wrapper {
|
|
display: flex;
|
|
}
|
|
.screen4 .news-item {
|
|
flex: 1;
|
|
height: 580rem;
|
|
border-radius: 20rem;
|
|
background-color: #F5F5F7;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.screen4 .news-item + .news-item {
|
|
margin-left: 32rem;
|
|
}
|
|
.screen4 .news-item:hover {
|
|
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
|
|
z-index: 10;
|
|
}
|
|
.screen4 .news-image {
|
|
width: 100%;
|
|
height: 350rem;
|
|
overflow: hidden;
|
|
}
|
|
.screen4 .news-image img {
|
|
transition: transform 0.4s;
|
|
}
|
|
.screen4 .news-image:hover img {
|
|
transform: scale(1.1, 1.1);
|
|
}
|
|
.screen4 .news-info {
|
|
padding: 40rem 40rem 0;
|
|
}
|
|
.screen4 .news-info .title {
|
|
/* width: 380rem; */
|
|
width: 100%;
|
|
font-family: MicrosoftYaHei;
|
|
font-weight: 400;
|
|
font-size: 24rem;
|
|
line-height: 24rem;
|
|
color: #000000;
|
|
/* white-space: nowrap; */
|
|
overflow: hidden;
|
|
/* text-overflow: ellipsis; */
|
|
margin-bottom: 20rem;
|
|
}
|
|
.screen4 .news-info .abstracts {
|
|
width: 460rem;
|
|
font-family: MicrosoftYaHei;
|
|
font-weight: 400;
|
|
font-size: 14rem;
|
|
line-height: 18rem;
|
|
color: #666666;
|
|
margin-bottom: 33rem;
|
|
white-space: normal;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 30rem;
|
|
-webkit-line-clamp: 2;
|
|
height: 34rem;
|
|
display: -webkit-box;
|
|
}
|
|
.screen4 .learn-more {
|
|
width: fit-content;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
.screen4 .learn-more .label {
|
|
font-size: 16rem;
|
|
font-weight: 400;
|
|
line-height: 40rem;
|
|
color: #111111;
|
|
letter-spacing: 3rem;
|
|
margin-right: 8rem;
|
|
}
|
|
.screen4 .learn-more .icon-wrapper {
|
|
width: 40rem;
|
|
height: 40rem;
|
|
}
|
|
.screen4 .learn-more .icon-wrapper >>> .svg-wrapper {
|
|
width: 40rem;
|
|
height: 40rem;
|
|
}
|
|
.screen4 >>> .learn-more:hover .group-hover\:translate-x-0\.5 {
|
|
--tw-translate-x: 2rem;
|
|
}
|
|
.screen4 >>> .learn-more:hover .group-hover\:dashoffset-0 {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
</style>
|