yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 12:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

added template for v-for

Browse Source
This commit is contained in:
Kostya
2024-02-04 01:01:59 +03:00
parent 749549c46d
commit e9200927b9
3 changed files with 150 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
luckydiamond/src/assets/css/ComponentsStyles/developer.css
View File

@@ -13,7 +13,7 @@
height: 269px;
border-radius: 22px;
border: 3px solid #595959 ;
background-color: #742271;
/*background-color: #742271;*/
}
.developer-card__about-text {
@@ -30,17 +30,18 @@
font-family: 'Montserrat';
color: #fff;
font-size: 32px;
margin-bottom: 20px;
}
.developer-card__technology {
display: flex;
margin: 30px 0 0 15px;
margin: 5px 0 0 15px;
font-family: 'Montserrat';
}
.developer-card__technology img {
width: 15px;
height: 17px;
width: 21px;
height: 21px;
margin-right: 3px;
}
@@ -60,7 +61,12 @@
.developer-card__skin {
display: flex;
align-items: flex-end;
margin-left: 30px;
margin-left: 15px;
}
.developer-card__skin img {
width: 212px;
height: 212px;
}
/*the and card 1*/

43
luckydiamond/src/components/DeveloperComponent.vue
View File

@@ -1,24 +1,25 @@
<template>
<div class="developer-card__content">
<div class="developer-card__width">
<ul>
<li v-for="developer in (DevelopersOptions)" :key="developer.id">
<div class="developer-card__content" v-if="developer.id <= 4">
<div class="developer-card__width" :style="{ background: developer.background }">
<div class="developer-card__text">
<div class="developer-card__about-text">
<p>фронтэндер</p>
<h1>busha888</h1>
<p>{{ developer.userRole }}</p>
<h1>{{ developer.username }}</h1>
</div>
<div class="developer-card__technology">
<img src="@/assets/icons-developcard/html.png" alt="html">
<p>HTML 5,CSS</p>
<div v-for="(techText, index) in developer.technologyText" :key="index" class="developer-card__technology">
<img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
<p>{{ techText }}</p>
</div>
<div class="developer-card__socials">
<a href="https://tpverstak.ru/flex-cheatsheet/"><img src="@/assets/icons-developcard/odniclasniki.png" alt=""></a>
<a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
<a href=""><img src="@/assets/icons-developcard/like.png" alt=""></a>
<a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
<div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
<img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
</div>
</div>
</div>
<div class="developer-card__skin">
<img src="@/assets/icons-developcard/busha888.png" alt="">
<img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
</div>
</div>
<div class="developer-card__height">
@@ -45,16 +46,30 @@
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</template>
<script>
import DevelopersOptions from "@/mocks/DevelopersOptions";
import '@/assets/css/ComponentsStyles/developer.css'
export default {
data() {
return {
DevelopersOptions
}
},
methods: {
testMethod(developer, username) {
console.log(developer, username)
}
},
created() {
console.log(DevelopersOptions)
}
}
</script>

64
luckydiamond/src/mocks/DevelopersOptions.js
View File

@@ -1,65 +1,42 @@
export default [
{
Rafael1209: {
id: 1,
username: "Rafael1209",
userRole: "Бэкендер",
background: "#636363",
technologyText: ["ASP,.NET,MongoDB", "Designer"],
technologyIcons: {
csharp: "@/assets/icons-developcard/csharp-logo.png",
figma: "@/assets/icons-developcard/figma.png"
technologyIcons: ["csharp-logo", "figma"],
socialIcons: ["telegram", "discord", "github"],
},
socialIcons: {
telegram: "@/assets/icons-developcard/telegram.png",
discord: "@/assets/icons-developcard/discord.png",
github: "@/assets/icons-developcard/github.png"
}
},
Hepatir:{
{
id: 2,
username: "Hepatir",
userRole: "Бэкендер",
background: "#413C3B",
technologyText: ["ASP,.NET,MongoDB", "SQL"],
technologyIcons: {
csharp: "@/assets/icons-developcard/csharp-logo.png",
sql: "@/assets/icons-developcard/sql-logo.png"
technologyIcons: ["csharp-logo", "sql-logo"],
socialIcons: ["telegram", "discord", "github"],
},
socialIcons: {
telegram: "@/assets/icons-developcard/telegram.png",
discord: "@/assets/icons-developcard/discord.png",
github: "@/assets/icons-developcard/github.png",
}
},
Ckutls_: {
{
id: 3,
username: "Ckutls_",
userRole: "Фронтэндер",
background: "#B88484",
technologyText: ["html 5, css", "JavaScript", "Vue 3"],
technologyIcons: {
html: "@/assets/icons-developcard/html.png",
js: "@/assets/icons-developcard/js.png",
vue: "@/assets/icons-developcard/vue.png"
technologyIcons: ["html", "js", "vue"],
socialIcons: ["telegram", "discord", "github"],
},
socialIcons: {
telegram: "@/assets/icons-developcard/telegram.png",
discord: "@/assets/icons-developcard/discord.png",
github: "@/assets/icons-developcard/github.png",
}
},
FUpir: {
{
id: 4,
username: "FUpir",
userRole: "Дизайнер",
background: "#C58E74",
technologyText: ["Designer"],
technologyIcons: {
figma: "@/assets/icons-developcard/figma.png"
technologyIcons: ["figma"],
socialIcons: ["telegram", "discord"],
},
socialIcons: {
telegram: "@/assets/icons-developcard/telegram.png",
discord: "@/assets/icons-developcard/discord.png"
}
},
megatntmega: {
{
id: 5,
username: "megatntmega",
userRole: "Дизайнер",
background: "#393A3A",
@@ -72,7 +49,8 @@ export default [
discord: "@/assets/icons-developcard/discord.png"
}
},
busha888: {
{
id: 6,
username: "busha888",
userRole: "Фронтэндер",
background: "#742271",
@@ -87,7 +65,8 @@ export default [
github: "@/assets/icons-developcard/github.png",
}
},
CLARFFY: {
{
id: 7,
username: "CLARFFY",
userRole: "Дизайнер",
background: "#E2B374",
@@ -100,6 +79,5 @@ export default [
discord: "@/assets/icons-developcard/discord.png"
}
}
}
]