用uni-app写的开灯、关灯的面板界面

一款用uni-app写的开灯、关灯的面板界面，直接复制即可使用

关

开

废话不多说，代码如下，直接拷贝即可使用：

index.vue文件

<template>
	<view class="content" :style="status?'background-color: #eeeeee;':'background-color: #4e4e57;'">
		<view class="box" style="background-color: #c7c9ca;" v-show="status" @click="switchClick">
			<view class="open-main">
				<view class="open">
					<view class="upper"></view>
					<view class="below"></view>
				</view>
			</view>
		</view>
		<view class="box" style="background-color: #43444d;" v-show="!status" @click="switchClick">
			<view class="close-main">
				<view class="close">
					<view class="upper"></view>
					<view class="below"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: true
			}
		},
		onReady() {},
		methods: {
			switchClick() {
				this.status = !this.status
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
	}

	.box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30vh;
		width: 200rpx;
		height: 300rpx;
		border-radius: 40rpx;

		.open-main {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			width: 170rpx;
			height: 270rpx;
			border-radius: 40rpx;
			border: 4rpx solid #949595;
			background: linear-gradient(to bottom, #e6e6e6, #e7e7e8);

			.open {
				position: relative;
				width: 162rpx;
				height: 240rpx;
				border-radius: 40rpx;
				background: linear-gradient(to bottom, #b4b5b6, #e3e4e4);

				.upper {
					position: absolute;
					top: 36rpx;
					left: 62rpx;
					width: 30rpx;
					height: 34rpx;
					border: 4rpx solid #6d6d6d;
					border-radius: 50rpx;
				}

				.below {
					position: absolute;
					top: 170rpx;
					left: 80rpx;
					width: 4rpx;
					height: 44rpx;
					background-color: #777777;
				}
			}
		}

		.close-main {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			width: 170rpx;
			height: 270rpx;
			border-radius: 40rpx;
			border: 4rpx solid #2e2e37;
			background: linear-gradient(to bottom, #3a3a42, #3f3f47);

			.close {
				position: relative;
				width: 162rpx;
				height: 240rpx;
				border-radius: 40rpx;
				background: linear-gradient(to bottom, #474750, #5a5a63);

				.upper {
					position: absolute;
					top: 36rpx;
					left: 62rpx;
					width: 30rpx;
					height: 34rpx;
					border: 4rpx solid #2e2e37;
					border-radius: 50rpx;
				}

				.below {
					position: absolute;
					top: 170rpx;
					left: 80rpx;
					width: 4rpx;
					height: 44rpx;
					background-color: #2e2e37;
				}
			}
		}
	}
</style>

需要上百款登录注册界面模板的朋友可以点击查看：https://ext.dcloud.net.cn/plugin?id=8937。