jn_app/pages/common/uniNavBar.vue

<template>
	<view class="messageData">
		<view class="box-bg">
			<uni-nav-bar :fixed="true" dark left-icon="left" background-color='#202246' title="消息" @clickLeft="back" />
		</view>
		<view class="messageDataCharts">
			<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
			<view class="messageDataChartsText">
				<text>未读消息</text>
			</view>
		</view>
		<view class="msg_main">
			<view class="msg_main_com flex justify-between" style="margin-top:10px">
				<view class="msg_main_com_left">
					<image src="../../static/jnImage/powerPage/msgOne.png" mode=""></image>
					<text>电量类</text>
				</view>
				<view class="msg_main_com_right" style="background-color: #F14E51;">
					<text>88</text>
				</view>
			</view>
			<view class="msg_main_com flex justify-between" style="margin-top:10px">
				<view class="msg_main_com_left">
					<image src="../../static/jnImage/powerPage/msgTwo.png" mode=""></image>
					<text>安全生产</text>
				</view>
				<view class="msg_main_com_right" style="background-color: #F14E51;">
					<text>88</text>
				</view>
			</view>
			<view class="msg_main_com flex justify-between" style="margin-top:10px">
				<view class="msg_main_com_left">
					<image src="../../static/jnImage/powerPage/msgThree.png" mode=""></image>
					<text>公司公告</text>
				</view>
				<view class="msg_main_com_right" style="background-color: #F14E51;">
					<text>88</text>
				</view>
			</view>
			<view class="msg_main_com flex justify-between" style="margin-top:10px">
				<view class="msg_main_com_left">
					<image src="../../static/jnImage/powerPage/msgFour.png" mode=""></image>
					<text>会议通知</text>
				</view>
				<view class="msg_main_com_right" style="background-color: #F14E51;">
					<text>88</text>
				</view>
			</view>
			<view class="msg_main_com flex justify-between" style="margin-top:10px">
				<view class="msg_main_com_left">
					<image src="../../static/jnImage/powerPage/msgFive.png" mode=""></image>
					<text>其他消息</text>
				</view>
				<view class="msg_main_com_right" style="background-color: #F14E51;">
					<text>88</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				opts: {
					padding: undefined,
					title: {
						name: "66",
						fontSize: 50,
						color: "#fff",
						offsetY: -5
					},
					subtitle: {
						name: "",
						fontSize: 15,
						color: "#1890ff",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			back() {
				this.$tab.navigateBack()
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: [{
							"value": 0.2,
							"color": "#1890ff"
						}, {
							"value": 0.8,
							"color": "#2fc25b"
						}, {
							"value": 1,
							"color": "#f04864"
						}],
						series: [{
							name: "完成率",
							data: 0.66
						}]
					};
					this.opts.title.name = '50'
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #202246;
	}

	.messageData {
		width: 100vw;
		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
		background-repeat: no-repeat, repeat;
		background-size: 100% 260px, 100% 5px;

		.box-bg {
			width: 100vw;
			padding: 5px 0;
		}

		.messageDataCharts {
			width: 100%;
			height: 300px;
			position: relative;

			.messageDataChartsText {
				width: 30%;
				height: 30px;
				line-height: 30px;
				background: #4287FF;
				border-radius: 15px;
				text-align: center;
				position: absolute;
				bottom: 30px;
				left: 35%;

				text {

					color: #fff;
					font-size: 30upx;
				}
			}
		}

		.msg_main {
			padding: 0 20px;

			.msg_main_com {
				padding: 10px;
				background-color: #3F4572;
				border-radius: 5px;

				.msg_main_com_left {
					image {
						width: 30px;
						height: 30px;
						position: relative;
						top: 1px;
						margin-right: 10px;
					}

					text {
						font-size: 30upx;
						color: #fff;
						position: relative;
						top: -8px;
					}
				}

				.msg_main_com_right {
					width: 25px;
					height: 25px;
					text-align: center;
					border-radius: 5px;
					position: relative;
					top: 6px;

					text {
						color: #fff;
						position: relative;
						top: 6px;
					}
				}
			}
		}
	}
</style>