新闻-活动

assets/main.css

 body {
-    background: #eee;
+    background: #f2f2f2;
     height: 100%;
     width: 100%;
 }
@@ -27,6 +27,18 @@ a{
   text-decoration: none;
 }
 
+h2{
+  font-size: 20px;
+  color: #333;
+  font-weight: normal;
+}
+
+.epitome{
+  font-size: 14px;
+  margin-top: 20px;
+  color: #666;
+}
+
 .container {
   /*text-align: center;*/
   font-size: 16px;
@@ -65,11 +77,35 @@ a{
   width: 1200px;
   margin: 0 auto 30px auto;
   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{
-  padding-bottom: 30px;
+  margin-bottom: 20px;
+  background: #fff;
+  padding: 10px;
+}
+.buttonDetails:hover{
+  background: #1D9D87 !important;
 }
 .ellipsis {
   overflow: hidden;white-space: nowrap;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all;

components/menu.vue

 <template>
+  <div>
+    <div style="width: 100%;width: 100%;position: fixed;top: 0;z-index: 1000;border-bottom: 1px solid #eee;">
+      <div class="flex-aic-jcb" style="width: 1200px; margin: 0 auto;font-size:12px;height: 20px;">
+        <div>您好！欢迎进入欣新房车集团官方网站</div>
+        <div>服务热线： 400-0369-369</div>
+      </div>
+    </div>
     <div class="menu-container">
       <div class="menu">
         <nuxt-link to="/"><img :src="logo" style="width:200px;max-height: 100px;" alt="欣新房车，让生活更美好"></nuxt-link>
@@ -10,6 +17,8 @@
         </ul>
       </div>
     </div>
+  </div>
+
 </template>
 
 <script>

nuxt.config.js

@@ -23,8 +23,7 @@ module.exports = {
     loading: '~/components/loading.vue',
 
     plugins: [
-      { src: '~plugins/muse-ui.js', ssr: true },
-      { src: '~plugins/util.js', ssr: false }
+      { src: '~plugins/muse-ui.js', ssr: true }
     ],
     build: {
 

pages/activity.vue

@@ -16,14 +16,14 @@
         @click="bannerClick"
         class="mb-50">
       </vehicle-banner>
-      <div class="wrap">
+      <div class="wrap" style="background: #f1f1f1;">
         <div class="total-div">
           共{{totalCount}}个活动
         </div>
         <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">
-              <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">
                 <h2 class="ellipsis2">{{item.title }}</h2>
                 <div>{{item.startTime}}~{{item.endTime}}</div>
@@ -100,8 +100,8 @@
        * 获取车型列表页banner
        */
       async getBanner(){
-        //首页banner
-        let tempBannerData = await axios.get( 'https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=0&platform=1');
+        //首活动banner
+        let tempBannerData = await axios.get( 'https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=4&platform=1');
         let banner = tempBannerData.data.data;
         this.bannerList = banner;
       },

pages/activityList/_id.vue

@@ -31,7 +31,7 @@
           <div class="content-r-link">
             <div class="content-detail" v-for="item in hotList" :key="item.id">
               <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>
             </div>
           </div>
@@ -173,6 +173,9 @@
     padding: 10px;
     font-weight: normal;
   }
+  .tc {
+    text-align: center;
+  }
   .swiper-container {
     height: auto;
   }
@@ -183,7 +186,7 @@
     padding: 20px 0;
     width: 100%;
   }
-  .content-detail .title{
+  .content-detail .cc-title{
     padding: 5px;
   }
   .swiper-wrapper-thu{
@@ -208,16 +211,21 @@
     text-align: center;
   }
   .detail-new{
-    width: 156px; /* 宽度 */
+    width: 156px;
     padding: 5px 0;
-    background: #1bbb9f; /* 背景颜色 */
-    cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
-    font-family: Microsoft YaHei; /* 设置字体 */
-    color: #fff; /* 字体颜色 */
+    cursor: pointer;
+    font-family: Microsoft YaHei;
+    color: #1bbb9f;
+    border: 1px solid #1bbb9f;
     text-align: center;
     margin: 0 auto;
   }
 
+  .detail-new:hover{
+    color: #fff;
+    background: #1bbb9f;
+  }
+
   .content-r-link{
     margin-left: 3%;
     width: 20%;

pages/campsite.vue

@@ -151,10 +151,10 @@ export default {
 .clearfix {
   *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
 }
-.wrap {
-  background-color: #fff;
-  padding: 0 200px;
-}
+/*.wrap {*/
+  /*background-color: #fff;*/
+  /*padding: 0 200px;*/
+/*}*/
 .banner {
   /* background-color: #fff; */
   text-align: center;

pages/campsiteDetails/_id.vue

@@ -132,10 +132,10 @@
 .clearfix {
   *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
 }
-.wrap {
-  background-color: #fff;
-  padding: 0 200px;
-}
+/*.wrap {*/
+  /*background-color: #fff;*/
+  /*padding: 0 200px;*/
+/*}*/
 
 </style>
 

pages/index.vue

@@ -432,17 +432,6 @@ export default {
     position: relative;
     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{
     background: #1bbb9f;
     color: #fff;

pages/news.vue

@@ -2,8 +2,39 @@
   <div>
     <menu-modal></menu-modal>
     <div class="main-container">
-      <div class="wrap">
-        <p>这里是新闻动态</p>
+      <vehicle-banner
+        :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>
     <footer-modal></footer-modal>
@@ -11,23 +42,142 @@
 </template>
 
 <script>
-  import axios from 'axios'
-  import menuModal from "../components/menu"
-  import footerModal from "../components/footer"
+  import axios from "axios";
+  import menuModal from "../components/menu";
+  import footerModal from "../components/footer";
+  import vehicleBanner from "../components/vehicleBanner"
   export default {
-    transition: 'bounce',
+    transition: "bounce",
     components: {
       menuModal,
-      footerModal
+      footerModal,
+      vehicleBanner
+    },
+    data() {
+      return {
+        typeId: "营地类型",
+        dataType: [],
+        totalCount: "",
+        dataDetail: [],
+        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();
       },
-//    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: '新闻动态'
+      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>
 
+<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

+<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

+<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>