BiKing/components/headModules/style.vue

<template>
	<view class="style-box" @click.stop="setPagesStyle()">
		<view :class="['style-status' , `${pageStyle}_style` ]"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageStyle: 'daytime' , // daytime : '日渐模式' ， black: 夜间模式
			};
		},
		methods:{
			 setPagesStyle(){
				 this.pageStyle = this.pageStyle === 'daytime' ? 'black' : 'daytime'
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.style-box{
		width: 72rpx;
		height: 44rpx;
		border-radius: 30rpx;
		background-color: #5C5F70;
		position: relative;
		.style-status{
			width: 39rpx;
			height: 39rpx;
			background-color: #fff;
			border-radius: 50%;
			position: absolute;
			background-size: 39rpx 39rpx;
			top: 50%;
			left: 5rpx;
			transform: translateY(-50%);
			// transition: left  3s linear;
			transition:left,background 0.5s;
		}
		.black_style{
			background: url("@/static/logo.png") no-repeat center center;
			left: 30rpx;
			// width:100rpx;
		}
		.daytime_style{
			background: url("@/static/logo.png") no-repeat center center;
			left: 5rpx;
		}
		
	}
</style>