|
|
@@ -0,0 +1,84 @@
|
|
|
+<template>
|
|
|
+ <div class="news acea-row row-between-wrapper">
|
|
|
+ <div class="pictrue"><img src="@assets/images/news.png" /></div>
|
|
|
+ <div class="swiper-no-swiping new-banner">
|
|
|
+ <swiper v-swiper:
|
|
|
+ class="swiper-wrapper"
|
|
|
+ :options="swiperRoll"
|
|
|
+ ref="rollSwiper"
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ class="swiper-slide"
|
|
|
+ v-for="(item, index) in roll"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <router-link
|
|
|
+ :to="item.wap_url ? item.wap_url : ''"
|
|
|
+ class="acea-row row-between-wrapper"
|
|
|
+ >
|
|
|
+ <div class="text acea-row row-between-wrapper">
|
|
|
+ <div class="label" v-if="item.show === '是'">最新</div>
|
|
|
+ <div class="newsTitle line1">{{ item.info }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="iconfont icon-xiangyou"></div>
|
|
|
+ </router-link>
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { swiper, swiperSlide } from "vue-awesome-swiper";
|
|
|
+export default {
|
|
|
+ name: "News",
|
|
|
+ props: {
|
|
|
+ roll: [],
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ swiper,
|
|
|
+ swiperSlide,
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route(n) {
|
|
|
+ if (n.name === "Index") {
|
|
|
+ this.$refs.rollSwiper.swiper.autoplay.start();
|
|
|
+ } else {
|
|
|
+ this.$refs.rollSwiper.swiper.autoplay.stop();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ swiperRoll: {
|
|
|
+ direction: "vertical",
|
|
|
+ autoplay: {
|
|
|
+ disableOnInteraction: false,
|
|
|
+ delay: 2000
|
|
|
+ },
|
|
|
+ loop: true,
|
|
|
+ speed: 1000,
|
|
|
+ observer: true,
|
|
|
+ observeParents: true
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.news{height:0.77rem;border-top:1px solid #f4f4f4;padding:0 0.3rem;box-shadow:0 0.1rem 0.3rem #f5f5f5;
|
|
|
+ -webkit-box-shadow:0 0.1rem 0.3rem #f5f5f5;-moz-box-shadow:0 0.1rem 0.3rem #f5f5f5;-o-box-shadow:0 0.1rem 0.3rem #f5f5f5;}
|
|
|
+.news .pictrue{width:1.24rem;height:0.28rem;border-right:1px solid #ddd;padding-right:0.23rem;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;}
|
|
|
+.news .pictrue img{width:100%;height:100%;display:block;}
|
|
|
+.news .new-banner{width:5.23rem;overflow:hidden;height:0.77rem;}
|
|
|
+.news .new-banner .swiper-slide{height:100%;}
|
|
|
+.news .new-banner .text{width:4.8rem;height:0.77rem;}
|
|
|
+.news .new-banner .text .label{font-size:0.2rem;color:#ff4c48;width:0.68rem;height:0.34rem;border-radius:0.2rem;
|
|
|
+ text-align:center;line-height:0.34rem;border:0.02rem solid #ff4947;}
|
|
|
+.news .new-banner .text .newsTitle{width:3.97rem;font-size:0.24rem;color:#666;}
|
|
|
+.news .new-banner .iconfont{font-size:0.28rem;color:#888;}
|
|
|
+</style>
|