byte-sailing-new/src/components/notice/index.vue

<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">查看更多 &gt;</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">查看更多&gt;</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>