public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: home page

Browse Source 
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-06-03 13:46:15 +02:00
parent e47ff2456b
commit 4801e2f6c5
3 changed files with 81 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -1,5 +1,6 @@
{
"name": "it-tools",
"description": "",
"version": "0.1.0",
"private": true,
"scripts": {

18
src/App.vue
View File

@ -118,24 +118,6 @@
font-weight: 300 !important;
}
/* footer {*/
/* display: flex;*/
/* flex-direction: row;*/
/* justify-content: space-between;*/
/* color: rgba(255, 255, 255, 0.52) !important;*/
/* .footer-link {*/
/* text-decoration: none;*/
/* color: rgba(255, 255, 255, 0.52) !important;*/
/* border-bottom: 1px dashed;*/
/* &:hover {*/
/* color: #4CAF50 !important;*/
/* border-bottom: 1px solid;*/
/* }*/
/* }*/
/* }*/
.title {
text-decoration: none;
color: #fff !important;

80
src/routes/Home.vue
View File

@ -1,16 +1,86 @@
<template>
<v-card>
<v-card class="single-card">
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad at cumque dolore dolores, dolorum eius error est eum eveniet hic illum ipsum labore minus odio quibusdam repudiandae sed ullam veritatis!
<div class="card-wrapper ">
<div v-for="item in items" :key="item.text" class="pa-2">
<v-card class="card-element" color="primary" :to="item.path">
<v-card-text>
<v-icon>{{ item.icon }}</v-icon>
<div class="item-title">{{item.text}}</div>
</v-card-text>
</v-card>
</div>
</div>
</v-card-text>
</v-card>
</template>
<script>
import {toolsComponentsFlat} from "../router";
export default {
export default {
name: 'Home',
components: {
data: () => ({
items: toolsComponentsFlat
})
}
}
</script>
<style lang="less" scoped>
.card-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
div {
flex: 1 1 33%;
@media only screen and (max-width: 620px) {
flex: 0 1 50%;
}
@media only screen and (max-width: 450px) {
flex: 0 1 220px;
}
@media only screen and (max-width: 300px) {
flex: 0 1 100%;
}
.card-element {
border-radius: 24px 4px !important;
color: #ffffff !important;
font-weight: bold !important;
text-align: center;
transition: 0.2s ease;
position: relative;
top: 0;
&:hover {
position: relative;
top: -5px;
opacity: 0.9;
}
.v-icon {
font-size: 50px;
color: #ffffff;
margin: 15px 0;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.item-title {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
line-height: 22px;
height: 44px;
opacity: 1;
color: #ffffff;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
}
}
}
</style>