Skip to content

O
offical_web
Commit d1c569f1 by qinjianhui
Options

feat: 首页

parent 583553b5
Showing with 209 additions and 80 deletions
src/assets/css/index.css
.container {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
}
.link {
color: #2a6ffe;
text-decoration: none;
}
.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 {
return {
navbar: [
{ name: '首页', path: '/home' },
{ name: '核心功能', path: '/function' },
{ name: '产品', path: '/product' },
// { name: '核心功能', path: '/function' },
// { name: '价格', path: '/price' },
{ name: '需求痛点', path: '/demand_pain_point' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' },
......@@ -113,13 +114,13 @@ export default {
</script>
<style scoped>
.header {
/* .header {
position: fixed;
z-index: 999;
top: 0;
right: 0;
left: 0;
}
} */
.user-name {
margin-right: 10px;
......@@ -132,6 +133,13 @@ export default {
.logout {
margin-right: 30px;
}
.container {
width: 70rem;
margin: 0 auto;
display: flex;
align-items: center;
}
@media screen and (max-width: 1100px) {
.header {
......@@ -142,33 +150,32 @@ export default {
.header.no-shadow {
box-shadow: none !important;
}
.logo {
float: left;
margin-top: 10px;
}
.navbar {
float: left;
margin-left: 100px;
flex: 1;
overflow: hidden;
}
.navbar_item {
float: left;
position: relative;
}
.navbar_item:hover a {
color: #f19240;
.navbar_item_wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
width: 100%;
overflow: hidden;
padding: 0;
}
.navbar_item + .navbar_item {
margin-left: 30px;
.navbar_item:hover a {
color: #409EFF;
}
.navbar_item a {
display: block;
height: 60px;
line-height: 60px;
text-decoration: none;
padding: 0 20px;
color: #fff;
color: #000;
font-size: 16px;
}
.right_btn,
.user-info {
......@@ -195,12 +202,12 @@ export default {
position: relative;
margin-right: 20px;
cursor: pointer;
color: #fff;
font-size: 16px;
}
.reg-btn {
cursor: pointer;
color: #fff;
font-size:16px;
}
.login-btn::after {
......@@ -219,7 +226,7 @@ export default {
}
.active a {
color: #f19240;
color: #409EFF;
font-weight: bold;
}
......@@ -227,7 +234,7 @@ export default {
content: '';
width: 20px;
height: 2px;
background-color: #f19240;
background-color: #409EFF;
border-radius: 4px;
display: block;
position: absolute;
......
src/main.js
......@@ -21,11 +21,12 @@ import './styles/index.scss'
const isMobile = () => window.innerWidth <= 1100
Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile())
document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
window.addEventListener('resize', () => {
Vue.prototype.$isMobile = isMobile()
document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
})
new Vue({
store,
router,
......
src/views/home.vue
<template>
<div class="home-page">
<div class="jomalls-home-page">
<Head :shadow="headerShadow" />
<main class="home-main">
......@@ -46,27 +46,46 @@ export default {
}
</script>
<style scoped>
.home-page {
.jomalls-home-page {
box-sizing: border-box;
height: 100%;
overflow: hidden auto;
overflow: hidden;
display: flex;
flex-direction: column;
}
.home-page::-webkit-scrollbar {
width: 0;
.home-main::-webkit-scrollbar {
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;
border: 1px solid #eee;
background: #fff;
}
.home-page.scrolling .header {
box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%);
.jomalls-home-page.scrolling .header {
/* box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%);
background-color: rgba(27, 28, 29, 0.9);
backdrop-filter: blur(10px);
backdrop-filter: blur(10px); */
}
.home-main {
/* padding-top: 60px; */
flex: 1;
overflow-y: auto;
/* background-color: #f5f5f5; */
}
</style>
src/views/homePage/index.vue
<template>
<div class="home-page">
<div class="banner-images">
<el-carousel
<!-- 轮播图先注释 -->
<!-- <el-carousel
class="banner-images-inner"
:interval="5000"
arrow="always"
......@@ -12,39 +13,72 @@
:src="item.image"
style="width: 100vw; height: 100%; object-fit: cover" />
</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>
<product-intro />
<div class="docking-platform">
<h2
:style="`text-align: center; padding: 20px; font-size: ${
$isMobile ? '18px' : '24px'
}`">
对接平台
</h2>
<div class="platforms">
<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/logo3.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo4.jpg" /></div>
<div class="platform-item">
<a href="https://hubs.ly/Q02Y1gQR0" target="_blank">
<img src="../../assets/logo19.png" />
</a>
<div class="docking-platform flex justify-center">
<div>
<div class="flex justify-center flex-col items-center">
<h3 class="text-textContent lx-title mb-8" style="text-align: center">
对接平台
</h3>
<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/logo2.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo3.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo4.jpg" /></div>
<div class="platform-item">
<a href="https://hubs.ly/Q02Y1gQR0" target="_blank">
<img src="../../assets/logo19.png" />
</a>
</div>
<div class="platform-item"><img src="../../assets/logo6.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo7.png" /></div>
<div class="platform-item"><img src="../../assets/logo8.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo9.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo10.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo11.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo12.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo13.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo14.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo15.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo16.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo17.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo18.jpg" /></div>
</div>
<div class="platform-item"><img src="../../assets/logo6.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo7.png" /></div>
<div class="platform-item"><img src="../../assets/logo8.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo9.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo10.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo11.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo12.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo13.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo14.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo15.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo16.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo17.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo18.jpg" /></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>
......@@ -76,25 +110,64 @@ export default {
</script>
<style scoped>
.banner-images {
font-size: 48px;
width: 100%;
display: flex;
/* font-size: 48px; */
width: 70vw;
margin: 0 auto;
height: 30vw;
padding-top: 40px;
/* display: flex;
justify-content: 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%;
} */
.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 {
background: url(../../assets/footer.jpg) center / cover no-repeat;
padding: 0 100px 70px;
background: #ebf1fc;
padding: 100px 0;
}
.docking-platform h2 {
color: #fff;
color: #000;
font-weight: 500;
}
.platforms {
......@@ -102,7 +175,37 @@ export default {
gap: 10px;
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) {
.platforms {
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