mirror of
https://github.com/creativetimofficial/muse-vue-ant-design-dashboard.git
synced 2025-08-16 19:42:07 +08:00
135 lines
6.8 KiB
Vue
135 lines
6.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page-row">
|
|
<div class="page-content">
|
|
<section class="mb-24" id="Introduction">
|
|
<h1>Muse Vue Ant Design Dashboard</h1>
|
|
<p class="text-dark">
|
|
A user-friendly, open source and beautiful dashboard based on Ant Design Vue.
|
|
</p>
|
|
</section>
|
|
<a-divider />
|
|
<section class="mb-24">
|
|
<p>
|
|
We at <a href="https://www.creative-tim.com/">Creative Tim</a> have always wanted to deliver great tools to all the web developers. We want to see better websites and web apps on the internet.
|
|
</p>
|
|
<a-row :gutter="[24,24]">
|
|
<a-col :span="24" :lg="8" class="">
|
|
|
|
<a-card :bordered="false" class="widget-2 h-full bg-gray-3 text-center p-30">
|
|
<div class="icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="fill-primary " width="22" height="22" viewBox="0 0 384 512"><path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path></svg>
|
|
</div>
|
|
<h4>Developer First</h4>
|
|
<p>
|
|
Muse Dashboard is a "Developer First" product, with a lot of variables for colors, fonts, sizes and other elements.
|
|
</p>
|
|
</a-card>
|
|
|
|
</a-col>
|
|
<a-col :span="24" :lg="8" class="">
|
|
|
|
<a-card :bordered="false" class="widget-2 h-full bg-gray-3 text-center p-30">
|
|
<div class="icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="fill-primary " width="22" height="22" viewBox="0 0 384 512"><path d="M97.12 362.63c-8.69-8.69-4.16-6.24-25.12-11.85-9.51-2.55-17.87-7.45-25.43-13.32L1.2 448.7c-4.39 10.77 3.81 22.47 15.43 22.03l52.69-2.01L105.56 507c8 8.44 22.04 5.81 26.43-4.96l52.05-127.62c-10.84 6.04-22.87 9.58-35.31 9.58-19.5 0-37.82-7.59-51.61-21.37zM382.8 448.7l-45.37-111.24c-7.56 5.88-15.92 10.77-25.43 13.32-21.07 5.64-16.45 3.18-25.12 11.85-13.79 13.78-32.12 21.37-51.62 21.37-12.44 0-24.47-3.55-35.31-9.58L252 502.04c4.39 10.77 18.44 13.4 26.43 4.96l36.25-38.28 52.69 2.01c11.62.44 19.82-11.27 15.43-22.03zM263 340c15.28-15.55 17.03-14.21 38.79-20.14 13.89-3.79 24.75-14.84 28.47-28.98 7.48-28.4 5.54-24.97 25.95-45.75 10.17-10.35 14.14-25.44 10.42-39.58-7.47-28.38-7.48-24.42 0-52.83 3.72-14.14-.25-29.23-10.42-39.58-20.41-20.78-18.47-17.36-25.95-45.75-3.72-14.14-14.58-25.19-28.47-28.98-27.88-7.61-24.52-5.62-44.95-26.41-10.17-10.35-25-14.4-38.89-10.61-27.87 7.6-23.98 7.61-51.9 0-13.89-3.79-28.72.25-38.89 10.61-20.41 20.78-17.05 18.8-44.94 26.41-13.89 3.79-24.75 14.84-28.47 28.98-7.47 28.39-5.54 24.97-25.95 45.75-10.17 10.35-14.15 25.44-10.42 39.58 7.47 28.36 7.48 24.4 0 52.82-3.72 14.14.25 29.23 10.42 39.59 20.41 20.78 18.47 17.35 25.95 45.75 3.72 14.14 14.58 25.19 28.47 28.98C104.6 325.96 106.27 325 121 340c13.23 13.47 33.84 15.88 49.74 5.82a39.676 39.676 0 0 1 42.53 0c15.89 10.06 36.5 7.65 49.73-5.82zM97.66 175.96c0-53.03 42.24-96.02 94.34-96.02s94.34 42.99 94.34 96.02-42.24 96.02-94.34 96.02-94.34-42.99-94.34-96.02z"/></svg>
|
|
</div>
|
|
<h4>High quality</h4>
|
|
<p>
|
|
We are following the latest code standards provided by the guys from Bootstrap, so you will love working with this dashboard.
|
|
</p>
|
|
</a-card>
|
|
|
|
</a-col>
|
|
<a-col :span="24" :lg="8" class="">
|
|
|
|
<a-card :bordered="false" class="widget-2 h-full bg-gray-3 text-center p-30">
|
|
<div class="icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="fill-primary " width="22" height="22" viewBox="0 0 640 512"><path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"/></svg>
|
|
</div>
|
|
<h4>Community helpers</h4>
|
|
<p>
|
|
Since all our products are built on top of Open Source also Soft UI Dashboard is released under <a class="text-white font-semibold" href="https://github.com/creativetimofficial/softui-dashboard/blob/master/LICENSE.md">MIT License</a>.
|
|
</p>
|
|
</a-card>
|
|
|
|
</a-col>
|
|
</a-row>
|
|
</section>
|
|
<section class="mb-24" id="Resources-and-credits">
|
|
<h2>Resources and credits</h2>
|
|
<p>This Dashboard is fully coded and built on top of Open Source, more details here:</p>
|
|
<ul class="font-semibold credits">
|
|
<li><a href="https://vuejs.org/">VueJS</a> : The Progressive JavaScript Framework</li>
|
|
<li><a href="https://antdv.com/">Ant Design Vue</a> : A Vue UI library antd that contains a set of high quality components and demos for building rich, interactive user interfaces.</li>
|
|
</ul>
|
|
</section>
|
|
<section class="mb-24" id="Learn-more">
|
|
<h2>Learn more</h2>
|
|
<p>Stay up to date on the development journey and connect with us on:</p>
|
|
<ul class="font-semibold credits">
|
|
<li>Follow <a href="https://twitter.com/creativetim">Creative Tim on Twitter</a>.</li>
|
|
<li>Read and subscribe to The Official <a href="https://creative-tim.com/blog?_ga=2.82963030.1761768429.1624962735-2035188204.1618172375">Creative Tim Blog</a>.</li>
|
|
<li>Follow <a href="https://www.instagram.com/creativetimofficial">Creative Tim on Instagram</a>.</li>
|
|
<li>Follow <a href="https://www.facebook.com/creativetim">Creative Tim on Facebook</a>.</li>
|
|
</ul>
|
|
</section>
|
|
<section class="mb-24">
|
|
<h2><a class="text-dark" href="/quick-start/vue-ant-design-dashboard/">Press here to Quick start</a></h2>
|
|
</section>
|
|
</div>
|
|
<muse-anchor :anchors="anchors"></muse-anchor>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
head () {
|
|
return {
|
|
title: 'Muse Vue Ant Design Dashboard | Creative Tim',
|
|
meta: [
|
|
{ hid: 'description', name: 'description', content: 'A user-friendly, open source and beautiful dashboard based on Ant Design Vue.' }
|
|
]
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
anchors: {
|
|
"Introduction": "Introduction",
|
|
"Resources-and-credits": "Resources and credits",
|
|
"Learn-more": "Learn more",
|
|
},
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
.widget-2 {
|
|
background-image: url('~/assets/info-card-3.jpg');
|
|
background-position: 50%;
|
|
background-size: cover;
|
|
border: none;
|
|
|
|
|
|
.icon {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
h4 {
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
}
|
|
p {
|
|
color: #eeeeee;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
.credits {
|
|
line-height: 2;
|
|
padding-inline-start: 30px;
|
|
}
|
|
</style> |