<script setup>
import FirstCol from './components/FirstCol.vue'
import SecondCol from './components/SecondCol.vue'
import SupBody from './components/SupBody.vue'
import tar1 from './components/tar1.vue'
import tar2 from './components/tar2.vue'
import comp1 from './components/comp1.vue'
import comp2 from './components/comp2.vue'
import comp3 from './components/comp3.vue'
import team1 from './components/team1.vue'
import cases from './components/cases.vue'
import tar3 from './components/tar3.vue'
import 'swiper/css';
</script>
<script>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
export default {
data() {
return {
phone: '',
name: '',
email: '',
message: '',
consent: false,
show: true,
activeIndexes: [],
items: [
{ question: '1.Кто непосредственно занимается поддержкой?',
answer: 'Поддержка и обслуживание включают в себя команду программистов и дизайнеров. Эти специалисты отвечают за техническую поддержку, обновления модели, улучшение ее функциональности и обеспечение безопасности и этичности использования.' },
]
};
},
methods: {
phoneinput() {
this.phone = this.phone.replace(/\D/g, '');
},
formbut() {
if (!this.name || !this.email || !this.phone || !this.message || !this.consent) {
alert('Пожалуйста, заполните все поля');
return;
}
localStorage.setItem('formValues', JSON.stringify({
name: this.name,
email: this.email,
phone: this.phone,
message: this.message,
consent: this.consent
}));
this.sendFormData();
this.name = '';
this.email = '';
this.phone = '';
this.message = '';
this.consent = false;
alert('Данные успешно отправлены!');
},
sendFormData() {
const formData = {
name: this.name,
email: this.email,
phone: this.phone,
message: this.message,
consent: this.consent
};
fetch('https://formcarry.com/s/jpXL8tnTne', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});
},
answer(index) {
const active = this.active(index);
if (active) {
this.activeIndexes = this.activeIndexes.filter(i => i !== index);
} else {
this.activeIndexes.push(index);
}
},
active(index) {
return this.activeIndexes.includes(index);
}
},
components: {
Swiper,
SwiperSlide,
},
setup() {
const prev = ref(null);
const next = ref(null);
const fraction = ref(null);
return {
modules: [Autoplay, Pagination, Navigation],
prev,
next,
fraction
};
},
data () {
return {
comments: [
{
brend: 'comment_logo.svg',
description: 'Команда Drupal Coder вызвала только положительные впечатления!'
},
{
brend: 'works_card_1.svg',
description: 'Lorem ipsum dolor sit, amet consectetur adipisicing.'
},
{
brend: 'works_card_2.svg',
description: 'Provident similique accusantium nemo autem.'
},
{
brend: 'works_card_3.svg',
description: 'Perspiciatis minima nesciunt dolorem!'
},
{
brend: 'works_card_4.svg',
description: 'Commodi minima excepturi repudiandae velit hic maxime doloremque.'
}
]
}
}
};
</script>
<template>
<header>
<nav class="navbar navbar-dark navbar-expand-lg">
<div class="container col-lg-12 col-md-12">
<a class="navbar-brand" href="#"><img src="./assets/img/drupal-coder.svg" width="137" height="20" alt="logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDarkDropdown">
<div class="wrapper">
<div class="comment_container">
<h1 class="comment_title">
Отзывы
</h1>
<img src="./assets/bg_left.png" alt="" class="bg_left">
<div class="comment">
<div class="comment_left">
<swiper
:pagination="{
type: 'fraction',
el: fraction
}"
:navigation="{
prevEl: prev,
nextEl: next,
}"
:modules="modules"
class="mySwiper"
>
<swiper-slide v-for="i in comments" :key="i">
<div class="comment_card">
<img :src="require(`@/assets/${i.brend}`)" alt="">
<h6>
{{ i.description }}
</h6>
<p>
Нуреев Александр, менеджер проекта Winamp Russian Community
</p>
</div>
</swiper-slide>
</swiper>
</div>
<div class="line"></div>
<div class="comment_right">
<div class="swiper_btns">
<button ref="prev" class="swiper-button-prev">
<img src="./assets/arrow-left.svg" alt="">
</button>
<div ref="fraction" class="swiper-pagination-fraction">
<span class="">
1
</span>
<span class="number_line">/</span>
<span class="swiper-pagination-total">
5
</span>
</div>
<button ref="next" class="swiper-button-next">
<img src="./assets/arrow-right.svg" alt="">
</button>
</div>
</div>
</div>
</div>
<section class="works_card">
<div class="main_container">
<h2 class="comment_title">С нами работают</h2>
<p class="description">Десятки компаний доверяют нам самое ценное, что у них есть в интернете – свои сайты. Мы делаем всё, чтобы наше сотрудничество было долгим.</p>
<swiper
:slidesPerView="'auto'"
:loop="true"
:spaceBetween="20"
:centeredSlides="true"
:speed="3000"
:autoplay="{
delay: 0,
}"
:modules="modules"
class="works_card_slider"
>
<swiper-slide v-for="i in 4" :key="i">
<div class="card_content">
<img :src="require(`@/assets/works_card_${i}.svg`)" alt="">
</div>
</swiper-slide>
<swiper-slide v-for="i in 4" :key="i">
<div class="card_content">
<img :src="require(`@/assets/works_card_${i}.svg`)" alt="">
</div>
</swiper-slide>
<swiper-slide v-for="i in 4" :key="i">
<div class="card_content">
<img :src="require(`@/assets/works_card_${i}.svg`)" alt="">
</div>
</swiper-slide>
</swiper>
<swiper
:slidesPerView="'auto'"
:loop="true"
:centered-slides="true"
:spaceBetween="20"
:centeredSlides="true"
:speed="3000"
:autoplay="{
delay: 0,
reverseDirection: true,
}"
:modules="modules"
class="works_card_slider"
>
<swiper-slide v-for="i in 4" :key="i">
<div class="card_content">
<img :src="require(`@/assets/works_card_${i}.svg`)" alt="">
</div>
</swiper-slide>
<swiper-slide v-for="i in 4" :key="i">
<div class="card_content">
<img :src="require(`@/assets/works_card_${i}.svg`)" alt="">
</div>
</swiper-slide>
<swiper-slide v-for="i in 4" :key="i">
<div class="card_content">
<img :src="require(`@/assets/works_card_${i}.svg`)" alt="">
</div>
</swiper-slide>
</swiper>
</div>
</section>
</div>
<!--FAQ-->
<div>
<center> <h2> FAQ</h2></center>
<div id="faq" v-if="show">
<div v-for="(item, index) in items" :key="index" class="item" @click="answer(index)" :class="{ 'active': active(index) }">
<div class="content" :class="{ 'active': active(index) }">
<span class="question">{{ item.question }}</span>
<div v-if="active(index)">{{ item.answer }}</div>
</div>
</div>
</div>
<router-view/>
</div>
<div class="fon">
<div class="form">
<div class="left">
<p class="otzuv">
Оставьте заявку на поддержку сайта
</p>
</template>
<style>
}
#block-cases .view-content:after {
content: "";
display: table;
clear: both;
}
#block-cases .block-title {
font-weight: bold;
font-size: 42px;
margin-bottom: 46px;
margin-top: 0;
text-align: center;
color: #050c33;
}
.
color: #050c33;
}
.inverse .blog.keys-1:nth-child(4n+1) .keys-date {
color: #050c33;
}
.blog.keys-2 {
width: 66.66666667%;
padding: 0 10px;
float: left;
margin-bottom: 20px;
min-height: 475px;
font-family: "Montserrat", sans-serif;
overflow: hidden;
cursor: pointer;
}
.link{text-decoration: none;text-align: start;}
/*Тарифы*/
.social-icons {
margin-top: 20px;
padding-left:18%;
}
.two,.one {
line-height:5px;
}
.two{
padding-bottom:2%;
}
.social-icons i {
font-size: 24px;
color: #F14D34;
margin-right: 15px;
}
.social-icons i:last-child {
margin-right: 0;
}
.social-icons i:hover {
color: #D43F22;
}
.fon1 {
background-color: #090b18;
}
.fon {
background-color: #090b18;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.tel{
margin-top:100px;
}
.tel,.email
{
font-size:30px;
line-height:10px;
}
p
{
color:white;
}
.form {
display: flex;
justify-content: space-between;
width: 80%;
}
.form .left {
margin-left: 10%;
}
.left {
width: 480px;
}
.right {
width: calc(100% - 100px);
max-width: 400px;
padding: 20px 0;
box-sizing: border-box;
}
.formel {
margin-bottom: 15px;
}
label {
color: white;
display: block;
margin-bottom: 5px;
}
.formin {
width: 100%;
padding: 8px;
font-size: 15px;
box-sizing: border-box;
background-color: #090b18;
color: white;
border: 1px solid white;
border-radius: 3px;
height: 50px;
}
textarea.formin {
resize: vertical;
border-radius: 3px;
height: 100px;
}
.orbutton {
width: 100%;
height:45px;
padding: 10px;
background-color: #F14D34; ;
color: white;
border: none;
cursor: pointer;
}
.consent-group {
display: flex;
align-items: center;
}
.galka {
margin-left: 5px;
color: white;
}
.otzuv {
color: white;
margin-bottom: 5px;
font-size:40px;
}
.line {
background-color: gray;
height: 2px;
width: 100%;
}
/*FAQ */
#faq {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
margin-bottom: 10px;
cursor: pointer;
width: 60%;
}
.question {
font-weight: bold;
}
.content {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
transition: background-color 0.3s;
}
.content:hover {
background-color: #f0f0f0;
}
.content.active {
border-color: red;
background-color: #ffffff;
}
@media only screen and (max-width: 768px) {
template{
max-width: 100%;
overflow-x: hidden;
}
.form {
flex-direction: column;
width: 100%;
}
.left {
width: 100%;
margin-left: 0;
}
.right {
width: 100%;
max-width: none;
padding: 10px;
}
.formin,
textarea.formin {
height: 40px;
}
.consent-group {
flex-direction: column;
}
.orbutton {
height: 40px;
}
.social-icons {
padding-left: 10%;
}
.otzuv, .promo {
padding-right: 50px; }
html, body {
overflow-x: hidden;
}
}
body {
font-family: "Montserrat", sans-serif;
font-style: normal;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
background: transparent;
outline: none;
border: none;
}
.wrapper {
width: 100%;
overflow: hidden;
}
.main_container {
max-width: 980px;
margin: 0 auto;
}
.description {
color: var(--main-black, #050C33);
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 22px;
opacity: 0.7;
}
.works_card .description {
max-width: 740px;
margin: 0 auto 42px;
}
.works_card .comment_title {
margin-bottom: 10px;
margin-top: 160px;
}
.works_card_slider {
overflow: visible;
margin-bottom: 20px;
user-select: none;
}
.works_card_slider:last-child {
margin-bottom: 160px;
}
.works_card_slider .swiper-wrapper{
transition-timing-function:linear;
}
.works_card_slider .swiper-slide {
border-radius: 5px;
border: 1px solid #E5E5E5;
cursor: pointer;
width: 291px;
}
.works_card_slider .swiper-slide .card_content {
height: 155px;
display: flex;
align-items: center;
justify-content: center;
}
.swiper_btns{
width: 206px;
/* border: 1px solid red; */
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-pagination-fraction {
width: auto;
text-align: center;
}
.swiper-pagination-fraction span {
font-family: 'Montserrat',sans-serif;
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.swiper-wrapper {
padding: 5px;
}
/* .swiper-pagination-current {
color: #050C33;
}
.number_line {
color: #E0E0E0;
}
.swiper-pagination-total {
color: #E0E0E0;
} */
.comment_right {
display: flex;
align-items: center;
}
.swiper-button-prev {
position: absolute;
}
.swiper-button-prev::after {
display: none;
}
.swiper-button-next::after {
display: none;
}
.comment_container {
max-width: 1440px;
margin: 0 auto;
}
.comment_title {
color: #050C33;
text-align: center;
font-family: 'Montserrat',sans-serif;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding-top: 60px;
margin-bottom: 46px;
}
.comment {
padding: 80px 80px 88px 120px;
margin: 0 auto;
display: flex;
max-width: 980px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.10);
background: #FFF;
box-shadow: 0px 4px 60px 0px rgba(161, 161, 161, 0.25);
}
.line {
margin: 0 60px;
width: 1px;
height: auto;
background: #000;
opacity: 0.2;
/* height: 100%; */
}
.comment_left {
/* padding-right: 60px; */
width: 440px;
position: relative;
}
.comment_left h6 {
max-width: 440px;
margin: 41px 0 28px 0;
color: #050C33;
font-family: 'Montserrat',sans-serif;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration-line: underline;
}
.comment_left p {
max-width: 380px;
color: #050C33;
font-family: 'Montserrat',sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.bg_left {
position: absolute;
left: 0;
top: 0;
width: 23%;
}
.swiper-pagination-fraction {
color: #E0E0E0;
font-family: "Montserrat", sans-serif;
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 28px;
display: flex;
gap: 8px;
}
.swiper-pagination-current {
color: #050C33;
}
@media only screen and (max-width: 992px) {
.comment {
padding: 30px;
flex-direction: column;
gap: 30px;
margin: 0px 20px;
}
.main_container {
padding: 0 20px;
}
.comment_title {
margin-top: 30px;
padding-top: 0;
font-size: 30px;
margin-bottom: 20px;
}
.comment_left {
width: 100%;
}
.comment_left h6 {
font-size: 20px;
}
.swiper_btns {
margin: 0 auto;
}
.line {
margin: 0;
width: 100%;
height: 1px;
}
.swiper-pagination-fraction {
font-size: 20px;
gap: 8px;
}
.swiper-pagination-fraction span {
font-size: 20px;
}
}
</style>
Не отображается код начиная с отзывов, не могу понять в чем проблема. Подскажите пожалуйста