esswisdom_ipad_V1/pages/faultlist/index.vue

<template>
	<view class="content">
		<view class="top">
			<image class="top_logo" src="../../static/logo.png" mode=""></image>
			<image class="tite" src="../../static/tite.png" mode=""></image>
			<view class="time">
				<view class="time_top">
					{{formattedTime}}
				</view>
				<view class="time_bottom">
					<view>

					</view>
					<view class="time_bottom1">
						连接状态：
						<view class="time_state" v-if="status=='ok'">
							在线
						</view>
						<view class="time_state1" v-else>
							离线
						</view>

					</view>

				</view>

			</view>
		</view>
		<view class="parameter">
			<view class="parameter_list">
				<view class="parameter_box" @click="onreturn">
					<view class="parameter_list1">
						<image src="../../static/faultlist.png" mode=""></image>
					</view>
					<view class="fault_txt">
						故障页面
					</view>
				</view>
				<view class="parameter_box">
					<view class="parameter_list1">
						<!-- <image src="../../static/faultlist.png" mode=""></image> -->
					</view>
					<view class="fault_txt">
						<!-- 故障页面 -->
					</view>
				</view>
				<view class="parameter_box">
					<view class="parameter_list1">
						<!-- <image src="../../static/faultlist.png" mode=""></image> -->
					</view>
					<view class="fault_txt">
						<!-- 故障页面 -->
					</view>
				</view>
				<view class="parameter_box">
					<view class="parameter_list1">
						<!-- <image src="../../static/faultlist.png" mode=""></image> -->
					</view>
					<view class="fault_txt">
						<!-- 故障页面 -->
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<!--    -->
<script>
	import {
		getTime
	} from "../../utils/index.js"
	import {
		getfaultsList
	} from "../../api/api.js"
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		computed: {
			// 使用 mapState 映射多个状态到组件的计算属性
			...mapState(['formattedTime', 'status']),

		},
		beforeUnmount() {},
		methods: {
			// 返回首页
			onreturn() {
				uni.redirectTo({
					url: '/pages/details/index'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		opacity: 1;
		background: linear-gradient(180deg, rgba(215, 230, 245, 0) 0%, rgba(196, 229, 255, 1) 100%);
		box-sizing: border-box;
	}

	.top {
		width: 100%;
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-color: #fff;
		padding: 0px 46px;
		box-sizing: border-box;
	}

	.top_logo {
		width: 426px;
		height: 68px;
	}

	.tite {
		width: 277px;
		height: 48px;
	}

	.time {
		text-align: right;
	}

	.time_top {
		font-size: 17px;
	}

	.time_bottom {
		display: flex;
		font-size: 17px;
		justify-content: space-between;
	}

	.time_bottom1 {
		display: flex;
	}

	.time_state {
		font-size: 17px;
		font-weight: 600;
		color: rgba(22, 68, 144, 1);
	}

	.time_state1 {
		font-size: 17px;
		font-weight: 600;
		color: rgba(217, 22, 22, 1);
	}

	.parameter {
		width: 100%;
		height: 100%;
		margin-top: 113px;
		display: flex;
		/* align-items: center; */
		justify-content: space-around;
		box-sizing: border-box;
	}

	.parameter_box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.parameter_list {
		width: 100%;
		padding: 0px 40px;
		display: flex;
		justify-content: space-around;
	}

	.parameter_list1 {
		width: 234.46px;
		height: 336.76px;
		background-image: url("../../static/faults.png");
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 118.46px;
			height: 118.46px;
		}
	}

	.fault_txt {
		width: 96.92px;
		height: 27.9px;
		opacity: 1;
		/** 文本1 */
		font-size: 23.5px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 32.24px;
		color: rgba(0, 0, 0, 1);
		text-align: left;
		vertical-align: top;
		margin-top: 40px;
	}

	.fault_image {
		width: 234.46px;
		height: 336.76px;
	}

	.parameter_xian {
		width: 100%;
		height: 55px;
		background: linear-gradient(180deg, rgba(30, 131, 189, 1) 0%, rgba(69, 168, 230, 0.92) 100%);
		box-shadow: inset 0px 0px 9.79px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		/* justify-content: space-around; */
		font-size: 28px;
		font-weight: 600;
		padding: 0px 20px;
		box-sizing: border-box;

		.parameter_xian1 {
			width: 100px;
		}
	}
</style>