MTP2.0_WEB/src/views/setting/notice/components/noticeContent.vue

<template>
  <div class="notice-content">
    <aside>
      <a-list item-layout="horizontal"
              :data-source="noticeList">
        <template #renderItem="{ item }">
          <a-list-item @click="choose(item)">
            <a-list-item-meta :description="item.createtime">
              <template #title>
                <a :style="{color: item.readed ? '#88A0AE' : '#E5E5E5'}"
                   href="javascript:;">{{ item.title }}</a>
              </template>
              <template #avatar>
                <a-badge :color="item.readed ? '#88A0AE' : 'orange'" />
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </aside>
    <main>
      <h4>{{chooseItemNotice.title}}</h4>
      <p>{{chooseItemNotice.createtime}}</p>
      <div>
        {{chooseItemNotice.content}}
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, computed } from 'vue';
import { QueryNoticeRsp } from '@/goServiceAPI/commonService/interface';
import { mergeObjSameProperty } from '@/utils/tool/set';

function chooseNotice() {
    interface ItemNotice {
        title: string;
        content: string; //内容
        createtime: string; //创建时间
    }
    const chooseItemNotice = reactive<ItemNotice>({
        title: '',
        content: '',
        createtime: '',
    });
    function choose(item: QueryNoticeRsp) {
        mergeObjSameProperty(chooseItemNotice, item);
    }
    return { chooseItemNotice, choose };
}

export default defineComponent({
    name: 'notice',
    props: {
        noticeList: {
            type: Object as PropType<QueryNoticeRsp[]>,
            default: [],
        },
    },
    setup(props) {
        const { chooseItemNotice, choose } = chooseNotice();
        computed(() => {
            props.noticeList.length && mergeObjSameProperty(chooseItemNotice, props.noticeList[0]);
        });
        return {
            choose,
            chooseItemNotice,
        };
    },
});
</script>

<style lang="less">
.notice-content {
    .flex;
    aside {
        cursor: pointer;
        padding: 10px;
        width: 202px;
        height: 619px;
        .ant-list-split {
            .ant-list-item-meta-description {
                text-align: right;
                font-size: 13px;
                color: #3b444a;
            }
            .ant-list-item-meta-avatar {
                margin-right: 0;
            }
            .ant-list-item {
                padding: 5px 0;
                border-bottom: none;
                a {
                    width: 160px;
                    // color: #88A0AE;
                    font-size: 15px;
                    display: inline-block;
                    .ellipse;
                }
            }
        }
    }
    main {
        flex: 1;
        background: #1d2327;
        padding: 20px;
        h4 {
            font-size: 17px;
            color: #e5e5e5;
        }
        p {
            font-size: 13px;
            color: #3b444a;
        }
        div {
            font-size: 15px;
            color: #88a0ae;
            text-indent: 2em;
        }
    }
}
</style>;