From 8af7092f56779e18d80845bfe233abbae525b848 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Mon, 29 Dec 2025 11:24:01 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=80=89=E6=8B=A9=E9=A1=BE=E5=AE=A2?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Workshop/profile.vue | 887 +++++++++++++++++----------------
 1 file changed, 444 insertions(+), 443 deletions(-)

diff --git a/src/views/Workshop/profile.vue b/src/views/Workshop/profile.vue
index bfe74f2..00d180e 100644
--- a/src/views/Workshop/profile.vue
+++ b/src/views/Workshop/profile.vue
@@ -1,159 +1,159 @@
 <script setup lang="ts">
-	import { ref, reactive, onMounted, inject } from 'vue'
-	import router from '@/router'
-	import { showConfirmDialog, showToast } from 'vant'
-	import { useUserInfoStore, useOverallStore } from '@/stores'
-	import { LogOut } from '@/api/login'
-	import { getCustomerList, type CustomerListParams, customerCheckin } from '@/api/workshop'
-	import MyEvent from '@/utils/myEvent'
-	import { encryptPassword } from '@/utils/tools'
-	import { updateUserInfo } from '@/api/login'
+import { ref, reactive, onMounted, inject } from 'vue'
+import router from '@/router'
+import { showConfirmDialog, showToast } from 'vant'
+import { useUserInfoStore, useOverallStore } from '@/stores'
+import { LogOut } from '@/api/login'
+import { getCustomerList, type CustomerListParams, customerCheckin } from '@/api/workshop'
+import MyEvent from '@/utils/myEvent'
+import { encryptPassword } from '@/utils/tools'
+import { updateUserInfo } from '@/api/login'
 
-	const props = defineProps<{
-		isCustomer?: boolean
-	}>()
+const props = defineProps<{
+  isCustomer?: boolean
+}>()
 
-	const userInfoStore = useUserInfoStore()
-	const overallStore = useOverallStore()
-	const emit = defineEmits(['view-type', 'selected-customer'])
-	const show = ref(false)
-	const isEdit = ref(false)
-	const form = reactive({
-		name: { msg: '', value: '' },
-		email: { msg: '', value: '' },
-		password: { show: true, msg: '', value: '' }
-	})
-	const open = () => {
-		form.name.value = userInfoStore.state.userInfo.username
-		form.email.value = userInfoStore.state.userInfo.email
-		form.password.value = ''
-		isEdit.value = false
-		show.value = true
-	}
-	const close = () => {
-		show.value = false
-	}
-	const onEditItem = (item) => {
-		if (!form[item]) return
-		form[item].edit = true
-	}
-	const onSaveItem = (item) => {
-		if (!form[item]) return
-		form[item].edit = false
-	}
-	const switchCustomer = () => {
-		// console.log('switchCustomer')
-		handleShowPopup(true)
-	}
-	const edit = () => {
-		form.password.value = ''
-		isEdit.value = true
-	}
-	const confirm = () => {
-		if (!isEdit.value) return
-		const password = form.password.value
-		const params = {
-			username: form.name.value,
-			email: form.email.value,
-			password
-		}
-		if (password) {
-			if (password.length < 6) {
-				return showToast('Password must be at least 6 characters')
-			} else {
-				params.password = encryptPassword(password)
-			}
-		} else {
-			params.password = userInfoStore.state.userInfo.password
-		}
+const userInfoStore = useUserInfoStore()
+const overallStore = useOverallStore()
+const emit = defineEmits(['view-type', 'selected-customer'])
+const show = ref(false)
+const isEdit = ref(false)
+const form = reactive({
+  name: { msg: '', value: '' },
+  email: { msg: '', value: '' },
+  password: { show: true, msg: '', value: '' }
+})
+const open = () => {
+  form.name.value = userInfoStore.state.userInfo.username
+  form.email.value = userInfoStore.state.userInfo.email
+  form.password.value = ''
+  isEdit.value = false
+  show.value = true
+}
+const close = () => {
+  show.value = false
+}
+const onEditItem = (item) => {
+  if (!form[item]) return
+  form[item].edit = true
+}
+const onSaveItem = (item) => {
+  if (!form[item]) return
+  form[item].edit = false
+}
+const switchCustomer = () => {
+  // console.log('switchCustomer')
+  handleShowPopup(true)
+}
+const edit = () => {
+  form.password.value = ''
+  isEdit.value = true
+}
+const confirm = () => {
+  if (!isEdit.value) return
+  const password = form.password.value
+  const params = {
+    username: form.name.value,
+    email: form.email.value,
+    password
+  }
+  if (password) {
+    if (password.length < 6) {
+      return showToast('Password must be at least 6 characters')
+    } else {
+      params.password = encryptPassword(password)
+    }
+  } else {
+    params.password = userInfoStore.state.userInfo.password
+  }
 
-		overallStore.setLoading(true)
-		updateUserInfo(params).then((res) => {
-			overallStore.setLoading(false)
-			showToast('Update success')
-			userInfoStore.setUserInfo({
-				...userInfoStore.state.userInfo,
-				...params
-			})
-			form.password.value = ''
-			isEdit.value = false
-		})
-	}
-	const logout = () => {
-		showConfirmDialog({
-			title: 'Log out',
-			message: 'Are you sure you want to log out?',
-			confirmButtonText: 'Yes',
-			cancelButtonText: 'Cancel'
-		})
-			.then(() => {
-				LogOut().then(() => {
-					userInfoStore.logOut()
-					router.push({ path: '/welcome' })
-				})
-			})
-			.catch(() => {})
-	}
+  overallStore.setLoading(true)
+  updateUserInfo(params).then((res) => {
+    overallStore.setLoading(false)
+    showToast('Update success')
+    userInfoStore.setUserInfo({
+      ...userInfoStore.state.userInfo,
+      ...params
+    })
+    form.password.value = ''
+    isEdit.value = false
+  })
+}
+const logout = () => {
+  showConfirmDialog({
+    title: 'Log out',
+    message: 'Are you sure you want to log out?',
+    confirmButtonText: 'Yes',
+    cancelButtonText: 'Cancel'
+  })
+    .then(() => {
+      LogOut().then(() => {
+        userInfoStore.logOut()
+        router.push({ path: '/welcome' })
+      })
+    })
+    .catch(() => {})
+}
 
-	const showSwitchCustomerPopup = ref(false)
-	const custmerParams = ref<CustomerListParams>({
-		current: 1,
-		size: 5,
-		desc: true
-	})
-	const customerList = ref<any[]>([])
-	const pager = reactive({
-		loading: false,
-		noMore: false,
-		total: null as number | null
-	})
-	const customerListEl = ref<HTMLElement | null>(null)
+const showSwitchCustomerPopup = ref(false)
+const custmerParams = ref<CustomerListParams>({
+  current: 1,
+  size: 5,
+  desc: true
+})
+const customerList = ref<any[]>([])
+const pager = reactive({
+  loading: false,
+  noMore: false,
+  total: null as number | null
+})
+const customerListEl = ref<HTMLElement | null>(null)
 
-	const loadCustomers = async (reset = false) => {
-		if (pager.loading) return
-		if (reset) {
-			custmerParams.value.current = 1
-			pager.noMore = false
-			customerList.value = []
-		}
-		if (pager.noMore) return
-		pager.loading = true
-		try {
-			const res: any = await getCustomerList(custmerParams.value)
-			let list: any[] = []
-			const pages = res?.pages ?? res?.data?.pages ?? null
-			if (res && Array.isArray(res.records)) {
-				list = res.records
-				pager.total = res.total ?? pager.total
-			} else if (res && Array.isArray(res.data)) {
-				list = res.data
-			} else if (res && res.data && Array.isArray(res.data.list)) {
-				list = res.data.list
-				pager.total = res.data.total ?? pager.total
-			}
+const loadCustomers = async (reset = false) => {
+  if (pager.loading) return
+  if (reset) {
+    custmerParams.value.current = 1
+    pager.noMore = false
+    customerList.value = []
+  }
+  if (pager.noMore) return
+  pager.loading = true
+  try {
+    const res: any = await getCustomerList(custmerParams.value)
+    let list: any[] = []
+    const pages = res?.pages ?? res?.data?.pages ?? null
+    if (res && Array.isArray(res.records)) {
+      list = res.records
+      pager.total = res.total ?? pager.total
+    } else if (res && Array.isArray(res.data)) {
+      list = res.data
+    } else if (res && res.data && Array.isArray(res.data.list)) {
+      list = res.data.list
+      pager.total = res.data.total ?? pager.total
+    }
 
-			if (reset) customerList.value = list
-			else customerList.value = customerList.value.concat(list)
+    if (reset) customerList.value = list
+    else customerList.value = customerList.value.concat(list)
 
-			if (pages != null) {
-				if (custmerParams.value.current >= pages) {
-					pager.noMore = true
-				} else {
-					custmerParams.value.current += 1
-				}
-			} else {
-				if (list.length === 0 || list.length < custmerParams.value.size) {
-					pager.noMore = true
-				} else {
-					custmerParams.value.current += 1
-				}
-			}
-		} catch (e) {
-			// ignore error for now
-		} finally {
-			pager.loading = false
-		}
-	}
+    if (pages != null) {
+      if (custmerParams.value.current >= pages) {
+        pager.noMore = true
+      } else {
+        custmerParams.value.current += 1
+      }
+    } else {
+      if (list.length === 0 || list.length < custmerParams.value.size) {
+        pager.noMore = true
+      } else {
+        custmerParams.value.current += 1
+      }
+    }
+  } catch (e) {
+    // ignore error for now
+  } finally {
+    pager.loading = false
+  }
+}
 
 const onScroll = (e: Event) => {
   const el = e.target as HTMLElement
@@ -166,7 +166,7 @@ const onScroll = (e: Event) => {
 // 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
 const handleShowPopup = (flag: boolean) => {
   showSwitchCustomerPopup.value = flag
-  if(props.isCustomer) return
+  if (props.isCustomer) return
   show.value = !flag
   if (flag) {
     loadCustomers(true)
@@ -182,7 +182,7 @@ const handleSelectCustomer = () => {
   if (selectedCustomer) {
     emit('selected-customer', selectedCustomer)
   }
-  if(!props.isCustomer){
+  if (!props.isCustomer) {
     // show.value = true
     customerCheckin({ nickname: selectedCustomer.name }).then((res) => {
       useUserInfoStore().resetGenerateParams()
@@ -193,327 +193,328 @@ const handleSelectCustomer = () => {
   showSwitchCustomerPopup.value = false
 }
 
-	const handleFetchCustomerList = () => {
-		loadCustomers(true)
-	}
-	MyEvent.add('update-customer-list', handleFetchCustomerList)
+const handleFetchCustomerList = () => {
+  loadCustomers(true)
+}
+MyEvent.add('update-customer-list', handleFetchCustomerList)
 
 // const openSwitchCustomerPopup = (flag = true) => {
 //   showSwitchCustomerPopup.value = flag
 // }
 
-	onMounted(() => {
-		handleFetchCustomerList()
-	})
+onMounted(() => {
+  handleFetchCustomerList()
+})
 
 defineExpose({ open, close, handleShowPopup })
 </script>
 
 <template>
-	<van-popup class="van-popup" v-model:show="show" position="bottom" round>
-		<div class="profile">
-			<div class="header">
-				<span class="title">Profile</span>
-				<van-icon name="cross" class="close" @click="close" />
-			</div>
-			<form class="box" @submit.prevent.stop="confirm">
-				<div class="form-item">
-					<div class="label">Your Name</div>
-					<label class="input">
-						<div class="icon"><SvgIcon name="user" size="64" /></div>
-						<input
-							type="text"
-							placeholder="Enter your name"
-							v-model="form.name.value"
-							:readonly="!isEdit"
-							required
-						/>
-						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('name')">
+  <van-popup class="van-popup" v-model:show="show" position="bottom" round>
+    <div class="profile">
+      <div class="header">
+        <span class="title">Profile</span>
+        <van-icon name="cross" class="close" @click="close" />
+      </div>
+      <form class="box" @submit.prevent.stop="confirm">
+        <div class="form-item">
+          <div class="label">Your Name</div>
+          <label class="input">
+            <div class="icon"><SvgIcon name="user" size="64" /></div>
+            <input
+              type="text"
+              placeholder="Enter your name"
+              v-model="form.name.value"
+              :readonly="!isEdit"
+              required
+            />
+            <!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('name')">
 							<SvgIcon name="confirmation" size="37" />
 						</div>
 						<div class="icon" v-else @click="onEditItem('name')">
 							<SvgIcon name="edit" size="37" />
 						</div> -->
-					</label>
-					<p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
-				</div>
-				<div class="form-item">
-					<div class="label">Your Email</div>
-					<label class="input">
-						<div class="icon"><SvgIcon name="email" size="64" /></div>
-						<input
-							type="email"
-							placeholder="Enter your email"
-							v-model="form.email.value"
-							:readonly="!isEdit"
-							required
-						/>
-						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('email')">
+          </label>
+          <p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
+        </div>
+        <div class="form-item">
+          <div class="label">Your Email</div>
+          <label class="input">
+            <div class="icon"><SvgIcon name="email" size="64" /></div>
+            <input
+              type="email"
+              placeholder="Enter your email"
+              v-model="form.email.value"
+              :readonly="!isEdit"
+              required
+            />
+            <!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('email')">
 							<SvgIcon name="confirmation" size="37" />
 						</div>
 						<div class="icon" v-else @click="onEditItem('email')">
 							<SvgIcon name="edit" size="37" />
 						</div> -->
-					</label>
-					<p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
-				</div>
-				<div class="form-item" v-if="isEdit">
-					<div class="label">Password</div>
-					<label class="input">
-						<div class="icon" @click="form.password.show = !form.password.show">
-							<SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="64" />
-						</div>
-						<input
-							:type="form.password.show ? 'text' : 'password'"
-							placeholder="Enter your password"
-							v-model="form.password.value"
-							:readonly="!isEdit"
-						/>
-						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('password')">
+          </label>
+          <p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
+        </div>
+        <div class="form-item" v-if="isEdit">
+          <div class="label">Password</div>
+          <label class="input">
+            <div class="icon" @click="form.password.show = !form.password.show">
+              <SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="64" />
+            </div>
+            <input
+              :type="form.password.show ? 'text' : 'password'"
+              placeholder="Enter your password"
+              v-model="form.password.value"
+              :readonly="!isEdit"
+            />
+            <!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('password')">
 							<SvgIcon name="confirmation" size="37" />
 						</div>
 						<div class="icon" v-else @click="onEditItem('password')">
 							<SvgIcon name="edit" size="37" />
 						</div> -->
-					</label>
-					<p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
-				</div>
+          </label>
+          <p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
+        </div>
 
-				<template v-if="isEdit">
-					<button type="submit" class="confirm">Confirm</button>
-					<p class="tip">Powered by AiDLab for Lane Crawford</p>
-				</template>
-				<template v-else>
-					<button class="switch" @click="switchCustomer">Switch Customer</button>
-					<button class="edit" @click="edit">Edit Profile</button>
-					<button class="logout" @click="logout">Log out</button>
-				</template>
-			</form>
-		</div>
-	</van-popup>
-	<van-popup
-		class="user-popup"
-		v-model:show="showSwitchCustomerPopup"
-		round
-		position="bottom"
-		teleport="body"
-	>
-		<div class="popup-title flex">
-			<div class="title-txt">Saved Customer ID</div>
-			<SvgIcon name="close_nocolor" color="#a1a1a1" size="40" @click="handleShowPopup(false)" />
-		</div>
-		<div ref="customerListEl" class="cusomter-list" @scroll="onScroll">
-			<div
-				class="customer-item flex flex-align-center flex-between"
-				v-for="(item, index) in customerList"
-				:key="index + 'customer'"
-				@click="handleChangeChecked(item)"
-			>
-				<div class="info">
-					<div class="name">{{ item.name }}</div>
-					<div class="id">{{ item.vipId }}</div>
-				</div>
-				<div class="select-box">
-					<div class="check-box flex flex-center" v-show="!item.checked">
-						<div class="check"></div>
-					</div>
-					<img v-show="item.checked" class="checked-icon" src="@/assets/images/checked.png" />
-				</div>
-			</div>
-		</div>
-		<div class="list-footer">
-			<div v-if="pager.loading">Loading...</div>
-			<div v-else-if="pager.noMore">No more</div>
-		</div>
-		<div class="confirm-btn" @click="handleSelectCustomer">Confirm</div>
-	</van-popup>
+        <template v-if="isEdit">
+          <button type="submit" class="confirm">Confirm</button>
+          <p class="tip">Powered by AiDLab for Lane Crawford</p>
+        </template>
+        <template v-else>
+          <button class="switch" @click="switchCustomer">Switch Customer</button>
+          <button class="edit" @click="edit">Edit Profile</button>
+          <button class="logout" @click="logout">Log out</button>
+        </template>
+      </form>
+    </div>
+  </van-popup>
+  <van-popup
+    class="user-popup"
+    v-model:show="showSwitchCustomerPopup"
+    round
+    position="bottom"
+    teleport="body"
+  >
+    <div class="popup-title flex">
+      <div class="title-txt">Saved Customer ID</div>
+      <SvgIcon name="close_nocolor" color="#a1a1a1" size="40" @click="handleShowPopup(false)" />
+    </div>
+    <div ref="customerListEl" class="cusomter-list" @scroll="onScroll">
+      <div
+        class="customer-item flex flex-align-center flex-between"
+        v-for="(item, index) in customerList"
+        :key="index + 'customer'"
+        @click="handleChangeChecked(item)"
+      >
+        <div class="info">
+          <div class="name">{{ item.name }}</div>
+          <div class="id">{{ item.vipId }}</div>
+        </div>
+        <div class="select-box">
+          <div class="check-box flex flex-center" v-show="!item.checked">
+            <div class="check"></div>
+          </div>
+          <img v-show="item.checked" class="checked-icon" src="@/assets/images/checked.png" />
+        </div>
+      </div>
+      <div class="list-footer">
+        <div v-if="pager.loading">Loading...</div>
+        <div v-else-if="pager.noMore">No more</div>
+      </div>
+    </div>
+    <div class="confirm-btn" @click="handleSelectCustomer">Confirm</div>
+    <div class="van-safe-area-bottom"></div>
+  </van-popup>
 </template>
 
 <style scoped lang="less">
-	.van-popup {
-		max-height: 90%;
-		--van-popup-round-radius: 7.8rem;
-	}
-	.profile {
-		margin: 6.5rem 0;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		> .header {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 100%;
-			padding: 0 7rem;
-			margin-bottom: 8rem;
-			> .title {
-				font-family: satoshiBold;
-				font-size: 4.6rem;
-				color: #181725;
-			}
-			> .close {
-				margin-left: auto;
-				font-size: 5rem;
-				color: #a1a1a1;
-			}
-		}
-		> .box {
-			width: 100%;
-			padding: 0 13rem;
-			> div {
-				width: 100%;
-				margin-top: 5.1rem;
-				&:first-child {
-					margin-top: 0;
-				}
-			}
-			> button {
-				margin-top: 8.5rem;
-				width: 100%;
-				height: 14.5rem;
-				border-radius: 2rem;
-				font-size: 4rem;
-				border: 0.2rem solid #3b3b3b;
-				font-family: satoshiBold;
-			}
-			> .form-item {
-				> .label {
-					margin-bottom: 2.5rem;
-					font-family: satoshiBold;
-					font-size: 2.9rem;
-					line-height: 120%;
-					color: #262422;
-				}
-				> .input {
-					// width: 100%;
-					height: 13.9rem;
-					border-radius: 2.5rem;
-					border: 0.2rem solid #f1ecec;
-					box-sizing: content-box;
-					display: flex;
-					align-items: center;
-					overflow: hidden;
-					padding: 0 2.5rem;
-					> * {
-						margin-right: 2.5rem;
-						&:last-child {
-							margin-right: 0;
-						}
-					}
-					> .icon {
-						// margin: 0 2.5rem;
-						--svg-icon-color: #ababab;
-					}
-					> input {
-						width: 0;
-						flex: 1;
-						height: 100%;
-						font-family: satoshiMedium;
-						font-size: 3.5rem;
-						color: #000;
-						border: none;
-						&::placeholder {
-							color: #ababab;
-						}
-					}
-				}
-				> .error {
-					margin-top: 1rem;
-					font-family: satoshiRegular;
-					font-size: 2.5rem;
-					line-height: 120%;
-					color: #ff0000;
-				}
-			}
-			> .switch {
-				background-color: transparent;
-				color: #222;
-			}
-			> .confirm,
-			> .edit,
-			> .logout {
-				background-color: #000;
-				color: #fff;
-			}
-			> .tip {
-				font-family: satoshiRegular;
-				text-align: center;
-				font-size: 3rem;
-				color: #a1a1a1;
-				margin-top: 17.8rem;
-			}
-		}
-	}
+.van-popup {
+  max-height: 90%;
+  --van-popup-round-radius: 7.8rem;
+}
+.profile {
+  margin: 6.5rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  > .header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 0 7rem;
+    margin-bottom: 8rem;
+    > .title {
+      font-family: satoshiBold;
+      font-size: 4.6rem;
+      color: #181725;
+    }
+    > .close {
+      margin-left: auto;
+      font-size: 5rem;
+      color: #a1a1a1;
+    }
+  }
+  > .box {
+    width: 100%;
+    padding: 0 13rem;
+    > div {
+      width: 100%;
+      margin-top: 5.1rem;
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+    > button {
+      margin-top: 8.5rem;
+      width: 100%;
+      height: 14.5rem;
+      border-radius: 2rem;
+      font-size: 4rem;
+      border: 0.2rem solid #3b3b3b;
+      font-family: satoshiBold;
+    }
+    > .form-item {
+      > .label {
+        margin-bottom: 2.5rem;
+        font-family: satoshiBold;
+        font-size: 2.9rem;
+        line-height: 120%;
+        color: #262422;
+      }
+      > .input {
+        // width: 100%;
+        height: 13.9rem;
+        border-radius: 2.5rem;
+        border: 0.2rem solid #f1ecec;
+        box-sizing: content-box;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        padding: 0 2.5rem;
+        > * {
+          margin-right: 2.5rem;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        > .icon {
+          // margin: 0 2.5rem;
+          --svg-icon-color: #ababab;
+        }
+        > input {
+          width: 0;
+          flex: 1;
+          height: 100%;
+          font-family: satoshiMedium;
+          font-size: 3.5rem;
+          color: #000;
+          border: none;
+          &::placeholder {
+            color: #ababab;
+          }
+        }
+      }
+      > .error {
+        margin-top: 1rem;
+        font-family: satoshiRegular;
+        font-size: 2.5rem;
+        line-height: 120%;
+        color: #ff0000;
+      }
+    }
+    > .switch {
+      background-color: transparent;
+      color: #222;
+    }
+    > .confirm,
+    > .edit,
+    > .logout {
+      background-color: #000;
+      color: #fff;
+    }
+    > .tip {
+      font-family: satoshiRegular;
+      text-align: center;
+      font-size: 3rem;
+      color: #a1a1a1;
+      margin-top: 17.8rem;
+    }
+  }
+}
 
-	.van-popup.user-popup {
-		height: 116.1rem;
-		color: #181725;
-		border-top-left-radius: 7.8rem;
-		border-top-right-radius: 7.8rem;
-		.c-svg {
-			width: initial;
-		}
-		.popup-title {
-			align-items: center;
-			justify-content: space-between;
-			font-weight: 700;
-			font-family: 'satoshiBold';
-			font-size: 4.8rem;
-			padding: 12rem 7.4rem 7.8rem 6.7rem;
-			border-bottom: 0.26rem solid #e2e2e2b2;
-		}
-		.cusomter-list {
-			padding: 0 7rem 0 6.6rem;
-			font-family: 'satoshiMedium';
-			color: #000;
-			/* Fixed list area: show up to 4 items, enable vertical scroll when overflow */
-			height: 64.8rem; /* 4 * 16.2rem (customer-item height) */
-			overflow-y: auto;
-			-webkit-overflow-scrolling: touch;
-			.customer-item {
-				height: 16.2rem;
-				border-bottom: 0.26rem solid #e2e2e2b2;
-				.info {
-					.name {
-						font-size: 3.6rem;
-					}
-					.id {
-						font-size: 3.6rem;
-						color: #b3b3b3;
-					}
-				}
-				.checked-icon,
-				.check-box {
-					width: 6rem;
-					height: 6rem;
-					box-sizing: border-box;
-				}
-				.check {
-					width: 4.8rem;
-					height: 4.8rem;
-					border-radius: 50%;
-					border: 0.4rem solid #000;
-				}
-			}
-		}
-		.list-footer {
-			text-align: center;
-			padding: 2rem 0;
-			font-size: 3rem;
-			color: #9b9b9b;
-		}
-		.confirm-btn {
-			margin: 4.9rem 12.7rem 0 13.3rem;
-			border: 0.25rem solid #3b3b3b;
-			width: 82rem;
-			height: 14.5rem;
-			border-radius: 2rem;
-			font-family: 'satoshiBold';
-			font-weight: 700;
-			font-size: 4rem;
-			line-height: 14.5rem;
-			box-sizing: border-box;
-			text-align: center;
-		}
-	}
+.van-popup.user-popup {
+  height: 116.1rem;
+  color: #181725;
+  border-top-left-radius: 7.8rem;
+  border-top-right-radius: 7.8rem;
+  .c-svg {
+    width: initial;
+  }
+  .popup-title {
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 700;
+    font-family: 'satoshiBold';
+    font-size: 4.8rem;
+    padding: 12rem 7.4rem 7.8rem 6.7rem;
+    border-bottom: 0.26rem solid #e2e2e2b2;
+  }
+  .cusomter-list {
+    padding: 0 7rem 0 6.6rem;
+    font-family: 'satoshiMedium';
+    color: #000;
+    /* Fixed list area: show up to 4 items, enable vertical scroll when overflow */
+    height: 64.8rem; /* 4 * 16.2rem (customer-item height) */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    .customer-item {
+      height: 16.2rem;
+      border-bottom: 0.26rem solid #e2e2e2b2;
+      .info {
+        .name {
+          font-size: 3.6rem;
+        }
+        .id {
+          font-size: 3.6rem;
+          color: #b3b3b3;
+        }
+      }
+      .checked-icon,
+      .check-box {
+        width: 6rem;
+        height: 6rem;
+        box-sizing: border-box;
+      }
+      .check {
+        width: 4.8rem;
+        height: 4.8rem;
+        border-radius: 50%;
+        border: 0.4rem solid #000;
+      }
+    }
+  }
+  .list-footer {
+    text-align: center;
+    padding: 2rem 0;
+    font-size: 3rem;
+    color: #9b9b9b;
+  }
+  .confirm-btn {
+    margin: 4.9rem 12.7rem 0 13.3rem;
+    border: 0.25rem solid #3b3b3b;
+    width: 82rem;
+    height: 14.5rem;
+    border-radius: 2rem;
+    font-family: 'satoshiBold';
+    font-weight: 700;
+    font-size: 4rem;
+    line-height: 14.5rem;
+    box-sizing: border-box;
+    text-align: center;
+  }
+}
 </style>