63 lines
2.1 KiB
Vue
63 lines
2.1 KiB
Vue
<template>
|
|
<q-page class="q-pa-md">
|
|
<div class="column items-center q-gutter-y-md">
|
|
<router-link to="/customer/123"></router-link>
|
|
<q-card v-for="customer in customers" :key="customer.id" class="card">
|
|
<q-card-section horizontal clickable>
|
|
<div class="col items-center no-wrap">
|
|
<div class="col">
|
|
<div class="text-h6">{{ customer.name }}</div>
|
|
<div class="text-subtitle2">@{{ customer.username }}</div>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<q-btn color="grey-7" round flat icon="more_vert">
|
|
<q-menu cover auto-close>
|
|
<q-list>
|
|
<q-item clickable>
|
|
<q-item-section>Action 1</q-item-section>
|
|
</q-item>
|
|
<q-item clickable>
|
|
<q-item-section>Action 2</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<q-separator vertical />
|
|
|
|
<q-card-actions vertical class="justify-around">
|
|
<q-btn flat round color="red" icon="favorite" />
|
|
<q-btn flat round color="accent" icon="bookmark" />
|
|
<q-btn flat round color="primary" icon="share" />
|
|
</q-card-actions>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const customers = [
|
|
{
|
|
id: 1101,
|
|
name: 'Bruce Wayne',
|
|
username: 'batman',
|
|
},
|
|
{
|
|
id: 1102,
|
|
name: 'James Gordon',
|
|
username: 'jamesgordon',
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
width: 100%;
|
|
max-width: 60em;
|
|
}
|
|
</style>
|