lml
/
new_company
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI二轮验收官网

Browse Source
master
lml 6 months ago
parent 7d62fdda26
commit 359758703f
10 changed files with 147 additions and 105 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape Escape View File

@ -19,4 +19,3 @@ yarn-error.log*
*.njsproj
*.sln
*.sw?
*.zip

BIN
new_company.zip
View File

Binary file not shown.

20
src/assets/css/common.css
Unescape Escape View File

@ -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; /* 初始状态不可见 */
}

BIN
src/assets/video/headBack.mp4
View File

Binary file not shown.

2
src/components/tabbar/footer.vue
Unescape Escape View File

@ -82,7 +82,7 @@ export default {
name: 'Footer',
data(){
return {
show:true
show:false
}
},
watch: {

28
src/components/tabbar/navbar.vue
Unescape Escape View File

@ -1,7 +1,11 @@
<template>
<div>
<div v-if="color==='white'" class="navbarHeight">
<video autoplay muted playsinline>
<!-- 视频源，指向你的 mp4 文件 -->
<source src="@/assets/video/headBack.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- START NAVBAR fixed-top -->
<nav class=" navbar navbar-white navbar-expand-lg navbar-custom sticky sticky-dark" id="navbar">
<div class="flx-align" style="width: 100%;">
@ -52,11 +56,11 @@
</div>
</nav>
<div class="container" style='position:relative'>
<!-- <div class="container" style='position:relative'>
<div class="titleImages" v-show="show"></div>
<div class="goodImages" v-show="show"></div>
<div class="fontImages" v-show="show"></div>
</div>
</div> -->
</div>
<div v-else-if="color==='black'" class="navbarHeightWhite">
@ -109,9 +113,7 @@
</div>
</div>
</nav>
<div class="titleImages" v-show="show"></div>
<div class="goodImages" v-show="show"></div>
<div class="fontImages" v-show="show"></div>
</div>
</div>
</template>
@ -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;
}
// 你可以在这里执行相关的逻辑
}
}

12
src/components/tabbar/styles/navbar.css
Unescape Escape View File

@ -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%;

2
src/view/home/homeComponents/earth.vue
Unescape Escape View File

@ -278,7 +278,7 @@ export default {
baseTexture: baseTexture,
viewControl: {
// 指定摄像机的距离地球的距离，默认是地球半径的5倍
distance: 300,
distance: 400,
// 摄像机的初始俯视角度，默认是0，范围是0到90，表示从正上方向地球表面
// alpha: 40,
// 摄像机绕x轴，即从正上方向水平方向的旋转角度

13
src/view/home/index.css
Unescape Escape View File

@ -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;

174
src/view/home/index.vue
Unescape Escape View File

@ -5,7 +5,8 @@
<div class="home">
<!-- <div class="bg-overlay"></div> -->
<div class="container" >
<div>
<div class="container " >
<div class="button-group " style="position: absolute;top:630px; z-index: 100;">
<!-- <div style="position: absolute;left:0" >
<div id="buttonddd" >
@ -13,7 +14,7 @@
</div>
</div> -->
<div class="flx-center" id="follower-button">
<div class="flx-center " id="follower-button" >
<el-button
v-for="(item, index) in buttons"
@ -40,7 +41,7 @@
</div>
</div>
<div class="container" style="margin-top: 100px;margin-bottom: 40px;">
<div class="container" style="margin-top: 100px;margin-bottom: 40px;" >
<div class="flx-justify-around" style="width: 100%;">
<img src="@/assets/images/home/internetImages/title1.png" alt="">
@ -51,31 +52,34 @@
</div>
</div>
<div class="service-text-bg" style="">
<div class="service-text" style="padding-top: 70px;margin-bottom: 70px;">
What <div class="service">service</div> do I provide<i></i>
</div>
<div class="container" style="display: -webkit-box;" >
<div
v-for="(card, index) in cards"
:key="index"
:class="['cardBox', { 'card-active': activeCardIndex === index }]"
@click="activeCardIndex = index"
>
<div class="card-icon">
<!-- 这里放置图标，可以使用图片或图标库 -->
<img :src="card.icon" alt="icon" />
</div>
<div class="card-title">{{ card.title }}</div>
<div class="card-description">
<div>{{ card.desc_1 }}</div>
<div>{{ card.desc_2 }}</div>
</div>
</div>
</div>
<div class="container " style="margin-top: 87px;display: flex;position: relative;">
<div class="hotLinePadding" >
<div class="service-text-bg" style="">
<div ref="section1">
<div class="service-text" style="padding-top: 70px;margin-bottom: 70px;">
What <div class="service">service</div> do I provide<i></i>
</div>
<div class="container" style="display: -webkit-box;" >
<div
v-for="(card, index) in cards"
:key="index"
:class="['cardBox', { 'card-active': activeCardIndex === index }]"
@click="activeCardIndex = index"
>
<div class="card-icon">
<!-- 这里放置图标，可以使用图片或图标库 -->
<img :src="card.icon" alt="icon" />
</div>
<div class="card-title">{{ card.title }}</div>
<div class="card-description">
<div>{{ card.desc_1 }}</div>
<div>{{ card.desc_2 }}</div>
</div>
</div>
</div>
</div>
<div class="container " ref="section2" style="margin-top: 60px;display: flex;position: relative;">
<div class="hotLinePadding" >
<div class="hotLine">Hot Line</div>
<div class="toggle-buttons">
<el-row>
@ -99,15 +103,13 @@
</el-col>
</el-row>
</div>
</div>
<!-- 地球 -->
<div style="position: absolute;right: 0;top: -100px;z-index:1;">
<Earth />
</div>
</div>
<!-- 地球 -->
<div style="position: absolute;right: 0;top: 0;z-index:1;">
<Earth />
</div>
</div>
<div class="container card card-padding">
<div class="container card card-padding" ref="section3" style="box-shadow: 0px 4px 47.3px 0px #F6F6F6;z-index:2;">
<el-row>
<el-col :span="6">
<div class="statistic-item statistic-item-padding">
@ -162,15 +164,16 @@
</div>
<div class="container card " >
<div class="service-text" style="padding-top: 50px;margin-bottom: 70px;">
<div >News</div><i class="serviceNews"></i>
</div>
<div class="flx">
<div >
<img class="newsBig" src="@/assets/images/home/news.jpg" alt="">
<div ref="section4">
<div class="service-text" style="padding-top: 50px;margin-bottom: 70px;">
<div >News</div><i class="serviceNews"></i>
</div>
<div>
<div class="newsSmallTag">
<div class="flx">
<div >
<img class="newsBig" src="@/assets/images/home/news.jpg" alt="">
</div>
<div>
<div class="newsSmallTag">
<div
v-for="(item, index) in news"
:key="index"
@ -184,43 +187,47 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: relative;">
<div style="position: relative;" ref="section5">
<div class="container">
<div class=" flx-center" style="margin-top: 69px;">
<div class="viewBox" @click="$router.push({name:'news'})">View More</div>
<div class=" flx-center" style="margin-top: 69px;">
<div class="viewBox" @click="$router.push({name:'news'})">View More</div>
</div>
<div class="NewsTrends flx-only-justify-between " style="margin-top: 80px;padding: 45px 165px 65px 107px;">
</div>
<div class="container flx-align ">
<div class="NewsTrends flx-only-justify-between " style="margin-top: 69px;padding: 45px 30px 58px 35px;">
<div class="flx-column-justify-around ">
<div class="NewsTrendsTitle">新闻动态</div>
<!-- <div class="NewsTrendsTag">Tag</div> -->
<div class="NewsTrendsDetail">See Detail Project</div>
</div>
<div>
<img src="@/assets/images/home/NewsTrends1.png" alt="">
<img style="width: 269px;" src="@/assets/images/home/NewsTrends1.png" alt="">
</div>
</div>
<div class="NewsTrends flx-only-justify-between " style="margin-top: 40px;padding: 45px 165px 65px 107px;background-color:#5F9FFE ;">
<div class="NewsTrends " style="margin-top: 69px;padding: 45px 42px 58px 35px;background-color:#307ef3 ;">
<div class="NewsTrendsImage">
<img src="@/assets/images/home/NewsTrends2.png" alt="">
<img style="width: 289px;" src="@/assets/images/home/NewsTrends2.png" alt="">
</div>
<div></div>
<div class="flx-column-justify-around " style="margin-right: 190px;">
<div class="flx-column-justify-around " style="margin-right: 190px;height: 200px;">
<div class="NewsTrendsTitle">干货分享</div>
<!-- <div class="NewsTrendsTag">Tag</div> -->
<div class="NewsTrendsDetail">See Detail Project</div>
</div>
</div>
</div>
<div class=" service-text-bg " style="margin-top: -70px;">
<div class="container">
<div class="service-text" style="padding-top: 140px;margin-bottom: 40px;">
<div >Question</div><i class="serviceNews"></i>
</div>
</div>
<div class=" service-text-bg " style="margin-top: 80px;" >
<div class="container" ref="section6">
<div class="service-text" style="padding-top: 20px;margin-bottom: 40px;">
<div >Question</div><i class="serviceNews"></i>
</div>
<div class="commonUI">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="发货前" name="first">
@ -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;

Write Preview
Loading…
Cancel
Save