Skip to content

V
vue-ssr-mobile
Commit afc3351c authored by lixy's avatar lixy
Browse files
Options

导航栏、底部

parent cdb42feb
Show whitespace changes
Inline Side-by-side
Showing with 168 additions and 55 deletions
assets/styles/base.scss
View file @ afc3351c
...@@ -56,6 +56,11 @@ input[disabled] { ...@@ -56,6 +56,11 @@ input[disabled] {
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
.flex-aic-jca{
display: flex;
align-items: center;
justify-content: space-around;
}
.flex-jcb-fdc{ .flex-jcb-fdc{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -70,9 +75,9 @@ input[disabled] { ...@@ -70,9 +75,9 @@ input[disabled] {
z-index: 999; z-index: 999;
top: 0; top: 0;
line-height: 1.87733rem; line-height: 1.87733rem;
padding: 0 10px; padding: 0 14px;
background: #333; background: #fff;
color: #fff; color: #333;
width:100%; width:100%;
} }
.ellipsis { .ellipsis {
...@@ -91,6 +96,10 @@ input[disabled] { ...@@ -91,6 +96,10 @@ input[disabled] {
color: #666; color: #666;
} }
.main-page{
padding-top: 1.87733rem;
}
.total-div{ .total-div{
font-size: px2rem(30px); font-size: px2rem(30px);
} }
...@@ -110,18 +119,30 @@ input[disabled] { ...@@ -110,18 +119,30 @@ input[disabled] {
.mint-second-menu{ .mint-second-menu{
width: 30%; width: 30%;
background: #333; background: #fff;
color: #fff;
position: fixed; position: fixed;
top: 1.87733rem; top: 1.87733rem;
z-index: 999; z-index: 1000;
right: 0; right: 0;
height: 245px;
box-shadow: 3px 7px 13px rgba(0,0,0,0.16);
} }
.mint-second-menu li{ .mint-second-menu li{
padding: px2rem(30px) 0;
text-align: center; text-align: center;
color: #fff; color: #666;
font-size: 14px;
height: 35px;
line-height: 35px;
border-bottom: 1px solid #DFDFDF;
} }
.mint-second-menu li:last-child{
border-bottom: none;
}
.mint-second-menu li.active {
color:#34C1A8;
border-bottom: 1px solid #34C1A8;
}
ul, ul,
li { li {
list-style: none; list-style: none;
......
components/footer.vue
View file @ afc3351c
<template> <template>
<div class="main-padding">
<div> <div>
<a
href="tel:4000369369"
class="ft-14"
style="color:#171413;">24小时竭诚为您服务</a>
</div>
<div class="flex-aic-jcb"> <div class="flex-aic-jcb">
<div style="width: 30%;"> <div style="width: 30%;">
<img <img
src="../assets/images/xxgzh.jpg"> src="../assets/images/xxgzh.jpg">
<div class="tc">欣新房车微信公众号</div> <div class="tc">欣新房车</div>
<div class="tc">微信公众号</div>
</div> </div>
<div style="width: 30%;"> <div style="width: 30%;">
<img <img
src="../assets/images/xxfczs.jpg"> src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png">
<div class="tc">欣新房车助手小程序</div> <div class="tc">滴房车APP</div>
<div class="tc">(安卓)</div>
</div> </div>
<div style="width: 30%;"> <div style="width: 30%;">
<img <img
src="../assets/images/dfcapp.png"> src="../assets/images/xxfczs.jpg">
<div class="tc">滴房车App(欣新旗下)</div> <div class="tc">欣新房车</div>
<div class="tc">助手小程序</div>
</div> </div>
</div> </div>
<div class="link-f flex-aic-jcc">©欣新房车控股集团（东莞）股份有限公司2019 保留一切权利。 </div> <div class="footer-container">
<div class="flex-aic-jcc">
<a
href="tel:4000369369"
class="contact">24小时竭诚为您服务</a>
<img
class="contact-img"
src="../assets/images/xxgzh.jpg">
</div>
<div class="company-addr">公司地址：广东省东莞市松山湖工业西路12号</div>
<div class="company-name">公司名称：欣新房车控股集团（东莞）股份有限公司</div>
<div
class="link-f flex-aic-jcc ft-b-c"
style="margin-top: 14px;"
>©欣新房车控股集团（东莞）股份有限公司2019保留一切权利 </div>
<div class="flex-aic-jcc"> <div class="flex-aic-jcc">
<a <a
href="http://beian.miit.gov.cn" href="http://beian.miit.gov.cn"
rel="nofollow" rel="nofollow"
target="_blank"><span>备案号：</span>粤ICP备19072339号-2</a> class="ft-b-c"
target="_blank"><span class="ft-b-c">备案号：</span>粤ICP备19072339号-2</a>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -59,6 +73,33 @@ ...@@ -59,6 +73,33 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../assets/styles/mixin"; @import "../assets/styles/mixin";
.footer-container{
padding: 17px 0 13px 0;
background: #16192C;
.contact{
color: #eee;
font-size: 12px;
}
.contact-img{
width: 130px;
height: 40px;
margin-left: 13px;
}
.company-addr{
margin-top: 17px;
color: #6D6E7C;
text-align: center;
}
.company-name{
border-bottom: 1px solid #5C5D61;
padding-bottom: 17px;
color: #6D6E7C;
text-align: center;
}
.ft-b-c{
color: #6D6E7C;
}
}
.mint-tabbar>.mint-tab-item.is-selected { .mint-tabbar>.mint-tab-item.is-selected {
background: #fafafa; background: #fafafa;
......
components/head.vue
View file @ afc3351c
<template> <template>
<div> <div>
<div class="header-top"> <div
class="header-top"
@click="closeMenu()">
<div <div
class="flex-aic" class="flex-aic"
@click="$router.push('/')"> @click="$router.push('/')">
<img <img
style="width: 20px;" style="width: 20px"
src="https://mgmt.dfangche.com/xxfccn/image/1/app/5d9c62b7412efd926f70e0ed5efb19a.png" src="https://mgmt.dfangche.com/xxfccn/image/1/app/5d9c62b7412efd926f70e0ed5efb19a.png"
> >
<span style="color:#fff;margin-left: 10px;">欣新房车</span> <span style="color:#fff;margin-left: 10px;">欣新房车</span>
</div> </div>
<img <img
style="width: 20px;height: 20px;" style="width: 18px;height: 16px;"
src="https://xxtest.upyuns.com/image/admin/2019-09-02/17.jpg" src="https://xxtest.upyuns.com/image/admin/2019-09-02/17.jpg"
@click="showMenu()" @click.stop="showMenu()"
> >
</div> </div>
<div v-if="isShowMenu"> <div v-if="isShowMenu">
<ul <ul
class="mint-second-menu"> class="mint-second-menu">
<li @click="$router.push('/')">首页</li> <li
<li @click="$router.push('/vehicle')">房车租赁</li> :class="path=='/'?'active':''"
<li @click="$router.push('/tour')">房车旅游</li> @click="$router.push('/')">首页</li>
<li @click="$router.push('/campsite')">房车营地</li> <li
<li @click="$router.push('/activity')">欣新活动</li> :class="path=='/vehicle'?'active':''"
<li @click="$router.push('/news')">新闻动态</li> @click="$router.push('/vehicle')">房车租赁</li>
<li @click="$router.push('/aboutXx')">关于欣新</li> <li
:class="path=='/tour'?'active':''"
@click="$router.push('/tour')">房车旅游</li>
<li
:class="path=='/campsite'?'active':''"
@click="$router.push('/campsite')">房车营地</li>
<li
:class="path=='/activity'?'active':''"
@click="$router.push('/activity')">欣新活动</li>
<li
:class="path=='/news'?'active':''"
@click="$router.push('/news')">新闻动态</li>
<li
:class="path=='/aboutXx'?'active':''"
@click="$router.push('/aboutXx')">关于欣新</li>
</ul> </ul>
</div> </div>
<div
class="bg-mask"
@touchmove.prevent
@click="closeMenu()"/>
</div> </div>
</template> </template>
...@@ -40,6 +60,8 @@ ...@@ -40,6 +60,8 @@
}; };
}, },
created() { created() {
let path = $nuxt.$route.path;
this.path = path;
}, },
methods: { methods: {
/** /**
...@@ -48,6 +70,9 @@ ...@@ -48,6 +70,9 @@
showMenu(){ showMenu(){
this.isShowMenu = !this.isShowMenu; this.isShowMenu = !this.isShowMenu;
}, },
closeMenu(){
this.isShowMenu = false;
}
} }
}; };
...@@ -55,6 +80,16 @@ ...@@ -55,6 +80,16 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../assets/styles/mixin"; @import "../assets/styles/mixin";
.bg-mask{
height: 100%;
width: 100%;
background: #fff;
opacity: 0.1;
position: fixed;
top: 0;
left: 0;
z-index: 9;
}
.mint-tabbar>.mint-tab-item.is-selected { .mint-tabbar>.mint-tab-item.is-selected {
background: #fafafa; background: #fafafa;
......
components/secondBanner.vue
View file @ afc3351c
...@@ -172,5 +172,6 @@ ...@@ -172,5 +172,6 @@
.banner{ .banner{
height:px2rem(100px); height:px2rem(100px);
overflow: hidden; overflow: hidden;
margin-top: 44px;
} }
</style> </style>
pages/aboutXx.vue
View file @ afc3351c
...@@ -80,8 +80,6 @@ ...@@ -80,8 +80,6 @@
height: px2rem(150px); height: px2rem(150px);
} }
.order-page { .order-page {
padding: px2rem(88px) 0 3px 0;
.no-data { .no-data {
text-align: center; text-align: center;
......
pages/activity.vue
View file @ afc3351c
...@@ -170,8 +170,6 @@ ...@@ -170,8 +170,6 @@
height: px2rem(150px); height: px2rem(150px);
} }
.order-page { .order-page {
padding: px2rem(88px) 0 3px 0;
.no-data { .no-data {
text-align: center; text-align: center;
......
pages/campsite.vue
View file @ afc3351c
...@@ -182,8 +182,6 @@ ...@@ -182,8 +182,6 @@
height: px2rem(150px); height: px2rem(150px);
} }
.order-page { .order-page {
padding: px2rem(88px) 0 3px 0;
.no-data { .no-data {
text-align: center; text-align: center;
......
pages/index.vue
View file @ afc3351c
...@@ -322,7 +322,7 @@ ...@@ -322,7 +322,7 @@
.home-page { .home-page {
background-color: #fff; background-color: #fff;
padding: px2rem(88px) 0 3px 0; padding: px2rem(88px) 0 0 0;
.nav-container { .nav-container {
@include fj(); @include fj();
......
pages/news.vue
View file @ afc3351c
<template> <template>
<div class="order-page"> <div class="news-container">
<Head/> <Head/>
<second-banner
:list = "bannerList"
:looptime="looptime"
:width="width"
:height="height"
:background="background"
:color="color"
class="mb-50"
@prev="prev"
@next="next"
@change="changeBanner"
@click="bannerClick"/>
<ul <ul
v-if="dataDetail.length" v-if="dataDetail.length"
id="scroll-area" id="scroll-area">
type="1"
class="main-padding">
<router-link <router-link
v-for="item in dataDetail" v-for="item in dataDetail"
:to="{ path: 'newsDetail', query:{id: item.id }}" :to="{ path: 'newsDetail', query:{id: item.id }}"
...@@ -41,11 +51,13 @@ ...@@ -41,11 +51,13 @@
mapGetters mapGetters
} from "vuex"; } from "vuex";
import GoTop from "~/components/goTop"; import GoTop from "~/components/goTop";
import SecondBanner from '~/components/secondBanner'
export default { export default {
components: { components: {
Footer, Footer,
Head, Head,
GoTop GoTop,
SecondBanner
}, },
data(){ data(){
return{ return{
...@@ -79,6 +91,11 @@ ...@@ -79,6 +91,11 @@
window.addEventListener('scroll', this.handleScroll); window.addEventListener('scroll', this.handleScroll);
this.getAll(); this.getAll();
}, },
async asyncData() {
const { data } = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=5&platform=1');
let cc = data.data;
return { bannerList: cc}
},
methods: { methods: {
chooseSelect(e) { chooseSelect(e) {
console.log(e.target.value); console.log(e.target.value);
...@@ -122,6 +139,13 @@ ...@@ -122,6 +139,13 @@
t.preventRepeatReuqest = false; t.preventRepeatReuqest = false;
}); });
}, },
// 点击下一页回调
prev () {},
// 点击下一页回调
next () {},
// 鼠标移入状态点回调
changeBanner () {},
bannerClick () {},
}, },
head () { head () {
return { return {
...@@ -134,6 +158,9 @@ ...@@ -134,6 +158,9 @@
<style lang="scss"> <style lang="scss">
@import "../assets/styles/mixin"; @import "../assets/styles/mixin";
.news-container{
}
.news-item{ .news-item{
margin: 10px 0; margin: 10px 0;
} }
...@@ -145,8 +172,6 @@ ...@@ -145,8 +172,6 @@
height: px2rem(150px); height: px2rem(150px);
} }
.order-page { .order-page {
padding: px2rem(88px) 0 3px 0;
.no-data { .no-data {
text-align: center; text-align: center;
......
pages/tour.vue
View file @ afc3351c
...@@ -183,8 +183,6 @@ ...@@ -183,8 +183,6 @@
height: px2rem(150px); height: px2rem(150px);
} }
.order-page { .order-page {
padding: px2rem(88px) 0 3px 0;
.no-data { .no-data {
text-align: center; text-align: center;
......
pages/vehicle.vue
View file @ afc3351c
...@@ -208,8 +208,6 @@ ...@@ -208,8 +208,6 @@
} }
.order-page { .order-page {
padding: px2rem(88px) 0 3px 0;
.no-data { .no-data {
text-align: center; text-align: center;
......
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