first

components/my-components/my-icons.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="icon"
+	:class="[computedClass]"
+	></view>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+	const props=defineProps({
+		type:{
+			type:String
+		}
+	})
+	const classMap={
+		add:'icon-add',
+		reduce:'icon-reduce'
+	}
+	const computedClass=computed(()=>{
+		return classMap[props.type]
+	})
+	
+</script>
+
+<style lang="scss">
+	$icon-size: 34rpx;
+	$icon-line-width: 20rpx;
+	$icon-line-height: 4rpx;
+	.icon {
+		width: $icon-size;
+		height: $icon-size;
+		position: relative;
+		border-radius: 50%;
+	
+		&:before,
+		&::after {
+			position: absolute;
+			display: block;
+			content: '';
+			background-color: #fff;
+		}
+	}
+	
+	.icon-add {
+		background-color: $my-main-color;
+	
+		&::before {
+			width: $icon-line-height;
+			height: $icon-line-width;
+			top: calc(($icon-size /2) - ($icon-line-width / 2));
+			left: calc(($icon-size /2) - ($icon-line-height / 2));
+		}
+	
+		&::after {
+			width: $icon-line-width;
+			height: 4rpx;
+			top: calc(($icon-size /2) - ($icon-line-height / 2));
+			left: calc(($icon-size /2) - ($icon-line-width / 2));
+		}
+	}
+	
+	.icon-reduce {
+		background-color: $my-red-color;
+	
+		&::after {
+			width: $icon-line-width;
+			height: $icon-line-height;
+			top: calc(($icon-size /2) - ($icon-line-height / 2));
+			left: calc(($icon-size /2) - ($icon-line-width / 2));
+		}
+	}
+</style>