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