@burh/nuxt-core 1.0.180 → 1.0.182
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,86 +1,120 @@
|
|
|
1
1
|
<template lang="">
|
|
2
2
|
<div v-if='isShowing' class="fullpage-loading">
|
|
3
|
+
|
|
3
4
|
<span class="loader-wrapper">
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
<div class="animetedFadeIn">
|
|
6
|
+
<div v-if='!isLoadingShowing' class="loading-product-icon">
|
|
7
|
+
<div :class="'mb-5 loading product-item--avatar bg-' + color">
|
|
6
8
|
<img :src="productImage" alt="" />
|
|
7
|
-
|
|
9
|
+
</div>
|
|
10
|
+
<div class="d-flex justify-content-center align-items-center">
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
<div v-else class=loading-product>
|
|
14
|
+
<div :class="'mb-5 product-item--avatar bg-' + color">
|
|
15
|
+
<div class="spin">
|
|
16
|
+
<i
|
|
17
|
+
:class="'fas fa-2x products-spin fa-circle-notch fa-spin text-'"></i>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
8
20
|
<div class="d-flex justify-content-center align-items-center">
|
|
9
|
-
<i
|
|
10
|
-
:class="
|
|
11
|
-
'fas fa-3x fa-circle-notch fa-spin text-' + color
|
|
12
|
-
"
|
|
13
|
-
></i>
|
|
14
21
|
</div>
|
|
15
22
|
</div>
|
|
23
|
+
</div>
|
|
16
24
|
</span>
|
|
17
25
|
</div>
|
|
18
26
|
</template>
|
|
19
|
-
|
|
20
27
|
<script>
|
|
28
|
+
import { set } from "d3";
|
|
21
29
|
export default {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
},
|
|
29
|
-
productImage: String,
|
|
30
|
-
color: String
|
|
30
|
+
name: "new-loading",
|
|
31
|
+
props: {
|
|
32
|
+
isLoading: {
|
|
33
|
+
type: Boolean,
|
|
34
|
+
default: false,
|
|
35
|
+
description: "If the parent screen is loading",
|
|
31
36
|
},
|
|
37
|
+
productImage: String,
|
|
38
|
+
color: String,
|
|
39
|
+
},
|
|
32
40
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
41
|
+
data() {
|
|
42
|
+
return {
|
|
43
|
+
isShowing: true,
|
|
44
|
+
isLoadingShowing: false,
|
|
45
|
+
};
|
|
46
|
+
},
|
|
38
47
|
|
|
39
|
-
|
|
48
|
+
mounted() {
|
|
49
|
+
const currentPage = window.location.pathname.split("/")[1];
|
|
50
|
+
if (sessionStorage.getItem("lastPage") != currentPage) {
|
|
51
|
+
sessionStorage.setItem("lastPage", currentPage);
|
|
52
|
+
} else {
|
|
53
|
+
this.isShowing = false;
|
|
54
|
+
}
|
|
55
|
+
setTimeout(() => (this.isLoadingShowing = true), 600);
|
|
56
|
+
},
|
|
40
57
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}else{
|
|
45
|
-
this.isShowing = false;
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
// beforeDestroy() {
|
|
49
|
-
// sessionStorage.removeItem('lastPage');
|
|
50
|
-
// },
|
|
58
|
+
// beforeDestroy() {
|
|
59
|
+
// sessionStorage.removeItem('lastPage');
|
|
60
|
+
// },
|
|
51
61
|
};
|
|
52
62
|
</script>
|
|
53
63
|
|
|
64
|
+
|
|
54
65
|
<style lang="scss" scoped>
|
|
55
66
|
// @import "assets/sass/burh-ds/variables/_colors.scss";
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
67
|
+
|
|
68
|
+
@keyframes fadeIn {
|
|
69
|
+
from {
|
|
70
|
+
opacity: 0;
|
|
71
|
+
}
|
|
72
|
+
to {
|
|
73
|
+
opacity: 1;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.fullpage-loading {
|
|
78
|
+
width: 100vw;
|
|
79
|
+
height: 100vh;
|
|
80
|
+
position: fixed;
|
|
81
|
+
top: 0;
|
|
82
|
+
left: 0;
|
|
83
|
+
z-index: 1000;
|
|
63
84
|
}
|
|
64
85
|
.product-item--avatar {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
86
|
+
width: 60px;
|
|
87
|
+
height: 60px;
|
|
88
|
+
border-radius: 14.0834px;
|
|
68
89
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
90
|
+
display: flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
justify-content: center;
|
|
72
93
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
94
|
+
img {
|
|
95
|
+
color: #fff;
|
|
96
|
+
}
|
|
76
97
|
}
|
|
77
98
|
|
|
78
99
|
.loader-wrapper {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
100
|
+
background-color: #fff;
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
width: 100vw;
|
|
105
|
+
height: 100vh;
|
|
106
|
+
position: relative;
|
|
85
107
|
}
|
|
108
|
+
|
|
109
|
+
.spin {
|
|
110
|
+
color: #fff;
|
|
111
|
+
-webkit-animation: fa-spin 1s infinite linear;
|
|
112
|
+
animation: fa-spin 1s infinite linear;
|
|
113
|
+
line-height: 1;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.animetedFadeIn {
|
|
117
|
+
animation: fadeIn 0.3s;
|
|
118
|
+
}
|
|
119
|
+
|
|
86
120
|
</style>
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="card-body">
|
|
3
|
+
<h4 class="aria-text">Funcionalidades</h4>
|
|
4
|
+
<ul class="list-unstyled list line-card">
|
|
5
|
+
<li class="functionality-item text-center cursor-pointer card-item">
|
|
6
|
+
<div class="functionality-item--icone item"></div>
|
|
7
|
+
</li>
|
|
8
|
+
<li
|
|
9
|
+
class="functionality-item text-center cursor-pointer border-left card-item"
|
|
10
|
+
>
|
|
11
|
+
<div class="functionality-item--icone item"></div>
|
|
12
|
+
</li>
|
|
13
|
+
</ul>
|
|
14
|
+
<hr />
|
|
15
|
+
<div class="item-text"></div>
|
|
16
|
+
<ul class="list-unstyled list line-card">
|
|
17
|
+
<li class="performance-item primary">
|
|
18
|
+
<span class="performance-item--title item"></span>
|
|
19
|
+
<span class="performance-item--value"></span>
|
|
20
|
+
</li>
|
|
21
|
+
<li class="performance-item">
|
|
22
|
+
<span class="performance-item--title item"></span>
|
|
23
|
+
<span class="performance-item--value"></span>
|
|
24
|
+
</li>
|
|
25
|
+
<li class="performance-item">
|
|
26
|
+
<span class="performance-item--title item"></span>
|
|
27
|
+
<span class="performance-item--value"></span>
|
|
28
|
+
</li>
|
|
29
|
+
</ul>
|
|
30
|
+
<div class="item-text w-50 mt-5"></div>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script>
|
|
35
|
+
export default {
|
|
36
|
+
name: 'home-skeleton'
|
|
37
|
+
};
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<style lang="scss" scoped>
|
|
41
|
+
.item {
|
|
42
|
+
width: 50px;
|
|
43
|
+
height: 50px;
|
|
44
|
+
border-radius: 50%;
|
|
45
|
+
|
|
46
|
+
-webkit-animation-duration: 1s;
|
|
47
|
+
-webkit-animation-fill-mode: forwards;
|
|
48
|
+
-webkit-animation-iteration-count: infinite;
|
|
49
|
+
-webkit-animation-name: placeholderSkeleton;
|
|
50
|
+
-webkit-animation-timing-function: linear;
|
|
51
|
+
background: #e0e3e6;
|
|
52
|
+
background-image: -webkit-gradient(
|
|
53
|
+
linear,
|
|
54
|
+
left center,
|
|
55
|
+
right center,
|
|
56
|
+
from(#e0e3e6),
|
|
57
|
+
color-stop(0.2, #edeef1),
|
|
58
|
+
color-stop(0.4, #e0e3e6),
|
|
59
|
+
to(#e0e3e6)
|
|
60
|
+
);
|
|
61
|
+
background-image: -webkit-linear-gradient(
|
|
62
|
+
left,
|
|
63
|
+
#e0e3e6 0%,
|
|
64
|
+
#edeef1 20%,
|
|
65
|
+
#e0e3e6 40%,
|
|
66
|
+
#e0e3e6 100%
|
|
67
|
+
);
|
|
68
|
+
background-repeat: no-repeat;
|
|
69
|
+
background-size: 800px 104px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.item-text {
|
|
73
|
+
width: 100px;
|
|
74
|
+
height: 20px;
|
|
75
|
+
border-radius: 5px;
|
|
76
|
+
|
|
77
|
+
-webkit-animation-duration: 1s;
|
|
78
|
+
-webkit-animation-fill-mode: forwards;
|
|
79
|
+
-webkit-animation-iteration-count: infinite;
|
|
80
|
+
-webkit-animation-name: placeholderSkeleton;
|
|
81
|
+
-webkit-animation-timing-function: linear;
|
|
82
|
+
background: #e0e3e6;
|
|
83
|
+
background-image: -webkit-gradient(
|
|
84
|
+
linear,
|
|
85
|
+
left center,
|
|
86
|
+
right center,
|
|
87
|
+
from(#e0e3e6),
|
|
88
|
+
color-stop(0.2, #edeef1),
|
|
89
|
+
color-stop(0.4, #e0e3e6),
|
|
90
|
+
to(#e0e3e6)
|
|
91
|
+
);
|
|
92
|
+
background-image: -webkit-linear-gradient(
|
|
93
|
+
left,
|
|
94
|
+
#e0e3e6 0%,
|
|
95
|
+
#edeef1 20%,
|
|
96
|
+
#e0e3e6 40%,
|
|
97
|
+
#e0e3e6 100%
|
|
98
|
+
);
|
|
99
|
+
background-repeat: no-repeat;
|
|
100
|
+
background-size: 800px 104px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.functionality-item {
|
|
104
|
+
display: flex;
|
|
105
|
+
flex-direction: column;
|
|
106
|
+
color: #258bf4;
|
|
107
|
+
line-height: 2.5;
|
|
108
|
+
|
|
109
|
+
&--icone {
|
|
110
|
+
margin-left: 7rem;
|
|
111
|
+
font-size: 1.75rem;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&--text {
|
|
115
|
+
font-size: 1rem;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.performance-item {
|
|
120
|
+
display: flex;
|
|
121
|
+
flex-direction: column;
|
|
122
|
+
&--title {
|
|
123
|
+
font-size: 1rem;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&--value {
|
|
127
|
+
font-size: 1.75rem;
|
|
128
|
+
align-self: center;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.list {
|
|
133
|
+
margin: 1.8rem 0;
|
|
134
|
+
display: flex;
|
|
135
|
+
justify-content: space-evenly;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.line-card {
|
|
139
|
+
ul {
|
|
140
|
+
&:not(:first-child) {
|
|
141
|
+
border: 2px solid #e9ecef;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.card-item {
|
|
147
|
+
width: 50%;
|
|
148
|
+
}
|
|
149
|
+
</style>
|