新开传奇新服_怀化市优化办电话_企业网站建设原则是_微信管理助手

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