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

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

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

index.vue文件

javascript 复制代码
<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。

相关推荐
weixin-a1530030831629 分钟前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头1 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's1 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络2 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.2 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端