added template for v-for

luckydiamond/src/assets/css/ComponentsStyles/developer.css

@@ -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;
+    width: 21px;
-    height: 17px;
+    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*/

luckydiamond/src/components/DeveloperComponent.vue

@@ -1,24 +1,25 @@
 <template>
-  <div class="developer-card__content">
+  <ul>
-    <div class="developer-card__width">
+    <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>
+              <p>{{ developer.userRole }}</p>
-          <h1>busha888</h1>
+              <h1>{{ developer.username }}</h1>
             </div>
-        <div class="developer-card__technology">
+            <div v-for="(techText, index) in developer.technologyText" :key="index" class="developer-card__technology">
-          <img src="@/assets/icons-developcard/html.png" alt="html">
+              <img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
-          <p>HTML 5,CSS</p>
+              <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>
+              <div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
-          <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+                <img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
-          <a href=""><img src="@/assets/icons-developcard/like.png" alt=""></a>
+              </div>
-          <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
             </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>

luckydiamond/src/mocks/DevelopersOptions.js

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