<template>
|
<div class="top_text">
|
<div class="notice">
|
<el-badge :value="3">
|
<el-button link size="small" icon="ele-Message" class="set-notice" @click="handleAnnouncementClick">系统公告</el-button>
|
</el-badge>
|
<div class="notice_box notice_box_show" v-show="state.isShowAnnouncement">
|
<div class="notice_box_header">
|
<span>最新公告</span>
|
</div>
|
<div class="notice_box_body">
|
<div class="notice_item" v-for="item in state.announcementList" :key="item.ID">
|
<p>{{ item.Content }}</p>
|
<p class="text-right">
|
<span>{{ item.Time }}</span>
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive } from 'vue';
|
let state = reactive({
|
isShowAnnouncement: false,
|
announcementList: [
|
{
|
ID: 1,
|
Content: '尊敬的用户，如果遇到上传文件失败的错误(pdf、图片、聊天记录等)，请刷新一下网页再操作。',
|
Time: '2021-08-10',
|
},
|
{
|
ID: 2,
|
Content: '水利工程施工现场安全工作要点',
|
Time: '2021-08-10',
|
},
|
{
|
ID: 3,
|
Content: '水利工程施工现场安全工作要点',
|
Time: '2021-08-10',
|
},
|
],
|
});
|
const handleAnnouncementClick = () => {
|
state.isShowAnnouncement = !state.isShowAnnouncement;
|
};
|
</script>
|
<style scoped lang="scss">
|
.top_text {
|
width: 100%;
|
height: 42px;
|
background-color: #fff;
|
position: absolute;
|
top: 0;
|
z-index: 10;
|
}
|
.notice {
|
position: fixed;
|
top: 18px;
|
right: 30px;
|
z-index: 12;
|
.set-notice {
|
font-size: 12px;
|
font-weight: 400;
|
letter-spacing: 0;
|
line-height: 17.38px;
|
color: #9598b3;
|
}
|
.notice_box_show {
|
width: 300px !important;
|
height: 400px !important;
|
padding: 0 20px 10px;
|
}
|
.notice_box {
|
position: absolute;
|
z-index: 12;
|
top: calc(100% + 20px);
|
right: -10px;
|
width: 0;
|
height: 0;
|
border-radius: 5px;
|
-webkit-box-shadow: 0 0 5px #ddd;
|
box-shadow: 0 0 5px #ddd;
|
background: #fff;
|
display: block;
|
-webkit-transition: all 0.3s;
|
-o-transition: all 0.3s;
|
transition: all 0.3s;
|
overflow: hidden;
|
&_header {
|
line-height: 40px;
|
font-size: 14px;
|
height: 40px;
|
color: #0084ff;
|
}
|
&_body {
|
height: calc(100% - 40px);
|
// overflow: auto;
|
.notice_item {
|
cursor: pointer;
|
padding: 10px;
|
width: 280px;
|
border-top: 1px solid #efefef;
|
color: #767a97;
|
position: relative;
|
line-height: 19px;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
</style>
|
