@burh/nuxt-core 1.0.459 → 1.0.460
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/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/content/_main-content.scss +25 -25
- package/components/argon-core/BaseDropdown.vue +114 -114
- package/components/argon-core/LoadingPanel.vue +26 -26
- package/components/burh-ds/Cards/FeatureBusinessCard.vue +74 -74
- package/components/burh-ds/Cards/PerformanceCard.vue +81 -81
- package/components/burh-ds/Cards/TestCard.vue +6 -6
- package/components/burh-ds/Inputs/SearchInput.vue +88 -88
- package/components/burh-ds/Modals/NewUserModal.vue +87 -87
- package/components/burh-ds/Modals/SendTest.vue +18 -13
- 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/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>
|
|
@@ -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>
|
|
@@ -4,11 +4,9 @@
|
|
|
4
4
|
:size="'lg'"
|
|
5
5
|
@close="$emit('close')"
|
|
6
6
|
>
|
|
7
|
-
<basics :isLoading="loading" v-if="loading"/>
|
|
8
7
|
<template>
|
|
8
|
+
<basics :isLoading="loading" v-if="loading"/>
|
|
9
9
|
<div class="ml-5 mr-5">
|
|
10
|
-
<basics :isLoading="loading" v-if="loading"/>
|
|
11
|
-
|
|
12
10
|
<div class="row send send-test mx-0">
|
|
13
11
|
<h5>Insira o e-mail que deseja enviar o teste</h5>
|
|
14
12
|
</div>
|
|
@@ -61,9 +59,8 @@
|
|
|
61
59
|
placeholder="Escolha o teste"
|
|
62
60
|
:class="{'is-invalid': errors[0]}"
|
|
63
61
|
rules="required"
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
class="w-100 fix-input"
|
|
62
|
+
v-model="teste"
|
|
63
|
+
class="w-100"
|
|
67
64
|
>
|
|
68
65
|
<el-option
|
|
69
66
|
v-for="test in allTests"
|
|
@@ -191,7 +188,9 @@ export default {
|
|
|
191
188
|
type: Boolean,
|
|
192
189
|
default: false
|
|
193
190
|
},
|
|
194
|
-
selectedTest:
|
|
191
|
+
selectedTest: {
|
|
192
|
+
type:Number
|
|
193
|
+
},
|
|
195
194
|
categoriesAllowedToSend: {
|
|
196
195
|
type: Object,
|
|
197
196
|
default: () => ({})
|
|
@@ -225,7 +224,7 @@ export default {
|
|
|
225
224
|
const formatRequest = slot => ({
|
|
226
225
|
...slot,
|
|
227
226
|
jobid: this.jobid,
|
|
228
|
-
testid: this.
|
|
227
|
+
testid: this.teste
|
|
229
228
|
});
|
|
230
229
|
const testRequest = this.slots
|
|
231
230
|
.filter(filterSlots)
|
|
@@ -257,15 +256,21 @@ export default {
|
|
|
257
256
|
}
|
|
258
257
|
},
|
|
259
258
|
watch: {
|
|
260
|
-
|
|
261
|
-
selectedTest(newValue) {
|
|
262
|
-
this.testid = newValue;
|
|
263
|
-
},
|
|
264
259
|
isModalOpen(newValue) {
|
|
265
260
|
!newValue && this.closeModal();
|
|
266
261
|
this.resetSlots();
|
|
267
262
|
}
|
|
268
263
|
},
|
|
264
|
+
computed:{
|
|
265
|
+
teste:{
|
|
266
|
+
get(){
|
|
267
|
+
return !this.testid ? this.selectedTest : this.testid;
|
|
268
|
+
},
|
|
269
|
+
set(value){
|
|
270
|
+
this.testid = value;
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
},
|
|
269
274
|
data() {
|
|
270
275
|
return {
|
|
271
276
|
loading: false,
|
|
@@ -279,7 +284,7 @@ export default {
|
|
|
279
284
|
}
|
|
280
285
|
]
|
|
281
286
|
};
|
|
282
|
-
}
|
|
287
|
+
},
|
|
283
288
|
};
|
|
284
289
|
</script>
|
|
285
290
|
<style lang="scss" scoped>
|
|
@@ -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
|
+
|