Skip to content

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

新闻-活动

parent e3fa287c
Hide whitespace changes
Inline Side-by-side
Showing with 510 additions and 67 deletions
assets/main.css
View file @ e0e1690c
body { body {
background: #eee; background: #f2f2f2;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
...@@ -27,6 +27,18 @@ a{ ...@@ -27,6 +27,18 @@ a{
text-decoration: none; text-decoration: none;
} }
h2{
font-size: 20px;
color: #333;
font-weight: normal;
}
.epitome{
font-size: 14px;
margin-top: 20px;
color: #666;
}
.container { .container {
/*text-align: center;*/ /*text-align: center;*/
font-size: 16px; font-size: 16px;
...@@ -65,11 +77,35 @@ a{ ...@@ -65,11 +77,35 @@ a{
width: 1200px; width: 1200px;
margin: 0 auto 30px auto; margin: 0 auto 30px auto;
background: #fff; background: #fff;
padding: 30px; padding: 20px;
}
.more-container a{
position: absolute;
right:20px;
color: #999;
text-decoration: none;
}
.more-container a:hover{
right: 25px;
color: #1bbb9f;
box-shadow: 5px 5px 5px #888888;
}
.new-item, .activity-item, .content-new, .vehicle-item{
margin-bottom: 20px;
background: #fff;
padding: 20px;
}
.new-item:hover, .activity-item:hover, .content-new:hover, .vehicle-item:hover{
box-shadow: 0 0 5px #ccc;
} }
.total-div{ .total-div{
padding-bottom: 30px; margin-bottom: 20px;
background: #fff;
padding: 10px;
}
.buttonDetails:hover{
background: #1D9D87 !important;
} }
.ellipsis { .ellipsis {
overflow: hidden;white-space: nowrap;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all; overflow: hidden;white-space: nowrap;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all;
......
components/menu.vue
View file @ e0e1690c
<template> <template>
<div class="menu-container"> <div>
<div class="menu"> <div style="width: 100%;width: 100%;position: fixed;top: 0;z-index: 1000;border-bottom: 1px solid #eee;">
<nuxt-link to="/"><img :src="logo" style="width:200px;max-height: 100px;" alt="欣新房车，让生活更美好"></nuxt-link> <div class="flex-aic-jcb" style="width: 1200px; margin: 0 auto;font-size:12px;height: 20px;">
<ul class="users"> <div>您好！欢迎进入欣新房车集团官方网站</div>
<li v-for="menu in menuList" :key="menu.id"> <div>服务热线： 400-0369-369</div>
<nuxt-link v-if="menu.link=='/'" :to="menu.link" :class="router== menu.link?'active':''">{{ menu.name }}</nuxt-link> </div>
<nuxt-link v-else :to="menu.link" :class="router.indexOf(menu.link) != -1?'active':''">{{ menu.name }}</nuxt-link> </div>
</li> <div class="menu-container">
</ul> <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 v-if="menu.link=='/'" :to="menu.link" :class="router== menu.link?'active':''">{{ menu.name }}</nuxt-link>
<nuxt-link v-else :to="menu.link" :class="router.indexOf(menu.link) != -1?'active':''">{{ menu.name }}</nuxt-link>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
......
nuxt.config.js
View file @ e0e1690c
...@@ -23,8 +23,7 @@ module.exports = { ...@@ -23,8 +23,7 @@ module.exports = {
loading: '~/components/loading.vue', loading: '~/components/loading.vue',
plugins: [ plugins: [
{ src: '~plugins/muse-ui.js', ssr: true }, { src: '~plugins/muse-ui.js', ssr: true }
{ src: '~plugins/util.js', ssr: false }
], ],
build: { build: {
......
pages/activity.vue
View file @ e0e1690c
...@@ -16,14 +16,14 @@ ...@@ -16,14 +16,14 @@
@click="bannerClick" @click="bannerClick"
class="mb-50"> class="mb-50">
</vehicle-banner> </vehicle-banner>
<div class="wrap"> <div class="wrap" style="background: #f1f1f1;">
<div class="total-div"> <div class="total-div">
共{{totalCount}}个活动 共{{totalCount}}个活动
</div> </div>
<ul class="campsiteDetail clearfix"> <ul class="campsiteDetail clearfix">
<li v-for="(item,idx) in dataDetail" :key="idx" style="margin-bottom:60px"> <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:50%;height: 100%" /> <img :src="item.banner" alt style="width:438px;height: 100%; max-height: 238px;" />
<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}}~{{item.endTime}}</div> <div>{{item.startTime}}~{{item.endTime}}</div>
...@@ -100,8 +100,8 @@ ...@@ -100,8 +100,8 @@
* 获取车型列表页banner * 获取车型列表页banner
*/ */
async getBanner(){ async getBanner(){
//首页banner //首活动banner
let tempBannerData = await axios.get( 'https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=0&platform=1'); let tempBannerData = await axios.get( 'https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=4&platform=1');
let banner = tempBannerData.data.data; let banner = tempBannerData.data.data;
this.bannerList = banner; this.bannerList = banner;
}, },
......
pages/activityList/_id.vue
View file @ e0e1690c
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<div class="content-r-link"> <div class="content-r-link">
<div class="content-detail" v-for="item in hotList" :key="item.id"> <div class="content-detail" v-for="item in hotList" :key="item.id">
<img :src="item.banner" style="width:100%;"/> <img :src="item.banner" style="width:100%;"/>
<div class="tc ellipsis 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>
</div> </div>
...@@ -173,6 +173,9 @@ ...@@ -173,6 +173,9 @@
padding: 10px; padding: 10px;
font-weight: normal; font-weight: normal;
} }
.tc {
text-align: center;
}
.swiper-container { .swiper-container {
height: auto; height: auto;
} }
...@@ -183,7 +186,7 @@ ...@@ -183,7 +186,7 @@
padding: 20px 0; padding: 20px 0;
width: 100%; width: 100%;
} }
.content-detail .title{ .content-detail .cc-title{
padding: 5px; padding: 5px;
} }
.swiper-wrapper-thu{ .swiper-wrapper-thu{
...@@ -208,16 +211,21 @@ ...@@ -208,16 +211,21 @@
text-align: center; text-align: center;
} }
.detail-new{ .detail-new{
width: 156px; /* 宽度 */ width: 156px;
padding: 5px 0; padding: 5px 0;
background: #1bbb9f; /* 背景颜色 */ cursor: pointer;
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */ font-family: Microsoft YaHei;
font-family: Microsoft YaHei; /* 设置字体 */ color: #1bbb9f;
color: #fff; /* 字体颜色 */ border: 1px solid #1bbb9f;
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
} }
.detail-new:hover{
color: #fff;
background: #1bbb9f;
}
.content-r-link{ .content-r-link{
margin-left: 3%; margin-left: 3%;
width: 20%; width: 20%;
......
pages/campsite.vue
View file @ e0e1690c
...@@ -68,7 +68,7 @@ export default { ...@@ -68,7 +68,7 @@ export default {
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件 window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
}, },
methods: { methods: {
chooseSelect(e) { chooseSelect(e) {
console.log(e.target.value); console.log(e.target.value);
this.listQuery.type = e.target.value; this.listQuery.type = e.target.value;
...@@ -76,7 +76,7 @@ export default { ...@@ -76,7 +76,7 @@ export default {
}, },
goDetails() { goDetails() {
console.log(2222222); console.log(2222222);
}, },
async getType() { async getType() {
const { const {
...@@ -114,7 +114,7 @@ export default { ...@@ -114,7 +114,7 @@ export default {
//           console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight); //           console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
// this.listQuery.pageNo++; // this.listQuery.pageNo++;
// this.getAll(); // this.getAll();
              }                 }  
} }
}, },
...@@ -151,10 +151,10 @@ export default { ...@@ -151,10 +151,10 @@ export default {
.clearfix { .clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
} }
.wrap { /*.wrap {*/
background-color: #fff; /*background-color: #fff;*/
padding: 0 200px; /*padding: 0 200px;*/
} /*}*/
.banner { .banner {
/* background-color: #fff; */ /* background-color: #fff; */
text-align: center; text-align: center;
...@@ -204,4 +204,4 @@ export default { ...@@ -204,4 +204,4 @@ export default {
color: white; /* 字体颜色 */ color: white; /* 字体颜色 */
margin-left: 10px; margin-left: 10px;
} }
</style> </style>
\ No newline at end of file
pages/campsiteDetails/_id.vue
View file @ e0e1690c
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
let user = data.data; let user = data.data;
let campsiteShop = user.campsiteShopCarouselDetailVos; let campsiteShop = user.campsiteShopCarouselDetailVos;
console.log(user); console.log(user);
if (!user) { if (!user) {
return error({ message: 'User not found', statusCode: 404 }) return error({ message: 'User not found', statusCode: 404 })
} }
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true); this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true);
this.lengthPic = length; this.lengthPic = length;
console.log(this.lengthPic); console.log(this.lengthPic);
}, },
}, },
mounted(){ mounted(){
...@@ -132,10 +132,10 @@ ...@@ -132,10 +132,10 @@
.clearfix { .clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
} }
.wrap { /*.wrap {*/
background-color: #fff; /*background-color: #fff;*/
padding: 0 200px; /*padding: 0 200px;*/
} /*}*/
</style> </style>
...@@ -169,4 +169,4 @@ ...@@ -169,4 +169,4 @@
color: white; /* 字体颜色 */ color: white; /* 字体颜色 */
margin-left: 10px; margin-left: 10px;
} }
</style> </style>
\ No newline at end of file
pages/index.vue
View file @ e0e1690c
...@@ -432,17 +432,6 @@ export default { ...@@ -432,17 +432,6 @@ export default {
position: relative; position: relative;
margin-bottom: 25px; margin-bottom: 25px;
} }
.more-container a{
position: absolute;
right:0;
color: #999;
text-decoration: none;
}
.more-container a:hover{
right: 5px;
color: #1bbb9f;
box-shadow: 5px 5px 5px #888888;
}
.v-type-active{ .v-type-active{
background: #1bbb9f; background: #1bbb9f;
color: #fff; color: #fff;
......
pages/news.vue
View file @ e0e1690c
...@@ -2,8 +2,39 @@ ...@@ -2,8 +2,39 @@
<div> <div>
<menu-modal></menu-modal> <menu-modal></menu-modal>
<div class="main-container"> <div class="main-container">
<div class="wrap"> <vehicle-banner
<p>这里是新闻动态</p> :list = "bannerList"
:looptime="looptime"
:width="width"
:height="height"
:background="background"
:color="color"
:fontSize="fontSize"
@prev="prev"
@next="next"
@change="changeBanner"
@click="bannerClick"
class="mb-50">
</vehicle-banner>
<div class="wrap" style="background: #f1f1f1;">
<div class="total-div">
共{{totalCount}}篇新闻资讯
</div>
<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%" />
<div style="margin-left:20px" class="active-r">
<h2 class="ellipsis2">{{item.title }}</h2>
<div class="ellipsis2 epitome">导语：{{item.epitome}}</div>
<div class="epitome">{{item.addTime}}</div>
</div>
</nuxt-link>
</li>
</ul>
<div class="right">
<nuxt-child :key="$route.params.id" />
</div>
</div> </div>
</div> </div>
<footer-modal></footer-modal> <footer-modal></footer-modal>
...@@ -11,23 +42,142 @@ ...@@ -11,23 +42,142 @@
</template> </template>
<script> <script>
import axios from 'axios' import axios from "axios";
import menuModal from "../components/menu" import menuModal from "../components/menu";
import footerModal from "../components/footer" import footerModal from "../components/footer";
import vehicleBanner from "../components/vehicleBanner"
export default { export default {
transition: 'bounce', transition: "bounce",
components: { components: {
menuModal, menuModal,
footerModal footerModal,
vehicleBanner
}, },
// async asyncData() { data() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1'); return {
// let cc = data.data; typeId: "营地类型",
// return { users: cc} dataType: [],
// }, totalCount: "",
head: { dataDetail: [],
title: '新闻动态' bannerList: [],//车型banner列表
listQuery: {
type: "",
pageNo: 1,
pageSize: 6
},
store: "",
curId: 0,
items1: {},
curId1: 0,
looptime: 4000, // 循环时间
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
};
},
created() {
this.getAll();
this.getBanner();
},
mounted() {
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
},
methods: {
// 点击下一页回调
prev () {
},
// 点击下一页回调
next () {
},
// 鼠标移入状态点回调
changeBanner () {
},
bannerClick () {
},
/**
* 获取车型列表页banner
*/
async getBanner(){
//首活动banner
let tempBannerData = await axios.get( 'https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=5&platform=1');
let banner = tempBannerData.data.data;
this.bannerList = banner;
},
chooseSelect(e) {
console.log(e.target.value);
this.listQuery.type = e.target.value;
this.getAll();
},
goDetails() {
console.log(2222222);
},
async getAll() {
let {
data: { data }
} = await axios.get(
`https://dev.dfangche.com/api/uccn/article/app/unauth/list?type=1&page=1&limit=10000`
);
// console.log(data);
this.totalCount = data.total;
this.dataDetail = data.list;
// this.dataDetail = this.dataDetail.push(data.data);
},
mounted() {
window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件
},
scrollHandle: function(e) {
//变量scrollTop是滚动条滚动时，距离顶部的距离
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
//滚动条到底部的条件
if(scrollTop+windowHeight+0.7>scrollHeight){
//写后台加载数据的函数
//           console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
// this.listQuery.pageNo++;
// this.getAll();
}
}
} }
} };
</script> </script>
<style scoped>
.active-r{
color: #333;
}
.campsiteDetail {
padding: 0;
margin: 0;
list-style: none;
}
.campsiteDetail li a {
padding: 0;
margin: 0;
list-style: none;
display: flex;
text-decoration: none;
}
.toDetail {
font-size: 16px;
}
.buttonDetails {
width: 156px; /* 宽度 */
height: 35px; /* 高度 */
border-width: 0px; /* 边框宽度 */
background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
margin-left: 10px;
}
</style>
pages/newsList/_id.vue 0 → 100644
View file @ e0e1690c
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container" style="margin-top: 110px;">
<div class="wrap">
<div class="bread-menu">
<nuxt-link to="/">首页></nuxt-link>
<nuxt-link to="/news">新闻动态></nuxt-link>
<span>{{detail.title}}</span>
</div>
<div class="content">
<div style="width: 100%;padding-top: 20px;">
<h3 class="tc">{{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 class="flex-aic-jcb more-container new-cc">
<div style="width: 1100px;">
<div>推荐咨讯</div>
</div>
<nuxt-link to="/news"><div>MORE</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%;"/>
<div style="margin-left: 20px;">
<div class="ellipsis c-title">{{item.title}}</div>
<div class="ellipsis2">导语：{{item.epitome}}</div>
<div>{{item.addTime}}</div>
</div>
</nuxt-link>
</div>
</div>
</div>
<footer-modal></footer-modal>
</div>
</template>
<script>
import axios from 'axios'
import menuModal from "../../components/menu"
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: {
menuModal,
footerModal
},
data(){
return{
lengthPic:0,
preIndex: 0,//当前轮播选中图
}
},
validate ({ params }) {
console.log(params.id);
return !isNaN(+params.id)
},
async asyncData({ env, params, error}) {
function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
}
}
return fmt
}
function padLeftZero(str) {
return ('00' + str).substr(str.length)
}
function timestamp2Date(timestamp) {
let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
}
const { data } = await axios.get( env.host + '//api/uccn/article/app/unauth/one?id='+params.id+"&urlType=1");
let detail = data.data;
detail.startTime = timestamp2Date(detail.startTime);
detail.endTime = timestamp2Date(detail.endTime);
if (!detail) {
return error({ message: 'detail not found', statusCode: 404 })
}
let tempBannerData = await axios.get( env.host + '/api/uccn/article/app/unauth/three/1');
let hot = tempBannerData.data.data;
return {detail: detail, hotList: hot}
},
methods:{
changeImgIndex(index,length){
this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true);
this.lengthPic = length;
console.log(this.lengthPic);
},
},
mounted(){
let t = this;
let galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 5,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
let galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
on: {
slideChangeTransitionEnd: function () {
t.preIndex = this.activeIndex-1;
if(t.preIndex == 5){
t.preIndex = 0
}
console.log(this.activeIndex)
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
},
head: {
title: '营地详情'
}
}
</script>
<style scoped>
.r-content{
margin-left: 20px;
}
.r-content p{
padding: 5px 0;
}
.is-fixed{
position: fixed;
width: 1200px;
background: #fff;
border-bottom: 10px solid #ccc;
margin-left: -30px;
padding-left: 0;
top: 90px;
}
.tc {
text-align: center;
}
.new-cc{
background: #fff;
margin-bottom:10px;
padding: 20px;
}
.content{
display: flex;
justify-content: space-between;
}
.content-t{
border-bottom: 5px solid #1bbb9f;
width: 100px;
text-align: center;
padding: 10px;
font-weight: normal;
}
.swiper-container {
height: auto;
}
.gallery-top img{
width: 100%;
}
.content-detail{
padding: 20px 0;
width: 100%;
}
.content-detail .c-title{
padding: 5px;
}
/*.content-new{*/
/*background: #fff;*/
/*padding: 10px 20px;*/
/*box-shadow: 5px 5px 5px #ccc;*/
/*margin-bottom: 10px;*/
/*}*/
.content-new a{
display: flex;
color: #333;
}
.swiper-wrapper-thu{
/*max-width: 293px;*/
margin: 0 !important;
}
.swiper-wrapper-thu img{
width: 100%;
border: 2px solid #fff;
}
.swiper-wrapper-thu img.active{
border: 2px solid #1bbb9f;
padding: 5px;
}
.buttonDetails {
width: 156px; /* 宽度 */
padding: 10px 0;
background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
font-family: Microsoft YaHei; /* 设置字体 */
color: #fff; /* 字体颜色 */
text-align: center;
}
.content-r-link{
margin-left: 3%;
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
pages/newsList/newsList.vue 0 → 100644
View file @ e0e1690c
<template>
<h2>Please select an user.</h2>
</template>
<script>
export default {
head: {
title: 'Please select an user'
}
}
</script>
<style scoped>
h2 {
text-align: center;
margin-top: 100px;
font-family: sans-serif;
}
</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