From 8a5a0ad3f5ad0abf894df0cdc161786fb59a1abf Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Wed, 22 Apr 2026 10:30:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20setting=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/style.css               |  27 ++
 src/assets/icons/ThumbEdit.svg         |   5 +
 src/assets/images/edit.png             | Bin 0 -> 928 bytes
 src/router/index.ts                    |  58 +--
 src/views/setting/components/Radio.vue |  99 +++++
 src/views/setting/index.vue            | 512 +++++++++++++++++++++++++
 6 files changed, 679 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/icons/ThumbEdit.svg
 create mode 100644 src/assets/images/edit.png
 create mode 100644 src/views/setting/components/Radio.vue
 create mode 100644 src/views/setting/index.vue

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 23afd43..e673116 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -111,3 +111,30 @@ body,
   background-position: 50% 50%;
   background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
 }
+
+
+.flex{
+  display: flex;
+}
+.flex-center{
+  justify-content: center;
+  align-items: center;
+}
+.flex-1{
+  flex: 1;
+}
+.flex-col{
+  flex-direction: column;
+}
+.align-center{
+  align-items: center;
+}
+.space-between{
+  justify-content: space-between;
+}
+.justify-center{
+  justify-content: center;
+}
+.relative{
+  position: relative;
+}
diff --git a/src/assets/icons/ThumbEdit.svg b/src/assets/icons/ThumbEdit.svg
new file mode 100644
index 0000000..75210f0
--- /dev/null
+++ b/src/assets/icons/ThumbEdit.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="14.5" fill="#232323" stroke="white"/>
+<path d="M8.18359 19.5693V22.3285H11.8137C12.056 22.3285 12.2879 22.2298 12.4559 22.055L22.7247 11.3755C23.061 11.0257 23.0556 10.4711 22.7125 10.128L20.4083 7.82384C20.0557 7.47124 19.4824 7.47665 19.1365 7.83584L8.43278 18.9513C8.27291 19.1173 8.18359 19.3388 8.18359 19.5693Z" stroke="white" stroke-width="0.89098" stroke-linecap="round"/>
+<path d="M17.9883 8.96387L21.5522 12.5278" stroke="white" stroke-width="0.89098" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/edit.png b/src/assets/images/edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..b43c3ad577bfa9bc81dbc7f220adf7e88db89a7b
GIT binary patch
literal 928
zcmV;R17G}!P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=0009UNkl<ZcmcJSv5z5f6vuxf+wNw13N6j*l(&~qazZQNIuy)S
z3X;7oBxqO?%C!k4*-%nYQn`lm6!gL$;NExkH=8kro0)Ylc{9Ur=6!zeH}Ac9KY<yL
z!{H#($wT^s^nuh#D)Qki>746C5QKLlHU$H~45>7oPQ~GH$Y!${Td&t_x7*40+}+(V
zm&+xq-|uH$uXja%w@BY;5-ZbSf&%!f*XxP3T1|!-5r@OU(&;n{hr=uS`AqPZVK6}}
z1d>vz6k9A7%!*(F?RFdID#0JM<2D`WYq#5#g2A9=C<H468>7)kf=%tXpn+C!V<M4Y
z*OXGJ#3GT%k>`R68mC#lVwOtaTuTsu{eB<I{z&jD{<CqYlTJ_3Xw)*)?RK-lV8HVE
z{K*(>B3{7YnezFLV-&qkqmio>1X8hBWXWVwhG1#6f_OoO(50jX$B{Btq0MGfzP`P^
zWw5i^Y;@tAk%8AXI)tb=Sn^hZX0us&DFH(v0f62m0_x~~Fi?o-(gTklP?5d@#WKRE
z0!IbI1PF5S9A|}Y=y1PWE}0ooibJ7LILdXv@n5IYk>9u8Dx&0)e1pdxGhhW;uh*G&
zr7#AMu?pu_kx#}6uxK=e)KIE!hR4*xS)z>@6cm9*qrqCO)`{UuW9J0mEgt+A6y8ud
zm5m!6J7)__fLC_A-4Ilp>zBsP38I~34)BCN-e+$_%A7M?E|*O~Rp8$Mza#JT1QS9q
z=ov=zB9+WmJkA;eJSV^wQK={U{azP}vS=0x23jNZWi~pXS$jddq9>@octBCBPzYzd
z;UIsH`KRhnAP^AM#RQ+aTrPL?Fv_46C?-7~k5_d09ZjIR5s;{=RQ_`#@Kb62J_`ss
z0~&bIdUy>%^uxBg<GfMdKm%yZM4Dj?_4cct!&5lo^ZC$YOGhld2MAuJWzV1$vf7m(
zK2S!vr;>L3QbQl7(-T@Eiw!-p<ymR&41+n`NvAkz3|$I7b%=VXdJBV+i(<pKFmig5
zR(Yy2(_qacLhNJ1cF#UGaOzFligZGX4cq(@P?5j*70jaX=2M3N0000<MNUMnLSTY;
CIii>V

literal 0
HcmV?d00001

diff --git a/src/router/index.ts b/src/router/index.ts
index 126da21..77bf7f4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,32 +7,46 @@ import { createRouter, createWebHistory } from 'vue-router'
  * 3. 路由的name默认是文件名,如果文件名与name不一致,通过defineOptions({ name: 'componentName' })来设置
  */
 const router = createRouter({
-	history: createWebHistory('/'),
-	//   history: createWebHistory(import.meta.env.VITE_APP_URL),
-	routes: [
-		{
-			path: '/',
-			name: 'home',
-			component: () => import('../views/home/index.vue'),
-		},
-		{
-			path: '/collectionStory',
-			name: 'collectionStory',
-			component: () => import('../views/collectionStory/index.vue'),
-		},
-		{
-			path: '/:pathMatch(.*)',
-			name: '404',
-			component: () => import('../views/404.vue'),
-		},
-	]
+  history: createWebHistory('/'),
+  //   history: createWebHistory(import.meta.env.VITE_APP_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: () => import('../views/home/index.vue')
+    },
+    {
+      path: '/collectionStory',
+      name: 'collectionStory',
+      component: () => import('../views/collectionStory/index.vue')
+      // {
+      //   path: '/',
+      //   redirect: '/welcome'
+      // },
+      // {
+      //   path: '/asistant',
+      //   name: 'asistant',
+      //   component: () => import('../views/asistant/index.vue'),
+      //   meta: { cache: true, verify: () => VerifyIDs(2) }
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: () => import('@/views/setting/index.vue'),
+      meta: { cache: true }
+    },
+    {
+      path: '/:pathMatch(.*)',
+      name: '404',
+      component: () => import('../views/404.vue')
+    }
+  ]
 })
 
 router.beforeEach((to, from, next) => {
-	next()
+  next()
 })
 
-router.afterEach(() => {
-})
+router.afterEach(() => {})
 
 export default router
diff --git a/src/views/setting/components/Radio.vue b/src/views/setting/components/Radio.vue
new file mode 100644
index 0000000..8d2376c
--- /dev/null
+++ b/src/views/setting/components/Radio.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="radio-button-group">
+    <button
+      v-for="item in options"
+      :key="item.value"
+      type="button"
+      :class="[
+        'radio-button',
+        {
+          'is-active': multiple ? selectedValues.includes(item.value) : modelValue === item.value
+        }
+      ]"
+      @click="selectOption(item.value)"
+    >
+      {{ item.name }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Option {
+  name: string | number
+  value: string | number | boolean
+}
+
+const props = defineProps<{
+  modelValue: string | number | boolean | Array<string | number | boolean> | null
+  options: Option[] // 按钮选项数组
+  multiple?: boolean // 是否支持多选，默认为 false
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void
+}>()
+
+const multiple = props.multiple === true
+
+const selectedValues = computed(() => {
+  if (!multiple) {
+    return typeof props.modelValue === 'undefined' || props.modelValue === null
+      ? []
+      : [props.modelValue]
+  }
+
+  return Array.isArray(props.modelValue) ? props.modelValue : []
+})
+
+const selectOption = (value: any) => {
+  if (multiple) {
+    const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
+    const index = current.indexOf(value)
+    if (index >= 0) {
+      current.splice(index, 1)
+    } else {
+      current.push(value)
+    }
+    emit('update:modelValue', current)
+    return
+  }
+
+  if (props.modelValue !== value) {
+    emit('update:modelValue', value)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.radio-button-group {
+  display: flex;
+  gap: 0.8rem;
+  flex-wrap: wrap;
+}
+
+.radio-button {
+  border: 1px solid #979797;
+  height: 4rem;
+  min-width: 8rem;
+  padding: 0 2rem;
+  color: #979797;
+  cursor: pointer;
+  outline: none;
+  background-color: #fff;
+  font-size: 1.4rem;
+}
+
+.radio-button:hover {
+  border-color: #000;
+  color: #fff;
+  background-color: #000;
+}
+
+.radio-button.is-active {
+  color: #fff;
+  background-color: #000;
+  border-color: #000;
+}
+</style>
diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue
new file mode 100644
index 0000000..f138b81
--- /dev/null
+++ b/src/views/setting/index.vue
@@ -0,0 +1,512 @@
+<template>
+  <div class="setting-wrapper">
+    <div class="banner flex flex-center flex-col">
+      <div class="title">Settings</div>
+      <div class="slogan">Manage your account settings and preferences</div>
+    </div>
+    <div class="setting-content">
+      <div class="setting-item profile-container flex">
+        <div class="label-container">
+          <div class="label">Profile</div>
+          <div class="label-desc">
+            Update your display name, avatar, social links and account security.
+          </div>
+        </div>
+        <div class="context-container">
+          <div class="info flex align-center">
+            <div class="thumb relative">
+              <SvgIcon name="ThumbEdit" size="30" class="edit-icon" />
+            </div>
+            <div class="name-email flex flex-col">
+              <div class="name">{{ userData.firstName }} {{ userData.lastName }}</div>
+              <div class="email">{{ userData.email }}</div>
+            </div>
+          </div>
+          <div class="form-container flex flex-col">
+            <div class="flex col-gap-2">
+              <div class="form-item">
+                <div class="form-item-label">FIRST NAME</div>
+                <div class="form-item-value name">
+                  <el-input v-model="userData.firstName" placeholder="First Name" />
+                </div>
+              </div>
+              <div class="form-item">
+                <div class="form-item-label">LAST NAME</div>
+                <div class="form-item-value name">
+                  <el-input v-model="userData.lastName" placeholder="Last Name" />
+                </div>
+              </div>
+            </div>
+            <div class="form-item">
+              <div class="form-item-label">USERNAME</div>
+              <div class="form-item-value">
+                <el-input v-model="userData.username" placeholder="Username" />
+              </div>
+            </div>
+            <div class="form-item">
+              <div class="form-item-label">ROLE</div>
+              <div class="form-item-value noborder radio">
+                <Radio multiple v-model="userData.role" :options="roleList" />
+              </div>
+            </div>
+          </div>
+          <div class="social-links">
+            <div class="title">SOCIAL LINKS</div>
+            <div class="links-list flex flex-col">
+              <div
+                class="links-item flex align-center"
+                v-for="(item, index) in userData.links"
+                :key="item"
+              >
+                <div class="link-index">link {{ index + 1 }}</div>
+                <div class="link-href flex-1">
+                  <el-input v-model="userData.links[index]" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="gap" />
+      <div class="setting-item security flex">
+        <div class="label-container">
+          <div class="label">Security</div>
+          <div class="label-desc">Manage your login email and password.</div>
+        </div>
+        <div class="context-container">
+          <div class="security-section">
+            <div class="security-row flex align-center">
+              <div class="security-main flex-1">
+                <div class="security-label">EMAIL</div>
+                <div class="security-value">{{ userData.email }}</div>
+              </div>
+              <button type="button" class="small-action-btn" @click="resetEmailDraft">
+                CANCEL
+              </button>
+            </div>
+            <div class="security-row">
+              <div class="security-label">NEW EMAIL ADDRESS</div>
+              <div class="security-input-wrap verify-input">
+                <el-input v-model="userData.newEmail" placeholder="Enter new email" />
+                <button type="button" class="verify-btn">Verify</button>
+              </div>
+            </div>
+            <div class="inner-divider" />
+            <div class="security-row flex align-center">
+              <div class="security-main flex-1">
+                <div class="security-label">PASSWORD</div>
+                <div class="security-value password-mask">.........</div>
+              </div>
+              <button type="button" class="small-action-btn" @click="resetPasswordDraft">
+                CANCEL
+              </button>
+            </div>
+            <div class="security-row">
+              <div class="security-label">NEW PASSWORD</div>
+              <div class="security-input-wrap">
+                <el-input
+                  v-model="userData.newPassword"
+                  type="password"
+                  show-password
+                  placeholder="Enter new password"
+                />
+              </div>
+              <div class="security-tip">You must satisfy ALL password conditions to register.</div>
+            </div>
+            <div class="security-row">
+              <div class="security-label">CURRENT PASSWORD</div>
+              <div class="security-input-wrap">
+                <el-input
+                  v-model="userData.currentPassword"
+                  type="password"
+                  show-password
+                  placeholder="Confirm with your password"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="gap" />
+      <div class="setting-item region flex">
+        <div class="label-container">
+          <div class="label">Language &amp; Region</div>
+          <div class="label-desc">Set your preferred language, region and currency display.</div>
+        </div>
+        <div class="context-container">
+          <div class="region-section">
+            <div class="region-row">
+              <div class="security-label">DISPLAY LANGUAGE</div>
+              <div class="select-wrap">
+                <el-select v-model="userData.language" placeholder="Select language">
+                  <el-option v-for="item in languageList" :key="item" :label="item" :value="item" />
+                </el-select>
+              </div>
+            </div>
+            <div class="region-row">
+              <div class="security-label">REGION</div>
+              <div class="select-wrap">
+                <el-select v-model="userData.region" placeholder="Select region">
+                  <el-option v-for="item in regionList" :key="item" :label="item" :value="item" />
+                </el-select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="gap" />
+      <div class="action-container flex">
+        <button type="button" class="save-btn">SAVE CHANGE</button>
+        <button type="button" class="discard-btn" @click="handleDiscard">DISCARD</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Radio from './components/Radio.vue'
+
+const userData = ref({
+  firstName: 'Alexandra',
+  lastName: 'Chen',
+  email: 'alexandra.chen@example.com',
+  username: '@alexandra.chen',
+  role: [],
+  links: ['https://instagram.com/username', 'https://...'],
+  newEmail: '',
+  newPassword: '',
+  currentPassword: '',
+  language: 'English',
+  region: 'Hong Kong SAR'
+})
+
+const roleList = [
+  'Fashion Enthusiast',
+  'Content Creator',
+  'Student',
+  'Retail / Buyer',
+  'Fashion Designer',
+  'Brand / Business',
+  'PR & Communications',
+  'Stylist',
+  'Graphic Designer',
+  '3D Artist',
+  'Other'
+].map((el) => ({ name: el, value: el }))
+
+const languageList = ['English', 'Chinese', 'Japanese']
+const regionList = ['Hong Kong SAR', 'Mainland China', 'Singapore', 'United Kingdom']
+
+const createDefaultData = () => ({
+  firstName: 'Alexandra',
+  lastName: 'Chen',
+  email: 'alexandra.chen@example.com',
+  username: '@alexandra.chen',
+  role: [],
+  links: ['https://instagram.com/username', 'https://...'],
+  newEmail: '',
+  newPassword: '',
+  currentPassword: '',
+  language: 'English',
+  region: 'Hong Kong SAR'
+})
+
+const resetEmailDraft = () => {
+  userData.value.newEmail = ''
+}
+
+const resetPasswordDraft = () => {
+  userData.value.newPassword = ''
+  userData.value.currentPassword = ''
+}
+
+const handleDiscard = () => {
+  userData.value = createDefaultData()
+}
+</script>
+
+<style lang="less" scoped>
+.setting-wrapper {
+  height: 100%;
+  overflow-y: auto;
+  .banner {
+    height: 14.8rem;
+    row-gap: 1.2rem;
+    background-color: #fafaf9;
+    .title {
+      font-family: 'KaiseiOpti-Bold';
+      font-weight: 700;
+      font-size: 4rem;
+      line-height: 3.6rem;
+    }
+    .slogan {
+      font-family: 'KaiseiOpti-Regular';
+      font-size: 1.6rem;
+      line-height: 2.4rem;
+    }
+  }
+  .setting-content {
+    padding: 0 18rem 12rem;
+    .setting-item {
+      column-gap: 21.4rem;
+      padding-top: 4rem;
+      .label-container {
+        width: 27.6rem;
+        font-family: 'KaiseiOpti-Medium';
+        .label {
+          font-weight: 500;
+          font-size: 2.8rem;
+          color: #232323;
+        }
+        .label-desc {
+          margin-top: 2rem;
+          font-size: 1.6rem;
+          color: #666666;
+        }
+      }
+      .context-container {
+        .info {
+          column-gap: 2.6rem;
+          margin-bottom: 3.6rem;
+          .thumb {
+            width: 8rem;
+            height: 8rem;
+            border-radius: 50%;
+            background-color: #999;
+            .edit-icon {
+              position: absolute;
+              width: 3rem;
+              height: 3rem;
+              right: 0;
+              bottom: 0;
+              border: 0.1rem solid #fff;
+              border-radius: 50%;
+            }
+          }
+          .name-email {
+            font-family: 'KaiseiOpti-Medium';
+            row-gap: 0.6rem;
+            .name {
+              font-size: 2.4rem;
+              color: #232323;
+              line-height: 3.6rem;
+            }
+            .email {
+              font-size: 1.8rem;
+              color: #979797;
+              line-height: 2.4rem;
+            }
+          }
+        }
+        .col-gap-2 {
+          column-gap: 2rem;
+        }
+        .form-container {
+          row-gap: 3rem;
+          .form-item {
+            .form-item-label {
+              font-family: 'KaiseiOpti-Medium';
+              font-size: 1.4rem;
+              color: #979797;
+              margin-bottom: 0.8rem;
+            }
+            .form-item-value {
+              border: 0.1rem solid #979797;
+              &.noborder {
+                border: none;
+              }
+              &.name {
+                width: 28.4rem;
+              }
+              &.radio {
+                width: 58rem;
+              }
+              :deep(.el-input) {
+                height: 4rem;
+                .el-input__wrapper {
+                  box-shadow: none;
+                  padding: 0 2rem;
+                  .el-input__inner {
+                    font-family: 'KaiseiOpti-Regular';
+                    color: #232323;
+                    font-size: 1.6rem;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .social-links {
+          margin-top: 5.8rem;
+          font-family: 'KaiseiOpti-Medium';
+          .title {
+            font-size: 1.4rem;
+            color: #585858;
+            margin-bottom: 2rem;
+          }
+          .links-list {
+            row-gap: 0.8rem;
+          }
+          .links-item {
+            column-gap: 3.4rem;
+            .link-index {
+              font-size: 1.4rem;
+              color: #979797;
+            }
+            .link-href {
+              color: #979797;
+              border: 0.1rem solid #979797;
+              :deep(.el-input) {
+                height: 4rem;
+                .el-input__wrapper {
+                  box-shadow: none;
+                  padding: 0 2rem;
+                  .el-input__inner {
+                    font-family: 'KaiseiOpti-Regular';
+                    color: #979797;
+                    font-size: 1.6rem;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .gap {
+      height: 0.05rem;
+      margin-top: 6rem;
+      background-color: #c4c4c4;
+    }
+    .security,
+    .region {
+      .context-container {
+        width: 58rem;
+      }
+    }
+    .security-section,
+    .region-section {
+      width: 58rem;
+    }
+    .security-row,
+    .region-row {
+      & + .security-row,
+      & + .region-row {
+        margin-top: 3rem;
+      }
+    }
+    .security-label {
+      margin-bottom: 0.8rem;
+      font-family: 'KaiseiOpti-Medium';
+      font-size: 1.4rem;
+      line-height: 2.4rem;
+      color: #585858;
+    }
+    .security-value {
+      height: 4rem;
+      display: flex;
+      align-items: center;
+      font-family: 'KaiseiOpti-Regular';
+      font-size: 1.6rem;
+      line-height: 2.4rem;
+      color: #232323;
+    }
+    .password-mask {
+      font-family: 'KaiseiOpti-Bold';
+      letter-spacing: 0.08rem;
+    }
+    .security-tip {
+      margin-top: 0.8rem;
+      font-family: 'KaiseiOpti-Regular';
+      font-size: 1.2rem;
+      line-height: 1.6rem;
+      color: #9f9f9f;
+    }
+    .security-input-wrap,
+    .select-wrap {
+      width: 58rem;
+      border: 0.1rem solid #979797;
+      :deep(.el-input),
+      :deep(.el-select) {
+        width: 100%;
+        height: 4rem;
+      }
+      :deep(.el-input__wrapper),
+      :deep(.el-select__wrapper) {
+        min-height: 4rem;
+        box-shadow: none;
+        border-radius: 0;
+        padding: 0 2rem;
+      }
+      :deep(.el-input__inner),
+      :deep(.el-select__selected-item),
+      :deep(.el-select__placeholder) {
+        font-family: 'KaiseiOpti-Regular';
+        font-size: 1.6rem;
+        color: #232323;
+      }
+      :deep(.el-input__inner::placeholder) {
+        color: #9f9f9f;
+      }
+    }
+    .verify-input {
+      display: flex;
+      align-items: stretch;
+      :deep(.el-input) {
+        flex: 1;
+      }
+    }
+    .verify-btn {
+      width: 7.8rem;
+      border: none;
+      border-left: 0.1rem solid #979797;
+      background: #fff;
+      font-family: 'KaiseiOpti-Medium';
+      font-size: 1.4rem;
+      color: #232323;
+      cursor: pointer;
+    }
+    .small-action-btn {
+      width: 10rem;
+      height: 3.2rem;
+      border: 0.1rem solid #c4c4c4;
+      background: #f6f6f6;
+      font-family: 'KaiseiOpti-Bold';
+      font-size: 1.2rem;
+      line-height: 2.6rem;
+      color: #232323;
+      cursor: pointer;
+    }
+    .inner-divider {
+      height: 0.05rem;
+      margin: 2.8rem 0 3rem;
+      background-color: #c4c4c4;
+    }
+    .action-container {
+      justify-content: center;
+      column-gap: 1.2rem;
+      margin-top: 2.8rem;
+    }
+    .save-btn,
+    .discard-btn {
+      height: 4.4rem;
+      font-family: 'KaiseiOpti-Bold';
+      font-size: 1.6rem;
+      cursor: pointer;
+    }
+    .save-btn {
+      width: 23.6rem;
+      border: 0.1rem solid #232323;
+      background: #232323;
+      color: #fff;
+    }
+    .discard-btn {
+      width: 12rem;
+      border: 0.1rem solid #c4c4c4;
+      background: #fff;
+      color: #232323;
+    }
+  }
+}
+</style>