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>
<div class="product-intro">
<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-item">
<div class="grid-content">
......@@ -285,47 +285,13 @@
</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>
</template>
<style scoped>
.function_bg {
padding: 50px;
padding: 20px;
text-align: center;
margin-bottom: 20px;
}
.product-pros {
......@@ -346,18 +312,5 @@
line-height: 30px;
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>
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import HomePage from '../views/homePage/index.vue'
Vue.use(VueRouter)
......@@ -9,6 +10,14 @@ const routes = [
path: '/',
name: 'home',
component: Home,
redirect: '/home',
children: [
{
path: '/home',
name: 'homePage',
component: HomePage
}
],
},
{
path: '/register',
......
src/views/home.vue
......@@ -3,28 +3,19 @@
<Head />
<main class="home-main">
<div
style="
font-size: 48px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
">
</div>
<router-view></router-view>
</main>
<product-intro />
<Footer/>
</div>
</template>
<script>
import Footer from '../components/footer.vue'
import Head from '../components/head.vue'
import ProductIntro from '../components/product-intro.vue'
export default {
name: 'HomePage',
components: { Head, ProductIntro },
name: 'Home',
components: { Head, Footer },
mounted() {
this.$el.addEventListener('scroll', this.onScroll)
},
......@@ -55,7 +46,6 @@ export default {
}
.home-page .header {
background: transparent;
transition: all 0.3s;
}
......@@ -67,7 +57,5 @@ export default {
.home-main {
padding-top: 60px;
height: calc(70vh - 60px);
background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9);
}
</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 @@
<div>
<div class="login_bg">
<div class="logo">
<span class="logo_text">
<img src="../assets/logo.png" height="40px" />
</span>
<a href="/">
<span class="logo_text">
<img src="../assets/logo.png" height="40px" />
</span>
</a>
</div>
<div class="banner_text">
<h1>智能化订单处理</h1>
......@@ -41,11 +43,9 @@
</el-input>
</el-form-item>
<div style="text-align: center">
<button class="login-btn" @click="submitForm">
登录
</button>
<button class="login-btn" @click="submitForm">登录</button>
</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>
</div>
......
src/views/register.vue
<template>
<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">
<h2 style="text-align: center">用户注册</h2>
<el-form
......@@ -291,4 +299,11 @@ export default {
color: #666;
margin-left: 10px;
}
.logo {
position: absolute;
top: 60px;
left: 80px;
}
</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