style: 样式优化

src/component/Detail/model/modelNav.vue

@@ -11,8 +11,8 @@
 			<img :src="item.path" alt="">
 		</div>
     </div>
-	<div v-show="singleOveral.value == 'overall'" v-if="(currentDetailType == 'sketch' || currentDetailType == '') && designDetail.clothes.length < 5 && !isEditPattern.value" :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
-		+
+	<div v-show="singleOveral.value == 'overall'" v-if="(currentDetailType == 'sketch' || currentDetailType == '') && designDetail.clothes.length < 5 && !isEditPattern.value" :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="add" @click="addSketch">
+		<i class="fi fi-bs-plus"></i>
 	</div>
    </div>
 </template>
@@ -289,7 +289,7 @@ export default defineComponent({
 					display: block;
 				}
 			}
-			> i{
+			> i:not(.fi-bs-plus){
 				display: none;
 				position: absolute;
 				right: 1rem;
@@ -308,12 +308,21 @@ export default defineComponent({
 				height: 100%;
 				object-fit: contain;
 			}
-			&.add{
+		}
+		.add{
+			width: 12rem;
+			height: 12rem;
+			text-align: center;
+			line-height: 12rem;
+			padding: 1rem;
+			border-radius: 2rem;
+			border: 2px solid #B4B4B4;
+			font-size: 8rem;
+			border-radius: 2rem;
+			border: 2px solid #B4B4B4;
+			cursor: pointer;
+			i{
 				font-size: 8rem;
-				display: flex;
-				align-items: center;
-				position: absolute;
-				justify-content: center;
 			}
 		}
 	}