按钮样式

src/assets/css/style.css

@@ -1,6 +1,8 @@
 button.sandblasted-blurred {
-  box-sizing: content-box;
+  width: 35rem;
-  border: 0.4rem solid #fff;
+  height: 8.3rem;
+  box-sizing: border-box;
+  border: 0.25rem solid #fff;
   font-family: satoshiMedium;
   font-weight: 500;
   font-size: 4rem;

src/assets/css/style.less

@@ -1,6 +1,8 @@
 button.sandblasted-blurred {
-	box-sizing: content-box;
+	width: 35rem;
-	border: 0.4rem solid #fff;
+	height: 8.3rem;
+	box-sizing: border-box;
+	border: 0.25rem solid #fff;
 	font-family: satoshiMedium;
 	font-weight: 500;
 	font-size: 4rem;
@@ -41,7 +43,9 @@ button.sandblasted-blurred {
 
 //只使用浅色模式
 @media (prefers-color-scheme: dark) {
-	:root, body {
+
+	:root,
+	body {
 		background: white !important;
 		color: black !important;
 	}
@@ -75,6 +79,7 @@ html:root {
 	min-height: fit-content;
 	max-width: none;
 }
+
 .van-toast__text {
 	font-size: 4rem;
 	height: 5rem;
@@ -91,11 +96,13 @@ button.general,
 	text-align: center;
 	color: #fff;
 	font-family: satoshiMedium;
+
 	&.smail {
 		font-size: 3.6rem;
 		width: 24.6rem;
 		line-height: 6.7rem;
 	}
+
 	&.big {
 		font-size: 3.8rem;
 		line-height: 7.4rem;

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;
+				margin: 0 7.5rem;
-				height: 8.3rem;
-				box-sizing: border-box;
-				border-radius: 0.7rem;
-				margin: 0 1.8rem;
-				&.sandblasted-blurred {
-					// border-width: 0.2rem;
-				}
 			}
 		}
 	}

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;
 				}
 			}
 		}