Skip to content

O
offical_web
Commit d1c569f1 by qinjianhui
Options

feat: 首页

parent 583553b5
Showing with 187 additions and 58 deletions
src/assets/css/index.css
.container {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
}
.link { .link {
color: #2a6ffe; color: #2a6ffe;
text-decoration: none; text-decoration: none;
} }
.link:hover { .link:hover {
color: #2386ee; color: #525558;
}
.text-center {
text-align: center;
} }
\ No newline at end of file
src/components/head.vue
...@@ -59,7 +59,8 @@ export default { ...@@ -59,7 +59,8 @@ export default {
return { return {
navbar: [ navbar: [
{ name: '首页', path: '/home' }, { name: '首页', path: '/home' },
{ name: '核心功能', path: '/function' }, { name: '产品', path: '/product' },
// { name: '核心功能', path: '/function' },
// { name: '价格', path: '/price' }, // { name: '价格', path: '/price' },
{ name: '需求痛点', path: '/demand_pain_point' }, { name: '需求痛点', path: '/demand_pain_point' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' }, { name: '一件定制', path: 'https://jomalls.com/custom/' },
...@@ -113,13 +114,13 @@ export default { ...@@ -113,13 +114,13 @@ export default {
</script> </script>
<style scoped> <style scoped>
.header { /* .header {
position: fixed; position: fixed;
z-index: 999; z-index: 999;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
} } */
.user-name { .user-name {
margin-right: 10px; margin-right: 10px;
...@@ -132,6 +133,13 @@ export default { ...@@ -132,6 +133,13 @@ export default {
.logout { .logout {
margin-right: 30px; margin-right: 30px;
} }
.container {
width: 70rem;
margin: 0 auto;
display: flex;
align-items: center;
}
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.header { .header {
...@@ -142,33 +150,32 @@ export default { ...@@ -142,33 +150,32 @@ export default {
.header.no-shadow { .header.no-shadow {
box-shadow: none !important; box-shadow: none !important;
} }
.logo {
float: left;
margin-top: 10px;
}
.navbar { .navbar {
float: left; flex: 1;
margin-left: 100px; overflow: hidden;
} }
.navbar_item { .navbar_item {
float: left;
position: relative; position: relative;
} }
.navbar_item_wrap {
.navbar_item:hover a { display: flex;
color: #f19240; align-items: center;
justify-content: center;
gap: 50px;
width: 100%;
overflow: hidden;
padding: 0;
} }
.navbar_item + .navbar_item { .navbar_item:hover a {
margin-left: 30px; color: #409EFF;
} }
.navbar_item a { .navbar_item a {
display: block; display: block;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
text-decoration: none; text-decoration: none;
padding: 0 20px; color: #000;
color: #fff; font-size: 16px;
} }
.right_btn, .right_btn,
.user-info { .user-info {
...@@ -195,12 +202,12 @@ export default { ...@@ -195,12 +202,12 @@ export default {
position: relative; position: relative;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
color: #fff; font-size: 16px;
} }
.reg-btn { .reg-btn {
cursor: pointer; cursor: pointer;
color: #fff; font-size:16px;
} }
.login-btn::after { .login-btn::after {
...@@ -219,7 +226,7 @@ export default { ...@@ -219,7 +226,7 @@ export default {
} }
.active a { .active a {
color: #f19240; color: #409EFF;
font-weight: bold; font-weight: bold;
} }
...@@ -227,7 +234,7 @@ export default { ...@@ -227,7 +234,7 @@ export default {
content: ''; content: '';
width: 20px; width: 20px;
height: 2px; height: 2px;
background-color: #f19240; background-color: #409EFF;
border-radius: 4px; border-radius: 4px;
display: block; display: block;
position: absolute; position: absolute;
......
src/main.js
...@@ -21,11 +21,12 @@ import './styles/index.scss' ...@@ -21,11 +21,12 @@ import './styles/index.scss'
const isMobile = () => window.innerWidth <= 1100 const isMobile = () => window.innerWidth <= 1100
Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile()) Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile())
document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
Vue.prototype.$isMobile = isMobile() Vue.prototype.$isMobile = isMobile()
document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
}) })
new Vue({ new Vue({
store, store,
router, router,
......
src/views/home.vue
<template> <template>
<div class="home-page"> <div class="jomalls-home-page">
<Head :shadow="headerShadow" /> <Head :shadow="headerShadow" />
<main class="home-main"> <main class="home-main">
...@@ -46,27 +46,46 @@ export default { ...@@ -46,27 +46,46 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.home-page { .jomalls-home-page {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
overflow: hidden auto; overflow: hidden;
display: flex;
flex-direction: column;
} }
.home-page::-webkit-scrollbar { .home-main::-webkit-scrollbar {
width: 0; width: 6px;
} }
.home-page .header { .home-main::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(162, 161, 161, 0.2);
}
.home-main::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
.jomalls-home-page .header {
transition: all 0.3s; transition: all 0.3s;
border: 1px solid #eee;
background: #fff;
} }
.home-page.scrolling .header { .jomalls-home-page.scrolling .header {
box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%); /* box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%);
background-color: rgba(27, 28, 29, 0.9); background-color: rgba(27, 28, 29, 0.9);
backdrop-filter: blur(10px); backdrop-filter: blur(10px); */
} }
.home-main { .home-main {
/* padding-top: 60px; */ /* padding-top: 60px; */
flex: 1;
overflow-y: auto;
/* background-color: #f5f5f5; */
} }
</style> </style>
src/views/homePage/index.vue
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="banner-images"> <div class="banner-images">
<el-carousel <!-- 轮播图先注释 -->
<!-- <el-carousel
class="banner-images-inner" class="banner-images-inner"
:interval="5000" :interval="5000"
arrow="always" arrow="always"
...@@ -12,17 +13,41 @@ ...@@ -12,17 +13,41 @@
:src="item.image" :src="item.image"
style="width: 100vw; height: 100%; object-fit: cover" /> style="width: 100vw; height: 100%; object-fit: cover" />
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel> -->
<div class="banner-container">
<div class="left-content">
<h3 class="left-content-title">在以亚马逊为主的跨境电商ERP中</h3>
<h2 class="left-content-title-high-light">九猫ERP市占率第一</h2>
<p class="left-content-description">
<span class="high-light">60万+</span>
<span>跨境卖家的一致选择，支持</span>
<span class="high-light">20+</span>
<span>主流跨境平台，助力卖家全球出海</span>
</p>
</div>
<div class="right-content">
<video
width="100%"
class="video"
src="../../assets/video/home-video.mp4"
autoplay
loop
muted></video>
</div>
</div>
</div> </div>
<product-intro /> <product-intro />
<div class="docking-platform"> <div class="docking-platform flex justify-center">
<h2 <div>
:style="`text-align: center; padding: 20px; font-size: ${ <div class="flex justify-center flex-col items-center">
$isMobile ? '18px' : '24px' <h3 class="text-textContent lx-title mb-8" style="text-align: center">
}`">
对接平台 对接平台
</h2> </h3>
<div class="platforms"> <div class="text-sm font-light text-textContent text-center">
国家权威机构及亚马逊多重实力认证
</div>
</div>
<div class="platforms mt-30">
<div class="platform-item"><img src="../../assets/logo1.jpg" /></div> <div class="platform-item"><img src="../../assets/logo1.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo2.jpg" /></div> <div class="platform-item"><img src="../../assets/logo2.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo3.jpg" /></div> <div class="platform-item"><img src="../../assets/logo3.jpg" /></div>
...@@ -48,6 +73,15 @@ ...@@ -48,6 +73,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="footer-bg">
<div class="footer-banner">
<p class="footer-title">人效全面提升、业绩翻倍增长，从此刻开始！</p>
<p class="footer-description">
九猫ERP将帮助您提升每一个人员效率，快速实现业务增长
</p>
</div>
</div>
</div>
</template> </template>
<script> <script>
import ProductIntro from '../../components/product-intro.vue' import ProductIntro from '../../components/product-intro.vue'
...@@ -76,25 +110,64 @@ export default { ...@@ -76,25 +110,64 @@ export default {
</script> </script>
<style scoped> <style scoped>
.banner-images { .banner-images {
font-size: 48px; /* font-size: 48px; */
width: 100%; width: 70vw;
display: flex; margin: 0 auto;
height: 30vw;
padding-top: 40px;
/* display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9); background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9); */
} }
.banner-images-inner { /* .banner-images-inner {
width: 100%; width: 100%;
} */
.banner-container {
display: flex;
align-items: center;
height: 100%;
}
.left-content {
width: 30%;
display: flex;
flex-direction: column;
gap: 20px;
}
.right-content {
width: 70%;
height: 100%;
border-radius: 20px;
.video {
width: 100%;
height: 100%;
object-fit: fill;
}
}
.left-content-title {
font-size: 24px;
}
.left-content-title-high-light {
font-size: 40px;
color: #2253fd;
}
.left-content-description {
font-size: 18px;
color: #777;
}
.high-light {
color: #2253fd;
font-weight: bold;
} }
.docking-platform { .docking-platform {
background: url(../../assets/footer.jpg) center / cover no-repeat; background: #ebf1fc;
padding: 0 100px 70px; padding: 100px 0;
} }
.docking-platform h2 { .docking-platform h2 {
color: #fff; color: #000;
font-weight: 500;
} }
.platforms { .platforms {
...@@ -102,7 +175,37 @@ export default { ...@@ -102,7 +175,37 @@ export default {
gap: 10px; gap: 10px;
grid-template-columns: repeat(9, 1fr); grid-template-columns: repeat(9, 1fr);
} }
.footer-bg {
background: linear-gradient(180deg, #2554fe, #3572ff);
}
.footer-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-description {
font-weight: 300;
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
}
@media screen and (max-width: 1440px) { @media screen and (max-width: 1440px) {
.platforms { .platforms {
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment