aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/lanecarford_front
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
Details

Browse Source
This commit is contained in:
zhangyahui
2025-12-29 10:51:09 +08:00
parent 9c41bf4711 59c864fef3
commit f0ff9ebcbe
5 changed files with 497 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/api/login.ts
View File

@@ -59,3 +59,19 @@ export const googleAuth = (data: GoogleAuthParamsType): Promise<LoginResponse> =
params: data params: data
}) })
} }
/** 更改用户信息
* @param data 包含用户信息的对象
* @param data.username 用户名
* @param data.email 邮箱
* @param data.password 密码
* @returns 包含更新后的用户信息的对象
*/
export const updateUserInfo = (data: any) => {
return request({
url: '/api/auth/updateUserInfo',
method: 'post',
data
})
}

26
src/components/MyList.vue
View File

@@ -3,6 +3,7 @@
const props = defineProps({ const props = defineProps({
loading: { default: false, type: Boolean }, loading: { default: false, type: Boolean },
finish: { default: false, type: Boolean }, finish: { default: false, type: Boolean },
empty: { default: false, type: Boolean },
pel: { default: () => {}, type: Function } pel: { default: () => {}, type: Function }
}) })
const emit = defineEmits(['load']) const emit = defineEmits(['load'])
@@ -23,12 +24,13 @@
}) })
</script> </script>
<template> <template>
<div class="my-list" ref="el"> <div class="my-list" ref="el" :class="{ empty: !loading && empty }">
<slot></slot> <slot></slot>
<div class="footer"> <div class="footer">
<p v-show="!loading" class="placeholder" ref="placeholder"></p> <p v-show="!loading" class="placeholder" ref="placeholder"></p>
<span class="loading" v-show="loading">Loading...</span> <span class="loading" v-if="loading">Loading...</span>
<span class="nomore" v-show="finish">No more</span> <span class="empty" v-else-if="empty">Nothing Here</span>
<span class="nomore" v-else-if="finish">No more</span>
</div> </div>
</div> </div>
</template> </template>
@@ -40,12 +42,28 @@
> .footer { > .footer {
width: 100%; width: 100%;
font-size: 3rem; font-size: 3rem;
color: #000; color: #a1a1a1;
text-align: center; text-align: center;
margin: var(--my-list-footer-margin, 0); margin: var(--my-list-footer-margin, 0);
> .placeholder { > .placeholder {
height: 1px; height: 1px;
} }
> .empty {
font-size: 4rem;
}
}
&.empty {
> .footer {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 0;
margin: 0;
> .empty {
margin-bottom: 5rem;
}
}
} }
} }
</style> </style>

7
src/views/Workshop/creation/creation-list.vue
View File

@@ -268,7 +268,12 @@
</div> </div>
</div> </div>
<div class="list"> <div class="list">
<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad"> <my-list
v-model:loading="loading"
v-model:finish="finish"
@load="onLoad"
:empty="list.length === 0"
>
<div <div
class="item" class="item"
v-for="(v, i) in list" v-for="(v, i) in list"

19
src/views/Workshop/library.vue
View File

@@ -47,7 +47,7 @@
cancelButtonText: 'Cancel' cancelButtonText: 'Cancel'
}).catch(() => 0) }).catch(() => 0)
if (res === 0) return if (res === 0) return
console.log(obj,i) console.log(obj, i)
deleteCustomerPhoto(obj.visitRecordId) deleteCustomerPhoto(obj.visitRecordId)
.then(() => { .then(() => {
list.splice(i, 1) list.splice(i, 1)
@@ -68,7 +68,12 @@
<div class="library"> <div class="library">
<div class="title">Library</div> <div class="title">Library</div>
<div class="list"> <div class="list">
<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad"> <my-list
v-model:loading="loading"
v-model:finish="finish"
:empty="list.length === 0"
@load="onLoad"
>
<div class="item" v-for="(v, i) in list" :key="v.visitRecordId"> <div class="item" v-for="(v, i) in list" :key="v.visitRecordId">
<div class="image"> <div class="image">
<img v-lazy="v.defaultImageUrl" /> <img v-lazy="v.defaultImageUrl" />
@@ -115,18 +120,18 @@
} }
> .title { > .title {
font-family: satoshiRegular; font-family: satoshiBold;
font-size: 9rem; font-size: 8.9rem;
text-align: left; text-align: left;
line-height: 124%; line-height: 124%;
margin: 5rem; margin: 5rem 9.1rem;
} }
> .list { > .list {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
margin: 0 3rem; margin: 0 4.5rem;
> .my-list { > .my-list {
padding: 0 3.8rem; padding: 0 4.5rem;
--my-list-footer-margin: 2rem 0; --my-list-footer-margin: 2rem 0;
> .item { > .item {
position: relative; position: relative;

863
src/views/Workshop/profile.vue
View File

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