按钮样式

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;