@burh/nuxt-core 1.0.472 → 1.0.474
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.
- package/README.md +12 -12
- package/assets/images/icons/icon5.svg +3 -3
- package/assets/images/icons/icon6.svg +3 -3
- package/assets/sass/burh-ds/_global.scss +324 -324
- package/assets/sass/burh-ds/content/_interface-spa.scss +306 -306
- package/assets/sass/burh-ds/molecules/_modal.scss +5 -5
- package/components/argon-core/BaseDropdown.vue +114 -114
- package/components/argon-core/LoadingPanel.vue +26 -26
- package/components/burh-ds/Cards/CourseInfoCard.vue +0 -2
- package/components/burh-ds/Cards/FeatureBusinessCard.vue +74 -74
- package/components/burh-ds/Cards/PerformanceCard.vue +81 -81
- package/components/burh-ds/Curriculum/UserCurriculum/UserCvRightSide.vue +2 -1
- package/components/burh-ds/Inputs/SearchInput.vue +88 -88
- package/components/burh-ds/Modals/AddCustomerModal.vue +2 -1
- package/components/burh-ds/Modals/NewUserModal.vue +87 -87
- package/components/burh-ds/Modals/PlanModal.vue +10 -3
- package/components/burh-ds/Modals/SharedModal.vue +7 -7
- package/components/burh-ds/Skeleton/BaseCardUniversity.vue +79 -79
- package/components/burh-ds/Skeleton/BaseCardUser.vue +84 -84
- package/components/burh-ds/Skeleton/Cards.vue +86 -86
- package/components/burh-ds/Skeleton/SkeletonAnimate.vue +146 -146
- package/components/layouts/burh-ds/navbar/PublicNavbar.vue +168 -168
- package/nuxt.config.js +207 -207
- package/package.json +1 -1
- package/plugins/vClickOutside.js +4 -4
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="input__container__icon" :class="{ 'input__disabled': disabled || isLocked }" @click="isLocked && $emit('open-plan-modal')">
|
|
3
|
-
<label for="search">
|
|
4
|
-
<template v-if="!isLocked">
|
|
5
|
-
<i class="fas fa-search"></i>
|
|
6
|
-
</template>
|
|
7
|
-
<template v-else>
|
|
8
|
-
<i class="fas fa-lock"></i>
|
|
9
|
-
</template>
|
|
10
|
-
</label>
|
|
11
|
-
<input type="text" name="search" id="search" :disabled="disabled || isLocked" :placeholder="placeholder" v-model="searchModel" @change="$emit('change')">
|
|
12
|
-
</div>
|
|
13
|
-
</template>
|
|
14
|
-
|
|
15
|
-
<script>
|
|
16
|
-
export default {
|
|
17
|
-
name: 'search-input',
|
|
18
|
-
props: {
|
|
19
|
-
disabled: {
|
|
20
|
-
type: Boolean,
|
|
21
|
-
default: false
|
|
22
|
-
},
|
|
23
|
-
search: String,
|
|
24
|
-
placeholder: {
|
|
25
|
-
type: String,
|
|
26
|
-
default: 'Busque por vaga'
|
|
27
|
-
},
|
|
28
|
-
isLocked: {
|
|
29
|
-
type: Boolean,
|
|
30
|
-
default: false
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
data() {
|
|
34
|
-
return {
|
|
35
|
-
searchModel: null
|
|
36
|
-
};
|
|
37
|
-
},
|
|
38
|
-
mounted() {
|
|
39
|
-
this.searchModel = this.search;
|
|
40
|
-
},
|
|
41
|
-
watch: {
|
|
42
|
-
search(value) {
|
|
43
|
-
this.searchModel = value;
|
|
44
|
-
},
|
|
45
|
-
searchModel(value) {
|
|
46
|
-
this.$emit('search', value);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
</script>
|
|
51
|
-
|
|
52
|
-
<style lang="scss" scoped>
|
|
53
|
-
.input__container__icon {
|
|
54
|
-
position: relative;
|
|
55
|
-
display: flex;
|
|
56
|
-
align-items: center;
|
|
57
|
-
border-radius: 100px;
|
|
58
|
-
max-width: 270px;
|
|
59
|
-
overflow: hidden;
|
|
60
|
-
border: 1px solid #E9ECEF;
|
|
61
|
-
input {
|
|
62
|
-
background: transparent;
|
|
63
|
-
border: 0;
|
|
64
|
-
outline: none;
|
|
65
|
-
padding: 5px 0;
|
|
66
|
-
width: 100%;
|
|
67
|
-
}
|
|
68
|
-
label {
|
|
69
|
-
margin: 0;
|
|
70
|
-
display: block;
|
|
71
|
-
}
|
|
72
|
-
i {
|
|
73
|
-
padding: 0 10px;
|
|
74
|
-
color: #AEB6BE;
|
|
75
|
-
}
|
|
76
|
-
&.input__disabled {
|
|
77
|
-
background-color: #E9ECEF;
|
|
78
|
-
cursor: not-allowed !important;
|
|
79
|
-
input {
|
|
80
|
-
color: #AEB6BE !important;
|
|
81
|
-
cursor: not-allowed !important;
|
|
82
|
-
}
|
|
83
|
-
label {
|
|
84
|
-
cursor: not-allowed !important;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="input__container__icon" :class="{ 'input__disabled': disabled || isLocked }" @click="isLocked && $emit('open-plan-modal')">
|
|
3
|
+
<label for="search">
|
|
4
|
+
<template v-if="!isLocked">
|
|
5
|
+
<i class="fas fa-search"></i>
|
|
6
|
+
</template>
|
|
7
|
+
<template v-else>
|
|
8
|
+
<i class="fas fa-lock"></i>
|
|
9
|
+
</template>
|
|
10
|
+
</label>
|
|
11
|
+
<input type="text" name="search" id="search" :disabled="disabled || isLocked" :placeholder="placeholder" v-model="searchModel" @change="$emit('change')">
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script>
|
|
16
|
+
export default {
|
|
17
|
+
name: 'search-input',
|
|
18
|
+
props: {
|
|
19
|
+
disabled: {
|
|
20
|
+
type: Boolean,
|
|
21
|
+
default: false
|
|
22
|
+
},
|
|
23
|
+
search: String,
|
|
24
|
+
placeholder: {
|
|
25
|
+
type: String,
|
|
26
|
+
default: 'Busque por vaga'
|
|
27
|
+
},
|
|
28
|
+
isLocked: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: false
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
data() {
|
|
34
|
+
return {
|
|
35
|
+
searchModel: null
|
|
36
|
+
};
|
|
37
|
+
},
|
|
38
|
+
mounted() {
|
|
39
|
+
this.searchModel = this.search;
|
|
40
|
+
},
|
|
41
|
+
watch: {
|
|
42
|
+
search(value) {
|
|
43
|
+
this.searchModel = value;
|
|
44
|
+
},
|
|
45
|
+
searchModel(value) {
|
|
46
|
+
this.$emit('search', value);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<style lang="scss" scoped>
|
|
53
|
+
.input__container__icon {
|
|
54
|
+
position: relative;
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
border-radius: 100px;
|
|
58
|
+
max-width: 270px;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
border: 1px solid #E9ECEF;
|
|
61
|
+
input {
|
|
62
|
+
background: transparent;
|
|
63
|
+
border: 0;
|
|
64
|
+
outline: none;
|
|
65
|
+
padding: 5px 0;
|
|
66
|
+
width: 100%;
|
|
67
|
+
}
|
|
68
|
+
label {
|
|
69
|
+
margin: 0;
|
|
70
|
+
display: block;
|
|
71
|
+
}
|
|
72
|
+
i {
|
|
73
|
+
padding: 0 10px;
|
|
74
|
+
color: #AEB6BE;
|
|
75
|
+
}
|
|
76
|
+
&.input__disabled {
|
|
77
|
+
background-color: #E9ECEF;
|
|
78
|
+
cursor: not-allowed !important;
|
|
79
|
+
input {
|
|
80
|
+
color: #AEB6BE !important;
|
|
81
|
+
cursor: not-allowed !important;
|
|
82
|
+
}
|
|
83
|
+
label {
|
|
84
|
+
cursor: not-allowed !important;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
</style>
|
|
@@ -388,8 +388,9 @@ export default {
|
|
|
388
388
|
});
|
|
389
389
|
},
|
|
390
390
|
async getCityList() {
|
|
391
|
-
|
|
391
|
+
await fetch(`${process.env.baseApiUrlUtils}/cities`)
|
|
392
392
|
.then(res => res.json())
|
|
393
|
+
.then(res => this.cityList = res.data)
|
|
393
394
|
.catch(() => {});
|
|
394
395
|
},
|
|
395
396
|
getCityListFiltered(query) {
|
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<modal
|
|
4
|
-
:show.sync="isModalOpen"
|
|
5
|
-
@close="$emit('close-modal')"
|
|
6
|
-
class="modal modal-new"
|
|
7
|
-
bodyClasses="container-fluid px-4 pt-0 modal-new-fix"
|
|
8
|
-
headerClasses="container-fluid new-modal-header pb-0"
|
|
9
|
-
>
|
|
10
|
-
<template slot="header">
|
|
11
|
-
<p> </p>
|
|
12
|
-
</template>
|
|
13
|
-
<div class="text-center mb-4 mt-0">
|
|
14
|
-
<img src="/img/logotipo_color.svg" class="pb-4" width="110" alt="Burh">
|
|
15
|
-
<h5 class="display-5 text-center">Olá! Sou a Burh! Estamos mudando.</h5>
|
|
16
|
-
</div>
|
|
17
|
-
<div class="mt-2 text-justify">
|
|
18
|
-
<p>
|
|
19
|
-
O Burh foi criado para empresas que buscam os melhores profissionais para compor seu time, mas que para isso não tenham que passar por sistemas burocráticos, ultrapassados e cheios de pegadinhas. Com o único propósito de tornar o mercado profissional em um lugar livre e aberto, chegou a hora de apresentarmos a melhor versão que já criamos, uma plataforma inteligente, rápida, segura e repleta de novas possibilidades.
|
|
20
|
-
<br><br>
|
|
21
|
-
Por isso acreditamos que você vai adorar! A nova plataforma possibilita criar e organizar pastas na nuvem, anexar documentos e notas nos perfis dos profissionais e compartilhar essas informações com toda segurança da LGPD. Tudo isso de forma simples, inovadora e inteligente.
|
|
22
|
-
<br><br>
|
|
23
|
-
Pode-se dizer que estamos amadurecendo, o que é meio chavão para uma marca dizer, mas nós somos gratos pelas pessoas que ficaram ao nosso lado nos últimos quatro anos e estamos empolgados para crescer cada vez mais juntos.
|
|
24
|
-
<br><br>
|
|
25
|
-
Hoje, apresentamos a nova Burh Empresas que será liberada nos próximos dias. Uma solução que reflete aquilo que somos, nossa essência e o que acreditamos. Nossas novas cores representam toda a integração, possibilidade e liberdade de criarmos o novo, de pessoas para pessoas.
|
|
26
|
-
<br><br>
|
|
27
|
-
Com amor,<br>Burh
|
|
28
|
-
</p>
|
|
29
|
-
</div>
|
|
30
|
-
</modal>
|
|
31
|
-
</div>
|
|
32
|
-
</template>
|
|
33
|
-
|
|
34
|
-
<script>
|
|
35
|
-
export default {
|
|
36
|
-
name: 'new-user-modal',
|
|
37
|
-
props: {
|
|
38
|
-
show: {
|
|
39
|
-
type: Boolean,
|
|
40
|
-
default: false
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
data() {
|
|
44
|
-
return {
|
|
45
|
-
isModalOpen: this.show
|
|
46
|
-
};
|
|
47
|
-
},
|
|
48
|
-
watch: {
|
|
49
|
-
show(value) {
|
|
50
|
-
this.isModalOpen = value;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
</script>
|
|
55
|
-
<style lang="scss">
|
|
56
|
-
.modal-new {
|
|
57
|
-
overflow-y: auto!important;
|
|
58
|
-
&::-webkit-scrollbar-track {
|
|
59
|
-
border-radius: 10px!important;
|
|
60
|
-
background-color: rgba(23, 43, 77, 0.7)!important;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
&::-webkit-scrollbar {
|
|
64
|
-
width: 8px!important;
|
|
65
|
-
background-color: rgba(23, 43, 77, 0.7)!important;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
&::-webkit-scrollbar-thumb {
|
|
69
|
-
border-radius: 10px!important;
|
|
70
|
-
background-color: #e9e8e8!important;
|
|
71
|
-
}
|
|
72
|
-
.modal-dialog {
|
|
73
|
-
min-width: 60rem;
|
|
74
|
-
display: flex;
|
|
75
|
-
flex-direction: columns;
|
|
76
|
-
align-items: center;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
.modal-new-fix {
|
|
80
|
-
padding: 30px 60px!important;
|
|
81
|
-
padding-top: 0!important;
|
|
82
|
-
width: 75%!important;
|
|
83
|
-
}
|
|
84
|
-
.new-modal-header {
|
|
85
|
-
padding: 10px!important;
|
|
86
|
-
}
|
|
87
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<modal
|
|
4
|
+
:show.sync="isModalOpen"
|
|
5
|
+
@close="$emit('close-modal')"
|
|
6
|
+
class="modal modal-new"
|
|
7
|
+
bodyClasses="container-fluid px-4 pt-0 modal-new-fix"
|
|
8
|
+
headerClasses="container-fluid new-modal-header pb-0"
|
|
9
|
+
>
|
|
10
|
+
<template slot="header">
|
|
11
|
+
<p> </p>
|
|
12
|
+
</template>
|
|
13
|
+
<div class="text-center mb-4 mt-0">
|
|
14
|
+
<img src="/img/logotipo_color.svg" class="pb-4" width="110" alt="Burh">
|
|
15
|
+
<h5 class="display-5 text-center">Olá! Sou a Burh! Estamos mudando.</h5>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="mt-2 text-justify">
|
|
18
|
+
<p>
|
|
19
|
+
O Burh foi criado para empresas que buscam os melhores profissionais para compor seu time, mas que para isso não tenham que passar por sistemas burocráticos, ultrapassados e cheios de pegadinhas. Com o único propósito de tornar o mercado profissional em um lugar livre e aberto, chegou a hora de apresentarmos a melhor versão que já criamos, uma plataforma inteligente, rápida, segura e repleta de novas possibilidades.
|
|
20
|
+
<br><br>
|
|
21
|
+
Por isso acreditamos que você vai adorar! A nova plataforma possibilita criar e organizar pastas na nuvem, anexar documentos e notas nos perfis dos profissionais e compartilhar essas informações com toda segurança da LGPD. Tudo isso de forma simples, inovadora e inteligente.
|
|
22
|
+
<br><br>
|
|
23
|
+
Pode-se dizer que estamos amadurecendo, o que é meio chavão para uma marca dizer, mas nós somos gratos pelas pessoas que ficaram ao nosso lado nos últimos quatro anos e estamos empolgados para crescer cada vez mais juntos.
|
|
24
|
+
<br><br>
|
|
25
|
+
Hoje, apresentamos a nova Burh Empresas que será liberada nos próximos dias. Uma solução que reflete aquilo que somos, nossa essência e o que acreditamos. Nossas novas cores representam toda a integração, possibilidade e liberdade de criarmos o novo, de pessoas para pessoas.
|
|
26
|
+
<br><br>
|
|
27
|
+
Com amor,<br>Burh
|
|
28
|
+
</p>
|
|
29
|
+
</div>
|
|
30
|
+
</modal>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script>
|
|
35
|
+
export default {
|
|
36
|
+
name: 'new-user-modal',
|
|
37
|
+
props: {
|
|
38
|
+
show: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: false
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
data() {
|
|
44
|
+
return {
|
|
45
|
+
isModalOpen: this.show
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
watch: {
|
|
49
|
+
show(value) {
|
|
50
|
+
this.isModalOpen = value;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
</script>
|
|
55
|
+
<style lang="scss">
|
|
56
|
+
.modal-new {
|
|
57
|
+
overflow-y: auto!important;
|
|
58
|
+
&::-webkit-scrollbar-track {
|
|
59
|
+
border-radius: 10px!important;
|
|
60
|
+
background-color: rgba(23, 43, 77, 0.7)!important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&::-webkit-scrollbar {
|
|
64
|
+
width: 8px!important;
|
|
65
|
+
background-color: rgba(23, 43, 77, 0.7)!important;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&::-webkit-scrollbar-thumb {
|
|
69
|
+
border-radius: 10px!important;
|
|
70
|
+
background-color: #e9e8e8!important;
|
|
71
|
+
}
|
|
72
|
+
.modal-dialog {
|
|
73
|
+
min-width: 60rem;
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: columns;
|
|
76
|
+
align-items: center;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
.modal-new-fix {
|
|
80
|
+
padding: 30px 60px!important;
|
|
81
|
+
padding-top: 0!important;
|
|
82
|
+
width: 75%!important;
|
|
83
|
+
}
|
|
84
|
+
.new-modal-header {
|
|
85
|
+
padding: 10px!important;
|
|
86
|
+
}
|
|
87
|
+
</style>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<modal
|
|
3
3
|
:show.sync="isActive"
|
|
4
4
|
:size="'lg'"
|
|
5
|
+
class="no--padding"
|
|
5
6
|
@close="$emit('close')"
|
|
6
7
|
>
|
|
7
8
|
<template>
|
|
@@ -161,6 +162,12 @@ export default {
|
|
|
161
162
|
<style lang="scss" scoped>
|
|
162
163
|
@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
|
|
163
164
|
|
|
165
|
+
.no--padding {
|
|
166
|
+
/deep/ .modal-body {
|
|
167
|
+
padding: 0 !important;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
164
171
|
/deep/ .modal-body {
|
|
165
172
|
margin-bottom: 2rem;
|
|
166
173
|
}
|
|
@@ -197,9 +204,9 @@ export default {
|
|
|
197
204
|
|
|
198
205
|
margin-top: 2.5rem;
|
|
199
206
|
padding: 0 2rem;
|
|
200
|
-
|
|
207
|
+
|
|
201
208
|
@media (max-width: 960px) {
|
|
202
|
-
|
|
209
|
+
|
|
203
210
|
display: flex;
|
|
204
211
|
justify-content: center;
|
|
205
212
|
align-items: center;
|
|
@@ -279,7 +286,7 @@ export default {
|
|
|
279
286
|
width: 75%;
|
|
280
287
|
margin-left: 0;
|
|
281
288
|
}
|
|
282
|
-
|
|
289
|
+
|
|
283
290
|
.diamond-svg{
|
|
284
291
|
position: relative;
|
|
285
292
|
top: -35px;
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
<input
|
|
92
92
|
v-if="slug"
|
|
93
93
|
id="linkShareModal"
|
|
94
|
-
:value="`${baseUrl}
|
|
94
|
+
:value="`${baseUrl}`"
|
|
95
95
|
type="text"
|
|
96
96
|
class="ml-5 form-control social social-input"
|
|
97
97
|
readonly
|
|
@@ -132,12 +132,12 @@ export default {
|
|
|
132
132
|
share_token:{
|
|
133
133
|
type:String,
|
|
134
134
|
default: ''
|
|
135
|
-
}
|
|
136
|
-
baseUrl: String
|
|
135
|
+
}
|
|
137
136
|
},
|
|
138
137
|
data() {
|
|
139
138
|
return {
|
|
140
|
-
slug: null
|
|
139
|
+
slug: null,
|
|
140
|
+
baseUrl:''
|
|
141
141
|
};
|
|
142
142
|
},
|
|
143
143
|
methods: {
|
|
@@ -161,7 +161,7 @@ export default {
|
|
|
161
161
|
computed: {
|
|
162
162
|
baseBussinesUrl() {
|
|
163
163
|
return process.env.baseAppUrl;
|
|
164
|
-
}
|
|
164
|
+
},
|
|
165
165
|
},
|
|
166
166
|
watch: {
|
|
167
167
|
isActive(newValue) {
|
|
@@ -173,8 +173,8 @@ export default {
|
|
|
173
173
|
}
|
|
174
174
|
},
|
|
175
175
|
share_token(share_token){
|
|
176
|
-
|
|
177
|
-
|
|
176
|
+
let url = this.baseBussinesUrl + '/buffer/userpreview/' + share_token;
|
|
177
|
+
this.baseUrl = url;
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
180
|
};
|
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="recruitment__user__card">
|
|
3
|
-
<div
|
|
4
|
-
class="recruitment__user__card__header"
|
|
5
|
-
>
|
|
6
|
-
<skeleton-animate class="user__cover" />
|
|
7
|
-
</div>
|
|
8
|
-
|
|
9
|
-
<div class="recruitment__user__card__content">
|
|
10
|
-
<skeleton-animate class="user__avatar" :width="120" :height="120" img />
|
|
11
|
-
|
|
12
|
-
<skeleton-animate class="user__title" :width="160" :height="20" />
|
|
13
|
-
</div>
|
|
14
|
-
|
|
15
|
-
<div class="recruitment__user__card__footer">
|
|
16
|
-
<skeleton-animate class="user__footer" :width="200" :height="20" />
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
</template>
|
|
20
|
-
|
|
21
|
-
<script>
|
|
22
|
-
import SkeletonAnimate from './SkeletonAnimate.vue';
|
|
23
|
-
|
|
24
|
-
export default {
|
|
25
|
-
name: 'base-card-university',
|
|
26
|
-
components: {
|
|
27
|
-
SkeletonAnimate
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
</script>
|
|
31
|
-
|
|
32
|
-
<style lang="scss" scoped>
|
|
33
|
-
|
|
34
|
-
.recruitment__user__card {
|
|
35
|
-
background: #fff;
|
|
36
|
-
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
|
|
37
|
-
border-radius: 4px;
|
|
38
|
-
overflow: hidden;
|
|
39
|
-
cursor: pointer;
|
|
40
|
-
transition: transform 0.25s;
|
|
41
|
-
|
|
42
|
-
&__header {
|
|
43
|
-
width: 100%;
|
|
44
|
-
height: 70px;
|
|
45
|
-
overflow: hidden;
|
|
46
|
-
position: relative;
|
|
47
|
-
.user__cover {
|
|
48
|
-
width: 100%!important;
|
|
49
|
-
height: 100%!important;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
&__content {
|
|
53
|
-
display: flex;
|
|
54
|
-
flex-direction: column;
|
|
55
|
-
align-items: center;
|
|
56
|
-
justify-content: center;
|
|
57
|
-
.user__avatar {
|
|
58
|
-
margin-top: -20px;
|
|
59
|
-
border: 4px solid #fff;
|
|
60
|
-
z-index: 10;
|
|
61
|
-
}
|
|
62
|
-
.user__title {
|
|
63
|
-
margin-top: 40px;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
&__footer {
|
|
67
|
-
display: flex;
|
|
68
|
-
align-items: center;
|
|
69
|
-
justify-content: center;
|
|
70
|
-
padding-bottom: 20px;
|
|
71
|
-
.user__footer {
|
|
72
|
-
margin-top: 40px;
|
|
73
|
-
margin-bottom: 20px;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
</style>
|
|
79
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<div class="recruitment__user__card">
|
|
3
|
+
<div
|
|
4
|
+
class="recruitment__user__card__header"
|
|
5
|
+
>
|
|
6
|
+
<skeleton-animate class="user__cover" />
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<div class="recruitment__user__card__content">
|
|
10
|
+
<skeleton-animate class="user__avatar" :width="120" :height="120" img />
|
|
11
|
+
|
|
12
|
+
<skeleton-animate class="user__title" :width="160" :height="20" />
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div class="recruitment__user__card__footer">
|
|
16
|
+
<skeleton-animate class="user__footer" :width="200" :height="20" />
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script>
|
|
22
|
+
import SkeletonAnimate from './SkeletonAnimate.vue';
|
|
23
|
+
|
|
24
|
+
export default {
|
|
25
|
+
name: 'base-card-university',
|
|
26
|
+
components: {
|
|
27
|
+
SkeletonAnimate
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<style lang="scss" scoped>
|
|
33
|
+
|
|
34
|
+
.recruitment__user__card {
|
|
35
|
+
background: #fff;
|
|
36
|
+
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
|
|
37
|
+
border-radius: 4px;
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
transition: transform 0.25s;
|
|
41
|
+
|
|
42
|
+
&__header {
|
|
43
|
+
width: 100%;
|
|
44
|
+
height: 70px;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
position: relative;
|
|
47
|
+
.user__cover {
|
|
48
|
+
width: 100%!important;
|
|
49
|
+
height: 100%!important;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
&__content {
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
.user__avatar {
|
|
58
|
+
margin-top: -20px;
|
|
59
|
+
border: 4px solid #fff;
|
|
60
|
+
z-index: 10;
|
|
61
|
+
}
|
|
62
|
+
.user__title {
|
|
63
|
+
margin-top: 40px;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
&__footer {
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
padding-bottom: 20px;
|
|
71
|
+
.user__footer {
|
|
72
|
+
margin-top: 40px;
|
|
73
|
+
margin-bottom: 20px;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
</style>
|
|
79
|
+
|