166 lines
6.0 KiB
HTML
166 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Калькулятор путешествий</title>
|
||
|
||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
|
||
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
|
||
crossorigin="anonymous"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
|
||
<!--Меню-->
|
||
<nav class="navbar bg-body-tertiary">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand" href="#">Калькулятор поездки</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container text-center">
|
||
<div class="row">
|
||
<div class="col"></div>
|
||
<div class="col-8 interfaces-middle-block">
|
||
|
||
<!--Калькулятор-->
|
||
<div class="interfaces-calc-block">
|
||
<div class="interfaces-input-block">
|
||
<label>
|
||
<div class="interfaces-label">
|
||
Количество человек
|
||
</div>
|
||
<input class="interfaces-input" v-model="countUsers">
|
||
</label>
|
||
</div>
|
||
<div class="interfaces-input-block">
|
||
<label>
|
||
<div class="interfaces-label">
|
||
Количество суток
|
||
</div>
|
||
<input class="interfaces-input" v-model="countDays">
|
||
</label>
|
||
</div>
|
||
<div class="interfaces-input-block">
|
||
<label>
|
||
<div class="interfaces-label">
|
||
Место проживания
|
||
</div>
|
||
<select class="interfaces-input" v-model="selectedPlace">
|
||
<option disabled value="">Выберете один из вариантов</option>
|
||
<option>Я сам (0 руб/ночь)</option>
|
||
<option>Гостиница эконом (1500 руб/ночь)</option>
|
||
<option>Гостиница дорого богато (15 000 руб/ночь)</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<div class="interfaces-input-block">
|
||
<label>
|
||
<div class="interfaces-label">
|
||
Трех разовое питание
|
||
</div>
|
||
<input type="checkbox" id="checkbox" v-model="eat3"/>
|
||
{{ eat3Text }}
|
||
</label>
|
||
</div>
|
||
<p>Цена за сутки {{ priceDay }} руб</p>
|
||
<div class="interfaces-input-block">
|
||
<label>
|
||
<div class="interfaces-label">
|
||
Дорога назад
|
||
</div>
|
||
<select class="interfaces-input" v-model="returnRace">
|
||
<option disabled value="">Выберете один из вариантов</option>
|
||
<option>Я сам (0 руб)</option>
|
||
<option>Автобус (1000 руб)</option>
|
||
<option>Такси (5000 руб)</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<p>Итого: {{ result }} руб</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script>
|
||
Vue.createApp({
|
||
data() {
|
||
return {
|
||
countUsers: 0,
|
||
countDays: 0,
|
||
selectedPlace: "",
|
||
returnRace: "",
|
||
eat3: false
|
||
}
|
||
},
|
||
computed: {
|
||
eat3Text() {
|
||
if (this.eat3) {
|
||
return "Включено"
|
||
}
|
||
return "Не надо"
|
||
},
|
||
priceDay() {
|
||
var price = 0
|
||
if (this.selectedPlace === "Гостиница эконом (1500 руб/ночь)") {
|
||
price = 1500
|
||
}
|
||
if (this.selectedPlace === "Гостиница дорого богато (15 000 руб/ночь)") {
|
||
price = 15000
|
||
}
|
||
if (this.eat3) {
|
||
price += 1500
|
||
}
|
||
return price
|
||
},
|
||
priceReturnRace() {
|
||
if (this.returnRace === "Автобус (1000 руб)") {
|
||
return 1000
|
||
}
|
||
if (this.returnRace === "Такси (5000 руб)") {
|
||
return 5000
|
||
}
|
||
return 0
|
||
},
|
||
result() {
|
||
return this.priceDay * this.countUsers * this.countDays +
|
||
this.priceReturnRace * this.countUsers
|
||
}
|
||
}
|
||
}).mount('#app')
|
||
</script>
|
||
|
||
<style>
|
||
.interfaces-middle-block {
|
||
padding: 30px;
|
||
}
|
||
|
||
.interfaces-calc-block {
|
||
text-align: left;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.interfaces-calc-block label {
|
||
width: 100%;
|
||
}
|
||
|
||
.interfaces-label {
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.interfaces-input {
|
||
width: 100%;
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|
||
|
||
</body>
|
||
</html>
|