Обновил бэкенд под новые изменения на фронте
This commit is contained in:
@@ -1,42 +1,45 @@
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import { ref, watch, onMounted } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { useMessage } from "naive-ui"
|
||||
|
||||
const message = useMessage()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const city = ref("moscow")
|
||||
const city = ref(route.params.region || 'moscow')
|
||||
const cities = ref([])
|
||||
|
||||
const cities = [
|
||||
{ label: "Москва", value: "moscow" },
|
||||
{ label: "Санкт-Петербург", value: "spb" },
|
||||
{ label: "Казань", value: "kazan" }
|
||||
]
|
||||
|
||||
const phone = "8 (800) 000-00-00"
|
||||
const phone = "8 (800) 000-00-00"
|
||||
const phoneRaw = "88000000000"
|
||||
|
||||
function handlePhoneClick() {
|
||||
onMounted(async () => {
|
||||
const res = await fetch('/api/regions')
|
||||
const data = await res.json()
|
||||
cities.value = data.map(r => ({ label: r.name, value: r.slug }))
|
||||
})
|
||||
|
||||
const isMobile =
|
||||
/Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
|
||||
// синхронизируем селектор при навигации (кнопка «назад» и т.п.)
|
||||
watch(() => route.params.region, (val) => {
|
||||
if (val && val !== city.value) city.value = val
|
||||
})
|
||||
|
||||
// переходим на страницу выбранного региона
|
||||
watch(city, (val) => {
|
||||
if (val !== route.params.region) router.push(`/${val}`)
|
||||
})
|
||||
|
||||
function handlePhoneClick() {
|
||||
const isMobile = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
|
||||
.test(navigator.userAgent)
|
||||
|
||||
if (isMobile) {
|
||||
|
||||
window.location.href = `tel:${phoneRaw}`
|
||||
return
|
||||
|
||||
}
|
||||
else{
|
||||
|
||||
} else {
|
||||
navigator.clipboard.writeText(phone)
|
||||
message.success("Номер скопирован")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -49,16 +52,12 @@ function handlePhoneClick() {
|
||||
|
||||
<div class="col center">
|
||||
<div class="title">Удалённый бухгалтер</div>
|
||||
|
||||
|
||||
<n-select
|
||||
v-model:value="city"
|
||||
:options="cities"
|
||||
size="small"
|
||||
class="city"
|
||||
/>
|
||||
|
||||
|
||||
<n-select
|
||||
v-model:value="city"
|
||||
:options="cities"
|
||||
size="small"
|
||||
class="city"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col right">
|
||||
@@ -77,204 +76,91 @@ function handlePhoneClick() {
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.header {
|
||||
|
||||
padding: 26px 0;
|
||||
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
#ffd000,
|
||||
#ff7a00,
|
||||
#ff2a00
|
||||
);
|
||||
|
||||
background: linear-gradient(120deg, #ffd000, #ff7a00, #ff2a00);
|
||||
background-size: 300% 300%;
|
||||
|
||||
animation:
|
||||
gradientMove 10s ease infinite,
|
||||
headerAppear .7s ease;
|
||||
|
||||
animation: gradientMove 10s ease infinite, headerAppear .7s ease;
|
||||
box-shadow: 0 8px 22px rgba(0,0,0,0.25);
|
||||
|
||||
}
|
||||
|
||||
/* gradient animation */
|
||||
|
||||
@keyframes gradientMove {
|
||||
|
||||
0% { background-position: 0% 50%; }
|
||||
|
||||
50% { background-position: 100% 50%; }
|
||||
|
||||
100% { background-position: 0% 50%; }
|
||||
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/* header appear */
|
||||
|
||||
@keyframes headerAppear {
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
from { opacity: 0; transform: translateY(-40px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* layout */
|
||||
|
||||
.inner {
|
||||
|
||||
max-width: 1600px;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
padding: 0 60px;
|
||||
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.col {
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.left { justify-content: flex-start; }
|
||||
|
||||
.center {
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.left { justify-content: flex-start; }
|
||||
.center { flex-direction: column; text-align: center; }
|
||||
.right { justify-content: flex-end; }
|
||||
|
||||
/* logo */
|
||||
|
||||
.logo {
|
||||
|
||||
font-size: 24px;
|
||||
|
||||
font-weight: 800;
|
||||
|
||||
letter-spacing: 1px;
|
||||
|
||||
color: black;
|
||||
|
||||
transition: transform .25s ease;
|
||||
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
|
||||
transform: scale(1.08);
|
||||
|
||||
}
|
||||
|
||||
/* title */
|
||||
.logo:hover { transform: scale(1.08); }
|
||||
|
||||
.title {
|
||||
|
||||
font-size: 20px;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
/* select */
|
||||
|
||||
.city {
|
||||
|
||||
margin-top: 8px;
|
||||
|
||||
width: 190px;
|
||||
|
||||
}
|
||||
|
||||
/* phone */
|
||||
.city { margin-top: 8px; width: 190px; }
|
||||
|
||||
.phone {
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
font-size: 18px;
|
||||
|
||||
color: black;
|
||||
|
||||
padding: 7px 16px;
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
background: rgba(255,255,255,0.35);
|
||||
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border: 1px solid rgba(255,255,255,0.35);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: all .25s ease;
|
||||
|
||||
}
|
||||
|
||||
.phone:hover {
|
||||
|
||||
background: rgba(255,255,255,0.6);
|
||||
|
||||
transform: translateY(-2px);
|
||||
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,.2);
|
||||
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
.inner {
|
||||
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
gap: 12px;
|
||||
|
||||
padding: 0 25px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.logo { font-size: 22px; }
|
||||
|
||||
.left, .right { justify-content: center; }
|
||||
.logo { font-size: 22px; }
|
||||
.title { font-size: 18px; }
|
||||
|
||||
.phone { font-size: 16px; }
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user