BiKing/components/headModules/style.vue

<template>
	<view :class="['style-box' , `${pageStyle}_style-box` ]" @click.stop="setPagesStyle()">
		<view :class="['style-status' , `${pageStyle}_style` ]">
			<text class="iconfont" v-if="pageStyle === 'daytime'">&#xe60f;</text>
			<text class="iconfont" v-else-if="pageStyle === 'black'">&#xe8b1;</text>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	.daytime_style-box{
		background-color: #fcfcfc;
		background-color: #5C5F70;
	}
	.black_style-box{
		background-color: #5C5F70;
	}
	.style-box{
		width: 68rpx;
		height: 40rpx;
		border-radius: 30rpx;
		position: relative;
		.style-status{
			width: 36rpx;
			height: 36rpx;
			background-color: #fff;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 5rpx;
			transform: translateY(-50%);
			// transition: left  3s linear;
			transition:left,background 0.5s;
			display: flex;
			justify-content: center;
			align-items: center;
			.iconfont{
				color: $Theme-Color;
				font-size: 26rpx;
			}
		}
		.black_style{ 
			left: 30rpx;
			// width:100rpx;
		}
		.daytime_style{ 
			left: 4rpx;
		}
		
	}
</style>