style: 性别选择按钮样式

src/views/stylist/sex.vue

@@ -23,7 +23,7 @@ import FooterNavigation from '@/components/FooterNavigation.vue'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast } from 'vant'
-import {useUserInfoStore} from '@/stores'
+import { useUserInfoStore } from '@/stores'
 const router = useRouter()
 const userInfoStore = useUserInfoStore()
 
@@ -33,11 +33,14 @@ const options = ref<any[]>([
 ])
 
 const handleSelect = (value: string) => {
-  if (value === 'male') {// 男性开发中
-    return showToast(`This feature is currently under development. Please select the 'Female' option for now.`)
+  if (value === 'male') {
+    // 男性开发中
+    return showToast(
+      `This feature is currently under development. Please select the 'Female' option for now.`
+    )
   }
   const generateParams = userInfoStore.getGenerateParams()
-  generateParams.sex = value 
+  generateParams.sex = value
   userInfoStore.setGenerateParams(generateParams)
   router.push('/stylist/dressfor')
 }
@@ -71,13 +74,24 @@ const handleSelect = (value: string) => {
     display: flex;
     justify-content: space-between;
     .option {
-      // flex: 1;
+      // frosted glass style
       text-align: center;
       font-family: 'satoshiRegular';
       font-size: 4.8rem;
       width: 29.7rem;
       height: 8.3rem;
-      border: .2rem solid #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border-radius: .2rem;
+      background: rgba(255, 255, 255, 0.06);
+      border: 0.2rem solid #fff;
+      backdrop-filter: blur(95px);
+      -webkit-backdrop-filter: blur(95px);
+      -moz-backdrop-filter: blur(95px);
+      background-clip: padding-box;
+      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
     }
   }
 }