src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  
+  <n-config-provider>
+    <n-message-provider>
   <div class="app">
     <SiteHeader />
     <main class="container">
@@ -13,6 +14,8 @@
     </main>
     <Footer />
   </div>
+  </n-message-provider>
+  </n-config-provider>
 </template>
 
 <script setup>

src/components/SiteHeader.vue

@@ -1,74 +1,297 @@
+<script setup>
+import { ref } from "vue"
+import { useMessage } from "naive-ui"
+
+const message = useMessage()
+
+const city = ref("moscow")
+
+const cities = [
+  { label: "Москва", value: "moscow" },
+  { label: "Санкт-Петербург", value: "spb" },
+  { label: "Казань", value: "kazan" }
+]
+
+const phone = "8 (800) 000-00-00"
+const phoneRaw = "88000000000"
+
+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{
+
+    navigator.clipboard.writeText(phone)
+    message.success("Номер скопирован")
+  }
+
+}
+
+const selectTheme = {
+  common: {
+    primaryColor: "#ff4d00",
+    primaryColorHover: "#ff6a00",
+    primaryColorPressed: "#e63e00",
+    borderRadius: "10px"
+  },
+  Select: {
+    peers: {
+      InternalSelection: {
+        color: "rgba(255,255,255,0.45)",
+        textColor: "#000",
+        border: "1px solid rgba(255,255,255,0.35)",
+        borderHover: "1px solid rgba(255,255,255,0.6)"
+      }
+    }
+  }
+}
+
+</script>
+
 <template>
   <header class="header">
     <div class="inner">
+
       <div class="col left">
         <div class="logo">LOGO</div>
       </div>
 
       <div class="col center">
         <div class="title">Удалённый бухгалтер</div>
-        <select class="city">
+
-          <option>Москва</option>
+        <n-config-provider :theme-overrides="selectTheme">
-          <option>Санкт-Петербург</option>
+          <n-select
-          <option>Казань</option>
+            v-model:value="city"
-        </select>
+            :options="cities"
+            size="small"
+            class="city"
+          />
+        </n-config-provider>
+
       </div>
 
       <div class="col right">
-        <div class="phone">8 (800) 000-00-00</div>
+        <div
+          class="phone"
+          @click="handlePhoneClick"
+          title="Нажмите чтобы скопировать"
+        >
+          {{ phone }}
         </div>
       </div>
+
+    </div>
   </header>
 </template>
 
 <style scoped>
+
+/* HEADER */
+
 .header {
-  padding: 25px 0;
+
+  padding: 26px 0;
+
+  background: linear-gradient(
+    120deg,
+    #ffd000,
+    #ff7a00,
+    #ff2a00
+  );
+
+  background-size: 300% 300%;
+
+  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%; }
+
+}
+
+/* header appear */
+
+@keyframes headerAppear {
+
+  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);
+
+  grid-template-columns: repeat(3,1fr);
+
   align-items: center;
+
 }
 
 .col {
+
   display: flex;
+
   align-items: center;
+
 }
 
-.left {
+.left { justify-content: flex-start; }
-  justify-content: flex-start;
-}
 
 .center {
+
   flex-direction: column;
+
   text-align: center;
+
 }
 
-.right {
+.right { justify-content: flex-end; }
-  justify-content: flex-end;
+
-}
+/* logo */
 
 .logo {
-  font-size: 22px;
+
-  font-weight: bold;
+  font-size: 24px;
+
+  font-weight: 800;
+
+  letter-spacing: 1px;
+
+  color: black;
+
+  transition: transform .25s ease;
+
 }
 
+.logo:hover {
+
+  transform: scale(1.08);
+
+}
+
+/* title */
+
 .title {
-  font-size: 18px;
+
-  font-weight: 600;
+  font-size: 20px;
+
+  font-weight: 700;
+
+  color: black;
+
 }
 
+/* select */
+
 .city {
-  margin-top: 6px;
+
-  padding: 6px 12px;
+  margin-top: 8px;
+
+  width: 190px;
+
 }
 
+/* phone */
+
 .phone {
-  font-weight: 600;
+
+  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; }
+
+  .title { font-size: 18px; }
+
+  .phone { font-size: 16px; }
+
+}
+
 </style>