dvcp_v2_wxcp_app/src/pending/AppPovertyAlleviation/AppPovertyAlleviation.vue

<template>
  <div class="info">
    <div class="info-top">
      <div class="info-top__item" @click="linkTo('./Monitor')">
        <image :src="$cdn + '/tengxun/wdbf.png'"/>
        <h2>监测对象</h2>
      </div>
      <div class="info-top__item" @click="linkTo('./povertyMonitor')">
        <image src="/static/images/yjjk.png"/>
        <h2>预警监控</h2>
      </div>
      <div class="info-top__item" @click="linkTo('./News')">
        <image src="/static/images/news.png"/>
        <h2>政策动态</h2>
      </div>
    </div>
    <div class="news">
      <h2>最新动态</h2>
      <div class="news-list">
        <div class="news-item" v-for="(item, index) in list" :key="index"
             @click="linkTo(`./NewsDetail?id=${item.id}`)">
          <div class="left">
            <h2>{{ item.title }}</h2>
            <div class="item-bottom">
              <span>{{ $dict.getLabel('newsCenterPolicyType', item.policyType) }}</span>
              <span>{{ item.createTime }}</span>
            </div>
          </div>
          <image v-if="item.coverFile" :src="item.coverFile ? item.coverFile.url : ''"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppPovertyAlleviation",
  appName: "防返贫",
  data() {
    return {
      list: []
    }
  },
  onLoad() {
    this.$dict.load(['newsCenterPolicyType']).then(() => {
      this.getList()
    })

    console.log(this.$cdn + '/tengxun/wdbf.png')
  },

  methods: {
    linkTo(url) {
      uni.navigateTo({url})
    },
    getList() {
      this.$http.post(`/app/appnewscenterinfo/listForWx`, null, {
        params: {
          current: 1,
          size: 10,
          status: 1
        }
      }).then(res => {
        if (res.code == 0) {
          this.list = res.data.records
        }
      })
    }
  }
}
</script>

<style lang="scss">
.info {
  padding: 32px 30px;

  .info-top {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    background: #FFFFFF;
    border-radius: 16px;

    div {
      flex: 1;
      padding: 32px 0;
      text-align: center;

      image {
        width: 80px;
        height: 80px;
      }

      h2 {
        margin-top: 4px;
        color: #3D434A;
        font-size: 28px;
        font-weight: normal;
      }
    }
  }

  .news {
    & > h2 {
      margin-bottom: 32px;
      color: #333333;
      font-weight: 600;
      font-size: 32px;
      
    }

    .news-item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding: 32px 24px;
      background: #fff;
      border-radius: 14px;

      &:active {
        background: #eee;
      }

      &:last-child {
        border-bottom: none;
      }

      .left {
        flex: 1;
        margin-right: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      & > image {
        width: 200px;
        height: 140px;
      }

      h2 {
        width: 100%;
        margin-bottom: 32px;
        color: #333333;
        font-size: 30px;
        font-weight: 600;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .item-bottom {
        display: flex;
        align-items: center;

        span {
          color: #999999;
          font-size: 24px;

          &:first-child {
            margin-right: 32px;
          }
        }
      }
    }
  }
}
</style>