CSS 金属样式开关按钮

<template>
	<!-- 定义一个视图容器，用于展示具有动态效果的开关按钮组件 -->
	<view class="loader">
		<!-- 开关按钮容器，点击时触发toggleSwitch方法 -->
		<view class="toggle-border" @click="toggleSwitch">
			<!-- 开关标签，其背景颜色随isChecked状态变化 -->
			<label for="one" :style="{ backgroundColor: isChecked ? '#13d162' : '#d13613' }">
				<!-- 开关手柄，其位置随isChecked状态变化 -->
				<view class="handle" :style="{ left: isChecked ? 'calc(100% - 35px + 10px)' : '-10px' }"></view>
			</label>
		</view>
	</view>
</template>
 
<script>
	export default {
		// 数据对象，包含isChecked属性，用于记录开关状态
		data() {
			return {
				isChecked: false,
			}
		},
 
		// 页面加载完成后执