SHZHJCYJPTYWXTAPP/pages/home/start/start.vue

<template>
	<view style="padding-top: 20px;">
		<uni-card title="运维系统">
			<uni-row>
				<uni-col :span="14">
					<view style="height: 160px;width: 100%;margin-bottom: 10px;align-items: center;overflow:hidden">
						<image class="yj-img" :src="ywxtImgUrl" mode="heightFix"></image>
					</view>
				</uni-col>
				<uni-col :span="10">
					<view class="tag">
						<view>
							<uni-tag :inverted="true" text="维修直填报" type="primary" />
						</view>
						<view>
							<uni-tag :inverted="true" text="设备巡检" type="primary" />
						</view>
						<view>
							<uni-tag :inverted="true" text="站点管理" type="primary" />
						</view>
						<view>
							<uni-tag :inverted="true" text="统计" type="primary" />
						</view>
						<view>
							<uni-tag :inverted="true" text="通讯录" type="primary" />
						</view>
					</view>
				</uni-col>
			</uni-row>


			<view class="yw-button" @click="onYwxtClick()">
				<view class="btn-items">
					<uni-icons class="input-uni-icon" type="info" size="18" color="coral" />
					<text>进入运维系统</text>
					<uni-icons class="input-uni-icon" type="arrow-right" size="18" color="white" />
				</view>
			</view>
		</uni-card>
		<uni-card title="应急系统">
			<uni-row>
				<uni-col :span="14">
					<view style="height: 160px;width: 100%;margin-bottom: 10px;align-items: center;overflow:hidden">
						<image class="yj-img" :src="yjxtImgUrl" mode="heightFix"></image>
					</view>
				</uni-col>
				<uni-col :span="10">
					<view class="tag">
						<view>
							<uni-tag :inverted="true" text="群众注册" type="primary" />
						</view>
						<view>
							<uni-tag :inverted="true" text="监测预警" type="primary" />
						</view>
						<view>
							<uni-tag :inverted="true" text="危险区动态管理" type="primary" />
						</view>
						<view>
							<uni-tag :inverted="true" text="转移避险" type="primary" />
						</view>
						<view>
							<uni-tag :inverted="true" text="巡查检查" type="primary" />
						</view>
					</view>
				</uni-col>
			</uni-row>
			<view class="yj-button" @click="onYjxtClick()">
				<view class="btn-items">
					<uni-icons class="input-uni-icon" type="info" size="18" color="coral" />
					<text>进入应急系统</text>
					<uni-icons class="input-uni-icon" type="arrow-right" size="18" color="white" />

				</view>
			</view>
		</uni-card>

	</view>
</template>

<script>
	import {
		img
	} from '@/common/setting';

	export default {
		data() {
			return {
				ywxtImgUrl: img + 'ywxt.png',
				yjxtImgUrl: img + 'yjxt.png',
			}
		},
		computed: {

		},
		created(){

		},
		methods: {
			onYwxtClick() {
	
				uni.setStorageSync("SubSystemSelectInfo", {
					ywxt: 1,
					yjxt: 0,
				});
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			onYjxtClick() {
	
				uni.setStorageSync("SubSystemSelectInfo", {
					ywxt: 0,
					yjxt: 1,
				});
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		}
	}
</script>

<style lang="scss">
	.tag {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
		padding-left: 10px;
		flex-wrap: wrap;

		view {
			margin: 5px;
		}
	}

	.yw-button {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 60%;
		height: 40px;
		margin-left: 5px;
		margin-top: 3px;
		margin-bottom: 3px;
		border-radius: 20px;
		background-color: mediumpurple;
		padding-left: 20px;



		.btn-items {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			text {
				margin-left: 5px;
				margin-right: 5px;
				color: white;
				font-size: 0.6rem;
			}
		}
	}

	.yw-button:active {
		background-color: plum;
	}

	.yj-img {
		flex-shrink: 0;
		width: auto;
		height: 160px;
	}

	.yj-button {
		display: flex;
		flex-direction: row;
		justify-content: start;
		width: 60%;
		height: 40px;
		margin-left: 5px;
		margin-top: 3px;
		margin-bottom: 3px;
		border-radius: 20px;
		background-color: mediumpurple;
		padding-left: 20px;

		.btn-items {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			text {
				margin-left: 5px;
				margin-right: 5px;
				color: white;
				font-size: 0.6rem;
			}
		}

	}

	.yj-button:active {
		background-color: plum;
	}
</style>