@@ -1,90 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
<el-container class="landing-container">
|
||||
<el-main class="hero-section">
|
||||
<el-row :gutter="20" class="header-row">
|
||||
<el-col>
|
||||
<RouterLink to="/">
|
||||
<img src="@/assets/logo.jpeg" width="200" height="200" alt="" />
|
||||
</RouterLink>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<h1>Создайте уникальный QR-код для связи</h1>
|
||||
<p>
|
||||
Люди смогут отправлять вам сообщения, сканируя этот QR-код, без необходимости раскрывать
|
||||
ваши контактные данные.
|
||||
</p>
|
||||
<el-button tag="RouterLink" to="/create" type="primary" size="large"
|
||||
>Создать QR-код</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
<!-- Где использовать? -->
|
||||
<el-main id="setup" class="setup-section">
|
||||
<h2>Где использовать?</h2>
|
||||
<p>
|
||||
QR-код можно будет разместить на вашем автомобиле, на входной двери или на ошейнике вашего
|
||||
питомца — это позволит окружающим легко связаться с вами в случае необходимости, при этом
|
||||
ваши контактные данные останутся конфиденциальными.
|
||||
</p>
|
||||
</el-main>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
<!-- Примеры использования -->
|
||||
<el-main id="examples" class="examples-section">
|
||||
<h2>Примеры использования</h2>
|
||||
<el-carousel height="100px">
|
||||
<el-carousel-item>
|
||||
<p>Автомобиль: получайте уведомления о проблемах с парковкой или фарами.</p>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<p>Питомец: помогите вернуть потерявшегося питомца.</p>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<p>Квартира: оставляйте инструкции для курьеров или соседей.</p>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-main>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
|
||||
you need to test your components and web pages, check out
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
and
|
||||
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
|
||||
>Cypress Component Testing</a
|
||||
>.
|
||||
<!-- Простота настройки -->
|
||||
<el-main id="setup" class="setup-section">
|
||||
<h2>Простота настройки</h2>
|
||||
<p>Создайте QR-код, выберите доступные действия и начните использовать.</p>
|
||||
</el-main>
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in <code>README.md</code>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
|
||||
Discord server, or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also subscribe to
|
||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a>
|
||||
and follow the official
|
||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
twitter account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
<!-- Подвал -->
|
||||
<el-footer class="footer">
|
||||
<p>НаСвязи © 2024. Свяжитесь с нами в социальных сетях.</p>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.landing-container {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
padding: 100px 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.features-section,
|
||||
.examples-section,
|
||||
.setup-section,
|
||||
.qr-form-section {
|
||||
padding: 50px 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
Reference in New Issue
Block a user