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 *.njsproj
*.sln *.sln
*.sw? *.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 { .footerBottom {
padding-bottom: 248px; 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', name: 'Footer',
data(){ data(){
return { return {
show:true show:false
} }
}, },
watch: { watch: {

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

@ -1,7 +1,11 @@
<template> <template>
<div> <div>
<div v-if="color==='white'" class="navbarHeight"> <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 --> <!-- START NAVBAR fixed-top -->
<nav class=" navbar navbar-white navbar-expand-lg navbar-custom sticky sticky-dark" id="navbar"> <nav class=" navbar navbar-white navbar-expand-lg navbar-custom sticky sticky-dark" id="navbar">
<div class="flx-align" style="width: 100%;"> <div class="flx-align" style="width: 100%;">
@ -52,11 +56,11 @@
</div> </div>
</nav> </nav>
<div class="container" style='position:relative'> <!-- <div class="container" style='position:relative'>
<div class="titleImages" v-show="show"></div> <div class="titleImages" v-show="show"></div>
<div class="goodImages" v-show="show"></div> <div class="goodImages" v-show="show"></div>
<div class="fontImages" v-show="show"></div> <div class="fontImages" v-show="show"></div>
</div> </div> -->
</div> </div>
<div v-else-if="color==='black'" class="navbarHeightWhite"> <div v-else-if="color==='black'" class="navbarHeightWhite">
@ -109,9 +113,7 @@
</div> </div>
</div> </div>
</nav> </nav>
<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>
</template> </template>
@ -123,7 +125,6 @@
data() { data() {
return { return {
color: 'white', color: 'white',
show: true,
path: this.$route.path, path: this.$route.path,
}; };
}, },
@ -145,13 +146,6 @@
}else { }else {
this.color = 'white'; this.color = 'white';
} }
if(
this.path !=='/home'
) {
this.show = false;
}else {
this.show = true;
}
}, },
}, },
@ -163,11 +157,7 @@
}else { }else {
this.color = 'black'; 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; position: relative;
width: 100%; width: 100%;
height: 700px; height: 700px;
overflow: hidden;
background: url('../../../assets/images/home/background.png') no-repeat center/cover; 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 { .navbarHeightWhite {
position: relative; position: relative;
width: 100%; width: 100%;

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

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

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

@ -141,6 +141,7 @@
background: #F6F6F6; background: #F6F6F6;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
z-index: 2;
} }
.home .cardBox:hover { .home .cardBox:hover {
background-color: #eee; background-color: #eee;
@ -217,7 +218,7 @@
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
line-height: 86.142px; /* 215.355% */ line-height: 86.142px; /* 215.355% */
margin-bottom: 107px; margin-bottom: 85px;
} }
.home .hotLinePadding { .home .hotLinePadding {
position: relative; position: relative;
@ -251,7 +252,7 @@
/* 统计项 公司员工等等 */ /* 统计项 公司员工等等 */
.home .card-padding { .home .card-padding {
padding: 50px 16px; padding: 50px 16px;
margin-top: 120px; margin-top: 56px;
} }
.home .statistic-item { .home .statistic-item {
text-align: center; text-align: center;
@ -380,11 +381,11 @@
/* 新闻动态 */ /* 新闻动态 */
.home .NewsTrends { .home .NewsTrends {
position: relative; position: relative;
width: 978px; width: 541px;
height: 310px; height: 197px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 24px; border-radius: 24px;
background: #7ED7E1; background: #46c9d8;
overflow: hidden; overflow: hidden;
} }
@ -422,7 +423,7 @@
.home .NewsTrendsImage { .home .NewsTrendsImage {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 107px; right: 42px;
} }
.home .NewsTrends img { .home .NewsTrends img {
transition: all .3s ease; transition: all .3s ease;

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

@ -5,7 +5,8 @@
<div class="home"> <div class="home">
<!-- <div class="bg-overlay"></div> --> <!-- <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 class="button-group " style="position: absolute;top:630px; z-index: 100;">
<!-- <div style="position: absolute;left:0" > <!-- <div style="position: absolute;left:0" >
<div id="buttonddd" > <div id="buttonddd" >
@ -13,7 +14,7 @@
</div> </div>
</div> --> </div> -->
<div class="flx-center" id="follower-button"> <div class="flx-center " id="follower-button" >
<el-button <el-button
v-for="(item, index) in buttons" v-for="(item, index) in buttons"
@ -40,7 +41,7 @@
</div> </div>
</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%;"> <div class="flx-justify-around" style="width: 100%;">
<img src="@/assets/images/home/internetImages/title1.png" alt=""> <img src="@/assets/images/home/internetImages/title1.png" alt="">
@ -51,31 +52,34 @@
</div> </div>
</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>
<div class="container" style="display: -webkit-box;" > <div class="service-text-bg" style="">
<div <div ref="section1">
v-for="(card, index) in cards" <div class="service-text" style="padding-top: 70px;margin-bottom: 70px;">
:key="index" What <div class="service">service</div> do I provide<i></i>
:class="['cardBox', { 'card-active': activeCardIndex === index }]" </div>
@click="activeCardIndex = index" <div class="container" style="display: -webkit-box;" >
> <div
<div class="card-icon"> v-for="(card, index) in cards"
<!-- 这里放置图标，可以使用图片或图标库 --> :key="index"
<img :src="card.icon" alt="icon" /> :class="['cardBox', { 'card-active': activeCardIndex === index }]"
</div> @click="activeCardIndex = index"
<div class="card-title">{{ card.title }}</div> >
<div class="card-description"> <div class="card-icon">
<div>{{ card.desc_1 }}</div> <!-- 这里放置图标，可以使用图片或图标库 -->
<div>{{ card.desc_2 }}</div> <img :src="card.icon" alt="icon" />
</div> </div>
<div class="card-title">{{ card.title }}</div>
</div> <div class="card-description">
</div> <div>{{ card.desc_1 }}</div>
<div class="container " style="margin-top: 87px;display: flex;position: relative;"> <div>{{ card.desc_2 }}</div>
<div class="hotLinePadding" > </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="hotLine">Hot Line</div>
<div class="toggle-buttons"> <div class="toggle-buttons">
<el-row> <el-row>
@ -99,15 +103,13 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div>
<!-- 地球 -->
<div style="position: absolute;right: 0;top: -100px;z-index:1;">
<Earth />
</div>
</div> </div>
<!-- 地球 --> <div class="container card card-padding" ref="section3" style="box-shadow: 0px 4px 47.3px 0px #F6F6F6;z-index:2;">
<div style="position: absolute;right: 0;top: 0;z-index:1;">
<Earth />
</div>
</div>
<div class="container card card-padding">
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<div class="statistic-item statistic-item-padding"> <div class="statistic-item statistic-item-padding">
@ -162,15 +164,16 @@
</div> </div>
<div class="container card " > <div class="container card " >
<div class="service-text" style="padding-top: 50px;margin-bottom: 70px;"> <div ref="section4">
<div >News</div><i class="serviceNews"></i> <div class="service-text" style="padding-top: 50px;margin-bottom: 70px;">
</div> <div >News</div><i class="serviceNews"></i>
<div class="flx">
<div >
<img class="newsBig" src="@/assets/images/home/news.jpg" alt="">
</div> </div>
<div> <div class="flx">
<div class="newsSmallTag"> <div >
<img class="newsBig" src="@/assets/images/home/news.jpg" alt="">
</div>
<div>
<div class="newsSmallTag">
<div <div
v-for="(item, index) in news" v-for="(item, index) in news"
:key="index" :key="index"
@ -184,43 +187,47 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
<div style="position: relative;"> <div style="position: relative;" ref="section5">
<div class="container"> <div class="container">
<div class=" flx-center" style="margin-top: 69px;"> <div class=" flx-center" style="margin-top: 69px;">
<div class="viewBox" @click="$router.push({name:'news'})">View More</div> <div class="viewBox" @click="$router.push({name:'news'})">View More</div>
</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="flx-column-justify-around ">
<div class="NewsTrendsTitle">新闻动态</div> <div class="NewsTrendsTitle">新闻动态</div>
<!-- <div class="NewsTrendsTag">Tag</div> --> <!-- <div class="NewsTrendsTag">Tag</div> -->
<div class="NewsTrendsDetail">See Detail Project</div> <div class="NewsTrendsDetail">See Detail Project</div>
</div> </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> </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"> <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> <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="NewsTrendsTitle">干货分享</div>
<!-- <div class="NewsTrendsTag">Tag</div> --> <!-- <div class="NewsTrendsTag">Tag</div> -->
<div class="NewsTrendsDetail">See Detail Project</div> <div class="NewsTrendsDetail">See Detail Project</div>
</div> </div>
</div> </div>
</div> </div>
<div class=" service-text-bg " style="margin-top: -70px;"> <div class=" service-text-bg " style="margin-top: 80px;" >
<div class="container"> <div class="container" ref="section6">
<div class="service-text" style="padding-top: 140px;margin-bottom: 40px;"> <div class="service-text" style="padding-top: 20px;margin-bottom: 40px;">
<div >Question</div><i class="serviceNews"></i> <div >Question</div><i class="serviceNews"></i>
</div> </div>
<div class="commonUI"> <div class="commonUI">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="发货前" name="first"> <el-tab-pane label="发货前" name="first">
@ -296,9 +303,11 @@ export default {
// Switcher // Switcher
}, },
mounted() { mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
}, },
created() { created() {
this.toTotal(); this.toTotal();
@ -356,6 +365,14 @@ export default {
{ id:'3',title: '重磅！美通正式成为亚马逊TSPN服务商',content:"美通正式上线亚马逊ShipTrack承运商，"}, { id:'3',title: '重磅！美通正式成为亚马逊TSPN服务商',content:"美通正式上线亚马逊ShipTrack承运商，"},
{ id:'4',title: '重磅！美通正式成为亚马逊TSPN服务商',content:"美通正式上线亚马逊ShipTrack承运商，"}, { id:'4',title: '重磅！美通正式成为亚马逊TSPN服务商',content:"美通正式上线亚马逊ShipTrack承运商，"},
], ],
sections: [
'1',
'2',
'3',
'4',
'5',
'6',
],
}; };
}, },
methods: { methods: {
@ -380,23 +397,26 @@ export default {
} }
// 更新follower位置 // 更新follower位置
}, },
// hoverActiveHover(){ handleScroll() {
// this.hoverActive = !this.hoverActive this.sections.forEach(section => {
// document.getElementById('buttonddd').addEventListener('mousemove', function(e) { const refName = `section${section}`;
// var follower = document.getElementById('follower'); const element = this.$refs[refName];
// // Get the mouse position relative to the container element.style.opacity = '0';
// var rect = this.getBoundingClientRect(); setTimeout(() => {
// console.log(rect); if (element && this.isElementInViewport(element)) {
// var mouseX = e.clientX - rect.left - (follower.offsetWidth / 2); // Center the follower element.classList.add('slide-up-enter-active');
// this.translateX_hover =mouseX element.style.opacity = '1';
// // Update the position of the follower
// // follower.style.transform = `translate(${mouseX}px)`;
// });
// }, }
}, 500);
});
},
isElementInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top <= (document.documentElement.clientHeight / 2 )
);
},
setNewsActive(item,index) { setNewsActive(item,index) {
console.log(item,index); console.log(item,index);
// this.newIndex = index; // this.newIndex = index;

Write Preview
Loading…
Cancel
Save