mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 12:14:22 +08:00
125 lines
3.5 KiB
Vue
125 lines
3.5 KiB
Vue
<script setup>
|
||
import { onMounted, onUnmounted, computed, } from "vue";
|
||
|
||
//example components
|
||
import NavbarDefault from "../..//examples/navbars/NavbarDefault.vue";
|
||
import DefaultFooter from "../../examples/footers/FooterDefault.vue";
|
||
import Header from "../../examples/Header.vue";
|
||
|
||
// sections
|
||
import PresentationSearch from "./Sections/PresentationSearch.vue";
|
||
|
||
|
||
//images
|
||
import vueMkHeader from "@/assets/img/space-background.jpg";
|
||
|
||
//authentification
|
||
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token'));
|
||
const userId = computed(() => sessionStorage.getItem('user_id'));
|
||
const loggedUserName = computed(() => sessionStorage.getItem('username'));
|
||
|
||
//hooks
|
||
const body = document.getElementsByTagName("body")[0];
|
||
onMounted(() => {
|
||
body.classList.add("presentation-page");
|
||
body.classList.add("bg-gray-200");
|
||
});
|
||
onUnmounted(() => {
|
||
body.classList.remove("presentation-page");
|
||
body.classList.remove("bg-gray-200");
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
import axios from 'axios';
|
||
import PresentationCounter from "./Sections/PresentationCounter.vue";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
projects: [],
|
||
};
|
||
},
|
||
async created() {
|
||
try {
|
||
const response = await axios.get("http://somebodyhire.me/api/projects/");
|
||
this.projects = response.data;
|
||
}
|
||
catch (error) {
|
||
console.error("There was an error fetching the projects", error);
|
||
}
|
||
},
|
||
components: { PresentationCounter }
|
||
};
|
||
</script>
|
||
|
||
|
||
|
||
<template>
|
||
<div class="container position-sticky z-index-sticky top-0">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<NavbarDefault :sticky="true" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Header>
|
||
<div
|
||
class="page-header min-vh-75"
|
||
:style="`background-image: url(${vueMkHeader})`"
|
||
loading="lazy"
|
||
>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-7 text-center mx-auto position-relative">
|
||
|
||
<div v-if="isAuthenticated">
|
||
<h2
|
||
class="text-white pt-3 mt-n5 me-2"
|
||
:style="{ display: 'inline-block ', fontFamily: 'PressStart2P, sans-serif' }"
|
||
>
|
||
Привет, {{ loggedUserName }}!</h2>
|
||
<p class="lead text-white px-5 mt-3" :style="{ fontWeight: '500', fontFamily: 'PressStart2P, sans-serif' }">
|
||
В поисках чего-то интересного?
|
||
</p>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<h1
|
||
class="text-white pt-3 mt-n5 me-2"
|
||
:style="{ display: 'inline-block ', fontFamily: 'PressStart2P, sans-serif' }">LinkedMin</h1>
|
||
<p class="lead text-white px-5 mt-3" :style="{ fontWeight: '500', fontFamily: 'PressStart2P, sans-serif' }">
|
||
Показывай себя и свои проекты.
|
||
Находи вдохновение, коллег и новые знания.
|
||
</p>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<PresentationSearch />
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Header>
|
||
<PresentationCounter />
|
||
<DefaultFooter />
|
||
</template>
|
||
|
||
|
||
<style scoped>
|
||
.project-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
.project-card {
|
||
flex-basis: calc(33.33% - 1em); /* 1em is for margin */
|
||
margin: 0.5em;
|
||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||
padding: 1em;
|
||
box-sizing: border-box;
|
||
}
|
||
</style> |