x

src/assets/css/news/index.less

+.news{
  ul,li{font-family: "微软雅黑"!important;}
  .borderBottom{border-bottom:1px solid #e5e5e5;}

  .navList{
    border-bottom:1px solid #e5e5e5;
    padding:0 10px;
    clear:both;
    height:40px;
    line-height:40px;
    font-size: 14px;
    p{
      text-align:center;width:33.33%;color:#333;float: left;cursor: pointer;height:40px;
      line-height:40px;
    }
    p.act{color:#e10601;border-bottom:2px solid #e10601;}
  }
  .navList44{
    p{
      width:25%;
    }
  }
  .listBox{
    li{
      padding:10px;
      height:100px;
      .borderBottom;
      box-sizing: border-box;
      img{height:75px;width:100px;float:left;border:0px;outline: none;}
      .boxgrt{height:75px;width:235px;float:right;
        .title{
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color:#333;font-size: 0.32rem;
          font-weight: bold;
          height:50px;
          line-height: 25px;
        }
        .titleLook{font-size:14px;color:#999;margin-top: 5px;}
      }
    }
  }


}
\ No newline at end of file

src/assets/css/news/index.min.css

+.news ul,.news li{font-family:"微软雅黑" !important}.news .borderBottom{border-bottom:1px solid #e5e5e5}.news .navList{border-bottom:1px solid #e5e5e5;padding:0 10px;clear:both;height:40px;line-height:40px;font-size:14px}.news .navList p{text-align:center;width:33.33%;color:#333;float:left;cursor:pointer;height:40px;line-height:40px}.news .navList p.act{color:#e10601;border-bottom:2px solid #e10601}.news .navList44 p{width:25%}.news .listBox li{padding:10px;height:100px;border-bottom:1px solid #e5e5e5;box-sizing:border-box}.news .listBox li img{height:75px;width:100px;float:left;border:0px;outline:none}.news .listBox li .boxgrt{height:75px;width:235px;float:right}.news .listBox li .boxgrt .title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#333;font-size:.32rem;font-weight:bold;height:50px;line-height:25px}.news .listBox li .boxgrt .titleLook{font-size:14px;color:#999;margin-top:5px}/*# sourceMappingURL=index.min.css.map */
\ No newline at end of file

src/assets/css/news/index.min.css.map

+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,KACE,IADF,KACK,CAAA,GAAG,YAAa,MAAb,YADR,KAEE,eAAc,gCAFhB,KAIE,UACE,+BAAA,CACA,cAAA,CACA,UAAA,CACA,WAAA,CACA,gBAAA,CACA,eAVJ,KAIE,SAOE,GACE,iBAAA,CAAkB,YAAA,CAAa,UAAA,CAAW,UAAA,CAAY,cAAA,CAAgB,WAAA,CACtE,iBAbN,KAIE,SAWE,EAAC,KAAK,aAAA,CAAc,gCAfxB,KAiBE,WACE,GACE,UAnBN,KAsBE,SACE,IACE,YAAA,CACA,YAAA,CAvBU,+BAAA,CAyBV,sBA3BN,KAsBE,SACE,GAKE,KAAI,WAAA,CAAY,WAAA,CAAY,UAAA,CAAW,UAAA,CAAW,aA5BxD,KAsBE,SACE,GAME,SAAQ,WAAA,CAAY,WAAA,CAAY,YA7BtC,KAsBE,SACE,GAME,QACE,QACE,eAAA,CACA,sBAAA,CACA,mBAAA,CACA,oBAAA,CACA,2BAAA,CACA,UAAA,CAAW,gBAAA,CACX,gBAAA,CACA,WAAA,CACA,iBAvCV,KAsBE,SACE,GAME,QAYE,YAAW,cAAA,CAAe,UAAA,CAAW","file":"index.min.css"}
\ No newline at end of file

src/views/news/Detail.vue

+<template>
+    <section class="news-detail">
+        我是新闻详情页面
+    </section>
+</template>
+
+<script>
+    export default {
+        name: "detail"
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/news/Index.vue

+<template>
+    <section class="news">
+        <Header :title="title" :meaushow='meaushow'></Header>
+        <van-swipe :autoplay="3000" :height="bannerHeight">
+            <van-swipe-item v-for="(item, index) in rollbanner" :key="index">
+                <a :href="item.url | urlPatg('news-banner-'+(index+1))" :target="item.window_open > 0 ?'_blank':'_self'">
+                    <img :src="item.images" class="">
+                </a>
+                <img v-lazy="item" />
+            </van-swipe-item>
+        </van-swipe>
+        <div v-if="cat_list.length>0" class="navList clearfix" :class="{'navList44':cat_list.length==4}">
+            <p @click="tab(index)"  class="fl" :class="{'act':act==index}" v-for="(item,index) in cat_list" :key="index">
+                {{item.cat_name}}
+            </p>
+        </div>
+        <ul class="listBox clr" >
+            <van-list v-model="loading" :loading="loadStatus" :finished="finished" :offset="10"
+                      finished-text="没有更多了" :immediate-check="immediateCheck" @load="onLoad">
+                <router-link tag="li" :to="{'name':'NewsDetail'}" v-for="(item,index) in content_list" :key="index">
+                    <img :src="item.litpic" :alt="item.title">
+                    <div class="boxgrt">
+                        <h1 class="title">{{item.title}}</h1>
+                        <p class="titleLook clearfix">
+                            <span class="fl">{{item.writer}}</span>
+                            <span class="fr">{{item.click}}浏览</span>
+                        </p>
+                    </div>
+                </router-link>
+            </van-list>
+        </ul>
+    </section>
+</template>
+
+<script>
+
+    import Vue from 'vue';
+    import {mapState} from 'vuex'
+    import {Swipe,SwipeItem,Lazyload,List} from 'vant';
+    import Header from '@/views/common/Header.vue';
+    Vue.use(Swipe).use(SwipeItem).use(Lazyload).use(List);
+
+    export default {
+        name: 'news',
+        data() {
+            return {
+                title:"猎芯网-新闻列表",
+                p: 1,
+                cat_id:11,
+                bannerHeight:180,
+                meaushow:true,
+                loading: false,
+                limit:10,
+                act:0,
+                immediateCheck:false
+
+            }
+        },
+        computed: {
+            ...mapState({
+                rollbanner: state => state.news.rollbanner,
+                cat_list: state => state.news.cat_list,
+                content_list:state=>state.news.content_list,
+                loadStatus: state => state.news.loadStatus,
+                finished: state => state.news.finished,
+                totalLimit:state=>state.news.totalLimit
+            })
+        },
+        watch: {
+            loadStatus(val) {
+                console.log(val)
+                this.loading=val;
+            }
+        },
+        created() {
+                this.getData();
+        },
+        methods: {
+            getData() {
+                this.$store.dispatch({
+                    type: 'newsArticle',
+                    type_id: this.cat_id,
+                    p: this.p,
+                    limit:this.limit
+
+                })
+            },
+            tab(index){
+                if(this.act==index){return}
+                this.act=index;
+                this.p=1;
+            },
+            onLoad() {
+                console.log(0)
+                if (this.p < this.totalLimit) {
+                    this.p++;
+                    this.getData();
+                }
+
+            }
+        },
+        components: {
+            Header
+        }
+    }
+</script>
+
+
+<style scoped>
+    @import "../../assets/css/news/index.min.css";
+</style>
\ No newline at end of file

view/index.html

@@ -27,7 +27,7 @@
     <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js" type="text/javascript" charset="utf-8"></script>
     <script src="//szh5static.ichunt.com/static/js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="//szh5static.ichunt.com/static/js/shence.min.js" type="text/javascript" charset="utf-8"></script>
-<link href="//szh5static.ichunt.com/0.js" rel="prefetch"><link href="//szh5static.ichunt.com/1.js" rel="prefetch"><link href="//szh5static.ichunt.com/2.js" rel="prefetch"><link href="//szh5static.ichunt.com/3.js" rel="prefetch"><link href="//szh5static.ichunt.com/4.js" rel="prefetch"><link href="//szh5static.ichunt.com/5.js" rel="prefetch"><link href="//szh5static.ichunt.com/6.9de2dd3c4689447c2fcd.hot-update.js" rel="prefetch"><link href="//szh5static.ichunt.com/6.js" rel="prefetch"><link href="//szh5static.ichunt.com/7.js" rel="prefetch"><link href="//szh5static.ichunt.com/app.js" rel="preload" as="script"></head>
+<link href="//szh5static.ichunt.com/0.js" rel="prefetch"><link href="//szh5static.ichunt.com/1.js" rel="prefetch"><link href="//szh5static.ichunt.com/2.js" rel="prefetch"><link href="//szh5static.ichunt.com/3.js" rel="prefetch"><link href="//szh5static.ichunt.com/4.js" rel="prefetch"><link href="//szh5static.ichunt.com/5.js" rel="prefetch"><link href="//szh5static.ichunt.com/6.js" rel="prefetch"><link href="//szh5static.ichunt.com/7.js" rel="prefetch"><link href="//szh5static.ichunt.com/app.js" rel="preload" as="script"></head>
 <body class="boxsiz">
 <noscript>
     <strong>网站出现了一点小问题，正在紧急修复中.......</strong>