2023-04-09 19:13:53 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="ru">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>Калькулятор путешествий</title>
|
2023-04-10 06:38:53 +00:00
|
|
|
|
|
2023-04-09 19:13:53 +00:00
|
|
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
2023-04-10 06:38:53 +00:00
|
|
|
|
<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>
|
2023-04-09 19:13:53 +00:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
|
2023-04-10 06:38:53 +00:00
|
|
|
|
<!--Меню-->
|
|
|
|
|
|
<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>
|
2023-04-09 19:13:53 +00:00
|
|
|
|
<script>
|
|
|
|
|
|
Vue.createApp({
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
2023-04-10 06:38:53 +00:00
|
|
|
|
countUsers: 0,
|
|
|
|
|
|
countDays: 0,
|
|
|
|
|
|
selectedPlace: "",
|
|
|
|
|
|
returnRace: "",
|
|
|
|
|
|
eat3: false
|
2023-04-09 19:13:53 +00:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {
|
2023-04-10 06:38:53 +00:00
|
|
|
|
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
|
|
|
|
|
|
},
|
2023-04-09 19:13:53 +00:00
|
|
|
|
result() {
|
2023-04-10 06:38:53 +00:00
|
|
|
|
return this.priceDay * this.countUsers * this.countDays +
|
|
|
|
|
|
this.priceReturnRace * this.countUsers
|
2023-04-09 19:13:53 +00:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}).mount('#app')
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
2023-04-10 06:38:53 +00:00
|
|
|
|
<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>
|
|
|
|
|
|
|
2023-04-09 19:13:53 +00:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
