MRC
/
geodata-frontend
Archived
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add: mosaic view active schema

Browse Source
dev
rrr-marble 4 years ago
parent de517c5bff
commit a024ab3987
3 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File

2
public/index.html
Unescape View File

@ -7,7 +7,7 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue 3 course</title> <title>Geoshop</title>
</head> </head>
<body> <body>

26
src/components/ActiveSchemaScreen.vue
Unescape View File

@ -20,6 +20,14 @@
</va-list-item-section> </va-list-item-section>
</va-list-item> </va-list-item>
</va-list> </va-list>
<div v-else class="card-row">
<div class="card-item flex lg4" v-for="(_, header, index) in items[0]" :key="index">
<va-card :bordered="false">
<va-card-content>{{ header }}</va-card-content>
</va-card>
</div>
</div>
</div> </div>
</template> </template>
@ -63,7 +71,7 @@ export default defineComponent({
"list-view", "list-view",
"mosaic-view", "mosaic-view",
], ],
selectedOption: "list-view" selectedOption: "mosaic-view"
} }
}, },
}) })
@ -75,14 +83,16 @@ export default defineComponent({
margin: 1rem; margin: 1rem;
} }
/* .header-list {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
} */
.header-item { .header-item {
padding: 0.5rem; padding: 0.5rem;
} }
.card-row {
display: flex;
flex-wrap: wrap;
}
.card-item {
margin: 1rem;
}
</style> </style>

4
src/main.js
Unescape View File

@ -19,6 +19,8 @@ import {
VaListItem, VaListItem,
VaListItemSection, VaListItemSection,
VaListItemLabel, VaListItemLabel,
VaCard,
VaCardContent
} from 'vuestic-ui' } from 'vuestic-ui'
import 'vuestic-ui/styles/essential.css' import 'vuestic-ui/styles/essential.css'
import 'vuestic-ui/styles/grid.css' import 'vuestic-ui/styles/grid.css'
@ -48,6 +50,8 @@ app.use(createVuesticEssential({
VaListItem, VaListItem,
VaListItemSection, VaListItemSection,
VaListItemLabel, VaListItemLabel,
VaCard,
VaCardContent
} }
})); }));