123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- <template>
- <div class="commons-notice">
-
- <el-dialog
- title="系统公告"
- v-model="value"
- width="460px"
- :before-close="handleClose"
- >
- <div class="title">
- <!-- {{ data.length == 0 ? '暂无数据' : data[indexCopy].title}} -->
- </div>
- <div
- class="text-content"
- v-if="data.length > 0"
- style="margin-top: 10px"
- >
- {{ data[index].content }}
- </div>
- <template #footer>
- <span class="dialog-footer">
- <el-button
- size="small"
- @click="index--"
- :disabled="data.length < 2 || index == 0"
- >上一条</el-button
- >
- <el-button
- size="small"
- @click="index++"
- :disabled="data.length == index + 1"
- >下一条</el-button
- >
- <el-button
- type="primary"
- size="small"
- :disabled="data.length == 0"
- @click="confirm"
- >确认已读</el-button
- >
- <span class="more" @click="moreFn">查看更多 ></span>
- </span>
- </template>
- </el-dialog>
- <div class="notice-table-warp" :class="noticeTableModal ? 'notice-table-warp-open' : ''" @click.stop="noticeTableModal = false">
- <div class="notice-table" @click.stop>
- <div class="tabs">
- <ul>
- <li style="padding-left: 0; border: none">
- 全部(99)
- </li>
- <li class="active">待办(99)</li>
- <li>通知(99)</li>
- </ul>
- <div class="more">查看更多></div>
- </div>
- <el-table :data="noticeData" style="width: 100%">
- <el-table-column prop="date" label="标题内容" width="250">
- </el-table-column>
- <el-table-column prop="name" label="类型" width="120">
- </el-table-column>
- <el-table-column prop="address" label="操作">
- <template #default="scope">
- <span style="cursor: pointer;">未读</span>
- </template>
- </el-table-column>
- </el-table>
- <div class="notice-btn-box" style="margin-top: 20px">
- <el-button plain>点击清空</el-button>
- <el-button type="primary">全部已读</el-button>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup>
- import { ElMessageBox, ElNotification } from 'element-plus'
- let noticeTableModal = ref(false)
- let noticeData = ref([
- {
- date: '2016-05-02',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1518 弄',
- },
- {
- date: '2016-05-04',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1517 弄',
- },
- {
- date: '2016-05-01',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1519 弄',
- },
- {
- date: '2016-05-03',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1516 弄',
- },
- ])
- const index = ref(1)
- const data = ref([
- { title: '11', content: '11' },
- { title: '22', content: '22' },
- { title: '33', content: '33' },
- { title: '44', content: '44' },
- ])
- const value = ref(false)
- const moreFn = () => {
- noticeTableModal.value = true
- }
- const confirm = () => {
- value.value = false
- }
- const handleClose = () => {
- value.value = false
- }
- const openBottomBar = (type) => {
- if (type == 1) {
- ElNotification({
- message: '您有一封新的邮件,请注意查收。',
- type: 'warning',
- position: 'bottom-right',
- })
- } else if (type == 2) {
- value.value = true
- } else {
- noticeTableModal.value = true
- }
- }
- </script>
- <style lang="scss">
- .notice-table-warp{
- position: fixed;
- right: 0;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 1000;
- background: rgba(0, 0, 0, 0.1);
- transition: all 0.3s ease-in-out;
- opacity: 0;
- display: none;
- }
- .notice-table-warp-open{
- opacity: 1;
- display: block;
- }
- .notice-table {
- position: fixed;
- right: 2px;
- top: 52px;
- padding: 0 20px 20px;
- width: 500px;
- background: #fff;
- box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.1);
- z-index: 20;
- .notice-btn-box {
- text-align: right;
- }
- .tabs {
- display: flex;
- justify-content: space-between;
- height: 60px;
- line-height: 60px;
- font-size: 14px;
- font-weight: 400;
- ul {
- display: flex;
- margin: 23px 0;
- padding: 0;
- li {
- list-style: none;
- padding: 0 20px;
- cursor: pointer;
- height: 14px;
- line-height: 14px;
- border-left: 1px solid #dcdcdc;
- }
- .active {
- color: #0084ff;
- }
- }
- .more {
- color: #0084ff;
- cursor: pointer;
- }
- }
- }
- </style>
- <style>
- .commons-notice .el-table__row {
- height: 50px;
- }
- .commons-notice .el-dialog__footer {
- text-align: left !important;
- margin-top: 24px;
- }
- .commons-notice .more {
- color: #0084ff;
- float: right;
- cursor: pointer;
- }
- .commons-notice .el-dialog__header {
- background: #eeeeee;
- }
- .commons-notice .el-dialog__title {
- position: relative;
- padding-left: 30px;
- color: #333333;
- font-weight: bold;
- }
- .commons-notice .el-dialog__title::before {
- content: ' ';
- position: absolute;
- left: 0;
- top: 0;
- width: 20px;
- height: 20px;
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAftJREFUOE+tlT9MU1EUxr9zWwgBI/D6Boh/EnbCRiImMhBCGqNhcnDQrbgRAyxGBgYICzXYDbrB4OBENIaY4GAMrmqc3DQxMrxWNGkH0Hv83m0ptvS1EHqTm/fuO+f+zjn3nHueoGYoIFju7kGXGeTrJOd1qlwqq30HdJdzCwX7GY9+7QsX/yO4Ph66gHb0+EkiUzAyRklnrcHyugirb4jKYj/YlgUcHOlVgJrxLkLMHJVSEOmLAFV/Vt2j8SzUrsh0/ncodEDnmec9BswsYV1Vu1RD6+842zmvUR6vkRcAm0Y+vxR6Ku7MVv3bMFir65nVT/gZDNNgBw1+oM7ACe9DTy0e4GHwQnS5uxedbRs8s1t1w1S7I9O5cRfJU/8j9Ybq6ll9ieLhfdFM7w1IfDsyAacFAkXonySB3gokNhuZhNMDGcLfNIGJXWZ3pDVA+z4EfiXwaouA384GzDApEpEUlzXrgI1Dhn7B4cEITOwCYob1aK40iCYMuVlS1BLAY0GMz8ssWxMNdElpVjaaJ+RZCaJ3GbIXASyXTdPC1udAcK8E8TcJvNO4sJtePfsa/bmbDvIj8QrGTDS8ei6QsDkk/Hl2mpm6zUH0bSliGaU8bBLHQ7XA832CXLDomsORxLUvgDfGTJ2pfcGuc1+6qn1VoK1ssBXoOX8B/wDYqv5bje949AAAAABJRU5ErkJggg==);
- }
- </style>
|