Skip to content

O
offical_web
Commit 12be81ed by qinjianhui
Options

feat: 首页

parent 480c3495
Showing with 173 additions and 74 deletions
src/components/footer.vue 0 → 100644
<template>
<footer class="banner_footer">
<h2 style="text-align: center; padding: 20px">对接平台</h2>
<div class="platforms">
<img src="../assets/logo1.jpg" />
<img src="../assets/logo2.jpg" />
<img src="../assets/logo3.jpg"/>
<img src="../assets/logo4.jpg"/>
<img src="../assets/logo5.jpg" />
<img src="../assets/logo6.jpg" />
<img src="../assets/logo7.png" />
<img src="../assets/logo8.jpg" />
<img src="../assets/logo9.jpg" />
<img src="../assets/logo10.jpg" />
<img src="../assets/logo11.jpg" />
<img src="../assets/logo12.jpg" />
<img src="../assets/logo13.jpg" />
<img src="../assets/logo14.jpg" />
<img src="../assets/logo15.jpg" />
<img src="../assets/logo16.jpg" />
<img src="../assets/logo17.jpg" />
<img src="../assets/logo18.jpg" />
</div>
<div class="bottom-text">
<span style="display: inline-block; margin-left: 20px">
<i class="el-icon-message" style="margin-right: 5px"></i>
support@jomalls.com
</span>
<span style="display: inline-block; margin-left: 50px">
<i class="el-icon-map-location" style="margin-right: 5px"></i>
广州市南沙区丰泽东路106号
</span>
<span class="record-number">
<a href="https://beian.miit.gov.cn" target="_black">
粤ICP备2022141405号-1
</a>
</span>
</div>
</footer>
</template>
<style scoped>
.banner_footer {
color: #fff;
background: url(../assets/footer.jpg) center / cover no-repeat;
padding: 0 20px;
}
.record-number {
text-align: center;
margin-left: 50px;
}
.record-number a {
text-decoration: none;
color: #fff;
}
.bottom-text {
padding: 10px 0;
text-align: center;
}
.platforms {
display: grid;
gap: 10px;
grid-template-columns: repeat(9, 1fr);
}
@media screen and (max-width: 1440px) {
.platforms {
grid-template-columns: repeat(9,1fr);
}
}
@media screen and (max-width: 1000px) {
.platforms {
grid-template-columns: repeat(6,1fr);
}
}
.platforms img {
width: 100%;
}
</style>
src/components/product-intro.vue
<template> <template>
<div class="product-intro"> <div class="product-intro">
<div class="function_bg"> <div class="function_bg">
<h2 style="text-align: center; padding: 20px">产品优势</h2> <h2 style="text-align: center; padding-bottom: 20px">产品优势</h2>
<div class="product-pros"> <div class="product-pros">
<div class="product-pros-item"> <div class="product-pros-item">
<div class="grid-content"> <div class="grid-content">
...@@ -285,47 +285,13 @@ ...@@ -285,47 +285,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="banner_footer">
<h2 style="text-align: center; padding: 20px">对接平台</h2>
<img src="../assets/logo1.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo2.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo3.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo4.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo5.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo6.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo7.png" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo8.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo9.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo10.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo11.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo12.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo13.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo14.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo15.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo16.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo17.jpg" style="width: 160px; margin: 10px 20px" />
<img src="../assets/logo18.jpg" style="width: 160px; margin: 10px 20px" />
<div style="margin-top: 20px; text-align: center">
<span style="display: inline-block; margin-left: 20px">
<i class="el-icon-message" style="margin-right: 5px"></i>
support@jomalls.com
</span>
<span style="display: inline-block; margin-left: 50px">
<i class="el-icon-map-location" style="margin-right: 5px"></i>
广州市南沙区丰泽东路106号
</span>
</div>
<div class="record-number">
<a href="https://beian.miit.gov.cn" target="_black">粤ICP备2022141405号-1</a>
</div>
</div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.function_bg { .function_bg {
padding: 50px; padding: 20px;
text-align: center; text-align: center;
margin-bottom: 20px;
} }
.product-pros { .product-pros {
...@@ -346,18 +312,5 @@ ...@@ -346,18 +312,5 @@
line-height: 30px; line-height: 30px;
background: url(../assets/bg-1.png) center / cover no-repeat; background: url(../assets/bg-1.png) center / cover no-repeat;
} }
.banner_footer {
color: #fff;
padding: 30px 30px 90px;
background: url(../assets/footer.jpg) center / cover no-repeat;
}
.record-number {
text-align: center;
margin-top: 20px;
}
.record-number a {
text-decoration: none;
color: #fff;
}
</style> </style>
src/router/index.js
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from '../views/home.vue' import Home from '../views/home.vue'
import HomePage from '../views/homePage/index.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
...@@ -9,6 +10,14 @@ const routes = [ ...@@ -9,6 +10,14 @@ const routes = [
path: '/', path: '/',
name: 'home', name: 'home',
component: Home, component: Home,
redirect: '/home',
children: [
{
path: '/home',
name: 'homePage',
component: HomePage
}
],
}, },
{ {
path: '/register', path: '/register',
......
src/views/home.vue
...@@ -3,28 +3,19 @@ ...@@ -3,28 +3,19 @@
<Head /> <Head />
<main class="home-main"> <main class="home-main">
<div <router-view></router-view>
style="
font-size: 48px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
">
</div>
</main> </main>
<product-intro /> <Footer/>
</div> </div>
</template> </template>
<script> <script>
import Footer from '../components/footer.vue'
import Head from '../components/head.vue' import Head from '../components/head.vue'
import ProductIntro from '../components/product-intro.vue'
export default { export default {
name: 'HomePage', name: 'Home',
components: { Head, ProductIntro }, components: { Head, Footer },
mounted() { mounted() {
this.$el.addEventListener('scroll', this.onScroll) this.$el.addEventListener('scroll', this.onScroll)
}, },
...@@ -55,7 +46,6 @@ export default { ...@@ -55,7 +46,6 @@ export default {
} }
.home-page .header { .home-page .header {
background: transparent;
transition: all 0.3s; transition: all 0.3s;
} }
...@@ -67,7 +57,5 @@ export default { ...@@ -67,7 +57,5 @@ export default {
.home-main { .home-main {
padding-top: 60px; padding-top: 60px;
height: calc(70vh - 60px);
background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9);
} }
</style> </style>
src/views/homePage/index.vue 0 → 100644
<template>
<div class="home-page">
<div class="banner-images">
<el-carousel class="banner-images-inner" :interval="4000000" height="33.333vw">
<el-carousel-item v-for="(item, index) in bannerImages" :key="index">
<img class="images" :src="item.image" style="width: 100vw"/>
</el-carousel-item>
</el-carousel>
</div>
<product-intro />
</div>
</template>
<script>
import ProductIntro from '../../components/product-intro.vue'
export default {
name: 'homePage',
components: {
ProductIntro,
},
data() {
return {
bannerImages: [
{ image: require('../../assets/banner/1.jpg') },
{ image: require('../../assets/banner/2.jpg') },
{ image: require('../../assets/banner/3.jpg') },
{ image: require('../../assets/banner/4.jpg') },
{ image: require('../../assets/banner/5.jpg') },
{ image: require('../../assets/banner/6.jpg') },
{ image: require('../../assets/banner/7.jpg') },
{ image: require('../../assets/banner/8.jpg') },
{ image: require('../../assets/banner/9.jpg') },
],
}
},
}
</script>
<style scoped>
.banner-images {
font-size: 48px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9);
}
.banner-images-inner {
width: 100%;
}
</style>
src/views/login.vue
...@@ -2,9 +2,11 @@ ...@@ -2,9 +2,11 @@
<div> <div>
<div class="login_bg"> <div class="login_bg">
<div class="logo"> <div class="logo">
<span class="logo_text"> <a href="/">
<img src="../assets/logo.png" height="40px" /> <span class="logo_text">
</span> <img src="../assets/logo.png" height="40px" />
</span>
</a>
</div> </div>
<div class="banner_text"> <div class="banner_text">
<h1>智能化订单处理</h1> <h1>智能化订单处理</h1>
...@@ -41,11 +43,9 @@ ...@@ -41,11 +43,9 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<div style="text-align: center"> <div style="text-align: center">
<button class="login-btn" @click="submitForm"> <button class="login-btn" @click="submitForm">登录</button>
登录
</button>
</div> </div>
<div style="margin-top: 20px; font-size: 14px; text-align: center;"> <div style="margin-top: 20px; font-size: 14px; text-align: center">
还没有账号？ 还没有账号？
<router-link class="link" to="register">马上注册</router-link> <router-link class="link" to="register">马上注册</router-link>
</div> </div>
......
src/views/register.vue
<template> <template>
<div class="login_bg"> <div class="login_bg">
<div class="logo">
<a href="/">
<span class="logo_text">
<img src="../assets/logo.png" height="40px" />
</span>
</a>
</div>
<div class="login_content"> <div class="login_content">
<h2 style="text-align: center">用户注册</h2> <h2 style="text-align: center">用户注册</h2>
<el-form <el-form
...@@ -291,4 +299,11 @@ export default { ...@@ -291,4 +299,11 @@ export default {
color: #666; color: #666;
margin-left: 10px; margin-left: 10px;
} }
.logo {
position: absolute;
top: 60px;
left: 80px;
}
</style> </style>
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