epmet-oper-pc-chengyang/epmet-oper-web/src/components/wx-index/voice.vue

<template>
  <div class="mw-cpt a-fade-in"
       :ref="item.tempOnlyId"
       :title="item.componentName"
       :class="{'z-focused': isFocused}"
       @click="focusCpt">

    <!-- 党建声音-轮播图组件 -->
    <div class="voice_swiper"
         v-if="item.componentFrontId==='resi-topList-voice-hotNewsSwiper'">
      <div class="d-cpt-wrap">
        <div class="d-cpt-subwrap">
          <img v-if="item.configuration.pic"
               :src="item.configuration.pic">
          <img v-else
               src="@/assets/img/modules/wx-mini/index-set/page/swiper-bg.png">
          <!-- <div>
            <span>{{ item.demoData.title }}</span>
            <i></i>
            <i></i>
            <i></i>
            <i class="z-on"></i>
          </div> -->
        </div>
      </div>
    </div>

    <!-- 党建声音-最新发布 -->
    <div v-else-if="item.componentFrontId==='resi-functionList-voice-newsList'">
      <div class="voice_m-news">

        <div class="cpt-title">
          <div class="cpt-title-t">{{item.configuration.title}}</div>

        </div>

        <div class="list">
          <div class="item"
               :key="subindex"
               v-for="(subitem, subindex) in item.demoData.list">

            <div class="left">
              <div class="title">{{ subitem.title }}</div>
              <div class="info">
                <span>{{ subitem.date }}</span>
                <img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
                <span class="publishname_text">{{ subitem.author }}</span>
              </div>

            </div>

            <div class="right">
              <!-- <img 
          src="/assets/images/index/wailian-bg.jpg"
          mode="aspectFill" /> -->
              <img v-if="subitem.pic"
                   :src="subitem.pic">
              <img v-else
                   src="@/assets/img/modules/wx-mini/index-set/page/news-pic2.png">

            </div>

          </div>
        </div>

      </div>
    </div>

    <!-- 党建声音-最新发布（带标签） -->
    <div v-else-if="item.componentFrontId==='resi-functionList-voice-listwithtag'">

      <div class="voice_m-news">
        <div class="cpt-title">
          <div class="cpt-title-t">{{item.configuration.title}}</div>

        </div>

        <div class="tags">

          <div :class="['tag',{'z-on':subindex==0}]"
               :key="subindex"
               v-for="(subitem, subindex) in item.configuration.tagList">
            <div class="item">{{subitem}}</div>
            <div v-if="subindex!==item.configuration.tagList.length-1"
                 class="line"></div>

          </div>

        </div>

        <div class="list">
          <div class="item"
               :key="subindex"
               v-for="(subitem, subindex) in item.demoData.list">

            <div class="left">
              <div class="title">{{ subitem.title }}</div>
              <div class="info">
                <span>{{ subitem.date }}</span>
                <img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
                <span class="publishname_text">{{ subitem.author }}</span>
              </div>

            </div>

            <div class="right">
              <img v-if="subitem.pic"
                   :src="subitem.pic">
              <img v-else
                   src="@/assets/img/modules/wx-mini/index-set/page/news-pic2.png">

            </div>

          </div>
        </div>

      </div>

    </div>

    <!-- 党建声音-专题文章 -->
    <div v-else-if="item.componentFrontId==='resi-functionList-voice-speciallist'">

      <div class="voice_m-news">
        <div class="cpt-title">
          <div class="cpt-title-t">党建声音</div>
        </div>

        <div class="tags"
             v-if="item.configuration.tagList">
          <div :class="['tag',{'z-on':subindex===0}]"
               :key="subindex"
               v-for="(subitem, subindex) in item.configuration.tagList">
            <div class="item">{{subitem}}</div>
            <div v-if="subindex!==tagList.length-1"
                 class="line"></div>
          </div>
        </div>

        <div class="list">
          <div class="item"
               :key="subindex"
               v-for="(subitem, subindex) in item.demoData.list">

            <div class="left">
              <div class="title">{{ subitem.title }}</div>
              <div class="info">
                <span>{{ subitem.date }}</span>
                <img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
                <span class="publishname_text">{{ subitem.author }}</span>
              </div>

            </div>

            <div class="right">
              <img v-if="subitem.pic"
                   :src="subitem.pic">
              <img v-else
                   src="@/assets/img/modules/wx-mini/index-set/page/news-pic2.png">

            </div>

          </div>
        </div>

      </div>

      <!-- <div class="content">

        <div class="rank_tabs"
             v-if="item.configuration.tagList">
          <div :class="[{'title_focus':subindex===0},{'title_other':subindex>0}]"
               :key="subindex"
               v-for="(subitem, subindex) in item.configuration.tagList">
            <span>{{subitem}}</span>
            <div v-if="subindex===0"
                 class="red_line"></div>
          </div>
        </div>
        <div class="rank_tabs"
             v-else>
          <div class="title_focus">
            <span>党建动态</span>
            <div class="red_line"></div>
          </div>
          <div class="title_other">疫情防控</div>
          <div class="title_other">通知公告</div>
          <div class="title_other">生活服务</div>
        </div>

        <div class="list">
          <div class="item"
               :key="subindex"
               v-for="(subitem, subindex) in item.demoData.list">
            <div class="news_title">{{ subitem.title }}</div>
            <img v-if="subitem.pic"
                 :src="subitem.pic">
            <img v-else
                 src="@/assets/img/modules/wx-mini/index-set/page/news-pic2.png">
            <div class="news_grid">
              <img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
              <span>来源：{{ subitem.author }}</span>
              <span class="f-fr">{{ subitem.date }}</span>
            </div>
          </div>
        </div>

        <div class="more">
          <div class="more_content">查看更多</div>

        </div>
      </div> -->
    </div>

    <!-- 党建声音-特色文章组件 -->
    <div class="voice_news"
         v-else-if="item.componentFrontId==='resi-functionList-voice-newsList2'">
      <div class="content">
        <div v-if="item.configuration.title"
             class="d-cpt-title">{{item.configuration.title}}</div>
        <div v-else
             class="d-cpt-title">特色文章</div>
        <div class="list">
          <div class="item"
               :key="subindex"
               v-for="(subitem, subindex) in item.demoData.list">
            <img v-if="subitem.pic"
                 :src="subitem.pic">
            <img v-else
                 src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png">
            <div class="news_title">{{ subitem.title }}</div>
            <div class="news_grid">
              <img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
              <span>来源：{{ subitem.author }}</span>
              <span class="f-fr">{{ subitem.date }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: 'cptItem',
  data () {
    return {
      tagList: ["跟总书记学思维", "三会一课", "主题党日"]
    }
  },
  components: {
  },
  props: {
    isFocused: Boolean,
    item: Object
  },
  mounted () {

  },
  beforeRouteEnter (to, from, next) {
    // todo
    console("路由来源", to)
    until.data(to)
  },
  methods: {

    focusCpt () {
      this.$emit('focusCpt', this.item)
    }
  }
}
</script>
<style lang="scss" src="@/assets/scss/modules/wx-mini/voice.scss"  ></style>