Skip to content

V
vue-ssr
Commit 3b31f1f6 authored by lixy's avatar lixy
Browse files
Options

官网-头-底

parent 8927898c
Hide whitespace changes
Inline Side-by-side
Showing with 485 additions and 96 deletions
.nuxt/router.js
View file @ 3b31f1f6
...@@ -3,7 +3,12 @@ import Router from 'vue-router' ...@@ -3,7 +3,12 @@ import Router from 'vue-router'
Vue.use(Router) Vue.use(Router)
const _c9635764 = () => import('..\\pages\\users.vue' /* webpackChunkName: "pages_users" */).then(m => m.default || m) const _6a26eff2 = () => import('..\\pages\\vehicle.vue' /* webpackChunkName: "pages_vehicle" */).then(m => m.default || m)
const _ac0ad306 = () => import('..\\pages\\news.vue' /* webpackChunkName: "pages_news" */).then(m => m.default || m)
const _77bb3d1c = () => import('..\\pages\\campsite.vue' /* webpackChunkName: "pages_campsite" */).then(m => m.default || m)
const _b5ac509a = () => import('..\\pages\\aboutXx.vue' /* webpackChunkName: "pages_aboutXx" */).then(m => m.default || m)
const _912e308e = () => import('..\\pages\\activity.vue' /* webpackChunkName: "pages_activity" */).then(m => m.default || m)
const _26c82b82 = () => import('..\\pages\\tour.vue' /* webpackChunkName: "pages_tour" */).then(m => m.default || m)
const _55e47a18 = () => import('..\\pages\\index.vue' /* webpackChunkName: "pages_index" */).then(m => m.default || m) const _55e47a18 = () => import('..\\pages\\index.vue' /* webpackChunkName: "pages_index" */).then(m => m.default || m)
...@@ -65,9 +70,34 @@ export function createRouter () { ...@@ -65,9 +70,34 @@ export function createRouter () {
scrollBehavior, scrollBehavior,
routes: [ routes: [
{ {
path: "/users", path: "/vehicle",
component: _c9635764, component: _6a26eff2,
name: "users" name: "vehicle"
},
{
path: "/news",
component: _ac0ad306,
name: "news"
},
{
path: "/campsite",
component: _77bb3d1c,
name: "campsite"
},
{
path: "/aboutXx",
component: _b5ac509a,
name: "aboutXx"
},
{
path: "/activity",
component: _912e308e,
name: "activity"
},
{
path: "/tour",
component: _26c82b82,
name: "tour"
}, },
{ {
path: "/", path: "/",
......
assets/main.css
View file @ 3b31f1f6
...@@ -4,30 +4,66 @@ body { ...@@ -4,30 +4,66 @@ body {
width: 100%; width: 100%;
} }
.main-container{
margin-top:90px;
min-height: 600px;
}
.container { .container {
text-align: center; /*text-align: center;*/
font-size: 20px; font-size: 20px;
transition: all .5s cubic-bezier(.55, 0, .1, 1); transition: all .5s cubic-bezier(.55, 0, .1, 1);
} }
.page-enter-active, .flex-aic{
.page-leave-active { display: flex;
transition: opacity .5s align-items: center;
}
.flex-aic-jcb{
display: flex;
align-items: center;
justify-content: space-between;
}
.ft-20{
font-size: 20px;
}
.ft-18{
font-size: 18px;
} }
.page-enter, .ft-16{
.page-leave-active { font-size: 16px;
opacity: 0
} }
.bounce-enter-active { .ft-14{
animation: bounce-in .8s; font-size: 14px;
} }
.bounce-leave-active { .ft-12{
animation: bounce-out .5s; font-size: 12px;
} }
/*路由跳转页面动画*/
/*.page-enter-active,*/
/*.page-leave-active {*/
/*transition: opacity .5s*/
/*}*/
/*.page-enter,*/
/*.page-leave-active {*/
/*opacity: 0*/
/*}*/
/*.bounce-enter-active {*/
/*animation: bounce-in .8s;*/
/*}*/
/*.bounce-leave-active {*/
/*animation: bounce-out .5s;*/
/*}*/
@keyframes bounce-in { @keyframes bounce-in {
0% { 0% {
transform: scale(0) transform: scale(0)
...@@ -50,4 +86,4 @@ body { ...@@ -50,4 +86,4 @@ body {
100% { 100% {
transform: scale(0) transform: scale(0)
} }
} }
\ No newline at end of file
components/footer.vue 0 → 100644
View file @ 3b31f1f6
<template>
<div class="footer-container">
<!--<img src="../assets/images/footer.jpg" style="width:100%;" alt="欣新房车，让生活更美好">-->
<div class="footer">
<div class="flex-aic-jcb" style="height: 200px;width: 100%;">
<div class="flex-aic">
<div class="footer-scan">
<img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
<p class="ft-12">欣新房车微信公众号</p>
</div>
<div class="footer-scan">
<img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
<p class="ft-12">欣新房车助手小程序</p>
</div>
<div class="footer-scan">
<img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
<p class="ft-12">滴房车App(欣新旗下)</p>
</div>
</div>
<div class="r-contant">
<div class="ft-20 flex-aic r-contant-i"><img src="https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg" alt="欣新房车，让生活更美好"/>400-036-9369</div>
<div class="ft-12 flex-aic r-contant-i"><img src="https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg" alt="欣新房车，让生活更美好"/>广东省东莞市松山湖工业西路12号</div>
<div class="ft-12 flex-aic r-contant-i"><img src="https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg" alt="欣新房车，让生活更美好"/>欣新房车控股集团（东莞）股份有限公司</div>
<div class="contact">在线咨询</div>
</div>
</div>
</div>
<div class="link-f"></div>
</div>
</template>
<script>
import axios from 'axios'
export default {
transition: 'bounce',
name: 'footerModal',
props: [],
data () {
return {
}
},
created() {},
}
</script>
<style scoped>
.footer-container {
width: 100%;
/*height: 423px;*/
height: 300px;
position: relative;
background:url("../assets/images/footer.jpg") no-repeat;
color: #fff;
}
.footer {
font-family: sans-serif;
padding: 15px 0;
display: flex;
width: 1200px;
margin: 0 auto;
}
.footer-scan{
display: flex;
flex-direction: column;
justify-content: center;
padding: 0px 20px;
border-right: 1px solid #a2a2a2;
}
.footer-scan img{
width: 120px;
height: 120px;
padding: 10px;
}
.footer-scan:last-child{
border: none;
}
.contact{
background: #1bbb9f;
padding: 3px 10px;
font-size: 14px;
text-align: center;
width: 100px;
margin-top: 20px;
}
.r-contant-i{
margin: 5px 0;
}
.r-contant img{
width:20px;
height: 20px;
margin-right: 10px;
}
.link-f{
border-top: 1px solid #a2a2a2;
}
</style>
components/loading.vue
View file @ 3b31f1f6
<template> <template>
<div class="loading-page" v-if="loading"> <div class="loading-page" v-if="loading">
正在加载，请稍等... 正在加载，请稍等...
</div> </div>
</template> </template>
...@@ -35,4 +34,4 @@ export default { ...@@ -35,4 +34,4 @@ export default {
font-family: sans-serif; font-family: sans-serif;
} }
</style> </style>
\ No newline at end of file
components/menu.vue 0 → 100644
View file @ 3b31f1f6
<template>
<div class="menu-container">
<div class="menu">
<nuxt-link to="/"><img :src="logo" style="width:200px;max-height: 100px;" alt="欣新房车，让生活更美好"></nuxt-link>
<ul class="users">
<li v-for="menu in menuList" :key="menu.id">
<nuxt-link :to="menu.link" :class="menu.link==router?'active':''">{{ menu.name }}</nuxt-link>
</li>
</ul>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
transition: 'bounce',
name: 'menuModal',
props: [],
data () {
return {
router: "/",
logo: "https://xxfangche.com/upload/1/app/ab709954135a0f02a99d6a20aa95ea7.jpg",
menuList:[
{id: 1, name: "首页", link:"/"},
{id: 2, name: "房车租赁", link:"/vehicle"},
{id: 3, name: "房车旅行", link:"/tour"},
{id: 4, name: "房车营地", link:"/campsite"},
{id: 5, name: "欣新活动", link:'/activity'},
{id: 6, name: "新闻动态", link:'/news'},
{id: 7, name: "关于欣新", link:'/aboutXx'}
]
}
},
created() {debugger
let router = this.$route.path;
this.router = router;
},
}
</script>
<style scoped>
.menu-container {
position: fixed;
z-index: 999;
top:0;
width: 100%;
height: 90px;
background: #fff;
display: flex;
justify-content: center;
}
.menu {
font-family: sans-serif;
position: fixed;
top:0;
padding: 15px 0;
display: flex;
align-items: center;
width: 1200px;
margin: 0 auto;
}
/* li{
text-decoration: none;
} */
.users {
list-style-type: none;
display: flex;
}
.users li a {
display: inline-block;
/* border: 1px #ddd solid; */
margin: 0 30px;
padding: 10px 0;
text-align: left;
color: #222;
text-decoration: none;
border-bottom: 3px solid #fff;
font-size: 20px;
}
.users li a:hover, .active{
color: #1bbb9f !important;
border-bottom: 3px solid #1bbb9f !important;
}
</style>
nuxt.config.js
View file @ 3b31f1f6
module.exports = { module.exports = {
head: { head: {
title: '欣新房车—房车·让生活更美好-房车销售丨房车租赁丨房车旅游丨房车托管', title: '欣新房车—房车·让生活更美好-房车销售丨房车租赁丨房车旅游丨房车托管',
meta: [ meta: [
......
pages/aboutXx.vue 0 → 100644
View file @ 3b31f1f6
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<p>这里是关于欣新</p>
</div>
</div>
<footer-modal></footer-modal>
</div>
</template>
<script>
import axios from 'axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
export default {
transition: 'bounce',
components: {
menuModal,
footerModal
},
// async asyncData() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
// let cc = data.data;
// return { users: cc}
// },
head: {
title: '关于欣新'
}
}
</script>
pages/activity.vue 0 → 100644
View file @ 3b31f1f6
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<p>这里是欣新活动</p>
</div>
</div>
<footer-modal></footer-modal>
</div>
</template>
<script>
import axios from 'axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
export default {
transition: 'bounce',
components: {
menuModal,
footerModal
},
// async asyncData() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
// let cc = data.data;
// return { users: cc}
// },
head: {
title: '欣新活动'
}
}
</script>
pages/campsite.vue 0 → 100644
View file @ 3b31f1f6
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<p>这里是房车营地</p>
</div>
</div>
<footer-modal></footer-modal>
</div>
</template>
<script>
import axios from 'axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
export default {
transition: 'bounce',
components: {
menuModal,
footerModal
},
// async asyncData() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
// let cc = data.data;
// return { users: cc}
// },
head: {
title: '房车营地'
}
}
</script>
pages/index.vue
View file @ 3b31f1f6
<template> <template>
<div class="container"> <div class="container">
<h2>新闻列表</h2> <menu-modal></menu-modal>
<ul class="users"> <div class="main-container">
<li v-for="user in users" :key="user.id"> <img src="http://xxfangche.com/upload/1/editor/1564652860778wuweizhi.jpg" style="width:100%;" alt="欣新房车，让生活更美好">
<nuxt-link to="/users">{{ user.title }}</nuxt-link> 这里是首页
<div v-html="user.value"></div> <!--<h2>新闻列表</h2>-->
</li> <!--<ul class="users">-->
</ul> <!--<li v-for="user in users" :key="user.id">-->
<!--<nuxt-link to="/users">{{ user.title }}</nuxt-link>-->
<!--<div v-html="user.value"></div>-->
<!--</li>-->
<!--</ul>-->
</div>
<footer-modal></footer-modal>
</div> </div>
</template> </template>
<script> <script>
import axios from 'axios' import axios from 'axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
export default { export default {
transition: 'bounce', transition: 'bounce',
components: {
menuModal,
footerModal
},
async asyncData() { async asyncData() {
const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1'); // const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
let cc = data.data; // let cc = data.data;
return { users: cc} // return { users: cc}
}, },
} }
</script> </script>
<style scoped>
.container {
text-align: center;
/* margin-top: 100px; */
font-family: sans-serif;
}
/* li{
text-decoration: none;
} */
.users {
list-style-type: none;
}
.users li a {
display: inline-block;
/* border: 1px #ddd solid; */
padding: 10px;
text-align: left;
color: #222;
text-decoration: none;
}
.users li a:hover {
color: orange;
}
</style>
pages/news.vue 0 → 100644
View file @ 3b31f1f6
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<p>这里是新闻动态</p>
</div>
</div>
<footer-modal></footer-modal>
</div>
</template>
<script>
import axios from 'axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
export default {
transition: 'bounce',
components: {
menuModal,
footerModal
},
// async asyncData() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
// let cc = data.data;
// return { users: cc}
// },
head: {
title: '新闻动态'
}
}
</script>
pages/tour.vue 0 → 100644
View file @ 3b31f1f6
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<p>这里是房车旅游</p>
</div>
</div>
<footer-modal></footer-modal>
</div>
</template>
<script>
import axios from 'axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
export default {
transition: 'bounce',
components: {
menuModal,
footerModal
},
// async asyncData() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
// let cc = data.data;
// return { users: cc}
// },
head: {
title: '房车旅游'
}
}
</script>
pages/users.vue deleted 100644 → 0
View file @ 8927898c
<template>
<div class="wrap">
<p>这里是详情页</p>
{{users}}
<nuxt-link to="/">返回首页</nuxt-link>
</div>
</template>
<script>
import axios from 'axios'
export default {
transition: 'bounce',
async asyncData() {
const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
let cc = data.data;
return { users: cc}
},
// asyncData() {
// return new Promise((resolve) => {
// setTimeout(function () {
// resolve({})
// }, 0)
// })
//
// },
head: {
title: '详情页'
}
}
</script>
<style scoped>
.wrap{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 200px
}
</style>
pages/vehicle.vue 0 → 100644
View file @ 3b31f1f6
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<p>这里是房车租赁</p>
</div>
</div>
<footer-modal></footer-modal>
</div>
</template>
<script>
import axios from 'axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
export default {
transition: 'bounce',
components: {
menuModal,
footerModal
},
async asyncData() {
const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
let cc = data.data;
return { users: cc}
},
head: {
title: '房车租赁'
}
}
</script>
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