按钮样式

src/views/Workshop/customize.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 	import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
+	import gradientButton from '@/components/gradientButton.vue'
 	import { ref, onMounted, computed } from 'vue'
 	import {
 		generateTryOnEffect,
@@ -153,9 +154,9 @@
 		</div>
 		<div class="btns">
 			<button class="choose-outfit" v-if="!isHistoryFlow" @click="onChooseOutfit">
-				Choose Outfit
+				<span>Choose Outfit</span>
 			</button>
-			<button class="finish" @click="onFinish">Finish</button>
+			<button class="finish" @click="onFinish"><span>Finish</span></button>
 		</div>
 	</div>
 </template>
@@ -303,9 +304,21 @@
 			}
 			> :first-child.finish,
 			> .choose-outfit {
-				background-color: transparent;
 				color: #000;
-				border: 0.2rem solid #000;
+				background: linear-gradient(165deg, #b3b3b3 0%, #000 50%, #b3b3b3 100%);
+				position: relative;
+				&::before {
+					content: '';
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					background-color: #fff;
+					background-clip: padding-box;
+					border: 0.25rem solid transparent;
+					border-radius: 1.3rem;
+				}
 			}
 			> :first-child.finish {
 				width: 87.5rem;

src/views/Workshop/uploadFace1.vue

@@ -94,14 +94,7 @@
 			justify-content: center;
 			bottom: 19.7rem;
 			> button {
-				width: 35rem;
-				height: 8.3rem;
-				box-sizing: border-box;
-				border-radius: 0.7rem;
-				margin: 0 1.8rem;
-				&.sandblasted-blurred {
-					// border-width: 0.2rem;
-				}
+				margin: 0 7.5rem;
 			}
 		}
 	}

src/views/Workshop/uploadFace2.vue

@@ -146,11 +146,7 @@
 				display: flex;
 				justify-content: center;
 				> button {
-					width: 35rem;
-					height: 8.3rem;
 					margin: 0 5rem;
-					// border-radius: 4.3rem;
-					border-width: 0.25rem;
 				}
 			}
 		}