deep-stack/cosmos-explorer
4
0
Fork 0
forked from LaconicNetwork/cosmos-explorer
Code Pull Requests Activity

Parameters Mobile

Browse Source
This commit is contained in:
alisa
2023-04-27 19:00:44 +08:00
parent 881e64b3ff
commit a0104d5fee
3 changed files with 87 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CardParameter.vue
+23 -16
View File
@@ -1,22 +1,29 @@
<script lang="ts" setup>
import type { PropType } from 'vue';
const props = defineProps({
cardItem: {
type: Object as PropType<{title: string;items: Array<any>;}>,
},
})
cardItem: {
type: Object as PropType<{ title: string; items: Array<any> }>,
},
});
</script>
<template>
<div class="bg-card px-4 pt-3 pb-4 rounded mt-6"
v-if="props.cardItem?.items && props.cardItem?.items?.length > 0">
<div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
<div class="grid grid-cols-5 gap-4">
<div v-for="(item,index) of props.cardItem?.items" :key="index" class="rounded-sm bg-active px-4 py-2">
<div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
<div class="text-base text-main">{{ item?.value }}</div>
<!-- {{ item }} -->
</div>
</div>
<div
class="bg-card px-4 pt-3 pb-4 rounded mt-6"
v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
>
<div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
<div
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
>
<div
v-for="(item, index) of props.cardItem?.items"
:key="index"
class="rounded-sm bg-active px-4 py-2"
>
<div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
<div class="text-base text-main">{{ item?.value }}</div>
<!-- {{ item }} -->
</div>
</div>
</template>
</div>
</template>
src/components/TableParameter.vue
+21 -18
View File
@@ -1,26 +1,29 @@
<script lang="ts" setup>
import type { PropType } from 'vue';
const props = defineProps({
tableItem: {
type: Object as PropType<{title: string;items: Object;}>,
},
})
tableItem: {
type: Object as PropType<{ title: string; items: Object }>,
},
});
function formatTitle (name: string){
return String(name).replaceAll('_', ' ')
function formatTitle(name: string) {
return String(name).replaceAll('_', ' ');
}
</script>
<template>
<div class="bg-card px-4 pt-3 pb-4 rounded mt-6">
<div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div>
<div class="">
<div class="d-flex flex-nowrap" v-for="(item,index ) of props.tableItem?.items" :key="index">
<div class="mr-6">{{ formatTitle(item?.subtitle) }}</div>
<div class="flex-1" >{{ item?.value }}</div>
<div>{{typeof(item?.value )}}</div>
<!-- {{ item }} -->
</div>
</div>
<div class="bg-card px-4 pt-3 pb-4 rounded mt-6">
<div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div>
<div class="">
<div
class="flex flex-nowrap"
v-for="(item, index) of props.tableItem?.items"
:key="index"
>
<div class="mr-6">{{ formatTitle(item?.subtitle) }}</div>
<div class="flex-1">{{ item?.value }}</div>
<div>{{ typeof item?.value }}</div>
<!-- {{ item }} -->
</div>
</div>
</template>
</div>
</template>