mohadese namavar
144 lines
3.9 KiB
Vue
144 lines
3.9 KiB
Vue
<template>
|
|
<NuxtLayout :name="device" :config="config">
|
|
<main class="panel-moeen-factors">
|
|
<table>
|
|
<caption>
|
|
<ul>
|
|
<li v-for="(value, key) in info" :key="key">
|
|
<label v-text="$t(key) + ':'" />
|
|
<span v-text="value" />
|
|
</li>
|
|
</ul>
|
|
</caption>
|
|
<thead>
|
|
<tr>
|
|
<th v-for="(column, i) in columns" :key="i" v-text="$t(column)" />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr></tr>
|
|
<tr v-for="(row, i) in rows" :key="i">
|
|
<td v-text="i + 1" />
|
|
<td v-for="(value, key) in row" :key="key" v-text="value" />
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</main>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { device, t } = inject('service')
|
|
const config = reactive({
|
|
desktop: { toolbar: true }, mobile: { header: { back: true, title: t('moeenFactors') } },
|
|
})
|
|
|
|
const { meta, query } = useRoute()
|
|
const { page = 1 } = query
|
|
|
|
const info = ref([])
|
|
const rows = ref([])
|
|
const columns = ref([])
|
|
|
|
const { status, data, error } = await useFetch(`/api/moeens/user`, {
|
|
headers: {
|
|
Authorization: useCookie('token')
|
|
}
|
|
})
|
|
|
|
if (status.value == 'success') {
|
|
// info.value = data.value.info
|
|
// rows.value = data.value.items
|
|
// columns.value = ["row", ...Object.keys(rows.value[0]), ""]
|
|
} else throw createError(error.value)
|
|
|
|
const show = () => { }
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.panel-moeen-factors {
|
|
@apply container w-full flex flex-col items-center max-lg:px-6 max-lg:gap-4;
|
|
@apply pt-8 pb-20 lg:pt-14 lg:pb-[7.5rem] overflow-x-auto;
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
@apply hidden;
|
|
}
|
|
|
|
table {
|
|
@apply w-[100.3rem] border border-[#E5E5E5];
|
|
|
|
caption {
|
|
@apply h-[3.6rem] border-x border-t px-6 border-[#E5E5E5];
|
|
|
|
ul {
|
|
@apply h-full flex items-center gap-4 text-xs lg:text-base;
|
|
|
|
li {
|
|
@apply flex items-center gap-2 font-vazir whitespace-nowrap;
|
|
|
|
label {
|
|
@apply text-[#333333] font-bold;
|
|
}
|
|
|
|
span {
|
|
@apply text-[#7F7F7F] font-medium;
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
@apply ml-[8.6rem];
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
@apply ml-[8.8rem] mr-auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
thead {
|
|
tr {
|
|
@apply h-[2.8rem] border border-[#E5E5E5] bg-[#F2F2F2];
|
|
|
|
th {
|
|
@apply border-l border-[#E5E5E5] px-2.5 text-xs lg:text-base;
|
|
@apply text-center text-[#333333] font-medium font-vazir;
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
@apply h-max;
|
|
|
|
tr {
|
|
@apply border-b h-[2.8rem] w-full;
|
|
|
|
td {
|
|
@apply border-l border-[#E5E5E5] px-2.5 text-[0.7em] lg:text-sm;
|
|
@apply text-center text-zinc-800 font-medium font-vazir;
|
|
|
|
&:nth-child(6) {
|
|
@apply w-[17.2rem] text-right;
|
|
}
|
|
|
|
&:nth-child(12) {
|
|
@apply w-[3.3rem];
|
|
|
|
button {
|
|
.p-button-icon {
|
|
@apply text-2xl text-[#B2B2B2];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
direction: ltr;
|
|
@apply ltr;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|