OhPlay/pages/addDevice/selectDevice/selectDevice.vue

<template>
	<view class="content">
		<view class="box bottom" @click="deviceClick('MW-M3')">
			<image src="https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/productModel/3X/MW-M3.png"
				mode="aspectFit" class="img" />
			<text class="text">猫王·MW-M3</text>
		</view>
		<view class="line"></view>
		<view class="box top" @click="deviceClick('MW-M4')">
			<image src="https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/productModel/3X/MW-M4.png"
				mode="aspectFit" class="img" />
			<text class="text">猫王·MW-M4</text>
		</view>
		<view style="height: 60rpx"></view>
		<bt-alert v-if="show" @close="btAlertClose" />


	</view>
</template>

<script>
	import BtAlert from '../../../components/btAlert/btAlert.vue';
	export default {
		components: {
			BtAlert
		},
		data() {
			return {
				show: false,
			};
		},
		methods: {
			deviceClick(model) {
				if (model == 'MW-M3') {
					uni.navigateTo({
						url: `../connectDevice/connectDevice?model=MW-M3&name=猫王·MW-M3`,
					})
				} else if (model == 'MW-M4') {
					uni.navigateTo({
						url: `../connectDevice/connectDevice?model=MW-M4&name=猫王·MW-M4`,
					})
				}
			},
			btAlertClose() {
				this.show = false
			}
		},
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		justify-content: center;
	}

	.line {
		width: 56vw;
		height: 1px;
		opacity: 0.2;
		margin-left: auto;
		margin-right: auto;
		background-image: linear-gradient(to right, #c8c8c8, #484848, #979797);
	}

	.box {
		display: flex;
		flex-direction: column;
		width: 50vw;
		height: 50vw;
		margin-left: auto;
		margin-right: auto;
		align-items: center;
	}

	.img {
		width: 37.33vw;
		height: 34.4vw;
	}

	.top {
		margin-top: 3.3vh;
		justify-content: flex-start;
	}

	.bottom {
		margin-bottom: 3.3vh;
		justify-content: flex-end;
	}

	.text {
		margin-top: 30rpx;
		font-size: 24rpx;
	}

	.location {
		position: fixed;
		top: 0;
	}
</style>