Skip to content

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

底部、车型、新闻、活动样式调整

parent 34935d19
Show whitespace changes
Inline Side-by-side
Showing with 73 additions and 44 deletions
assets/main.css
View file @ a027ca1d
...@@ -32,6 +32,12 @@ body { ...@@ -32,6 +32,12 @@ body {
padding: 20px; padding: 20px;
margin: 20px 0; margin: 20px 0;
} }
.hot-t-r{
border-bottom: none;
margin-bottom: 0;
border-bottom: 1px solid #eee;
width: 100% !important;
}
.content{ .content{
display: flex; display: flex;
...@@ -145,11 +151,17 @@ h2{ ...@@ -145,11 +151,17 @@ h2{
top: 2px; top: 2px;
} }
.new-item, .activity-item, .content-new, .vehicle-item{ .activity-item, .vehicle-item{
margin-bottom: 20px; margin-bottom: 20px;
background: #fff; background: #fff;
padding: 20px; padding: 20px;
} }
.new-item,.content-new{
margin-bottom: 20px;
background: #fff;
padding: 14px;
}
.new-item:hover, .activity-item:hover, .content-new:hover, .vehicle-item:hover, .item-c:hover{ .new-item:hover, .activity-item:hover, .content-new:hover, .vehicle-item:hover, .item-c:hover{
box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc;
} }
...@@ -158,7 +170,9 @@ h2{ ...@@ -158,7 +170,9 @@ h2{
} }
.total-div{ .total-div{
margin: 20px 0; margin: 20px 0;
color: #666;
background: #fff; background: #fff;
font-size: 16px;
padding: 10px; padding: 10px;
} }
.vehicle-desc{ .vehicle-desc{
......
components/footer.vue
View file @ a027ca1d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="flex-aic-jcb" style="height: 200px;width: 100%;"> <div class="flex-aic-jcb" style="height: 200px;width: 100%;">
<div class="flex-aic"> <div class="flex-aic">
<div class="footer-scan"> <div class="footer-scan">
<img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/> <img src="../assets/images/xxfczs.jpg" alt="欣新房车，让生活更美好"/>
<p class="ft-12 tc color-ccc">欣新房车微信公众号</p> <p class="ft-12 tc color-ccc">欣新房车微信公众号</p>
</div> </div>
<div class="footer-scan"> <div class="footer-scan">
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<p class="ft-12 tc color-ccc">欣新房车助手小程序</p> <p class="ft-12 tc color-ccc">欣新房车助手小程序</p>
</div> </div>
<div class="footer-scan"> <div class="footer-scan">
<img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/> <img src="../assets/images/dfcapp.png" alt="欣新房车，让生活更美好"/>
<p class="ft-12 tc color-ccc">滴房车App(欣新旗下)</p> <p class="ft-12 tc color-ccc">滴房车App(欣新旗下)</p>
</div> </div>
</div> </div>
......
pages/activity.vue
View file @ a027ca1d
...@@ -23,11 +23,11 @@ ...@@ -23,11 +23,11 @@
<ul class="campsiteDetail clearfix"> <ul class="campsiteDetail clearfix">
<li v-for="item in dataDetail" :key="item.id" class="activity-item"> <li v-for="item in dataDetail" :key="item.id" class="activity-item">
<nuxt-link :to="'/activityList/'+item.id"> <nuxt-link :to="'/activityList/'+item.id">
<img :src="item.banner" alt style="width:438px;height: 100%; max-height: 238px;" /> <img :src="item.banner" alt style="width:438px;height: 243px;" />
<div style="margin-left:20px" class="active-r"> <div style="margin-left:20px" class="active-r">
<h2 class="ellipsis2">{{item.title }}</h2> <h2 class="ellipsis2">{{item.title }}</h2>
<div>{{item.startTime | formatDate('yyyy-MM-dd hh:mm:ss')}}~{{item.endTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</div> <div class="activity-time">{{item.startTime | formatDate('yyyy-MM-dd hh:mm:ss')}}~{{item.endTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</div>
<div class="ellipsis2">{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div> <div class="ellipsis2 activity-addr"><img src="../assets/images/local.png" alt="欣新房车，让生活更美好"/>{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
</div> </div>
</nuxt-link> </nuxt-link>
</li> </li>
...@@ -155,6 +155,13 @@ ...@@ -155,6 +155,13 @@
clear: both; clear: both;
visibility: hidden; visibility: hidden;
} }
.activity-time, .activity-addr{
color: #666;
font-size: 14px;
margin: 20px 0;
display: flex;
align-items: center;
}
.clearfix { .clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
} }
......
pages/activityList/_id.vue
View file @ a027ca1d
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<span>{{detail.title}}</span> <span>{{detail.title}}</span>
</div> </div>
<div style="display: flex;padding: 20px;background: #fff"> <div style="display: flex;padding: 20px;background: #fff">
<img :src="detail.banner" style="width: 50%;height: 100%;"/> <img :src="detail.banner" style="width: 540px;height:320px;"/>
<div class="r-content"> <div class="r-content">
<h1>{{detail.title}}</h1> <h1>{{detail.title}}</h1>
<div class="r-cc"> <div class="r-cc">
...@@ -17,18 +17,18 @@ ...@@ -17,18 +17,18 @@
<p>活动时间<span style="margin-left: 20px;">{{detail.startTime | formatDate('yyyy-MM-dd hh:mm:ss')}}~{{detail.endTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span></p> <p>活动时间<span style="margin-left: 20px;">{{detail.startTime | formatDate('yyyy-MM-dd hh:mm:ss')}}~{{detail.endTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span></p>
<p class="ellipsis2">活动地点<span style="margin-left: 20px;">{{detail.province}}{{detail.city}}{{detail.town}}{{detail.address}}</span></p> <p class="ellipsis2">活动地点<span style="margin-left: 20px;">{{detail.province}}{{detail.city}}{{detail.town}}{{detail.address}}</span></p>
</div> </div>
<div class="buttonDetails">报名参加</div> <!--<div class="buttonDetails">报名参加</div>-->
</div> </div>
</div> </div>
<div class="flex-jcb"> <div class="flex-jcb">
<div style="width: 68%;background: #fff;margin: 20px 0;padding: 20px;"> <div style="width: 800px;background: #fff;margin: 20px 0;padding: 20px;">
<h3 class="content-t">活动详情</h3> <h3 class="content-t">活动详情</h3>
<div class="models-details" v-html="detail.content"></div> <div class="models-details" v-html="detail.content"></div>
</div> </div>
<div class="content-r-link" style="width: 31%;background: #fff;margin: 20px 0;padding: 20px;"> <div class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 20px;">
<h3 class="content-t" style="border-bottom: none;margin-bottom: 0;">热门活动</h3> <h3 class="content-t hot-t-r">热门活动</h3>
<div class="content-detail" v-for="item in hotList" :key="item.id"> <div class="content-detail tc" v-for="item in hotList" :key="item.id">
<img :src="item.banner" :alt="item.title" style="width:100%;"/> <img :src="item.banner" :alt="item.title" style="width: 190px;height: 120px;"/>
<div class="tc ellipsis cc-title">{{item.title}}</div> <div class="tc ellipsis cc-title">{{item.title}}</div>
<nuxt-link :to="'/activityList/'+item.id"><div class="detail-new">活动详情</div></nuxt-link> <nuxt-link :to="'/activityList/'+item.id"><div class="detail-new">活动详情</div></nuxt-link>
</div> </div>
......
pages/news.vue
View file @ a027ca1d
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<ul class="campsiteDetail"> <ul class="campsiteDetail">
<li v-for="item in dataDetail" :key="item.id" class="new-item"> <li v-for="item in dataDetail" :key="item.id" class="new-item">
<nuxt-link :to="'/newsList/'+item.id"> <nuxt-link :to="'/newsList/'+item.id">
<img :src="item.coverImage" alt style="width:270px;height: 100%" /> <img :src="item.coverImage" alt style="width:270px;height: 172px" />
<div style="margin-left:20px" class="active-r"> <div style="margin-left:20px" class="active-r">
<h2 class="ellipsis2">{{item.title }}</h2> <h2 class="ellipsis2">{{item.title }}</h2>
<div class="ellipsis2 epitome">导语：{{item.epitome}}</div> <div class="ellipsis2 epitome">导语：{{item.epitome}}</div>
......
pages/newsList/_id.vue
View file @ a027ca1d
...@@ -10,25 +10,25 @@ ...@@ -10,25 +10,25 @@
</div> </div>
<div class="content"> <div class="content">
<div style="width: 100%;padding-top: 20px;"> <div style="width: 100%;padding-top: 20px;">
<h3 class="tc">{{detail.title}}</h3> <h3 class="tc news-title">{{detail.title}}</h3>
<div class="content-detail" v-html="detail.text"></div> <div class="content-detail" v-html="detail.text"></div>
</div> </div>
</div> </div>
</div> </div>
<div style="width: 1200px;margin: 0 auto 20px auto;"> <div style="width: 1120px;margin: 0 auto 20px auto;">
<div class="flex-aic-jcb more-container new-cc"> <div class="flex-aic-jcb more-container new-cc">
<div style="width: 1100px;"> <div style="width: 1100px;">
<div>推荐咨讯</div> <div>推荐咨讯</div>
</div> </div>
<nuxt-link to="/news"><div>MORE</div></nuxt-link> <nuxt-link to="/news"><div>MORE<img src="../../assets/images/r-9.png"/></div></nuxt-link>
</div> </div>
<div class="content-new" v-for="item in hotList" :key="item.id"> <div class="content-new" v-for="item in hotList" :key="item.id">
<nuxt-link :to="'/newsList/'+item.id"> <nuxt-link :to="'/newsList/'+item.id">
<img :src="item.coverImage" style="width:100px;height: 100%;"/> <img :src="item.coverImage" style="width:180px;height: 114px;"/>
<div style="margin-left: 20px;"> <div style="margin-left: 20px;">
<div class="ellipsis c-title">{{item.title}}</div> <div class="ellipsis c-title">{{item.title}}</div>
<div class="ellipsis2">导语：{{item.epitome}}</div> <div class="ellipsis2 ep-hot">导语：{{item.epitome}}</div>
<div>{{item.addTime}}</div> <div class="ep-time">{{item.addTime}}</div>
</div> </div>
</nuxt-link> </nuxt-link>
</div> </div>
...@@ -44,7 +44,6 @@ ...@@ -44,7 +44,6 @@
import footerModal from "../../components/footer" import footerModal from "../../components/footer"
import Swiper from 'swiper'; import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css'; import 'swiper/dist/css/swiper.min.css';
// import { getDetail } from '../../../../demo nuxt/nuxt-bnhcp/ajax/getData';
export default { export default {
transition: 'bounce', transition: 'bounce',
components: { components: {
...@@ -108,9 +107,6 @@ ...@@ -108,9 +107,6 @@
swiper: galleryThumbs swiper: galleryThumbs
} }
}); });
},
head: {
title: '营地详情'
} }
} }
</script> </script>
...@@ -130,8 +126,15 @@ ...@@ -130,8 +126,15 @@
padding-left: 0; padding-left: 0;
top: 90px; top: 90px;
} }
.tc { .news-title{
text-align: center; font-size: 20px;
color: #333;
margin-bottom: 21px;
}
.ep-hot, .ep-time{
font-size: 14px;
color: #666;
margin-top:20px;
} }
.new-cc{ .new-cc{
background: #fff; background: #fff;
...@@ -161,8 +164,9 @@ ...@@ -161,8 +164,9 @@
padding: 20px 0; padding: 20px 0;
width: 100%; width: 100%;
} }
.content-detail .c-title{ .c-title{
padding: 5px; color: #333;
font-size:20px;
} }
.content-new a{ .content-new a{
display: flex; display: flex;
......
pages/vehicle.vue
View file @ a027ca1d
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<nuxt-link :to="item.link" class="flex-aic"> <nuxt-link :to="item.link" class="flex-aic">
<button class="buttonDetails">租车详情<img style="position: absolute;" src="../assets/images/r-9.png"/></button> <button class="buttonDetails">租车详情<img style="position: absolute;" src="../assets/images/r.png"/></button>
</nuxt-link> </nuxt-link>
</li> </li>
</ul> </ul>
......
pages/vehicleList/_id.vue
View file @ a027ca1d
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<div class="swiper-container gallery-thumbs"> <div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper swiper-wrapper-thu"> <div class="swiper-wrapper swiper-wrapper-thu">
<div class="swiper-slide" v-for="(item,index) in detail.pictureList" :key="index" @click="changeImgIndex(index,detail.pictureList.length)"> <div class="swiper-slide" v-for="(item,index) in detail.pictureList" :key="index" @click="changeImgIndex(index,detail.pictureList.length)">
<img :src="item" :class="preIndex==index?'active':''" alt="" style="width:100%"> <img :src="item" :class="preIndex==index?'active':''" alt="">
</div> </div>
</div> </div>
</div> </div>
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<div class="buttonDetails" style="margin-top: 20px;position: relative;" @click="showScan()"> <div class="buttonDetails" style="margin-top: 20px;position: relative;" @click="showScan()">
<span class="ft-20">预定用车</span> <span class="ft-20">预定用车</span>
<div v-if="isShowScan" class="scan"> <div v-if="isShowScan" class="scan">
<img src="../../assets/images/1566894441.png" style="width: 90px;"/> <img src="../../assets/images/dfcapp.png" style="width: 90px;"/>
<div style="color: #FFB74B;font-size: 14px;">滴房车App</div> <div style="color: #FFB74B;font-size: 14px;">滴房车App</div>
</div> </div>
<div v-if="isShowScan" class="scan-notice"> <div v-if="isShowScan" class="scan-notice">
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</div> </div>
</div> </div>
<div class="flex-jcb"> <div class="flex-jcb">
<div style="width: 68%;background: #fff;margin: 20px 0;padding: 20px;"> <div style="width: 800px;background: #fff;margin: 20px 0;padding: 20px;">
<h3 class="content-t">房车详情</h3> <h3 class="content-t">房车详情</h3>
<div class="models-details" v-html="detail.modelsDetails"></div> <div class="models-details" v-html="detail.modelsDetails"></div>
<h3 class="content-t">租车须知</h3> <h3 class="content-t">租车须知</h3>
...@@ -81,10 +81,10 @@ ...@@ -81,10 +81,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content-r-link" style="width: 31%;background: #fff;margin: 20px 0;padding: 20px;"> <div class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 20px;">
<h3 class="content-t" style="border-bottom: none;margin-bottom: 0;">热门车型</h3> <h3 class="content-t hot-t-r">热门车型</h3>
<div class="content-detail" v-for="item in hotList" :key="item.id"> <div class="content-detail tc" v-for="item in hotList" :key="item.id">
<img :src="item.coverPic" :alt="item.name" style="width:100%;"/> <img :src="item.coverPic" :alt="item.name" style="width: 161px;height: 116px;"/>
<div class="tc ellipsis cc-title">{{item.name}}</div> <div class="tc ellipsis cc-title">{{item.name}}</div>
<nuxt-link :to="item.link"><div class="detail-new">租车详情</div></nuxt-link> <nuxt-link :to="item.link"><div class="detail-new">租车详情</div></nuxt-link>
</div> </div>
...@@ -172,10 +172,10 @@ ...@@ -172,10 +172,10 @@
let galleryTop = new Swiper('.gallery-top', { let galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10, spaceBetween: 10,
loop:true, loop:true,
// autoplay: { autoplay: {
// delay: 2500, delay: 2500,
// disableOnInteraction: false, disableOnInteraction: false,
// }, },
on: { on: {
slideChangeTransitionEnd: function () { slideChangeTransitionEnd: function () {
t.preIndex = this.activeIndex-1; t.preIndex = this.activeIndex-1;
...@@ -249,7 +249,7 @@ ...@@ -249,7 +249,7 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.content-detail .cc-title{ .content-detail .cc-title{
padding: 5px; margin: 20px;
} }
.content-r-link{ .content-r-link{
margin-left: 3%; margin-left: 3%;
...@@ -259,7 +259,8 @@ ...@@ -259,7 +259,8 @@
align-items: center; align-items: center;
} }
.detail-new{ .detail-new{
width: 156px; width: 116px;
height: 34px;
padding: 5px 0; padding: 5px 0;
cursor: pointer; cursor: pointer;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -267,6 +268,7 @@ ...@@ -267,6 +268,7 @@
border: 1px solid #1bbb9f; border: 1px solid #1bbb9f;
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
font-size: 14px;
} }
.scan-notice{ .scan-notice{
position: absolute; position: absolute;
...@@ -316,12 +318,14 @@ ...@@ -316,12 +318,14 @@
margin: 0 !important; margin: 0 !important;
} }
.swiper-wrapper-thu img{ .swiper-wrapper-thu img{
width: 103px; width: 103px !important;
height: 64px; height: 64px !important;
border: 2px solid #fff; border: 2px solid #fff;
} }
.swiper-wrapper-thu img.active{ .swiper-wrapper-thu img.active{
border: 2px solid #1bbb9f; border: 2px solid #1bbb9f;
padding: 5px; padding: 5px;
width: 103px;
height: 64px;
} }
</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