kuailelunwen_new_houtai/src/views/agent/noticeList.vue

<template>
    <div class="main-content12">
        <div class="flex-common">
            <h3>系统通知</h3>
            <div class="systemNotice-main">
                <div class="sales-item flex" v-for="(item) in noticeList" :key="item.title">
                    <img :src="require('@/assets/home/notice_'+item.type+'.png')" alt="">
                    <div class="column">
                        <b class="flex">
                            {{ item.title }}
<!--                            <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> -->
                        </b>
                        <p class="html-container" v-html="item.content">{{ item.content }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';

export default {
    // 站点设置
    name: '',
    props: [''],
    components: {

    },
    data() {
        return {
            noticeList: [],
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        this.getNoticeList()
    },
    methods: {
        getNoticeList(){
            this.$http('POST', '/agentnew/ajax_get_notice_list', {

            }).then(response => {
                this.$nextTick(() => {
                    this.noticeList = response.data
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.html-container{
  ::v-deep a{
    display: inline-block;
    color: #8A9099;
    text-decoration: none;
    background-image: url(@/assets/site/form_link.svg);
    background-repeat: no-repeat;
    text-indent: 20px;
    background-size: 14px;
    background-position: 0 50%;
  }
  ::v-deep a:hover{
    color: #006AFF;
    background-image: url(@/assets/site/form_linkActive.svg);
  }
}
.systemNotice-main {
  img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
  }

  .sales-item:last-child{
    border: none;
  }
  .sales-item {
    width: 100%;
    justify-content: flex-start;
    padding: 24px 12px;
    box-sizing: border-box;
    transition: all .3s;
    border-bottom: 1px solid #DFE2E6;

    .systemIcon {
      display: none;
      width: 12px;
      height: 8px;
    }

    &:hover {
      background: #F6F7FA;

      b {
        color: #006AFF;
      }

      .systemIcon {
        margin-left: 12px;
        display: block;
      }
    }

    div {
      width: calc(100% - 30px);
    }

    /* 确保 padding 不会影响宽度计算 */
    b {
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0.08em;
      color: #1E2226;
    }

    p {
      display: -webkit-box;
      width: 100%;
      margin-top: 6px;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      text-align: left;
      color: #8A9099;
    }
  }

}
</style>