mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 21:04: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";
|
||||
|
||||
//Vue Material Kit 2 components
|
||||
import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
|
||||
// sections
|
||||
@ -22,13 +21,6 @@ import PresentationInformation from "./Sections/PresentationInformation.vue";
|
||||
|
||||
//images
|
||||
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
|
||||
const body = document.getElementsByTagName("body")[0];
|
||||
@ -43,24 +35,7 @@ onUnmounted(() => {
|
||||
</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>
|
||||
|
||||
|
||||
@ -112,42 +87,16 @@ export default {
|
||||
</div>
|
||||
</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">
|
||||
<PresentationCounter />
|
||||
<PresentationInformation />
|
||||
<PresentationExample :data="data" />
|
||||
<PresentationPages />
|
||||
<BuiltByDevelopers />
|
||||
|
||||
</div>
|
||||
<!--
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<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 imgModal from "@/assets/img/modals.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 [
|
||||
{
|
||||
heading: "Design Blocks",
|
||||
heading: "Проекты",
|
||||
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: "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",
|
||||
description: "30+ components that will help go through the pages",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user