<template>
	<view>
		<view class="Template_detail_shopbtn_text_btn2"  @click="checkChange">
			<view class="Template_detail_shopbtn_text_btn2_view" :class="checked?'upactive':''">
				<view class="Template_detail_shopbtn_text_btn2_view2" :class="checked?'activecss':''"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"mycheckbox",
		props:{
			checked:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			checkChange(){
				this.$emit("checkChange");
			}
		}
	}
</script>

<style lang="scss" scoped>
   .Template_detail_shopbtn_text_btn2 {
   	width: 20%;
   
   }
   .Template_detail_shopbtn_text_btn2_view {
   	width: 35px;
   	height: 18px;
   	background: #F0F0F0;
   	border-radius: 18px;
   	margin-left: 20px;
   }
   
   .Template_detail_shopbtn_text_btn2_view2 {
   	width: 15px;
   	height: 15px;
   	background: #666666;
   	border-radius: 15px;
   	float: right;
   	margin-top: 1px;
   }
   .upactive{
	   background: #FCD1E0 !important;
   }
   .activecss{
	   background: #FE928C !important;
	   float: left !important;
		
   }
</style>

效果图: