xps-web-csat/src/views/hos/components/ArtPanel.vue

<template>
  <div class="ArtPanel-group-box" :style="{height:height}">
    <div class="group-title">
      {{ title }}
      <el-link @click="showMoreArtData(dataList,'最新动态');">更多 <i class="el-icon-caret-right" /></el-link>
    </div>
    <vuescroll v-if="dataList" :ops="ops" style="height: calc(100% - 40px)">
      <div class="task-management">
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="item"
          @click="showNewsDetail(item)"
        >
          <div class="icon">
            <i class="el-icon-s-comment" />
          </div>
          <div class="info">
            <span class="tag ">{{ item.artCatTitle }}</span>
            <h4>{{ item.artTitle }}</h4>
            <p>
              <span style="padding-left:0;color:#c4c1c1;font-size: 10px;">{{ item.issuedAt }}</span>
            </p>
          </div>
        </div>
      </div>
    </vuescroll>
    <ArtDetail ref="NewsDetail" />
  </div>
</template>
<script>
import vuescroll from 'vuescroll'
import { getRecentArtByList } from '@/api/system/artApi'
import ArtDetail from '@/views/system/art/artDetail'
export default {
  name: 'ArtPanel',
  components: {
    vuescroll,
    ArtDetail
  },
  props: {
    title: {
      type: [String],
      default: '最新动态'
    },
    more: {
      type: [String],
      default: undefined
    },
    height: {
      type: [String],
      default: 'calc(100vh - 85px)'
    }
  },
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      listLoading: false,
      dataList: [],
      conditions: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {

    getData() {
      getRecentArtByList(this.conditions).then((resp) => {
        const { code, msg, data } = resp
        if (code === 200) {
          this.dataList = data
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    showMoreArtData(data, title) {
      let path = '/hos/news/index'
      if (this.more) {
        path = this.more
      }
      this.$router.push({
        path
      })
    },
    showNewsDetail(item) {
      const { artId } = item
      this.$refs.NewsDetail.showModel(artId)
    }
  }
}
</script>
<style lang="scss" scoped>
  .ArtPanel-group-box {
    width: calc(100% - 15px);
    background-color: #0C3242;
    border-radius: 5px 5px 0 0;
    padding: 15px;
    .group-title {
      font-size: 16px;
      color: #FFF;
      margin-bottom: 15px;
      font-weight: bold;
      .el-link {
        float: right;
        font-size: 14px;
        color: #C1C6C8;
        -webkit-text-fill-color: #C1C6C8;
      }
    }
    .group-content{
      height: 80%;
      overflow: auto;
    }
    .task-management{
    margin-top: 20px;
    .item{
        display: flex;
        justify-content: flex-start;
        line-height: 1;
        margin-bottom: 15px;
        position: relative;
        cursor: pointer;
        .tag{
            height: 24px;
            display: inline-block;
            position: absolute;
            right: 0;
            top: 0;
            padding: 0px 4px;
            line-height: 24px;
            font-size: 12px;
            color: #fff;
            border-radius: 4px;
            box-sizing: border-box;
            white-space: nowrap;
            border: 1px solid #d9d0c8;
            &.none{
                background-color: transparent;
                border-color: transparent;
            }
        }
        p,h4{
            margin: 0;
            font-size: 14px;
        }
        p{
            padding-top: 6px;
            font-size: 8px;
            color: #f5f5f5;
        }
        h4{
            .status{
                font-size: 12px;
            }
        }
        .icon{
            width: 45px;
            height: 45px;
            font-size: 26px;
        }
    }
    }
  }
</style>