diff --git a/.gitignore b/.gitignore index 03c3b48..a0dddc6 100644 --- a/.gitignore +++ b/.gitignore @@ -19,4 +19,3 @@ yarn-error.log* *.njsproj *.sln *.sw? -*.zip diff --git a/new_company.zip b/new_company.zip new file mode 100644 index 0000000..f3d2815 Binary files /dev/null and b/new_company.zip differ diff --git a/src/assets/css/common.css b/src/assets/css/common.css index e782316..433c005 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -100,3 +100,23 @@ .footerBottom { padding-bottom: 248px; } +@keyframes slideUp { + 0% { + opacity: 0; + z-index: 999; + transform: translateY(300px); + } + 100% { + opacity: 1; + transform: translateY(0); + } + } + + .slide-up-enter-active { + opacity: 1 !important; + animation: slideUp 0.2s ease-out ; + } + .section { + + opacity: 0; /* 初始状态不可见 */ + } \ No newline at end of file diff --git a/src/assets/video/headBack.mp4 b/src/assets/video/headBack.mp4 new file mode 100644 index 0000000..da1bfdb Binary files /dev/null and b/src/assets/video/headBack.mp4 differ diff --git a/src/components/tabbar/footer.vue b/src/components/tabbar/footer.vue index 842d186..3249ba1 100644 --- a/src/components/tabbar/footer.vue +++ b/src/components/tabbar/footer.vue @@ -82,7 +82,7 @@ export default { name: 'Footer', data(){ return { - show:true + show:false } }, watch: { diff --git a/src/components/tabbar/navbar.vue b/src/components/tabbar/navbar.vue index 15e97cf..8f3a209 100644 --- a/src/components/tabbar/navbar.vue +++ b/src/components/tabbar/navbar.vue @@ -1,7 +1,11 @@ @@ -123,7 +125,6 @@ data() { return { color: 'white', - show: true, path: this.$route.path, }; }, @@ -145,13 +146,6 @@ }else { this.color = 'white'; } - if( - this.path !=='/home' - ) { - this.show = false; - }else { - this.show = true; - } }, }, @@ -163,11 +157,7 @@ }else { this.color = 'black'; } - if(to.path ==='/home') { - this.show = true; - }else { - this.show = false; - } + // 你可以在这里执行相关的逻辑 } } diff --git a/src/components/tabbar/styles/navbar.css b/src/components/tabbar/styles/navbar.css index 6af8c2e..204202d 100644 --- a/src/components/tabbar/styles/navbar.css +++ b/src/components/tabbar/styles/navbar.css @@ -22,8 +22,20 @@ position: relative; width: 100%; height: 700px; + overflow: hidden; background: url('../../../assets/images/home/background.png') no-repeat center/cover; } +.navbarHeight video { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + z-index: 0; /* 确保视频不会覆盖其他内容 */ +} .navbarHeightWhite { position: relative; width: 100%; diff --git a/src/view/home/homeComponents/earth.vue b/src/view/home/homeComponents/earth.vue index edb3c90..32398c4 100644 --- a/src/view/home/homeComponents/earth.vue +++ b/src/view/home/homeComponents/earth.vue @@ -278,7 +278,7 @@ export default { baseTexture: baseTexture, viewControl: { // 指定摄像机的距离地球的距离，默认是地球半径的5倍 - distance: 300, + distance: 400, // 摄像机的初始俯视角度，默认是0，范围是0到90，表示从正上方向地球表面 // alpha: 40, // 摄像机绕x轴，即从正上方向水平方向的旋转角度 diff --git a/src/view/home/index.css b/src/view/home/index.css index 3a1d291..a21a9fe 100644 --- a/src/view/home/index.css +++ b/src/view/home/index.css @@ -141,6 +141,7 @@ background: #F6F6F6; cursor: pointer; transition: background-color 0.3s ease; + z-index: 2; } .home .cardBox:hover { background-color: #eee; @@ -217,7 +218,7 @@ font-style: normal; font-weight: 700; line-height: 86.142px; /* 215.355% */ - margin-bottom: 107px; + margin-bottom: 85px; } .home .hotLinePadding { position: relative; @@ -251,7 +252,7 @@ /* 统计项 公司员工等等 */ .home .card-padding { padding: 50px 16px; - margin-top: 120px; + margin-top: 56px; } .home .statistic-item { text-align: center; @@ -380,11 +381,11 @@ /* 新闻动态 */ .home .NewsTrends { position: relative; - width: 978px; - height: 310px; + width: 541px; + height: 197px; flex-shrink: 0; border-radius: 24px; - background: #7ED7E1; + background: #46c9d8; overflow: hidden; } @@ -422,7 +423,7 @@ .home .NewsTrendsImage { position: absolute; bottom: 0; - left: 107px; + right: 42px; } .home .NewsTrends img { transition: all .3s ease; diff --git a/src/view/home/index.vue b/src/view/home/index.vue index e426aa6..b40ae8b 100644 --- a/src/view/home/index.vue +++ b/src/view/home/index.vue @@ -5,7 +5,8 @@
-
+
+
-
+
-
+
@@ -51,31 +52,34 @@
-
-
- What
service
do I provide
-
-
-
- - icon -
-
{{ card.title }}
-
-
{{ card.desc_1 }}
-
{{ card.desc_2 }}
-
- -
-
-
-
+
+
+
+ What
service
do I provide +
+
+
+
+ + icon +
+
{{ card.title }}
+
+
{{ card.desc_1 }}
+
{{ card.desc_2 }}
+
+ +
+
+
+
+
Hot Line
@@ -99,15 +103,13 @@
+
+ +
+ +
- - -
- -
- -
-
+
@@ -162,15 +164,16 @@
-
-
News
-
-
-
- +
+
+
News
-
-
+
+
+ +
+
+
-
-
+
+
+
-
+
-
-
View More
+
+
View More
-
+ +
+
+
新闻动态
See Detail Project
- +
-
+
- +
-
+
干货分享
See Detail Project
-
-
-
-
-
Question
-
+
+
+
+
+
Question
+
@@ -296,9 +303,11 @@ export default { // Switcher }, mounted() { - + window.addEventListener('scroll', this.handleScroll); + }, + beforeDestroy() { + window.removeEventListener('scroll', this.handleScroll); }, - created() { this.toTotal(); @@ -356,6 +365,14 @@ export default { { id:'3',title: '重磅！美通正式成为亚马逊TSPN服务商',content:"美通正式上线亚马逊ShipTrack承运商，"}, { id:'4',title: '重磅！美通正式成为亚马逊TSPN服务商',content:"美通正式上线亚马逊ShipTrack承运商，"}, ], + sections: [ + '1', + '2', + '3', + '4', + '5', + '6', + ], }; }, methods: { @@ -380,23 +397,26 @@ export default { } // 更新follower位置 }, - // hoverActiveHover(){ - // this.hoverActive = !this.hoverActive - // document.getElementById('buttonddd').addEventListener('mousemove', function(e) { - // var follower = document.getElementById('follower'); - // // Get the mouse position relative to the container - // var rect = this.getBoundingClientRect(); - // console.log(rect); - // var mouseX = e.clientX - rect.left - (follower.offsetWidth / 2); // Center the follower - // this.translateX_hover =mouseX - // // Update the position of the follower - // // follower.style.transform = `translate(${mouseX}px)`; - // }); - + handleScroll() { + this.sections.forEach(section => { + const refName = `section${section}`; + const element = this.$refs[refName]; + element.style.opacity = '0'; + setTimeout(() => { + if (element && this.isElementInViewport(element)) { + element.classList.add('slide-up-enter-active'); + element.style.opacity = '1'; - - - // }, + } + }, 500); + }); + }, + isElementInViewport(el) { + const rect = el.getBoundingClientRect(); + return ( + rect.top <= (document.documentElement.clientHeight / 2 ) + ); + }, setNewsActive(item,index) { console.log(item,index); // this.newIndex = index;