factory_mp_old/pages/home/home_.vue

<template>
	<view class="index">
		<view>
			<view
				style="height: 290rpx;background-image: url('../../static/home/index-top-img.png');background-position: center bottom;background-size: 100%;">
			</view>
			<view class="navigate-title">
				<view @click="goIntoTargetPage('daiban')"
					style="width: 25%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
					<text class="text">2</text>
					<view class="status" >待办工单
					</view>
				</view>
				<view @click="goIntoTargetPage('warning')"
					style="width: 25%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
					<text  class="text">1</text>
					<view class="status">
						实时报警
					</view>
				</view>
			</view>
			<view class="daiban">
				<view class="daiban01">
					<view @click="goInto('daiban')" class="title">
						<view class="left-content">
							<view class="img-view">
								<image src="../../static/home/daiban.png" mode="" class="img"></image>
							</view>
							<text class="title-text-left">待审批</text>
						</view>
						<view class="">
							<text class="title-text-right">查看更多</text>
							<uni-icons type="right" :size="11" color="#ababab"></uni-icons>
						</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="daiban02">
				</view>
			</view>
			<view class="tongzhi">
				<view class="title">
					<view class="left-content">
						<view class="img-view">
							<image src="../../static/home/tongzhi.png" mode="" class="img"></image>
						</view>
						<text class="title-text-left">实时报警</text>
					</view>
					<view class="" @click="xinwenList">
						<text class="title-text-right">查看更多</text>
						<uni-icons type="right" :size="11" color="#ababab"></uni-icons>
					</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tzList: [],
				// top-obj，负责显示上面的那4个展示
				topObj: {},
				approvalObj1: null,
				approvalObj2: null,

				// 2022年2月18日
				mytopimg: require("@/static/home/bgimg-top.jpg"),
			}
		},
		onLoad() {


		},
		onShow() {
		

		},
		methods: {
			goIntoTargetPage(type) {
				if (type == "daiban") {
					uni.navigateTo({
						url: "./list/ticket"
					})
				}
				if (type == "warning") {
					uni.navigateTo({
						url: "./list/warning"
					})
				}
			},
		}
	}
</script>

<style scoped>
	.index {
		background-color: #edf8ff;
		padding-bottom: 45rpx;
		position: relative;
	}

	.nav-bar {
		height: 401rpx;
		background-color: #2cade8;
		background-size: cover;
		color: #FFFFFF;
		padding-top: 26rpx;
		padding-left: 18rpx;
	}

	.nav-bar-text {
		font-size: 38rpx;
		color: #ffffff;
		font-weight: 400;

	}

	.navigate-title {
		width: 720rpx;
		height: 160rpx;
		background-color: #ffffff;
		box-shadow: 0px 2px 24px 0px rgba(213, 237, 255, 0.53);
		border-radius: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 196rpx;
		transform: translateX(-50%);
		z-index: 1;
	}

	.navigate-title .text+.status {
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
	}

	.navigate-title .text {
		font-family: PingFang-SC-Bold;
		font-size: 48rpx;
		font-weight: 600;
		color: #2c6fd9;
	}

	.navigate-title .status {
		font-family: PingFang-SC-Medium;
		font-size: 26rpx;
		color: #383838;
	}

	.daiban01 {
		width: 720rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 88rpx;
	}

	.title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		height: 79rpx;
		align-items: center;
	}

	.left-content {
		display: flex;
		align-items: center;
	}

	.img-view {
		width: 30rpx;
		height: 30rpx;
	}

	.img-view .img {
		width: 100%;
		height: 100%;
	}

	.title-text-left {
		font-size: 34rpx;
		color: #383838;
		padding-left: 10rpx;
	}

	.title-text-right {
		font-family: PingFang-SC-Medium;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 72rpx;
		color: #ababab;
	}

	.line {
		width: 660rpx;
		height: 1rpx;
		background-color: #eeeeee;
		margin: 0 auto;
	}

	.daiban02 {
		width: 720rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 18rpx;
	}

	/* 通知样式 */
	.tongzhi {
		width: 720rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.tongzhi .content {
		display: flex;
		padding: 0 20rpx;
		margin-top: 41rpx;
	}


	.tongzhi-img image {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
	}

	.tongzhi .tongzhi-info {
		margin-left: 15rpx;
		flex: 1;
	}

	.tongzhi-info .tongzhi-title {
		font-size: 30rpx;
		color: #3d3d3d;
	}

	.tongzhi-info .tongzhi-content {
		font-family: PingFang-SC-Medium;
		font-size: 28rpx;
		line-height: 50rpx;
		color: #5b5b5b;
		overflow: hidden;
		text-overflow: ellipsis;
		display: box;
		display: -webkit-box;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break:break-all;
	}

	.tongzhi .bottom-content {
		font-family: PingFang-SC-Regular;
		font-size: 24rpx;
		line-height: 72rpx;
		letter-spacing: 0rpx;
		color: #ababab;
		text-align: right;
		padding: 0 20rpx;
	}

	.bottom-content .liulan {
		margin-right: 40rpx;
	}
</style>