804 lines
59 KiB
PHP
804 lines
59 KiB
PHP
@push('style_css')
|
|
<style>
|
|
.max-w-5xl {
|
|
max-width: 1600px !important;
|
|
}
|
|
|
|
|
|
.slider-container {
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
scroll-snap-type: x mandatory;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.slider-item {
|
|
flex: 0 0 80%;
|
|
min-width: 80%;
|
|
scroll-snap-align: start;
|
|
margin-left: 1%;
|
|
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
|
|
@section('title')
|
|
مجله خبری سرمایه گذاری اهرم - آموزش ارز دیجیتال و اخبار روز
|
|
@endsection
|
|
@section('metaSEO')
|
|
<meta name="description"
|
|
content="در مجله خبری سرمایه گذاری اهرم میتوانید به مقالات تخصصی درباره آموزش ارزهای دیجیتال و بلاکچین و پیگیری اخبار جدید دسترسی داشته باشید." />
|
|
<link rel="canonical" href="{{ env('APP_URL') }}/" />
|
|
<meta property="og:locale" content="fa_IR" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="مجله خبری سرمایه گذاری اهرم - آموزش ارز دیجیتال و اخبار روز" />
|
|
<meta property="og:description"
|
|
content="در مجله خبری سرمایه گذاری اهرم میتوانید به مقالات تخصصی درباره آموزش ارزهای دیجیتال و بلاکچین و پیگیری اخبار جدید دسترسی داشته باشید." />
|
|
<meta property="og:url" content="{{ env('APP_URL') }}/" />
|
|
<meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم " />
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org/",
|
|
"@type": "WebSite",
|
|
"name": "سرمایه گذاری اهرم",
|
|
"url": "/",
|
|
"potentialAction": {
|
|
"@type": "SearchAction",
|
|
"target": "https://ahrominvest.ir/mag/search?q={search_term_string}",
|
|
"query-input": "required name=search_term_string"
|
|
}
|
|
}
|
|
</script>
|
|
@endsection
|
|
|
|
<div class="mt-10 md:mt-0">
|
|
<button
|
|
class="fixed hidden left-4 bottom-4 z-20 rounded-2xl bg-ahrom p-3 text-white opacity-0 transition-opacity ease-out lg:bottom-6 lg:left-6 lg:p-4"
|
|
id="btnGoTop" title="Go to top">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
|
</svg>
|
|
</button>
|
|
@if (count($blogs2) > 0)
|
|
<div href="#"
|
|
class="text-black hidden mb-3 font-bold px-4 pt-10 lg:my-8 text-[16px] lg:text-[20px] text-start items-center gap-2">
|
|
<span> مطالب منتخب</span>
|
|
</div>
|
|
<div x-cloak x-show="window.innerWidth > 1024 "
|
|
class="visible relative z-10 mx-auto max-w-5xl mb-5 flex-col items-center px-4 lg:flex-row lg:justify-between no-scrollbar">
|
|
<div class=" w-full mt-3">
|
|
@php
|
|
$step = 0;
|
|
@endphp
|
|
<div
|
|
class="lg:grid mb-0 mt-5 lg:my-5 flex lg:grid-cols-2 gap-4 lg:gap-1 lg:h-[60vh] overflow-scroll lg:overflow-hidden no-scrollbar">
|
|
@foreach ($blogs2 as $key => $item)
|
|
@php
|
|
if ($step == 0) {
|
|
$count = 0;
|
|
$step = 1;
|
|
}
|
|
@endphp
|
|
@endforeach
|
|
@if (isset($blogs2[$count]) )
|
|
<div lazy class="col-span-1 grid-cols-1 h-full ">
|
|
<div
|
|
class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto w-[300px]">
|
|
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}" wire:navigate
|
|
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
|
<img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
|
|
alt="{{ $blogs2[$count]->slug }}" class="bg-cover bg-center w-full h-full ">
|
|
</a>
|
|
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}" wire:navigate>
|
|
<div class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
|
|
@if (true)
|
|
<div
|
|
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
viewBox="0 0 576 512">
|
|
<path fill="#ffffff"
|
|
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
<div class="h-full flex flex-col gap-2 justify-end">
|
|
|
|
<div class="text-white text-sm">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
@php
|
|
$count++;
|
|
@endphp
|
|
</div>
|
|
@endif
|
|
<div class="col-span-1 lg:grid flex lg:grid-rows-2 gap-1">
|
|
|
|
<div class="row-span-1 lg:grid lg:grid-cols-2 flex gap-4 lg:gap-1 ">
|
|
@if (isset($blogs2[$count]) )
|
|
<div class="relative group rounded-xl overflow-hidden h-full lg:w-auto w-[300px]">
|
|
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
|
wire:navigate
|
|
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
|
<img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
|
|
alt="{{ $blogs2[$count]->slug }}"
|
|
class="bg-cover bg-center w-full h-full ">
|
|
</a>
|
|
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
|
wire:navigate>
|
|
<div class="relative p-7 h-full text-white rounded-xl overflow-hidden">
|
|
@if (true)
|
|
<div
|
|
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20"
|
|
height="20" viewBox="0 0 576 512">
|
|
<path fill="#ffffff"
|
|
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
<div class="h-full flex flex-col gap-2 justify-end">
|
|
|
|
<div class="text-white text-sm">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
@php
|
|
$count++;
|
|
@endphp
|
|
@endif
|
|
@if (isset($blogs2[$count]) )
|
|
<div class="relative group rounded-xl overflow-hidden h-full lg:w-auto w-[300px]">
|
|
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
|
wire:navigate
|
|
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
|
<img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
|
|
alt="{{ $blogs2[$count]->slug }}"
|
|
class="bg-cover bg-center w-full h-full ">
|
|
</a>
|
|
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
|
wire:navigate>
|
|
<div class="relative p-7 h-full text-white rounded-xl overflow-hidden">
|
|
@if (true)
|
|
<div
|
|
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20"
|
|
height="20" viewBox="0 0 576 512">
|
|
<path fill="#ffffff"
|
|
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
<div class="h-full flex flex-col gap-2 justify-end">
|
|
|
|
<div class="text-white text-sm">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
@php
|
|
$count++;
|
|
@endphp
|
|
@endif
|
|
</div>
|
|
|
|
<div class="row-span-1 lg:grid lg:grid-cols-2 flex gap-4 lg:gap-1">
|
|
{{-- order 3 --}}
|
|
@if (isset($blogs2[$count]) )
|
|
<div class="col-span-1 ">
|
|
<div
|
|
class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto w-[300px]">
|
|
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
|
wire:navigate
|
|
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
|
<img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
|
|
alt="{{ $blogs2[$count]->slug }}"
|
|
class="bg-cover bg-center w-full h-full ">
|
|
</a>
|
|
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
|
wire:navigate>
|
|
<div
|
|
class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
|
|
@if (true)
|
|
<div
|
|
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20"
|
|
height="20" viewBox="0 0 576 512">
|
|
<path fill="#ffffff"
|
|
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
<div class="h-full flex flex-col gap-2 justify-end">
|
|
<div class=" flex-wrap gap-2 items-center hidden lg:flex">
|
|
|
|
</div>
|
|
|
|
<div class="text-white text-sm">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
@php
|
|
$count++;
|
|
@endphp
|
|
</div>
|
|
@endif
|
|
|
|
|
|
@if (isset($blogs2[$count]) )
|
|
<div class="col-span-1 ">
|
|
<div
|
|
class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto w-[300px]">
|
|
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
|
wire:navigate
|
|
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
|
<img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
|
|
alt="{{ $blogs2[$count]->slug }}"
|
|
class="bg-cover bg-center w-full h-full ">
|
|
</a>
|
|
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
|
wire:navigate>
|
|
<div
|
|
class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
|
|
@if (true)
|
|
<div
|
|
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20"
|
|
height="20" viewBox="0 0 576 512">
|
|
<path fill="#ffffff"
|
|
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
<div class="h-full flex flex-col gap-2 justify-end">
|
|
<div class=" flex-wrap gap-2 items-center hidden lg:flex">
|
|
|
|
</div>
|
|
|
|
<div class="text-white text-sm">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
@php
|
|
$count++;
|
|
@endphp
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div x-cloak x-data="{ show: window.innerWidth < 1024 }" x-show="show"
|
|
class="visible relative z-10 mt-10 mb-5 mx-auto max-w-5xl flex-col items-center px-4 lg:flex-row lg:justify-between no-scrollbar">
|
|
<div class="slider-container gap-4 no-scrollbar w-full ">
|
|
@php
|
|
$step = 0;
|
|
@endphp
|
|
@foreach ($blogs2 as $key => $item)
|
|
@if (isset($item) )
|
|
<div class="col-span-1 grid-cols-1 h-full slider-item">
|
|
<div class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto ">
|
|
<a href="{{ route('detail', ['slug' => $item->slug]) . '/' }}" wire:navigate
|
|
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
|
<img src="{{ env('APP_URL_IMAGE').'images/'.$item->image }}"
|
|
alt="{{ $item->slug }}"
|
|
class="bg-cover bg-center w-full h-full">
|
|
</a>
|
|
<a href="{{ route('detail', ['slug' => $item->slug]) . '/' }}" wire:navigate>
|
|
<div class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
|
|
@if (true)
|
|
<div
|
|
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
viewBox="0 0 576 512">
|
|
<path fill="#ffffff"
|
|
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
<div class="h-full flex flex-col gap-2 justify-end">
|
|
|
|
<div class="text-white text-sm"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div
|
|
class="visible relative z-10 mx-auto flex max-w-5xl flex-col items-center mt-8 px-4 lg:flex-col lg:justify-between">
|
|
<div class="w-full mb-12">
|
|
<div class="mb-4 border-b align-items-center justify-between flex ">
|
|
<h2 class="inline-block text-[18px] pb-2 border-b-2 rounded-t-lg text-[#0075e7] border-[#0075e7] ">
|
|
مطالب</h2>
|
|
{{-- <div class="md:block hidden">--}}
|
|
{{-- @if ($selectedCategoryPosts)--}}
|
|
{{-- @foreach ($categories as $item)--}}
|
|
{{-- @if (count($item->blogs) > 0 && $selectedCategoryPosts == $item->id)--}}
|
|
{{-- <a class="text-[#16205b] rounded-xl px-2 text-[16px]"--}}
|
|
{{-- href=" {{ route('CategoryBlog.index', ['slug' => $item->slug]) . '/' }}"--}}
|
|
{{-- wire:navigate>مشاهده همه</a>--}}
|
|
{{-- @endif--}}
|
|
{{-- @endforeach--}}
|
|
{{-- @else--}}
|
|
{{-- <a class="text-[#16205b] rounded-xl px-2 text-[16px]"--}}
|
|
{{-- href=" {{ route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate>مشاهده--}}
|
|
{{-- همه</a>--}}
|
|
{{-- @endif--}}
|
|
{{-- </div>--}}
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
|
|
<button wire:click="resetCategory('posts')"
|
|
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
|
|
:class="{
|
|
'bg-blue-100 text-blue-600': !$wire.selectedCategoryPosts,
|
|
'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryPosts
|
|
}">
|
|
آخرین مطالب
|
|
</button>
|
|
|
|
@foreach ($categories->sortByDesc('priority') as $item)
|
|
@if (count($item->blogs) > 0)
|
|
<button wire:click="selectCategory({{ $item->id }}, 'posts')"
|
|
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
|
|
:class="{
|
|
'bg-blue-100 text-blue-600': $wire.selectedCategoryPosts == {{ $item->id }},
|
|
'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryPosts != {{ $item->id }}
|
|
}">
|
|
{{ $item->title }}
|
|
</button>
|
|
@endif
|
|
@endforeach
|
|
<a class="rounded-md transition-colors duration-200 py-1 px-3 font-semibold text-[16px] mr-auto bg-gray-100 hover:bg-gray-200 hidden md:block"
|
|
href="{{ isset($selectedRoutePosts) ? $selectedRoutePosts : route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate>مشاهده
|
|
همه</a>
|
|
</div>
|
|
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
|
|
@if($selectedCategoryPosts)
|
|
@foreach($this->getCategoryItems($selectedCategoryPosts, 'posts') as $blog)
|
|
<div
|
|
class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
|
|
class="relative w-[80px] md:w-full">
|
|
<div x-data="{
|
|
loaded: false,
|
|
init() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !this.loaded) {
|
|
const img = new Image();
|
|
img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
|
|
img.onload = () => {
|
|
this.loaded = true;
|
|
observer.unobserve(this.$el);
|
|
};
|
|
}
|
|
});
|
|
}, {
|
|
rootMargin: '200px'
|
|
});
|
|
observer.observe(this.$el);
|
|
}
|
|
}"
|
|
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
|
|
<img x-cloak x-show="loaded"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
:src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
|
|
alt="{{ $blog->subject }}"
|
|
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
|
loading="lazy">
|
|
</div>
|
|
</a>
|
|
<div
|
|
class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
|
|
class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
|
|
{!! $blog->subject !!}
|
|
</a>
|
|
<div class="md:block hidden text-[#16205b]">
|
|
@php
|
|
$preview = Str::limit($blog->preview, 80, '...');
|
|
@endphp
|
|
{!! $preview !!}
|
|
</div>
|
|
<div class="flex gap-1 text-white md:mt-auto">
|
|
<div class="hidden md:flex flex-col justify-center">
|
|
<img class="bg-cover bg-center rounded-full size-8"
|
|
src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
|
|
</div>
|
|
<div class="flex items-center justify-between w-full flex-wrap">
|
|
<div class="flex items-center gap-1">
|
|
<div class="text-xs text-gray-600 flex-col justify-center hidden md:flex">
|
|
{{ $blog->user->full_name }}
|
|
</div>
|
|
<span style="font-variation-settings: 'wght' 500;"
|
|
class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
|
|
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
|
{{ jalaliDate($blog->published_at, '%d %B، %Y') }}
|
|
</div>
|
|
</div>
|
|
<div class="text-xs text-gray-600 hidden md:flex items-center gap-1">
|
|
<svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
|
|
<path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
|
|
<path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
|
|
<path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
|
|
</svg>
|
|
<span class="text-nowrap text-xs text-gray-600 mt-[2px]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
@foreach ($lastNewsPosts as $blog)
|
|
<div
|
|
class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
|
|
class="relative w-[80px] md:w-full">
|
|
<div x-data="{
|
|
loaded: false,
|
|
init() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !this.loaded) {
|
|
const img = new Image();
|
|
img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
|
|
img.onload = () => {
|
|
this.loaded = true;
|
|
observer.unobserve(this.$el);
|
|
};
|
|
}
|
|
});
|
|
}, {
|
|
rootMargin: '200px'
|
|
});
|
|
observer.observe(this.$el);
|
|
}
|
|
}"
|
|
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
|
|
<img x-cloak x-show="loaded"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
:src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
|
|
alt="{{ $blog->subject }}"
|
|
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
|
loading="lazy">
|
|
</div>
|
|
</a>
|
|
<div
|
|
class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
|
|
class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
|
|
{!! $blog->subject !!}
|
|
</a>
|
|
<div class="md:block hidden text-[#16205b]">
|
|
@php
|
|
$preview = Str::limit($blog->preview, 80, '...');
|
|
@endphp
|
|
{!! $preview !!}
|
|
</div>
|
|
<div class="flex gap-1 text-white md:mt-auto">
|
|
<div class="hidden md:flex flex-col justify-center">
|
|
<img class="bg-cover bg-center rounded-full size-8"
|
|
src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
|
|
</div>
|
|
<div class="flex items-center justify-between w-full flex-wrap">
|
|
<div class="flex items-center gap-1">
|
|
<div class="text-xs text-gray-600 flex-col justify-center hidden md:flex">
|
|
{{ $blog->user->full_name }}
|
|
</div>
|
|
<span style="font-variation-settings: 'wght' 500;"
|
|
class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
|
|
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
|
{{ jalaliDate($blog->published_at, '%d %B، %Y') }}
|
|
</div>
|
|
</div>
|
|
<div class="text-xs text-gray-600 flex items-center gap-1">
|
|
<svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
|
|
<path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
|
|
<path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
|
|
<path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
|
|
</svg>
|
|
<span class="text-nowrap text-xs text-gray-600 mt-[2px]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
|
|
<div class="md:hidden block">
|
|
@if ($selectedCategoryPosts)
|
|
@foreach ($categories as $item)
|
|
@if (count($item->blogs()->where('status', 1)->get()) > 0 && $selectedCategoryPosts == $item->id)
|
|
<a href="{{ route('CategoryBlog.index', ['slug' => $item->slug]) . '/' }}" wire:navigate
|
|
class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
|
|
مشاهده مطالب بیشتر </a>
|
|
@endif
|
|
@endforeach
|
|
@else
|
|
<a href="{{ route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate
|
|
class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
|
|
مشاهده مطالب بیشتر </a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="mb-4 border-b align-items-center justify-between flex ">
|
|
<h2 class="inline-block text-[18px] pb-2 border-b-2 rounded-t-lg text-[#0075e7] border-[#0075e7] ">
|
|
اخبار</h2>
|
|
{{-- <div class="md:block hidden">--}}
|
|
{{-- @if ($selectedCategoryNews)--}}
|
|
{{-- @foreach ($categorieNews as $item)--}}
|
|
{{-- @if (!is_null($item->parent_id) && $selectedCategoryNews == $item->id)--}}
|
|
{{-- <a class="text-[#16205b] rounded-xl px-2 text-[16px]"--}}
|
|
{{-- href=" {{ route('NewsCategory.show', ['slug' => $item->slug]) . '/' }}"--}}
|
|
{{-- wire:navigate>مشاهده همه</a>--}}
|
|
{{-- @endif--}}
|
|
{{-- @endforeach--}}
|
|
{{-- @else--}}
|
|
{{-- <a class="text-[#16205b] rounded-xl px-2 text-[16px]"--}}
|
|
{{-- href=" {{ route('NewsCategory.index') . '/' }}" wire:navigate>مشاهده همه</a>--}}
|
|
{{-- @endif--}}
|
|
{{-- </div>--}}
|
|
</div>
|
|
<div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
|
|
<button wire:click="resetCategory('news')"
|
|
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
|
|
:class="{
|
|
'bg-blue-100 text-blue-600': !$wire.selectedCategoryNews,
|
|
'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryNews
|
|
}">
|
|
آخرین اخبار
|
|
</button>
|
|
|
|
@foreach ($categorieNews->sortByDesc('priority') as $item)
|
|
@if (!is_null($item->parent_id))
|
|
@php
|
|
$parent = App\Models\Category::where('id', $item->parent_id)->first();
|
|
@endphp
|
|
<button wire:click="selectCategory({{ $item->id }}, 'news')"
|
|
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
|
|
:class="{
|
|
'bg-blue-100 text-blue-600': $wire.selectedCategoryNews == {{ $item->id }},
|
|
'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryNews != {{ $item->id }}
|
|
}">
|
|
{{ $parent->title }} {{ $item->title }}
|
|
</button>
|
|
@endif
|
|
@endforeach
|
|
<a class="rounded-md transition-colors duration-200 py-1 px-3 font-semibold text-[16px] mr-auto bg-gray-100 hover:bg-gray-200 hidden md:block"
|
|
href="{{ isset($selectedRouteNews) ? $selectedRouteNews : route('CategoryBlog.index', ['slug' => 'news']) . '/' }}" wire:navigate>مشاهده
|
|
همه</a>
|
|
</div>
|
|
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
|
|
@if($selectedCategoryNews)
|
|
@foreach($this->getCategoryItems($selectedCategoryNews, 'news') as $blog)
|
|
<div
|
|
class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
|
|
class="relative w-[80px] md:w-full">
|
|
<div x-data="{
|
|
loaded: false,
|
|
init() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !this.loaded) {
|
|
const img = new Image();
|
|
img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
|
|
img.onload = () => {
|
|
this.loaded = true;
|
|
observer.unobserve(this.$el);
|
|
};
|
|
}
|
|
});
|
|
}, {
|
|
rootMargin: '200px'
|
|
});
|
|
observer.observe(this.$el);
|
|
}
|
|
}"
|
|
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
|
|
<img x-cloak x-show="loaded"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
:src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
|
|
alt="{{ $blog->subject }}"
|
|
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
|
loading="lazy">
|
|
</div>
|
|
</a>
|
|
<div
|
|
class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
|
|
class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
|
|
{!! $blog->subject !!}
|
|
</a>
|
|
<div class="md:block hidden text-[#16205b]">
|
|
@php
|
|
$preview = Str::limit($blog->preview, 80, '...');
|
|
@endphp
|
|
{!! $preview !!}
|
|
</div>
|
|
<div class="flex gap-1 text-white md:mt-auto">
|
|
<div class="hidden md:flex flex-col justify-center">
|
|
<img class="bg-cover bg-center rounded-full size-8"
|
|
src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
|
|
</div>
|
|
<div class="flex items-center justify-between w-full flex-wrap">
|
|
<div class="flex items-center gap-1">
|
|
<div class="text-xs text-gray-600 flex-col justify-center hidden md:flex">
|
|
{{ $blog->user->full_name }}
|
|
</div>
|
|
<span style="font-variation-settings: 'wght' 500;"
|
|
class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
|
|
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
|
{{ jalaliDate($blog->published_at, '%d %B، %Y') }}
|
|
</div>
|
|
</div>
|
|
<div class="text-xs text-gray-600 flex items-center gap-1">
|
|
<svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
|
|
<path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
|
|
<path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
|
|
<path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
|
|
</svg>
|
|
<span class="text-nowrap text-xs text-gray-600 mt-[2px]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
@foreach ($lastNewsArticles as $blog)
|
|
<div
|
|
class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
|
|
class="relative w-[80px] md:w-full">
|
|
<div x-data="{
|
|
loaded: false,
|
|
init() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !this.loaded) {
|
|
const img = new Image();
|
|
img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
|
|
img.onload = () => {
|
|
this.loaded = true;
|
|
observer.unobserve(this.$el);
|
|
};
|
|
}
|
|
});
|
|
}, {
|
|
rootMargin: '200px'
|
|
});
|
|
observer.observe(this.$el);
|
|
}
|
|
}"
|
|
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
|
|
<img x-cloak x-show="loaded"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
:src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
|
|
alt="{{ $blog->subject }}"
|
|
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
|
loading="lazy">
|
|
</div>
|
|
</a>
|
|
<div
|
|
class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
|
|
class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
|
|
{!! $blog->subject !!}
|
|
</a>
|
|
<div class="md:block hidden text-[#16205b]">
|
|
@php
|
|
$preview = Str::limit($blog->preview, 80, '...');
|
|
@endphp
|
|
{!! $preview !!}
|
|
</div>
|
|
<div class="flex gap-1 text-white md:mt-auto">
|
|
<div class="hidden md:flex flex-col justify-center">
|
|
<img class="bg-cover bg-center rounded-full size-8"
|
|
src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
|
|
</div>
|
|
<div class="flex items-center justify-between w-full flex-wrap">
|
|
<div class="flex items-center gap-1">
|
|
<div class="text-xs text-gray-600 flex-col justify-center hidden md:flex">
|
|
{{ $blog->user->full_name }}
|
|
</div>
|
|
<span style="font-variation-settings: 'wght' 500;"
|
|
class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
|
|
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
|
{{ jalaliDate($blog->published_at, '%d %B، %Y') }}
|
|
</div>
|
|
</div>
|
|
<div class="text-xs text-gray-600 flex items-center gap-1">
|
|
<svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
|
|
<path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
|
|
<path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
|
|
<path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
|
|
</svg>
|
|
<span class="text-nowrap text-xs text-gray-600 mt-[2px]" lang="fa">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
|
|
|
|
<div class="md:hidden block">
|
|
@if ($selectedCategoryNews)
|
|
@foreach ($categorieNews as $item)
|
|
@if (!is_null($item->parent_id) && $selectedCategoryNews == $item->id)
|
|
<a href="{{ cleanRouteUrl('NewsCategory.show', ['slug' => $item->slug]) . '/' }}"
|
|
wire:navigate
|
|
class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
|
|
مشاهده اخبار بیشتر </a>
|
|
@endif
|
|
@endforeach
|
|
@else
|
|
<a href="{{ cleanRouteUrl('NewsCategory.index') . '/' }}" wire:navigate
|
|
class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
|
|
مشاهده اخبار بیشتر </a>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div> |