add setting mockup

This commit is contained in:
SRP-mango 2023-08-02 03:15:33 +07:00
parent a2651f5406
commit c04b54a586
2 changed files with 120 additions and 15 deletions

View file

@ -19,21 +19,23 @@
</v-card> -->
<v-card
<v-card fluid
class="mx-auto"
max-width="420"
height="600"
max-width="500px"
width="90vw"
max-height="600px"
height="90vh"
>
<v-list
item-props
lines="two"
lines="three"
>
<v-list-item
v-for="(item, i) in items"
:key="i"
:value="item"
>
<template v-slot:prepend>
<v-img
:width="32"
@ -67,7 +69,5 @@
</script>
<style >
.v-list__group__header__prepend-icon {
color: red;
}
</style>

View file

@ -1,15 +1,120 @@
<template>
<v-sheet class="d-flex justify-center">
<v-sheet class="ma-2 pa-4 mb-auto">
<v-row class="ma-2" justify="space-around">
<v-avatar
color="grey"
size="128"
>
<v-img cover src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/User-avatar.svg/1200px-User-avatar.svg.png"></v-img>
</v-avatar>
</v-row>
<v-list-item
center
class="text-black"
title="SRP Rottenmango"
subtitle="sasha@example.org"
>
</v-list-item>
</v-sheet>
</v-sheet>
<v-sheet class="d-flex justify-center ma-2">
<v-sheet class="mb-auto"
max-width="420px"
min-width="200px"
width="95vw">
<v-list class = "ma-2" density="compact">
<v-list-item
v-for="(item, i) in account_items"
:key="i"
:value="item"
>
<template v-slot:append>
<v-icon :icon="item.icon"></v-icon>
</template>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item>
</v-list>
<v-list class = "ma-2" density="compact">
<v-list-subheader>การแสดงผล</v-list-subheader>
<v-list-item
v-for="(item, i) in display_items"
:key="i"
:value="item"
>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item>
</v-list>
<v-list class = "ma-2" density="compact">
<v-list-subheader>การนำทาง</v-list-subheader>
<v-list-item
v-for="(item, i) in navigation_items"
:key="i"
:value="item"
>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item>
</v-list>
<v-list class = "ma-2" density="compact">
<v-list-item
v-for="(item, i) in about_items"
:key="i"
:value="item"
>
<template v-slot:append>
<v-icon :icon="item.icon"></v-icon>
</template>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item>
</v-list>
<v-btn class = "ma-2 mt-3" width="100%"
color="red">
ลงชอออก
</v-btn>
</v-sheet>
</v-sheet>
<div style="color: #8f8f8f;">Little Lines เวอร DATE-VERSION</div>
<h1>Setting</h1>
<ul>
<li>Accout Setting</li>
</ul>
<ul>
<li style="color: #8f8f8f;">Little Lines เวอร DATE-VERSION</li>
</ul>
</template>
<script setup>
const account_items = [
{ text: 'ตั้งค่าบัญชี',icon: 'mdi-chevron-right'},
]
const display_items = [
{ text: 'ภาษา'},
{ text: 'ธีม' },
]
const navigation_items = [
{ text: 'โหมดเริ่มต้น'},
]
const about_items = [
{ text: 'เกี่ยวกับ',icon: 'mdi-chevron-right'},
]
</script>