mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-25 06:14:21 +08:00
Надо приделать карточки проектов
This commit is contained in:
FEARmeR
parent
ea565aaf9f
commit
946f805d69
@ -8,7 +8,6 @@ import Header from "../../examples/Header.vue";
|
|||||||
import FilledInfoCard from "../../examples/cards/infoCards/FilledInfoCard.vue";
|
import FilledInfoCard from "../../examples/cards/infoCards/FilledInfoCard.vue";
|
||||||
|
|
||||||
//Vue Material Kit 2 components
|
//Vue Material Kit 2 components
|
||||||
import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
|
|
||||||
import MaterialInput from "@/components/MaterialInput.vue";
|
import MaterialInput from "@/components/MaterialInput.vue";
|
||||||
|
|
||||||
// sections
|
// sections
|
||||||
@ -22,13 +21,6 @@ import PresentationInformation from "./Sections/PresentationInformation.vue";
|
|||||||
|
|
||||||
//images
|
//images
|
||||||
import vueMkHeader from "@/assets/img/space-background.jpg";
|
import vueMkHeader from "@/assets/img/space-background.jpg";
|
||||||
import wavesWhite from "@/assets/img/waves-white.svg";
|
|
||||||
import logoBootstrap from "@/assets/img/logos/bootstrap5.jpg";
|
|
||||||
import logoTailwind from "@/assets/img/logos/icon-tailwind.jpg";
|
|
||||||
import logoVue from "@/assets/img/logos/vue.jpg";
|
|
||||||
import logoAngular from "@/assets/img/logos/angular.jpg";
|
|
||||||
import logoReact from "@/assets/img/logos/react.jpg";
|
|
||||||
import logoSketch from "@/assets/img/logos/sketch.jpg";
|
|
||||||
|
|
||||||
//hooks
|
//hooks
|
||||||
const body = document.getElementsByTagName("body")[0];
|
const body = document.getElementsByTagName("body")[0];
|
||||||
@ -43,24 +35,7 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
projects: [],
|
|
||||||
error: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
try {
|
|
||||||
const response = await axios.get('http://somebodyhire.me/api/projects/');
|
|
||||||
this.projects = response.data;
|
|
||||||
} catch (error) {
|
|
||||||
this.error = 'An error occurred: ' + error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@ -112,42 +87,16 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
</Header>
|
</Header>
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="row" v-if="projects.length === 0 && !error">
|
|
||||||
<div class="col-lg-8 mx-auto text-center mb-5">
|
|
||||||
<h2>Loading...</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row" v-else-if="error">
|
|
||||||
<div class="col-lg-8 mx-auto text-center mb-5">
|
|
||||||
<h2>Error loading data</h2>
|
|
||||||
<p class="lead">{{ error }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row" v-else>
|
|
||||||
<div class="col-lg-8 mx-auto text-center mb-5" v-for="project in projects" :key="project.id">
|
|
||||||
<h2 class="mb-3">{{ project.title }}</h2>
|
|
||||||
<img :src="project.featured_image" alt="Project Image" />
|
|
||||||
<p class="lead">
|
|
||||||
{{ project.description }}
|
|
||||||
</p>
|
|
||||||
<p>Total votes: {{ project.vote_total }}</p>
|
|
||||||
<p>Vote ratio: {{ project.vote_ratio }}</p>
|
|
||||||
<!-- Add more properties as needed -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||||
<PresentationCounter />
|
<PresentationCounter />
|
||||||
<PresentationInformation />
|
|
||||||
<PresentationExample :data="data" />
|
<PresentationExample :data="data" />
|
||||||
<PresentationPages />
|
<PresentationPages />
|
||||||
<BuiltByDevelopers />
|
<BuiltByDevelopers />
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
|
|||||||
21
src/views/Presentation/Sections/Data/Untitled-1.js
Normal file
21
src/views/Presentation/Sections/Data/Untitled-1.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
const axios = require('axios');
|
||||||
|
|
||||||
|
async function testAPI() {
|
||||||
|
try {
|
||||||
|
const response = await axios.get('http://somebodyhire.me/api/projects/');
|
||||||
|
|
||||||
|
const items = response.data.map((project) => ({
|
||||||
|
image: project.featured_image,
|
||||||
|
title: project.title,
|
||||||
|
subtitle: project.description,
|
||||||
|
route: project.id,
|
||||||
|
pro: false // replace with actual condition for 'pro'
|
||||||
|
}));
|
||||||
|
|
||||||
|
console.log(items[0]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error connecting to API:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
testAPI();
|
||||||
@ -28,113 +28,158 @@ import imgAlert from "@/assets/img/alerts.jpg";
|
|||||||
import imgPopover from "@/assets/img/popovers.jpg";
|
import imgPopover from "@/assets/img/popovers.jpg";
|
||||||
import imgModal from "@/assets/img/modals.jpg";
|
import imgModal from "@/assets/img/modals.jpg";
|
||||||
import imgDropdowns from "@/assets/img/dropdowns.jpg";
|
import imgDropdowns from "@/assets/img/dropdowns.jpg";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
|
||||||
|
// async function getProjects() {
|
||||||
|
// try {
|
||||||
|
// const response = await axios.get('http://somebodyhire.me/api/projects/');
|
||||||
|
|
||||||
|
// // Map the response to your desired structure
|
||||||
|
// const items = response.data.map((project) => ({
|
||||||
|
// image: project.featured_image,
|
||||||
|
// title: project.title,
|
||||||
|
// subtitle: project.description,
|
||||||
|
// route: project.id,
|
||||||
|
// pro: false
|
||||||
|
// }));
|
||||||
|
|
||||||
|
// return items;
|
||||||
|
// } catch (error) {
|
||||||
|
// console.error(error);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export default async function getProjectData() {
|
||||||
|
// const items = await getProjects();
|
||||||
|
|
||||||
|
// return [
|
||||||
|
// {
|
||||||
|
// heading: "Проекты",
|
||||||
|
// description: "Проекты наших пользователей",
|
||||||
|
// items: items,
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// }
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
heading: "Design Blocks",
|
heading: "Проекты",
|
||||||
description:
|
description:
|
||||||
"A selection of 45 page sections that fit perfectly in any combination",
|
"Проекты наших пользователей",
|
||||||
items: [
|
items: [
|
||||||
{
|
|
||||||
image: `${imagesPrefix}/headers.jpg`,
|
],
|
||||||
title: "Page Headers",
|
|
||||||
subtitle: "10 Examples",
|
|
||||||
route: "page-headers",
|
|
||||||
pro: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: imgFeatures,
|
|
||||||
title: "Features",
|
|
||||||
subtitle: "14 Examples",
|
|
||||||
route: "page-features",
|
|
||||||
pro: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: imgPricing,
|
|
||||||
title: "Pricing",
|
|
||||||
subtitle: "8 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: `${imagesPrefix}/faq.jpg`,
|
|
||||||
title: "FAQ",
|
|
||||||
subtitle: "1 Example",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: imgBlogPosts,
|
|
||||||
title: "Blog Posts",
|
|
||||||
subtitle: "11 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: imgTestimonials,
|
|
||||||
title: "Testimonials",
|
|
||||||
subtitle: "11 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: imgTeam,
|
|
||||||
title: "Teams",
|
|
||||||
subtitle: "6 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: imgStat,
|
|
||||||
title: "Stats",
|
|
||||||
subtitle: "3 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: `${imagesPrefix}/call-to-action.jpg`,
|
|
||||||
title: "Call to Actions",
|
|
||||||
subtitle: "8 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: `${imagesPrefix}/projects.jpg`,
|
|
||||||
title: "Applications",
|
|
||||||
subtitle: "6 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: `${imagesPrefix}/logo-area.jpg`,
|
|
||||||
title: "Logo Areas",
|
|
||||||
subtitle: "4 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: `${imagesPrefix}/footers.jpg`,
|
|
||||||
title: "Footers",
|
|
||||||
subtitle: "10 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: `${imagesPrefix}/general-cards.jpg`,
|
|
||||||
title: "General Cards",
|
|
||||||
subtitle: "9 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: imgContent,
|
|
||||||
title: "Content Sections",
|
|
||||||
subtitle: "8 Examples",
|
|
||||||
route: "presentation",
|
|
||||||
pro: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// heading: "Design Blocks",
|
||||||
|
// description:
|
||||||
|
// "A selection of 45 page sections that fit perfectly in any combination",
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// image: `${imagesPrefix}/headers.jpg`,
|
||||||
|
// title: "Page Headers",
|
||||||
|
// subtitle: "10 Examples",
|
||||||
|
// route: "page-headers",
|
||||||
|
// pro: false
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: imgFeatures,
|
||||||
|
// title: "Features",
|
||||||
|
// subtitle: "14 Examples",
|
||||||
|
// route: "page-features",
|
||||||
|
// pro: false
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: imgPricing,
|
||||||
|
// title: "Pricing",
|
||||||
|
// subtitle: "8 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: `${imagesPrefix}/faq.jpg`,
|
||||||
|
// title: "FAQ",
|
||||||
|
// subtitle: "1 Example",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: imgBlogPosts,
|
||||||
|
// title: "Blog Posts",
|
||||||
|
// subtitle: "11 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: imgTestimonials,
|
||||||
|
// title: "Testimonials",
|
||||||
|
// subtitle: "11 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: imgTeam,
|
||||||
|
// title: "Teams",
|
||||||
|
// subtitle: "6 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: imgStat,
|
||||||
|
// title: "Stats",
|
||||||
|
// subtitle: "3 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: `${imagesPrefix}/call-to-action.jpg`,
|
||||||
|
// title: "Call to Actions",
|
||||||
|
// subtitle: "8 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: `${imagesPrefix}/projects.jpg`,
|
||||||
|
// title: "Applications",
|
||||||
|
// subtitle: "6 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: `${imagesPrefix}/logo-area.jpg`,
|
||||||
|
// title: "Logo Areas",
|
||||||
|
// subtitle: "4 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: `${imagesPrefix}/footers.jpg`,
|
||||||
|
// title: "Footers",
|
||||||
|
// subtitle: "10 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: `${imagesPrefix}/general-cards.jpg`,
|
||||||
|
// title: "General Cards",
|
||||||
|
// subtitle: "9 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// image: imgContent,
|
||||||
|
// title: "Content Sections",
|
||||||
|
// subtitle: "8 Examples",
|
||||||
|
// route: "presentation",
|
||||||
|
// pro: true
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
heading: "Navigation",
|
heading: "Navigation",
|
||||||
description: "30+ components that will help go through the pages",
|
description: "30+ components that will help go through the pages",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user