portal swiper slider control
This commit is contained in:
parent
ec032ce8c6
commit
b0eb841047
8
public/css/app.css
vendored
8
public/css/app.css
vendored
@ -50876,6 +50876,10 @@ body{
|
|||||||
width: 8.333333%;
|
width: 8.333333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:w-auto{
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:w-3\/12{
|
.lg\:w-3\/12{
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
@ -50940,10 +50944,6 @@ body{
|
|||||||
width: 1rem;
|
width: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:w-auto{
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:w-2\/4{
|
.lg\:w-2\/4{
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
29
resources/assets/js/views/portal/apps.js
vendored
29
resources/assets/js/views/portal/apps.js
vendored
@ -66,10 +66,37 @@ const app = new Vue({
|
|||||||
if (typeof this.form.password !== 'undefined') {
|
if (typeof this.form.password !== 'undefined') {
|
||||||
this.form.password = '';
|
this.form.password = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (document.querySelector('[data-tabs-swiper]').childElementCount) {
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-tabs-slide]').forEach((item) => {
|
||||||
|
item.classList.add('swiper-slide');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
|
||||||
|
|
||||||
|
let html = `
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
${document.querySelector('[data-tabs-swiper]').innerHTML}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="swiper-button-next top-3 right-0">
|
||||||
|
<span class="material-icons">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="swiper-button-prev top-3 left-0">
|
||||||
|
<span class="material-icons">chevron_left</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.querySelector('[data-tabs-swiper]').innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
new Swiper(".swiper-links", {
|
new Swiper(".swiper-links", {
|
||||||
loop: false,
|
loop: false,
|
||||||
slidesPerView: 3,
|
slidesPerView: 1,
|
||||||
pagination: {
|
pagination: {
|
||||||
el: ".swiper-pagination",
|
el: ".swiper-pagination",
|
||||||
clickable: true
|
clickable: true
|
||||||
|
@ -28,33 +28,23 @@
|
|||||||
@php $is_active = true; @endphp
|
@php $is_active = true; @endphp
|
||||||
|
|
||||||
<x-slot name="navs">
|
<x-slot name="navs">
|
||||||
<div class="swiper swiper-links w-full">
|
<div data-tabs-swiper class="w-full flex">
|
||||||
<div class="swiper-wrapper">
|
@foreach ($payment_methods as $key => $name)
|
||||||
@foreach ($payment_methods as $key => $name)
|
@stack('invoice_{{ $key }}_tab_start')
|
||||||
@stack('invoice_{{ $key }}_tab_start')
|
<div data-tabs-slide>
|
||||||
<div class="swiper-slide">
|
|
||||||
<x-tabs.nav
|
<x-tabs.nav
|
||||||
id="{{ $name }}"
|
id="{{ $name }}"
|
||||||
@click="onChangePaymentMethodSigned('{{ $key }}')"
|
@click="onChangePaymentMethodSigned('{{ $key }}')"
|
||||||
>
|
>
|
||||||
<div class="w-24 truncate">
|
<div>
|
||||||
{{ $name }}
|
{{ $name }}
|
||||||
</div>
|
</div>
|
||||||
</x-tabs.nav>
|
</x-tabs.nav>
|
||||||
</div>
|
</div>
|
||||||
@stack('invoice_{{ $key }}_tab_end')
|
@stack('invoice_{{ $key }}_tab_end')
|
||||||
|
|
||||||
@php $is_active = false; @endphp
|
@php $is_active = false; @endphp
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-button-next top-3 right-0">
|
|
||||||
<span class="material-icons">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-button-prev top-3 left-0">
|
|
||||||
<span class="material-icons">chevron_left</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</x-slot>
|
</x-slot>
|
||||||
</div>
|
</div>
|
||||||
|
@ -26,33 +26,23 @@
|
|||||||
@php $is_active = true; @endphp
|
@php $is_active = true; @endphp
|
||||||
|
|
||||||
<x-slot name="navs">
|
<x-slot name="navs">
|
||||||
<div class="swiper swiper-links w-full">
|
<div data-tabs-swiper class="w-full flex">
|
||||||
<div class="swiper-wrapper">
|
@foreach ($payment_methods as $key => $name)
|
||||||
@foreach ($payment_methods as $key => $name)
|
@stack('invoice_{{ $key }}_tab_start')
|
||||||
@stack('invoice_{{ $key }}_tab_start')
|
<div data-tabs-slide>
|
||||||
<div class="swiper-slide">
|
<x-tabs.nav
|
||||||
<x-tabs.nav
|
id="{{ $name }}"
|
||||||
id="{{ $name }}"
|
@click="onChangePaymentMethod('{{ $key }}')"
|
||||||
@click="onChangePaymentMethod('{{ $key }}')"
|
>
|
||||||
>
|
<div>
|
||||||
<div class="w-24 truncate">
|
{{ $name }}
|
||||||
{{ $name }}
|
</div>
|
||||||
</div>
|
</x-tabs.nav>
|
||||||
</x-tabs.nav>
|
</div>
|
||||||
</div>
|
@stack('invoice_{{ $key }}_tab_end')
|
||||||
@stack('invoice_{{ $key }}_tab_end')
|
|
||||||
|
|
||||||
@php $is_active = false; @endphp
|
@php $is_active = false; @endphp
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-button-next top-3 right-0">
|
|
||||||
<span class="material-icons">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-button-prev top-3 left-0">
|
|
||||||
<span class="material-icons">chevron_left</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</x-slot>
|
</x-slot>
|
||||||
</div>
|
</div>
|
||||||
|
@ -35,16 +35,15 @@
|
|||||||
@php $is_active = true; @endphp
|
@php $is_active = true; @endphp
|
||||||
|
|
||||||
<x-slot name="navs">
|
<x-slot name="navs">
|
||||||
<div class="swiper swiper-links w-full">
|
<div data-tabs-swiper class="w-full flex">
|
||||||
<div class="swiper-wrapper">
|
|
||||||
@foreach ($payment_methods as $key => $name)
|
@foreach ($payment_methods as $key => $name)
|
||||||
@stack('invoice_{{ $key }}_tab_start')
|
@stack('invoice_{{ $key }}_tab_start')
|
||||||
<div class="swiper-slide">
|
<div data-tabs-slide>
|
||||||
<x-tabs.nav
|
<x-tabs.nav
|
||||||
id="{{ $name }}"
|
id="{{ $name }}"
|
||||||
@click="onChangePaymentMethodSigned('{{ $key }}')"
|
@click="onChangePaymentMethodSigned('{{ $key }}')"
|
||||||
>
|
>
|
||||||
<div class="w-24 truncate">
|
<div>
|
||||||
{{ $name }}
|
{{ $name }}
|
||||||
</div>
|
</div>
|
||||||
</x-tabs.nav>
|
</x-tabs.nav>
|
||||||
@ -53,15 +52,6 @@
|
|||||||
|
|
||||||
@php $is_active = false; @endphp
|
@php $is_active = false; @endphp
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-button-next top-3 right-0">
|
|
||||||
<span class="material-icons">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-button-prev top-3 left-0">
|
|
||||||
<span class="material-icons">chevron_left</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</x-slot>
|
</x-slot>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user