baozhida-monitoring-host/pages/basicSetup/index.vue

<template>
	<view class="content">
		<view class="set_left">
			<view class="card_set_basic" :class="item.flag ? 'card_item_set' : ''" v-for="(item,index) in list"
				:key="index" @click="select(item)">
				<view class="title_sic center_in">{{item.title}}</view>
			</view>
		</view>
		<view class="set_right">
			<!-- 设备列表 -->
			<devicelist v-if="current == '1'"></devicelist>
			<!-- 通讯设置 -->
			<communicate v-if="current == '2'"></communicate>
			<!-- 系统控制 -->
			<systemsControl v-if="current == '3'"></systemsControl>
			<!-- 网络设置 -->
			<networkSettings v-if="current == '4'"></networkSettings>
		</view>
	</view>
</template>

<script>
	import devicelist from './devicelist.vue' // 设备列表
	import communicate from './communicate.vue' // 通讯设置
	import systemsControl from './systemsControl.vue' // 系统控制
	import networkSettings from './networkSettings.vue' // 网络设置
	export default {
		components: { //在这里注册相应的组件
			devicelist,
			communicate,
			systemsControl,
			networkSettings
		},
		data() {
			return {
				title: 'Hello',
				list: [{
					id: '1',
					flag: true,
					title: '设备列表',
				}, {
					id: '2',
					flag: false,
					title: '通信设置',
				}, {
					id: '3',
					flag: false,
					title: '系统控制',
				}, {
					id: '4',
					flag: false,
					title: '网络设置',
				}, {
					id: '5',
					flag: false,
					title: '个人中心',
				}, {
					id: '6',
					flag: false,
					title: '查看地址',
				}],
				current: '1',
			}
		},
		onLoad() {

		},
		mounted() {
			const that = this
			// uni.getSystemInfo({
			// 	success: function(info) {
			// 		console.log('品牌：' + info);
			// 		that.list = info
			// 	}
			// });
		},
		methods: {
			select(event) {
				this.current = event.id
				this.list.forEach(item => {
					if (item.id == event.id) {
						item.flag = true
					} else {
						item.flag = false
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
	}

	.set_left {
		width: 180rpx;
		margin: 10rpx;
		height: calc(100% - 20rpx);
		border-radius: 4rpx;
		background-color: #EBEEF5;
	}

	.card_set_basic {
		cursor: pointer;
	}

	.card_item_set {
		position: relative;
		background-color: #fff;
	}

	.card_item_set::after {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		content: '';
		width: 2rpx;
		height: 100%;
		background-color: #18b566;
	}

	.title_sic {
		font-size: 18rpx;
		padding: 8rpx 0rpx;
		margin-top: 10rpx;
	}

	.set_right {
		flex: 1;
		margin: 10rpx 10rpx 10rpx 0rpx;
		height: calc(100% - 20rpx);
		/* border: 1rpx solid #EBEEF5; */
		border-radius: 4rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>