add 新闻动态

Andy
1 parent 9ba24acd
Showing 2 changed files with 208 additions and 1 deletions
webintroduce/src/assets/images/point.png
webintroduce/src/views/home.vue
@@ -74,6 +74,24 @@
         </ul>
       </div>
     </div>
+    <!--新闻动态-->
+    <div class="features index-news-section">
+      <div class="section-title">
+        <h2>新闻动态</h2>
+      </div>
+      <div class="news-bd">
+        <div class="focus swiper-container swiper-container-horizontal" id="swiper-container-news">
+        </div>
+        <div class="newslist">
+          <ul>
+            <li v-for="(news,index) in newsLists" :key="index" @click="">
+              <p class="pos-rel red-slide"> <a data-href="" title="">{{news.newsTitle}}<span class="pos-abs" style="bottom: 0px;right: 2px;color: rgba(0,0,0,0.3);font-size: 12px">{{news.time}}</span> </a>
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
  
@@ -100,7 +118,69 @@ export default {
           disableOnInteraction: false,
           delay: 3000
         },
-      }
+      },
+      newsLists:[
+        {
+          "href":"https://mp.weixin.qq.com/s/NcWXfcxjy5t-sqG2yFg6JQ",
+          "newsTitle":"【公司要闻】中兴智能交通建设甘肃省周边“一带一路”沿线城市的智慧停车",
+          "img":"http://www.zte-its.com/Upload/2019-01/20190107134910953.jpg",
+          "time":"2019-01-06"
+        },
+        {
+          "href":"https://mp.weixin.qq.com/s/bO_1as7-8enGR7g4sI_6lw",
+          "newsTitle":"【公司要闻】年度盘点丨2018，中兴智能交通铸就辉煌",
+          "img":"http://www.zte-its.com/Upload/2019-01/20190107120328342.jpg",
+          "time":"2018-12-30"
+        },
+        {
+          "href":"https://mp.weixin.qq.com/s/ZJCdWCWCkrxtmOCep9fvwQ",
+          "newsTitle":"【公司要闻】中兴智能交通荣获”2018中国城市无人化停车十大创新方案”称号",
+          "img":"http://www.zte-its.com/Upload/2019-01/20190114111641907.jpg",
+          "time":"2019-01-14"
+        },
+        {
+          "href":"https://mp.weixin.qq.com/s/ilplSVvIBUt0sDtqTgsgbw",
+          "newsTitle":"【公司要闻】2018年年底，赤峰智慧停车项目正式上线运营",
+          "img":"http://www.zte-its.com/ckfinder/userfiles/images/Snap2(34).jpg",
+          "time":"2018-12-26"
+        },
+        {
+          "href":"https://mp.weixin.qq.com/s/j4FJmW-dAMAKK8WBilHSzw",
+          "newsTitle":"【公司要闻】中兴智能交通应邀出席“2018第三届中国物联网国际峰会”",
+          "img":"http://www.zte-its.com/Upload/2018-05/20180529172415999.jpg",
+          "time":"2018-05-15"
+        },
+        {
+          "href":"https://mp.weixin.qq.com/s/Q3V4F0PHm0cS7a-zlXx6OA",
+          "newsTitle":"【行业动态】贵州机动车停放收费新规5月起试行 小区停车费由业主大会决定",
+          "img":"http://www.zte-its.com/Upload/2018-08/20180808173733771.jpg",
+          "time":"2018-04-24"
+        },
+        {
+          "href":"https://mp.weixin.qq.com/s/BEyfUDkfrZqLokZxoKp04Q",
+          "newsTitle":"【行业动态】广州停车场条例10月起施行 小区停车收费标准先议价",
+          "img":"http://www.zte-its.com/Upload/2018-09/20180918095140370.jpg",
+          "time":"2018-04-24"
+        },
+        {
+          "href":"https://mp.weixin.qq.com/s/-ltsBzboxdeCzwz4-nOy0Q",
+          "newsTitle":"【行业动态】2018雄安新区停车设备设施投资建设高峰论坛暨博览会隆重召开！",
+          "img":"https://mmbiz.qpic.cn/mmbiz_jpg/eRs8EuRTNC1tBsAtYFuuFx3SgKrPpkMYib3bP9kBKnxqcwcosVOUc5iaF4hQ9JkHfZib0SWuANXAuzI8u4vzWgDFA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1",
+          "time":"2018-04-20"
+        },
+        {
+          "href":"https://mp.weixin.qq.com/s/3tWOAvnXl5T78TzBPgWszA",
+          "newsTitle":"【行业动态】滴滴发布企业公民报告：让城市交通更智慧 运行更高效",
+          "img":"https://mmbiz.qpic.cn/mmbiz_jpg/uWQ5Iz1kD2bHvLt6DEdN4ib00PeTsmxiaTye2BHMuxXSD7Z51HnBicxNc53FeZceD2ZiaJ4Eq4ft9cHY9Uib1CXNzIA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1",
+          "time":"2018-04-20"
+        }, {
+          "href":"https://mp.weixin.qq.com/s/ZrDwirjt0JTntmcCI5L4Ag",
+          "newsTitle":"【行业动态】昆明停车管理新规 力图破解“圈地收费”乱象",
+          "img":"http://www.zte-its.com/Upload/2018-05/20180529173902781.jpg",
+          "time":"2018-04-20"
+        }
+
+      ]
     }
   },
   computed: {
@@ -305,4 +385,131 @@ export default {
       }
     }
   }
+
+  /*news */
+  .section-title{
+    text-align: center;
+    margin-bottom: 20px;
+    padding: 0 190px;
+  }
+  .section-title h2{
+    font-size:36px;
+    font-weight: 500;
+    text-transform:uppercase;
+    padding-bottom:15px;
+    position:relative;
+  }
+
+  /*news 新闻中心*/
+  .index-news-section .news-bd{
+    width: 1200px;
+    overflow: hidden;
+    margin: 0 auto;
+  }
+  .index-news-section .focus {
+    width: 476px !important;
+    height: 289px !important;
+    float: left;
+    position: relative;
+  }
+  .index-news-section .newslist {
+    width: 715px;
+    float: left;
+    margin-bottom: 10px;
+  }
+  .index-news-section .newslist ul {
+    padding: 15px 0;
+    overflow: hidden;
+    list-style: initial;
+    color: #797979;
+  }
+  .index-news-section .newslist li {
+    width: 326px;
+    height: 45px;
+    line-height: 22px;
+    float: left;
+    margin-left: 30px;
+    list-style: none;
+    text-align: left;
+  }
+  .index-news-section .newslist li {
+    margin-bottom: 10px;
+    background-image: url(../assets/images/point.png);
+    background-repeat: no-repeat;
+    background-position: 5px 7px;
+  }
+  .index-news-section .newslist li p {
+    padding-left: 10px;
+    margin-left: 8px;
+    height: 44px;
+  }
+  .newslist li a{
+    color: rgba(0,0,0,.6);
+    display: block;
+  }
+  .pos-rel{
+    position: relative;
+  }
+  .pos-abs{
+    position: absolute;
+  }
+  /*轮播 */
+  .news_a {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    width: 100%;
+    height: 272px;
+  }
+  .news_title {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    padding: 10px;
+    width: 100%;
+    background: rgba(0,0,0,0.5);
+    color: #fff;
+    font-size: 16px;
+    border-radius: 0 0 5px 5px;
+    text-align: left;
+  }
+  .news_title p {
+    margin: 0;
+    width: 65%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .news_a img {
+    width: 100%;
+    height: 272px;
+  }
+  .pagination{
+    position: absolute;
+    z-index: 20;
+    right: 10px;
+    bottom: 10px;
+    margin: 0;
+    height: 20px;
+  }
+  .news-pagination{
+    right: 0px !important;
+    bottom: 30px !important;
+    width: 120px !important;
+    margin-left: 340px;
+  }
+  .news-pagination .swiper-pagination-bullet{
+    width:28px;
+    height:4px;
+    background:rgba(255,255,255,1);
+    opacity: 0.5;
+    border-radius:0;
+  }
+  .news-pagination .swiper-pagination-bullet-active{
+    background:rgba(255,255,255,1);
+    opacity: 1 !important;
+  }
+  .red-slide{
+    cursor: pointer;
+  }
 </style>