mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 04:04:22 +08:00
какой то дезигн
This commit is contained in:
irchen4
parent
8d7afcf5e0
commit
3d1a7619db
@ -36,19 +36,13 @@ onMounted(async() => {
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div class="profile-container">
|
||||
<h1>Профиль пользователя {{ loggedUserName }}</h1>
|
||||
<h2>Профиль пользователя {{ loggedUserName }}</h2>
|
||||
<h2>{{ profileData.username }}</h2>
|
||||
<p>{{ profileData.email }}</p>
|
||||
<P>Имя: {{ profileData.name }}</P>
|
||||
@ -71,13 +65,12 @@ onMounted(async() => {
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
|
||||
margin: 5% auto;
|
||||
background-color: #3d913257;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.profile-container img {
|
||||
@ -87,4 +80,25 @@ onMounted(async() => {
|
||||
object-fit: cover;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1,h2{
|
||||
/*font-family: 'PressStart2P';*/
|
||||
color:rgb(70, 104, 105);
|
||||
}
|
||||
p{
|
||||
font-family: 'SpaceMono' monospace;
|
||||
}
|
||||
button{
|
||||
background-color: #3d9132;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
button:hover{
|
||||
background-color: #6ac55e;
|
||||
color: rgb(61, 61, 61);
|
||||
}
|
||||
</style>
|
||||
@ -36,9 +36,10 @@ onMounted(() => {
|
||||
<h2 class="result-header">Найдено людей: {{ searchResultUsers.length}} </h2>
|
||||
<div class="result-grid">
|
||||
<div class="result-card" v-for="user in searchResultUsers" :key="user.id">
|
||||
<h3>{{ user.username }} with id {{ user.id }}</h3>
|
||||
<div class="profile-name"> <h3>{{ user.username }} with id {{ user.id }}</h3></div>
|
||||
<p>{{ user.email }}</p>
|
||||
<a :href="`/profile/${user.id}`">Страница пользователя</a>
|
||||
<a :href="`/profile/${user.id}`">Открыть профиль</a>
|
||||
<a :href="`/profile/${user.id}`">Отправить сообщение</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,10 +88,13 @@ onMounted(() => {
|
||||
}
|
||||
.result-header {
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
background-color:#3d9132;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-top: 25px;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
@ -102,12 +106,36 @@ onMounted(() => {
|
||||
.result-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
background-color: #3d913248;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
width: calc(100% / 3 - 20px);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
|
||||
align-items: center;
|
||||
}
|
||||
.profile-name{
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
h3{
|
||||
color:rgb(87, 87, 87);
|
||||
}
|
||||
a{
|
||||
background-color: #3d9132;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a:hover{
|
||||
background-color: #6ac55e;
|
||||
color: rgb(61, 61, 61);
|
||||
}
|
||||
p{
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
|
||||
@ -16,11 +16,24 @@ onMounted(async() => {
|
||||
|
||||
const getProfile = async () => {
|
||||
const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${profileId.value}/`);
|
||||
profileData.value = profileDataRecieved.data;
|
||||
profileData.value = processProfileData(profileDataRecieved.data);
|
||||
|
||||
};
|
||||
|
||||
|
||||
const processProfileData = (data) => {
|
||||
return {
|
||||
...data,
|
||||
name: data.name || '🤷 No Name Provided',
|
||||
location: data.location || '🌍 No Location Provided',
|
||||
short_intro: data.short_intro || '📝 No Short Intro Provided',
|
||||
bio: data.bio || '📘 No Bio Provided',
|
||||
profile_image: data.profile_image || '📷 No Image Provided',
|
||||
social_github: data.social_github || '👨💻 No Github Provided',
|
||||
social_twitter: data.social_twitter || '🐦 No Twitter Provided',
|
||||
social_vk: data.social_vk || '🔵 No VK Provided',
|
||||
social_youtube: data.social_youtube || '▶️ No YouTube Provided',
|
||||
social_website: data.social_website || '🌐 No Website Provided',
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
@ -29,7 +42,7 @@ const getProfile = async () => {
|
||||
<template>
|
||||
<NavbarDefault />
|
||||
<div class="profile-container">
|
||||
<h1>Профиль пользователя {{ loggedUserName }}</h1>
|
||||
<h1>Профиль пользователя</h1>
|
||||
<h2>{{ profileData.username }}</h2>
|
||||
<p>{{ profileData.email }}</p>
|
||||
<P>Имя: {{ profileData.name }}</P>
|
||||
@ -42,23 +55,20 @@ const getProfile = async () => {
|
||||
<p>Ссылка на VK: {{ profileData.social_vk }}</p>
|
||||
<p>Ссылка на YouTube: {{ profileData.social_youtube }}</p>
|
||||
<p>Ссылка на сайт: {{ profileData.social_website }}</p>
|
||||
|
||||
|
||||
|
||||
<button>Message</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
margin: 10% auto;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
|
||||
background-color: #3d913257;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.profile-container img {
|
||||
@ -67,5 +77,27 @@ height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
h1,h2{
|
||||
/*font-family: 'PressStart2P';*/
|
||||
color:rgb(70, 104, 105);
|
||||
}
|
||||
p{
|
||||
font-family: 'SpaceMono' monospace;
|
||||
}
|
||||
button{
|
||||
background-color: #3d9132;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
button:hover{
|
||||
background-color: #6ac55e;
|
||||
color: rgb(61, 61, 61);
|
||||
}
|
||||
</style>
|
||||
@ -34,7 +34,7 @@ onMounted(() => {
|
||||
<h2 class="result-header">Найдено проектов: {{ searchResultProjects.length}} </h2>
|
||||
<div class="result-grid">
|
||||
<div class="result-card" v-for="project in searchResultProjects" :key="project.id">
|
||||
<h3>{{ project.title }} with ID {{ project.id }}</h3>
|
||||
<div class="project-title"> <h3>{{ project.title }} with ID {{ project.id }}</h3></div>
|
||||
<p>{{ project.description }}</p>
|
||||
<a :href="`/project/${project.id}`">Страница проекта</a>
|
||||
</div>
|
||||
@ -86,10 +86,13 @@ onMounted(() => {
|
||||
}
|
||||
.result-header {
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
background-color:#3d9132;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-top: 25px;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
@ -101,12 +104,37 @@ onMounted(() => {
|
||||
.result-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
background-color: #3d913248;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
width: calc(100% / 3 - 20px);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
|
||||
align-items: center;
|
||||
}
|
||||
.project-title{
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
h3{
|
||||
color:rgb(87, 87, 87);
|
||||
}
|
||||
a{
|
||||
background-color: #3d9132;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a:hover{
|
||||
background-color: #6ac55e;
|
||||
color: rgb(61, 61, 61);
|
||||
}
|
||||
p{
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
|
||||
@ -149,12 +149,18 @@ const search = async () => {
|
||||
.result-card {
|
||||
width: calc(100% / 2 - 20px);
|
||||
}
|
||||
.searchButton{
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.result-card {
|
||||
width: 100%;
|
||||
}
|
||||
.searchButton{
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user