用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。

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js