Создание проекта и настройка стилей
Создадим проект криптообменника. Начнём с файла app.vue и файла стилей style.css в папке assets. Подключим style.css в main.js:
import './assets/style.css'В style.css зададим градиент для элемента <body> и шрифт Monat из Google Fonts (код импорта необходимо добавить самостоятельно). Для устранения нежелательных полосок добавим свойство min-height: 100vh;:
body {
min-height: 100vh;
font-family: 'Monat', sans-serif;
/* ... градиент ... */
}Создание компонентов
Создадим компоненты Input.vue для поля ввода и Selector.vue для селектора валют.
Компонент Input.vue:
<template>
<input type="number">
</template>
<script>
export default {
// ...
};
</script>
Стиль для компонента Input.vue:
input[type="number"] {
text-align: center;
border-radius: 3px;
border: none;
padding: 10px 15px;
background-color: /* Цвет фона */;
color: /* Цвет текста */;
outline: none;
width: 500px;
position: relative;
top: -50px;
font-size: 1.2em;
}Компонент Selector.vue:
<template>
<ul>
<li class="active">Bitcoin</li>
<li>Ethereum</li>
<li>USDT</li>
</ul>
</template>
<style scoped>
ul {
/* ... стили ... */
}
li {
/* ... стили ... */
}
li.active {
/* ... стили ... */
}
</style>
Стиль для селектора валют (добавить в style.css или Selector.vue):
/* Стили для селектора */Размещение компонентов и стилизация
Импортируем компоненты Input.vue и Selector.vue в app.vue и разместим их на странице. Добавим стили для блока с селекторами:
.selectors {
display: flex;
justify-content: space-around;
width: 700px;
margin: 0 auto;
}Для заголовка <h1> используем шрифт Nabla из Google Fonts (код импорта необходимо добавить самостоятельно) и стили:
h1 {
font-family: 'Nabla', sans-serif;
text-align: center;
margin-top: 10em;
font-size: 10em;
}На данном этапе разработан базовый дизайн криптообменника. В дальнейшем необходимо реализовать функционал ввода значений, выбора валют и конвертации.